/*
 * ══════════════════════════════════════════════════════════════════════════════
 *  PATRÓN TARAHUMARA SECUNDARIO — Pantallas Operativas Internas
 *  Versión 1.0 · Junio 2026
 * ──────────────────────────────────────────────────────────────────────────────
 *  Variante del Patrón Tarahumara Santander para pantallas operativas:
 *  reportes, catálogos, filtros, grids, consultas y mantenimientos.
 *
 *  Carga AL FINAL del <head> para ganar en cascada sobre estilos anteriores.
 *  Ver: docs/ui/PATRON_TARAHUMARA_SECUNDARIO.md
 *
 *  REGLAS:
 *    • Botón primario (Buscar): Color.Error (rojo)
 *    • Botón secundario (Limpiar): Color.Default Outlined
 *    • Sin azul como acento
 *    • Acento identidad: var(--tara-primary) en líneas y bordes
 *    • No afecta otras pantallas — todo bajo .tara-secondary-* o acotado
 * ══════════════════════════════════════════════════════════════════════════════
 */

/* ══════════════════════════════════════════════════════════════════════════════
   1. PAGE WRAPPER
   ══════════════════════════════════════════════════════════════════════════════ */

.tara-secondary-page {
    position: relative;
}

/* ══════════════════════════════════════════════════════════════════════════════
   2. HEADER — Acento rojo izquierdo como línea de identidad
   Usa ::after para no interferir con border-radius del elemento.
   ══════════════════════════════════════════════════════════════════════════════ */

.tara-secondary-header {
    padding-bottom: .85rem;
    margin-bottom:  1.1rem;
    position:       relative;
    border-bottom:  1px solid color-mix(in srgb, var(--tara-primary) 12%, var(--tara-border));
}

.tara-secondary-header::after {
    content:       "";
    position:      absolute;
    bottom:        -1px;
    left:          0;
    width:         2.5rem;
    height:        2px;
    background:    var(--tara-primary);
    border-radius: 0 1px 1px 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   3. BOTÓN BUSCAR — Más prominente que ícono solo
   ══════════════════════════════════════════════════════════════════════════════ */

.tara-secondary-buscar-btn.mud-button-root {
    min-width:      100px;
    min-height:     40px;
    font-weight:    800;
    letter-spacing: .02em;
    flex-shrink:    0;
    border-radius:  10px !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   4. EMPTY STATE — Card discreta
   ══════════════════════════════════════════════════════════════════════════════ */

.tara-secondary-empty-state {
    background:    color-mix(in srgb, var(--tara-primary) 3%, var(--tara-surface)) !important;
    border:        1px solid color-mix(in srgb, var(--tara-primary) 10%, var(--tara-border)) !important;
    border-radius: 16px !important;
    padding:       2.5rem 1.5rem 3rem !important;
    margin:        .25rem 0 !important;
}

[data-theme="dark"] .tara-secondary-empty-state {
    background:   color-mix(in srgb, var(--tara-primary) 5%, var(--tara-surface)) !important;
    border-color: color-mix(in srgb, var(--tara-primary) 14%, var(--tara-border)) !important;
}

.tara-secondary-empty-icon {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           52px;
    height:          52px;
    border-radius:   16px;
    background:      color-mix(in srgb, var(--tara-primary) 8%, var(--tara-surface-raised));
    border:          1px solid color-mix(in srgb, var(--tara-primary) 14%, var(--tara-border));
    color:           var(--tara-primary-dark);
    margin-bottom:   .25rem;
    flex-shrink:     0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   5. BACKDROPS — Fallback global para position:fixed en Blazor InteractiveServer
   ──────────────────────────────────────────────────────────────────────────────
   Motivo: CSS isolation transforma `::deep .clase` a `.clase[b-hash]`.
   Los <th>/<td> de MudDataGrid y los diálogos creados en renders interactivos
   pueden no recibir [b-hash] del componente padre. Estos selectores globales
   garantizan position:fixed y display:none independientemente del scope.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Backdrop foto */
.tara-photo-dialog-backdrop {
    position:        fixed  !important;
    inset:           0      !important;
    z-index:         1400   !important;
    background:      rgba(17, 24, 39, .62);
    display:         flex   !important;
    align-items:     center !important;
    justify-content: center !important;
    padding:         1rem;
}

/* Backdrop selector de columnas */
.tara-coldlg-backdrop {
    position:        fixed  !important;
    inset:           0      !important;
    z-index:         1400   !important;
    background:      rgba(17, 24, 39, .56);
    display:         flex   !important;
    align-items:     center !important;
    justify-content: center !important;
    padding:         1rem;
}

/* ══════════════════════════════════════════════════════════════════════════════
   6. FALLBACKS CRÍTICOS — CSS isolation no alcanza estos elementos
   ══════════════════════════════════════════════════════════════════════════════ */

/* Columnas ocultas: <th>/<td> renderizados por MudDataGrid, sin scope del padre */
.tara-col-hidden {
    display: none !important;
}

/* Chip Estilo: fallback para span dentro de CellTemplate */
.tara-estilo {
    display:         inline-flex !important;
    align-items:     center;
    padding:         .15rem .55rem !important;
    background:      color-mix(in srgb, var(--tara-primary) 10%, var(--tara-surface)) !important;
    border:          1px solid color-mix(in srgb, var(--tara-primary) 22%, var(--tara-border)) !important;
    border-radius:   100px !important;
    font-size:       .79rem !important;
    font-weight:     700 !important;
    color:           var(--tara-primary-dark) !important;
    letter-spacing:  .015em;
    white-space:     nowrap;
    max-width:       130px;
    overflow:        hidden;
    text-overflow:   ellipsis;
    line-height:     1.4;
    vertical-align:  middle;
}

[data-theme="dark"] .tara-estilo {
    background:   rgba(204, 0, 0, .12) !important;
    border-color: rgba(204, 0, 0, .26) !important;
    color:        color-mix(in srgb, var(--tara-primary) 80%, var(--tara-text)) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   7. DIÁLOGOS — Cards centradas
   ══════════════════════════════════════════════════════════════════════════════ */

/* Dialog foto */
.tara-photo-dialog {
    width:         min(360px, 94vw);
    background:    var(--tara-surface);
    border-radius: 14px;
    border:        1px solid var(--tara-border);
    box-shadow:    0 20px 60px rgba(15, 23, 42, .28);
    overflow:      hidden;
}

.tara-photo-dialog-header {
    display:          flex;
    justify-content:  space-between;
    align-items:      flex-start;
    gap:              .8rem;
    padding:          .8rem .9rem;
    border-bottom:    1px solid var(--tara-border);
    background:       var(--tara-surface);
}

.tara-photo-dialog-body {
    min-height:      120px;
    max-height:      360px;
    overflow:        auto;
    padding:         .8rem .9rem .9rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

/* Imagen máx 300×300 */
.tara-photo-large {
    max-width:     300px !important;
    max-height:    300px !important;
    width:         auto !important;
    height:        auto !important;
    object-fit:    contain !important;
    border-radius: 10px;
    border:        1px solid var(--tara-border);
    background:    var(--tara-surface-raised);
    display:       block;
    margin:        0 auto;
}

/* Dialog selector de columnas */
.tara-coldlg {
    width:           min(540px, 94vw);
    max-height:      min(86vh, 660px);
    background:      var(--tara-surface);
    border-radius:   14px;
    border:          1px solid var(--tara-border);
    box-shadow:      0 20px 60px rgba(15, 23, 42, .28);
    display:         flex;
    flex-direction:  column;
    overflow:        hidden;
}

.tara-coldlg-header {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    gap:              .8rem;
    padding:          .78rem 1rem;
    border-bottom:    1px solid var(--tara-border);
    flex-shrink:      0;
    background:       var(--tara-surface);
}

.tara-coldlg-title {
    font-weight: 700;
    font-size:   .96rem;
    color:       var(--tara-text);
}

.tara-coldlg-body {
    flex:            1;
    overflow-y:      auto;
    padding:         .85rem 1rem;
    display:         flex;
    flex-direction:  column;
    gap:             .65rem;
}

.tara-coldlg-hint {
    margin:        0;
    font-size:     .78rem;
    color:         var(--tara-text-muted);
    line-height:   1.55;
    padding:       .4rem .5rem;
    background:    var(--tara-surface-raised);
    border-radius: 6px;
    border:        1px solid var(--tara-border-subtle);
}

.tara-coldlg-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   .15rem .25rem;
}

.tara-coldlg-footer {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    gap:              .5rem;
    padding:          .65rem .9rem;
    border-top:       1px solid var(--tara-border);
    flex-shrink:      0;
    flex-wrap:        wrap;
    background:       var(--tara-surface);
}

.tara-coldlg-footer-right {
    display:     flex;
    gap:         .4rem;
    align-items: center;
}

.tara-coldlg-tag {
    font-size:      .62rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding:        .08rem .35rem;
    border-radius:  100px;
    background:     color-mix(in srgb, var(--tara-primary) 10%, transparent);
    border:         1px solid color-mix(in srgb, var(--tara-primary) 25%, transparent);
    color:          var(--tara-primary-dark);
    flex-shrink:    0;
    white-space:    nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════════
   8. CARD OPERATIVA GENÉRICA
   ══════════════════════════════════════════════════════════════════════════════ */

.tara-secondary-card {
    background:    var(--tara-surface);
    border:        1px solid var(--tara-border);
    border-radius: var(--tara-radius-lg);
    box-shadow:    var(--tara-shadow);
    padding:       1rem 1.15rem;
    margin-bottom: 1rem;
}

.tara-secondary-card--accent {
    border-left:   3px solid var(--tara-primary);
    border-radius: 4px var(--tara-radius-lg) var(--tara-radius-lg) 4px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   9. PAGINADOR DE MUDATAGRID — Fallback global
   Motivo: ::deep .tara-data-grid .mud-table-pagination en scoped CSS puede no
   alcanzar los internos de MudDataGrid. Este fallback global garantiza que el
   paginador siempre sea visible y sticky horizontalmente.
   ══════════════════════════════════════════════════════════════════════════════ */

/* El paginador se queda pegado a la izquierda cuando el grid scrollea horizontal */
.tara-data-grid .mud-table-pagination {
    position:   sticky;
    left:       0;
    background: var(--tara-surface);
    z-index:    1;
}

/* Borde superior del paginador con tinte cálido */
.tara-data-grid .mud-table-pagination-toolbar {
    border-top:  1px solid color-mix(in srgb, var(--tara-primary) 12%, var(--tara-border));
    font-size:   .82rem;
    color:       var(--tara-text-muted);
    flex-wrap:   wrap;
    min-height:  44px;
}

/* Garantizar que el contenedor del grid no corte el paginador */
.tara-table-container {
    overflow-x: auto;
    /* Sin overflow-y restriction — el paginador necesita espacio */
}

/* ══════════════════════════════════════════════════════════════════════════════
   10. RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .tara-coldlg-grid { grid-template-columns: 1fr; }
    .tara-coldlg-footer {
        flex-direction: column;
        align-items:    stretch;
    }
    .tara-coldlg-footer-right { justify-content: flex-end; }
}

@media (max-width: 640px) {
    .tara-secondary-header {
        padding-bottom: .65rem;
        margin-bottom:  .85rem;
    }

    .tara-secondary-empty-state {
        padding:       1.75rem 1rem 2.25rem !important;
        border-radius: 14px !important;
    }

    .tara-secondary-empty-icon {
        width:         44px;
        height:        44px;
        border-radius: 13px;
    }

    .tara-secondary-buscar-btn.mud-button-root {
        min-width: 88px;
    }
}