/* ============================================================
   listado_revisiones.css
   CSS específico para la vista de Historial de Revisiones.
   Cargado DESPUÉS de layout.css, sidebar.css y global.css
   para sobreescribir conflictos sin tocar los archivos globales.
   ============================================================ */

/* ── 1. VARIABLES LOCALES ─────────────────────────────────── */
:root {
    --color-primary:        #011e41;
    --color-secondary:      #3b82f6;
    --color-bg:             #f4f7f9;
    --color-card:           #ffffff;
    --color-text:           #1e293b;
    --color-muted:          #64748b;
    --color-border:         #e2e8f0;
    --color-success:        #10b981;
    --color-warning:        #f59e0b;
    --color-danger:         #ef4444;

    --color-type-botiquin:  #3b82f6;
    --color-type-ext-inicio:#10b981;
    --color-type-ext-fin:   #ef4444;
}

/* ── 2. CORRECCIÓN CRÍTICA DE MAIN ───────────────────────────
   layout.css define main con justify-content: center y
   align-items: center. Cuando el contenido supera el alto del
   viewport, flexbox lo desborda hacia ARRIBA.
   Aquí revertimos esos valores para esta página.
   ─────────────────────────────────────────────────────────── */
main {
    justify-content:    flex-start  !important;
    align-items:        stretch     !important;
    flex-direction:     column      !important;
    padding:            24px        !important;
    overflow-y:         auto        !important;
    overflow-x:         hidden      !important;
    background-color:   var(--color-bg) !important;
    /* Evita que el contenido quede tapado por el top-bar */
    box-sizing:         border-box  !important;
}

/* ── 3. CONTENEDOR INTERNO ───────────────────────────────── */
.custom-container {
    width:          100%;
    max-width:      1200px;
    margin:         0 auto;
    display:        flex;
    flex-direction: column;
    gap:            24px;
    padding-bottom: 40px;
}

/* ── 4. DASHBOARD DEL TURNO ACTUAL ──────────────────────── */
.dashboard-container {
    background:     var(--color-card);
    border-radius:  12px;
    padding:        20px 24px;
    box-shadow:     0 4px 6px -1px rgba(0,0,0,0.05);
    border-top:     4px solid var(--color-primary);
    display:        none; /* JS lo muestra si hay datos */
}

.dash-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   16px;
    padding-bottom:  12px;
    border-bottom:   1px solid var(--color-border);
}

.dash-header h3 {
    margin:      0;
    font-size:   1.1rem;
    color:       var(--color-primary);
    display:     flex;
    align-items: center;
    gap:         8px;
}

.dash-badge-turno {
    background:    var(--color-primary);
    color:         white;
    padding:       4px 12px;
    border-radius: 20px;
    font-size:     0.85rem;
    font-weight:   700;
}

.dash-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap:                   16px;
}

.dash-card {
    border:         1px solid var(--color-border);
    border-radius:  8px;
    padding:        12px;
    background:     #f8fafc;
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.dash-card-title {
    font-weight: 800;
    color:       var(--color-primary);
    font-size:   1.05rem;
    margin:      0;
    display:     flex;
    align-items: center;
    gap:         6px;
}

.dash-tasks {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.task-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    font-size:       0.85rem;
    font-weight:     600;
    padding:         6px 10px;
    border-radius:   6px;
    background:      white;
    border:          1px solid var(--color-border);
}

.task-row.done {
    border-color: var(--color-success);
    background:   #f0fdf4;
    color:        var(--color-success);
}

.task-row.pending {
    border-color: var(--color-warning);
    background:   #fffbeb;
    color:        #d97706;
}

/* ── 5. BARRA DE FILTROS Y BUSCADOR ─────────────────────── */
.filters-bar {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:             16px;
    flex-wrap:       wrap;
}

.type-filters {
    display:   flex;
    gap:       10px;
    flex-wrap: wrap;
}

.filter-btn {
    background:    var(--color-card);
    border:        1px solid var(--color-border);
    color:         var(--color-muted);
    padding:       8px 16px;
    border-radius: 8px;
    font-weight:   600;
    font-size:     0.9rem;
    cursor:        pointer;
    transition:    all 0.2s;
    display:       flex;
    align-items:   center;
    gap:           6px;
}

.filter-btn:hover {
    border-color: var(--color-primary);
    color:        var(--color-primary);
}

.filter-btn.active {
    background:   var(--color-primary);
    color:        white;
    border-color: var(--color-primary);
}

.search-container {
    position:  relative;
    flex-grow: 1;
    max-width: 350px;
}

.search-container i {
    position:  absolute;
    left:      14px;
    top:       50%;
    transform: translateY(-50%);
    color:     var(--color-muted);
}

.search-container input {
    width:         100%;
    padding:       10px 14px 10px 40px;
    border:        1px solid var(--color-border);
    border-radius: 8px;
    font-size:     0.95rem;
    outline:       none;
    transition:    all 0.3s;
    font-family:   'Montserrat', sans-serif;
}

.search-container input:focus {
    border-color: var(--color-secondary);
    box-shadow:   0 0 0 3px rgba(59,130,246,0.2);
}

/* ── 6. GRID DE TARJETAS DE REVISIÓN ────────────────────── */
.records-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap:                   20px;
}

.record-card {
    background:     var(--color-card);
    border-radius:  12px;
    border:         1px solid var(--color-border);
    overflow:       hidden;
    box-shadow:     0 2px 4px rgba(0,0,0,0.02);
    transition:     transform 0.2s, box-shadow 0.2s;
    display:        flex;
    flex-direction: column;
    animation:      rv-fadeIn 0.4s ease-out;
    position:       relative;
}

.record-card:hover {
    transform:  translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}

/* Línea de color superior según tipo */
.card-type-line              { height: 4px; width: 100%; }
.type-line-botiquin          { background-color: var(--color-type-botiquin); }
.type-line-ext-inicio        { background-color: var(--color-type-ext-inicio); }
.type-line-ext-fin           { background-color: var(--color-type-ext-fin); }

/* Cabecera de la tarjeta */
.rc-header {
    padding:         16px 20px;
    background:      linear-gradient(to right, #ffffff, #f8fafc);
    border-bottom:   1px solid var(--color-border);
    display:         flex;
    justify-content: space-between;
    align-items:     center;
}

.rc-indicativo {
    font-size:   1.2rem;
    font-weight: 800;
    color:       var(--color-primary);
    margin:      0;
    display:     flex;
    align-items: center;
    gap:         8px;
}

.rc-date {
    font-size:     0.75rem;
    font-weight:   700;
    color:         var(--color-muted);
    background:    #e2e8f0;
    padding:       4px 8px;
    border-radius: 6px;
    white-space:   nowrap;
}

/* Cuerpo de la tarjeta */
.rc-body {
    padding:        20px;
    display:        flex;
    flex-direction: column;
    gap:            12px;
    flex:           1;
}

/* Badge de tipo */
.type-badge {
    display:      inline-flex;
    align-items:  center;
    gap:          6px;
    padding:      6px 10px;
    border-radius:6px;
    font-size:    0.8rem;
    font-weight:  800;
    color:        white;
    align-self:   flex-start;
    margin-bottom:8px;
}
.badge-botiquin   { background-color: var(--color-type-botiquin); }
.badge-ext-inicio { background-color: var(--color-type-ext-inicio); }
.badge-ext-fin    { background-color: var(--color-type-ext-fin); }

/* Filas de información */
.rc-info-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    font-size:       0.9rem;
}

.rc-label {
    color:       var(--color-muted);
    display:     flex;
    align-items: center;
    gap:         8px;
    font-weight: 600;
}

.rc-value {
    font-weight: 700;
    color:       var(--color-text);
}

.fuel-badge {
    display:      inline-flex;
    align-items:  center;
    gap:          4px;
    padding:      4px 8px;
    border-radius:6px;
    font-size:    0.8rem;
    font-weight:  800;
    color:        white;
}

/* Pie de la tarjeta */
.rc-footer {
    padding:      16px 20px;
    border-top:   1px solid var(--color-border);
    background:   #f8fafc;
}

.btn-view {
    width:           100%;
    background:      white;
    border:          1px solid var(--color-primary);
    color:           var(--color-primary);
    padding:         10px;
    border-radius:   8px;
    font-weight:     700;
    font-size:       0.9rem;
    font-family:     'Montserrat', sans-serif;
    cursor:          pointer;
    transition:      all 0.2s;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
}

.btn-view:hover {
    background: var(--color-primary);
    color:      white;
}

/* ── 7. ESTADO VACÍO / SIN RESULTADOS ───────────────────── */
.status-container {
    grid-column:     1 / -1;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         60px 20px;
    color:           var(--color-muted);
    background:      var(--color-card);
    border-radius:   12px;
    border:          1px dashed var(--color-border);
    text-align:      center;
}

.status-container i {
    font-size:     3rem;
    margin-bottom: 16px;
    color:         #cbd5e0;
}

.status-container h3 {
    margin:      0 0 8px;
    font-size:   1.1rem;
    color:       var(--color-text);
}

.status-container p {
    margin:    0;
    font-size: 0.9rem;
}

/* ── 8. ANIMACIÓN DE ENTRADA ─────────────────────────────
   Usamos nombre prefijado (rv-) para no colisionar con
   cualquier @keyframes fadeIn que pueda existir en global.css
   ─────────────────────────────────────────────────────────── */
@keyframes rv-fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── 9. RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 768px) {
    main {
        padding: 16px !important;
    }

    .filters-bar {
        flex-direction: column-reverse;
        align-items:    stretch;
    }

    .search-container {
        max-width: 100%;
    }

    .type-filters {
        justify-content: center;
    }

    .records-grid {
        grid-template-columns: 1fr;
    }

    .dash-grid {
        grid-template-columns: 1fr;
    }
}