/* ==========================================================================
   VOTE360 · MÓVIL 2026 — CAPA DE APLICACIÓN MÓVIL
   ==========================================================================
   Se carga JUSTO DESPUÉS de tema-2026.css en templates/layout/default.php y
   solo actúa por debajo de 768px (el corte xs de Bootstrap 3 que ya usa todo
   el árbol). Referencia: vote360/docs/MOVIL_2026.md.

   Qué hace:
     La app tiene 426 vistas para 13 roles; en el teléfono todas se sentían
     como una web de escritorio encogida (navbar plegada en hamburguesa con
     dropdowns de 20 ítems, tablas de 6 columnas con scroll lateral, botones
     de 26px). Esta hoja, junto con /js/movil-2026.js, convierte el shell en
     una aplicación móvil sin tocar las 426 vistas:

       1. Barra superior: logo + título de la pantalla + volver + buscar.
       2. Cajón de navegación (drawer): la misma navbar del rol, movida por JS
          y re-vestida como lista de secciones con acordeón y filas de 52px.
       3. Dock inferior por rol: 3–5 destinos, uno de ellos la acción principal.
       4. Tablas → tarjetas: cualquier <table> con <thead> se lee como lista de
          tarjetas (etiqueta/valor) con acciones al pie y "Más" para los campos
          secundarios. Lo marca el JS con .v-cards + data-label.
       5. Paginador, rail bake, formularios, modales (hoja inferior) y teclado.

   Reglas:
     - Cero hex: solo var(--token). Los tokens nuevos (--dock-h, --safe-b)
       viven en tokens.css.
     - Nada aquí aplica en escritorio: TODO va dentro de @media (max-width:
       767px) salvo el "display:none" de dock y cajón (por si el JS monta
       antes de un cambio de tamaño) y los @keyframes.
     - Ninguna clase nueva sin prefijo v-.
   ========================================================================== */

.v-dock, .v-drawer, .v-top__atras, .v-top__titulo, .v-top__buscar { display: none; }

@keyframes v-drawer-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes v-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes v-sheet-in { from { transform: translateY(100%); } to { transform: none; } }

@media (max-width: 767px) {

    /* ======================================================================
       1. SHELL — la página es una pantalla de app
       ====================================================================== */
    html { -webkit-tap-highlight-color: transparent; scroll-padding-top: calc(var(--nav-h) + var(--space-3)); }
    body { overscroll-behavior-y: contain; }
    body.v-con-dock #content.row,
    body.v-con-dock #container > #content {
        padding: var(--space-3) var(--space-3) calc(var(--dock-h) + var(--safe-b) + var(--space-8));
        min-height: calc(100vh - var(--nav-h));
    }
    /* El dock reemplaza al pie */
    body.v-con-dock .site-footer { display: none; }
    /* Un solo nivel de título por pantalla: el h1/h2 de la vista baja un punto,
       el título ya va en la barra superior. */
    #content h1, #content .v-page__title { font-size: var(--fs-xl); }
    #content h2 { font-size: var(--fs-lg); }
    #content legend, #content .columns.content > h3:first-child { font-size: var(--fs-lg); }
    .v-page { flex-direction: column; gap: var(--space-3); padding-left: var(--space-3); }
    .v-page__sub { font-size: var(--fs-sm); }

    /* ======================================================================
       2. BARRA SUPERIOR — logo · título · volver · buscar
       ====================================================================== */
    .navbar.menu-main { min-height: var(--nav-h); }
    .navbar.menu-main .container-fluid { padding: 0 var(--space-2) 0 var(--space-3); }
    .navbar.menu-main .navbar-header {
        display: flex;
        align-items: center;
        gap: var(--space-1);
        height: var(--nav-h);
        margin: 0;
        float: none;
    }
    .navbar.menu-main .navbar-header::before, .navbar.menu-main .navbar-header::after { display: none; }
    /* El hamburguesa de Bootstrap desaparece: el dock tiene "Menú" */
    body.v-con-dock .navbar.menu-main .navbar-toggle { display: none; }
    .navbar.menu-main .navbar-brand { flex: 0 0 auto; height: var(--nav-h); padding: 0; margin: 0; float: none; }
    .navbar.menu-main .navbar-brand img { height: 30px; }
    .navbar.menu-main .navbar-brand:hover img { transform: none; }
    /* Mientras el JS no lo mueve al cajón, el colapso queda oculto (sin destello) */
    body.v-con-dock .navbar.menu-main > .container-fluid > .navbar-collapse { display: none !important; }

    .v-top__atras, .v-top__buscar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: var(--touch-min);
        height: var(--touch-min);
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: var(--radius-pill);
        background: transparent;
        color: var(--nav-ink);
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
    }
    .v-top__atras:active, .v-top__buscar:active { background: var(--nav-surface); }
    .v-top__atras[hidden], .v-top__buscar[hidden] { display: none; }
    .v-top__atras { margin-left: calc(var(--space-2) * -1); }
    .v-top__titulo {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        margin: 0 var(--space-1);
        color: var(--nav-ink);
        font-size: var(--fs-lg);
        font-weight: var(--font-weight-semibold);
        letter-spacing: -0.01em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .v-top__titulo small { display: block; color: var(--nav-ink-3); font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; line-height: 1.2; }

    /* ======================================================================
       3. CAJÓN DE NAVEGACIÓN — la navbar del rol como lista de secciones
       ====================================================================== */
    .v-drawer { display: block; position: fixed; inset: 0; z-index: var(--z-dropdown); }
    .v-drawer[hidden] { display: none; }
    .v-drawer__scrim { position: absolute; inset: 0; background: var(--scrim); animation: v-scrim-in var(--t-med); }
    .v-drawer__panel {
        position: absolute;
        top: 0; right: 0; bottom: 0;
        width: min(88vw, 400px);
        display: flex;
        flex-direction: column;
        background: var(--nav-panel);
        color: var(--nav-ink);
        box-shadow: var(--shadow-3);
        animation: v-drawer-in var(--t-med);
        padding-bottom: var(--safe-b);
    }
    .v-drawer__cab {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-4) var(--space-3);
        border-bottom: 1px solid var(--nav-line);
    }
    .v-drawer__avatar {
        flex: 0 0 auto;
        width: 44px; height: 44px;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: var(--radius-pill);
        background: var(--tenant-color, var(--accent));
        color: var(--navy-950);
        font-weight: var(--font-weight-semibold);
        font-size: var(--fs-lg);
        text-transform: uppercase;
    }
    .v-drawer__quien { flex: 1 1 auto; min-width: 0; }
    .v-drawer__cuenta { display: block; font-weight: var(--font-weight-semibold); font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .v-drawer__rol { display: block; color: var(--nav-ink-3); font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
    .v-drawer__cerrar {
        flex: 0 0 auto;
        width: var(--touch-min); height: var(--touch-min);
        display: inline-flex; align-items: center; justify-content: center;
        border: 0; border-radius: var(--radius-pill);
        background: var(--nav-surface); color: var(--nav-ink);
        font-size: 18px; margin: 0; padding: 0; cursor: pointer;
    }
    .v-drawer__cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: var(--space-2) 0 var(--space-4); }

    /* El .navbar-collapse de Bootstrap vive aquí dentro en móvil */
    .v-drawer .navbar-collapse,
    .v-drawer .navbar-collapse.collapse {
        display: flex !important;
        flex-direction: column;
        height: auto !important;
        max-height: none;
        padding: 0;
        margin: 0;
        border: 0;
        overflow: visible !important;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
    }
    .v-drawer .navbar-collapse::before, .v-drawer .navbar-collapse::after { display: none; }
    .v-drawer .navbar-nav, .v-drawer .navbar-right, .v-drawer .navbar-left { float: none !important; display: block; margin: 0; width: 100%; }
    .v-drawer .navbar-nav > li { float: none; display: block; width: 100%; }
    /* Buscador arriba del todo; cuenta y ajustes al final */
    .v-drawer .navbar-form { order: -1; display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) var(--space-4) var(--space-3); padding: 0; border: 0; box-shadow: none; width: auto; }
    .v-drawer .navbar-form .form-group, .v-drawer .navbar-form .input-group { flex: 1 1 auto; min-width: 0; margin: 0; width: auto; }
    .v-drawer .navbar-form .form-control { width: 100%; min-height: 48px; margin: 0; font-size: 16px; background: var(--nav-surface); border-color: var(--nav-line); color: var(--nav-ink); }
    .v-drawer .navbar-form .form-control::placeholder { color: var(--nav-ink-3); }
    .v-drawer .navbar-form .btn, .v-drawer .navbar-form a.btn { flex: 0 0 auto; width: 48px; min-height: 48px; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--nav-surface); border-color: var(--nav-line); color: var(--nav-ink); }
    .v-drawer .navbar-form .btn { font-size: 0; }                         /* "Buscar" del digitador: solo la lupa */
    .v-drawer .navbar-form .btn i { font-size: 15px; }
    .v-drawer .navbar-form .btn span, .v-drawer .navbar-form .btn .btn-text { display: none; }
    /* Los menús bake llevan .navbar-inverse en el <ul> y el header (Bootstrap pinta gris #222) */
    .v-drawer .navbar-inverse, .v-drawer .navbar-nav.navbar-inverse, .v-drawer .container-fluid.navbar-inverse { background: transparent; border: 0; }
    .v-drawer .navbar-form .input-group-btn { width: auto; }
    /* Bloque derecho: primero las secciones (cuenta, engranaje), al final la fila de chips
       Tema / Recorridos (theme.js los inserta al principio del <ul>; el orden lo pone flex) */
    .v-drawer .navbar-right { order: 10; display: flex; flex-wrap: wrap; align-items: center; margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--nav-line); }
    .v-drawer .navbar-right > li { flex: 1 1 100%; }
    .v-drawer .navbar-right > li.v-theme, .v-drawer .navbar-right > li.v-tour-nav { flex: 0 0 auto; order: 9; }

    /* Fila de primer nivel: baldosa de icono + etiqueta + chevron */
    .v-drawer .navbar-nav > li > a,
    .v-drawer .navbar-nav > li > a.dropdown-toggle {
        display: flex !important;
        align-items: center;
        gap: var(--space-3);
        width: 100%;
        height: auto;
        min-height: 52px;
        margin: 0;
        padding: var(--space-2) var(--space-4);
        border-radius: 0;
        background: transparent !important;
        color: var(--nav-ink) !important;
        font-size: var(--fs-md);
        font-weight: var(--font-weight-medium);
        text-align: left;
        white-space: normal;
        line-height: 1.25;
    }
    .v-drawer .navbar-nav > li > a::after { display: none; }
    .v-drawer .navbar-nav > li > a:active { background: var(--nav-surface) !important; }
    .v-drawer .navbar-nav > li > a > i,
    .v-drawer .navbar-nav > li > a.dropdown-toggle > i:first-child {
        flex: 0 0 auto;
        width: 36px; height: 36px;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: var(--radius);
        background: var(--nav-surface);
        color: var(--nav-accent);
        font-size: 15px;
    }
    .v-drawer .navbar-nav > li > a .caret { display: none; }
    .v-drawer .navbar-nav > li > a.dropdown-toggle:not(.fas):not(.far):not(.fab)::before {
        content: "\f054";                               /* fa-chevron-right */
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        order: 9;
        margin-left: auto;
        color: var(--nav-ink-3);
        font-size: 11px;
        transition: transform var(--t-fast);
    }
    .v-drawer .navbar-nav > li.open > a.dropdown-toggle::before { transform: rotate(90deg); color: var(--nav-accent); }
    .v-drawer .navbar-nav > li.open > a.dropdown-toggle { color: var(--nav-accent) !important; }
    /* Toggles solo-icono (engranaje, usuario): la etiqueta la pone el JS */
    .v-drawer .v-drawer__etq { flex: 1 1 auto; }
    /* Los <a class="dropdown-toggle fas fa-cogs"> de bake: el icono está en la propia <a>.
       La <a> vuelve a la fuente de texto (FA la ponía en toda la fila) y el ::before
       recupera la familia y el peso 900 que exige el glifo sólido. */
    .v-drawer .navbar-nav > li > a.fas, .v-drawer .navbar-nav > li > a.far, .v-drawer .navbar-nav > li > a.fab { font-family: var(--font-sans); font-weight: var(--font-weight-medium); }
    .v-drawer .navbar-nav > li > a.fas::before, .v-drawer .navbar-nav > li > a.far::before, .v-drawer .navbar-nav > li > a.fab::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        flex: 0 0 auto;
        width: 36px; height: 36px;
        display: inline-flex; align-items: center; justify-content: center;
        order: 0; margin: 0;
        border-radius: var(--radius);
        background: var(--nav-surface);
        color: var(--nav-accent);
        font-size: 15px;
        transform: none;
    }
    .v-drawer .navbar-nav > li > a.fas.dropdown-toggle::after,
    .v-drawer .navbar-nav > li > a.far.dropdown-toggle::after,
    .v-drawer .navbar-nav > li > a.fab.dropdown-toggle::after {
        content: "\f054"; display: inline-block; font-family: "Font Awesome 5 Free"; font-weight: 900; order: 9; margin-left: auto; color: var(--nav-ink-3); font-size: 11px; transition: transform var(--t-fast);
    }
    .v-drawer .navbar-nav > li.open > a.fas.dropdown-toggle::after { transform: rotate(90deg); color: var(--nav-accent); }

    /* Sub-lista (el .dropdown-menu) como acordeón en flujo */
    .v-drawer .navbar-nav .dropdown-menu,
    .v-drawer .navbar-nav .open .dropdown-menu,
    .v-drawer .navbar-nav .dropdown-menu.dropdown-menu-right {
        display: none;
        position: static;
        float: none;
        width: 100%;
        min-width: 0;
        margin: 0 0 var(--space-2);
        padding: 0 0 var(--space-2);
        background: transparent;
        border: 0;
        border-bottom: 1px solid var(--nav-line);
        border-radius: 0;
        box-shadow: none;
        animation: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .v-drawer .navbar-nav .dropdown-menu::before, .v-drawer .navbar-nav .dropdown-menu::after { display: none; }
    .v-drawer .navbar-nav .open > .dropdown-menu { display: block; }
    .v-drawer .navbar-nav .dropdown-menu > li { float: none; display: block; }
    .v-drawer .navbar-nav .dropdown-menu > li.divider { display: none; }
    .v-drawer .navbar-nav .dropdown-menu > li#titulo-submenu,
    .v-drawer .navbar-nav .dropdown-menu > li > .info-user {
        display: block;
        padding: var(--space-3) var(--space-4) var(--space-1) calc(var(--space-4) + 36px + var(--space-3));
        color: var(--nav-accent);
        font-family: var(--font-mono);
        font-size: var(--fs-2xs);
        font-weight: var(--font-weight-medium);
        letter-spacing: var(--tracking-eyebrow);
        text-transform: uppercase;
        line-height: 1.5;
        white-space: normal;
    }
    .v-drawer .navbar-nav .dropdown-menu > li > .info-user { text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--nav-ink-2); }
    .v-drawer .navbar-nav .dropdown-menu > li > a,
    .v-drawer .navbar-nav .open .dropdown-menu > li > a {
        display: flex !important;
        align-items: center;
        gap: var(--space-2);
        min-height: 48px;
        padding: var(--space-2) var(--space-4) var(--space-2) calc(var(--space-4) + 36px + var(--space-3));
        margin: 0;
        border: 0;
        border-radius: 0;
        background: transparent !important;
        color: var(--nav-ink-2) !important;
        font-size: var(--fs-md);
        line-height: 1.3;
        white-space: normal;
        transform: none !important;
        box-shadow: none !important;
    }
    .v-drawer .navbar-nav .dropdown-menu > li > a:active { background: var(--nav-surface) !important; color: var(--nav-ink) !important; }
    .v-drawer .navbar-nav .dropdown-menu > li > a > i { flex: 0 0 auto; width: 20px; text-align: center; color: var(--nav-ink-3); font-size: 13px; }
    .v-drawer .navbar-nav .dropdown-menu > li > a > i + i { display: none; }     /* "sms + teléfono + sobre": uno basta */
    .v-drawer .navbar-nav .dropdown-menu > li > a[href$="/logout"],
    .v-drawer .navbar-nav .dropdown-menu > li > a[href*="/users/logout"] { color: var(--danger) !important; }
    .v-drawer .navbar-nav .dropdown-menu > li > a[href*="/users/logout"] > i { color: var(--danger); }
    .v-drawer .navbar-nav .dropdown-menu > li > a[href="#"]:not([data-toggle]) { color: var(--nav-ink-3) !important; }

    /* Botones inyectados por theme.js y v360-tour.js: fila de chips al final */
    .v-drawer .navbar-right > li.v-theme, .v-drawer .navbar-right > li.v-tour-nav {
        display: inline-flex; width: auto; float: none; padding: 0 0 0 var(--space-4); margin-top: var(--space-2);
    }
    .v-drawer .navbar-right > li.v-theme { padding-left: var(--space-4); }
    .v-drawer .v-theme { height: auto; padding: 0; }
    .v-drawer .v-theme__btn, .v-drawer .v-tour-nav__btn {
        width: auto; height: var(--touch-min); min-width: var(--touch-min);
        padding: 0 var(--space-3);
        border: 1px solid var(--nav-line); border-radius: var(--radius-pill);
        background: var(--nav-surface); color: var(--nav-ink);
    }
    .v-drawer .v-theme__btn::after { content: "Tema"; margin-left: var(--space-2); font-size: var(--fs-sm); }
    .v-drawer .v-tour-nav__btn::after { content: "Recorridos"; margin-left: var(--space-2); font-size: var(--fs-sm); }
    .v-drawer .election-countdown-navbar, .v-drawer .navbar-text { display: block; padding: var(--space-2) var(--space-4); color: var(--nav-ink-2); font-size: var(--fs-sm); }
    .v-drawer .countdown-navbar-container { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

    /* Cuerpo bloqueado mientras el cajón está abierto */
    html.v-drawer-abierto, html.v-drawer-abierto body { overflow: hidden; }

    /* ======================================================================
       4. DOCK INFERIOR — 3 a 5 destinos por rol
       ====================================================================== */
    .v-dock {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: var(--z-nav);
        height: calc(var(--dock-h) + var(--safe-b));
        padding: 0 var(--space-1) var(--safe-b);
        background: var(--nav-panel);
        border-top: 1px solid var(--nav-line);
        box-shadow: var(--shadow-2);
        transition: transform var(--t-med);
    }
    .v-dock::before {                                /* rail de marca, como la navbar */
        content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
        background: linear-gradient(90deg, var(--tenant-color), transparent 70%); opacity: 0.6; pointer-events: none;
    }
    body.v-teclado .v-dock { transform: translateY(110%); }
    .v-dock__item {
        flex: 1 1 0;
        min-width: 0;
        height: var(--dock-h);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        margin: 0;
        padding: var(--space-1) 2px 0;
        border: 0;
        border-radius: var(--radius);
        background: transparent;
        color: var(--nav-ink-3);
        font-family: var(--font-sans);
        font-size: var(--fs-2xs);
        font-weight: var(--font-weight-medium);
        letter-spacing: 0.01em;
        line-height: 1;
        text-decoration: none;
        cursor: pointer;
        -webkit-user-select: none; user-select: none;
    }
    .v-dock__item:hover, .v-dock__item:focus { color: var(--nav-ink-2); text-decoration: none; outline: 0; }
    .v-dock__item:focus-visible { box-shadow: var(--focus-ring); }
    .v-dock__item i { font-size: 21px; line-height: 1; transition: transform var(--t-fast); }
    .v-dock__item:active i { transform: scale(0.9); }
    .v-dock__item span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .v-dock__item.is-activo { color: var(--nav-accent); }
    .v-dock__item.is-activo i { color: var(--nav-accent); }
    .v-dock__item.is-activo::after { content: ""; width: 18px; height: 3px; border-radius: 3px; background: var(--nav-accent); margin-top: 1px; }
    /* La acción principal del rol: el único botón "elevado" de toda la app */
    .v-dock__item--accion { color: var(--nav-ink-2); }
    .v-dock__item--accion i {
        width: 50px; height: 50px;
        display: inline-flex; align-items: center; justify-content: center;
        margin-top: -22px;
        border-radius: var(--radius-pill);
        background: var(--accent);                   /* oro: --gradient-primary es navy/papel, no acento */
        color: var(--accent-ink);
        font-size: 22px;
        box-shadow: var(--shadow-2), 0 0 0 4px var(--nav-panel);
    }
    .v-dock__item--accion.is-activo i { color: var(--accent-ink); }
    .v-dock__item--accion.is-activo::after { display: none; }
    .v-dock__badge {
        position: absolute; margin-left: 18px; margin-top: -4px;
        min-width: 16px; height: 16px; padding: 0 4px;
        border-radius: var(--radius-pill);
        background: var(--danger); color: var(--accent-ink);
        font-family: var(--font-mono); font-size: 10px; line-height: 16px; text-align: center;
    }

    /* ======================================================================
       5. TABLAS → TARJETAS  (marcado por movil-2026.js: table.v-cards + data-label)
       ====================================================================== */
    table.v-cards,
    .index table.v-cards, .table.v-cards, .tabla-moderna.v-cards {
        display: block;
        width: 100%;
        margin: 0 0 var(--space-4);
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
        font-size: var(--fs-md);
    }
    table.v-cards > caption { display: block; padding: 0 0 var(--space-2); text-align: left; color: var(--ink-2); font-size: var(--fs-sm); }
    table.v-cards > thead, table.v-cards > colgroup { display: none; }
    table.v-cards > tbody, table.v-cards > tfoot { display: flex; flex-direction: column; gap: var(--space-3); }
    table.v-cards > tbody > tr, table.v-cards > tfoot > tr {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: var(--space-3) var(--space-4);
        background: var(--surface-1);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-1);
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    table.v-cards > tbody > tr:hover, table.v-cards > tbody > tr:nth-of-type(odd), .table-striped.v-cards > tbody > tr:nth-of-type(odd) { background: var(--surface-1); }
    table.v-cards > tbody > tr.success { border-color: var(--success); }
    table.v-cards > tbody > tr.warning { border-color: var(--warning); }
    table.v-cards > tbody > tr.danger  { border-color: var(--danger); }
    table.v-cards > tbody > tr.info    { border-color: var(--info); }
    table.v-cards > tbody > tr[data-v-ir] { cursor: pointer; }
    table.v-cards > tbody > tr[data-v-ir]:active { background: var(--surface-2); }
    table.v-cards td, table.v-cards th,
    .index table.v-cards td, .table.v-cards > tbody > tr > td, .tabla-moderna.v-cards tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-3);
        width: auto;
        min-height: 0;
        padding: var(--space-1) 0;
        border: 0 !important;
        background: transparent !important;
        color: var(--ink);
        font-size: var(--fs-sm);
        text-align: left !important;
        white-space: normal;
        line-height: 1.4;
    }
    /* Etiqueta del campo: mono mayúscula a la izquierda, valor a la derecha */
    table.v-cards td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 38%;
        max-width: 38%;
        color: var(--ink-3);
        font-family: var(--font-mono);
        font-size: var(--fs-2xs);
        font-weight: var(--font-weight-medium);
        letter-spacing: var(--tracking-eyebrow);
        text-transform: uppercase;
        line-height: 1.6;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    table.v-cards td[data-label=""]::before { display: none; }
    table.v-cards td > * { min-width: 0; }
    /* Campo título: nombre grande, sin etiqueta, ancho completo */
    table.v-cards td.v-cards__titulo {
        display: block;
        padding: 0 0 var(--space-2);
        margin-bottom: var(--space-1);
        border-bottom: 1px solid var(--line-neutral) !important;
        color: var(--ink);
        font-size: var(--fs-md);
        font-weight: var(--font-weight-semibold);
        line-height: 1.3;
    }
    table.v-cards td.v-cards__titulo::before { display: none; }
    /* El título va primero aunque en la tabla fuera la 4.ª columna (orden flex) */
    table.v-cards td.v-cards__titulo { order: -1; }
    /* Posición de ranking ("#"): chip arriba a la derecha, sin etiqueta */
    table.v-cards td.v-cards__rango { position: absolute; top: var(--space-3); right: var(--space-4); padding: 0; z-index: 1; }
    table.v-cards td.v-cards__rango::before { display: none; }
    table.v-cards tr:has(> td.v-cards__rango) > td.v-cards__titulo { padding-right: var(--space-12); }
    table.v-cards tr[data-v-ir]:has(> td.v-cards__rango) > td.v-cards__titulo { padding-right: var(--space-16); }
    table.v-cards tr[data-v-ir]:has(> td.v-cards__rango) > td.v-cards__titulo::after { right: calc(var(--space-4) + 44px); }
    /* Las hojas de vista fijan min-width (lp-table 700px, camp-table…) para el scroll lateral:
       en tarjetas la tabla mide lo que mide la pantalla. */
    table.v-cards, table.v-cards > tbody, table.v-cards > tbody > tr, table.v-cards td { min-width: 0 !important; max-width: 100%; width: auto; }
    table.v-cards { width: 100% !important; }
    table.v-cards td > * { max-width: 100%; }
    .lp-table-container:has(> table.v-cards), .ti-table-container:has(table.v-cards), [class*="table-container"]:has(> table.v-cards), [class*="table-wrap"]:has(> table.v-cards) { overflow: visible; }
    table.v-cards tr[data-v-ir] td.v-cards__titulo { padding-right: var(--space-6); }
    table.v-cards tr[data-v-ir] td.v-cards__titulo::after {
        content: "\f054"; position: absolute; right: var(--space-4); top: var(--space-3);
        font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 12px; color: var(--ink-3);
    }
    table.v-cards td.v-cards__titulo a { color: inherit; }
    /* Celdas vacías y columnas sin cabecera no gastan una fila */
    table.v-cards td.v-cards__vacia { display: none; }
    table.v-cards td.v-cards__check { position: absolute; top: var(--space-3); right: var(--space-4); padding: 0; }
    table.v-cards td.v-cards__check::before { display: none; }
    table.v-cards td.v-cards__check input { width: 22px; height: 22px; margin: 0; }
    /* Campos secundarios: plegados hasta "Más" */
    table.v-cards td.v-cards__extra { display: none; }
    table.v-cards tr.is-abierta td.v-cards__extra { display: flex; }
    table.v-cards td.v-cards__mas { display: block; padding: var(--space-1) 0 0; }
    table.v-cards td.v-cards__mas::before { display: none; }
    table.v-cards .v-cards__mas-btn {
        display: inline-flex; align-items: center; gap: var(--space-1);
        min-height: 32px; margin: 0; padding: 0 var(--space-2);
        border: 0; background: transparent; color: var(--accent);
        font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
    }
    table.v-cards .v-cards__mas-btn i { transition: transform var(--t-fast); font-size: 10px; }
    table.v-cards tr.is-abierta .v-cards__mas-btn i { transform: rotate(180deg); }
    /* Fila de acciones al pie de la tarjeta */
    table.v-cards td.v-cards__acciones, table.v-cards td.actions, .index table.v-cards td.actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: var(--space-2);
        margin-top: var(--space-2);
        padding: var(--space-2) 0 0;
        border-top: 1px solid var(--line-neutral) !important;
        white-space: normal;
    }
    table.v-cards td.v-cards__acciones::before, table.v-cards td.actions::before { display: none; }
    table.v-cards td.v-cards__acciones > *, table.v-cards td.actions > a, table.v-cards td.v-cards__acciones .ti-actions, table.v-cards td.v-cards__acciones .btn-group { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
    table.v-cards td.actions a, table.v-cards td.v-cards__acciones a, table.v-cards td.v-cards__acciones button, table.v-cards td.v-cards__acciones .btn {
        display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
        min-height: 40px; min-width: 40px; margin: 0; padding: 0 var(--space-3);
        border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-0); color: var(--ink-2);
        font-size: var(--fs-sm);
    }
    table.v-cards td.v-cards__acciones a:first-child, table.v-cards td.actions a:first-child { flex: 1 1 auto; }
    table.v-cards td.actions a[href*="/delete"], table.v-cards td.v-cards__acciones a[href*="/delete"],
    table.v-cards td.actions a[data-confirm-message], table.v-cards td.v-cards__acciones a[data-confirm-message] { color: var(--danger); border-color: var(--danger-soft); flex: 0 0 auto; }
    /* Fila "no hay registros" / totales: un solo bloque sin etiqueta */
    table.v-cards td.v-cards__plena { display: block; text-align: center !important; color: var(--ink-2); }
    table.v-cards td.v-cards__plena::before { display: none; }
    table.v-cards > tbody > tr.v-cards__resumen { background: var(--surface-0); border-style: dashed; }
    /* Fijo de tema-2026 §9 que convertía la tabla en un scroll lateral */
    table.v-cards.table, .index table.v-cards { overflow: visible; }
    .table-responsive:has(> table.v-cards), .tabla-wrapper:has(> table.v-cards), .ti-table-wrap:has(table.v-cards) { overflow: visible; border: 0; background: transparent; box-shadow: none; }

    /* Tablas que NO se convierten (2 columnas, sin thead, opt-out): scroll cómodo */
    #content table:not(.v-cards):not(.vertical-table) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table.vertical-table th { width: 40%; white-space: normal; }

    /* ======================================================================
       6. PAGINADOR, RAIL BAKE, TOOLBAR, FORMULARIOS
       ====================================================================== */
    .paginator { flex-direction: column; align-items: stretch; gap: var(--space-2); }
    .paginator ul.pagination { display: flex; width: 100%; gap: var(--space-2); }
    .paginator ul.pagination > li { flex: 1 1 0; display: none; }
    .paginator ul.pagination > li.prev, .paginator ul.pagination > li.next, .paginator ul.pagination > li.active { display: block; }
    .paginator ul.pagination > li.active { flex: 0 0 auto; }
    .paginator ul.pagination > li > a, .paginator ul.pagination > li > span, .paginator ul.pagination > li.active > a {
        display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--touch-min); border-radius: var(--radius);
    }
    .paginator ul.pagination > li.active > a, .paginator ul.pagination > li.active > span { min-width: var(--touch-min); padding: 0 var(--space-4); }
    .paginator > p, .paginator .counter { order: -1; text-align: center; color: var(--ink-3); font-size: var(--fs-xs); margin: 0; }

    /* Rail de acciones bake: tira horizontal de chips bajo el título */
    #actions-sidebar, #content > .actions.columns { margin: 0 calc(var(--space-3) * -1) var(--space-3); padding: 0 var(--space-3); }
    #actions-sidebar .side-nav, #content > .actions.columns .side-nav {
        display: flex; flex-wrap: nowrap; gap: var(--space-2);
        overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity;
        padding-bottom: var(--space-1);
    }
    #actions-sidebar .side-nav::-webkit-scrollbar, #content > .actions.columns .side-nav::-webkit-scrollbar { display: none; }
    #actions-sidebar .side-nav li, #content > .actions.columns .side-nav li { flex: 0 0 auto; scroll-snap-align: start; }
    #actions-sidebar .side-nav li.heading, #content > .actions.columns .side-nav li.heading { display: none; }
    #actions-sidebar .side-nav li a, #actions-sidebar .side-nav li a:not(.button), #content > .actions.columns .side-nav li a {
        min-height: 40px; display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-3); border-radius: var(--radius-pill); white-space: nowrap;
    }

    /* Toolbar de listado: buscador a ancho completo, botones en fila */
    .v-toolbar { flex-wrap: wrap; }
    .v-toolbar__search { flex: 1 1 100%; }
    .v-toolbar > select, .v-toolbar > .form-control { flex: 1 1 40%; max-width: none; }
    .v-toolbar__spacer { display: none; }
    .v-toolbar > .btn { flex: 1 1 auto; }

    /* Formularios: campos de 48px, letra de 16px (sin zoom en iOS), botón principal a lo ancho */
    #content .form-control, #content select, #content textarea,
    #content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) { min-height: 48px; font-size: 16px; }
    #content textarea.form-control { min-height: 96px; }
    #content label { font-size: var(--fs-sm); }
    #content .input.checkbox label, #content .input.radio label, #content .checkbox label, #content .radio label { min-height: var(--touch-min); display: flex; align-items: center; gap: var(--space-2); }
    #content input[type="checkbox"], #content input[type="radio"] { width: 22px; height: 22px; }
    #content form > .btn-primary, #content form > .submit > .btn, #content form .submit > input[type="submit"], #content form > button.button, #content form > input[type="submit"],
    #content form .form-actions .btn-primary, #content form .btn-primary.btn-block { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; font-size: var(--fs-md); }
    #content .btn-group > .btn { flex: 1 1 auto; }
    .v-page__actions .btn { min-height: 48px; }
    /* Botones de tamaño normal tocables */
    #content .btn:not(.btn-sm):not(.btn-xs):not(.ti-btn) { min-height: var(--touch-min); }

    /* Mensajes flash: por encima del contenido, no del dock */
    div.message { margin: 0 0 var(--space-3); }

    /* Grids del sistema y del tema moderno a una columna */
    .metrics-grid, .v-grid-2, .v-grid-3, .v-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .modern-card, .v-card { padding: var(--space-4); }

    /* ======================================================================
       7. MODALES → HOJA INFERIOR (bottom sheet)
       ====================================================================== */
    .modal { padding: 0 !important; }
    .modal .modal-dialog, .modal.fade .modal-dialog, .modal.in .modal-dialog {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        width: auto;
        max-width: none;
        margin: 0;
        transform: none;
        transition: none;
        animation: v-sheet-in var(--t-med);
    }
    .modal .modal-content {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - var(--nav-h));
        max-height: calc(100dvh - var(--nav-h));
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        padding-bottom: var(--safe-b);
        border-bottom: 0;
    }
    .modal .modal-content::before {                    /* asa de la hoja */
        content: ""; align-self: center; width: 40px; height: 4px; margin: var(--space-2) 0 0;
        border-radius: 4px; background: var(--line-strong);
    }
    .modal .modal-header { flex: 0 0 auto; }
    .modal .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .modal .modal-footer { flex: 0 0 auto; display: flex; gap: var(--space-2); }
    .modal .modal-footer .btn { flex: 1 1 auto; min-height: 48px; margin: 0; }
    .modal .modal-footer .btn + .btn { margin-left: 0; }
    /* Con el cajón o una hoja abiertos, el dock no compite */
    body.modal-open .v-dock { transform: translateY(110%); }

    /* Select2 abierto: opciones tocables */
    .select2-container--default .select2-results__option { min-height: var(--touch-min); display: flex; align-items: center; }

    /* ======================================================================
       8. APP INSTALADA, MOVIMIENTO REDUCIDO, IMPRESIÓN
       ====================================================================== */
    html.v-app .navbar.menu-main { padding-top: env(safe-area-inset-top, 0px); min-height: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); }
    @media (prefers-reduced-motion: reduce) {
        .v-drawer__panel, .v-drawer__scrim, .modal .modal-dialog { animation: none; }
        .v-dock, .v-dock__item i { transition: none; }
    }
}

@media print {
    .v-dock, .v-drawer, .v-top__atras, .v-top__buscar { display: none !important; }
}