/* =============================================================
   AVIASTEC — Tema global (reemplaza el chrome de AdminLTE)
   Se carga DESPUÉS de bootstrap.min.css y site.css.
   - Re-tematiza sobrescribiendo las variables de site.css (--primary…).
   - Aporta el shell del wireframe: barra de módulos (L0) + subnav (L1).
   - "Bridge": reestiliza componentes Bootstrap (cards, tablas, tipografía)
     al lenguaje visual Aviastec sin tocar cada vista.
   Guía de marca: Diseño/_ds/aviastec-design-system.
   ============================================================= */

:root {
    /* Re-tema del primario de site.css → azul PANTONE Blue 072 C */
    --primary: #2805A1;
    --primary-darker: #1A0370;
    --primary-lighter: #4D1FD4;
    /* Alert primaria en clave Aviastec: tinte violeta claro + texto azul 900. */
    --primary-alert-color: #1A0370;
    --primary-alert-bg: #E8E2FC;
    --primary-alert-border: #CFC3F6;

    /* ── Tokens Aviastec — alineados al design system "Aviastec ERP - FTO" ── */
    /* Tipografía: 3 roles. Display = Barlow Condensed; Heading = Barlow; Body = Arial. */
    --av-font-display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
    --av-font-heading: 'Barlow', Arial, sans-serif;
    --av-font-body: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    /* Cuarto rol, solo para cifras que se leen en columna (horas, acumulados del
       libro): monoespaciada para que los dígitos se alineen unos sobre otros. */
    --av-font-num: 'Consolas', 'SF Mono', 'Roboto Mono', monospace;
    --av-fs: 13px; --av-fs-sm: 11px; --av-fs-xs: 10px;

    /* Azules */
    --av-blue: #2805A1; --av-blue-50: #F3F0FE; --av-blue-100: #E7E1FB; --av-blue-200: #C9B9F6;
    --av-blue-300: #A48CEF; --av-blue-400: #8060E8; --av-blue-500: #6338E0; --av-blue-600: #4D1FD4;
    --av-blue-700: #3A0FBF; --av-blue-800: #2805A1; --av-blue-900: #1A0370;
    /* Rojos */
    --av-red: #CF0545; --av-red-50: #FEF3F6; --av-red-100: #FCE5EC; --av-red-200: #FAC8D6;
    /* Grises */
    --av-gray-50: #F5F5F8; --av-gray-100: #EBEBF0; --av-gray-200: #D6D6E0; --av-gray-300: #B8B8C8;
    --av-gray-400: #9494AA; --av-gray-500: #6B6B82; --av-gray-600: #505065; --av-gray-700: #393950;
    --av-gray-800: #252538; --av-gray-900: #141425;
    /* Semánticos */
    --av-success: #0F8A3C; --av-success-bg: #E7F5EC;
    --av-warning: #B06600; --av-warning-bg: #FBEFD5;
    --av-lavender: #C4C2DF;
    /* Alias de compatibilidad (los usa el bridge existente) */
    --av-border: var(--av-gray-200); --av-border-soft: var(--av-gray-100);
    --av-surface: var(--av-gray-50); --av-page: #F0F2F5;

    /* Radios */
    --av-radius-sm: 2px; --av-radius-md: 4px; --av-radius-lg: 8px; --av-radius-xl: 12px; --av-radius-pill: 999px;
    /* Sombras (azuladas, PANTONE Blue 072) */
    --av-shadow-xs: 0 1px 2px rgba(40,5,161,.06); --av-shadow-sm: 0 2px 4px rgba(40,5,161,.08);
    --av-shadow-md: 0 4px 12px rgba(40,5,161,.10); --av-shadow-lg: 0 8px 24px rgba(40,5,161,.12);
    --av-shadow-xl: 0 16px 40px rgba(40,5,161,.14);
    /* Foco */
    --av-focus-ring: 0 0 0 3px rgba(99,56,224,.35);
    /* Espaciado (escala del diseño) */
    --av-space-1: 4px; --av-space-2: 8px; --av-space-3: 12px; --av-space-4: 16px; --av-space-5: 20px;
    --av-space-6: 24px; --av-space-8: 32px; --av-space-10: 40px; --av-space-12: 48px; --av-space-16: 64px;

    /* Gutter del área de contenido (fuente única de verdad — ADR-0002).
       Lo consumen .av-content(-header/-footer) y el full-bleed de la ficha,
       de modo que la cabecera a sangre nunca se desincroniza del padding. */
    --av-content-pad-x: 26px;
    --av-content-pad-y: 16px;
    --av-container-pad-x: 15px; /* padding lateral de Bootstrap .container-fluid */
    --av-bleed-x: calc(var(--av-content-pad-x) + var(--av-container-pad-x));
}

/* ── Base ─────────────────────────────────────────────────────── */
/* Tamaño base 13px (design system) en la raíz: 1rem = 13px; el resto en rem
   (Bootstrap incluido) queda relativo a este. */
html { font-size: 13px; }

body.av-body {
    background: var(--av-page);
    color: var(--av-gray-800);
    /* Texto general (y formularios, que heredan por reboot) en Arial (body). */
    font-family: var(--av-font-body);
    font-size: 1rem;
    /* Sticky footer: columna flex a toda la altura; el contenido crece y empuja
       el footer al fondo del viewport cuando la página es corta. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Títulos: Barlow Condensed (display), con peso máximo 600 (no superar). */
.av-body h1, .av-body h2, .av-body h3, .av-body h4, .av-body h5, .av-body h6 {
    font-family: var(--av-font-display);
    font-weight: 600;
}

/* Menus: Barlow Condensed, con peso máximo 600 (no superar). */
.av-body .av-topbar .btn,
.av-body .av-topbar .av-module {
    font-family: var(--av-font-display);
    font-weight: 600;
}

/* Formularios en Arial (body). El reboot de Bootstrap ya hereda font-family en
   inputs/selects/textarea, pero lo forzamos por si algún tema lo pisa. */
.av-body .form-control,
.av-body .custom-select,
.av-body input,
.av-body select,
.av-body textarea,
.av-body button,
.av-body .btn {
    font-family: var(--av-font-body);
}

/* Botón "default" (ghost/outline): AdminLTE le daba borde y fondo; al retirarlo
   quedaba sin estilo (Bootstrap 4 no tiene .btn-default). Lo recuperamos. */
.av-body .btn-default {
    background: #fff;
    border: 1px solid var(--av-border);
    color: var(--av-gray-800);
}
.av-body .btn-default:hover,
.av-body .btn-default:focus {
    background: var(--av-surface);
    border-color: var(--av-gray-400);
    color: var(--av-gray-800);
}

/* ── L0 · Barra de módulos ────────────────────────────────────── */
.av-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: stretch;
    height: 52px;
    padding: 0 14px 0 18px;
    background: var(--av-blue);
    border-bottom: 3px solid var(--av-blue-900);
}
.av-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 18px;
    margin-right: 6px;
    border-right: 1px solid rgba(255, 255, 255, .18);
    flex-shrink: 0;
    text-decoration: none;
}
.av-brand:hover { text-decoration: none; }
.av-brand-txt {
    font-family: var(--av-font-display);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: .03em;
    color: #fff;
    line-height: 1;
}
.av-brand-txt .r { color: var(--av-red); }
.av-erp-badge {
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: var(--av-radius-sm);
    padding: 1px 5px;
    font-family: var(--av-font-heading);
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, .85);
    letter-spacing: .08em;
}
.av-modules {
    display: flex;
    align-items: stretch;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
}
.av-modules::-webkit-scrollbar { display: none; }
.av-module {
    display: flex;
    align-items: center;
    padding: 0 9px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: var(--av-font-display);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .45);
    cursor: pointer;
    white-space: nowrap;
    text-transform: uppercase;
    transition: color .13s, background .13s;
}
.av-module:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.av-module.active {
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border-bottom-color: #fff;
}
.av-topbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 10px;
}
.av-topbar-right .nav-link,
.av-topbar-right .btn-link {
    color: rgba(255, 255, 255, .72);
    padding: 6px 8px;
    background: none;
    border: none;
    position: relative;
}
.av-topbar-right .nav-link:hover,
.av-topbar-right .btn-link:hover { color: #fff; }
.av-topbar-right .navbar-badge {
    position: absolute;
    top: 0;
    right: 2px;
    font-size: 9px;
    padding: 2px 4px;
}
.av-user-menu { position: relative; display: flex; align-items: center; }
.av-user {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    padding: 6px 8px;
    border-radius: var(--av-radius-sm);
    cursor: pointer;
}
.av-user:hover, .av-user.open { color: #fff; text-decoration: none; background: rgba(255, 255, 255, .12); }
.av-user-caret { font-size: 10px; color: rgba(255, 255, 255, .55); transition: transform .18s; flex-shrink: 0; }
.av-user.open .av-user-caret { transform: rotate(180deg); }

/* Desplegable del menú de usuario */
.av-user-dd {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 260px;
    max-width: calc(100vw - 20px);
    background: #fff;
    border: 1px solid var(--av-border);
    border-top: 2px solid var(--av-blue);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 8px 28px rgba(40, 5, 161, .18);
    z-index: 1100;
    overflow: hidden;
    color: var(--av-gray-800);
}
.av-user-id {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--av-border-soft);
}
.av-avatar-lg { width: 38px; height: 38px; font-size: 14px; }
.av-user-id-meta { min-width: 0; }
.av-user-id-meta strong {
    display: block;
    font-family: var(--av-font-heading);
    font-size: 13px;
    font-weight: 600;
    color: var(--av-gray-800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.av-user-id-meta small { font-size: 11px; color: var(--av-gray-500); }
.av-user-section { padding: 5px 0; border-bottom: 1px solid var(--av-border-soft); }
.av-user-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    font-family: var(--av-font-heading);
    font-size: 13px;
    color: var(--av-gray-800);
    text-decoration: none;
}
.av-user-item:hover { background: var(--av-blue-50); color: var(--av-blue); text-decoration: none; }
.av-user-item-ico { width: 16px; text-align: center; color: var(--av-gray-500); }
.av-user-item:hover .av-user-item-ico { color: var(--av-blue); }
.av-user-logout { color: var(--av-red); font-weight: 600; }
.av-user-logout:hover { background: #FEF3F6; color: var(--av-red); }
.av-user-logout .av-user-item-ico { color: var(--av-red); }

/* Preferencias (tamaño de letra + idioma) */
.av-user-prefs {
    padding: 10px 16px 12px;
    border-bottom: 1px solid var(--av-border-soft);
    background: var(--av-surface);
}
.av-user-prefs-title {
    font-family: var(--av-font-heading);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--av-gray-400);
    margin-bottom: 10px;
}
.av-pref-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.av-pref-row + .av-pref-row { margin-top: 10px; }
.av-pref-row > span { font-size: 12px; color: var(--av-gray-800); }
.av-seg { display: flex; border: 1px solid var(--av-border); border-radius: var(--av-radius-sm); overflow: hidden; }
.av-seg-btn {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    font-family: var(--av-font-heading);
    font-size: 11px;
    font-weight: 600;
    color: var(--av-gray-500);
    background: #fff;
    text-decoration: none;
    /* Se usa en <a> y en <button>: sin resetear el borde, el navegador pinta el suyo. */
    border: none;
    border-left: 1px solid var(--av-border);
    cursor: pointer;
}
.av-seg-btn:first-child { border-left: none; }
.av-seg-btn:hover { color: var(--av-blue); text-decoration: none; }
.av-seg-btn.active { background: var(--av-blue); color: #fff; }
.av-font-stepper { display: flex; align-items: center; gap: 4px; }
.av-font-btn {
    width: 24px;
    height: 24px;
    background: #fff;
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius-sm);
    color: var(--av-blue);
    font-family: var(--av-font-heading);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.av-font-btn:hover { background: var(--av-blue-50); }
.av-font-label {
    font-family: var(--av-font-display);
    font-weight: 600;
    font-size: 12px;
    color: var(--av-gray-500);
    min-width: 40px;
    text-align: center;
}
.av-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--av-red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--av-font-heading);
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
    text-transform: uppercase;
}
.av-user-meta { line-height: 1.25; }
.av-user-meta strong { font-family: var(--av-font-heading); font-size: 12px; font-weight: 600; color: #fff; }
.av-user-meta small { display: block; font-size: 10px; color: rgba(255, 255, 255, .55); }

/* ── L1 · Subnav del módulo activo ────────────────────────────── */
.av-subnav {
    position: sticky;
    top: 52px;
    z-index: 1020;
    background: #fff;
    border-bottom: 1px solid var(--av-border);
    box-shadow: 0 2px 8px rgba(40, 5, 161, .05);
}
.av-subnav-inner {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    min-height: 42px;
    padding: 0 10px;
    /* Sin overflow: un overflow-x:auto crearía un contexto de scroll que también
       recorta en vertical y ocultaría los dropdowns (posicionados en top:44px). */
}
.av-subnav nav { display: contents; }
.av-sn-item { position: relative; display: flex; align-items: center; }
.av-sn-item > a,
.av-sn-label {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 13px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-family: var(--av-font-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--av-gray-500);
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    background: none;
}
.av-sn-item > a:hover,
.av-sn-label:hover { color: var(--av-blue); text-decoration: none; }
.av-sn-item > a.active,
.av-sn-item.active > .av-sn-label,
.av-sn-item.open > .av-sn-label {
    color: var(--av-blue);
    border-bottom-color: var(--av-blue);
    font-weight: 600;
}
.av-sn-item .nav-icon { font-size: 12px; width: auto; }
.av-subnav p { margin: 0; display: inline; }
.av-sn-chevron { font-size: 9px; transition: transform .18s; }
.av-sn-item.open .av-sn-chevron { transform: rotate(180deg); }

.av-sn-dd {
    position: absolute;
    top: 42px;
    left: 0;
    min-width: 214px;
    background: #fff;
    border: 1px solid #E5E5EE;
    border-top: 2px solid var(--av-blue);
    border-radius: 0 4px 4px 4px;
    box-shadow: 0 4px 20px rgba(40, 5, 161, .14);
    padding: 5px 0;
    display: none;
    z-index: 1100;
}
.av-sn-item.open > .av-sn-dd { display: block; }
.av-sn-dd a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    font-family: var(--av-font-heading);
    font-size: 13px;
    font-weight: 500;
    color: #393950;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: none;
}
.av-sn-dd a:hover,
.av-sn-dd a.active {
    background: var(--av-blue-50);
    color: var(--av-blue);
    text-decoration: none;
}
.av-sn-dd a .nav-icon { width: 16px; text-align: center; color: var(--av-gray-400); }
.av-sn-dd a:hover .nav-icon,
.av-sn-dd a.active .nav-icon { color: var(--av-blue); }
.av-sn-section {
    padding: 5px 16px 2px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--av-gray-400);
    font-family: var(--av-font-heading);
}
.av-sn-sep { height: 1px; background: var(--av-border-soft); margin: 4px 0; }

/* ── Conmutador de Tenant (L0, integrado tras el logo) ─────────── */
/* Solo GlobalAdmin fuera de su propia sección. Dos estados: bloqueado
   (nombre + "Cambiar") y desbloqueado (label + select + "Confirmar"). */
.av-tenant {
    display: flex;
    align-items: center;
    padding: 0 16px 0 2px;
    margin-right: 6px;
    border-right: 1px solid rgba(255, 255, 255, .18);
    flex-shrink: 0;
}
.av-tenant-locked,
.av-tenant-unlocked { display: flex; align-items: center; gap: 8px; }
.av-tenant-name {
    font-family: var(--av-font-display);
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    letter-spacing: .02em;
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.av-tenant-field { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.av-tenant-label {
    margin: 0;
    font-family: var(--av-font-heading);
    font-size: 9px;
    font-weight: 700;
    color: rgba(255, 255, 255, .45);
    letter-spacing: .1em;
    text-transform: uppercase;
}
.av-tenant-select {
    font-family: var(--av-font-display);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0;
    max-width: 180px;
}
.av-tenant-select option { color: #252538; background: #fff; font-family: var(--av-font-heading); }
.av-tenant-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--av-radius-sm);
    padding: 3px 8px;
    font-family: var(--av-font-heading);
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, .6);
    letter-spacing: .05em;
    cursor: pointer;
    white-space: nowrap;
    transition: background .13s, color .13s;
}
.av-tenant-btn:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.av-tenant-confirm { background: var(--av-red); border-color: var(--av-red); color: #fff; }
.av-tenant-confirm:hover { background: #A5033A; color: #fff; }

/* ── Contenido ────────────────────────────────────────────────── */
/* Migas de la página, alojadas a la derecha del subnav L1 (antes en la banda propia
   av-content-header, que se eliminó para ganar altura). margin-left:auto las empuja a la
   derecha; si el L1 se queda sin ancho, envuelven a su propia línea (flex-wrap del inner). */
.av-subnav-crumb {
    margin-left: auto;
    display: flex;
    align-items: center;
    min-height: 42px;
    padding-left: 12px;
}
.av-subnav-crumb .breadcrumb {
    background: none;
    padding: 0;
    margin: 0;
    font-family: var(--av-font-body);
    font-size: 12px;
    flex-wrap: wrap;
}
.av-subnav-crumb .breadcrumb-item + .breadcrumb-item::before { color: var(--av-gray-400); }
.av-subnav-crumb .breadcrumb-item a { color: var(--av-gray-500); }
.av-subnav-crumb .breadcrumb-item a:hover { color: var(--av-blue); }
/* El ítem activo es el título de la página (y el título de detalle que reescribe el JS):
   se resalta en azul oscuro, sin llegar al h1 de 26px de antes. */
.av-subnav-crumb .breadcrumb-item.active { color: var(--av-blue-900); font-weight: 600; }
.av-content { padding: var(--av-content-pad-y) var(--av-content-pad-x) 40px; flex: 1 0 auto; }
.av-footer {
    flex-shrink: 0;
    padding: 12px var(--av-content-pad-x);
    color: var(--av-gray-400);
    font-size: 12px;
    border-top: 1px solid var(--av-border);
    background: #fff;
}
.av-footer a { color: var(--av-gray-500); }

/* ── Menú móvil (hamburguesa) ─────────────────────────────────── */
.av-hamburger { display: none; }
.av-mobile-panel {
    display: none;
    background: var(--av-blue-900);
    position: sticky;
    top: 52px;
    z-index: 1010;
    border-bottom: 2px solid #0D0060;
}
.av-mobile-panel.open { display: block; }
.av-mobile-panel .av-module {
    width: 100%;
    height: 46px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    border-left: 3px solid transparent;
    font-size: 14px;
    color: rgba(255, 255, 255, .78);
}
.av-mobile-panel .av-module.active { border-left-color: var(--av-red); border-bottom-color: rgba(255, 255, 255, .08); }

@media (max-width: 768px) {
    .av-modules { display: none; }
    .av-hamburger { display: flex; }
    .av-user-meta { display: none; }
    /* Un solo override del gutter: .av-content, la cabecera, el footer y el
       full-bleed de la ficha se recalculan solos desde estos tokens. */
    :root { --av-content-pad-x: 14px; --av-content-pad-y: 14px; }

    /* L1 en móvil: una sola fila con scroll horizontal (tipo pestañas), no wrap. */
    .av-subnav-inner {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .av-subnav-inner::-webkit-scrollbar { display: none; }

    /* El tenant del topbar se oculta en móvil: pasa al panel de la hamburguesa. */
    .av-topbar > .av-tenant { display: none; }
    .av-mobile-panel .av-tenant {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
        padding: 12px 20px;
        margin: 0;
        background: rgba(0, 0, 0, .15);
    }
    .av-mobile-panel .av-tenant-locked,
    .av-mobile-panel .av-tenant-unlocked { justify-content: space-between; width: 100%; }
    .av-mobile-panel .av-tenant-name,
    .av-mobile-panel .av-tenant-select { max-width: none; font-size: 16px; }
    .av-mobile-panel .av-tenant-field { flex: 1; }

    /* Los dropdowns pasan a panel fijo a ancho completo bajo la barra (52+44=96px).
       position:fixed escapa del recorte del contenedor con overflow-x. */
    .av-sn-dd {
        position: fixed;
        top: 94px;
        left: 0;
        right: 0;
        min-width: 0;
        border-left: none;
        border-right: none;
        border-radius: 0;
        box-shadow: 0 10px 24px rgba(40, 5, 161, .18);
        max-height: calc(100vh - 94px);
        overflow-y: auto;
        padding: 6px 0;
    }
    .av-sn-dd a { padding: 11px 18px; font-size: 14px; }
}

/* ── Bridge de componentes (Bootstrap → Aviastec) ─────────────── */
.av-body .card {
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius-sm);
    box-shadow: var(--av-shadow-xs);
    margin-bottom: 1rem;
}
.av-body .card-header {
    background: #fff;
    border-bottom: 1px solid var(--av-border-soft);
}
.av-body .card-primary.card-outline { border-top: 2px solid var(--av-blue); }
.av-body .card-primary.card-outline-tabs > .card-header a.active { border-top: 2px solid var(--av-blue); }
.av-body .card-footer { background: #fff; border-top: 1px solid var(--av-border-soft); }

/* Botones: esquinas rectas de marca */
.av-body .btn { border-radius: var(--av-radius-sm); }
.av-body .btn-danger { background-color: var(--av-red); border-color: var(--av-red); }
.av-body .btn-danger:hover { background-color: #A5033A; border-color: #A5033A; }
.av-body .badge { border-radius: var(--av-radius-sm); }

/* ── Iconografía de línea (Bootstrap Icons) ───────────────────────
   El diseño usa iconos de trazo fino, no los sólidos de Font Awesome. Las páginas
   migradas usan .bi; FA sigue cargado para las que aún no lo están. */
.av-body .bi { line-height: 1; }
.av-body .av-ico-xs { font-size: .8em; }   /* equivalente al .fa-xs de Font Awesome */

/* Tablas: cabeceras Barlow en mayúsculas + hover de marca */
.av-body table.dataTable thead th,
.av-body .table thead th,
.av-body .table-compact thead th {
    font-family: var(--av-font-heading);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--av-gray-500);
}
.av-body table.dataTable tbody tr:hover td { background: var(--av-blue-50); }

table.dataTable.table.table-hover > tbody > tr:hover > * {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

/* Pestañas */
.av-body .nav-tabs .nav-link.active { color: var(--av-blue); }

/* Inputs: foco de marca (refuerza site.css) */
.av-body .form-control:focus { box-shadow: 0 0 0 2px rgba(40, 5, 161, .10); }

/* ── Filtros de listado: toolbar unificada + chips + drawer ───────
   Reutilizable en cualquier página de listado (opción B del rediseño). */
.av-toolbar {
    background: #fff;
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius-sm);
    box-shadow: var(--av-shadow-xs);
    margin-bottom: 16px;
    overflow: hidden;
}
.av-toolbar-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; flex-wrap: wrap; }

/* Barra de búsqueda */
.av-search {
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius-sm);
    padding: 0 10px;
    background: #fff;
    flex: 1;
    min-width: 160px;
    max-width: 300px;
    transition: border-color .13s, box-shadow .13s;
}
.av-search:focus-within { border-color: var(--av-blue); box-shadow: 0 0 0 2px rgba(40, 5, 161, .10); }
.av-search-ico { color: var(--av-gray-400); flex-shrink: 0; font-size: 13px; }
.av-search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 7px 0;
    font-size: 13px;
    color: var(--av-gray-800);
    font-family: var(--av-font-body);
}
.av-search-clear { color: var(--av-gray-400); cursor: pointer; flex-shrink: 0; font-size: 13px; }
.av-search-clear:hover { color: var(--av-red); }

/* Acciones (Filtros, Exportar, Nuevo) a la derecha de la búsqueda */
.av-toolbar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.av-btn-filters {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius-sm);
    padding: 6px 11px;
    font-family: var(--av-font-heading);
    font-size: 12px;
    font-weight: 600;
    color: var(--av-gray-500);
    cursor: pointer;
    transition: background .13s, border-color .13s, color .13s;
}
.av-btn-filters:hover { border-color: var(--av-blue); color: var(--av-blue); }
.av-btn-filters.active { background: var(--av-blue-50); border-color: var(--av-blue); color: var(--av-blue); }
.av-filters-count {
    background: var(--av-blue);
    color: #fff;
    border-radius: 8px;
    min-width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    padding: 0 4px;
}

/* Barra de chips de filtros activos (pegada bajo la toolbar) */
.av-active-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-top: 1px solid var(--av-border-soft);
    background: var(--av-blue-50);
    flex-wrap: wrap;
}
.av-active-filters-label {
    font-family: var(--av-font-heading);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--av-gray-400);
    margin-right: 2px;
}
.av-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1px solid #C9B9F6;
    border-radius: var(--av-radius-sm);
    padding: 3px 8px;
    font-family: var(--av-font-heading);
    font-size: 12px;
    color: var(--av-gray-800);
}
.av-chip-label { opacity: .65; font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; margin-right: 2px; }
/* La X del chip vale igual con Font Awesome que con Bootstrap Icons: mientras dure
   la migración conviven las dos iconografías en las páginas ya rehechas. */
.av-chip .fa-xmark,
.av-chip .bi-x-lg { cursor: pointer; color: var(--av-gray-400); font-size: 12px; }
.av-chip .fa-xmark:hover,
.av-chip .bi-x-lg:hover { color: var(--av-red); }
.av-clear-all {
    background: none;
    border: none;
    color: var(--av-red);
    font-family: var(--av-font-heading);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    margin-left: 4px;
}

/* La lista va dentro de una tarjeta con el look del diseño (borde recto,
   cabeceras grises, filas finas con hover, pie/paginación en barra gris). */
.av-list {
    background: #fff;
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius-sm);
    box-shadow: var(--av-shadow-xs);
    overflow: hidden;
    margin-bottom: 16px;
}
/* `div.dt-container` (no `.dt-container` a secas) para igualar la especificidad de
   la regla legacy `.tab-pane div.dt-container { margin: auto -1.25rem }` de site.css
   y anular su margen negativo: dentro de una ficha el DataTable va en un .tab-pane,
   y ese margen sacaba la tabla ~16px fuera del contenedor de scroll .av-list,
   recortando la primera y la ultima columna. aviastec.css carga despues de site.css,
   asi que a igual especificidad gana esta. */
.av-list div.dt-container { padding: 0; border-top: none; margin-left: 0; margin-right: 0; }
/* Fila de la tabla (.row.dt-layout-table): mismo tratamiento que las filas de
   info/paginacion — se anula el margen negativo de .row y el padding de la .col
   para que la tabla quede a ras del contenedor sin generar un scroll horizontal
   fantasma de ~15px cuando el contenido si cabe. */
.av-list .dt-layout-table { margin-left: 0; margin-right: 0; }
.av-list .dt-layout-table > * { padding-left: 0; padding-right: 0; }

/* La fila superior del DataTable queda vacía (búsqueda desactivada + botones
   ocultos): se elimina para que la cabecera quede pegada al borde de la tarjeta.
   Nota: bs4 rotula las filas del layout como `.row.justify-content-between`
   (no `.dt-layout-row`), por eso se seleccionan así. */
.av-list .dt-buttons { display: none; }
.av-list .dt-container > .justify-content-between:first-child { display: none; }

/* Tabla a ras de la tarjeta (la .row de Bootstrap del layout ya la deja flush) */
.av-list table.dataTable { border: none; margin: 0; }
.av-list table.dataTable.no-footer { border-bottom: none; }
.av-list table.dataTable thead th {
    background: var(--av-surface);
    border-top: none;
    border-bottom: 1px solid var(--av-border);
    padding: 9px 12px;
}
.av-list table.dataTable tbody td {
    padding: 9px 12px;
    border-top: 1px solid var(--av-border-soft);
    vertical-align: middle;
}
.av-list table.dataTable tbody tr:first-child td { border-top: none; }
.av-list table.dataTable tbody tr:hover td { background: var(--av-blue-50); }

/* Pie (info + paginación): barra gris (como la cabecera) a lo ancho, con el
   contenido separado de ambos bordes. Se anula el margen negativo de la .row y
   el padding de las celdas para controlar el espaciado con el padding del pie.
   Se selecciona la(s) fila(s) que contienen la info o la paginación con :has()
   (más fiable que :last-child, que el DataTable no siempre deja como última). */
.av-list .dt-container > .justify-content-between:has(.dt-info),
.av-list .dt-container > .justify-content-between:has(.dt-paging) {
    background: var(--av-surface);
    border-top: 1px solid var(--av-border-soft);
    margin: 0;
    padding: 8px 16px;
    align-items: center;
}
.av-list .dt-container > .justify-content-between:has(.dt-info) > *,
.av-list .dt-container > .justify-content-between:has(.dt-paging) > * { padding-left: 0; padding-right: 0; }
.av-list .dt-info { color: var(--av-gray-500); font-size: 12px; padding: 0 !important; }

/* Paginación (Bootstrap .pagination): botones separados con borde simple; el
   borde antes se duplicaba porque también se bordeaba el <li>.dt-paging-button. */
.av-list .dt-paging .pagination { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.av-list .dt-paging .page-item .page-link {
    margin: 0;
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius-sm);
    padding: 4px 10px;
    font-size: 12px;
    font-family: var(--av-font-body);
    color: var(--av-gray-800);
    background: #fff;
}
.av-list .dt-paging .page-item .page-link:hover { background: var(--av-blue-50); border-color: #C9B9F6; }
.av-list .dt-paging .page-item.active .page-link {
    background: var(--av-blue);
    border-color: var(--av-blue);
    color: #fff;
    font-weight: 700;
}
.av-list .dt-paging .page-item.disabled .page-link { color: #B8B8C8; background: #fff; }

/* Drawer lateral de filtros (derecha, altura completa) */
.av-drawer-scrim { position: fixed; inset: 0; background: rgba(15, 12, 30, .45); z-index: 1200; }
.av-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 320px;
    max-width: 88vw;
    background: #fff;
    z-index: 1210;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 32px rgba(40, 5, 161, .22);
    border-left: 1px solid var(--av-border);
    transform: translateX(100%);
    transition: transform .22s ease;
}
.av-drawer.open { transform: translateX(0); }

/* select2 inyecta su desplegable al final del <body>, fuera del drawer, con z-index 1051
   propio: sin esto queda por debajo del panel (1210) y el desplegable no se ve. */
.select2-container--open { z-index: 1220; }
.av-drawer-head {
    background: var(--av-blue-900);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.av-drawer-title {
    font-family: var(--av-font-display);
    font-weight: 600;
    font-size: 15px;
    color: #fff;
    letter-spacing: .06em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.av-drawer-close {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--av-radius-sm);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .75);
    cursor: pointer;
}
.av-drawer-close:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.av-drawer-body { flex: 1; overflow-y: auto; padding: 16px; }
/* Campos dentro del drawer: los selects tri-estado (col-sm-4/col-md-2) van en
   2 columnas para minimizar altura; los campos anchos (col-sm-12, p. ej. el
   multiselect de curso) ocupan el ancho completo. */
.av-drawer-body .row { margin: 0 -5px; }
.av-drawer-body [class*="col-"] { flex: 0 0 50%; max-width: 50%; padding: 0 5px; }
.av-drawer-body [class*="col-"].col-sm-12 { flex: 0 0 100%; max-width: 100%; }
.av-drawer-body .form-group { margin-bottom: 12px; }
.av-drawer-body label.text-body {
    font-family: var(--av-font-heading);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--av-gray-500);
    margin-bottom: 5px;
}
.av-drawer-foot {
    border-top: 1px solid var(--av-border-soft);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    background: var(--av-surface);
}

/* ── Formularios de detalle: agrupación en secciones tipo tarjeta ──
   Reutilizable en cualquier detalle (opción del rediseño). Cada sección es
   una tarjeta a ancho completo con título y una rejilla de campos. */
.av-form-section {
    background: #fff;
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius-sm);
    box-shadow: var(--av-shadow-xs);
    margin-bottom: 16px;
    overflow: hidden;
}
.av-form-section-head {
    font-family: var(--av-font-display);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .03em;
    color: var(--av-blue-900);
    padding: 10px 16px;
    border-bottom: 1px solid var(--av-border-soft);
    background: var(--av-surface);
}
.av-form-section-body { padding: 16px 16px 2px; }
/* Pie de sección: acciones propias de la sección (p. ej. Guardar/Eliminar de ese
   ámbito). Usado por fichas multi-guardado como Course (Datos del curso / del año). */
.av-form-section-foot {
    padding: 12px 16px;
    border-top: 1px solid var(--av-border-soft);
    background: var(--av-surface);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
/* Etiquetas de campo al patrón del diseño (Barlow, mayúsculas, pequeñas) */
.av-form-section label.text-body {
    font-family: var(--av-font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--av-gray-500);
    margin-bottom: 4px;
}

/* ── Ficha de detalle: cabecera + pestañas a sangre, pegadas arriba ──
   La cabecera (header + tabs) rompe el gutter del contenido para ir de
   lado a lado y sube -pad-y para pegarse arriba. El desplazamiento sale de los
   tokens (--av-bleed-x = pad-x del contenido + pad-x de .container-fluid; ADR-0002),
   así nunca se desincroniza del padding de .av-content. Solo el cuerpo
   (.av-ficha-body) lleva márgenes, restaurados con su propio padding.

   La ficha no pinta miga: la del subnav (.av-subnav-crumb) se ve también con el detalle
   abierto y ya nombra el elemento, porque los vue-models reescriben #idTitulo con él
   —"Aircraft - EC-KNC"—. Tener las dos era decir lo mismo dos veces.
   body.av-detail-open se sigue marcando desde los vue-models como gancho de estado. */
.av-ficha { margin: calc(-1 * var(--av-content-pad-y)) calc(-1 * var(--av-bleed-x)) 0; }
.av-ficha-header,
.av-ficha-tabs {
    background: #fff;
}

.av-ficha-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 16px;
    border-bottom: 1px solid var(--av-border);
}
.av-ficha-avatar { position: relative; width: 72px; height: 72px; flex-shrink: 0; }
.av-ficha-photo,
.av-ficha-avatar-ph {
    width: 72px;
    height: 72px;
    border-radius: var(--av-radius-sm);
    object-fit: cover;
    border: 1px solid var(--av-border);
}
.av-ficha-avatar-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--av-blue-50);
    border: 1px dashed #C9B9F6;
    color: #9C86E6;
    font-size: 26px;
}
.av-ficha-photo-edit { position: absolute; bottom: -4px; right: -4px; }
.av-ficha-photo-edit .btn { padding: 2px 7px; line-height: 1.1; }

.av-ficha-id { flex: 1; min-width: 0; }
.av-ficha-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.av-ficha-title {
    margin: 0;
    font-family: var(--av-font-display);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.05;
    color: var(--av-blue-900);
}
.av-ficha-meta { display: flex; gap: 16px; flex-wrap: wrap; }
.av-ficha-meta span { font-size: 12px; color: var(--av-gray-500); }
.av-ficha-meta strong { color: var(--av-gray-800); font-weight: 600; }

.av-badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: var(--av-radius-sm);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--av-blue);
    background: var(--av-blue-50);
    border: 1px solid #C9B9F6;
}
/* Variantes de estado del badge (contrato headerBadges { text, variant }).
   Sin variant = azul (rol/neutro, p. ej. Contact). */
.av-badge-success { color: var(--av-success); background: var(--av-success-bg); border-color: #B6E2C6; }
.av-badge-warning { color: var(--av-warning); background: var(--av-warning-bg); border-color: #F0D69C; }
.av-badge-danger  { color: var(--av-red); background: var(--av-red-100); border-color: var(--av-red-200); }
.av-badge-neutral { color: var(--av-gray-500); background: var(--av-surface); border-color: var(--av-border); }

/* ── Celdas de los listados ─────────────────────────────────────────────────
   Una clase por concepto: el numero de parte se lee igual en el almacen que en el
   listado de componentes. La tabla ya fija tamaño y peso; aqui solo va lo que
   significa algo —la familia monoespaciada, que alinea los codigos, y el color—. */
.av-desc { color: var(--av-gray-900); }
.av-pn { font-family: var(--av-font-num); color: var(--av-blue); }
.av-sn { font-family: var(--av-font-num); color: var(--av-gray-800); }
.av-reg { font-family: var(--av-font-heading); color: var(--av-gray-800); }
/* Un dato que no existe, no un dato vacio: el guion lo dice sin fingir un cero. */
.av-none { color: var(--av-gray-300); font-style: italic; }

/* ═══ Almacén ══════════════════════════════════════════════════════════════
   El almacén se lee agrupado por referencia: cuántas quedan de cada cosa, y
   solo después cuál. En plano deja de poderse leer en cuanto hay volumen. */
.st-kpis { display: flex; background: #fff; border: 1px solid var(--av-border);
    border-bottom: none; border-radius: var(--av-radius-md) var(--av-radius-md) 0 0; flex-wrap: wrap; }
/* El numero manda y se lee de un vistazo, asi que va delante y grande; el rotulo y la nota
   caen a su derecha, una linea cada uno, a la altura del numero. */
.st-kpi { flex: 1; min-width: 170px; padding: 10px 14px; border-left: 1px solid var(--av-border-soft);
    display: flex; align-items: center; gap: 11px; }
.st-kpi:first-child { border-left: none; }
.st-kpi .v { flex-shrink: 0; font-family: var(--av-font-display); font-size: 30px; font-weight: 600;
    color: var(--av-blue-900); line-height: 1; }
.st-kpi .v.warn { color: var(--av-warning); }
.st-kpi .txt { min-width: 0; }
.st-kpi .l { display: block; font-family: var(--av-font-heading); font-size: 10px;
    text-transform: uppercase; letter-spacing: .07em; color: var(--av-gray-500); line-height: 1.35; }
.st-kpi .s { display: block; font-family: var(--av-font-heading); font-size: 11px;
    color: var(--av-gray-400); line-height: 1.35; }

/* La tabla de referencias lleva las mismas clases que las demas —table, table-hover,
   dataTable— para heredar de .av-list lo que ya esta resuelto. Aqui solo lo suyo. */
/* La fila de la referencia despliega sus unidades. */
tr.st-grp { cursor: pointer; }
.st-caret { display: inline-block; width: 14px; color: var(--av-gray-400); font-size: 10px;
    transition: transform .12s; }
tr.st-grp.open .st-caret { transform: rotate(90deg); }

/* El bloque abierto —la referencia y su desglose— no responde al raton: el hover dice "esto se
   puede pulsar", y lo que se ve ya es el resultado de haberlo pulsado.
   Anularlo cuesta porque el hover de estas tablas se pinta de TRES formas distintas, en tres
   hojas: el background de .av-list/.av-body, el box-shadow interior de 9999px de DataTables
   (table.dataTable.table.table-hover > tbody > tr:hover > *) y los bordes negros de la regla
   local que hay mas arriba en este mismo fichero. Las tres a la vez, y con !important, porque
   la de DataTables viene de una libreria que se actualiza y no conviene depender de que
   nuestro selector siga siendo mas especifico que el suyo. */
.av-list table.dataTable tbody tr.st-grp.open:hover > *,
.av-list table.dataTable tbody tr.st-units-row:hover > *,
.av-list table.dataTable.table.table-hover > tbody > tr.st-grp.open:hover > *,
.av-list table.dataTable.table.table-hover > tbody > tr.st-units-row:hover > * {
    box-shadow: none !important;
    background: var(--av-gray-100) !important;
}

/* La referencia abierta y su desglose son un bloque, y van enmarcados como tal: la linea de
   arriba la pone la fila de la referencia y la de abajo la del desglose. En reposo y con el
   raton encima, que si no el marco parpadea al pasar por el. */
.av-list table.dataTable tbody tr.st-grp.open > td,
.av-list table.dataTable.table.table-hover > tbody > tr.st-grp.open:hover > * {
    background: var(--av-gray-100);
    border-top: 1px solid var(--av-blue) !important;
    border-bottom: none !important;
}
.av-list table.dataTable tbody tr.st-units-row > td,
.av-list table.dataTable.table.table-hover > tbody > tr.st-units-row:hover > * {
    border-top: none !important;
    border-bottom: 1px solid var(--av-blue) !important;
}

/* La tabla de unidades vive DENTRO de una celda de la tabla de referencias, y los selectores de
   hover de esta ultima —.av-list/.av-body table.dataTable tbody tr:hover td— usan combinador
   descendiente, no hijo. Asi que al entrar el raton en la fila del desglose alcanzan de una vez
   todas las celdas de dentro y se tiñen las filas a la vez.
   No se puede "des-seleccionar", asi que se le devuelve a cada celda de la tabla interior su
   fondo, con mas especificidad, y se le deja su propio hover fila a fila. */
.av-list table.dataTable tbody tr.st-units-row .st-units-tbl tbody td { background: #fff; }
.av-list table.dataTable tbody tr.st-units-row .st-units-tbl thead th { background: var(--av-surface); }
.av-list table.dataTable tbody tr.st-units-row .st-units-tbl tbody tr:hover td { background: var(--av-blue-50); }

/* Las unidades, dentro de una celda con su propio scroll: un grupo de <tr> no se puede
   desplazar por si solo. La altura da para seis y la cabecera se queda fija, que si no
   a la tercera fila ya no se sabe que columna es cual.
   El panel va sangrado y en blanco sobre el gris del contenedor: asi se lee como lo que es,
   el detalle de la fila de arriba y no una tabla mas. */
tr.st-units-row > td { padding: 0 0 0 5% !important; background: var(--av-gray-100); }
.st-units { max-height: 240px; overflow-y: auto; background: #fff;
    border: 1px solid var(--av-border); border-right: none; border-bottom: none;
    border-top-left-radius: var(--av-radius-md); }
.st-units-tbl { width: 100%; border-collapse: collapse; background: #fff; }
.st-units-tbl thead th { position: sticky; top: 0; z-index: 1;
    background: var(--av-surface); border-bottom: 1px solid var(--av-border);
    padding: 5px 12px; text-align: left; font-family: var(--av-font-heading); font-size: 10px;
    font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--av-gray-500);
    white-space: nowrap; }
.st-units-tbl tbody td { padding: 5px 12px; border-top: 1px solid var(--av-border-soft);
    vertical-align: middle; }
.st-units-tbl tbody tr:hover td { background: var(--av-blue-50); }
.st-units-tbl tbody tr:first-child td { border-top: none; }

/* Salida al listado por unidad: dentro del desplegable no se ordena ni se busca. */
.st-units-foot { padding: 6px 12px; background: var(--av-surface);
    border: 1px solid var(--av-border); border-right: none; border-top: none; text-align: right; }
.st-units-foot a { font-family: var(--av-font-heading); font-size: 11.5px;
    color: var(--av-blue); text-decoration: none; }
.st-units-foot a:hover { text-decoration: underline; }
.st-count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px;
    height: 20px; padding: 0 7px; background: var(--av-blue); color: #fff;
    border-radius: var(--av-radius-pill); font-family: var(--av-font-heading);
    font-size: 11.5px; font-weight: 700; }


.av-actions { display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
/* Boton de icono de una fila: la unidad de accion de todos los listados. */
.av-ib { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--av-border); border-radius: var(--av-radius-sm);
    color: var(--av-gray-500); cursor: pointer; font-size: 12px; padding: 0; }
.av-ib:hover { border-color: var(--av-blue); color: var(--av-blue); background: var(--av-blue-50); }
/* Borrar es la unica accion que no se deshace: se pinta como lo que es, pero solo al apuntarla,
   para que no compita con el resto de iconos de la fila. */
.av-ib.danger:hover { border-color: var(--av-red); color: var(--av-red); background: var(--av-red-50); }

.st-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 12px; border-top: 1px solid var(--av-border); background: var(--av-gray-50);
    font-family: var(--av-font-heading); font-size: 11.5px; color: var(--av-gray-500); }
.st-foot nav { margin: 0; }
.st-foot .pagination { margin: 0; }

.av-ficha-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; align-items: center; }
/* Igualar alturas de los controles de la cabecera (selector de año ≡ botones). */
.av-ficha-actions > .btn { display: inline-flex; align-items: center; height: 34px; }
.av-year-ctl { height: 34px; }
/* Selector de color sin marco: el swatch llena el control (más presencia). */
.av-body input[type="color"] { padding: 0; border: none; background: none; }
.av-body input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.av-body input[type="color"]::-webkit-color-swatch { border: 1px solid var(--av-border-soft); border-radius: var(--av-radius-sm); }

/* Control de contexto «año» en la cabecera de la ficha (dimensión CourseYear).
   Grupo compacto: etiqueta + selector de año + botón añadir. */
.av-year-ctl {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--av-blue-200);
    border-radius: var(--av-radius-sm);
    overflow: hidden;
    background: var(--av-blue-50);
}
.av-year-ctl-k {
    display: flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--av-blue-700);
    padding: 0 8px;
}
.av-year-ctl select {
    border: 0;
    border-left: 1px solid var(--av-blue-200);
    background: #fff;
    font-family: var(--av-font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--av-blue-900);
    padding: 4px 8px;
    outline: none;
    cursor: pointer;
}
.av-year-ctl button {
    border: 0;
    border-left: 1px solid var(--av-blue-200);
    background: #fff;
    color: var(--av-blue);
    padding: 0 10px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
}
.av-year-ctl button:hover { background: var(--av-blue-50); }

/* ── jq-toast → tema Aviastec ──
   La librería (jquery.toast.css) trae colores Bootstrap-3 y fuente Arial. Se
   re-tematiza con los semánticos del design system, tipografía y sombra de marca.
   Prefijo .av-body para ganar por especificidad sin depender del orden de carga. */
.av-body .jq-toast-single {
    font-family: var(--av-font-body);
    border-radius: var(--av-radius-md);
    box-shadow: var(--av-shadow-lg);
    font-size: 13px;
    padding: 12px 14px;
}
.av-body .jq-has-icon { padding: 12px 14px 12px 50px; }
.av-body .jq-toast-single h2 {
    font-family: var(--av-font-display);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .02em;
}
.av-body .jq-icon-success { background-color: var(--av-success); color: #fff; border-color: var(--av-success); }
.av-body .jq-icon-error   { background-color: var(--av-red);     color: #fff; border-color: var(--av-red); }
.av-body .jq-icon-warning { background-color: var(--av-warning); color: #fff; border-color: var(--av-warning); }
.av-body .jq-icon-info    { background-color: var(--av-blue);    color: #fff; border-color: var(--av-blue); }
.av-body .jq-toast-loader { background: rgba(255, 255, 255, .55); height: 3px; }

.av-ficha-tabs {
    border-bottom: 1px solid var(--av-border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* El contenido de las pestañas sí lleva márgenes (contenedores con margen). */
.av-ficha-body { padding: 20px var(--av-bleed-x) 0; }
/* Pestañas cuyo contenido NO está seccionado: las englobamos en una tarjeta
   (fondo + borde) para que no queden "desnudas" sobre el gris. Las que ya traen
   secciones (.av-form-section) o una tabla en tarjeta (.av-list) se quedan igual. */
.av-ficha-body .tab-pane:not(:has(.av-form-section)):not(:has(.av-list)):not(:has(.av-phase)) {
    background: #fff;
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius-sm);
    box-shadow: var(--av-shadow-xs);
    padding: 16px 16px 2px;
    margin-bottom: 16px;
}
/* Re-estilo de las nav-tabs de Bootstrap dentro de la ficha */
.av-ficha-tabs .nav-tabs {
    height: 44px;
    min-width: max-content;
    padding: 0 8px;
    flex-wrap: nowrap;
    align-items: stretch;
    border-bottom: 0;
    /* site.css pinta .nav.nav-tabs con rgba(0,0,0,.03); lo dejamos blanco limpio. */
    background: transparent;
}
.av-ficha-tabs .nav-tabs .nav-item { margin: 0; }
.av-ficha-tabs .nav-tabs .nav-link {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 14px;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    font-family: var(--av-font-display);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--av-gray-500);
}
.av-ficha-tabs .nav-tabs .nav-link:hover { color: var(--av-blue-900); }
.av-ficha-tabs .nav-tabs .nav-link.active {
    color: var(--av-blue);
    background: transparent;
    border-color: transparent;
    border-bottom-color: var(--av-blue);
}

@media (max-width: 575.98px) {
    /* El full-bleed y el pegado-arriba se recalculan solos desde los tokens
       (overrideados en el @media 768px); aquí solo el layout de la cabecera. */
    .av-ficha-header { flex-wrap: wrap; }
    .av-ficha-avatar { width: 56px; height: 56px; }
    .av-ficha-photo,
    .av-ficha-avatar-ph { width: 56px; height: 56px; }
    .av-ficha-actions { width: 100%; }
    .av-ficha-actions .btn { flex: 1; }
}

/* ══ Sub-ficha ═══════════════════════════════════════════════════════════════
   Editar una fila del sub-listado de una ficha como «ficha dentro de ficha»:
   cabecera propia con la identidad de la fila (título/badges/meta) + acciones,
   pestañas como menú debajo, y el cuerpo con las secciones (.av-form-section).
   El acento azul a la izquierda y el tinte de cabecera la separan de la ficha
   exterior; en estado bloqueado (solo lectura) el acento pasa a gris. Piloto:
   el editor de parte de vuelo dentro de la ficha del TLB. */
.av-subficha {
    background: #fff;
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius-sm);
    box-shadow: var(--av-shadow-sm);
    overflow: hidden;
    margin-bottom: 16px;
}
.av-subficha-head {
    background: var(--av-blue-50);
    border-bottom: 1px solid var(--av-lavender);
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.av-subficha.locked .av-subficha-head { background: var(--av-surface); border-bottom-color: var(--av-border); }
.av-subficha-avatar {
    width: 44px; height: 44px;
    border-radius: var(--av-radius-sm);
    background: #fff;
    border: 1px solid var(--av-lavender);
    display: flex; align-items: center; justify-content: center;
    color: var(--av-blue); flex-shrink: 0; font-size: 20px;
}
.av-subficha.locked .av-subficha-avatar { border-color: var(--av-border); color: var(--av-gray-500); }
.av-subficha-id { flex: 1; min-width: 180px; }
.av-subficha-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.av-subficha-title { font-family: var(--av-font-display); font-weight: 600; font-size: 20px; color: var(--av-blue-900); line-height: 1.05; margin: 0; }
.av-subficha-meta { display: flex; gap: 14px; flex-wrap: wrap; }
.av-subficha-meta span { font-size: 12px; color: var(--av-gray-500); }
.av-subficha-meta strong { color: var(--av-gray-800); font-weight: 600; }
.av-subficha-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.av-subficha-actions > .btn { display: inline-flex; align-items: center; height: 32px; }
/* pestañas como menú, en la parte inferior de la cabecera (nav Bootstrap con pills) */
.av-subficha-tabs { background: #fff; border-bottom: 1px solid var(--av-border); display: flex; padding: 0 10px; overflow-x: auto; }
.av-subficha-tabs .nav-item { margin: 0; }
.av-subficha-tabs .nav-link {
    border: none; border-bottom: 2px solid transparent; border-radius: 0;
    padding: 11px 14px;
    font-family: var(--av-font-display); font-weight: 600; font-size: 13px;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--av-gray-500); background: none; white-space: nowrap;
}
.av-subficha-tabs .nav-link:hover { color: var(--av-blue-900); }
.av-subficha-tabs .nav-link.active { color: var(--av-blue); border-bottom-color: var(--av-blue); background: none; }
/* cuerpo: fondo gris tenue con las secciones como tarjetas blancas */
.av-subficha-body { background: var(--av-surface); padding: 16px; }
@media (max-width: 575.98px) {
    .av-subficha-actions { width: 100%; }
    .av-subficha-actions .btn { flex: 1; }
}

/* ── Libro (LogBook) de la ficha de aeronave ──────────────────────
   Traducción del prototipo Diseño/"Aviastec ERP - Prototipo LogBook.html".
   Prefijo .lb- porque son piezas propias del libro, no del shell.
   ───────────────────────────────────────────────────────────────── */

/* Selector del sujeto del libro: aeronave, motores y hélices instalados.
   Cada tarjeta lleva su acumulado, que es lo que se compara entre ellas. */
.lb-picker { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.lb-card {
    position: relative;
    display: flex; flex-direction: column; gap: 1px;
    /* Tope de ancho: las descripciones de posición del catálogo son largas
       ("Forward side of firewall and forward") y sin tope una sola tarjeta se
       comía la fila entera. Con el tope el nombre parte en dos líneas. */
    min-width: 148px; max-width: 240px;
    padding: 8px 13px;
    background: #fff;
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius-md);
    cursor: pointer; text-align: left;
    font-family: var(--av-font-heading);
    transition: border-color .12s, box-shadow .12s;
}
.lb-card .k, .lb-card .s { white-space: normal; overflow-wrap: anywhere; }
.lb-card:hover { border-color: var(--av-blue-200); }
.lb-card:focus-visible { outline: none; box-shadow: var(--av-focus-ring); }
.lb-card .k {
    font-family: var(--av-font-display); font-size: 13px; font-weight: 600;
    letter-spacing: .05em; text-transform: uppercase; color: var(--av-gray-700);
}
.lb-card .s { font-size: 10px; color: var(--av-gray-400); }
.lb-card .h { font-family: var(--av-font-num); font-size: 12px; color: var(--av-gray-600); margin-top: 3px; }
.lb-card.active { border-color: var(--av-blue); box-shadow: inset 0 -2px 0 var(--av-blue), var(--av-shadow-sm); }
.lb-card.active .k { color: var(--av-blue); }
.lb-card.active .h { color: var(--av-blue-900); font-weight: 700; }

/* Tarjeta de un libro que el avión debe llevar pero cuya pieza todavía no está
   identificada. Se queda a la vista, apagada: que falte es lo que hay que ver,
   y esconderla dejaría al usuario sin saber que ese libro existe. */
.lb-card.off {
    background: var(--av-gray-50);
    border-style: dashed;
    cursor: default;
}
.lb-card.off:hover { border-color: var(--av-border); }
.lb-card.off .k { color: var(--av-gray-400); }
.lb-card.off .s { color: var(--av-gray-300); }
.lb-flag {
    margin-top: 3px;
    font-family: var(--av-font-heading); font-size: 9.5px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--av-gray-400);
}

/* Resumen del libro seleccionado: los datos que hoy hay que ir a buscar a
   otras pestañas. Cambian con la tarjeta activa. */
.lb-summary {
    display: flex; flex-wrap: wrap; gap: 1px;
    background: var(--av-border-soft);
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius-md);
    overflow: hidden; margin-bottom: 14px;
}
.lb-kpi { flex: 1 1 150px; background: #fff; padding: 9px 14px; }
.lb-kpi .lbl {
    font-family: var(--av-font-heading); font-size: 9px; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase; color: var(--av-gray-400);
}
.lb-kpi .val { font-family: var(--av-font-num); font-size: 19px; font-weight: 700; color: var(--av-gray-900); line-height: 1.25; }
.lb-kpi .val small { font-family: var(--av-font-heading); font-size: 11px; font-weight: 600; color: var(--av-gray-400); }
.lb-kpi .sub { font-size: 10px; color: var(--av-gray-500); }
.lb-kpi.hl { background: var(--av-blue-50); }
.lb-kpi.hl .val { color: var(--av-blue); }
.lb-kpi .val.warn { color: var(--av-warning); }

/* Toolbar del libro: pegada a la tabla, sin borde inferior (lo pone .lb-wrap). */
.lb-toolbar { border-radius: var(--av-radius-md) var(--av-radius-md) 0 0; border-bottom: none; margin-bottom: 0; }
.lb-toolbar .av-toolbar-row { flex-wrap: wrap; }
.av-field { display: flex; align-items: center; gap: 6px; font-family: var(--av-font-heading); font-size: 11px; color: var(--av-gray-500); }
.av-field > label { margin: 0; white-space: nowrap; }
.av-field .form-control { height: 28px; width: auto; font-size: 12px; padding: 0 8px; }

/* La tabla scrollea dentro de su caja para que cabecera y pie queden fijos. */
.lb-wrap {
    background: #fff;
    border: 1px solid var(--av-border);
    border-radius: 0 0 var(--av-radius-md) var(--av-radius-md);
    overflow: auto; max-height: 60vh;
}
table.lb { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; margin: 0; }
table.lb thead th {
    position: sticky;
    background: var(--av-gray-50); color: var(--av-blue-900);
    font-family: var(--av-font-heading); font-size: 9.5px; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase;
    padding: 6px 8px;
    border-bottom: 1px solid var(--av-border);
    border-right: 1px solid var(--av-border-soft);
    white-space: nowrap; z-index: 2;
}
table.lb thead tr:first-child th { top: 0; }
table.lb thead tr:last-child th { top: 25px; }
table.lb thead th.grp { text-align: center; background: var(--av-gray-100); }
table.lb tbody td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--av-border-soft);
    border-right: 1px solid var(--av-border-soft);
    color: var(--av-gray-700); white-space: nowrap;
}
table.lb tbody tr:hover td { background: var(--av-blue-50); }
table.lb .num { font-family: var(--av-font-num); text-align: right; }
table.lb .cen { text-align: center; }
/* El acumulado es el dato por el que se consulta el libro: columna destacada. */
table.lb .acc {
    background: #FAF9FE; font-family: var(--av-font-num); text-align: right;
    font-weight: 700; color: var(--av-blue-900);
    border-left: 1px solid var(--av-blue-100); border-right: 1px solid var(--av-blue-100);
}
table.lb thead th.acc { background: var(--av-blue-100); color: var(--av-blue-900); }
/* Vuelo con acción de mantenimiento: la fila se tiñe, que es como se localiza
   una intervención al repasar el libro sin llegar a la última columna. */
table.lb tr.maint td { background: var(--av-warning-bg); }
table.lb tr.maint:hover td { background: #F7E7C8; }
.tag-maint {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 7px; border-radius: var(--av-radius-pill);
    background: #fff; border: 1px solid #E4C68A; color: var(--av-warning);
    font-family: var(--av-font-heading); font-size: 9.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
}
/* Pie fijo con los totales, siempre a la vista. */
table.lb tfoot td {
    position: sticky; bottom: 0;
    background: var(--av-gray-100); color: var(--av-gray-800);
    font-family: var(--av-font-heading); font-weight: 700; font-size: 11px;
    padding: 6px 8px; border-top: 1px solid var(--av-border); z-index: 2;
}
table.lb tfoot td.num, table.lb tfoot td.acc { font-family: var(--av-font-num); text-align: right; }
table.lb tfoot tr.total td { background: var(--av-blue-900); color: #fff; }
table.lb tfoot tr.total td.acc { background: var(--av-blue-900); color: #fff; border-color: rgba(255,255,255,.2); }
.lb-empty { padding: 22px; text-align: center; color: var(--av-gray-500); font-family: var(--av-font-heading); }

@media (max-width: 575.98px) {
    .lb-card { min-width: 100%; }
    .lb-wrap { max-height: none; }
}

/* ── Árbol de componentes de una plantilla ────────────────────────
   Pestaña «Componentes» de la ficha de plantilla. Portado del prototipo
   aprobado `Diseño/Aviastec ERP - Prototipo Componentes de Plantilla.html`.

   Es un editor, no un listado: cada celda de la fila es el campo del nodo y se
   escribe en el sitio. El prefijo `tc-` evita chocar con las reglas por ID que
   site.css arrastra para las tablas legacy.
   ────────────────────────────────────────────────────────────── */

/* Aviso de solo lectura (plantilla global vista sin permiso de escritura). */
.tc-ro-banner {
    display: flex; align-items: center; gap: 9px;
    margin-bottom: 12px; padding: 8px 12px;
    background: var(--av-warning-bg); border: 1px solid #E4C68A;
    border-radius: var(--av-radius-md);
    font-family: var(--av-font-heading); font-size: 11.5px; color: #7A4A00;
}
.tc-hint { font-size: 11px; color: var(--av-gray-500); font-family: var(--av-font-heading); margin: 0 0 10px; }
.tc-hint b { color: var(--av-gray-700); }

/* Toolbar del árbol: pegada a la tabla, sin borde inferior. */
.tc-toolbar {
    background: #fff; border: 1px solid var(--av-border); border-bottom: none;
    border-radius: var(--av-radius-md) var(--av-radius-md) 0 0;
}
.tc-toolbar-row { display: flex; align-items: center; gap: 8px; padding: 9px 11px; flex-wrap: wrap; }
.tc-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }
/* Los .av-field de la toolbar llevan sus propios controles compactos. */
.tc-toolbar .av-field input, .tc-toolbar .av-field select {
    height: 28px; padding: 0 8px; border: 1px solid var(--av-border);
    border-radius: var(--av-radius-sm); font-family: var(--av-font-body);
    font-size: 12px; color: var(--av-gray-800); background: #fff;
}
.tc-toolbar .av-field input[type=search] { width: 190px; }

/* Contadores: nodos, ramas y conflictos. El bloque rojo es el que importa. */
.tc-counters {
    display: flex; gap: 1px; background: var(--av-border-soft);
    border: 1px solid var(--av-border); border-radius: var(--av-radius-sm); overflow: hidden;
}
.tc-counters div { background: #fff; padding: 3px 10px; font-family: var(--av-font-heading); font-size: 10.5px; color: var(--av-gray-500); }
.tc-counters b { font-family: var(--av-font-num); font-size: 12px; color: var(--av-gray-900); margin-right: 4px; }
.tc-counters div.bad { background: var(--av-red-50); }
.tc-counters div.bad b { color: var(--av-red); }

/* Barra de conflictos sobre la tabla: el guardado se bloquea antes de pulsar. */
.tc-warnbar {
    display: flex; align-items: center; gap: 8px; padding: 7px 12px;
    background: var(--av-red-50); border: 1px solid var(--av-red-100); border-bottom: none;
    font-family: var(--av-font-heading); font-size: 11.5px; color: var(--av-red);
}
.tc-warnbar b { color: #93042F; }

/* ── La tabla ─────────────────────────────────────────────────── */
.tc-wrap {
    background: #fff; border: 1px solid var(--av-border);
    border-radius: 0 0 var(--av-radius-md) var(--av-radius-md);
    overflow: auto; max-height: 620px;
}
table.tc { width: 100%; min-width: 1280px; border-collapse: separate; border-spacing: 0; font-size: 12px; margin: 0; }
table.tc thead th {
    position: sticky; top: 0; background: var(--av-gray-50); color: var(--av-blue-900);
    font-family: var(--av-font-heading); font-size: 9.5px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; padding: 6px 7px; text-align: left;
    border-bottom: 1px solid var(--av-border); border-right: 1px solid var(--av-border-soft);
    white-space: nowrap; z-index: 3;
}
table.tc tbody td {
    padding: 2px 6px; border-bottom: 1px solid var(--av-border-soft);
    border-right: 1px solid var(--av-border-soft); color: var(--av-gray-700);
    vertical-align: middle; height: 30px;
}
table.tc tbody tr:hover > td { background: #FBFAFE; }

/* La célula es la raíz visible: da un padre a todo y hace ver el tope de 3 niveles. */
table.tc tr.tc-root > td { background: var(--av-blue-900) !important; color: #fff;
    font-family: var(--av-font-display); font-size: 13px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; height: 28px; }
.tc-sub { font-family: var(--av-font-heading); font-size: 10.5px; font-weight: 400;
    letter-spacing: .03em; text-transform: none; color: rgba(255,255,255,.7); margin-left: 10px; }
/* Separador antes de cada rama de nivel 1. */
table.tc tr.tc-br1 > td { border-top: 1px solid var(--av-blue-100); }

/* Celda del árbol: sangría + guías + asa + pastilla de nivel. */
td.tc-tree { white-space: nowrap; }
.tc-twrap { display: flex; align-items: center; gap: 2px; }
.tc-ind { display: inline-block; flex-shrink: 0; }
.tc-gline { display: inline-block; width: 15px; flex-shrink: 0; color: var(--av-gray-300);
    font-family: var(--av-font-num); font-size: 11px; text-align: center; }
.tc-caret { width: 16px; height: 16px; flex-shrink: 0; border: none; background: none;
    cursor: pointer; color: var(--av-gray-500); font-size: 9px; padding: 0; line-height: 1; }
.tc-caret.ph { cursor: default; color: var(--av-gray-200); }
.tc-grip { width: 14px; flex-shrink: 0; color: var(--av-gray-300); cursor: grab;
    text-align: center; font-size: 11px; user-select: none; }
.tc-lvl { display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; flex-shrink: 0; border-radius: var(--av-radius-sm);
    background: var(--av-gray-100); color: var(--av-gray-500);
    font-family: var(--av-font-num); font-size: 9.5px; font-weight: 700; margin-right: 4px; }
table.tc tr[data-level="1"] .tc-lvl { background: var(--av-blue-100); color: var(--av-blue-900); }

/* Campos en línea: el borde aparece al pasar por encima, no antes. */
.tc-ci { width: 100%; min-width: 0; height: 24px; padding: 1px 5px;
    border: 1px solid transparent; background: transparent; border-radius: var(--av-radius-sm);
    font-family: var(--av-font-body); font-size: 12px; color: var(--av-gray-800); }
.tc-ci:hover { border-color: var(--av-gray-200); background: #fff; }
.tc-ci:focus { outline: none; border-color: var(--av-blue); background: #fff; box-shadow: 0 0 0 2px var(--av-blue-50); }
.tc-ci.desc { font-family: var(--av-font-heading); font-size: 12.5px; font-weight: 600; color: var(--av-gray-900); min-width: 190px; }
.tc-ci.num { font-family: var(--av-font-num); text-align: right; }
select.tc-ci { cursor: pointer; -webkit-appearance: none; appearance: none; padding-right: 14px;
    background-image: linear-gradient(45deg, transparent 50%, var(--av-gray-400) 50%),
                      linear-gradient(135deg, var(--av-gray-400) 50%, transparent 50%);
    background-position: calc(100% - 8px) 10px, calc(100% - 4px) 10px;
    background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; }
select.tc-ci.zone { font-family: var(--av-font-heading); font-size: 11.5px; }
.tc-ci.empty { color: var(--av-gray-300); }
/* Solo lectura: se explora igual, pero no hay nada que tocar. */
.tc-readonly .tc-ci { pointer-events: none; border-color: transparent !important; background: transparent !important; }
.tc-readonly select.tc-ci { background-image: none; }
.tc-readonly .tc-grip, .tc-readonly .tc-rowmenu { visibility: hidden; }
.tc-readonly .tc-pnc { cursor: default; }
.tc-readonly .tc-pnc:hover { border-color: transparent; background: transparent; }

/* Números de parte: el preferente con estrella y un +n con el resto. */
.tc-pnc { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; padding: 2px 3px;
    border: 1px solid transparent; border-radius: var(--av-radius-sm); cursor: pointer; min-height: 24px; }
.tc-pnc:hover { border-color: var(--av-gray-200); background: #fff; }
.tc-pn { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px;
    border-radius: var(--av-radius-pill); background: var(--av-gray-100); color: var(--av-gray-700);
    font-family: var(--av-font-num); font-size: 10.5px; white-space: nowrap; }
.tc-pn.pref { background: var(--av-blue-50); color: var(--av-blue-900); border: 1px solid var(--av-blue-200); font-weight: 700; }
.tc-pn .st { color: var(--av-blue); }
.tc-pn-more { font-family: var(--av-font-heading); font-size: 10px; color: var(--av-gray-400); }
.tc-pn-none { font-family: var(--av-font-heading); font-size: 11px; color: var(--av-gray-300); font-style: italic; }

/* Uso: cuántas piezas ha materializado el nodo y cuántas están identificadas. */
.tc-use { display: inline-flex; align-items: center; gap: 5px; font-family: var(--av-font-num); font-size: 11px; color: var(--av-gray-500); }
.tc-use.lock { color: var(--av-blue-900); font-weight: 700; }
.tc-use .lk { font-size: 10px; }
.tc-rowmenu { width: 24px; height: 24px; border: none; background: none; cursor: pointer;
    color: var(--av-gray-400); border-radius: var(--av-radius-sm); font-size: 14px; line-height: 1; }
.tc-rowmenu:hover { background: var(--av-gray-100); color: var(--av-gray-800); }

/* Conflicto de posición: se ve al instante, no al guardar. */
table.tc tr.tc-conflict > td { background: var(--av-red-50) !important; }
table.tc tr.tc-conflict > td:first-child { box-shadow: inset 3px 0 0 var(--av-red); }
.tc-cflag { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 0 6px;
    border-radius: var(--av-radius-pill); background: #fff; border: 1px solid var(--av-red-100);
    color: var(--av-red); font-family: var(--av-font-heading); font-size: 9.5px; font-weight: 700;
    text-transform: uppercase; white-space: nowrap; }

/* Arrastre para recolgar. */
table.tc tr.tc-dragging > td { opacity: .4; }
table.tc tr.tc-dropok > td { box-shadow: inset 0 -2px 0 var(--av-success); }
table.tc tr.tc-dropbad > td { background: var(--av-red-50) !important; box-shadow: inset 0 -2px 0 var(--av-red); }

/* Alta rápida: la última fila del árbol es de alta. */
table.tc tr.tc-qa > td { background: var(--av-gray-50); height: 34px; border-top: 1px solid var(--av-border); }
table.tc tr.tc-qa .tc-ci { border-color: var(--av-border); background: #fff; }
.tc-kbd { font-family: var(--av-font-num); font-size: 10px; background: #fff;
    border: 1px solid var(--av-border); border-bottom-width: 2px; border-radius: 3px;
    padding: 0 4px; color: var(--av-gray-600); }
.tc-hintk { font-family: var(--av-font-heading); font-size: 10px; color: var(--av-gray-400); white-space: nowrap; }

/* ── Popover de fila (menú y gestor de P/N) ───────────────────── */
.tc-pop { position: fixed; z-index: 1060; min-width: 220px; max-width: 330px; background: #fff;
    border: 1px solid var(--av-border); border-radius: var(--av-radius-md);
    box-shadow: var(--av-shadow-md); padding: 6px; font-size: 12px; }
.tc-pop h4 { margin: 0; padding: 4px 7px 6px; font-family: var(--av-font-display); font-size: 12px;
    font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--av-blue-900); }
.tc-mi { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: none;
    background: none; text-align: left; cursor: pointer; border-radius: var(--av-radius-sm);
    font-size: 12px; color: var(--av-gray-800); font-family: var(--av-font-body); }
.tc-mi:hover { background: var(--av-blue-50); }
.tc-mi.dz { color: var(--av-red); }
.tc-mi[disabled] { color: var(--av-gray-300); cursor: not-allowed; }
.tc-mi[disabled]:hover { background: none; }
.tc-mi .ic { width: 15px; text-align: center; color: var(--av-gray-400); }
.tc-sepr { height: 1px; background: var(--av-border-soft); margin: 4px 2px; }
.tc-note { padding: 4px 8px 6px; font-family: var(--av-font-heading); font-size: 10.5px; color: var(--av-gray-400); line-height: 1.4; }
.tc-pop-pn .r { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: var(--av-radius-sm); }
.tc-pop-pn .r:hover { background: var(--av-gray-50); }
.tc-pop-pn .r code { flex: 1; font-family: var(--av-font-num); font-size: 11.5px; color: var(--av-gray-800); }
.tc-pop-pn .r .lbl { font-family: var(--av-font-heading); font-size: 10px; color: var(--av-gray-400);
    display: flex; align-items: center; gap: 4px; cursor: pointer; margin: 0; }
.tc-pop-pn .r .x { border: none; background: none; color: var(--av-gray-400); cursor: pointer; font-size: 12px; }
.tc-pop-pn .r .x:hover { color: var(--av-red); }
.tc-pop-pn .add { display: flex; gap: 5px; padding: 6px 4px 2px; border-top: 1px solid var(--av-border-soft); margin-top: 4px; }
.tc-pop-pn .add input { flex: 1; height: 26px; padding: 0 7px; border: 1px solid var(--av-border);
    border-radius: var(--av-radius-sm); font-family: var(--av-font-num); font-size: 11.5px; }

/* Caja de resumen de los diálogos (clonado, borrado bloqueado). */
.tc-box { border: 1px solid var(--av-border); border-radius: var(--av-radius-md); padding: 10px 12px;
    background: var(--av-gray-50); font-family: var(--av-font-heading); font-size: 11.5px;
    color: var(--av-gray-600); line-height: 1.5; }
.tc-box.bad { background: var(--av-red-50); border-color: var(--av-red-100); color: #93042F; }
.tc-box b { color: var(--av-gray-900); }
.tc-box.bad b { color: #7A0126; }
.tc-aclist { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 5px; }
.tc-aclist li { background: #fff; border: 1px solid var(--av-border); border-radius: var(--av-radius-sm);
    padding: 2px 8px; font-family: var(--av-font-num); font-size: 11px; color: var(--av-gray-700); }

/* Estado vacío del árbol: una plantilla recién creada no tiene nada. */
.tc-empty { padding: 26px; text-align: center; color: var(--av-gray-500); font-family: var(--av-font-heading); }
.tc-empty b { display: block; font-size: 14px; color: var(--av-gray-800); margin-bottom: 4px; }

/* ── Componentes de una aeronave ──────────────────────────────────
   Pestaña «Componentes» de la ficha del avión. Portado del prototipo aprobado
   `Diseño/Aviastec ERP - Prototipo Componentes de Avion.html`.

   Reutiliza el árbol de la plantilla (`.tc-*`): la tabla, la sangría, los
   campos en línea y los popover son los mismos. Aquí se añade lo propio del
   avión: estado del hueco, identificación en la fila, almacén y la cola.
   ────────────────────────────────────────────────────────────── */

/* Avance del avión: cuánto queda por identificar y qué libros faltan. */
.ac-adv {
    display: flex; align-items: stretch; gap: 1px; background: var(--av-border-soft);
    border: 1px solid var(--av-border); border-radius: var(--av-radius-md);
    overflow: hidden; margin-bottom: 13px;
}
.ac-adv .cell { background: #fff; padding: 10px 14px; flex: 1 1 auto; }
.ac-adv .cell.big { flex: 2 1 300px; }
.ac-adv .lbl { font-family: var(--av-font-heading); font-size: 9px; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase; color: var(--av-gray-400); }
.ac-adv .val { font-family: var(--av-font-num); font-size: 21px; font-weight: 700; color: var(--av-gray-900); line-height: 1.2; }
.ac-adv .val small { font-family: var(--av-font-heading); font-size: 12px; font-weight: 600; color: var(--av-gray-400); }
.ac-adv .val.warn { color: var(--av-warning); }
.ac-adv .val.ok { color: var(--av-success); }
.ac-adv .sub { font-size: 10.5px; color: var(--av-gray-500); font-family: var(--av-font-heading); }
.ac-bar { display: flex; height: 9px; border-radius: var(--av-radius-pill); overflow: hidden;
    background: var(--av-gray-100); margin: 6px 0 4px; }
.ac-bar i { display: block; height: 100%; }
.ac-bar .id { background: var(--av-success); }
.ac-bar .na { background: var(--av-gray-300); }
.ac-leg { display: flex; gap: 13px; flex-wrap: wrap; font-family: var(--av-font-heading); font-size: 10.5px; color: var(--av-gray-500); }
.ac-leg i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }

/* Estado de la fila: la barra izquierda. Un hueco sin identificar no es una
   alarma —es el estado normal de la flota hoy—, así que va en gris y sin ruido. */
table.tc tr.ac-pend > td:first-child { box-shadow: inset 3px 0 0 var(--av-gray-200); }
table.tc tr.ac-ident > td:first-child { box-shadow: inset 3px 0 0 var(--av-success); }
table.tc tr.ac-na > td { background: var(--av-gray-50); color: var(--av-gray-400); }
table.tc tr.ac-na > td:first-child { box-shadow: inset 3px 0 0 var(--av-gray-300); }
table.tc tr.ac-bad > td { background: var(--av-red-50) !important; }
table.tc tr.ac-bad > td:first-child { box-shadow: inset 3px 0 0 var(--av-red); }

.ac-hueco { font-family: var(--av-font-heading); font-size: 12.5px; font-weight: 600;
    color: var(--av-gray-900); white-space: nowrap; margin-right: 5px; }
table.tc tr.ac-pend .ac-hueco, table.tc tr.ac-na .ac-hueco { color: var(--av-gray-500); font-weight: 400; }
.ac-zn { font-family: var(--av-font-num); font-size: 11px; color: var(--av-gray-500); white-space: nowrap; }

/* Pastillas de estado */
.ac-st { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px;
    border-radius: var(--av-radius-pill); font-family: var(--av-font-heading); font-size: 10px;
    font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.ac-st.pe { background: var(--av-gray-100); color: var(--av-gray-500); }
.ac-st.id { background: var(--av-success-bg); color: var(--av-success); }
.ac-st.al { background: var(--av-blue-50); color: var(--av-blue); border: 1px solid var(--av-blue-100); }
.ac-st.hi { background: #fff; color: var(--av-gray-400); border: 1px solid var(--av-border); }
.ac-st.er { background: var(--av-red-50); color: var(--av-red); }

/* Campos en línea propios de la identificación (sobre .tc-ci) */
.tc-ci.sn { font-family: var(--av-font-num); font-size: 12px; font-weight: 700; color: var(--av-blue-900); }
.tc-ci.err { border-color: var(--av-red); background: #fff; }
/* P/N que no está entre los admisibles del hueco: no es un error —la plantilla puede no recogerlo
   todavía—, así que ámbar y no rojo, igual que el encaje flojo. */
.tc-ci.warn { border-color: var(--av-warning); background: #fff; }
.ac-tsn.warn { color: var(--av-warning); }
select.tc-ci[disabled] { background-image: none; color: var(--av-gray-300); cursor: not-allowed; }
.ac-dual { display: flex; gap: 3px; align-items: center; }
.ac-dual .tc-ci { flex: 1; }
/* Montaje e inicialización: la fecha arriba, TSN y TSO debajo. Los tres campos en línea no caben
   en la celda, y apilarlos permite rotular cada número —dos casillas seguidas sin etiqueta no se
   distinguen—. */
.ac-init { display: flex; flex-direction: column; gap: 3px; }
.ac-init > .tc-ci { width: 100%; }
.ac-init .r { display: flex; gap: 4px; align-items: center; }
.ac-init .r .tc-ci { flex: 1; min-width: 0; }
.ac-init .r label { margin: 0; font-family: var(--av-font-heading); font-size: 9.5px;
    letter-spacing: .04em; color: var(--av-gray-400); }
.ac-msg { font-family: var(--av-font-heading); font-size: 10px; color: var(--av-red);
    white-space: nowrap; display: block; margin-top: -2px; }
.ac-emptyhint { font-family: var(--av-font-heading); font-size: 11px; color: var(--av-gray-300); font-style: italic; }

/* TSN y consumo del TBO: solo motores y hélices tienen vida propia. */
.ac-tsn { font-family: var(--av-font-num); font-size: 11.5px; color: var(--av-gray-800); white-space: nowrap; }
.ac-tsn small { color: var(--av-gray-400); }
.ac-tbo { display: block; height: 4px; border-radius: 2px; background: var(--av-gray-100); margin-top: 3px; overflow: hidden; }
.ac-tbo i { display: block; height: 100%; background: var(--av-blue); }
.ac-tbo i.hot { background: var(--av-warning); }
.ac-book { border: 1px solid var(--av-border); background: #fff; border-radius: var(--av-radius-sm);
    padding: 1px 7px; font-family: var(--av-font-heading); font-size: 10px; color: var(--av-blue); cursor: pointer; }
.ac-book:hover { background: var(--av-blue-50); }

/* ── Almacén, en la misma pantalla y con el veredicto ya calculado ── */
.ac-alm { margin-top: 16px; background: #fff; border: 1px solid var(--av-border);
    border-radius: var(--av-radius-md); box-shadow: var(--av-shadow-xs); overflow: hidden; }
.ac-alm-h { display: flex; align-items: center; gap: 10px; padding: 9px 14px;
    background: var(--av-gray-50); border-bottom: 1px solid var(--av-border); flex-wrap: wrap; }
.ac-alm-h h3 { margin: 0; font-family: var(--av-font-display); font-size: 14px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: var(--av-blue-900); }
.ac-alm-h .c { font-family: var(--av-font-heading); font-size: 11px; color: var(--av-gray-500); }
.ac-alm-b { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 9px; padding: 11px 14px; }
.ac-pc { border: 1px solid var(--av-border); border-radius: var(--av-radius-md); padding: 9px 11px; background: #fff; }
.ac-pc .d { font-family: var(--av-font-heading); font-size: 12.5px; font-weight: 700; color: var(--av-gray-900); }
.ac-pc .m { font-family: var(--av-font-heading); font-size: 10.5px; color: var(--av-gray-500); margin-bottom: 5px; }
.ac-pc .sn { font-family: var(--av-font-num); font-size: 11.5px; color: var(--av-blue-900); font-weight: 700; }
.ac-pc .row2 { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.ac-pc .fit { font-family: var(--av-font-heading); font-size: 10.5px; }
/* Verde = encaje por número de parte. Ámbar = solo por tipo y subtipo: es correcto
   según la regla, pero es un encaje flojo y hay que confirmarlo. */
.ac-pc .fit.ok { color: var(--av-success); }
.ac-pc .fit.wa { color: var(--av-warning); }
.ac-pc .fit.no { color: var(--av-gray-400); }
.ac-pc .btn { margin-left: auto; }

/* Elegir hueco (el bimotor: el sistema no puede adivinar el lado) */
.ac-pick { display: flex; flex-direction: column; gap: 6px; }
.ac-pickopt { display: flex; align-items: center; gap: 10px; padding: 9px 11px;
    border: 1px solid var(--av-border); border-radius: var(--av-radius-md); cursor: pointer;
    background: #fff; text-align: left; font-family: var(--av-font-body); width: 100%; }
.ac-pickopt:hover { border-color: var(--av-blue-200); }
.ac-pickopt.sel { border-color: var(--av-blue); box-shadow: inset 0 -2px 0 var(--av-blue); background: var(--av-blue-50); }
.ac-pickopt[disabled] { opacity: .55; cursor: not-allowed; background: var(--av-gray-50); }
.ac-pickopt .n { font-family: var(--av-font-display); font-size: 15px; font-weight: 600; letter-spacing: .03em; color: var(--av-gray-900); }
.ac-pickopt .s { font-family: var(--av-font-heading); font-size: 10.5px; color: var(--av-gray-500); }
.ac-pickopt .rr { margin-left: auto; display: flex; gap: 6px; align-items: center; }

/* ── Cola de identificación ───────────────────────────────────────
   Un hueco delante, el cursor en la serie y Enter para guardar y avanzar. Sin
   diálogos en medio: un lector de código de barras es un teclado que escribe la
   serie y pulsa Enter, y cualquier confirmación rompe el escaneo en cadena. */
.ac-q-wrap { display: grid; grid-template-columns: 250px 1fr; min-height: 430px; }
.ac-q-side { border-right: 1px solid var(--av-border); background: var(--av-gray-50); overflow: auto; max-height: 520px; }
.ac-q-side .hd { padding: 9px 12px 5px; font-family: var(--av-font-heading); font-size: 9.5px;
    font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--av-gray-400); }
.ac-q-grp { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 12px; border: none;
    background: none; cursor: pointer; text-align: left; font-family: var(--av-font-body);
    font-size: 12px; color: var(--av-gray-700); border-left: 2px solid transparent; }
.ac-q-grp:hover { background: #fff; }
.ac-q-grp.sel { background: #fff; border-left-color: var(--av-blue); color: var(--av-blue-900); font-weight: 700; }
.ac-q-grp .c { margin-left: auto; font-family: var(--av-font-num); font-size: 11px; color: var(--av-gray-500); }
.ac-q-grp.sel .c { color: var(--av-blue); }
.ac-q-main { padding: 14px 16px; overflow: auto; max-height: 520px; }
.ac-q-head { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; flex-wrap: wrap; }
.ac-q-head .reg { font-family: var(--av-font-display); font-size: 24px; font-weight: 600; letter-spacing: .03em; color: var(--av-gray-900); }
.ac-q-head .hu { font-family: var(--av-font-heading); font-size: 13px; color: var(--av-gray-600); }
.ac-q-head .pos { margin-left: auto; font-family: var(--av-font-heading); font-size: 11px; color: var(--av-gray-500); }
.ac-q-bar { height: 5px; border-radius: 3px; background: var(--av-gray-100); overflow: hidden; margin-bottom: 13px; }
.ac-q-bar i { display: block; height: 100%; background: var(--av-blue); }
/* Valores pegajosos: se ven y se sueltan de un clic, para que nadie herede sin
   querer el proveedor de la tanda anterior. */
.ac-sticky { display: inline-flex; align-items: center; gap: 4px; margin-left: 7px; padding: 0 6px;
    border-radius: var(--av-radius-pill); background: var(--av-blue-50); border: 1px solid var(--av-blue-100);
    color: var(--av-blue); font-family: var(--av-font-heading); font-size: 9px; font-weight: 700;
    text-transform: uppercase; cursor: pointer; }
.ac-sticky.off { background: #fff; border-color: var(--av-border); color: var(--av-gray-300); }
.ac-q-done { text-align: center; padding: 40px 20px; color: var(--av-gray-500); font-family: var(--av-font-heading); }
.ac-q-done .big { font-size: 34px; }
.ac-q-order { display: flex; margin-left: 8px; border: 1px solid var(--av-border); border-radius: var(--av-radius-pill); overflow: hidden; }
.ac-q-order button { border: none; background: #fff; height: 24px; padding: 0 12px; cursor: pointer;
    font-family: var(--av-font-heading); font-size: 11px; color: var(--av-gray-500); }
.ac-q-order button.on { background: var(--av-blue); color: #fff; font-weight: 700; }
.ac-q-next { margin-top: 14px; border-top: 1px solid var(--av-border-soft); padding-top: 10px; }
.ac-q-next .hd { font-family: var(--av-font-heading); font-size: 9.5px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--av-gray-400); margin-bottom: 6px; }
.ac-q-next .r { display: flex; align-items: center; gap: 9px; padding: 3px 0; font-size: 11.5px; color: var(--av-gray-500); }
.ac-q-next .r .reg { font-family: var(--av-font-display); font-size: 14px; font-weight: 600;
    letter-spacing: .03em; color: var(--av-gray-700); min-width: 80px; }
.ac-q-next .r.now { color: var(--av-blue-900); }
.ac-q-next .r.now .reg { color: var(--av-blue); }

@media (max-width: 767.98px) {
    .ac-q-wrap { grid-template-columns: 1fr; }
    .ac-q-side { max-height: 180px; border-right: none; border-bottom: 1px solid var(--av-border); }
}