/* ============================================
   ESTILO CLISHEA PARA TABLAS DE ELEVA
   Versión corregida
   ============================================ */

/* Contenedor del filtro de búsqueda */
.dataTables_wrapper .dataTables_filter {
    float: right;
    margin-bottom: 1.25rem;
}

.dataTables_wrapper .dataTables_filter label {
    color: #e0e0e0;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* CAMPO DE BÚSQUEDA */
.dataTables_wrapper .dataTables_filter input {
    background: #1e1e1e;
    border: 2px solid #6c757d;
    border-radius: 30px;
    padding: 8px 18px;
    color: #ffffff;
    width: 260px;
    transition: all 0.2s ease;
}

.dataTables_wrapper .dataTables_filter input:focus {
    outline: none;
    border-color: #F28422;
    box-shadow: 0 0 0 2px rgba(242, 132, 34, 0.3);
}

.dataTables_wrapper .dataTables_filter input::placeholder {
    color: #8B8B8B;
}

/* Selector de cantidad por página - CORREGIDO (altura adecuada) */
.dataTables_wrapper .dataTables_length {
    float: left;
    margin-bottom: 1.25rem;
}

.dataTables_wrapper .dataTables_length label {
    color: #e0e0e0;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dataTables_wrapper .dataTables_length select {
    background: #1e1e1e;
    border: 2px solid #6c757d;
    border-radius: 30px;
    padding: 6px 32px 6px 16px;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B8B8B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    font-size: 0.8rem;
    min-width: 70px;
}

.dataTables_wrapper .dataTables_length select:hover {
    border-color: #F28422;
}

.dataTables_wrapper .dataTables_length select:focus {
    outline: none;
    border-color: #F28422;
}

/* Información de resultados */
.dataTables_wrapper .dataTables_info {
    color: #8B8B8B;
    font-size: 0.85rem;
    padding-top: 1.25rem;
    clear: both;
}

/* Paginación - BOTONES MÁS SUTILES */
.dataTables_wrapper .dataTables_paginate {
    float: right;
    padding-top: 1.25rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 4px 10px;
    margin: 0 2px;
    border-radius: 20px;
    background: transparent;
    color: #b0b0b0 !important;
    border: none;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #F28422;
    color: #000000 !important;
    border-radius: 20px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(242, 132, 34, 0.2);
    color: #F28422 !important;
    border-radius: 20px;
}

/* Limpiar floats */
.dataTables_wrapper::after {
    content: "";
    clear: both;
    display: table;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length {
        float: none;
        text-align: center;
        margin-bottom: 1rem;
    }
    .dataTables_wrapper .dataTables_filter label,
    .dataTables_wrapper .dataTables_length label {
        justify-content: center;
    }
    .dataTables_wrapper .dataTables_paginate {
        float: none;
        text-align: center;
        margin-top: 1rem;
    }
    .dataTables_wrapper .dataTables_info {
        text-align: center;
    }
    
    /* Tabla responsive - scroll horizontal */
    .table-responsive {
        overflow-x: auto;
    }
    .table-clishea {
        min-width: 600px;
    }
}

@media (max-width: 480px) {
    .dataTables_wrapper .dataTables_filter input {
        width: 180px;
    }
    .dataTables_wrapper .dataTables_length select {
        min-width: 60px;
    }
}

/* ============================================
   TARJETA Y TABLA
   ============================================ */

/* Tarjeta estilo CLICHEA */
.card-clishea-list {
    background: #141414;
    border-radius: 16px;
    border: 1px solid #2A2A2A;
    overflow: hidden;
}

.card-clishea-list .card-header {
    background: #1a1a1a;
    border-bottom: 1px solid #2A2A2A;
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.card-clishea-list .card-header h2 {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.card-clishea-list .card-body {
    padding: 1.5rem;
}

/* Tabla estilo CLICHEA */
.table-clishea {
    width: 100%;
    border-collapse: collapse;
}

.table-clishea thead th {
    background: #1a1a1a;
    color: #8B8B8B;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1rem;
    border-bottom: 1px solid #2A2A2A;
}

.table-clishea tbody td {
    padding: 1rem;
    color: #ffffff;
    font-size: 0.85rem;
    border-bottom: 1px solid #2A2A2A;
    vertical-align: middle;
}

.table-clishea tbody tr:hover {
    background: #202020;
}

/* DNI - NEGRITA pero con el mismo color */
.table-clishea tbody td:first-child {
    font-weight: 700;
    color: #ffffff;
}

/* Badges - SIN ICONOS, solo texto y color */
.badge-clishea-success {
    background: rgba(92, 184, 92, 0.2);
    color: #5cb85c;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
}

.badge-clishea-warning {
    background: rgba(240, 173, 78, 0.2);
    color: #f0ad4e;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
}

.badge-clishea-danger {
    background: rgba(217, 83, 79, 0.2);
    color: #d9534f;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
}

.badge-clishea-info {
    background: rgba(91, 192, 222, 0.2);
    color: #5bc0de;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
}