/* ══ Sistema de diseño «Vidrio Mate Púrpura» ══════════════════════════════════
   Vivía dentro de <style> en index.html, así que era del administrativo y de nadie
   más: los otros cuatro mundos —academia, coach, barber, personal— se quedaron con
   el panel verde oscuro de antes. Son la MISMA aplicación para la persona que la
   usa, y verlas distintas hace dudar de si se entró donde se quería.

   Se saca a un archivo y lo enlazan los cinco. No cambia una sola regla: los
   selectores ya eran genéricos (#sidebar, header.sticky, .nav-link, #topbar-actions)
   y esa estructura la comparten los cinco shells desde siempre. */

    :root{
      --bg-0:#020203;--bg-1:#040406;--bg-2:#08070c;
      --surface:#f6f3fb;--surface-ink:#211531;--surface-muted:#6b5b7d;
      --accent:#b794f6;--accent-strong:#8b5cf6;--accent-vivid:#772ded;--accent-ink:#2a1640;
      --on-dark:#efe7fb;--on-dark-muted:#b9a8cf;
      --line:rgba(255,255,255,0.08);--danger:#f87171;--ok:#86efac;
      --glass-bg:linear-gradient(180deg,rgba(16,15,20,0.86),rgba(4,4,6,0.90));
      --glass-border:1px solid rgba(255,255,255,0.14);
      --glass-shadow:0 14px 44px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.10);
      --glass-blur:blur(12px) saturate(140%);
    }
    /* El lienzo, con el color base del tema. No se ve nunca... salvo el instante en que el
       teclado del teléfono cambia el alto del viewport y el navegador repinta: ahí las
       franjas de arriba y de abajo mostraban blanco. Ahora muestran el fondo. */
    html{background:var(--bg-0)}
    /* Fondo global + tipografía */
    body{
      background:
        radial-gradient(1200px 600px at 50% -10%, var(--bg-2) 0%, transparent 60%),
        linear-gradient(165deg, var(--bg-1) 0%, var(--bg-0) 70%) !important;
      background-attachment:fixed !important; color:var(--on-dark) !important;
      font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif !important;
    }
    .font-display,h1,h2,h3{font-family:'Hanken Grotesk',system-ui,sans-serif !important;letter-spacing:-.02em}

    /* ═══ VARIANTE GLASS OSCURA (html.theme-glass): tarjetas de vidrio oscuro ═══ */
    /* Sin backdrop-filter en las TARJETAS (son muchas y matan el compositing al
       cambiar de zona/scrollear). Fondo translúcido sólido: se ve casi igual. */
    html.theme-glass .bg-white{
      background:rgba(255,255,255,0.048) !important;color:var(--on-dark) !important;
      border-color:rgba(255,255,255,0.17) !important;
    }
    html.theme-glass .text-slate-900,html.theme-glass .text-slate-800,html.theme-glass .text-slate-700,
    html.theme-glass .text-slate-600{color:var(--on-dark) !important}
    html.theme-glass .text-slate-500,html.theme-glass .text-slate-400{color:var(--on-dark-muted) !important}
    html.theme-glass input[class*="bg-white"]:not([type="checkbox"]):not([type="radio"]),html.theme-glass select[class*="bg-white"],
    html.theme-glass textarea[class*="bg-white"],
    html.theme-glass #modal-root input:not([class*="bg-transparent"]):not([type="checkbox"]):not([type="radio"]),
    html.theme-glass #modal-root select:not([class*="bg-transparent"]),
    html.theme-glass #modal-root textarea:not([class*="bg-transparent"]){
      background:rgba(255,255,255,0.06) !important;color:var(--on-dark) !important;border-color:rgba(255,255,255,0.14) !important;
    }
    html.theme-glass input::placeholder,html.theme-glass textarea::placeholder{color:var(--on-dark-muted) !important}
    /* La barra lateral es el bloque más grande de la pantalla: dejarla en morado
       (#1a1022) hacía que todo el modo oscuro se leyera berenjena. Solo en oscuro. */
    html.theme-glass .bg-forest-900{background:#070609 !important}
    html.theme-glass #sidebar{border-right:1px solid rgba(255,255,255,.06)}
    html.theme-glass header.sticky{background:rgba(5,4,8,.86) !important;border-bottom-color:rgba(255,255,255,.08) !important}
    html.theme-glass header.sticky #topbar-title,html.theme-glass header.sticky h2{color:#fff !important}
    /* Toggle sol↔luna: dos íconos apilados que se cruzan (robusto, sin animar geometría SVG) */
    .thicon{position:relative;display:grid;place-items:center}
    .thicon svg{grid-area:1/1;transition:opacity .22s ease,transform .4s cubic-bezier(.34,1.56,.64,1)}
    .thicon .ic-moon{opacity:0;transform:rotate(-90deg) scale(.5)}
    .thicon .ic-sun{opacity:1;transform:none}
    html.theme-glass .thicon .ic-sun{opacity:0;transform:rotate(90deg) scale(.5)}
    html.theme-glass .thicon .ic-moon{opacity:1;transform:none}
    /* Paneles/hover/divisores claros → translúcidos en glass */
    html.theme-glass .bg-slate-50,html.theme-glass .bg-slate-100{background:rgba(255,255,255,0.038) !important}
    html.theme-glass .hover\:bg-slate-50:hover,html.theme-glass .hover\:bg-slate-100:hover{background:rgba(255,255,255,0.055) !important}
    html.theme-glass tbody tr,html.theme-glass [class*="divide-"]>*+*{border-color:rgba(255,255,255,0.11) !important}
    html.theme-glass .border-slate-200,html.theme-glass .border-slate-100,html.theme-glass [class*="border-slate"]{border-color:rgba(255,255,255,0.14) !important}
    /* Tablas modernas: encabezado tipo BARRA (fondo marcado), filas aireadas con hover */
    table.w-full thead tr{background:rgba(2,6,23,.05)}
    html.theme-glass table.w-full thead tr{background:rgba(255,255,255,.042)}
    table.w-full thead th{padding-top:.7rem;padding-bottom:.7rem}
    table.w-full tbody td{padding-top:.8rem;padding-bottom:.8rem}
    table.w-full tbody tr{transition:background .12s}
    /* Los precios DENTRO de una lista: la fila tiene que medir lo MISMO que la de
       inventario. Y no se consigue con `height`, se consigue quitando relleno.
       El motivo: esta tabla lleva un <input> con forma de píldora en la columna del margen
       —unos 30 px— mientras que inventario es texto suelto —20 px—. Con el mismo relleno
       vertical (.8rem arriba y abajo) la fila de precios sale 10 px mas alta SOLA. Poner un
       `height` encima solo la estiraba mas. Se le baja el relleno a .5rem para compensar
       justo esos 10 px: 30 + 16 = 46 px, que es lo que mide inventario (20 + 25,6).
       Sin !important y sin media query a proposito: la regla movil (table td, con
       !important) le gana sola, que es lo que se quiere en tarjetas apiladas. */
    #lp-tbody td{padding-top:.5rem;padding-bottom:.5rem}
    table.w-full tbody tr:hover{background:rgba(2,6,23,.04)}
    html.theme-glass table.w-full tbody tr:hover{background:rgba(255,255,255,.045)}

    /* Tarjetas claras + radios generosos */
    .bg-white{background:var(--surface) !important;color:var(--surface-ink) !important}
    .rounded-2xl{border-radius:24px !important}
    .rounded-3xl{border-radius:30px !important}
    .rounded-xl{border-radius:18px !important}
    .border-slate-200,.border-slate-100,[class*="border-slate-200"],[class*="border-slate-100"]{border-color:rgba(33,21,49,.08) !important}
    .shadow-sm{box-shadow:0 8px 24px rgba(20,8,40,.10) !important}
    .shadow-md,.shadow-xl{box-shadow:0 16px 40px rgba(16,6,34,.22) !important}
    .shadow-2xl{box-shadow:0 30px 80px rgba(10,4,24,.55) !important}

    /* Inputs sobre tarjeta clara */
    input[class*="bg-white"]:not([type="checkbox"]):not([type="radio"]),select[class*="bg-white"],textarea[class*="bg-white"],
    #modal-root input:not([class*="bg-transparent"]):not([type="checkbox"]):not([type="radio"]),#modal-root select,#modal-root textarea{
      background:rgba(33,21,49,.05) !important;border-color:rgba(33,21,49,.12) !important;
      color:var(--surface-ink) !important;border-radius:14px !important;
    }
    /* Documento (V/J… + número): control UNIDO — letra con esquinas izq. redondeadas,
       número con esquinas der. redondeadas y unión plana en el medio (sin discrepancia).
       #modal-root en el selector: el tema "vidrio" pisa border-radius con
       "#modal-root input{border-radius:14px !important}" (especificidad de ID) —
       sin ese mismo ID aquí, ESA regla ganaba y el input quedaba redondeado los 4
       lados pese a este !important (misma importancia, pero menos específico pierde). */
    .docgrp{align-items:stretch}
    /* Costo unitario + moneda ($/Bs) pegados (mismo patrón que la cédula).
       Esto nunca llegó a unirse, por dos motivos que se sumaban:

       1. `mejorarNumeros()` ENVUELVE cada campo numérico en un `<div class="numwrap">`
          para colgarle las flechas, así que el input deja de ser hijo DIRECTO de
          `.cmpcost` y un selector de hijo directo ya no lo alcanza. (La regla del
          teléfono, más abajo, sí contaba con el envoltorio.)
       2. Y aunque lo alcance, pierde. La regla de los campos en modo claro
          —`input[class*="bg-white"]:not([type="checkbox"]):not([type="radio"])`— pesa
          (0,3,1), porque lo de adentro de cada `:not()` SUMA. Un `.cmpcost>input` pesa
          (0,1,1) y con el envoltorio (0,2,1): los dos por debajo, y las dos con
          `!important`, así que decide la especificidad. El botón sí se aplanaba, porque
          para él no había competidor: el par quedaba con el campo redondeado de los
          cuatro lados contra un botón plano, o sea dos cajas que no se tocan.

       Va acotado a pantalla grande, simétrico a la regla del teléfono, donde el grupo se
       separa A PROPÓSITO. Así las dos no compiten: cada una manda en su rango. */
    @media (min-width:821px){
      html .cmpcost.cmpcost>input,
      html .cmpcost.cmpcost>.numwrap>input{border-radius:14px 0 0 14px !important;border-right-width:0 !important}
      html .cmpcost.cmpcost [id$="-moneda-btn"]{border-radius:0 14px 14px 0 !important}
    }
    input::placeholder,textarea::placeholder{color:var(--surface-muted) !important}

    /* ═══ POPOVERS/dropdowns/selects: claros por defecto (igual que .bg-white),
       vidrio mate oscuro solo con html.theme-glass. Antes .dd-pop/.bp-pop y sus hijos
       tenían color:var(--on-dark) (claro) SIN scopear a theme-glass, así que en modo
       claro quedaba texto claro sobre fondo claro (ilegible). ═══ */
    .dd-pop,.bp-pop{
      background:var(--surface) !important;color:var(--surface-ink) !important;
      border:1px solid rgba(33,21,49,.10) !important;box-shadow:0 14px 34px rgba(20,8,40,.14) !important;
      border-radius:18px !important;
    }
    .dd-pop *,.bp-pop *{color:var(--surface-ink) !important;border-color:rgba(33,21,49,.08) !important}
    .dd-pop button:hover,.bp-pop>div:hover,.bp-pop [role="button"]:hover,
    .dd-pop [data-idx]:hover,.dd-pop li:hover,.dd-pop >div:hover{background:rgba(33,21,49,.06) !important}
    .dd-pop [aria-selected="true"],.bp-pop [aria-selected="true"],.dd-pop .selected{
      background:var(--accent-vivid) !important;color:#fff !important;
    }
    /* Todos los ítems de CUALQUIER dropdown redondeados (catch-all: selects, kebabs, calendarios…) */
    .dd-pop>*,.bp-pop>*{border-radius:12px !important}
    html.theme-glass .dd-pop,html.theme-glass .bp-pop{
      background:var(--glass-bg) !important;
      -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
      border:var(--glass-border) !important;box-shadow:var(--glass-shadow) !important;
      color:var(--on-dark) !important;
    }
    /* SUPERFICIES QUE FLOTAN: modales, el diálogo de confirmar, el cajón lateral y los
       desplegables de búsqueda hechos a mano (el buscador de clientes, las sugerencias de
       proyectos). Comparten la clase `bg-white` con las TARJETAS, y las tarjetas van planas
       —un 4,8% de blanco— porque descansan SOBRE el fondo. Una superficie que flota ENCIMA
       del contenido no puede ir plana: se lee lo de abajo a través de ella, que es
       exactamente lo que se veía. Los kebabs no sufrían esto porque llevan .dd-pop, que ya
       toma el vidrio; el resto se quedaba transparente. Se resuelven por lo que tienen en
       común: FLOTAN (absolute/fixed) o están ELEVADAS (shadow-xl / shadow-2xl, que acá solo
       llevan las superficies que se levantan; las tarjetas usan shadow-sm). El panel de un
       modal no es ninguna de las dos —vive dentro del overlay—, así que va por su posición
       en el árbol. */
    html.theme-glass .absolute.bg-white,
    html.theme-glass .fixed.bg-white,
    html.theme-glass .bg-white.shadow-xl,
    html.theme-glass .bg-white.shadow-2xl,
    html.theme-glass #modal-root > div > div,
    html.theme-glass #confirm-root > div > div{
      /* SIN backdrop-filter, a proposito. Un elemento con backdrop-filter se convierte en
         el bloque contenedor de sus descendientes `position:fixed`, y los desplegables se
         posicionan asi, con coordenadas de PANTALLA. Ponerselo al panel de un modal —que
         no ocupa la pantalla— hacia que el desplegable saliera desplazado, lejos de su
         campo. (El velo de fondo si lo lleva y no molesta: ocupa la pantalla entera, asi
         que como bloque contenedor da el mismo resultado.) Aca no se pierde nada: estas
         superficies van al 86-90% de opacidad y el desenfoque no llega a verse. */
      background:var(--glass-bg) !important;
      border-color:rgba(255,255,255,0.14) !important;
    }
    html.theme-glass .dd-pop *,html.theme-glass .bp-pop *{color:var(--on-dark) !important;border-color:rgba(255,255,255,.10) !important}
    html.theme-glass .dd-pop button:hover,html.theme-glass .bp-pop>div:hover,html.theme-glass .bp-pop [role="button"]:hover,
    html.theme-glass .dd-pop [data-idx]:hover,html.theme-glass .dd-pop li:hover,html.theme-glass .dd-pop >div:hover{background:rgba(255,255,255,.10) !important}
    html.theme-glass .dd-pop [aria-selected="true"],html.theme-glass .bp-pop [aria-selected="true"],html.theme-glass .dd-pop .selected{
      background:var(--accent-vivid) !important;color:#fff !important;
    }
    /* Panel de notificaciones: tarjetas internas legibles sobre el vidrio (solo dark) */
    html.theme-glass #notif-pop [class*="bg-zinc-50"],html.theme-glass #notif-pop [class*="bg-white"],html.theme-glass #notif-pop [class*="bg-slate-50"],html.theme-glass #notif-pop [class*="bg-slate-100"],html.theme-glass #notif-pop [class*="bg-night-900"]{background:rgba(255,255,255,0.06) !important}
    html.theme-glass #notif-pop [class*="border-zinc"],html.theme-glass #notif-pop [class*="border-slate"]{border-color:rgba(255,255,255,0.17) !important}
    html.theme-glass #notif-pop [class*="text-zinc-4"],html.theme-glass #notif-pop [class*="text-zinc-5"]{color:var(--on-dark-muted) !important}
    /* Buscador expandible (icono→barra) + su input: claro por defecto, vidrio con theme-glass.
       Antes esto SIEMPRE era vidrio oscuro con texto claro, sin importar el tema → en modo
       claro la barra "Buscar producto o servicio" quedaba con texto claro sobre fondo claro. */
    .es-bar,.es-open{
      background:rgba(33,21,49,.05) !important;border:1px solid rgba(33,21,49,.12) !important;color:var(--surface-ink) !important;
    }
    .es-input{color:var(--surface-ink) !important}
    .es-input::placeholder{color:var(--surface-muted) !important}
    html.theme-glass .es-bar,html.theme-glass .es-open{
      background:var(--glass-bg) !important;
      -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
      border:var(--glass-border) !important;color:var(--on-dark) !important;
    }
    html.theme-glass .es-input{color:var(--on-dark) !important}
    html.theme-glass .es-input::placeholder{color:var(--on-dark-muted) !important}

    /* Sidebar de vidrio profundo */
    #sidebar{
      background:linear-gradient(180deg,rgba(13,9,19,.91),rgba(4,3,7,.96)) !important;
      -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
      border-right:var(--glass-border) !important;
    }
    .nav-link{color:var(--on-dark-muted) !important;border-radius:14px}
    .nav-link:hover{background:rgba(255,255,255,.08) !important;color:#fff !important}

    /* ══ EL MISMO PANEL LATERAL, CON LUZ ══════════════════════════════════════
       Hasta acá la regla de arriba pintaba el lateral casi negro SIEMPRE: no
       pregunta por el tema, así que en modo claro el programa quedaba con una
       franja negra al costado de una pantalla glaciar.

       Es el MISMO panel: misma estructura, mismos íconos, mismo comportamiento.
       Lo único que cambia es la luz. Y al cambiarla las capas se dan vuelta,
       igual que en la pantalla de acceso: en oscuro el elemento activo se
       ACLARA sobre el fondo negro; sobre papel aclarar no se ve, así que acá
       se TIÑE.

       Todo con `!important` porque lo que pisa también lo lleva. */
    html:not(.theme-glass) #sidebar{
      background:#ffffff !important;
      -webkit-backdrop-filter:none;backdrop-filter:none;
      border-right:1px solid rgba(33,21,49,.10) !important;
      color:#1e2230 !important;
    }
    html:not(.theme-glass) #sidebar .sb-head{border-bottom-color:rgba(33,21,49,.09) !important}
    html:not(.theme-glass) #sidebar .brand-box h1{color:#1e2230}
    /* El punto de la marca vive en `--accent`, un lavanda claro que sobre blanco
       desaparece. Sobre papel va el violeta hondo. */
    html:not(.theme-glass) #sidebar .brand-box h1 span{color:var(--accent-vivid) !important}
    /* El nombre del mundo debajo de la marca —«Personal», «Academia», «Coach»,
       «Barber»—. Solo lo tienen los otros cuatro shells, y viene en verde menta: sobre el
       panel oscuro se lee, sobre el blanco desaparece. El administrativo no lo lleva, así
       que esta regla no le cambia nada. */
    html:not(.theme-glass) #sidebar .brand-box p{color:#5a6478 !important}
    html:not(.theme-glass) #sidebar #mt-btn{color:#5a6478 !important}
    html:not(.theme-glass) #sidebar #mt-btn:hover{background:rgba(33,21,49,.06) !important;color:#1e2230 !important}
    html:not(.theme-glass) .nav-link{color:#4a5468 !important}
    html:not(.theme-glass) .nav-link:hover{background:rgba(33,21,49,.055) !important;color:#1e2230 !important}
    /* El activo. Las clases del estado activo son `bg-leaf-500/15` + `text-white`:
       sobre papel ese blanco se vuelve invisible, así que hay que reemplazarlo. */
    html:not(.theme-glass) .nav-link.bg-leaf-500\/15{
      background:#EDE4FE !important;color:#5B21B6 !important;border-color:var(--accent-vivid) !important;
    }
    html:not(.theme-glass) #sidebar .tasas-note,
    html:not(.theme-glass) #sidebar .tasas-note *{color:#5a6478 !important}

    /* ══ EL PANEL SUPERIOR: UNA CÁPSULA QUE FLOTA ════════════════════
       Era una franja de borde a borde, pegada al techo, con una raya abajo
       separándola del contenido. Ahora se despega: aire a los cuatro lados,
       cantos redondos, y el contenido pasa por DEBAJO. Eso es lo que la hace
       leer como una capa encima de la pantalla y no como un pedazo de ella.

       Y en lugar del nombre de la sección —que ya lo dice el lateral, marcado—
       lleva la marca: la carterita y «Clikkie.».

       `top` va con la cápsula y no en 0: pegada al techo perdería justo el aire
       que la hace flotar. Le gana a `top-0` de Tailwind por especificidad. */
    header.sticky{
      margin:12px 16px;
      border-radius:999px;
      top:12px;
      -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
      border:1px solid rgba(255,255,255,.11) !important;
      box-shadow:0 8px 26px rgba(0,0,0,.32);
    }
    /* El COLOR oscuro no se declara acá: ya lo pone `html.theme-glass header.sticky`
       más arriba, y con más peso. Declararlo igual no cambiaba nada —era letra muerta—
       y dejaba dos fuentes de verdad para el mismo color. Acá se define la FORMA.
       El canto de arriba, más claro: es por donde le pega la luz a un material. */
    header.sticky{border-top-color:rgba(255,255,255,.20) !important}
    header.sticky #topbar-title,header.sticky h2{color:#fff !important}
    header.sticky [class*="text-slate-5"],header.sticky [class*="text-slate-6"],header.sticky [class*="text-slate-7"]{color:var(--on-dark) !important}
    header.sticky button[class*="border-slate"]{border-color:rgba(255,255,255,.18) !important;color:var(--on-dark) !important}
    header.sticky [class*="hover\:bg-slate-1"]:hover{background:rgba(255,255,255,.10) !important}

    /* La misma cápsula en claro: papel translucido en vez de vidrio oscuro.
       El lateral también aclaró, así que un topbar negro quedaría huérfano. */
    html:not(.theme-glass) header.sticky{
      background:rgba(255,255,255,.86) !important;
      border:1px solid rgba(33,21,49,.10) !important;
      box-shadow:0 6px 22px rgba(20,14,40,.10);
    }
    html:not(.theme-glass) header.sticky #topbar-title,
    html:not(.theme-glass) header.sticky h2,
    html:not(.theme-glass) header.sticky .topbar-brand{color:#1e2230 !important}
    html:not(.theme-glass) header.sticky [class*="text-slate-5"],
    html:not(.theme-glass) header.sticky [class*="text-slate-6"],
    html:not(.theme-glass) header.sticky [class*="text-slate-7"]{color:#5a6478 !important}
    html:not(.theme-glass) header.sticky button[class*="border-slate"]{border-color:rgba(33,21,49,.14) !important;color:#1e2230 !important}
    html:not(.theme-glass) header.sticky [class*="hover\:bg-slate-1"]:hover{background:rgba(33,21,49,.06) !important}
    /* MODO CLARO: la píldora de sucursal es blanca, así que su texto va OSCURO. */
    html:not(.theme-glass) header.sticky #topbar-sucursal{color:#1e2230 !important}
    /* Se quita el nombre de la sección del título del topbar */
    #topbar-title{display:none !important}
    /* El cluster derecho (sucursal/campana/config/tema/perfil) va SIEMPRE en una fila;
       la píldora de sucursal encoge y trunca para que el perfil no baje. */
    #topbar-actions{flex-wrap:nowrap !important;min-width:0}
    #topbar-actions>*{flex:0 0 auto}
    #topbar-actions>div:first-child{min-width:0;flex:0 1 auto}
    #topbar-sucursal{display:inline-block;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
    /* Logotipo del topbar (carterita + "Clikkie.") */
    .topbar-brand{color:#fff !important}
    /* ═══ MODO CLARO: contenido blanco glaciar (topbar + sidebar quedan oscuros) ═══ */
    html:not(.theme-glass){background:#e9edf4}
    html:not(.theme-glass) body{ background:#e9edf4 !important; color:#1e2230 !important; }
    html:not(.theme-glass) .bg-white{background:#ffffff !important;color:#1e2230 !important}
    html:not(.theme-glass) .border-slate-200,html:not(.theme-glass) .border-slate-100,
    html:not(.theme-glass) [class*="border-slate-200"],html:not(.theme-glass) [class*="border-slate-100"]{border-color:rgba(33,21,49,.10) !important}
    html:not(.theme-glass) input[class*="bg-white"]:not([type="checkbox"]):not([type="radio"]),html:not(.theme-glass) select[class*="bg-white"],
    html:not(.theme-glass) textarea[class*="bg-white"],
    html:not(.theme-glass) #modal-root input:not([class*="bg-transparent"]):not([type="checkbox"]):not([type="radio"]),
    html:not(.theme-glass) #modal-root select,html:not(.theme-glass) #modal-root textarea{
      background:#f2f5fa !important;border-color:rgba(33,21,49,.12) !important;color:#1e2230 !important;
    }
    /* Overlay de modal: oscuro + blur */
    #modal-root .fixed.inset-0{background:rgba(10,4,20,.6) !important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
    /* Modales por encima del dock inferior (z-60) para que no lo tapen */
    #modal-root .fixed.inset-0,#modal-stock{z-index:200 !important}

    /* Chip/tab activo → pastilla lavanda con tinta oscura */
    .bg-emerald-50.text-forest-700{background:var(--accent) !important;color:var(--accent-ink) !important}
    /* Switch encendido → violeta vivo */
    .sw.on{background:var(--accent-vivid) !important}
    /* Botón primario / avatar */
    .bg-forest-600{background:var(--accent-vivid) !important}
    .hover\:bg-forest-700:hover{background:#6423c9 !important}

    /* ═══ MÓVIL: dock inferior de vidrio (reutiliza el nav) ═══ */
    @media (max-width:820px){
      #sidebar{
        position:fixed !important;left:50% !important;right:auto !important;top:auto !important;
        /* El hueco de abajo lleva la barra de gestos del telefono sumada: sin eso, en un
           iPhone sin boton la capsula se apoya justo encima de la raya y el ultimo icono
           queda a un pelo de ella. En un telefono que no la tiene, `env()` vale 0. */
        bottom:calc(14px + env(safe-area-inset-bottom,0px)) !important;
        transform:translateX(-50%) !important;width:auto !important;max-width:calc(100vw - 20px);height:auto !important;
        flex-direction:row !important;align-items:center;
        border-radius:26px !important;padding:6px !important;
        z-index:60 !important;overflow:visible !important;
      }
      #sidebar.collapsed{width:auto !important}
      #sidebar .sb-head,#sidebar .tasas-note,#sidebar #mt-btn,#sidebar .brand-box,#sidebar .sb-logo,#sidebar .nav-text{display:none !important}
      #sidebar nav{display:flex !important;flex:0 1 auto !important;flex-direction:row !important;gap:2px !important;padding:0 !important;margin:0 !important;overflow:visible !important}
      /* Medida FIJA, no relleno: con `padding` cada boton mide lo que mida su icono y la
         fila queda despareja. 46x48 es el blanco de toque y lo que hace que la pastilla
         del marcado sea siempre la misma. */
      .nav-link{width:46px !important;height:48px !important;flex:0 0 auto !important;
        padding:0 !important;margin:0 !important;border-left:0 !important;border-radius:16px !important;
        font-size:0 !important;line-height:0 !important;display:grid !important;place-items:center !important;gap:0 !important}
      .nav-link svg{width:23px !important;height:23px !important;display:block !important;vertical-align:middle !important}
      /* El marcado, violeta en los dos modos: en oscuro se aclara sobre el vidrio y en
         claro se tine sobre el papel. Sus clases de origen —`bg-leaf-500/15` mas
         `text-white`— dan verde en uno e invisible en el otro. */
      .nav-link.bg-leaf-500\/15{background:rgba(139,92,246,.18) !important;color:#DDD3FE !important;border-color:transparent !important}
      html:not(.theme-glass) .nav-link.bg-leaf-500\/15{background:#EDE4FE !important;color:#5B21B6 !important;border-color:transparent !important}
      /* space-y-1 del nav aplica margin-top a todos menos el 1º → en fila los hunde. Anular. */
      #sidebar nav>*+*{margin-top:0 !important}
      /* Lo que no entra en el dock lo marca _dockAjustar() MIDIENDO la barra, y de ahí
         va al panel lateral que abre la hamburguesa del header (abrirDockMas lee los
         ocultos). Antes eran dos ids a dedo —Suscripciones y Proyectos—: en un teléfono
         de 360px el último ícono terminaba pintado fuera de la pantalla.
         !important para ganarle al display inline de _pintarModulosNav(). */
      #sidebar .nav-link.no-cabe{display:none !important}
      #dock-menu-btn{display:inline-flex !important;align-items:center !important;justify-content:center !important;border:0 !important}
      /* Nada oculto = nada que abrir. Lo pone _pintarDockMas(); gana por especificidad
         (1-1-0) a la regla de arriba, que tambien lleva !important. */
      #dock-menu-btn.sin-desborde{display:none !important}
      #sidebar nav{align-items:center !important}
      /* El material. En oscuro es vidrio: se ve lo que pasa por detras, desenfocado, y
         el canto de arriba mas claro es por donde le pega la luz. En claro NO lleva
         desenfoque: el panel es papel opaco, y apilar blanco translucido sobre blanco
         translucido no separa nada, solo emborrona. */
      #sidebar{
        background:rgba(24,20,34,.62) !important;
        -webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);
        border:1px solid rgba(255,255,255,.13) !important;
        border-top-color:rgba(255,255,255,.26) !important;
        box-shadow:0 10px 30px rgba(0,0,0,.4) !important;
      }
      html:not(.theme-glass) #sidebar{
        background:#ffffff !important;
        -webkit-backdrop-filter:none;backdrop-filter:none;
        border:1px solid rgba(33,21,49,.10) !important;
        box-shadow:0 8px 24px rgba(40,24,70,.12) !important;
      }
      main{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px)) !important}
      /* La cápsula de arriba, con menos aire: en 390px cada píxel de ancho cuenta. */
      header.sticky{padding:10px 14px !important;margin:10px 12px !important;top:10px !important}
      header.sticky h2{font-size:18px !important}
      .p-6,.lg\:p-8{padding:16px !important}
      .max-w-\[1440px\]{max-width:100% !important}

      /* ── NADA DE ZOOM AL TOCAR UN CAMPO ──────────────────────────────────
         Safari en iPhone hace zoom automático cuando uno enfoca un campo cuya letra mide
         menos de 16 px, y después NO vuelve al zoom anterior: la página queda agrandada y
         corrida. Es la mitad de la sensación de que «se ve mal cuando sale el teclado» —el
         salto no era la hoja, era el navegador acercándose—. Los campos del programa usan
         `text-sm` (14 px), así que pasaba en todos.

         16 px en todo lo que se escribe. No hay truco de viewport que sirva sin romper el
         zoom con dos dedos, que es accesibilidad y no se toca. */
      input, select, textarea, .num-input { font-size: 16px !important; }
      /* …salvo lo que no se escribe: casillas y interruptores no disparan zoom. */
      input[type=checkbox], input[type=radio] { font-size: inherit !important; }

      /* ── Numéricos: menos y más, no flechitas ────────────────────────────
         En la computadora las dos flechas apiladas miden 16x12 px y el puntero acierta sin
         problema. Un dedo, no: son la mitad del blanco mínimo cómodo, y están una encima de
         la otra, así que restar cuando querías sumar es cuestión de milímetros. En el
         teléfono el mismo control se abre en dos botones grandes a los lados del número,
         que es lo que ya hacen las píldoras de cantidad (.nlado). Mismo gesto en todos lados.

         `display:contents` disuelve la cajita de los controles para que los dos botones
         pasen a ser hermanos del campo y se puedan repartir con `order`. */
      .numwrap { display: flex; align-items: center; gap: 8px; width: 100% !important;
        max-width: 260px; }
      .numwrap > input.num-input { order: 2; flex: 1 1 auto; min-width: 0;
        padding-right: 12px !important; text-align: center; }
      .num-ctrls { display: contents; }
      .num-ctrls button { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 999px;
        border: 1px solid rgba(148,163,184,.35); font-size: 20px; font-weight: 600;
        line-height: 1; }
      .num-ctrls button svg { display: none; }
      .num-ctrls .num-down { order: 1; }
      .num-ctrls .num-up { order: 3; }
      .num-ctrls .num-down::before { content: "\2212"; }   /* − de verdad, no un guion */
      .num-ctrls .num-up::before { content: "+"; }
      /* El costo y su moneda venían pegados como un solo control: el campo con la esquina
         derecha cuadrada y el «$» con la izquierda. Con el − y el + en el medio ya no se
         tocan, así que cada uno vuelve a ser una pastilla entera. */
      .cmpcost { flex-wrap: wrap; gap: 8px; }
      .cmpcost > .numwrap > input.num-input,
      #modal-root .cmpcost > .numwrap > input.num-input { border-radius: 999px !important;
        border-right-width: 1px !important; }
      .cmpcost [id$="-moneda-btn"],
      #modal-root .cmpcost [id$="-moneda-btn"] { border-radius: 999px !important;
        border-left-width: 1px !important; }

      /* ── Sin scroll horizontal de PÁGINA + todo se ajusta al viewport ── */
      html,body{overflow-x:hidden !important;max-width:100vw}
      /* `background-attachment:fixed` ancla el degradado al viewport: cada vez que el
         teclado lo achica o lo agranda hay que repintarlo entero, y ese repintado es el
         que destella. En un teléfono no se gana nada con anclarlo —la página se desplaza
         con el dedo, no con una capa quieta detrás—, así que se suelta. */
      body{background-attachment:scroll !important}
      img,canvas,pre,video,iframe{max-width:100% !important;height:auto}
      /* Grids anchos → una sola columna */
      [class*="grid-cols-2"],[class*="grid-cols-3"]{grid-template-columns:1fr !important}
      /* Tablas → tarjetas apiladas; cada celda muestra su columna (filosofía Zenith) */
      table thead{display:none !important}
      table,table tbody,table tfoot,table tr,table td{display:block !important;width:100% !important;max-width:100% !important}
      /* Cada fila es una TARJETA INDEPENDIENTE, no una division de un bloque.
         Antes tenia fondo al 3,8 % y borde al 10 %: con tan poca presencia las nueve
         tarjetas se leian como un solo panel con rayas adentro, sobre todo en claro. Una
         tarjeta suelta necesita las tres cosas —superficie propia, borde que se vea y una
         sombra que la levante— y aire suficiente entre una y otra. */
      /* La CAJA que envuelve la tabla se va cuando las filas se vuelven tarjetas.
         En el administrativo `card()` hace rato que no dibuja tarjeta —el modelo contable
         vive sin caja— pero coach, barber y academia envuelven sus tablas en un
         `rounded-2xl bg-white border shadow-sm overflow-hidden`. Con eso, las nueve
         tarjetas de adentro quedan encerradas en un panel: aunque tengan su aire, se leen
         como un bloque con rayas y no como una lista de fichas. Se apaga la caja de
         AFUERA, no la de cada tarjeta.

         Se busca por las clases con las que se escriben, no por una clase propia: son
         cinco archivos distintos y cada uno tiene su constante (`_CO_CARD`, `_BA_CARD`…).
         El `:has(> * > table, > table)` acota a las que de verdad envuelven una tabla: una
         tarjeta de resumen con números adentro no se toca. */
      div[class*="rounded-2xl"][class*="border"]:has(> div > table, > table),
      div[class*="rounded-xl"][class*="border"]:has(> div > table, > table),
      section[class*="rounded-2xl"][class*="border"]:has(> div > table, > table),
      section[class*="rounded-xl"][class*="border"]:has(> div > table, > table){
        background:transparent !important;border:0 !important;box-shadow:none !important;
        border-radius:0 !important;overflow:visible !important;padding:0 !important}
      /* La cabecera de esas cajas —titulo y botones— se apoyaba en el borde de la caja.
         Sin caja, esa raya queda cruzando la pantalla sin nada que separar. */
      section:has(> div > table) > div[class*="border-b"],
      div:has(> div > table) > div[class*="border-b"]{border-bottom:0 !important;
        padding-left:0 !important;padding-right:0 !important}
      table tbody{display:flex !important;flex-direction:column;gap:10px}
      table tr{background:rgba(255,255,255,0.055);border:1px solid rgba(255,255,255,0.14);
        border-radius:14px;padding:12px 13px !important;margin:0 !important;
        box-shadow:0 1px 3px rgba(0,0,0,.38)}
      /* OJO con el selector: `html:not(.theme-glass)` cubre el claro Y el oscuro a la vez
         —era asi de antes—, asi que la superficie blanca tiene que excluir ademas `.dark`.
         Sin ese `:not(.dark)` las tarjetas salian BLANCAS en modo oscuro. */
      html:not(.theme-glass):not(.dark) table tr{background:#fff;
        border-color:rgba(33,21,49,0.12);
        box-shadow:0 1px 2px rgba(20,16,32,.06), 0 1px 3px rgba(20,16,32,.05)}
      html.dark:not(.theme-glass) table tr{background:rgba(255,255,255,0.05);
        border-color:rgba(255,255,255,0.13);box-shadow:0 1px 3px rgba(0,0,0,.4)}
      /* ── Tocar una tarjeta la ABRE; no la deja «seleccionada» ──────────────
         El renglón se podía seleccionar con una pulsación larga: quedaba con el texto
         resaltado y parecía elegido, cuando lo único que se quería era abrirlo. Sobre
         algo que se toca para abrir, poder seleccionar el texto no sirve de nada.
         `tap-highlight` va con la misma idea: el recuadro que pinta el navegador al
         tocar es ruido en una lista de tarjetas. (Se probó también apagar el `:hover`
         pegado, que en táctil deja la fila marcada; acá no hacía falta: la clase
         `hover:bg-slate-50` de estos renglones no está compilada y no pinta nada.) */
      table tbody tr{-webkit-tap-highlight-color:transparent}
      table tbody tr[onclick]{user-select:none; -webkit-user-select:none;
        -webkit-touch-callout:none}
      /* Celda de bloque: etiqueta en línea (ETIQUETA: valor). El valor fluye a ancho
         completo de la tarjeta, así los títulos largos envuelven en 1-3 líneas. */
      table td{display:block !important;padding:3px 0 !important;border:none !important;font-size:13px !important;line-height:1.35;text-align:left !important;white-space:normal !important;word-break:break-word;overflow-wrap:anywhere}
      table td::before{content:attr(data-label) ": ";color:var(--on-dark-muted);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.3px}
      html:not(.theme-glass) table td::before{color:var(--surface-muted)}
      table td:not([data-label])::before,table td[data-label=""]::before{content:"";display:none}
      td input,td select{max-width:130px !important;padding-left:10px !important;padding-right:10px !important}
      /* Los tres puntos, en la esquina de la tarjeta.
         Al apilarse, la celda de acciones cae en un renglón propio al final y alineada a
         la izquierda: el botón termina en mitad de la tarjeta, a 68px del borde. Se saca
         del flujo y se ancla arriba a la derecha. La orden de venta queda fuera: ahí la
         fila es un grid con su propio sitio para el menú. */
      table tbody tr{position:relative}
      tbody:not(#f-items) > tr > td[data-kb]{position:absolute !important;top:8px;right:8px;
        width:auto !important;padding:0 !important;text-align:right !important;
        /* `grid-area:auto` a proposito. Las listas con forma propia (los modelos de tarjeta
           de mas abajo) le dan al kebab un area con nombre —`grid-area:kb`—, y un elemento
           posicionado en absoluto DENTRO de una rejilla se ancla a SU AREA, no a la caja de
           la fila. Como el area no tiene nada en flujo, colapsa a cero y se corre: en Nomina
           los tres puntos quedaban 5px POR FUERA del borde derecho y 21px hacia abajo, en
           vez de en la esquina. Sin area con nombre, el ancla vuelve a ser la tarjeta. */
        grid-area:auto !important}
      tbody:not(#f-items) > tr > td[data-kb]::before{content:"" !important;display:none !important}
      /* Y que el contenido de la fila no se meta debajo del botón. */
      tbody:not(#f-items) > tr:has(> td[data-kb]) > td:first-child{padding-right:40px !important}

      /* Paddings y números más compactos */
      .p-5{padding:14px !important}.p-8{padding:16px !important}
      .text-3xl{font-size:1.55rem !important}.text-2xl{font-size:1.35rem !important}
      /* Modales a ancho completo y DESPEJADOS del dock inferior (que no tape Guardar) */
      #modal-root .fixed.inset-0,#modal-stock{padding:10px 10px 96px !important}
      #modal-root .fixed.inset-0>div,#modal-stock>div{max-height:calc(100vh - 112px) !important;display:flex;flex-direction:column}
      #modal-root [class*="max-w-"]{max-width:100% !important;width:100% !important}
      /* Los avisos, por encima del dock. Sin `!important`: es solo el valor de arranque
         —por si el JS todavía no midió—, y el JS calcula el borde REAL del dock. Con
         `!important` ganaba este número escrito a mano y el cálculo no servía de nada. */
      #toast-cont{bottom:96px}
      /* Toolbars/filas: que envuelvan, no que empujen ancho */
      .flex.items-center.justify-between{flex-wrap:wrap}
      /* Topbar móvil: isotipo + "Clikkie." pegados a la IZQUIERDA; campana y foto a la derecha.
         La sucursal y Configuración viven dentro del menú de la foto (avatar).
         OJO: solo el cluster derecho (div); el brand es un <a> con las mismas clases flex. */
      .topbar-brand{flex:0 0 auto !important;justify-content:flex-start !important}
      #topbar-suc-pill{display:none !important}
      #topbar-actions{flex-wrap:nowrap !important;justify-content:flex-end;gap:8px !important;flex:1 1 auto !important;min-width:0}
      /* Barras de pestañas horizontales scrollean dentro de sí (no la página) */
      [id$="-tabs"],#dash-lista-tabs,#egr-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
      /* Y con holgura arriba y abajo, o la píldora de la pestaña activa sale con el borde
         comido. En cuanto se pide `overflow-x: auto` el otro eje deja de ser `visible` y
         TAMBIÉN recorta; estas barras miden justo lo que mide la píldora, así que la
         activa quedaba pegada al límite de la caja. Medido: 0px de holgura en la de
         cobros, la de compras y la de tesorería.

         La holgura va como margen de las PESTAÑAS y no como relleno de la barra: el
         relleno lo pone cada barra con su clase de utilidad y pisarlo desde acá les
         cambiaría el sitio a todas. Un margen en los hijos hace crecer la caja sin tocar
         nada de lo que ya estaba puesto. */
      [id$="-tabs"] > *,#dash-lista-tabs > *,#egr-tabs > *{margin-top:5px;margin-bottom:5px}

      /* ── Las listas, con la forma que le sirve a cada una ─────────────────
         Apilar la fila con el nombre de cada columna delante saca del paso, pero deja
         todas las listas iguales y ninguna bien: el importe perdido entre siete
         renglones, el nombre sin jerarquía, el estado escondido al final. Cada una lleva
         ahora una de cuatro formas, elegidas mirándolas al lado de los datos reales.

         Es la MISMA tabla reordenada con grid: el JS solo dice qué papel cumple cada
         columna (data-rol) y de qué forma es la lista (data-modelo). Dos marcados serían
         dos verdades, y la que se olvida de actualizar es la que no se está mirando. */
      /* `!important` porque el apilado genérico de más arriba le pone `display:block
         !important` a todo `tr`: sin esto el grid no llega a existir. */
      tbody[data-modelo] > tr{position:relative;display:grid !important;gap:2px 10px;
        padding:12px !important;align-items:center}
      tbody[data-modelo] > tr > td{padding:0 !important;border:0 !important;
        width:auto !important;text-align:left !important;font-size:14px !important}
      tbody[data-modelo] > tr > td[data-rol="oculto"]{display:none !important}
      /* Sin los rótulos en mayúsculas: en una tarjeta con forma, cada dato se reconoce por
         su sitio. La rejilla (E) es la excepción, y los conserva a propósito. */
      tbody[data-modelo]:not([data-modelo="E"]) > tr > td::before{content:"" !important;display:none !important}
      tbody[data-modelo] > tr > td[data-rol="tit"]{font-size:15px !important;font-weight:600;
        line-height:1.3;overflow-wrap:anywhere}
      tbody[data-modelo] > tr > td[data-rol^="sub"]{font-size:12px !important;
        color:var(--on-dark-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
      html:not(.dark) tbody[data-modelo] > tr > td[data-rol^="sub"]{color:var(--surface-muted)}
      tbody[data-modelo] > tr > td[data-rol="monto"]{font-weight:700;white-space:nowrap;
        justify-self:end;text-align:right !important}
      tbody[data-modelo] > tr > td[data-rol="monto2"]{font-size:12px !important;
        white-space:nowrap;justify-self:end;text-align:right !important;
        color:var(--on-dark-muted)}
      html:not(.dark) tbody[data-modelo] > tr > td[data-rol="monto2"]{color:var(--surface-muted)}
      tbody[data-modelo] > tr > td[data-kb]{position:static !important;justify-self:end;
        align-self:start}

      /* A · Ficha — la inicial identifica de un vistazo, el importe cierra abajo. */
      tbody[data-modelo="A"] > tr{
        grid-template-columns:auto auto auto minmax(0,1fr) auto;
        grid-template-areas:"ini nom nom  nom  kb"
                            "ini sub sub2 sub3 sub3"
                            "ini est m2   m2   monto"}
      tbody[data-modelo="A"] > tr::before{content:attr(data-ini);grid-area:ini;
        align-self:start;
        width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
        margin-right:2px;font-size:13px;font-weight:800;
        background:rgba(168,85,247,.14);color:#c084fc}
      html:not(.dark) tbody[data-modelo="A"] > tr::before{background:rgba(124,58,237,.10);color:#7c3aed}
      tbody[data-modelo="A"] > tr > td[data-rol="tit"]{grid-area:nom}
      tbody[data-modelo="A"] > tr > td[data-rol="sub"]{grid-area:sub}
      tbody[data-modelo="A"] > tr > td[data-rol="sub2"]{grid-area:sub2}
      tbody[data-modelo="A"] > tr > td[data-rol="sub3"]{grid-area:sub3;justify-self:start}
      tbody[data-modelo="A"] > tr > td[data-rol="estado"]{grid-area:est;justify-self:start}
      tbody[data-modelo="A"] > tr > td[data-rol="monto"]{grid-area:monto;font-size:19px !important}
      tbody[data-modelo="A"] > tr > td[data-rol="monto2"]{grid-area:m2}
      tbody[data-modelo="A"] > tr > td[data-kb]{grid-area:kb}

      /* B · Renglón contable — sin tarjeta por fila: una hoja con líneas finas y los
         importes alineados entre sí, que es lo que permite sumarlos con la vista. */
      tbody[data-modelo="B"] > tr{
        grid-template-columns:auto auto minmax(0,1fr) auto auto;
        grid-template-areas:"nom nom  nom  monto kb"
                            "sub sub2 sub3 m2    kb"
                            "est est  est  est   kb";
        border-radius:0 !important;border:0 !important;
        border-bottom:1px solid rgba(148,163,184,.18) !important;
        background:transparent !important;padding:11px 4px !important}
      tbody[data-modelo="B"] > tr:last-child{border-bottom:0 !important}
      tbody[data-modelo="B"] > tr > td[data-rol="tit"]{grid-area:nom;font-size:14px !important;
        white-space:normal}
      tbody[data-modelo="B"] > tr > td[data-rol="sub"]{grid-area:sub}
      tbody[data-modelo="B"] > tr > td[data-rol="sub2"]{grid-area:sub2}
      tbody[data-modelo="B"] > tr > td[data-rol="sub3"]{grid-area:sub3;justify-self:start}
      tbody[data-modelo="B"] > tr > td[data-rol="estado"]{grid-area:est;justify-self:start;
        margin-top:2px}
      tbody[data-modelo="B"] > tr > td[data-rol="monto"]{grid-area:monto;font-size:16px !important}
      tbody[data-modelo="B"] > tr > td[data-rol="monto2"]{grid-area:m2}
      tbody[data-modelo="B"] > tr > td[data-kb]{grid-area:kb;align-self:center}

      /* C · Estado primero — lo que se busca en esta lista es en qué estado está. */
      tbody[data-modelo="C"] > tr{
        grid-template-columns:auto minmax(0,1fr) auto;
        grid-template-areas:"est nom   kb"
                            "est sub   kb"
                            "m2  monto monto"}
      tbody[data-modelo="C"] > tr > td[data-rol="estado"]{grid-area:est;justify-self:start;
        align-self:center;margin-right:4px}
      tbody[data-modelo="C"] > tr > td[data-rol="tit"]{grid-area:nom}
      tbody[data-modelo="C"] > tr > td[data-rol="sub"]{grid-area:sub}
      tbody[data-modelo="C"] > tr > td[data-rol="sub2"],
      tbody[data-modelo="C"] > tr > td[data-rol="sub3"]{grid-column:2/-1}
      tbody[data-modelo="C"] > tr > td[data-rol="monto"]{grid-area:monto;font-size:18px !important;
        padding-top:8px !important;border-top:1px solid rgba(148,163,184,.18) !important}
      tbody[data-modelo="C"] > tr > td[data-rol="monto2"]{grid-area:m2;justify-self:start;
        text-align:left !important;padding-top:8px !important;
        border-top:1px solid rgba(148,163,184,.18) !important}
      tbody[data-modelo="C"] > tr > td[data-kb]{grid-area:kb}

      /* E · Rejilla — encabezado con el nombre, y debajo cada dato bajo su rótulo, en dos
         columnas. Para listas que se consultan, no que se recorren. */
      tbody[data-modelo="E"] > tr{
        grid-template-columns:repeat(2,minmax(0,1fr)) auto;
        grid-template-areas:"nom nom kb";
        gap:8px 12px}
      tbody[data-modelo="E"] > tr > td[data-rol="tit"]{grid-area:nom}
      tbody[data-modelo="E"] > tr > td[data-rol^="sub"]{grid-column:1/-1}
      tbody[data-modelo="E"] > tr > td[data-kb]{grid-area:kb}
      /* Los demás datos caen solos en la rejilla, cada uno con su rótulo encima. */
      tbody[data-modelo="E"] > tr > td:not([data-rol]){font-size:13px !important;
        padding-top:6px !important}
      tbody[data-modelo="E"] > tr > td:not([data-rol])::before{display:block !important;
        font-size:10px;letter-spacing:.3px}
      tbody[data-modelo="E"] > tr > td[data-rol="estado"]{grid-column:1/-1;justify-self:start}
      tbody[data-modelo="E"] > tr > td[data-rol="monto"]{grid-column:1/-1;justify-self:end;
        font-size:17px !important}
      /* F · TALÓN — quién a un lado del doblez, cuánto al otro.
         Es el talón de un ticket: la identidad ocupa el cuerpo y la plata un panel
         propio, separados por un doblez punteado con sus dos muescas. Son dos preguntas
         distintas —a quién le vendí y cuánto entró— y así no compiten nunca por el
         ancho, que es exactamente lo que rompía el renglón contable: con el nombre de
         una C.A., la fecha y el método en la misma línea, la columna flexible se
         quedaba en 34px y el texto salía en vertical, una letra por renglón. */
      tbody[data-modelo="F"] > tr{
        grid-template-columns:minmax(0,1fr) auto;
        grid-template-areas:"nro monto"
                            "nom monto"
                            "est m2"
                            "pie pie";
        gap:0 0 !important; padding:0 !important; overflow:hidden;
        align-items:start}
      /* La zona de la izquierda: quién. */
      tbody[data-modelo="F"] > tr > td[data-rol="sub"]{grid-area:nro;
        padding:12px 12px 0 14px !important;
        font-size:10.5px !important;font-weight:800;letter-spacing:.11em;
        text-transform:uppercase;color:var(--on-dark-muted)}
      html:not(.theme-glass):not(.dark) tbody[data-modelo="F"] > tr > td[data-rol="sub"]{
        color:var(--surface-muted)}
      tbody[data-modelo="F"] > tr > td[data-rol="tit"]{grid-area:nom;
        padding:3px 12px 5px 14px !important;
        font-size:14.5px !important;font-weight:650;line-height:1.3;
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
      tbody[data-modelo="F"] > tr > td[data-rol="estado"]{grid-area:est;justify-self:start;
        padding:0 12px 12px 14px !important;font-size:11.5px !important}
      /* La zona de la derecha: cuánto. Las dos celdas comparten fondo y se tocan (row-gap
         0), así el panel se lee como una sola superficie y no como dos recuadros. */
      tbody[data-modelo="F"] > tr > td[data-rol="monto"],
      tbody[data-modelo="F"] > tr > td[data-rol="monto2"]{
        position:relative;text-align:right !important;white-space:nowrap;
        /* Las dos celdas TIENEN que ocupar su casilla ENTERA, a lo ancho y a lo alto.
           A lo ancho, o el doblez sale escalonado: el importe en $ es mas corto que los
           bolivares. Y a lo alto porque la fila lleva `align-items:start`, que encoge cada
           celda a su texto: la mitad de abajo de la casilla del importe quedaba SIN PINTAR
           y por ahi se veia el fondo de la tarjeta, como una franja blanca cruzando el
           panel entre los dolares y los bolivares. */
        justify-self:stretch;width:100% !important;
        align-self:stretch;
        display:flex !important;align-items:center;justify-content:flex-end;
        background:rgba(255,255,255,.035);
        border-left:1px dashed rgba(148,163,184,.34) !important;
        padding-left:14px !important;padding-right:15px !important}
      html:not(.theme-glass):not(.dark) tbody[data-modelo="F"] > tr > td[data-rol="monto"],
      html:not(.theme-glass):not(.dark) tbody[data-modelo="F"] > tr > td[data-rol="monto2"]{
        background:rgba(33,21,49,.035)}
      tbody[data-modelo="F"] > tr > td[data-rol="monto"]{grid-area:monto;
        padding-top:16px !important;padding-bottom:0 !important;
        font-size:19px !important;font-weight:800;letter-spacing:-.02em}
      tbody[data-modelo="F"] > tr > td[data-rol="monto2"]{grid-area:m2;
        padding-top:2px !important;padding-bottom:12px !important;
        font-size:11.5px !important;color:var(--on-dark-muted)}
      html:not(.theme-glass):not(.dark) tbody[data-modelo="F"] > tr > td[data-rol="monto2"]{
        color:var(--surface-muted)}
      /* Las dos muescas del doblez. Colgadas de las celdas del panel y no de la fila: el
         panel se ensancha con el importe, y con una medida fija escrita a mano la muesca
         quedaba a un lado del doblez en cuanto una cifra crecía. */
      tbody[data-modelo="F"] > tr > td[data-rol="monto"]::after,
      tbody[data-modelo="F"] > tr > td[data-rol="monto2"]::after{
        content:"" !important;display:block !important;position:absolute;left:-6px;
        width:11px;height:11px;border-radius:99px;background:var(--bg-2)}
      tbody[data-modelo="F"] > tr > td[data-rol="monto"]::after{top:-6px}
      tbody[data-modelo="F"] > tr > td[data-rol="monto2"]::after{bottom:-6px}
      html:not(.theme-glass):not(.dark) tbody[data-modelo="F"] > tr > td[data-rol="monto"]::after,
      html:not(.theme-glass):not(.dark) tbody[data-modelo="F"] > tr > td[data-rol="monto2"]::after{
        background:#eef0f6}
      /* El pie, cruzando el talón entero: la fecha y los dos botones. Van abajo y a lo
         ancho porque son la acción, no el dato: metidos en el panel de la plata quedaban
         en 110px y sin sitio para el dedo. */
      tbody[data-modelo="F"] > tr > td[data-rol="sub2"]{grid-area:pie;
        padding:9px 13px 9px 14px !important;
        border-top:1px solid rgba(148,163,184,.16) !important;
        font-size:11.5px !important}
      tbody[data-modelo="F"] > tr > td[data-kb]{grid-area:pie;justify-self:end}

      /* Por cobrar y por pagar, como renglón contable (modelo B).
         No son tablas sino tarjetas propias, con su lista de ítems y su icono; en el
         teléfono todo eso las vuelve altísimas y hay que desplazarse para ver tres deudas.
         Se les quita el envoltorio y quedan como renglones de una hoja, con los importes
         alineados entre sí, que es lo que permite recorrer la lista sumando con la vista.
         Los ítems y el icono se esconden: en una lista de deudas lo que se busca es quién
         debe y cuánto; el detalle está a un toque, en Abonar. */
      /* La FORMA sigue siendo la del renglon contable —quien debe a la izquierda, cuanto a
         la derecha, apilados eran tres bloques de 50px y entraban dos deudas por pantalla—,
         pero la SUPERFICIE vuelve a ser una tarjeta redondeada como las demas del sistema.
         Antes se le quitaba el envoltorio entero y quedaban rectangulos pegados con una
         raya en medio: rompian la estetica de todo lo demas. */
      .deuda-card{border:1px solid rgba(255,255,255,0.14) !important;
        border-radius:14px !important;background:rgba(255,255,255,0.055) !important;
        box-shadow:0 1px 3px rgba(0,0,0,.38) !important;
        padding:12px 13px !important;
        display:grid !important;grid-template-columns:minmax(0,1fr) auto;
        grid-template-areas:"cab imp" "bot bot";gap:0 10px;align-items:start}
      /* Las mismas tres superficies que usan las tarjetas de tabla, para que no haya dos
         blancos distintos en la misma pantalla. `html:not(.theme-glass)` cubre el claro Y
         el oscuro, de ahi el `:not(.dark)` de mas. */
      html:not(.theme-glass):not(.dark) .deuda-card{background:#fff !important;
        border-color:rgba(33,21,49,0.12) !important;
        box-shadow:0 1px 2px rgba(20,16,32,.06), 0 1px 3px rgba(20,16,32,.05) !important}
      html.dark:not(.theme-glass) .deuda-card{background:rgba(255,255,255,0.05) !important;
        border-color:rgba(255,255,255,0.13) !important;
        box-shadow:0 1px 3px rgba(0,0,0,.4) !important}
      .deuda-card > div{border:0 !important;padding:0 !important}
      .deuda-card > div:first-child{padding-top:0 !important}
      .deuda-card > div:first-child > span:last-child,
      .deuda-card > div:nth-child(2){display:none !important}
      .deuda-card > div:first-child{grid-area:cab}
      .deuda-card > div:nth-child(3){grid-area:imp;text-align:right}
      .deuda-card > div:last-child{grid-area:bot}
      .deuda-card > div:nth-child(3) p:first-child{font-size:1.15rem !important;margin-top:0}
      .deuda-card > div:nth-child(3) p:last-child{max-width:170px;margin-left:auto}
      /* La botonera, del alto de un dedo pero sin el aire de una tarjeta suelta: acá es un
         renglón de una lista, y cada píxel de más son deudas que no entran en pantalla. */
      .deuda-card > div:last-child{display:flex !important;gap:8px;padding:8px 0 0 !important}
      .deuda-card > div:last-child button{padding-top:6px !important;padding-bottom:6px !important}
      /* ── El renglón de la orden de venta, como tarjeta ────────────────────
         El apilado genérico de arriba sirve para una tabla de consulta, pero acá se
         TRABAJA: se toca la cantidad, se mira el importe, se quita un producto. Puesto en
         columna daba 238px por producto —siete renglones, cada uno con su etiqueta en
         mayúsculas repetida— y entraban tres en la pantalla.

         No hay un segundo marcado para el teléfono: es la MISMA tabla, reordenada con
         grid. Dos marcados significan dos verdades, y la que se olvida de actualizar es
         siempre la que no se está mirando. La inicial de color sale de `data-ini`, un
         atributo del renglón, así que tampoco agrega nodos que el escritorio deba ignorar.

              inicial │ nombre del producto        │ ⋮
                      │ lista · precio por unidad  │
              cantidad│ descuento │        importe │                                    */
      /* !important: el apilado genérico de más arriba pone `display:block !important` a
         todo `tr`, y sin esto el grid no llega a existir. */
      #f-items tr{
        display:grid !important;
        /* La primera columna la define la píldora de cantidad; la última, el importe (que
           no se parte). Lo que sobra va al medio, que es lo elástico. */
        grid-template-columns:auto minmax(0,1fr) auto;
        grid-template-areas:"nom  nom  kb"
                            "meta meta pu"
                            "cant cant imp"
                            "desc desc desc";
        gap:8px 10px;align-items:center;
        padding:12px !important}
      /* `width:auto` para desarmar el `width:100% !important` del apilado genérico: con él
         cada celda ocupa su columna entera y `justify-self` no tiene nada que mover —el
         menú se quedaba pegado al borde izquierdo de una celda de 98px, o sea 72px adentro
         de la esquina de la tarjeta—. En un grid el ancho lo da la pista, no la celda. */
      #f-items td{padding:0 !important;border:0 !important;text-align:left !important;
        font-size:14px !important;width:auto !important}
      /* Las etiquetas en mayúsculas sobran: acá cada dato se reconoce por su forma y su
         sitio, no por un rótulo que se repite en cada producto. Sin `!important`: la celda
         del nombre usa ese mismo pseudo-elemento para la inicial de color, y un
         `!important` acá le ganaba aunque su regla sea más específica —la inicial salía
         como un cuadro vacío—. */
      #f-items td::before{content:"";display:none}
      #f-items td:nth-child(1){grid-area:nom;
        font-size:15px !important;font-weight:600;line-height:1.35}
      /* La inicial de color, como pseudo-elemento de la CELDA del nombre: en el escritorio
         no existe y la tabla sigue siendo una tabla.

         Va FLOTADA y no como caja de flex: el código y el nombre son dos nodos hermanos
         sueltos («PM-481» y « · Codo rápido…»), y en flex cada uno se vuelve una caja
         aparte que se estruja hasta partir el código en vertical: «PM- 4 8 1». Flotando,
         el texto lo rodea como en un párrafo y no hay nada que estrujar. */
      #f-items td:nth-child(1)::before{content:attr(data-ini);float:left;
        margin:0 10px 2px 0;
        width:38px;height:38px;border-radius:12px;display:grid !important;place-items:center;
        font-size:13px;font-weight:800;
        background:rgba(168,85,247,.14);color:#c084fc}
      html:not(.dark) #f-items td:nth-child(1)::before{background:rgba(124,58,237,.10);color:#7c3aed}
      /* Sin esto la celda siguiente subiría a rellenar el hueco del flotante. */
      #f-items td:nth-child(1)::after{content:"";display:block;clear:both}
      /* Un descuento que no existe no ocupa lugar; en el escritorio sigue saliendo el
         guion, que ahí sí mantiene la columna alineada. */
      #f-items td:nth-child(5)[data-vacio]{display:none !important}
      /* El stock ya se dice solo cuando falta, en el aviso rojo bajo el nombre. */
      #f-items td:nth-child(2){display:none !important}
      #f-items td:nth-child(3){grid-area:meta}
      #f-items td:nth-child(4){grid-area:cant}
      /* El descuento, en su propio renglón.
         Iba entre la cantidad y el importe, y ahí la columna del medio le quedaba en 52px:
         la píldora —que mide 124 con sus dos botones— se desbordaba y se montaba ENCIMA
         del importe, con el «+» fuera de la tarjeta. Es un campo que aparece pocas veces;
         cuando aparece se lleva su renglón, y cuando no está la fila se cierra sola. */
      #f-items td:nth-child(5){grid-area:desc;display:flex !important;align-items:center;
        gap:8px;padding-top:2px !important}
      /* Con su nombre delante: un «10» suelto al lado de la cantidad no dice qué es. */
      #f-items td:nth-child(5)::before{content:attr(data-label) !important;display:block !important;
        font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;
        color:var(--on-dark-muted)}
      html:not(.dark) #f-items td:nth-child(5)::before{color:var(--surface-muted)}
      #f-items td:nth-child(6){grid-area:pu;justify-self:end;text-align:right !important;
        font-size:13px !important;color:var(--on-dark-muted)}
      html:not(.dark) #f-items td:nth-child(6){color:var(--surface-muted)}
      #f-items td:nth-child(6)::after{content:" c/u";opacity:.7}
      #f-items td:nth-child(7){grid-area:imp;justify-self:end;text-align:right !important;
        font-size:19px !important;font-weight:700;white-space:nowrap}
      /* El menú comparte columna con el importe, que es mucho más ancho: sin
         `justify-self` la celda ocupa esa columna entera y el botón se queda pegado a su
         borde IZQUIERDO, 72px adentro de la esquina de la tarjeta. */
      #f-items td:nth-child(8){grid-area:kb;align-self:start;justify-self:end}
      /* La lista y el precio comparten renglón: el <select> se queda con lo que sobra. */
      #f-items td:nth-child(3) select{max-width:100% !important;width:auto;
        font-size:16px !important}
      /* La píldora de cantidad, con tamaño de dedo: menos a la izquierda, número al medio,
         más a la derecha.

         La flechita doble del escritorio mide 18x10px por mitad. Con el dedo no se acierta,
         y errar el tiro no es no hacer nada: es restar cuando se quería sumar. Acá se
         esconde y salen los dos botones de los lados, de 36px cada uno.

         Con un botón a cada lado el número queda centrado por construcción, así que se van
         también el espaciador invisible y el ancho calculado a mano que hacían falta cuando
         todo el peso estaba de un solo lado. */
      .npill{width:auto !important;padding-left:2px !important;padding-right:2px !important;
        gap:0 !important}
      .npill .nhueco,.npill .npila{display:none !important}
      /* La cola llevaba un ancho fijo por el hueco de las flechas; sin ellas no reserva
         nada, y el sufijo —un «%», si la píldora lo lleva— sigue en su sitio. */
      .npill .ncola{width:auto !important}
      .npill .nlado{display:grid;place-items:center;width:36px;height:36px;flex:0 0 auto;
        border-radius:999px;border:0;background:transparent;padding:0;
        font-size:19px;line-height:1;font-weight:600;color:#94a3b8;
        touch-action:manipulation;cursor:pointer}
      html.dark .npill .nlado{color:#7d9488}
      .npill .nlado:active{background:rgba(139,92,246,.18)}
      html.dark .npill .nlado:active{background:rgba(183,148,246,.22)}
      /* El número deja de estirarse: con `flex-1` la píldora se comía toda la fila y al
         importe le quedaba una columna tan angosta que caía en tres líneas. */
      .npill input{flex:0 0 auto !important;width:52px !important;font-size:16px !important}
      /* Vale para CUALQUIER píldora del teléfono, no solo las de la orden: el campo mide
         20px y para escribir hay que acertarle a él, no a la píldora que lo rodea. */
      .npill input{min-height:36px}
      /* La fila del «sin productos» no es un renglón: no se le aplica nada de esto. */
      #f-items tr:not([data-linea]){display:block;padding:24px 12px !important}
    }

    /* ── Legibilidad del texto auxiliar ─────────────────────────────────────
       `text-slate-400` sobre blanco da 2,56:1 y el mínimo legible (WCAG AA) es 4,5:1.
       Es el gris del 90% de las anotaciones de la interfaz —fechas, «Sin productos»,
       totales secundarios—, así que se sube un escalón SOLO en claro: sobre el fondo
       oscuro ese mismo gris ya da 7,3:1 y bajarlo lo empeoraría. Se corrige acá y no
       en 446 sitios del JS. */
    html:not(.dark) .text-slate-400 { color: #64748b; }   /* slate-500 -> 4,76:1 */

    /* ── Foco de teclado ────────────────────────────────────────────────────
       Sin esto, quien navega con Tab no ve dónde está parado: el `focus:outline-none`
       de los campos apagaba el anillo del navegador y no lo reemplazaba nada. Solo
       :focus-visible, para que el clic con el mouse no deje el anillo pegado. */
    :where(button, a, input, select, textarea, [tabindex]):focus-visible {
      outline: 2px solid #8b5cf6;
      outline-offset: 2px;
      border-radius: 6px;
    }
    /* El desplazamiento se queda DENTRO de la lista. Sin esto, al llegar al final de la
       lista el teléfono le pasa el gesto a la página de atrás y lo que se mueve es la
       pantalla entera —con el rebote de «soltar para actualizar»— en vez de la lista. */
    /* Y las listas SE DESPLAZAN. Parece obvio, pero no lo era: el marcado las marcaba con
       la clase `overflow-auto`, que NO está en el Tailwind compilado —una clase que falta
       no avisa, simplemente no pinta—, así que ninguna lista con `max-height` podía
       desplazarse: los renglones de más se salían por debajo del borde redondeado. */
    .dd-pop, .bp-pop, .cli-pop { overflow-y: auto; }
    .dd-pop, .bp-pop, .cli-pop, #m-body { overscroll-behavior: contain; }
    /* …salvo los campos que viven DENTRO de una pastilla con `overflow:hidden`. El anillo
       es un rectángulo: la pastilla lo recorta arriba y abajo y lo único que queda a la
       vista son dos barritas violetas a los lados del texto, que no se leen como «foco»
       sino como un defecto. Pasaba en los dos buscadores.

       En el de productos el anillo se mudó a la pastilla, que es la que tiene la forma.
       El expandible no lo necesita: ya dice solo que está enfocado —se abre, se ensancha
       y aparece el cursor—, así que ahí el anillo era ruido encima de una señal que ya
       estaba. En ninguno de los dos se pierde el foco de teclado: se llega por el botón
       de la lupa, que conserva el suyo.

       (Las clases `focus-within:*` del marcado nunca hicieron nada: no están en el CSS
       compilado. Esto es lo que sí pinta.) */
    .bp-bar:focus-within { outline: 2px solid #8b5cf6; outline-offset: 2px; }
    .bp-bar .bp-input:focus-visible { outline: none; }
    .es-bar .es-input:focus-visible,
    .es-bar .es-input:focus { outline: none; }

    /* ── Respuesta al pulsar ────────────────────────────────────────────────
       Un botón que no se hunde al tocarlo se siente muerto, y en un punto de venta se
       traduce en el cajero pulsando dos veces «Cobrar». 1px es suficiente. */
    button:not(:disabled):active, .kbb:active { transform: translateY(1px); }

    /* ── Carpeta de un proyecto ─────────────────────────────────────────────
       Una tarjeta contenedora ES una carpeta: cuerpo, pestaña, los papeles de lo que
       hay dentro y dos solapas al frente que se abren.

       Tres estados:
         · cerrada    — solo se ven las solapas y una punta de los papeles
         · entreabierta (cursor encima) — la carpeta se levanta, las solapas se abaten
           y los papeles asoman
         · abierta (al pulsar) — los papeles salen y enseguida se entra

       Medidas y ángulos son los del componente original (100×80, skew de 15°,
       scaleY .6). Va en CSS y no en clases de Tailwind porque son transformaciones con
       origen propio por pieza, y acá el Tailwind está precompilado: una clase armada al
       vuelo no existiría. */
    /* La carpeta se dibuja a su TAMAÑO REAL, sin `scale`.
       Antes eran 100x80 escalados 1,65: cómodo para copiar el componente original, pero
       todo lo que se metiera adentro salía escalado también —una etiqueta de 8px acababa
       midiendo 13, y a mitad de camino entre dos tamaños de fuente—. A tamaño real el
       nombre se puede poner SOBRE la carpeta con la letra que le toca. Las piezas de
       adentro van en porcentajes, así que la proporción no cambia. */
    /* 160px de ancho: un quinto menos que los 200 con los que quedaron al igualarlas.
       Las dos se achican juntas; lo que importa es que sigan midiendo lo mismo, que es lo
       que hace que el tablero se lea como una sola lista y no como dos cosas apiladas. */
    /* 160x104: lo mismo que mide una tarjeta de tarea. Con las dos piezas del mismo
       tamaño el tablero se lee como una sola lista y no como dos cosas apiladas.
       El aire de arriba no cuenta como parte de la carpeta: es por donde salen los
       papeles al abrirse. */
    .pjf-obj { width: 160px; height: 104px; margin: 0 auto; position: relative;
      transform-origin: top center; transition: transform .2s ease-in; }
    .pjf-hueco { height: 104px; padding-top: 26px;
      box-sizing: content-box; }
    .pjf-cuerpo { position: absolute; inset: 0; border-radius: 0 16px 16px 16px;
      background: var(--pjf-back, #7F54E2); }
    /* La pestaña, en proporción al cuerpo: eran 30x10 sobre una carpeta de 100 de ancho, o
       sea el 30%. Al agrandar el cuerpo y dejarla en 30px se quedaba en un pellizco. */
    .pjf-tab { position: absolute; z-index: 0; bottom: 98%; left: 0; width: 48px; height: 14px;
      border-radius: 7px 7px 0 0; background: var(--pjf-back, #7F54E2); }

    /* Los papeles: lo que hay dentro de la carpeta. */
    .pjf-hoja { position: absolute; z-index: 20; bottom: 10%; left: 50%; border-radius: 8px;
      overflow: hidden; transform: translate(-50%, 10%);
      transition: transform .3s ease-in-out, width .3s ease-in-out, height .3s ease-in-out;
      display: grid; place-items: center; text-align: center;
      font-size: 11px; line-height: 1.2; font-weight: 600; color: #334155; padding: 4px; }
    .pjf-h1 { width: 70%; height: 80%; background: #E5E5E5; }
    .pjf-h2 { width: 80%; height: 70%; background: #F2F2F2; }
    .pjf-h3 { width: 90%; height: 60%; background: #fff; }

    /* Las dos solapas del frente. */
    .pjf-solapa { position: absolute; z-index: 30; inset: 0; transform-origin: bottom;
      background: var(--pjf-color, #8b5cf6); border-radius: 8px 16px 16px 16px;
      transition: transform .3s ease-in-out; }

    /* Entreabierta: el cursor encima. */
    .pjf-obj:hover { transform: translateY(-8px); }
    .pjf-obj:hover .pjf-hoja { transform: translate(-50%, 0); }
    .pjf-obj:hover .pjf-izq { transform: skew(15deg) scaleY(.6); }
    .pjf-obj:hover .pjf-der { transform: skew(-15deg) scaleY(.6); }

    /* Abierta del todo: los papeles salen.
       Los selectores llevan `.pjf-obj` de más a propósito: al pulsar, el cursor SIGUE
       encima, y las reglas de :hover de arriba pesan más que una clase sola. Sin esto
       la apertura completa no se ve nunca — se queda en el entreabierto del hover. */
    .pjf-abierta .pjf-obj,
    .pjf-abierta .pjf-obj:hover { transform: translateY(-8px); }
    .pjf-abierta .pjf-obj .pjf-izq { transform: skew(15deg) scaleY(.6); }
    .pjf-abierta .pjf-obj .pjf-der { transform: skew(-15deg) scaleY(.6); }
    .pjf-abierta .pjf-obj .pjf-h1 { transform: translate(-104%, -48%) rotate(-15deg); height: 80%; }
    .pjf-abierta .pjf-obj .pjf-h2 { transform: translate(2%, -48%) rotate(15deg); height: 80%; }
    .pjf-abierta .pjf-obj .pjf-h3 { transform: translate(-50%, -72%) rotate(5deg); height: 80%; }

    /* Arrastrando: se cierra de golpe. Una carpeta abierta colgando del cursor tapa la
       columna sobre la que se la quiere soltar. */
    .pjf-arrastrando .pjf-obj, .pjf-arrastrando .pjf-obj:hover { transform: none; }
    .pjf-arrastrando .pjf-obj .pjf-hoja { transform: translate(-50%, 10%); }
    .pjf-arrastrando .pjf-obj .pjf-solapa { transform: none; }
    .pjf-arrastrando .pjf-obj, .pjf-arrastrando .pjf-hoja, .pjf-arrastrando .pjf-solapa { transition: none; }

    /* Buscar es un modo: mientras la barra está abierta, sus vecinos de fila se apartan.
       Antes la empujaban —la barra crece a 320px— y la fila terminaba más ancha que la
       pantalla. Se esconden con `display:none` y no con opacidad: lo que se busca es que
       dejen de ocupar sitio.

       Solo los BOTONES de la fila, no cualquier hermano: en la orden de venta el buscador
       comparte contenedor con el formulario entero, y esconder «todo lo que no sea el
       buscador» dejaba la pantalla en blanco. Lo que empuja son los botones. */
    .bsc-abierto > button, .bsc-abierto > a { display: none !important; }
    .bsc-abierto > .bsc-dock { flex: 1 1 auto; min-width: 0; }
    .bsc-abierto > .bsc-dock .es-bar { max-width: 100%; }

    /* El tablero se desplaza de lado desde CUALQUIER punto, no solo desde el alto que
       ocupan las columnas. La caja que scrollea medía lo que la columna más alta, así que
       por debajo de ellas —que en una pantalla grande es la mitad del tablero— el gesto no
       agarraba nada y parecía trabado. Se le da el alto que queda libre. */
    /* La tarjeta que va pegada al dedo mientras se arrastra en el teléfono. */
    .kb-clon { box-shadow: 0 22px 40px -16px rgba(15,12,25,.75) !important;
      transition: none !important; }
    /* Mientras se arrastra con el dedo no se selecciona texto ni rebota la página. */
    body.kb-arrastrando-dedo { user-select: none; -webkit-user-select: none;
      overscroll-behavior: contain; }
    /* La carpeta que va a recibir la tarea se ilumina, igual que una columna. */
    .pjf-recibe { outline: 2px solid rgba(167,139,250,.9); outline-offset: 3px;
      border-radius: 16px; }

    .kb-tablero { min-height: 62vh; align-content: start; }
    /* Y la barra de desplazamiento se ve: en un tablero ancho es la única pista de que
       hay más columnas a la derecha. */
    .kb-tablero { scrollbar-width: thin; }
    .kb-tablero::-webkit-scrollbar { height: 10px; }
    .kb-tablero::-webkit-scrollbar-thumb { background: rgba(148,163,184,.35); border-radius: 99px; }
    .kb-tablero::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.55); }

    /* Mientras una carpeta está abierta, la columna deja de recortar: los papeles salen
       fuera de la tarjeta y la zona del tablero scrollea, así que sin esto se cortarían
       a mitad del vuelo. Dura lo que dura la apertura. */
    .kb-zone:has(.pjf-abierta) { overflow: visible; }

    /* El nombre y los datos van SOBRE la carpeta, no debajo.
       Debajo, el nombre era un renglón suelto que no se sabía de quién era —y al abrirse,
       la carpeta se levantaba y el nombre se quedaba—. Impreso en la cara de la carpeta
       se lee como lo que es, la etiqueta del archivador, y se mueve con ella porque está
       DENTRO del elemento que se anima.

       Sin velo oscuro detrás: al abrirse la carpeta ese degradado quedaba flotando sobre
       las hojas y se leía como una mancha. La legibilidad sobre un color claro la sostiene
       la sombra del propio texto, que no ensucia lo que tiene detrás. */
    /* ══════════════════════════════════════════════════════════════════════════
       EL PANEL DE CONFIGURACIÓN EN EL TELÉFONO

       El panel se escribió para un monitor: 16px de aire a los lados MÁS 24px de
       relleno adentro son 80px de los 320 de un teléfono chico —una cuarta parte de
       la pantalla en márgenes—, y lo que queda para el contenido no alcanza. Acá se
       le devuelve el ancho: menos aire afuera, menos relleno adentro, y la barra de
       pestañas se desplaza por dentro en vez de partirse o quedar cortada.
       ══════════════════════════════════════════════════════════════════════════ */
    @media (max-width:820px){
      #adm-root .fixed.inset-0{padding:10px !important; align-items:flex-end}
      #adm-root .adm-caja{
        max-height:88vh !important; border-radius:20px;
        margin-bottom:calc(env(safe-area-inset-bottom,0px));
      }
      #adm-root .adm-cab{padding:13px 14px !important}
      #adm-root .adm-cab h3{font-size:17px}
      #adm-root #adm-tabs{
        /* Se desplaza DENTRO de la barra, no en la página: con tres o cuatro pestañas
           la última quedaba cortada contra el borde y no había forma de llegar a ella.

           Y el relleno de ABAJO no es decoración: en cuanto se pide `overflow-x: auto`,
           el eje vertical deja de ser `visible` y también recorta. La barra medía justo
           lo que mide la píldora, así que la de la pestaña activa quedaba pegada al
           límite de la caja y se le comía el borde redondeado. Con holgura arriba y
           abajo, la píldora entra entera. */
        padding:10px 14px 10px !important; gap:6px !important;
        overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
      }
      #adm-root #adm-tabs::-webkit-scrollbar{display:none}
      #adm-root #adm-tabs > button{flex:0 0 auto; white-space:nowrap}
      #adm-root #adm-pane{padding:14px !important}
      /* La tarjeta de cada usuario: el nombre puede ser largo y el menú NO se mueve de
         la esquina de arriba. `items-start` ya lo sube; esto le da el aire para que no
         quede pegado al borde ni encima del texto. */
      #adm-root .adm-user{padding:12px 12px 12px 13px !important; gap:10px !important}
      #adm-root .adm-user .kbb{margin:-2px -2px 0 0}
    }

    /* ══════════════════════════════════════════════════════════════════════════
       RECORRIDO GUIADO — el velo con un hueco

       El hueco no se dibuja recortando el velo: es una caja transparente con una sombra
       enorme alrededor. Es lo único que se puede mover a 60 cuadros sin repintar media
       pantalla, y encima deja el borde iluminado gratis.
       ══════════════════════════════════════════════════════════════════════════ */
    #tut-capa{position:fixed; inset:0; z-index:300; pointer-events:none}
    #tut-capa .tut-hueco{
      position:fixed; border-radius:14px; pointer-events:none;
      box-shadow:0 0 0 9999px rgba(8,5,16,.76),
                 0 0 0 2px rgba(167,139,250,.75),
                 0 0 30px 4px rgba(167,139,250,.4);
    }
    #tut-capa .tut-globo{
      position:fixed; border-radius:16px; padding:15px 16px 13px; pointer-events:auto;
      background:#1B1822; color:#F2EEF9;
      box-shadow:0 22px 60px rgba(0,0,0,.6);
      border:1px solid rgba(255,255,255,.12);
    }
    html:not(.theme-glass) #tut-capa .tut-globo{
      background:#fff; color:#1B1424; border-color:rgba(33,21,49,.08);
      box-shadow:0 22px 60px rgba(40,24,70,.28);
    }
    #tut-capa .tut-cap{margin:0; font-size:10.5px; font-weight:700; letter-spacing:.09em;
      text-transform:uppercase; opacity:.55}
    #tut-capa h5{margin:6px 0 4px; font-size:16px; font-weight:700; letter-spacing:-.014em}
    #tut-capa .tut-d{margin:0; font-size:13px; line-height:1.45; opacity:.72}
    #tut-capa .tut-nav{display:flex; align-items:center; gap:8px; margin-top:14px}
    #tut-capa .tut-sp{flex:1}
    #tut-capa .tut-saltar,#tut-capa .tut-atras{
      border:0; background:none; cursor:pointer; color:inherit; opacity:.6;
      font-size:12.5px; font-weight:600; padding:7px 4px;
    }
    #tut-capa .tut-saltar:hover,#tut-capa .tut-atras:hover{opacity:1}
    #tut-capa .tut-sig{
      border:0; background:#7C3AED; color:#fff; cursor:pointer; border-radius:10px;
      padding:9px 16px; font-size:13.5px; font-weight:650;
    }
    #tut-capa .tut-sig:hover{filter:brightness(1.07)}
    /* La puntita, apuntando al hueco. `--fx` la corre para que caiga sobre el elemento
       aunque el globo se haya tenido que mover para no salirse de la pantalla. */
    #tut-capa .tut-globo::before{
      content:""; position:absolute; width:12px; height:12px; background:inherit;
      border:1px solid transparent; transform:rotate(45deg);
    }
    #tut-capa .tut-globo[data-lado="abajo"]::before{top:-6px; left:var(--fx,28px);
      border-left-color:rgba(255,255,255,.12); border-top-color:rgba(255,255,255,.12)}
    #tut-capa .tut-globo[data-lado="arriba"]::before{bottom:-6px; left:var(--fx,28px);
      border-right-color:rgba(255,255,255,.12); border-bottom-color:rgba(255,255,255,.12)}
    html:not(.theme-glass) #tut-capa .tut-globo[data-lado="abajo"]::before{
      border-left-color:rgba(33,21,49,.08); border-top-color:rgba(33,21,49,.08)}
    html:not(.theme-glass) #tut-capa .tut-globo[data-lado="arriba"]::before{
      border-right-color:rgba(33,21,49,.08); border-bottom-color:rgba(33,21,49,.08)}

    /* ══════════════════════════════════════════════════════════════════════════
       ALTA DEL NEGOCIO — el asistente de la primera vez

       Dos presentaciones del mismo recorrido. En el teléfono, la cabecera con el paso
       va ARRIBA sobre el fondo del programa y la hoja emerge desde abajo con la
       pregunta; en la computadora, un riel vertical con los cuatro pasos siempre a la
       vista y el formulario al lado. Mismo material que el resto: superficie opaca
       sobre el fondo de la app, esquinas generosas y color sólo donde hay que tocar.
       ══════════════════════════════════════════════════════════════════════════ */
    .alta-fondo{
      background:
        radial-gradient(760px 460px at 22% 4%, rgba(139,92,246,.34), transparent 62%),
        radial-gradient(620px 420px at 86% 92%, rgba(219,39,119,.20), transparent 62%),
        linear-gradient(158deg, #1B1030 0%, #08060F 72%) !important;
      padding:0 !important;
    }
    html:not(.theme-glass) .alta-fondo{
      background:
        radial-gradient(760px 460px at 22% 4%, rgba(167,139,250,.46), transparent 62%),
        radial-gradient(620px 420px at 86% 92%, rgba(244,114,182,.28), transparent 62%),
        linear-gradient(158deg, #EFE9FB 0%, #DCD3F1 72%) !important;
    }
    /* El velo de `_overlay` es `grid place-items-center`, y una pista de rejilla crece con
       su contenido: el `height:100%` de acá se resolvía contra esa pista agrandada y no
       contra la pantalla —915px en un teléfono de 844—, así que la hoja empezaba 71px más
       abajo y el botón quedaba fuera, sin forma de llegar. Se ata al alto real. */
    #alta-raiz{width:100%; height:100%; max-height:100%; min-height:0;
      display:flex; flex-direction:column}

    /* ── Piezas del formulario, comunes a las dos presentaciones ─────────────── */
    .alta-tit{margin:0; font-size:23px; font-weight:700; letter-spacing:-.022em; line-height:1.16}
    .alta-sub{margin:6px 0 0; font-size:13.5px; line-height:1.45; opacity:.66}
    .alta-nota{margin:12px 0 0; font-size:12px; line-height:1.45; opacity:.5}
    .alta-error{margin:12px 0 0; font-size:13px; line-height:1.45; color:#e5484d}
    /* La salida para quien no tiene locales. Gris y sin caja: es una opción, no un botón
       que compita con «Siguiente». */
    .alta-saltar{display:block; margin:16px auto 0; border:0; background:none; cursor:pointer;
      font:inherit; font-size:13px; font-weight:600; color:inherit; opacity:.45;
      padding:6px 8px; border-radius:8px; text-decoration:underline;
      text-underline-offset:3px; text-decoration-thickness:1px}
    .alta-saltar:hover{opacity:.8}
    /* Sin la flechita —una sola sucursal— el `pr-1` de la píldora dejaba el nombre pegado
       al borde: ese padding existía para el botón que ya no está. */
    #topbar-suc-pill.sin-chev{padding-right:.7rem}
    .alta-campos{display:flex; flex-direction:column; gap:13px; margin-top:18px}
    .alta-campo{display:flex; flex-direction:column; gap:6px; min-width:0}
    .alta-lbl{font-size:12px; font-weight:600; opacity:.66}
    .alta-fila2{display:grid; grid-template-columns:1fr 1fr; gap:13px}
    .alta-inp{
      width:100%; border-radius:12px; padding:12px 13px; font-size:16px; outline:0;
      background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13);
      color:inherit; transition:border-color .16s, background .16s;
    }
    html:not(.theme-glass) .alta-inp{background:#F2F0F8; border-color:rgba(33,21,49,.13)}
    .alta-inp:focus{border-color:var(--accent-vivid, #772ded)}
    .alta-inp.malo{border-color:#e5484d}

    .alta-logo{display:flex; align-items:center; gap:14px}
    .alta-logo button{
      width:64px; height:64px; border-radius:18px; flex:0 0 auto; cursor:pointer;
      border:2px dashed rgba(255,255,255,.24); background:none; color:inherit; opacity:.7;
      display:grid; place-items:center; overflow:hidden; transition:border-color .18s, opacity .18s;
    }
    html:not(.theme-glass) .alta-logo button{border-color:rgba(33,21,49,.2)}
    .alta-logo button:hover{border-color:var(--accent-vivid, #772ded); opacity:1}
    .alta-logo button.puesto{border-style:solid; border-color:rgba(255,255,255,.16); opacity:1}
    .alta-logo button img{width:100%; height:100%; object-fit:cover}
    .alta-logo .txt{min-width:0}
    .alta-logo .txt b{display:block; font-size:14px; font-weight:600;
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
    .alta-logo .txt span{display:block; font-size:12px; opacity:.55; margin-top:2px; line-height:1.35}

    /* Empleados: lista agrupada con separadores sangrados hasta donde empieza el texto. */
    .alta-grupo{margin-top:16px; border-radius:14px; overflow:hidden;
      background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09)}
    html:not(.theme-glass) .alta-grupo{background:rgba(33,21,49,.03); border-color:rgba(33,21,49,.08)}
    .alta-emp{display:flex; align-items:center; gap:11px; padding:10px 12px; position:relative}
    .alta-emp + .alta-emp::before{content:""; position:absolute; left:53px; right:0; top:0;
      height:1px; background:rgba(255,255,255,.10)}
    html:not(.theme-glass) .alta-emp + .alta-emp::before{background:rgba(33,21,49,.09)}
    .alta-ini{width:32px; height:32px; border-radius:10px; flex:0 0 auto; display:grid;
      place-items:center; font-size:13px; font-weight:700; color:#fff;
      background:linear-gradient(155deg, #A78BFA, #7C3AED)}
    .alta-emp .txt{flex:1; min-width:0}
    .alta-emp .txt b{display:block; font-size:14.5px; font-weight:600;
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
    .alta-emp .txt span{display:block; font-size:12px; opacity:.55;
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
    .alta-quitar{border:0; background:none; cursor:pointer; opacity:.45; font-size:19px;
      line-height:1; padding:4px 3px; flex:0 0 auto; color:inherit}
    .alta-quitar:hover{opacity:1; color:#e5484d}
    .alta-vacio{margin:0; padding:18px 14px; text-align:center; opacity:.5; font-size:13px}
    .alta-add{
      display:flex; align-items:center; justify-content:center; gap:7px; width:100%;
      margin-top:11px; padding:11px; border-radius:12px; cursor:pointer; font-size:14px;
      font-weight:600; color:var(--accent, #b794f6); background:none;
      border:1.5px dashed rgba(255,255,255,.22); transition:border-color .18s;
    }
    html:not(.theme-glass) .alta-add{border-color:rgba(33,21,49,.18); color:#7C3AED}
    .alta-add:hover{border-color:var(--accent-vivid, #772ded)}

    /* El resumen: cada sucursal como tarjeta ALARGADA y, debajo, la punteada del «+». */
    .alta-sucs{display:flex; flex-direction:column; gap:11px; margin-top:18px}
    .alta-suc{display:flex; align-items:center; gap:13px; width:100%;
      background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.11);
      border-radius:16px; padding:14px 15px}
    html:not(.theme-glass) .alta-suc{background:#fff; border-color:rgba(33,21,49,.1);
      box-shadow:0 1px 2px rgba(20,16,32,.06)}
    .alta-suc .txt{flex:1; min-width:0}
    .alta-suc .txt b{display:block; font-size:15.5px; font-weight:650; letter-spacing:-.01em;
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
    .alta-suc .txt span{display:block; font-size:12.5px; opacity:.6; margin-top:2px;
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
    .alta-suc .gente{flex:0 0 auto; font-size:11.5px; font-weight:600; opacity:.7;
      border:1px solid rgba(255,255,255,.13); border-radius:999px; padding:5px 10px;
      white-space:nowrap}
    html:not(.theme-glass) .alta-suc .gente{border-color:rgba(33,21,49,.12)}
    .alta-mas{
      display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
      padding:17px; border-radius:16px; cursor:pointer; font-size:14.5px; font-weight:600;
      color:inherit; opacity:.72; background:none;
      border:2px dashed rgba(255,255,255,.22); transition:border-color .2s, opacity .2s;
    }
    html:not(.theme-glass) .alta-mas{border-color:rgba(33,21,49,.18)}
    .alta-mas:hover{border-color:var(--accent-vivid, #772ded); opacity:1}
    .alta-mas i{display:grid; place-items:center; width:24px; height:24px; border-radius:999px;
      border:1.5px solid currentColor; font-style:normal; box-sizing:border-box; flex:0 0 auto}
    .alta-mas i svg{display:block}

    /* Botones. El relleno usa el morado SÓLIDO: el acento claro sirve para texto sobre
       fondo oscuro, pero de relleno deja el rótulo blanco por debajo del mínimo legible. */
    .alta-pri{
      border:0; border-radius:13px; padding:14px 22px; cursor:pointer; flex:1;
      background:#7C3AED; color:#fff; font-size:16px; font-weight:650; letter-spacing:-.008em;
      box-shadow:0 8px 22px rgba(124,58,237,.34); transition:transform .1s ease-out, filter .16s;
    }
    .alta-pri:hover{filter:brightness(1.07)}
    .alta-pri:active{transform:scale(.985)}
    .alta-sec{border:0; background:none; cursor:pointer; color:inherit; opacity:.6;
      font-size:14px; font-weight:500; padding:12px 14px; border-radius:12px}
    .alta-sec:hover{opacity:1}
    .alta-nav{display:flex; align-items:center; gap:10px; margin-top:18px}

    /* ── ESCRITORIO · riel vertical y formulario ─────────────────────────────── */
    .alta-centro{flex:1; display:grid; place-items:center; padding:22px; min-height:0}
    .alta-caja{
      width:860px; max-width:100%; height:540px; max-height:100%;
      display:grid; grid-template-columns:270px 1fr; overflow:hidden;
      border-radius:22px; color:#F2EEF9;
      background:rgba(24,20,34,.68);
      -webkit-backdrop-filter:blur(28px) saturate(180%); backdrop-filter:blur(28px) saturate(180%);
      border:1px solid rgba(255,255,255,.13); border-top-color:rgba(255,255,255,.26);
      box-shadow:0 26px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.10);
    }
    html:not(.theme-glass) .alta-caja{
      background:rgba(255,255,255,.82); color:#1B1424;
      border-color:rgba(255,255,255,.7); border-top-color:rgba(255,255,255,.95);
      box-shadow:0 22px 60px rgba(40,24,70,.18), inset 0 1px 0 rgba(255,255,255,.8);
    }
    .alta-riel{padding:26px 20px; display:flex; flex-direction:column; gap:2px;
      background:rgba(255,255,255,.04); border-right:1px solid rgba(255,255,255,.09)}
    html:not(.theme-glass) .alta-riel{background:rgba(33,21,49,.035);
      border-right-color:rgba(33,21,49,.08)}
    /* Salir del alta. Solas las letras, en la esquina y fuera del recorrido: es una
       salida, no un paso. Mismo tono que el «Usar otra cuenta» de elegir sucursal. */
    /* La esquina de ABAJO, no la de arriba: arriba a la derecha ya flota el botón de
       claro/oscuro (`#theme-fab`, fixed top-5 right-5) y se pisaban. `margin-top:auto`
       lo empuja al pie del riel, que es la esquina libre. */
    .alta-salir{
      margin-top:auto; align-self:flex-start; background:none; border:0; cursor:pointer;
      padding:6px 10px; margin-left:-10px;
      font-size:13.5px; font-weight:500; color:inherit; opacity:.6;
    }
    .alta-salir:hover{opacity:1}
    .alta-marca{display:flex; align-items:center; gap:9px; margin-bottom:24px}
    .alta-marca img{width:26px; height:26px; border-radius:8px}
    .alta-marca b{font-size:15px; font-weight:700; letter-spacing:-.02em}
    .alta-it{display:flex; align-items:flex-start; gap:11px; padding:9px 9px; border-radius:11px;
      position:relative}
    .alta-it .n{width:24px; height:24px; border-radius:999px; flex:0 0 auto; display:grid;
      place-items:center; font-size:11.5px; font-weight:700; opacity:.7;
      border:1px solid rgba(255,255,255,.16)}
    html:not(.theme-glass) .alta-it .n{border-color:rgba(33,21,49,.14); background:#fff}
    .alta-it.on{background:rgba(255,255,255,.08)}
    html:not(.theme-glass) .alta-it.on{background:#fff; box-shadow:0 1px 3px rgba(20,16,32,.07)}
    .alta-it.on .n{background:#7C3AED; border-color:transparent; color:#fff; opacity:1}
    .alta-it.hecho .n{background:rgba(62,207,127,.16); border-color:transparent;
      color:#12A150; opacity:1}
    .alta-it .txt b{display:block; font-size:13.5px; font-weight:600}
    .alta-it .txt span{display:block; font-size:11.5px; opacity:.5; margin-top:1px}
    /* La cuerda que une un paso con el siguiente: se tiñe cuando el de arriba ya está. */
    .alta-it + .alta-it::before{content:""; position:absolute; left:20px; top:-8px; height:8px;
      width:2px; background:rgba(255,255,255,.14)}
    html:not(.theme-glass) .alta-it + .alta-it::before{background:rgba(33,21,49,.12)}
    .alta-it.hecho + .alta-it::before{background:rgba(62,207,127,.45)}
    .alta-pane{padding:32px 32px 24px; display:flex; flex-direction:column;
      overflow:hidden; min-height:0}
    .alta-pane .alta-cuerpo{overflow:auto; flex:1; min-height:0; padding-right:4px}

    /* ── TELÉFONO · cabecera afuera y hoja desde abajo ───────────────────────── */
    @media (max-width:820px){
      /* En columna flexible y no en rejilla: con `place-items` el hijo se encoge a su
         contenido o lo desborda, y acá hace falta que mida exactamente la pantalla. */
      .alta-fondo{display:flex !important; flex-direction:column; align-items:stretch}
      #alta-raiz{justify-content:flex-end; flex:1}
      .alta-cima{padding:30px 20px 0; margin-bottom:auto; color:#F2EEF9}
      /* En el teléfono la cabecera no es una columna, así que el `margin-top:auto` no
         empuja nada: el botón va debajo de los puntos del paso, a la izquierda, lejos del
         botón de claro/oscuro que flota arriba a la derecha. */
      .alta-cima .alta-salir{margin-top:12px}
      html:not(.theme-glass) .alta-cima{color:#1B1424}
      .alta-cap{margin:0; font-size:11px; font-weight:700; letter-spacing:.09em;
        text-transform:uppercase; opacity:.62}
      .alta-h{margin:10px 0 0; font-size:26px; font-weight:700; letter-spacing:-.024em}
      .alta-puntos{display:flex; align-items:center; gap:7px; margin-top:16px}
      .alta-puntos i{width:8px; height:8px; border-radius:999px; background:currentColor;
        opacity:.28; display:block; transition:opacity .24s, transform .24s}
      .alta-puntos i.on{opacity:1; transform:scale(1.35)}
      .alta-puntos i.hecho{opacity:.62}
      .alta-puntos span{margin-left:8px; font-size:12px; opacity:.72; font-weight:600}
      .alta-hoja{
        border-radius:24px 24px 0 0; max-height:78%; display:flex; flex-direction:column;
        /* `min-height:0` o el `max-height` no sirve de nada: un elemento flexible trae
           `min-height:auto`, que es el alto de su contenido y GANA sobre el máximo. Con el
           paso de empleados —seis campos y una lista— la hoja crecía hasta pasarse del
           borde de abajo y el botón quedaba fuera de la pantalla, sin forma de llegar. */
        min-height:0;
        padding:20px 20px calc(20px + env(safe-area-inset-bottom,0px));
        background:rgba(24,20,34,.72); color:#F2EEF9;
        -webkit-backdrop-filter:blur(30px) saturate(180%); backdrop-filter:blur(30px) saturate(180%);
        border:1px solid rgba(255,255,255,.13); border-top-color:rgba(255,255,255,.26);
        border-bottom:0; box-shadow:0 -18px 55px rgba(0,0,0,.42);
        animation:altaSube .32s cubic-bezier(.2,.8,.2,1);
      }
      html:not(.theme-glass) .alta-hoja{
        background:rgba(255,255,255,.86); color:#1B1424;
        border-color:rgba(255,255,255,.7); border-top-color:rgba(255,255,255,.95);
        box-shadow:0 -16px 46px rgba(40,24,70,.16);
      }
      @keyframes altaSube{from{transform:translateY(100%)} to{transform:none}}
      @media (prefers-reduced-motion: reduce){ .alta-hoja{animation:none} }
      .alta-cuerpo{overflow:auto; flex:1; min-height:0}
      .alta-pie{flex:0 0 auto}
      .alta-tit{font-size:21px}
      /* Un renglón por campo: dos columnas de 150px no dan para escribir una dirección. */
      .alta-fila2{grid-template-columns:1fr}
    }

    /* ══════════════════════════════════════════════════════════════════════════
       ELEGIR SUCURSAL — una hoja de vidrio, en el medio o apoyada abajo

       El mismo material en las dos pantallas. En la computadora flota en el centro;
       en el teléfono se apoya en el borde de abajo con su asa, igual que el resto de
       los formularios. La hoja es la capa PESADA (desenfoque fuerte, sombra profunda)
       y las filas una capa más liviana encima: nunca dos vidrios claros uno sobre otro,
       que es donde se pierde la legibilidad.
       ══════════════════════════════════════════════════════════════════════════ */
    .sel-fondo{
      background:
        radial-gradient(760px 460px at 22% 4%, rgba(139,92,246,.34), transparent 62%),
        radial-gradient(620px 420px at 86% 92%, rgba(219,39,119,.20), transparent 62%),
        linear-gradient(158deg, #1B1030 0%, #08060F 72%) !important;
      padding:0 !important;
    }
    html:not(.theme-glass) .sel-fondo{
      background:
        radial-gradient(760px 460px at 22% 4%, rgba(167,139,250,.46), transparent 62%),
        radial-gradient(620px 420px at 86% 92%, rgba(244,114,182,.28), transparent 62%),
        linear-gradient(158deg, #EFE9FB 0%, #DCD3F1 72%) !important;
    }
    /* EN LA COMPUTADORA la caja ES el vidrio: la cabecera va adentro y centrada, que es
       lo que corresponde a un cuadro que flota solo en el medio de la pantalla. */
    .sel-caja{
      width:100%; max-width:430px; margin:16px;
      border-radius:22px; padding:26px 22px 22px;
      background:rgba(24,20,34,.62);
      -webkit-backdrop-filter:blur(28px) saturate(180%); backdrop-filter:blur(28px) saturate(180%);
      /* El borde de arriba, más claro: es la luz pegando en el canto del material. */
      border:1px solid rgba(255,255,255,.13); border-top-color:rgba(255,255,255,.26);
      box-shadow:0 26px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.10);
      color:#F2EEF9;
    }
    html:not(.theme-glass) .sel-caja{
      background:rgba(255,255,255,.72); color:#1B1424;
      border-color:rgba(255,255,255,.7); border-top-color:rgba(255,255,255,.95);
      box-shadow:0 22px 60px rgba(40,24,70,.18), inset 0 1px 0 rgba(255,255,255,.8);
    }
    /* ── La cabecera: primero de quién es el programa, después de quién es la sesión ──
       El orden de lectura y los tamaños tienen que decir lo mismo. La MARCA manda: es lo
       más grande y lo primero. El saludo va debajo y más chico —es un dato, no un
       titular—, y debajo de él la frase que dice qué hay que hacer. Antes el «Hola» era
       más grande que «Clikkie», que es como poner el nombre del invitado más grande que
       el del local. */
    /* El asa es del teléfono: en la computadora la hoja no se arrastra, así que no
       hay nada de qué agarrarla. (La regla se perdió al reordenar el bloque y el
       asa aparecía flotando en el medio del cuadro.) */
    .sel-asa{display:none}
    .sel-cima{text-align:center; margin-bottom:20px}
    .sel-marca > div{margin-bottom:0 !important; gap:.7rem !important}
    /* EL COLOR, sobre la caja y no sobre la hoja: `_brandHeader()` trae `text-white`
       porque en el login sale sobre el fondo oscuro. Acá la cabecera vive FUERA de la
       hoja, así que una regla colgada de `.sel-hoja` ya no la alcanzaba y en modo claro
       «Clikkie.» quedaba blanco sobre blanco. Se cuelga de `.sel-caja`, que envuelve
       las dos zonas. */
    .sel-caja .font-display{color:inherit !important; font-size:1.72rem !important;
      letter-spacing:-.028em}
    .sel-caja .sel-marca img{width:44px !important; height:44px !important}
    .sel-hola{margin:14px 0 0; font-size:16.5px; font-weight:600; letter-spacing:-.008em;
      opacity:.92}
    .sel-sub{margin:3px 0 0; font-size:13.5px; opacity:.6; line-height:1.4}

    /* La lista agrupada. Un solo contenedor y separadores SANGRADOS hasta donde
       empieza el texto: así se lee como una lista y no como fichas sueltas. */
    .sel-grupo{
      border-radius:14px; overflow:hidden;
      background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.09);
    }
    html:not(.theme-glass) .sel-grupo{background:rgba(255,255,255,.66); border-color:rgba(33,21,49,.07)}
    .sel-op{
      display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
      background:none; border:0; color:inherit; position:relative;
      /* 12px a la derecha: el chevron queda PEGADO al borde de la fila, y como el
         bloque de texto se estira, todos caen en la misma columna. */
      padding:11px 12px 11px 12px;
      transition:background .15s ease-out;
    }
    .sel-op + .sel-op::before{
      content:""; position:absolute; left:54px; right:0; top:0; height:1px;
      background:rgba(255,255,255,.10);
    }
    html:not(.theme-glass) .sel-op + .sel-op::before{background:rgba(33,21,49,.10)}
    .sel-op:hover{background:rgba(255,255,255,.09)}
    html:not(.theme-glass) .sel-op:hover{background:rgba(255,255,255,.85)}
    .sel-op:active{transform:scale(.985)}
    .sel-ini{
      width:30px; height:30px; border-radius:9px; flex:0 0 auto; display:grid; place-items:center;
      font-size:14px; font-weight:700; color:#fff; letter-spacing:-.01em;
      background:linear-gradient(155deg, #A78BFA, #7C3AED);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
    }
    /* `flex:1` y `min-width:0`: sin esto una dirección larga empuja el chevron y cada
       fila lo deja en un sitio distinto. Con esto la columna de chevrones queda recta. */
    .sel-txt{flex:1; min-width:0}
    .sel-txt b{display:block; font-size:15.5px; font-weight:600; letter-spacing:-.008em}
    .sel-txt span{display:block; font-size:12.5px; opacity:.6; margin-top:1px;
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
    .sel-chev{width:17px; height:17px; flex:0 0 auto; opacity:.42}
    .sel-vacio{margin:0; padding:16px 14px; font-size:13.5px; opacity:.66}
    .sel-salir{
      display:block; margin:16px auto 0; background:none; border:0; cursor:pointer;
      font-size:13.5px; font-weight:500; opacity:.6; padding:6px 10px;
    }
    .sel-salir:hover{opacity:1}
    /* En elegir sucursal el claro/oscuro NO flota: chocaba con el engranaje —los dos
       arriba a la derecha en el teléfono— y encima son dos botones sin rótulo, uno al
       lado del otro, haciendo cosas distintas. Ahora vive dentro del panel del
       engranaje, con su nombre escrito. */
    .sel-fondo #theme-fab{display:none}
    /* Arriba a la derecha en las dos pantallas, no abajo. Abajo a la derecha es donde
       salen los avisos flotantes (z-index 300), asi que en la computadora el aviso
       tapaba el engranaje y no habia forma de tocarlo. Arriba esa esquina esta libre,
       y ademas queda en el mismo sitio que en el telefono. */
    .sel-gear{
      position:fixed; top:calc(env(safe-area-inset-top, 0px) + 16px); right:16px;
      z-index:101; display:grid; place-items:center;
      width:46px; height:46px; border-radius:99px; cursor:pointer; color:#F2EEF9;
      background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20);
      -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    }
    html:not(.theme-glass) .sel-gear{color:#1B1424; background:rgba(255,255,255,.6);
      border-color:rgba(33,21,49,.10)}
    .sel-gear:hover{background:rgba(255,255,255,.18)}
    html:not(.theme-glass) .sel-gear:hover{background:rgba(255,255,255,.85)}

    @media (max-width:820px){
      /* EN EL TELÉFONO se dan vuelta los papeles: la caja deja de ser el vidrio y pasa a
         ocupar la pantalla entera, transparente. La cabecera queda ARRIBA A LA IZQUIERDA,
         sobre el fondo —es de quién es la sesión, no parte de la elección—, y el vidrio
         baja a ser la hoja apoyada en el borde de abajo, con su asa. Un cuadro flotando
         en el medio con aire arriba y abajo desperdicia pantalla y no se parece a nada
         del sistema operativo; una hoja apoyada es el gesto que ya conocen. */
      .sel-fondo{display:flex !important; flex-direction:column;
        justify-content:flex-end; align-items:stretch}
      .sel-caja{
        max-width:100%; width:100%; margin:0; padding:0; min-width:0;
        display:flex; flex-direction:column; height:100%;
        background:none !important; border:0 !important; box-shadow:none !important;
        -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
        border-radius:0;
      }
      .sel-cima{
        text-align:left; margin:0 0 auto;                 /* `auto` empuja la hoja abajo */
        padding:26px 20px 0;
        color:#F2EEF9;
      }
      html:not(.theme-glass) .sel-cima{color:#1B1424}
      .sel-cima .sel-marca > div{justify-content:flex-start !important}
      /* En el telefono hay mas sitio arriba: la marca respira un poco mas. */
      .sel-caja .font-display{font-size:1.85rem !important}
      .sel-hola{font-size:17px}
      .sel-sub{margin:4px 0 0; max-width:30ch}

      .sel-hoja{
        border-radius:24px 24px 0 0; border-bottom:0;
        padding:9px 20px calc(22px + env(safe-area-inset-bottom,0px));
        background:rgba(24,20,34,.62);
        -webkit-backdrop-filter:blur(30px) saturate(180%); backdrop-filter:blur(30px) saturate(180%);
        border:1px solid rgba(255,255,255,.13); border-top-color:rgba(255,255,255,.26);
        box-shadow:0 -18px 55px rgba(0,0,0,.42);
        color:#F2EEF9;
        animation:selSube .3s cubic-bezier(.2,.8,.2,1);
      }
      html:not(.theme-glass) .sel-hoja{
        background:rgba(255,255,255,.74); color:#1B1424;
        border-color:rgba(255,255,255,.7); border-top-color:rgba(255,255,255,.95);
        box-shadow:0 -16px 46px rgba(40,24,70,.16);
      }
      @keyframes selSube{from{transform:translateY(100%)} to{transform:none}}
      @media (prefers-reduced-motion: reduce){ .sel-hoja{animation:none} }
      .sel-asa{
        display:block; width:38px; height:5px; border-radius:99px; margin:0 auto 14px;
        background:rgba(255,255,255,.34);
      }
      html:not(.theme-glass) .sel-asa{background:rgba(33,21,49,.22)}
    }

    /* ══ HOJA POR PASOS (.hp): dos columnas en la compu, un paso por vez en el móvil ══
       Un solo marcado para los formularios largos del sistema. En pantalla grande es un
       formulario normal —se llena a la izquierda y el resumen queda quieto a la derecha—;
       en el teléfono es una hoja que emerge desde abajo y muestra un paso por vez, con sus
       puntos arriba y «Atrás / Siguiente» abajo.

       Lo usa `hojaPasos()` en app.js; cada formulario solo declara sus pasos. */
    .hp { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0 22px; }
    /* Sin columna de resumen, una sola columna. `hojaPasos` ya marcaba este caso con
       `hp-solo`, pero ninguna regla lo atendia: el formulario reservaba igual los 300px
       del resumen y quedaba arrinconado en la mitad izquierda de un modal ancho, con los
       nombres largos recortados. La clase estaba puesta desde el principio; le faltaba
       esto. */
    .hp.hp-solo { grid-template-columns: minmax(0, 1fr); }
    .hp-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
    .hp-side { display: flex; flex-direction: column; gap: 14px;
      border-left: 1px solid rgba(148,163,184,.18); padding-left: 20px; }
    /* En la computadora no hay pasos: se ve todo a la vez. */
    .hp .hpp { display: block; }
    .hp-puntos, .hp-titulo, .hp-nav { display: none; }
    .hp-resumen { position: sticky; top: 0; }

    @media (max-width: 820px) {
      .hp { display: block; }
      .hp-side { border-left: 0; padding-left: 0; }
      /* Una página por vez. La que está activa ocupa lo suyo; las demás no existen. */
      .hp .hpp { display: none; }
      .hp .hpp.hp-on { display: block; animation: hpEntra .18s ease-out; }
      @keyframes hpEntra { from { opacity: 0; transform: translateX(14px) } to { opacity: 1; transform: none } }
      /* Los puntos dicen dónde estás y cuánto falta; el activo se estira. */
      .hp-puntos { display: flex; align-items: center; justify-content: center; gap: 7px;
        padding: 2px 0 10px; }
      .hp-puntos i { width: 7px; height: 7px; border-radius: 99px; display: block;
        background: rgba(148,163,184,.4); transition: width .2s, background .2s; }
      .hp-puntos i.on { width: 22px; background: #8b5cf6; }
      .hp-titulo { display: block; margin: 0 0 12px; font-size: 15px; font-weight: 700;
        text-align: center; }
      /* La barra de pasos reemplaza al pie del modal: dos botones para lo mismo confunden.
         Va pegada abajo mientras se desplaza el contenido: el «Siguiente» es lo que más se
         toca de esta pantalla y no puede quedar a tres deslizadas de distancia. */
      .hp-nav { display: flex; align-items: center; gap: 10px; padding: 12px 0 4px;
        margin-top: 4px; border-top: 1px solid rgba(148,163,184,.18);
        position: sticky; bottom: 0; }
      /* La barra tiene que TAPAR lo que pasa por debajo. Decia `background: inherit`, que
         en una propiedad no heredada copia el valor calculado del padre —y el padre `.hp`
         es transparente—: en el paso de «que productos lleva la lista» los renglones se
         veian por detras de «Atras» y del boton, y el paso parecia roto. Es el mismo color
         que la hoja, y se estira hasta los bordes para tapar tambien los margenes del
         cuerpo, por donde el contenido asomaba a los costados. */
      #modal-root .fixed.inset-0:has(.hp) .hp-nav {
        background: #131318;
        /* La sombra pinta la franja de los margenes del cuerpo sin ocupar sitio. Con margenes
           negativos se ganaba el mismo efecto y 2px de desplazamiento lateral, porque hay que
           acertarle al relleno exacto; una sombra no puede desbordar nada. La tercera tapa
           por ABAJO: la barra se pega al borde interior del cuerpo, no al de la hoja, y por
           esos ultimos pixeles seguia pasando un renglon. Arriba no se pinta nada, que ahi
           el contenido tiene que verse. */
        box-shadow: 20px 0 0 #131318, -20px 0 0 #131318, 0 20px 0 20px #131318; }
      html:not(.theme-glass) #modal-root .fixed.inset-0:has(.hp) .hp-nav {
        background: #ffffff; box-shadow: 20px 0 0 #ffffff, -20px 0 0 #ffffff, 0 20px 0 20px #ffffff; }
      #modal-root .fixed.inset-0:has(.hp) > div > div:last-child { display: none; }

      /* ── Y el formulario entero EMERGE DESDE ABAJO, como la hoja de propiedades ──
         En un teléfono un cuadro flotando en el medio con aire arriba y abajo desperdicia
         pantalla y no se parece a nada del sistema operativo. Una hoja apoyada en el borde
         de abajo, con su asa, es el gesto que ya conocen. Mismo modal, otra presentación. */
      /* Los !important son contra la regla móvil de los modales, que ya trae los suyos
         (padding 10/10/96 y un max-height calculado): sin esto la hoja se quedaba flotando
         en el medio con 10 px de aire a los lados. */
      /* La hoja se apoya en lo que se VE, no en el borde de la ventana: con el teclado
         abierto, `--vvh` es el alto visible y `--vvtop` dónde empieza (iOS desplaza en vez
         de achicar). Sin esto, la mitad de abajo de la hoja quedaba detrás del teclado. */
      #modal-root .fixed.inset-0:has(.hp) {
        align-items: flex-end; padding: 0 !important;
        top: var(--vvtop, 0px) !important; bottom: auto !important;
        height: var(--vvh, 100%) !important; }
      #modal-root .fixed.inset-0:has(.hp) > div {
        position: relative;
        width: 100%; max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important; border-bottom: 0 !important;
        max-height: min(92vh, var(--vvh, 92vh)) !important;
        animation: hpSube .26s cubic-bezier(.2, .8, .2, 1); }
      /* La hoja se prolonga por debajo del borde de la pantalla. No se ve —está fuera—,
         pero cuando el teclado empuja el viewport hacia arriba, lo que aparece abajo es
         más hoja y no el hueco sin pintar. `inherit` copia el fondo de la hoja, sea el
         del modo claro, el oscuro o el de vidrio. */
      #modal-root .fixed.inset-0:has(.hp) > div::after {
        content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 45vh;
        background: inherit; pointer-events: none; }
      /* Y sin desenfoque del fondo mientras la hoja está abierta: el desenfoque se
         recalcula en cada cambio de tamaño del viewport y es la otra mitad del destello.
         Se compensa con un velo más oscuro y, sobre todo, con una hoja OPACA.

         Las tarjetas del programa son de vidrio (`.bg-white` translúcido). En una tarjeta
         chica eso se ve bien; en una hoja que ocupa la pantalla entera, no: se leía la
         pantalla de atrás a través del formulario. Acá la hoja es una superficie, no un
         vidrio. */
      #modal-root .fixed.inset-0:has(.hp) {
        -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
        background: rgba(10, 4, 20, .74) !important; }
      #modal-root .fixed.inset-0:has(.hp) > div { background: #131318 !important; }
      html:not(.theme-glass) #modal-root .fixed.inset-0:has(.hp) > div { background: #ffffff !important; }
      @keyframes hpSube { from { transform: translateY(100%) } to { transform: none } }
      /* El asa, arriba del título: va en la hoja misma y no en el cuerpo, que empieza
         después de la cabecera. Se ve que la hoja se arrastra aunque todavía no se arrastre. */
      #modal-root .fixed.inset-0:has(.hp) > div::before {
        content: ""; display: block; flex: 0 0 auto; width: 42px; height: 5px;
        border-radius: 99px; background: rgba(148,163,184,.45); margin: 9px auto 0; }
      /* La cabecera del modal se compacta: en una hoja, el título no necesita tanto aire. */
      #modal-root .fixed.inset-0:has(.hp) > div > div:first-child { padding: 12px 18px; }
      /* Con el teclado abierto, la barra de pasos se va. Está pegada al borde de abajo y
         con el teclado encima terminaba flotando sobre el campo que se está llenando.
         Mientras se escribe no hace falta: se vuelve a ver al cerrar el teclado.
         El `!important` es contra el `style.display` que le pone _hpPaso(). */
      html.teclado .hp-nav { display: none !important; }
      /* El botón de guardar del formulario se esconde: en el teléfono la barra de pasos ya
         lo repite abajo, con el mismo texto, y dos botones que hacen exactamente lo mismo
         a diez píxeles uno del otro se leen como dos cosas distintas. Sigue existiendo:
         es al que la barra le da el clic. */
      .hp [data-hp-guardar] { display: none !important; }
      /* El «sin productos todavía» no es una fila de datos: no le va la tarjeta con borde
         que el móvil le pone a cada renglón de tabla. Dibujaba una caja dentro de otra. */
      .hp table tr:has(> td[colspan]) { background: none !important; border: 0 !important;
        padding: 0 !important; }
      .hp table td[colspan] { text-align: center !important; }
      /* Nada de listas con su propio scroll dentro de la hoja: dos barras encajadas hacen
         que el dedo mueva una u otra segun donde caiga, y el resumen de una cuenta con
         cincuenta movimientos se volvia imposible de recorrer. La hoja ya se desplaza. */
      .hp #mov-list, .hp #lst-prods { max-height: none !important; }
      /* Tres cifras cortas (total, abonado, restante) siguen en tres columnas: la regla
         general apila los grid-cols-3 del móvil, y acá eso son tres renglones enormes
         para tres números que caben de sobra en una línea. */
      #modal-root .hp-cifras { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
      #modal-root .hp-cifras2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
      /* Con el teclado abierto, el formulario gana un colchón vacío al final. Suena raro,
         pero es lo que permite que el ÚLTIMO campo —el de etiquetas, sin ir más lejos— se
         pueda subir hasta el medio de la pantalla: sin colchón no hay nada que desplazar,
         el campo se queda pegado al borde del teclado y la lista que cuelga de él, al no
         tener dónde ir, se voltea hacia arriba y flota encima del formulario.
         Es espacio en blanco al final: no se ve, solo deja moverse. */
      html.teclado #modal-root .fixed.inset-0:has(.hp) #m-body {
        padding-bottom: calc(var(--vvh, 100vh) * 0.45) !important; }

      /* La hoja NO se recoge más allá de eso. Se probó esconder también el asa, los puntos
         y el aire de la cabecera —eran ~90 px de regalo—, pero cada cosa que cambia al
         abrirse el teclado es un salto más, y todos juntos se leen como que la pantalla
         tiembla. Vale más que la hoja se quede quieta que noventa píxeles. */
    }

    /* El aspa de cerrar: 20 px de dibujo, 44 px de blanco donde tocar.

       El icono mide `w-5 h-5` y el botón no le pone relleno, así que el sitio donde hay
       que acertar con el dedo eran esos mismos 20x20. En la hoja por pasos importa el
       doble: con el teclado abierto la barra de «Atrás / Siguiente» se esconde y el pie
       con «Cancelar» tampoco se dibuja, así que el aspa es la ÚNICA salida.

       Los márgenes negativos devuelven los 12 px que el botón crece hacia cada lado: el
       blanco donde tocar se agranda, la cabecera se ve exactamente igual que antes. */
    #modal-root #m-x {
      min-width: 44px; min-height: 44px; display: grid; place-items: center;
      margin: -12px -12px -12px 0;
    }

    /* ══ La TAREA: un papel con clip, de la misma familia que la carpeta ═════
       Si el proyecto es una carpeta, lo que hay dentro son hojas. Comparten el tamaño
       (160x104), el salto de 8 px al pasar por encima, la tipografía del nombre y el sitio
       de las acciones. Lo que las distingue es de qué están hechas: la carpeta es un objeto
       de color con pestaña; la tarea es papel liso, y el color no lo pinta, lo SOSTIENE.

       El clip sobresale por arriba en vez de meterse en la hoja: así no le come ancho al
       nombre —160 px dan para poco— y, de paso, las dos piezas tienen algo que asoma por
       encima del cuerpo, la pestaña de una y el clip de la otra. */
    .pjt { position: relative; width: 160px; height: 104px; margin: 14px auto 0;
      background: #fff; border: 1px solid rgba(148,163,184,.35); border-radius: 12px;
      padding: 9px 11px 8px 13px; overflow: visible;
      transition: transform .2s ease-in, box-shadow .2s ease-in, border-color .2s; }
    html.dark .pjt, html.theme-glass .pjt { background: #12121a;
      border-color: rgba(255,255,255,.12); }
    /* El clip: dos trazos del color del proyecto, apenas apoyados sobre el papel. */
    /* Prendido de la esquina: casi todo el clip va SOBRE el papel y apenas asoma 7 px por
       arriba. Sacarlo más lo dejaba flotando como un gancho suelto. Mide 11 px de ancho y
       arranca en el 1 para terminar justo antes de los 13 px de sangría del nombre: así no
       hay que correr el título ni perder ancho, que en 160 px se nota. */
    .pjt-clip { position: absolute; z-index: 2; top: -7px; left: 1px;
      width: 11px; height: 26px; border-radius: 6px;
      border: 2.5px solid var(--pjt-color, #8b5cf6); border-bottom-color: transparent;
      transform: rotate(-8deg); transition: transform .2s ease-in; }
    /* Al levantar la hoja, el clip se afloja un pelo. */
    .pjt:hover .pjt-clip { transform: rotate(-8deg) translateY(-2px); }
    .pjt:hover { transform: translateY(-8px);
      box-shadow: 0 14px 22px -14px rgba(15,12,25,.55);
      border-color: var(--pjt-color, #8b5cf6); }
    .pjt-nom { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.2;
      color: #1e293b; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      overflow: hidden; overflow-wrap: anywhere; padding-right: 34px; }
    html.dark .pjt-nom, html.theme-glass .pjt-nom { color: #f1f5f9; }
    /* Los mismos 11 px tabulares de la etiqueta de la carpeta. */
    .pjt-meta { position: absolute; left: 13px; right: 11px; bottom: 8px;
      display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600;
      color: #64748b; font-variant-numeric: tabular-nums; }
    html.dark .pjt-meta, html.theme-glass .pjt-meta { color: #94a3b8; }
    .pjt-meta .avs { display: flex; align-items: center; margin-left: auto;
      padding-left: 7px; }
    /* Las acciones, en la misma esquina y con el mismo comportamiento que en la carpeta. */
    .pjt-acc { position: absolute; z-index: 5; top: 5px; right: 6px; display: flex; gap: 2px;
      opacity: 0; transition: opacity .15s; }
    .pjt:hover .pjt-acc, .pjt:focus-within .pjt-acc { opacity: 1; }
    @media (pointer: coarse) { .pjt-acc { opacity: 1; } }
    .pjt-acc button { color: #94a3b8; background: rgba(148,163,184,.14);
      border-radius: 7px; padding: 2px; line-height: 0; }
    .pjt-acc button:hover { color: #475569; background: rgba(148,163,184,.28); }
    html.dark .pjt-acc button, html.theme-glass .pjt-acc button {
      color: #94a3b8; background: rgba(255,255,255,.08); }
    html.dark .pjt-acc button:hover, html.theme-glass .pjt-acc button:hover {
      color: #e2e8f0; background: rgba(255,255,255,.16); }
    /* Arrastrando, quieta: igual que la carpeta, que se cierra de golpe. */
    .pjt-arrastrando .pjt, .pjt-arrastrando .pjt:hover { transform: none; box-shadow: none;
      transition: none; }
    .pjt-arrastrando .pjt-clip { transform: rotate(-8deg); }

    .pjf-etiqueta { position: absolute; z-index: 40; left: 0; right: 0; bottom: 0;
      padding: 6px 10px 8px; pointer-events: none;
      color: #fff; text-shadow: 0 1px 3px rgba(15,12,25,.55); }
    .pjf-nom { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.2;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      overflow: hidden; overflow-wrap: anywhere; }
    .pjf-meta { margin-top: 3px; display: flex; align-items: center; gap: 8px;
      font-size: 11px; font-weight: 600; color: rgba(255,255,255,.88);
      font-variant-numeric: tabular-nums; }

    /* Las acciones, en la esquina de la carpeta. Se ven al pasar por encima; en pantalla
       táctil, donde no hay «pasar por encima», se ven siempre. */
    .pjf-acc { position: absolute; z-index: 50; top: 4px; right: 4px; display: flex; gap: 2px;
      opacity: 0; transition: opacity .15s; }
    .pjf:hover .pjf-acc, .pjf:focus-within .pjf-acc { opacity: 1; }
    @media (pointer: coarse) { .pjf-acc { opacity: 1; } }
    .pjf-acc button { color: rgba(255,255,255,.9); background: rgba(15,12,25,.34);
      border-radius: 7px; padding: 3px; display: grid; place-items: center; }
    .pjf-acc button:hover { background: rgba(15,12,25,.55); }

    /* ── Movimiento reducido ────────────────────────────────────────────────
       Obligatorio: el sistema operativo puede pedir menos animación (mareos, vértigo,
       migraña) y hasta ahora la pantalla lo ignoraba por completo. Se apaga todo el
       movimiento, no se «suaviza»: pedir menos movimiento significa ninguno. */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
      }
    }