/* ═══════════════════════════════════════════════════════════════════════════
   BRÚJULA — EL REDISEÑO, detrás del interruptor del diseño base
   ─────────────────────────────────────────────────────────────────────────────
   30 sep 2026, orden de Samuel: «un rediseño total de la página. El manual de
   marca se debe aplicar por completo al portal —botones, layouts, UI,
   animaciones, hasta el menú principal—. Haremos todo esto para el sistema
   base; el cover de Amoramar se queda igual para no interferir con la
   experiencia de los otros usuarios hasta tener el producto terminado».

   Tres reglas que sostienen esa promesa:

   1. TODO LO QUE CAMBIA UNA PIEZA QUE YA EXISTE va bajo `html[data-sin-tema]`,
      el atributo que pone theme.js cuando el dueño enciende el diseño base.
      Sin él, esta hoja no le cambia nada a nadie.
   2. Lo que es NUEVO (el mosaico, el odómetro, las esperas, la tecla de
      «hecho») no necesita alcance: solo lo pinta el JavaScript del diseño
      base (theme.js pregunta por el atributo en cada llamada). Sus @keyframes
      llevan el prefijo `brj-` para no pisar los del catálogo de anim.css.
   3. Va DETRÁS de tema.css en cada página, y el alcance le da la especificidad
      para ganar al CSS propio de cada pantalla sin `!important`.

   Los tiempos y las curvas los ponen los tokens: el núcleo (tokens.css) lleva
   los del manual y tema.css devuelve a Amoramar los suyos. Detalle:
   docs/DESIGN-SYSTEM.md §6.4 y docs/arquitectura/REDISENO.md.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══ 1. EL MOSAICO (manual §6 «Pantallas de carga») ═════════════════════════
   Las cuatro teclas del símbolo en su rejilla de 2×2 —cuadrado y círculo en la
   tinta, la hoja en su color, el cuarto en acero— y una ola que las enciende en
   el sentido del reloj: cuadrado, hoja, cuarto, círculo. Lo pinta
   `amrMosaico()`; su tamaño es `--m` (el lado de cada tecla). `--mono` las
   pinta del color del texto: dentro de un botón relleno la hoja y el acero se
   perderían sobre el acento. */
.amr-mosaico{--m:8px; display:inline-grid; grid-template-columns:repeat(2,var(--m)); grid-auto-rows:var(--m);
  gap:calc(var(--m) * .28); flex:none; vertical-align:middle; color:var(--ink)}
.amr-mosaico i{display:block; width:var(--m); height:var(--m); background:currentColor}
.amr-mosaico .sq{border-radius:33%; --k:0}
.amr-mosaico .lf{border-radius:100% 0 100% 0; background:var(--marca-hoja,var(--gold)); --k:1}
.amr-mosaico .qt{border-radius:0 0 100% 0; background:var(--acero,currentColor); --k:2}
.amr-mosaico .ci{border-radius:50%; --k:3}
.amr-mosaico--mono{color:inherit}
.amr-mosaico--mono i{background:currentColor}
/* El botón que trabaja: la ola corta del manual (1,1 s), del color del botón. */
.amr-spin.amr-mosaico{width:auto; height:auto; border:0; border-radius:var(--radius-none); --m:6px; gap:2px; margin-right:.55em; vertical-align:middle}
.amr-spin.amr-mosaico i{opacity:.35}
@keyframes brj-mini-ola{ 0%,100%{ opacity:.35; transform:none } 22%{ opacity:1; transform:translateY(-1px) } 50%{ opacity:.35; transform:none } }

/* ══ 2. «HECHO»: LA TECLA SE ENCIENDE Y SUELTA LAS PIEZAS (manual §6) ═══════
   La tecla del símbolo se hunde, se llena del acento desde abajo, la palomita
   se dibuja y salen ocho piezas que se frenan en su sitio y se recogen. Sin
   movimiento, la tecla aparece ya encendida y con su palomita. */
.amr-hecho-caja{position:relative; width:60px; height:60px}
.amr-hecho-tecla{position:absolute; inset:0; border-radius:19px; overflow:hidden;
  background:var(--gold); box-shadow:0 2px 0 color-mix(in srgb,var(--gold) 74%,#000)}
.amr-hecho-tecla .luz{position:absolute; inset:0; background:var(--gold)}
.amr-hecho .amr-hecho-tecla svg{position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible}
.amr-hecho .amr-hecho-caja path{fill:none; stroke:var(--on-gold,#fff); stroke-width:4; stroke-linecap:round; stroke-linejoin:round}
.amr-hecho-chispas{position:absolute; inset:0; pointer-events:none}
.amr-hecho-chispas i{position:absolute; left:50%; top:50%; width:var(--s); height:var(--s); margin:calc(var(--s) / -2); opacity:0}
.amr-hecho-chispas .sq{border-radius:30%; background:var(--ink)}
.amr-hecho-chispas .lf{border-radius:100% 0 100% 0; background:var(--marca-hoja,var(--gold))}
.amr-hecho-chispas .qt{border-radius:0 0 100% 0; background:var(--acero,var(--muted))}
.amr-hecho-chispas .ci{border-radius:50%; background:var(--ink)}
.amr-hecho-chispas .ci.u{background:var(--gold)}
@keyframes brj-hecho-entra{ from{ opacity:0 } to{ opacity:1 } }
@keyframes brj-hecho-tecla{ 0%{ transform:translateY(2px); box-shadow:0 0 0 transparent } 100%{ transform:none; box-shadow:0 2px 0 color-mix(in srgb,var(--gold) 74%,#000) } }
@keyframes brj-hecho-luz{ from{ transform:scaleY(0) } to{ transform:scaleY(1) } }
@keyframes brj-hecho-traza{ from{ stroke-dashoffset:1 } to{ stroke-dashoffset:0 } }
@keyframes brj-hecho-salida{
  0%{ opacity:0; transform:scale(.3) }
  14%{ opacity:1; transform:translate(calc(var(--dx) * .35),calc(var(--dy) * .35)) rotate(calc(var(--r) * .3)) scale(1) }
  58%{ transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(1) }
  76%{ transform:translate(calc(var(--dx) * 1.03),calc(var(--dy) * 1.03)) rotate(calc(var(--r) * 1.12)) scale(1); animation-timing-function:cubic-bezier(.55,0,.85,.35) }
  100%{ opacity:0; transform:translate(calc(var(--dx) * .25),calc(var(--dy) * .25)) rotate(var(--r)) scale(.4) }
}

/* ══ 3. LA CIFRA QUE CAMBIA RUEDA (manual §6 «Cifra que cambia») ════════════
   La pinta `amrContar`: solo los dígitos que cambian van en `.amr-dig`, con su
   carácter nuevo dentro y el viejo en `data-antes`. */
.amr-dig{display:inline-block;position:relative;overflow:hidden;vertical-align:bottom;line-height:inherit}
.amr-dig > b{display:inline-block;font-weight:inherit}
@keyframes brj-dig-entra{from{transform:translateY(100%)}to{transform:none}}
@keyframes brj-dig-sale{from{transform:none}to{transform:translateY(-100%)}}

/* ══ 4. LAS ESPERAS (manual §6: «espera corta», «esperando a otro») ═════════
   `amrCargando(el, {forma:'mosaico'|'espera'})`. `--otro` es esperar a alguien
   de fuera: la hoja late despacio, en reposo. */
.amr-espera{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-7) var(--space-4);
  color:var(--muted);font-size:var(--text-apoyo,13px);text-align:center;
  animation:amr-cargando-entra var(--amr-dur-view) var(--amr-ease-out) var(--amr-dur-enter) both}
.amr-espera .amr-mosaico{color:var(--ink)}
@keyframes brj-respira{0%,100%{opacity:.45}30%{opacity:1}}
@keyframes brj-piloto{0%,100%{opacity:.28}50%{opacity:1}}

/* ══ 5. EL AVISO (manual §6 «Aviso») ════════════════════════════════════════
   Sube con resorte, su icono es la HOJA del símbolo, que se llena del acento al
   llegar, y un hilo abajo se acorta con el tiempo que le queda (lo pone
   `window.toast`, que sabe cuánto dura). De noche sigue siendo oscuro, con su
   filo de luz: una tarjeta clara flotando en el mar se lee como un error. */
.amr-toast-hilo{position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--gold);
  transform-origin:left; transform:scaleX(0); pointer-events:none}
.show > .amr-toast-hilo{animation:brj-toast-hilo var(--amr-toast-ms,3000ms) linear both}
.err > .amr-toast-hilo{background:var(--danger)}
@keyframes brj-toast-hilo{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes brj-toast-hoja{from{transform:scaleY(0)}to{transform:scaleY(1)}}
html[data-sin-tema] :is(.toast,.ui-toast,.amr-toast){overflow:hidden;
  transition:opacity calc(var(--amr-dur-fast) * 1.3) var(--amr-ease-sale),
             transform calc(var(--amr-dur-fast) * 1.3) var(--amr-ease-sale)}
html[data-sin-tema] :is(.toast,.ui-toast,.amr-toast).show{
  transition:opacity var(--amr-dur) linear, transform var(--amr-dur-lento) var(--amr-ease-spring)}
@media (prefers-color-scheme:dark){
  html[data-sin-tema]:not([data-theme="light"]) :is(.toast,.ui-toast,.amr-toast){background:var(--surface-raised);color:var(--ink);box-shadow:0 0 0 1px var(--hairline),var(--elev-toast)}
}
html[data-sin-tema][data-theme="dark"] :is(.toast,.ui-toast,.amr-toast){background:var(--surface-raised);color:var(--ink);box-shadow:0 0 0 1px var(--hairline),var(--elev-toast)}
html[data-sin-tema] .amr-toast-ic{width:16px;height:16px;margin:0 2px 0 6px;overflow:hidden;
  border-radius:100% 0 100% 0;background:color-mix(in srgb,currentColor 22%,transparent)}
html[data-sin-tema] .amr-toast-ic::after{-webkit-mask:none;mask:none;background:var(--marca-hoja,var(--gold));transform-origin:bottom;transform:scaleY(1)}
html[data-sin-tema] .err .amr-toast-ic{background:color-mix(in srgb,currentColor 22%,transparent)}
html[data-sin-tema] .err .amr-toast-ic::after{-webkit-mask:none;mask:none;background:var(--danger)}

/* ══ 6. INTERRUPTORES, CHIPS, VELOS Y FILAS QUE SE VAN ═════════════════════ */
/* La pista encendida, PLANA (manual §6 «Interruptor»: ningún objeto lleva
   degradado), y la perilla blanca con su canto: una tecla redonda. */
html[data-sin-tema] :is(.switch input:checked + .switch-tr, .switch input:checked + .track,
  .notif-switch input:checked + .notif-switch-track, .lp-switch input:checked + span,
  .venc-switch input:checked + .venc-switch-slider){background:var(--gold,#c19a4b) !important}
/* Cada perilla con su selector suelto: un seudoelemento DENTRO de `:is()` no
   vale, y el navegador tiraba la regla entera —en el base la perilla salía del
   color del tema, oscura en Modo playa, en todas las pantallas (11 oct 2026)—. */
html[data-sin-tema] .switch-tr::after, html[data-sin-tema] .switch .track::after, html[data-sin-tema] .notif-switch-track::after,
html[data-sin-tema] .lp-switch span::before, html[data-sin-tema] .venc-switch-slider::before{background:#fff !important; box-shadow:var(--relieve) !important}
/* El chip de filtro es una tecla en reposo —superficie, hilo y canto— y se
   hunde 1 px al pulsarlo. El ELEGIDO sigue tiñéndose (decisión de Samuel del
   22 sep 2026): el relleno de tinta del manual no reabre esa decisión. */
html[data-sin-tema] .amr-chip{border-color:var(--hairline);background:var(--surface);box-shadow:var(--relieve);
  transition:background-color var(--amr-dur-fast),color var(--amr-dur-fast),border-color var(--amr-dur-fast),box-shadow var(--amr-dur-fast),transform var(--amr-dur) var(--amr-ease-press)}
html[data-sin-tema] .amr-chip:is(.on,.is-on,.is-active,[aria-pressed="true"]){background:var(--chip);border-color:color-mix(in srgb,var(--gold) 45%,transparent);box-shadow:none}
/* El velo, sin desenfoque (manual §6 «Hoja y ventana»): ya dice «esto está
   detrás», y difuminar cuesta en cada fotograma. */
html[data-sin-tema] :is(.modal-back, .pk-back, .ui-modal-backdrop, .mback, .modal-bd, .modal-overlay, .sheet-bg,
    .modal:has(> .modal-card), .overlay:has(> .panel[role="dialog"])){-webkit-backdrop-filter:none;backdrop-filter:none}
/* La fila que se va se cierra acelerando y se apaga un poco antes. */
/* (Con los tiempos y las curvas por separado: la propiedad y su lista siguen
   siendo las de anim.css, en el mismo orden —alto, opacidad—.) */
html[data-sin-tema] .amr-colapsa{transition-duration:var(--amr-dur), var(--amr-dur-fast); transition-timing-function:var(--amr-ease-sale,ease), linear}
/* La lista que carga RESPIRA en vez de barrerse: un brillo que cruza es «algo
   pasa por encima»; una respiración es «esto se está llenando». */
html[data-sin-tema] .amr-cargando .ui-skel::after{display:none}
/* La ventana de confirmar y la del kit: el velo se va acelerando; la tarjeta
   llega de 10 px con resorte y sin encoger. */
html[data-sin-tema] .ui-modal-backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-sin-tema] .ui-modal{transform:translateY(10px)}
html[data-sin-tema] .ui-modal-backdrop.is-open .ui-modal{transform:none}

/* «¿Seguro?» (amrConfirmar): el velo se va acelerando y la tarjeta llega de
   10 px con resorte, sin encoger. Sus reglas de siempre las inyecta theme.js. */
html[data-sin-tema] .amr-cfm{transition:opacity var(--amr-dur-fast,.14s) var(--amr-ease-sale,ease)}
html[data-sin-tema] .amr-cfm.abierto{transition:opacity var(--amr-dur,.22s) var(--amr-ease-out,ease)}
html[data-sin-tema] .amr-cfm-caja{opacity:0;transform:translateY(10px);
  transition:opacity calc(var(--amr-dur-fast,.14s) * 1.2) var(--amr-ease-sale,ease),transform calc(var(--amr-dur-fast,.14s) * 1.2) var(--amr-ease-sale,ease)}
html[data-sin-tema] .amr-cfm.abierto .amr-cfm-caja{opacity:1;transform:none;
  transition:opacity var(--amr-dur,.22s) linear,transform var(--amr-dur-lento,.34s) var(--amr-ease-spring,ease)}

/* ══ 6 bis. LO QUE SE DESPLIEGA Y EL TIRAR PARA RECARGAR ═══════════════════ */
/* «Ver más» se abre con la curva «suave» y su flecha gira con resorte. */
html[data-sin-tema] .exp-extra{transition-duration:var(--amr-dur-enter, .3s)}   /* la propiedad y la curva, las de expandible.css */
html[data-sin-tema] .exp-mas svg{transition:transform var(--amr-dur-enter, .3s) var(--amr-ease-spring, ease)}
/* Tirar para recargar (manual §6): mientras se tira, las cuatro teclas
   aparecen una a una en el sentido del reloj —cuánto falta se VE— con su
   resorte; al soltar, ondean mientras recarga. Mientras se arrastra, sin
   transición: sigue al dedo. El mosaico solo lo monta app-ios.js en el base. */
.ios-ptr .amr-mosaico{--m:7px}
.ios-ptr .amr-mosaico i{transform:scale(0); transition:transform var(--amr-dur-enter,.3s) var(--amr-ease-spring,ease)}
.ios-ptr .amr-mosaico i.ve{transform:none}
.ios-ptr:has(.amr-mosaico){transition:opacity var(--amr-dur-fast,.14s) linear, transform var(--amr-dur-lento,.34s) var(--amr-ease-spring,ease)}
.ios-ptr.arrastra{transition:opacity var(--amr-dur-fast,.14s) linear}

/* ══ 7. EL MOVIMIENTO, solo para quien no pidió menos ════════════════════════ */
@media (prefers-reduced-motion: no-preference){
  /* El mosaico ondea en el sentido del reloj; el anillo del botón se retira. */
  html[data-sin-tema] .amr-spin.amr-mosaico{animation:none}
  .amr-spin.amr-mosaico i,
  .amr-mosaico--ola i{animation:brj-mini-ola calc(var(--amr-dur-lento) * 3.24) var(--amr-ease-out) infinite; animation-delay:calc(var(--k) * 140ms)}
  .amr-espera--otro .amr-mosaico .lf{animation:brj-piloto calc(var(--amr-dur-lento) * 7.65) ease-in-out infinite}

  /* Las filas de «ver más» llegan detrás, una tras otra (35 ms), bajando 4 px;
     al cerrar se apagan juntas y deprisa. */
  html[data-sin-tema] .exp-extra > * > *{transform:translateY(-4px);
    transition:opacity var(--amr-dur-fast, .14s) linear, transform var(--amr-dur-fast, .14s) var(--amr-ease-sale, ease)}
  html[data-sin-tema] .exp-extra[data-abierta="1"] > * > *{transform:none;
    transition:opacity var(--amr-dur, .22s) linear, transform var(--amr-dur-enter, .3s) var(--amr-ease-out, ease)}
  html[data-sin-tema] .exp-extra[data-abierta="1"] > * > :nth-child(2){transition-delay:35ms}
  html[data-sin-tema] .exp-extra[data-abierta="1"] > * > :nth-child(3){transition-delay:70ms}
  html[data-sin-tema] .exp-extra[data-abierta="1"] > * > :nth-child(4){transition-delay:105ms}
  html[data-sin-tema] .exp-extra[data-abierta="1"] > * > :nth-child(n+5){transition-delay:140ms}
  /* El mosaico del tirar para recargar, ondeando. */
  .ios-ptr.spin .amr-mosaico i{animation:brj-mini-ola calc(var(--amr-dur-lento,.34s) * 2.94) var(--amr-ease-out,ease) infinite; animation-delay:calc(var(--k) * 130ms)}

  /* «Hecho». */
  .amr-hecho:has(.amr-hecho-caja){animation:brj-hecho-entra var(--amr-dur-fast) var(--amr-ease-out) backwards}
  .amr-hecho-tecla{background:var(--apagado,color-mix(in srgb,var(--ink) 12%,var(--bg))); animation:brj-hecho-tecla var(--amr-dur-lento) var(--amr-ease-spring) both}
  .amr-hecho-tecla .luz{transform-origin:bottom; animation:brj-hecho-luz var(--amr-dur-enter) var(--amr-ease-out) calc(var(--amr-dur-fast) * .5) backwards}
  .amr-hecho .amr-hecho-caja path{stroke-dasharray:1; animation:brj-hecho-traza var(--amr-dur) var(--amr-ease-out) var(--amr-dur) backwards}
  .amr-hecho-chispas i{animation:brj-hecho-salida calc(var(--amr-dur-lento) * 1.82) var(--amr-ease-out) both; animation-delay:calc(var(--amr-dur) * .9 + var(--k) * 18ms)}

  /* El odómetro. */
  .amr-dig > b{animation:brj-dig-entra var(--amr-dur-lento) var(--amr-ease-spring) both}
  .amr-dig[data-antes]::before{content:attr(data-antes);position:absolute;left:0;top:0;
    animation:brj-dig-sale var(--amr-dur-lento) var(--amr-ease-spring) both}

  /* El aviso: la hoja se llena al llegar. */
  html[data-sin-tema] .show > .amr-toast-ic::after{animation:brj-toast-hoja var(--amr-dur-enter) var(--amr-ease-out) var(--amr-dur) backwards}

  /* Las siluetas respiran en cascada, 120 ms por fila. */
  html[data-sin-tema] .amr-cargando .ui-skel-line{animation:brj-respira calc(var(--amr-dur-lento) * 4.7) ease-in-out infinite}
  html[data-sin-tema] .amr-cargando .ui-skel:nth-child(10n+2) .ui-skel-line{animation-delay:120ms}
  html[data-sin-tema] .amr-cargando .ui-skel:nth-child(10n+3) .ui-skel-line{animation-delay:240ms}
  html[data-sin-tema] .amr-cargando .ui-skel:nth-child(10n+4) .ui-skel-line{animation-delay:360ms}
  html[data-sin-tema] .amr-cargando .ui-skel:nth-child(10n+5) .ui-skel-line{animation-delay:480ms}
  html[data-sin-tema] .amr-cargando .ui-skel:nth-child(10n+6) .ui-skel-line{animation-delay:600ms}
  html[data-sin-tema] .amr-cargando .ui-skel:nth-child(10n+7) .ui-skel-line{animation-delay:720ms}
  html[data-sin-tema] .amr-cargando .ui-skel:nth-child(10n+8) .ui-skel-line{animation-delay:840ms}
  html[data-sin-tema] .amr-cargando .ui-skel:nth-child(10n+9) .ui-skel-line{animation-delay:960ms}
  html[data-sin-tema] .amr-cargando .ui-skel:nth-child(10n) .ui-skel-line{animation-delay:1080ms}

  /* El cambio de pantalla: la que se va solo se apaga, rápido y acelerando;
     la que llega sube 10 px con la curva «suave», un poco después. */
  html[data-sin-tema]::view-transition-old(root){animation:brj-vt-out var(--amr-dur-fast) var(--amr-ease-sale) both}
  html[data-sin-tema]::view-transition-new(root){animation:brj-vt-in var(--amr-dur-lento) var(--amr-ease-out) calc(var(--amr-dur-fast) * .6) both}
  html[data-sin-tema][data-amr-nav="back"]::view-transition-new(root){animation-name:brj-vt-in-back}
  html[data-sin-tema][data-amr-nav="back"]::view-transition-old(root){animation-name:brj-vt-out}
  html[data-sin-tema] main{animation:brj-enter var(--amr-dur-enter) var(--amr-ease-out) both}

  /* LA TECLA DEL MANUAL (§6 «Botón»): el estado viaja con el resorte «vivo»,
     al pasar sube 1 px —una tecla se asoma, no salta— y al pulsar se hunde
     1 px en 70 ms: el dedo no espera. */
  html[data-sin-tema] :is(button, .btn, [role="button"], .card){
    transition:transform var(--amr-dur) var(--amr-ease-press), box-shadow var(--amr-dur) var(--amr-ease-press)}
  @media (hover:hover){html[data-sin-tema] :is(button,.btn,[role="button"]):hover{transform:translateY(-1px)}}
  html[data-sin-tema] :is(button, .btn, [role="button"], .card):active{transform:translateY(1px); transition-duration:70ms}
  html[data-sin-tema] :is(.card, .kpi, .hub-card, .kpi-card, .route-card, .m-card, .archived-route, .order,
    .order-compact, .psl-item, .notif-item):active{transform:translateY(1px); transition:transform 70ms var(--amr-ease-press, ease)}
  /* El chip no sube al pasar: se hunde al pulsar. */
  html[data-sin-tema] .amr-chip:active{transform:translateY(1px)}

  /* La escalera del manual: 45 ms de paso y para en la sexta fila (225 ms).
     De la séptima en adelante entran con ella — quien busca la fila 40 no
     espera por una animación. La fila llega de 8 px, sin encoger. */
  html[data-sin-tema] [data-amr-stagger] > *{animation-name:brj-cascade}
  html[data-sin-tema] [data-amr-stagger] > *:nth-child(2){animation-delay:45ms}
  html[data-sin-tema] [data-amr-stagger] > *:nth-child(3){animation-delay:90ms}
  html[data-sin-tema] [data-amr-stagger] > *:nth-child(4){animation-delay:135ms}
  html[data-sin-tema] [data-amr-stagger] > *:nth-child(5){animation-delay:180ms}
  html[data-sin-tema] [data-amr-stagger] > *:nth-child(n+6){animation-delay:225ms}

  /* La ventana: la tarjeta llega con resorte. */
  html[data-sin-tema] .ui-modal-backdrop{transition:opacity var(--amr-dur-fast) var(--amr-ease-sale)}
  html[data-sin-tema] .ui-modal-backdrop.is-open{transition:opacity var(--amr-dur) var(--amr-ease-out)}
  html[data-sin-tema] .ui-modal{transition:transform var(--amr-dur-fast) var(--amr-ease-sale), opacity var(--amr-dur-fast) linear}
  html[data-sin-tema] .ui-modal-backdrop.is-open .ui-modal{transition:transform var(--amr-dur-lento) var(--amr-ease-spring), opacity var(--amr-dur) linear}
}
@keyframes brj-enter{ from{ transform:translateY(var(--amr-rise)) } to{ transform:none } }
@keyframes brj-cascade{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
@keyframes brj-vt-out{ from{ opacity:1 } to{ opacity:0 } }
@keyframes brj-vt-in{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
@keyframes brj-vt-in-back{ from{ opacity:0; transform:translateY(-10px) } to{ opacity:1; transform:none } }

/* ═══════════════════════════════════════════════════════════════════════════
   FASE 1 · EL CASCARÓN — las piezas del manual (§8 «Componentes») sobre las
   clases que el portal ya usa. El censo de dónde vive cada una está en
   docs/arquitectura/REDISENO.md. Todo bajo `html[data-sin-tema]`.
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-sin-tema]{
  /* La tecla del manual: el hilo que la dibuja, el canto y una sombra corta. */
  --sombra-tecla:inset 0 0 0 1px var(--hairline), var(--relieve);
  --hundido-campo:inset 0 0 0 1px var(--hairline), inset 0 1px 2px var(--sombra-hundido);
  --anillo:inset 0 0 0 2px var(--gold);
}
/* El fondo es plano: el oleaje es de Amoramar. */
html[data-sin-tema] body{background:var(--bg)}

/* ── La barra de arriba, minimalista (11 oct 2026, orden de Samuel) ───────
   «el logo de la Brújula en el centro junto con el nombre de la página, más
   angosta, sin el botón de Inicio, más minimalista para que la información
   de la página tenga más protagonismo». Antes (§9): «← Inicio | Título ·
   acciones» de izquierda a derecha, 54 px, y la marca escondida.

   Ahora: el LOGO —que ya pinta theme.js dentro de `.brand-name` y que es el
   enlace al Inicio— y el nombre de la pantalla, juntos y centrados; las
   acciones al fondo. 44 px en escritorio. Sólida, con su hilo y sin vidrio.

   Lo que se va es el «← Inicio» y SOLO él (por su destino, `index.html`):
   volver al Inicio es tocar el logo. Un retorno con otro destino —«← Actividad»
   de Compras y Restaurantes, «← Rutas»— es navegación de la pantalla y se queda.
   Como ese enlace es a veces hijo directo de la barra, las tres casillas van
   con su columna fija: sin eso, al esconderlo el título caería a la izquierda. */
/* Y FLOTA (13 oct 2026, orden de Samuel: «prefiero que el header sea limpio
   sin necesidad de tener una separación visual. Que se vea el logo y los otros
   botones como flotando»). La barra lleva el MISMO color que la página y ningún
   hilo: lo que se ve son el logo, el título y los botones sobre la página. Sigue
   siendo opaca a propósito —el contenido que pasa por debajo no se cruza con el
   logo— y el borde de abajo, cuando hay algo debajo, es un fundido al color de
   la página (`::after`), no una línea. El fundido solo aparece al desplazar la
   página (línea de tiempo del desplazamiento): arriba del todo no hay nada que
   fundir y taparía el primer renglón. Donde el navegador no sabe animar con el
   desplazamiento, no hay fundido y el corte es contra el mismo color: se lee. */
html[data-sin-tema] :is(.topbar,.ui-topbar,.brujula-topbar){
  background:var(--bg);border-bottom:0;box-shadow:none;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  display:grid !important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;align-items:center;
  gap:var(--space-3);min-height:44px;padding-top:calc(env(safe-area-inset-top,0px) + var(--space-4));padding-bottom:var(--space-1)}
/* Con aire (13 oct 2026, Samuel: «el header lo veo muy compacto, me gusta que
   tenga un poco más de aire»): sin franja que la marque, la barra se lee por el
   espacio que la rodea. El aire va ARRIBA (16 px en escritorio, 12 en el teléfono) y casi nada
   abajo (4 px): el contenido ya trae su propio margen, y con aire también abajo la
   información quedaba lejos de la barra (Samuel: «mucha distancia con respecto al
   header»). Del logo al contenido queda la misma distancia de antes. */
html[data-sin-tema] :is(.topbar,.ui-topbar,.brujula-topbar) > *{grid-row:1}
/* La capa móvil le pone vidrio y su hilo al desplazar; aquí tampoco. */
html[data-sin-tema] body.ios-app.ios-mod.ios-scrolled :is(.topbar,.ui-topbar,.brujula-topbar){
  background:var(--bg) !important;border-bottom-color:transparent !important;box-shadow:none !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important}
@keyframes brj-barra-funde{ to{ opacity:1 } }
@supports (animation-timeline:scroll()){
  html[data-sin-tema] :is(.topbar,.ui-topbar,.brujula-topbar)::after{
    content:"";position:absolute;left:0;right:0;top:100%;height:var(--space-5);pointer-events:none;
    background:linear-gradient(var(--bg),transparent);opacity:0;
    animation:brj-barra-funde linear both;animation-timeline:scroll(root block);animation-range:0 var(--space-8)}
}
html[data-sin-tema] :is(.topbar,.ui-topbar,.brujula-topbar) > :first-child{grid-column:1;justify-self:start}
html[data-sin-tema] :is(.topbar > .brand-center,.ui-topbar > .ui-brand-center,.brujula-topbar > .bt-center){grid-column:2;justify-self:center !important;
  display:flex;align-items:center;gap:var(--space-3);min-width:0;margin:0}
html[data-sin-tema] :is(.topbar,.ui-topbar,.brujula-topbar) > :last-child:not(.brand-center,.ui-brand-center,.bt-center){grid-column:3;justify-self:end !important;margin-left:0}
/* Etiquetas fija su barra a 64 px y su lado derecho no es flex. */
html[data-sin-tema] .brujula-topbar{height:auto}
html[data-sin-tema] .brujula-topbar .bt-right{display:flex;align-items:center;gap:var(--space-2)}
/* El botón de Inicio, fuera. */
html[data-sin-tema] :is(.topbar,.ui-topbar,.brujula-topbar) :is(a.brand-back,a.ui-brand-back,a.bt-back)[href$="index.html"]{display:none !important}
/* El logo se queda en las dos medidas (anim.css y la capa móvil lo esconden con
   !important) y el separador va en hilo, no en el acento. */
html[data-sin-tema] body :is(.topbar .brand-name,.ui-topbar .ui-brand-name,.brujula-topbar .bt-brand){display:inline-flex !important;flex:none}
/* La palabra BRÚJULA, a la altura del símbolo y del título (13 oct 2026,
   Samuel: «el logo no parece estar alineado verticalmente con el nombre de cada
   página»). Medido: el logo centra la CAJA de la palabra, y Syne guarda más
   aire abajo que arriba, así que las mayúsculas quedaban ~1,7 px por encima del
   centro del símbolo y su línea de base 2 px por encima de la del título. Se
   recorta la caja a la altura de las mayúsculas: entonces centrar la caja es
   centrar las letras. Solo en las barras: el Inicio ya la compensa con lo suyo.
   Donde `text-box` no exista, queda como estaba. */
html[data-sin-tema] :is(.topbar,.ui-topbar,.brujula-topbar) .amr-base-nombre{text-box:trim-both cap alphabetic}
/* Y el logo entero baja 1 px: así BRÚJULA y el nombre de la pantalla se apoyan
   en la MISMA línea de base (13 oct 2026, Samuel eligió la opción 3 sobre una
   cuadrícula de 1 px; centrados, la base de BRÚJULA quedaba 1 px por encima). */
html[data-sin-tema] :is(.topbar,.ui-topbar,.brujula-topbar) .amr-base-logo{transform:translateY(1px)}
html[data-sin-tema] body :is(.topbar .brand-sep,.ui-topbar .ui-brand-sep,.brujula-topbar .bt-sep){display:block !important;width:1px;height:16px;
  background:var(--hairline) !important;opacity:1}
html[data-sin-tema] :is(.topbar .brand-back,.ui-topbar .ui-brand-back,.brujula-topbar .bt-back){
  display:inline-flex;align-items:center;gap:6px;font-size:var(--text-nota);font-weight:var(--weight-medium,500);
  letter-spacing:0;text-transform:none;color:var(--muted)}
html[data-sin-tema] :is(.topbar .brand-sub,.ui-topbar .ui-brand-sub,.brujula-topbar .bt-sub){
  font-size:var(--text-apoyo);font-weight:var(--weight-semibold,600);letter-spacing:-.01em;text-transform:none;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
html[data-sin-tema] :is(.topbar .theme-toggle,.ui-topbar .ui-theme-toggle,.brujula-topbar .bt-toggle){
  border:0;background:transparent;color:var(--muted);box-shadow:none;width:32px;height:32px}
@media (hover:hover){
  html[data-sin-tema] :is(.topbar .theme-toggle,.ui-topbar .ui-theme-toggle,.brujula-topbar .bt-toggle):hover{background:var(--surface-sunken);color:var(--ink);border:0}
  html[data-sin-tema] :is(.topbar .brand-back,.ui-topbar .ui-brand-back,.brujula-topbar .bt-back):hover{color:var(--ink)}
  html[data-sin-tema] :is(.topbar a.brand-name,.ui-topbar a.ui-brand-name,.brujula-topbar a.bt-brand):hover{opacity:.75}
}
/* En el teléfono el símbolo solo: la palabra BRÚJULA no cabe junto al título. */
@media screen and (max-width:760px){
  html[data-sin-tema] :is(.topbar,.ui-topbar,.brujula-topbar){min-height:44px;gap:var(--space-2);padding-top:calc(env(safe-area-inset-top,0px) + var(--space-3));padding-bottom:var(--space-1)}
  html[data-sin-tema] :is(.topbar,.ui-topbar,.brujula-topbar) .amr-base-nombre{display:none}
  html[data-sin-tema] :is(.topbar .brand-center,.ui-topbar .ui-brand-center,.brujula-topbar .bt-center){gap:var(--space-2);max-width:70vw}
  html[data-sin-tema] body :is(.topbar .brand-sub,.ui-topbar .ui-brand-sub,.brujula-topbar .bt-sub){font-size:16px !important;max-width:none}
  html[data-sin-tema] :is(.topbar .theme-toggle,.brujula-topbar .bt-toggle){width:40px !important;height:40px !important}
}

/* ── Botones (§8 «Botones») ─────────────────────────────────────────────────
   Una tecla: sin contorno, dibujada por su hilo y su canto. El primario es el
   acento con su canto oscuro, UNO por pantalla; lo destructivo nunca es azul. */
html[data-sin-tema] :is(.btn,.ui-btn){border:0;background:var(--surface-raised);color:var(--ink);box-shadow:var(--sombra-tecla);
  font-weight:var(--weight-medium,500);font-size:var(--text-apoyo);padding:0 14px;gap:var(--space-2)}
html[data-sin-tema] :is(.btn.primary,.btn.main,.btn.btn-primary,.ui-btn:not(.ui-btn--ghost,.ui-btn--danger),.btn-new){
  background:var(--gold);color:var(--on-gold);box-shadow:var(--relieve-primario)}
html[data-sin-tema] :is(.btn.ghost,.btn.btn-ghost,.ui-btn--ghost){background:transparent;color:var(--muted);box-shadow:none}
html[data-sin-tema] :is(.btn.danger,.btn.warn,.ui-btn--danger,.btn.peligro,.btn.danger.armed){background:transparent;color:var(--danger);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--danger) 40%,transparent)}
html[data-sin-tema] :is(.btn.sm,.ui-btn--sm){min-height:30px;padding:0 11px;font-size:var(--text-nota);gap:6px}
html[data-sin-tema] .btn.ico{padding:0}
html[data-sin-tema] :is(.btn,.ui-btn):active:not(:disabled,[disabled]){box-shadow:inset 0 0 0 1px var(--hairline)}
html[data-sin-tema] :is(.btn.primary,.btn.main,.btn.btn-primary,.ui-btn:not(.ui-btn--ghost,.ui-btn--danger)):active:not(:disabled,[disabled]){box-shadow:none}
html[data-sin-tema] :is(.btn,.ui-btn):is(:disabled,[disabled]){opacity:.45;box-shadow:inset 0 0 0 1px var(--hairline)}
@media (hover:hover){
  html[data-sin-tema] :is(.btn,.ui-btn):hover:not(:disabled,[disabled]){border:0;background:var(--surface-raised);color:var(--ink);filter:none}
  html[data-sin-tema] :is(.btn.primary,.btn.main,.btn.btn-primary,.ui-btn:not(.ui-btn--ghost,.ui-btn--danger),.btn-new):hover:not(:disabled,[disabled]){
    background:color-mix(in srgb,var(--gold) 92%,#000);color:var(--on-gold);box-shadow:var(--relieve-primario)}
  html[data-sin-tema] :is(.btn.ghost,.btn.btn-ghost,.ui-btn--ghost):hover:not(:disabled,[disabled]){background:var(--surface-sunken);color:var(--ink)}
  html[data-sin-tema] :is(.btn.danger,.btn.warn,.ui-btn--danger,.btn.peligro):hover:not(:disabled,[disabled]){
    background:color-mix(in srgb,var(--danger) 8%,transparent);color:var(--danger)}
}

/* ── Pestañas (§8 «Selección»: el segmentado) ──────────────────────────────
   Una bandeja con su hilo; la elegida es una tecla dentro. */
html[data-sin-tema] .amr-seg{padding:3px;gap:0;border-radius:10px;background:var(--surface-sunken);box-shadow:inset 0 0 0 1px var(--hairline)}
html[data-sin-tema] .amr-seg > :where(button,a){min-height:28px;padding:0 12px;border-radius:7px;font-size:var(--text-nota);font-weight:var(--weight-medium,500);letter-spacing:0}
html[data-sin-tema] :is(.amr-seg-pieza,.amr-seg:not(.amr-seg-lista) > :is(.on,.active,.is-on,.is-active,[aria-selected="true"],[aria-pressed="true"])){
  border-radius:7px;background:var(--surface-raised);box-shadow:var(--relieve-pieza)}
html[data-sin-tema] .amr-seg .amr-seg-n{font-family:var(--font-mono-marca);font-weight:var(--weight-medium,500);background:transparent;color:var(--meta);padding:0 2px;min-width:0}
html[data-sin-tema] .amr-seg > :is(.on,.active,.is-on,.is-active,[aria-selected="true"],[aria-pressed="true"]) .amr-seg-n{background:transparent;color:var(--muted)}

/* ── Chips de filtro (§8 «Selección») ─────────────────────────────────────
   Teclas en píldora; la elegida se rellena de TINTA, como en el manual. */
html[data-sin-tema] :is(.amr-chip,.lista-trabajo .chip,.lista-trabajo .act-tipo){height:30px;padding:0 12px;gap:6px;border:0;
  background:var(--surface-raised);color:var(--muted);box-shadow:var(--sombra-tecla);font-size:var(--text-nota);font-weight:var(--weight-medium,500)}
html[data-sin-tema] :is(.amr-chip,.lista-trabajo .act-tipo) :is(.n,.amr-chip-n){background:transparent;border:0;padding:0;min-width:0;
  font-family:var(--font-mono-marca);font-size:var(--text-mini);font-weight:var(--weight-medium,500);color:var(--meta)}
html[data-sin-tema] :is(.amr-chip:is(.on,.is-on,.is-active,[aria-pressed="true"]),.lista-trabajo :is(.chip,.act-tipo).on){
  background:var(--ink);color:var(--bg);box-shadow:none}
html[data-sin-tema] :is(.amr-chip:is(.on,.is-on,.is-active,[aria-pressed="true"]),.lista-trabajo .act-tipo.on) :is(.n,.amr-chip-n){background:transparent;color:inherit;opacity:.7}

/* ── Estados (§8 «Estados y avisos»): el punto y la palabra, teñidos. ────── */
html[data-sin-tema] .amr-estado{height:22px;padding:0 9px;gap:6px;font-size:var(--text-mini);font-weight:var(--weight-medium,500);letter-spacing:0;
  background:color-mix(in srgb,var(--tono) 12%,transparent)}

/* ── Campos (§8 «Campos») ─────────────────────────────────────────────────
   Hundidos: el hilo por dentro y una sombra corta; al escribir, el anillo del
   acento, también por dentro (no mueve nada). */
html[data-sin-tema] :is(.fld,.ff,.field,.pk-fld,.campo,.am-field,.mfld,.tb-fld,.asf-field,.es-f,.cfg-field,.msg-campo,.re-grid,.ui-field) :is(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=hidden]),select,textarea),
html[data-sin-tema] .ui-input{
  min-height:38px;border:0;background-color:var(--surface);box-shadow:var(--hundido-campo);font-size:var(--text-base,14px)}
html[data-sin-tema] :is(.fld,.ff,.field,.pk-fld,.campo,.am-field,.mfld,.tb-fld,.asf-field,.es-f,.cfg-field,.msg-campo,.re-grid,.ui-field) :is(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=hidden]),select,textarea):focus,
html[data-sin-tema] .ui-input:focus{outline:none;box-shadow:var(--anillo)}
html[data-sin-tema] :is(.fld,.ff,.field,.pk-fld,.campo,.am-field,.mfld,.tb-fld,.asf-field,.es-f,.cfg-field,.msg-campo,.re-grid,.ui-field) :is(input,select,textarea)[aria-invalid="true"]{
  box-shadow:inset 0 0 0 1.5px var(--danger);background-color:var(--surface)}
html[data-sin-tema] :is(.fld,.ff,.field,.pk-fld,.campo,.am-field,.mfld,.ui-field) > label,
html[data-sin-tema] :is(.fld,.ff,.field,.pk-fld,.campo,.am-field,.mfld) > span:first-child{
  font-size:var(--text-apoyo);font-weight:var(--weight-medium,500);letter-spacing:0;text-transform:none;color:var(--ink)}
/* Los buscadores de las listas: el mismo campo, con su lupa. */
html[data-sin-tema] :is(.rap-busca,.fsearch) input{border:0;background-color:var(--surface);box-shadow:var(--hundido-campo);border-radius:var(--radius-sm)}
html[data-sin-tema] :is(.rap-busca,.fsearch) input:focus{outline:none;box-shadow:var(--anillo)}

/* ── Casillas e interruptores (§8 «Selección») ──────────────────────────── */
html[data-sin-tema] input[type="checkbox"]:not([role="switch"]){appearance:none;-webkit-appearance:none;flex:none;
  width:18px;height:18px;margin:0;border-radius:5px;background:var(--surface-raised);box-shadow:inset 0 0 0 1.5px var(--canto);
  display:inline-grid;place-content:center;cursor:pointer;vertical-align:middle;
  transition:background-color var(--amr-dur-fast) linear,box-shadow var(--amr-dur-fast) linear}
html[data-sin-tema] input[type="checkbox"]:not([role="switch"])::after{content:"";width:9px;height:5px;margin-top:-2px;
  border:solid var(--on-gold);border-width:0 0 2px 2px;transform:rotate(-45deg) scale(0);transition:transform var(--amr-dur-fast) var(--amr-ease-press)}
html[data-sin-tema] input[type="checkbox"]:not([role="switch"]):checked{background:var(--gold);box-shadow:none}
html[data-sin-tema] input[type="checkbox"]:not([role="switch"]):checked::after{transform:rotate(-45deg) scale(1)}
html[data-sin-tema] input[type="checkbox"]:not([role="switch"]):focus-visible{outline:2px solid var(--gold);outline-offset:2px}
html[data-sin-tema] :is(.switch-tr, .switch .track, .notif-switch-track, .lp-switch span, .venc-switch-slider){background:var(--apagado) !important;box-shadow:none !important}

/* ── Superficies (§8 «Superficies») ───────────────────────────────────────
   Un panel es la superficie con su hilo; una tarjeta que se toca, una tecla. */
html[data-sin-tema] .panel{background:var(--surface);border:0;border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px var(--hairline)}
html[data-sin-tema] :is(.kpi,.kpi-card){background:var(--surface-raised);border:0;border-radius:var(--radius-md);box-shadow:var(--sombra-tecla)}

/* ── Ventanas (§8 «Diálogo») ──────────────────────────────────────────────── */
html[data-sin-tema] :is(.modal-back > .modal, .pk-back .pk-card, .ui-modal-backdrop .ui-modal, .mback > .modal, .modal-bd > .modal,
    .modal > .modal-card, .modal-overlay > .modal-card, .sheet-panel, .overlay > .panel[role="dialog"], .amr-cfm-caja){
  background:var(--surface-raised);border:0;border-radius:var(--radius-panel);
  box-shadow:var(--elev-dialogo)}

/* ── El aviso (§8 «Toast»): oscuro en los dos modos, con la marca de color. */
html[data-sin-tema] :is(.toast,.ui-toast,.amr-toast){border-radius:var(--radius-md);background:var(--aviso-fondo);color:var(--aviso-tinta);border:0;
  font-weight:var(--weight-medium,500);box-shadow:var(--elev-toast)}

/* ── Vacío (§8 «Vacío»): una bandeja que dice qué hacer. ────────────────── */
html[data-sin-tema] .ui-state{background:var(--surface-sunken);border:0;border-radius:var(--radius-md);box-shadow:none}
html[data-sin-tema] .ui-state-ic{color:var(--meta);background:transparent;box-shadow:none}
html[data-sin-tema] .ui-state-title{font-family:var(--font-sans);font-size:var(--text-base,14px);font-weight:var(--weight-semibold,600);letter-spacing:-.01em;color:var(--ink)}
html[data-sin-tema] .ui-state-sub{font-size:var(--text-nota);color:var(--muted)}

/* ── La tabla de las listas de trabajo (§8 «Tabla», §9.2 «Actividad») ─────
   UN panel con su hilo y las filas separadas por una línea —no una tarjeta por
   fila—, la cabecera en la bandeja con rótulos en mono. La fila no sube al
   pasar: se aclara. Los ANCHOS siguen siendo de cada pantalla. */
html[data-sin-tema] .lista-trabajo .panel{padding:0;border:0;border-radius:var(--radius-md);background:var(--surface);box-shadow:inset 0 0 0 1px var(--hairline)}
html[data-sin-tema] .lista-trabajo .thead{min-height:36px;padding:0 16px;background:var(--surface-sunken);border-bottom:1px solid var(--hairline)}
html[data-sin-tema] .lista-trabajo .thead span{font-family:var(--font-mono-marca);font-size:var(--text-micro);font-weight:var(--weight-medium,500);letter-spacing:.06em;color:var(--meta)}
html[data-sin-tema] .lista-trabajo .tbody{gap:0}
/* `flex-shrink:0`: la lista es una columna flex de alto fijo, y un min-height
   escrito sustituye al automático —el que impedía encoger la fila por debajo de
   su contenido—. Sin esto, con muchas filas, cada una se aplastaba a 50 px y la
   fecha caía encima de la siguiente (medido en el teléfono, fase 5). */
html[data-sin-tema] .lista-trabajo .trow{flex-shrink:0;min-height:50px;padding:8px 16px;background:transparent;border:0;border-top:1px solid var(--hairline);border-radius:0}
html[data-sin-tema] .lista-trabajo .tbody > .trow:first-child{border-top:0}
@media (hover:hover){
  html[data-sin-tema] .lista-trabajo .trow:hover{transform:none;border-color:var(--hairline);background:color-mix(in srgb,var(--surface-sunken) 60%,transparent)}
}
@media (min-width:900px) and (min-height:620px){
  html[data-sin-tema] .lista-trabajo[data-fija] .thead{padding-right:calc(16px + 6px)}
}

/* ── La barra de abajo del teléfono (§9.5 «En el bolsillo») ───────────────
   La del manual: sólida, a lo ancho, pegada al borde con su hilo arriba, sin
   vidrio ni cápsula; lo elegido va en el acento, sin píldora. Sigue siendo
   SOLO ICONOS (decisión de Samuel del 28 ago 2026: los nombres se cortaban),
   con el nombre para el lector de pantalla. */
@media (max-width:760px){
  html[data-sin-tema]{--amr-bar-hueco:calc(64px + var(--safe-bottom, 0px))}
  html[data-sin-tema] .amr-bar{left:0;right:0;bottom:0;padding:4px 6px calc(4px + var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
    border:0;border-top:1px solid var(--hairline);border-radius:0;background:var(--surface);box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none}
  html[data-sin-tema] .amr-bar :is(a,button){border-radius:var(--radius-sm);color:var(--meta)}
  html[data-sin-tema] .amr-bar .on{background:transparent;color:var(--gold-text)}
  html[data-sin-tema] .amr-bar .amr-bar-punto{border-color:var(--surface)}
  /* La hoja de «Todo»: el menú del manual, sólido. */
  html[data-sin-tema] .amr-bar-panel{background:var(--surface-raised);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ── Lo que es de Amoramar y no de la plataforma: el oleaje del fondo y los
   peces. Con el diseño base no se pintan en ninguna pantalla (el Inicio ya lo
   decía para sí; el acceso y las demás, desde aquí). El fondo del base es el
   mosaico, y el personaje de la marca lo visita (brujula-inicio.js). */
html[data-sin-tema] .amr-bg,
html[data-sin-tema] :is(.amr-fish,.amr-crab,.amr-fishline-cord,.amr-fishline-hook){display:none !important}
/* Y el resplandor del oleaje sobre el `<html>` tampoco: el fondo del base es
   plano (12 oct 2026, Samuel, en la entrada: «el color del fondo debe de ser
   plano»). Se había ido con el retiro de los otros fondos. */
html[data-sin-tema][data-amr-bg]{background-image:none !important}

/* ═══════════════════════════════════════════════════════════════════════════
   FASE 2 · LAS TRES PANTALLAS MÁS USADAS (Restaurantes › Gestión, Rutas
   activas, Compras › Gestión: el 69% de las visitas). Primero lo que COMPARTEN
   —la línea de tiempo, la tarjeta del documento con su control y la columna del
   resumen, que viven en linea-de-tiempo.css y llegan también a Particulares—;
   lo que es de una sola pantalla va en su propio <style>.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── La línea de tiempo: un carril neutro con el punto del estado del día ── */
html[data-sin-tema] .tline::before{left:8px;width:2px;border-radius:1px;background:var(--hairline)}
html[data-sin-tema] .tday-head .tld{left:-21px;top:6px;width:10px;height:10px;border:2px solid var(--bg);background:var(--meta);box-shadow:none}
html[data-sin-tema] .tday.is-today .tday-head .tld{background:var(--gold);box-shadow:0 0 0 3px var(--chip)}
html[data-sin-tema] .tday.is-past .tday-head .tld{background:var(--danger)}
html[data-sin-tema] .tday-pend .tday-head .tld{background:var(--warn);box-shadow:none}
html[data-sin-tema] .tday-title{font-family:var(--font-sans);font-size:var(--text-cuerpo);font-weight:var(--weight-semibold,600);letter-spacing:-.01em}
html[data-sin-tema] .tday.is-today .tday-title{color:var(--ink)}
html[data-sin-tema] :is(.tday-meta,.tgroup-head){font-family:var(--font-mono-marca);font-size:var(--text-micro);font-weight:var(--weight-medium,500);letter-spacing:.06em;color:var(--meta)}
html[data-sin-tema] .tgroup-n{color:var(--muted);font-weight:var(--weight-medium,500)}
/* «Sin cerrar» es un ESTADO: su punto y su palabra, teñidos, sin contorno. */
html[data-sin-tema] .tday-late{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border:0;border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger);font-size:var(--text-mini);font-weight:var(--weight-medium,500);letter-spacing:0;text-transform:none}
html[data-sin-tema] .tday-late::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
html[data-sin-tema] .tday-sum{color:var(--ink);font-weight:var(--weight-semibold,600)}
@media (hover:hover){html[data-sin-tema] .tday-head:hover .tday-chev{color:var(--ink)}}

/* ── La tarjeta del documento: una tecla. No sube al pasar: se marca su hilo. */
html[data-sin-tema] .pcard{background:var(--surface-raised);border:0;border-radius:var(--radius-md);box-shadow:var(--sombra-tecla)}
@media (hover:hover){html[data-sin-tema] .pcard:hover{transform:none;border:0;box-shadow:inset 0 0 0 1px var(--borde-control),var(--relieve)}}
html[data-sin-tema] .pcard-itemswrap{border-top:1px solid var(--hairline)}
html[data-sin-tema] .pitem-txt b{color:var(--ink);font-family:var(--font-mono-marca);font-weight:var(--weight-medium,500)}
html[data-sin-tema] .pitem-obs .code{border:0;background:var(--surface-sunken);color:var(--muted);font-family:var(--font-mono-marca)}
html[data-sin-tema] .pcard .pcard-foot{border-top:1px solid var(--hairline)}
html[data-sin-tema] .pcard .pcard-total b{font-weight:var(--weight-semibold,600)}
/* El control dentro de la tarjeta: una bandeja; el estado lo dice su palabra,
   no el color de todo el panel (manual §8: «el color de estado va en el chip,
   nunca en toda la fila»). */
html[data-sin-tema] .pcard > .ctrl-panel:is(.tone-neutral,.tone-gold,.tone-green,.tone-warn){border:0;background:var(--surface-sunken);box-shadow:inset 0 0 0 1px var(--hairline)}
html[data-sin-tema] .pcard > .ctrl-panel .ctrl-open{border:0;border-radius:var(--radius-sm);font-weight:var(--weight-medium,500);background:var(--gold);color:var(--on-gold);box-shadow:var(--relieve-primario)}
html[data-sin-tema] .pcard > .ctrl-panel .flow-dot{box-shadow:inset 0 0 0 1.5px var(--canto)}
html[data-sin-tema] .pcard .pcard-actions{background:transparent;box-shadow:none}

/* ── La columna del resumen: un panel con su hilo, rótulos en mono. ────────── */
html[data-sin-tema] .stats-panel{background:var(--surface);border:0;border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px var(--hairline)}
html[data-sin-tema] .stats-panel .stats-panel-title{font-family:var(--font-mono-marca);font-size:var(--text-micro);font-weight:var(--weight-medium,500);letter-spacing:.06em;color:var(--meta)}
html[data-sin-tema] .stats-panel .sd-n{font-family:var(--font-mono-marca);font-weight:var(--weight-medium,500);letter-spacing:.06em;color:var(--muted)}
html[data-sin-tema] .stats-panel .stats-rows{background:var(--surface-raised);box-shadow:var(--sombra-tecla);border-radius:var(--radius-sm)}
html[data-sin-tema] .stats-panel .stats-row + .stats-row{border-top-color:var(--hairline)}

/* ── La cabecera de una sección («Entregas 2 ——— Imagen · Excel») ─────────── */
html[data-sin-tema] .sec-title{font-family:var(--font-mono-marca);font-size:var(--text-micro);font-weight:var(--weight-medium,500);letter-spacing:.06em;color:var(--meta)}
html[data-sin-tema] .sec-count{border:0;background:transparent;padding:0;color:var(--meta);font-family:var(--font-mono-marca);font-weight:var(--weight-medium,500)}
html[data-sin-tema] .sec-line{background:var(--hairline)}
/* Exportar (imagen, Excel) y el rango de fechas: botones secundarios pequeños. */
html[data-sin-tema] :is(.btn-xls,.btn-export){height:30px;padding:0 11px;gap:6px;border:0;border-radius:var(--radius-sm);background:var(--surface-raised);color:var(--ink);
  box-shadow:var(--sombra-tecla);font-size:var(--text-nota);font-weight:var(--weight-medium,500);letter-spacing:0}
@media (hover:hover){html[data-sin-tema] :is(.btn-xls,.btn-export):hover{border:0;background:var(--surface-raised);color:var(--ink)}}
html[data-sin-tema] .dr-chip{height:36px;border:0;background:var(--surface-raised);box-shadow:var(--sombra-tecla);font-weight:var(--weight-medium,500)}
/* Las cifras se escriben en tinta y en mono: el acento es para la acción. */
html[data-sin-tema] .stats-panel .stats-qty{color:var(--ink);font-family:var(--font-mono-marca);font-weight:var(--weight-medium,500)}

/* ── Los controles (recepción `.lc`, empacado `.pc`): la hoja del documento ─
   Un solo primario por pantalla (§13): en la hoja es la última acción de su
   pie, la que guarda; «Cancelar» es fantasma. */
html[data-sin-tema] :is(.lc,.pc) .pk-actions .btn:not(.ghost,.btn-ghost,.danger,.peligro):last-child{background:var(--gold);color:var(--on-gold);box-shadow:var(--relieve-primario)}
/* Los productos del documento: chips del manual; el que se mira, relleno de tinta. */
html[data-sin-tema] :is(.lc,.pc) .cfs-chip{height:30px;padding:0 12px;border:0;background:var(--surface-raised);color:var(--muted);box-shadow:var(--sombra-tecla);font-weight:var(--weight-medium,500)}
html[data-sin-tema] :is(.lc,.pc) .cfs-chip:is(.cur,.on,.is-on,.active,[aria-pressed="true"],[aria-selected="true"]){background:var(--ink);color:var(--bg);box-shadow:none}
html[data-sin-tema] :is(.lc,.pc) .pk-card-ctrl .cfs-switch{border-bottom-color:var(--hairline)}
/* El total: una bandeja; la cifra, en tinta. */
html[data-sin-tema] .lc .pk-tot{border:0;background:var(--surface-sunken);box-shadow:inset 0 0 0 1px var(--hairline)}
html[data-sin-tema] .lc .pk-tot .pk-tot-lbl{font-family:var(--font-mono-marca);font-weight:var(--weight-medium,500);letter-spacing:.06em;color:var(--meta)}
html[data-sin-tema] .lc .pk-tot b{color:var(--ink);font-weight:var(--weight-semibold,600)}
/* Añadir una foto: una tecla con su icono y su palabra, en frase. */
html[data-sin-tema] :is(.lc,.pc) .fotogal-add{border:0;background:var(--surface-raised);color:var(--muted);box-shadow:var(--sombra-tecla);
  font-size:var(--text-nota);font-weight:var(--weight-medium,500);letter-spacing:0;text-transform:none}
@media (hover:hover){html[data-sin-tema] :is(.lc,.pc) .fotogal-add:hover{background:var(--surface-raised);color:var(--ink);border:0}}
/* Los filtros del kit (`.ffilter`, un desplegable con su icono): una tecla. */
html[data-sin-tema] .ffilter{height:36px;border:0;background:var(--surface-raised);box-shadow:var(--sombra-tecla)}
html[data-sin-tema] .ffilter:focus-within{border:0;background:var(--surface-raised);box-shadow:var(--anillo)}
html[data-sin-tema] .ffilter.on{border:0;background:var(--chip);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 35%,transparent)}

/* ── Restaurantes › Gestión ─────────────────────────────────────────────── */
/* La hora de entrega es un dato con su estado: teñida, sin contorno; «por
   definir» se queda apagada. */
html[data-sin-tema] .pcard-hora{height:22px;padding:0 9px;border:0;border-radius:var(--radius-pill);background:var(--chip);color:var(--gold-text);
  font-family:var(--font-mono-marca);font-weight:var(--weight-medium,500)}
html[data-sin-tema] .pcard-hora.is-tbd{background:var(--surface-sunken);color:var(--muted);border:0}

/* ── El control de empacado por dentro (y el de recepción, que comparte piezas) */
/* Cada producto es una tecla; el margen y lo que se informa, bandejas. */
html[data-sin-tema] :is(.lc,.pc) .ctrl-prow{border:0;border-radius:var(--radius-md);background:var(--surface-raised);box-shadow:var(--sombra-tecla)}
html[data-sin-tema] :is(.lc,.pc) .mg-tot{border:0;background:var(--surface-sunken);box-shadow:inset 0 0 0 1px var(--hairline)}
html[data-sin-tema] :is(.lc,.pc) :is(.mg-tot-lbl,.ctrl-deliv-lbl){font-family:var(--font-mono-marca);font-weight:var(--weight-medium,500);letter-spacing:.06em;color:var(--meta)}
/* El paso siguiente ya es el primario de la hoja (`.cfs-cta`): «Pesar» en cada
   fila es secundario, pequeño. */
html[data-sin-tema] :is(.lc,.pc) .ctrl-mini{min-height:30px;padding:0 11px;border:0;border-radius:var(--radius-sm);background:var(--surface-raised);color:var(--ink);
  box-shadow:var(--sombra-tecla);font-weight:var(--weight-medium,500)}
html[data-sin-tema] :is(.lc,.pc) .cfs-cta{border:0;border-radius:var(--radius-sm);font-weight:var(--weight-medium,500);letter-spacing:0;box-shadow:var(--relieve-primario)}

/* ── Rutas activas (la pantalla de la calle: se usa sobre todo en el teléfono)
   §9.5: «una ruta en la calle» — la ruta es una tecla con su punto de color;
   el sector es un chip teñido de SU color (identidad), en frase y sin relleno
   macizo; el estado, en mono. */
html[data-sin-tema] .m-card{border:0;background:var(--surface-raised);box-shadow:var(--sombra-tecla)}
html[data-sin-tema] .m-card-active{box-shadow:var(--sombra-tecla),0 0 0 1.5px color-mix(in srgb,var(--card-color,var(--gold)) 45%,transparent)}
html[data-sin-tema] .m-card-done{box-shadow:inset 0 0 0 1px var(--hairline)}
html[data-sin-tema] .m-card:has(.m-card-tap:active){transform:translateY(1px)}
html[data-sin-tema] .m-card-tap:active{background:transparent}
html[data-sin-tema] .m-card-name{font-weight:var(--weight-semibold,600);letter-spacing:-.01em}
html[data-sin-tema] .m-card-status{font-family:var(--font-mono-marca);font-weight:var(--weight-medium,500);letter-spacing:.06em;color:var(--meta)}
html[data-sin-tema] .m-card-active .m-card-status{color:var(--gold-text)}
html[data-sin-tema] .m-card-done .m-card-status{color:var(--ok)}
html[data-sin-tema] .m-section-label{font-family:var(--font-mono-marca);font-weight:var(--weight-medium,500);letter-spacing:.06em;color:var(--meta)}
html[data-sin-tema] :is(.m-chip,.sector-chip),
html[data-sin-tema][data-theme="dark"] :is(.m-chip,.sector-chip){height:22px;display:inline-flex;align-items:center;padding:0 9px;border:0;
  background:color-mix(in srgb,var(--sector-color,var(--muted)) 16%,transparent);color:color-mix(in srgb,var(--sector-color,var(--muted)) 72%,var(--ink));
  font-size:var(--text-mini);font-weight:var(--weight-medium,500);letter-spacing:0;text-transform:none}
@media (prefers-color-scheme:dark){html[data-sin-tema]:not([data-theme="light"]) :is(.m-chip,.sector-chip){color:color-mix(in srgb,var(--sector-color,var(--muted)) 72%,var(--ink));font-weight:var(--weight-medium,500)}}
/* El día que se mira: «Hoy» es un estado teñido del acento; el pasado, apagado. */
html[data-sin-tema] .day-label .day-tag{border:0;border-radius:var(--radius-pill);background:var(--chip);color:var(--gold-text);
  font-family:var(--font-mono-marca);font-weight:var(--weight-medium,500);letter-spacing:.06em}
html[data-sin-tema] .day-label .day-tag.past{background:var(--surface-sunken);color:var(--muted)}
html[data-sin-tema] .day-label .day-tag.future{background:color-mix(in srgb,var(--info) 12%,transparent);color:var(--info)}
/* El MODO ENTREGA (una parada a la vez, en la calle). «Entregado» sigue siendo
   VERDE —la confirmación de la parada, igual en los dos modos— pero plano, en
   frase y con su canto; «Iniciar ruta» es el primario del acento. Sin
   degradados ni halos (manual §3: ningún objeto lleva degradado). */
html[data-sin-tema] .focus-primary{height:52px;border:0;border-radius:var(--radius-sm);background:var(--ok);color:var(--on-ok,#fff);
  font-size:var(--text-guia);font-weight:var(--weight-semibold,600);letter-spacing:0;text-transform:none;box-shadow:var(--relieve-bien)}
@media (hover:hover){html[data-sin-tema] .focus-primary:hover{background:color-mix(in srgb,var(--ok) 92%,#000);border:0}}
html[data-sin-tema] .focus-primary:active{transform:translateY(1px);box-shadow:none}
html[data-sin-tema] .focus-primary.focus-start{background:var(--gold);color:var(--on-gold);box-shadow:var(--relieve-primario)}
@media (hover:hover){html[data-sin-tema] .focus-primary.focus-start:hover{background:color-mix(in srgb,var(--gold) 92%,#000)}}
html[data-sin-tema] .focus-primary.focus-start:active{box-shadow:none}
/* La parada: su número en la ficha de color de la ruta, plana y en mono. */
html[data-sin-tema] .focus-num{box-shadow:none;font-family:var(--font-mono-marca);font-weight:var(--weight-semibold,600)}
html[data-sin-tema] .focus-cliente{font-weight:var(--weight-semibold,600);letter-spacing:-.02em}
html[data-sin-tema] .focus-chips .tag-time{border:0;background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn-text);
  font-family:var(--font-mono-marca);font-weight:var(--weight-medium,500);letter-spacing:0;text-transform:none}
/* Lo que se lleva: un panel con su hilo; lo que hay que saber, un aviso (§8). */
html[data-sin-tema] .focus-block{border:0;background:var(--surface);box-shadow:inset 0 0 0 1px var(--hairline)}
html[data-sin-tema] .focus-block-label{font-family:var(--font-mono-marca);font-weight:var(--weight-medium,500);letter-spacing:.06em;color:var(--meta)}
html[data-sin-tema] .focus-block.obs{background:color-mix(in srgb,var(--warn) 8%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn) 22%,transparent)}
html[data-sin-tema] .focus-block.obs .focus-block-body{font-style:normal}
html[data-sin-tema] .focus-actions{background:var(--surface);border-top-color:var(--hairline)}
html[data-sin-tema] .focus-sec-btn{border:0;border-radius:var(--radius-sm);background:var(--surface-raised);box-shadow:var(--sombra-tecla);font-weight:var(--weight-medium,500)}
html[data-sin-tema] .focus-sheet-row :is(.ss-transfer-btn,.ss-del-btn){border:0;background:var(--surface-raised);box-shadow:var(--sombra-tecla)}
/* La barra del modo entrega: botones de icono sueltos; la ruta, en mono. */
html[data-sin-tema] .focus-bar{background:var(--surface);border-bottom-color:var(--hairline)}
html[data-sin-tema] .focus-icon-btn{border:0;background:transparent;box-shadow:none;color:var(--muted)}
html[data-sin-tema] .focus-title .ft-route{font-family:var(--font-mono-marca);font-weight:var(--weight-medium,500);letter-spacing:.06em;color:var(--meta)}
html[data-sin-tema] .focus-title .ft-count{font-family:var(--font-mono-marca);font-weight:var(--weight-medium,500)}
/* «No pude entregar» es lo destructivo de la parada: peligro del manual, en
   frase (nunca azul, nunca en mayúsculas espaciadas). Las acciones menores,
   teclas pequeñas. */
html[data-sin-tema] .focus-skip{border:0;border-radius:var(--radius-sm);background:transparent;color:var(--danger);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--danger) 40%,transparent);font-weight:var(--weight-medium,500);letter-spacing:0;text-transform:none}
html[data-sin-tema] .focus-minor-link{border:0;border-radius:var(--radius-sm);background:var(--surface-raised);color:var(--muted);box-shadow:var(--sombra-tecla);font-weight:var(--weight-medium,500)}
html[data-sin-tema] .focus-minor-link.tarifa{color:var(--gold-text)}
/* La ruta en el escritorio (operaciones sigue el día desde aquí): la tarjeta es
   una tecla; su estado, el chip del manual (punto y palabra, teñido, sin
   contorno); sus acciones, teclas —la principal, el primario—. */
html[data-sin-tema] .route-card{border:0;background:var(--surface-raised);box-shadow:var(--sombra-tecla)}
html[data-sin-tema] .status-badge{height:22px;display:inline-flex;align-items:center;gap:6px;padding:0 9px;border:0;border-radius:var(--radius-pill);
  font-size:var(--text-mini);font-weight:var(--weight-medium,500);letter-spacing:0;text-transform:none}
html[data-sin-tema] .status-pendiente{background:color-mix(in srgb,var(--warn) 12%,transparent);color:var(--warn-text)}
html[data-sin-tema] .status-en_ruta{background:color-mix(in srgb,var(--info) 12%,transparent);color:var(--info)}
html[data-sin-tema] .status-completada{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok)}
html[data-sin-tema] .route-action-btn{min-height:30px;padding:0 11px;border:0;border-radius:var(--radius-sm);background:var(--surface-raised);color:var(--ink);
  box-shadow:var(--sombra-tecla);font-weight:var(--weight-medium,500);letter-spacing:0;text-transform:none}
html[data-sin-tema] .route-action-btn.primary{background:var(--gold);color:var(--on-gold);box-shadow:var(--relieve-primario)}
@media (hover:hover){
  html[data-sin-tema] .route-action-btn:hover{background:var(--surface-raised);color:var(--ink);border:0}
  html[data-sin-tema] .route-action-btn.primary:hover{background:color-mix(in srgb,var(--gold) 92%,#000);color:var(--on-gold)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   FASE 3 · POR USO — y las piezas del cascarón que aparecieron al recorrerlas.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Los avisos dentro de la app (pedido flash, peso, ruta, cobro) ──────────
   Los pintan los notificadores con su propio CSS inyectado. Con el base, una
   tecla sólida que flota, la ceja en mono, el título en su peso y la
   invitación en frase; el icono, en su bandeja. */
html[data-sin-tema] :is(.amr-fn-card,.amr-rn-card,.amr-cobro-card){border:0;border-radius:var(--radius-md);background:var(--surface-raised);
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:var(--elev-dialogo)}
html[data-sin-tema] :is(.amr-fn-eyebrow,.amr-rn-eyebrow,.amr-cobro-eyebrow){font-family:var(--font-mono-marca);font-weight:var(--weight-medium,500);letter-spacing:.06em}
html[data-sin-tema] :is(.amr-fn-title,.amr-rn-title,.amr-cobro-title){font-weight:var(--weight-medium,500)}
html[data-sin-tema] :is(.amr-fn-cta,.amr-rn-cta,.amr-cobro-cta){font-size:var(--text-nota);font-weight:var(--weight-medium,500);letter-spacing:0;text-transform:none;color:var(--gold-text)}
html[data-sin-tema] :is(.amr-fn-icon,.amr-rn-icon){border-radius:10px;box-shadow:none}

/* ── Particulares › Gestión ─────────────────────────────────────────────── */
/* Cada pedido flash del día es una tecla con su peso en mono. */
html[data-sin-tema] .pchip{border:0;background:var(--surface-raised);box-shadow:var(--sombra-tecla)}
@media (hover:hover){html[data-sin-tema] .pchip:hover{border:0;box-shadow:inset 0 0 0 1px var(--borde-control),var(--relieve)}}
html[data-sin-tema] .pchip-total{color:var(--ink);font-family:var(--font-mono-marca);font-weight:var(--weight-medium,500)}
html[data-sin-tema] :is(.pf-imgbtn,.pf-mf-chip){border:0;background:var(--surface-raised);color:var(--ink);box-shadow:var(--sombra-tecla);font-weight:var(--weight-medium,500)}
html[data-sin-tema] .capture-trigger{border-radius:var(--radius-sm);font-weight:var(--weight-medium,500);box-shadow:var(--relieve-primario)}
/* La pestaña Pesos (la pieza de ajuste-pesos.js): cada modificación es una
   tecla; lo que cuenta, en mono. */
html[data-sin-tema] .ap-zona .apc{border:0;background:var(--surface-raised);box-shadow:var(--sombra-tecla)}
html[data-sin-tema] .ap-zona .apc-nom{font-weight:var(--weight-semibold,600);letter-spacing:-.01em}
html[data-sin-tema] .ap-zona .apc-pesos{font-family:var(--font-mono-marca)}
html[data-sin-tema] .ap-zona .apc-n{font-family:var(--font-mono-marca);font-weight:var(--weight-medium,500);letter-spacing:.06em;color:var(--meta)}

/* ═══════════════════════════════════════════════════════════════════════════
   FASE 4 · REPASO PANTALLA POR PANTALLA, por uso y con datos: lo que la piel
   generada (brujula-pantallas.css) no alcanza.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Cuentas por pagar: la deuda se escribe en tinta; «por pagar» ya lo dice. */
html[data-sin-tema] .lista-trabajo .st-deuda .c-saldo b,
html[data-sin-tema] .lista-trabajo .due b{color:var(--ink)}

/* ── Pagos a domiciliarios ─────────────────────────────────────────────── */
/* El domiciliario y el día son chips del manual: teclas; el elegido, en tinta. */
html[data-sin-tema] :is(.mg-chip,.mg-dia-chip){border:0;background:var(--surface-raised);box-shadow:var(--sombra-tecla)}
html[data-sin-tema] :is(.mg-chip,.mg-dia-chip).is-on{background:var(--ink);box-shadow:none}
html[data-sin-tema] :is(.mg-chip,.mg-dia-chip).is-on :is(.mg-chip-name,.mg-chip-money,.mg-dc-fecha,.mg-dc-monto){color:var(--bg)}
html[data-sin-tema] .mg-chip-money{color:var(--muted);font-family:var(--font-mono-marca);font-weight:var(--weight-medium,500)}
html[data-sin-tema] .mg-chip-name{font-weight:var(--weight-semibold,600)}
/* La semana: una bandeja, con su total en tinta. */
html[data-sin-tema] .wk-head{border:0;background:var(--surface-sunken);box-shadow:inset 0 0 0 1px var(--hairline)}
html[data-sin-tema] .wk-monto{color:var(--ink);font-weight:var(--weight-semibold,600)}

/* ── Historial de rutas ─────────────────────────────────────────────────── */
/* La fecha del día: en mono sobre su bandeja, no un bloque del acento. */
html[data-sin-tema] .hr-date-num,html[data-sin-tema][data-theme="dark"] .hr-date-num{background:var(--surface-sunken);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hairline)}
html[data-sin-tema] .hr-date-num :is(.d,.m){font-family:var(--font-mono-marca);font-weight:var(--weight-medium,500)}
html[data-sin-tema] .hr-date-num .m{letter-spacing:.06em;color:var(--meta)}
/* Descargar cada ruta: tecla; descargar las marcadas: el primario. */
html[data-sin-tema] .hr-pdf-btn{border:0;border-radius:var(--radius-sm);background:var(--surface-raised);box-shadow:var(--sombra-tecla);font-weight:var(--weight-medium,500);letter-spacing:0}
@media (hover:hover){html[data-sin-tema] .hr-pdf-btn:hover{background:var(--surface-raised);color:var(--ink);border:0}}
html[data-sin-tema] .hr-pdf-btn.hr-day-pdf{background:var(--gold);color:var(--on-gold);box-shadow:var(--relieve-primario)}
html[data-sin-tema] .hr-route-dot{background:var(--meta)}

/* ── Biblioteca ─────────────────────────────────────────────────────────── */
/* Cada producto es una tecla; sin foto, su bandeja con el icono en gris. */
html[data-sin-tema] .prod{border:0;background:var(--surface-raised);box-shadow:var(--sombra-tecla)}
html[data-sin-tema] .prod-img{background:var(--surface-sunken)}
html[data-sin-tema] :is(.prod-img,.detail-img) .ph{color:var(--meta);opacity:1}
html[data-sin-tema] .prod-price.none{font-style:normal}
/* «Oculto» es un estado: punto y palabra, teñido, sin contorno. */
html[data-sin-tema] .badge-oculto{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border:0;border-radius:var(--radius-pill);
  font-size:var(--text-mini);font-weight:var(--weight-medium,500);letter-spacing:0;text-transform:none}
html[data-sin-tema] .badge-oculto::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
@media (hover:hover){html[data-sin-tema] .prod:hover{transform:none;border:0;box-shadow:inset 0 0 0 1px var(--borde-control),var(--relieve)}}

/* ── El Mostrador (§9.3) ────────────────────────────────────────────────── */
/* Las categorías son chips del manual: teclas; la elegida, en tinta. */
html[data-sin-tema]:where([data-pantalla="pos"]) .prod-tools .cat{height:30px;padding:0 12px;border:0;background:var(--surface-raised);color:var(--muted);box-shadow:var(--sombra-tecla);
  font-size:var(--text-nota);font-weight:var(--weight-medium,500);letter-spacing:0}
html[data-sin-tema]:where([data-pantalla="pos"]) .prod-tools .cat.on,html[data-sin-tema][data-theme="dark"]:where([data-pantalla="pos"]) .prod-tools .cat.on{background:var(--ink);color:var(--bg);box-shadow:none}
/* El total del documento, en tinta: el acento es el botón que lo cobra. */
html[data-sin-tema] .trow.grand .tv{color:var(--ink);font-weight:var(--weight-semibold,600);letter-spacing:-.01em}
/* El contador de la línea sigue siendo UNA caja con su unidad dentro
   (docs/arquitectura/LA-FILA-DEL-CARRITO.md); con la forma del campo del
   manual: hundida, con el anillo por dentro y sus lados en la bandeja. */
html[data-sin-tema] .cqty{border:0;background:var(--surface);box-shadow:var(--hundido-campo)}
html[data-sin-tema] .cqty:focus-within{border:0;box-shadow:var(--anillo)}
html[data-sin-tema] .cq-lado{background:var(--surface-sunken)}
html[data-sin-tema] .cpaso{font-family:var(--font-mono-marca);font-weight:var(--weight-medium,500)}
html[data-sin-tema] .cq-num input{font-family:var(--font-mono-marca);font-weight:var(--weight-medium,500)}
html[data-sin-tema] .cq-num input:focus{background:transparent}

/* ── Actividad (§9.2) ───────────────────────────────────────────────────── */
/* El número de documento, en mono y en tinta (§8 «Tabla»: «números de
   documento en mono»). */
html[data-sin-tema] .lista-trabajo .c-doc .d2{font-family:var(--font-mono-marca);font-weight:var(--weight-medium,500);color:var(--muted)}
/* El total de la ficha del documento, en tinta. */
html[data-sin-tema] .fc .fc-tot .g span{color:var(--ink)}

/* ── Gerencia › Costos y Márgenes: la cifra principal, en tinta ──────────── */
html[data-sin-tema] .kpi.big .kpi-value{color:var(--ink)}

/* ── Horarios ───────────────────────────────────────────────────────────── */
/* Los días son chips del manual: teclas; el que se mira, en tinta. */
html[data-sin-tema] .diasel .diabtn{border:0;background:var(--surface-raised);color:var(--muted);box-shadow:var(--sombra-tecla);font-weight:var(--weight-medium,500)}
html[data-sin-tema] .diasel .diabtn.on{background:var(--ink);color:var(--bg);box-shadow:none}
html[data-sin-tema] .diahead .diah{color:var(--ink);font-family:var(--font-mono-marca);font-weight:var(--weight-medium,500)}

/* ── Clientes: lo que le falta a la ficha fiscal es un estado de aviso ──── */
html[data-sin-tema] .falta{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border:0;border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--warn) 12%,transparent);color:var(--warn-text);font-size:var(--text-mini);font-weight:var(--weight-medium,500);letter-spacing:0;text-transform:none}
html[data-sin-tema] .falta:not(.f-emp)::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}

/* ── Maestro de artículos ───────────────────────────────────────────────── */
/* El estado de la ficha («Activo», «Sin precio») es un estado del manual: en
   frase, no una ceja en mono. Las variantes, etiquetas neutras. */
html[data-sin-tema] .est{font-family:var(--font-sans);font-weight:var(--weight-medium,500);letter-spacing:0;text-transform:none;border:0}
html[data-sin-tema] .vchip{border:0;background:var(--surface-sunken);color:var(--muted);font-weight:var(--weight-medium,500);box-shadow:inset 0 0 0 1px var(--hairline)}

/* ── Permisos: cada módulo de la lista es una fila en tinta, no un enlace ── */
html[data-sin-tema] .mod-cab,html[data-sin-tema] .mod-cab .mod-nom{color:var(--ink)}
html[data-sin-tema] .mod-cab svg{color:var(--meta)}

/* ── Simulador de tarifas ───────────────────────────────────────────────── */
/* Sin barra lateral de acento (regla del portal y del manual): el estado del
   balance lo dice el color de su cifra. */
html[data-sin-tema] .kpi-item{border-left:0}
/* «Fijado» es un estado; el número del paso, en mono sobre su bandeja. */
html[data-sin-tema] .palanca-badge{border:0;border-radius:var(--radius-pill);background:var(--chip);color:var(--gold-text);
  font-family:var(--font-sans);font-weight:var(--weight-medium,500);letter-spacing:0;text-transform:none}
html[data-sin-tema] .palanca-badge-locked{background:var(--surface-sunken);color:var(--muted)}
html[data-sin-tema] .step-num{border:0;background:var(--surface-sunken);color:var(--ink);font-family:var(--font-mono-marca);font-weight:var(--weight-medium,500);box-shadow:inset 0 0 0 1px var(--hairline)}
/* Planta › Insumos: el estado de la existencia es una píldora con su punto, en frase */
html[data-sin-tema]:where([data-pantalla="planta-insumos"]) .f-chip{border:0;font-family:var(--font-sans);font-size:var(--text-mini);font-weight:var(--weight-medium,500);letter-spacing:0;text-transform:none}
/* La insignia del rol (role-badge.js inyecta su hoja con Montserrat y mayúsculas) */
html[data-sin-tema] #roleBadge{font-family:var(--font-sans);font-weight:var(--weight-medium,500);letter-spacing:0}
html[data-sin-tema] #roleBadge .rb-role{text-transform:none;letter-spacing:0;color:var(--ink)}
/* Etiquetas y Catálogo: sus pantallas traían la paleta y la letra de Amoramar en
   su propio :root. En el base esos bloques no aplican (llevan :not([data-sin-tema]))
   y sus alias se apuntan al núcleo. La etiqueta IMPRESA no se toca: usa colores
   fijos y su propia fuente de sistema (.label-sheet, .label). */
html[data-sin-tema]:where([data-pantalla="etiquetas-producto"],[data-pantalla="etiquetas-cliente"]){
  --text:var(--ink);--paper:var(--surface);--panel:var(--surface);--card:var(--surface);--line:var(--border-2);
  --faint:var(--apagado);--accent:var(--gold);--accent-d:var(--gold-text);--accent-2:var(--gold-soft);
  --amber:var(--warn-text);--amber-bg:color-mix(in srgb,var(--warn) 12%,transparent);
  --radius:var(--radius-sm);--sans:var(--font-sans);--serif:var(--font-serif)}
html[data-sin-tema]:where([data-pantalla="etiquetas-producto"]) :is(.panel,.copy-badge),
html[data-sin-tema]:where([data-pantalla="etiquetas-cliente"]) :is(.date-modal-box h2,.date-pill,.date-custom input),
html[data-sin-tema]:where([data-pantalla="catalogo-editor"]) body{font-family:var(--font-sans)}
/* Etiquetas de producto: «Imprimir» es el primario; «Agregar etiqueta», tecla. Sin
   el escenario cálido detrás de la etiqueta ni las líneas que se desvanecen. */
html[data-sin-tema] .queue-bar .btn-print{border-radius:var(--radius-sm) !important;background:var(--gold);color:var(--on-gold);font-weight:var(--weight-semibold,600);box-shadow:var(--relieve-primario)}
html[data-sin-tema] .queue-bar .btn-print:disabled{background:var(--surface-sunken);color:var(--apagado);box-shadow:none}
@media (hover:hover){html[data-sin-tema] .queue-bar .btn-print:not(:disabled):hover{background:color-mix(in srgb,var(--gold) 92%,#000);box-shadow:var(--relieve-primario)}}
html[data-sin-tema] .btn-add{border-radius:var(--radius-sm) !important;background:var(--surface-raised);color:var(--ink);font-weight:var(--weight-medium,500);box-shadow:var(--sombra-tecla)}
@media (hover:hover){html[data-sin-tema] .btn-add:hover{background:var(--surface-raised);box-shadow:var(--sombra-tecla)}}
html[data-sin-tema] .app > .preview-col{background:var(--surface) !important}
html[data-sin-tema] :is(.config-title,.queue-section-title,.preview-col .preview-title)::after{background:var(--hairline) !important;opacity:1}
/* …y lo que su modo oscuro pintaba a mano con el dorado y el azul de Amoramar, con
   los tokens del núcleo (sirve en los dos modos) */
html[data-sin-tema] .queue-bar{background:transparent !important;border-color:var(--hairline) !important}
html[data-sin-tema] .field label,html[data-sin-tema] .queue-counter .big{color:var(--ink) !important}
html[data-sin-tema] :is(.advanced-toggle,.queue-bar .clear-link,.queue-item-remove,.lc-trigger,.lc-meta){color:var(--muted) !important}
html[data-sin-tema] .queue-bar .clear-link[disabled]{color:var(--apagado) !important}
@media (hover:hover){html[data-sin-tema] :is(.advanced-toggle,.lc-trigger):hover{color:var(--gold-text) !important}}
html[data-sin-tema] .queue-item{background:var(--surface-raised) !important;border-color:transparent !important;box-shadow:inset 0 0 0 1px var(--hairline)}
html[data-sin-tema] .lc-panel{background:var(--surface-raised);border-color:transparent;box-shadow:var(--elev-dialogo)}
html[data-sin-tema] .lc-search{border-color:var(--hairline)}
html[data-sin-tema] .lc-day{color:var(--muted);background:var(--surface-raised);font-family:var(--font-mono-marca)}
html[data-sin-tema] .lc-item{color:var(--ink)}
@media (hover:hover){html[data-sin-tema] .lc-item:hover{background:var(--chip)}}
html[data-sin-tema] .lc-code{color:var(--gold-text)}
/* Etiquetas de cliente: los chips elegidos van de tinta, el aviso en ámbar del núcleo */
html[data-sin-tema] :is(.search-pill,.unit-pill,.date-pill).active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
html[data-sin-tema] :is(.stats-warn,.stats-section-divider-top){color:var(--warn-text)}
html[data-sin-tema] .stats-row-warn{background:color-mix(in srgb,var(--warn) 6%,transparent)}
@media (hover:hover){html[data-sin-tema] .stats-row:hover{background:var(--chip)}html[data-sin-tema] .stats-row-warn:hover{background:color-mix(in srgb,var(--warn) 10%,transparent)}}
html[data-sin-tema] .stats-breakdown{background:var(--surface-sunken)}
@media (hover:hover){html[data-sin-tema] .stats-copy-btn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}}
html[data-sin-tema] .stats-copy-btn.copied{background:var(--ink);color:var(--bg);border-color:var(--ink);box-shadow:none}
html[data-sin-tema] :is(.config-title,.queue-section-title,.preview-col .preview-title){font-family:var(--font-mono-marca);font-weight:var(--weight-medium,500);letter-spacing:.06em;color:var(--meta)}
html[data-sin-tema] .queue-counter .big{font-weight:var(--weight-semibold,600)}
/* Sin degradados (§3 del manual): las barras van del color sólido del acento, las
   fichas grandes y las entradas del registro sobre su superficie, y los iconos de
   las fichas del Hipocampo sobre la bandeja del chip */
html[data-sin-tema] :is(.bar-fill,.sec-zona .z-bar i,.sec-table .barcell .b i){background:var(--gold)}
html[data-sin-tema] .kpi.big,html[data-sin-tema] .reg-entry{background:var(--surface-raised)}
html[data-sin-tema] .reg-entry{border:0;box-shadow:inset 0 0 0 1px var(--hairline)}
html[data-sin-tema] :is(.doc-ico,.ph-icon,.cm-icon){background:var(--chip);border:0;color:var(--gold-text)}
/* El título de la barra del teléfono (anim.css y app-ios.css lo ponen a 700 con !important) */
html[data-sin-tema] :is(.topbar .brand-sub,.ui-topbar .ui-brand-sub,.brujula-topbar .bt-sub){font-weight:var(--weight-semibold,600) !important;letter-spacing:-.01em !important}

/* ── Fase 5 · repaso de punta a punta ─────────────────────────────────────── */
/* La moto de la ruta en curso (Inicio y Rutas activas): avance del acento sólido,
   sin el brillo que la recorría (§3: sin degradados) */
html[data-sin-tema] .rp-mini-fill{background:var(--gold)}
html[data-sin-tema] .rp-shine{display:none}
html[data-sin-tema] .rp-done-n{font-family:var(--font-mono-marca);font-weight:var(--weight-medium,500)}
/* El chip de la línea de tiempo: el nombre a 600 y la hora en mono */
html[data-sin-tema] .pchip-name{font-weight:var(--weight-semibold,600)}
html[data-sin-tema] .pchip-hora{font-family:var(--font-mono-marca);font-weight:var(--weight-medium,500)}
/* Actividad: los botones de la barra en su peso de botón, el documento y el total a 600 */
html[data-sin-tema] .lista-trabajo :is(.btn-new,.btn-exp){font-weight:var(--weight-medium,500);letter-spacing:0;text-transform:none}
html[data-sin-tema] :is(.c-doc .d1,.c-tot){font-weight:var(--weight-semibold,600)}
/* Horarios: los rieles y la columna resaltada traían la tinta y el dorado de
   Amoramar escritos a mano (la imagen que se exporta es un documento y no cambia) */
html[data-sin-tema]:where([data-pantalla="horarios"]) .bar{background:var(--surface-sunken)}
html[data-sin-tema]:where([data-pantalla="horarios"]) .eje::before{background:var(--surface-sunken)}
html[data-sin-tema]:where([data-pantalla="horarios"]) .sched thead .day.col-hl{color:var(--on-gold)}
/* La etiqueta flotante de las gráficas de Seguimiento: la superficie del aviso
   (traía el azul y el dorado de Amoramar escritos a mano) */
html[data-sin-tema] .chart-tip{background:var(--aviso-fondo);color:var(--aviso-tinta);border:0;box-shadow:var(--elev-dialogo)}
/* Simulador: la fila de la palanca, teñida del acento del núcleo */
html[data-sin-tema]:root .sectores-table tr.is-palanca td{background:color-mix(in srgb,var(--gold) 7%,transparent)}
@media (hover:hover){html[data-sin-tema]:root .sectores-table tr.is-palanca:hover td{background:color-mix(in srgb,var(--gold) 12%,transparent)}}
html[data-sin-tema] .tarifas-table input.tarifa-edit.is-modified{background:color-mix(in srgb,var(--gold) 8%,transparent)}
/* Catálogo: «nueva» es un estado, la píldora teñida con su punto */
html[data-sin-tema] .doc-status{border:0;font-family:var(--font-sans);font-weight:var(--weight-medium,500);letter-spacing:0;text-transform:none}
html[data-sin-tema] .doc-status.warn{background:var(--chip);color:var(--gold-text)}
html[data-sin-tema] .doc-status.ok{background:var(--surface-sunken);color:var(--ink)}
/* Seguridad: «Atención» es un aviso, en el ámbar del núcleo (traía el dorado de Amoramar a mano) */
html[data-sin-tema] .summary-bar.warn{background:color-mix(in srgb,var(--warn) 12%,transparent);color:var(--warn-text)}

/* ══ NAVEGAR ENTRE MÓDULOS: el dock (1 oct 2026) ═══════════════════════════
   Lo pinta assets/brujula-navegar.js, que solo se pide con el base puesto. */
/* ── El dock ── */
html[data-sin-tema] .brj-nav-dock{position:fixed;left:50%;bottom:0;z-index:8000;display:flex;flex-direction:column;align-items:center;
  transform:translate(-50%,calc(100% - 10px));transition:transform 320ms cubic-bezier(.3,.7,.4,1.12)}
html[data-sin-tema] .brj-nav-dock.arriba,html[data-sin-tema] .brj-nav-dock.asoma,html[data-sin-tema] .brj-nav-dock:focus-within{transform:translate(-50%,-14px)}
/* Escondido NO atrapa el ratón (ni al asomarse): lo que haya debajo se sigue
   pudiendo tocar. Solo el asa recibe el puntero, y sube si uno se queda en ella. */
html[data-sin-tema] .brj-nav-dock:not(.arriba):not(:focus-within){pointer-events:none}
/* El asa: lo único que se ve con el dock escondido. Su zona de toque es más
   ancha que el dibujo pero NO más alta que la franja (104 × 10 px, pegada al
   borde, donde el ratón se detiene solo): más arriba ya pisaba el paginador de
   Insumos, que acaba justo donde empieza la franja. */
html[data-sin-tema] .brj-nav-asa{position:relative;width:44px;height:4px;margin-bottom:6px;border-radius:var(--radius-pill);background:var(--borde-control);
  pointer-events:auto;cursor:pointer;transition:opacity 200ms ease,background-color 200ms ease,transform 200ms ease}
html[data-sin-tema] .brj-nav-asa::before{content:'';position:absolute;inset:0 -30px -6px}
@media (hover:hover){html[data-sin-tema] .brj-nav-dock:not(.arriba) .brj-nav-asa:hover{background:var(--muted);transform:scaleX(1.15)}}
html[data-sin-tema] .brj-nav-dock:is(.arriba,.asoma) .brj-nav-asa{opacity:0;pointer-events:none}
html[data-sin-tema] .brj-nav-bandeja{display:flex;align-items:center;gap:6px;padding:8px;border-radius:var(--radius-panel);
  background:var(--surface-raised);box-shadow:var(--elev-dialogo)}
html[data-sin-tema] .brj-nav-div{width:1px;height:26px;margin:0 4px;background:var(--hairline)}
html[data-sin-tema] .brj-nav-tecla{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--radius-md);
  background:var(--surface-raised);color:var(--muted);box-shadow:var(--relieve-tarjeta);cursor:pointer;text-decoration:none;
  transition:transform 220ms cubic-bezier(.3,.7,.4,1.2),box-shadow 220ms cubic-bezier(.3,.7,.4,1.2)}
html[data-sin-tema] .brj-nav-tecla .brj-nav-ic{width:22px;height:22px}
@media (hover:hover){
  html[data-sin-tema] .brj-nav-tecla:hover{transform:translateY(-3px);color:var(--ink)}
  html[data-sin-tema] .brj-nav-tecla:hover .brj-nav-nombre{opacity:1;transform:translate(-50%,0)}
}
html[data-sin-tema] .brj-nav-tecla:active{transform:translateY(1px);box-shadow:var(--relieve-pulsado)}
/* La tecla del módulo donde se está: hundida y en tinta. */
html[data-sin-tema] .brj-nav-tecla.aqui{background:var(--ink);color:var(--bg);box-shadow:none}
html[data-sin-tema] .brj-nav-simbolo{display:block;width:22px;height:22px}
html[data-sin-tema] .brj-nav-simbolo svg{display:block;width:100%;height:100%;overflow:visible}
/* El nombre aparece encima de la tecla, en una pastilla de tinta. */
html[data-sin-tema] .brj-nav-nombre{position:absolute;left:50%;bottom:calc(100% + 10px);padding:5px 9px;border-radius:var(--radius-sm);white-space:nowrap;pointer-events:none;
  background:var(--ink);color:var(--bg);font-family:var(--font-sans);font-size:var(--text-nota);font-weight:var(--weight-medium,500);
  opacity:0;transform:translate(-50%,4px);transition:opacity 140ms ease,transform 180ms cubic-bezier(.3,.7,.4,1.2)}
/* Las pantallas de un módulo, encima de su tecla. */
html[data-sin-tema] .brj-nav-menu{position:fixed;z-index:8100;min-width:220px;max-width:320px;padding:6px;border-radius:var(--radius-md);
  background:var(--surface-raised);box-shadow:var(--elev-dialogo);opacity:0;transform:translateY(6px) scale(.98);transform-origin:var(--brj-nav-desde,50%) 100%;
  transition:opacity 140ms ease,transform 220ms cubic-bezier(.3,.7,.4,1.2)}
html[data-sin-tema] .brj-nav-menu[hidden]{display:none}
html[data-sin-tema] .brj-nav-menu.dentro{opacity:1;transform:none}
html[data-sin-tema] .brj-nav-menu-t{display:flex;align-items:center;gap:8px;padding:8px 10px 10px;color:var(--ink)}
html[data-sin-tema] .brj-nav-menu-t .brj-nav-ic{width:18px;height:18px;display:block}
html[data-sin-tema] .brj-nav-menu-t b{flex:1;font-size:var(--text-apoyo);font-weight:var(--weight-semibold,600)}
html[data-sin-tema] .brj-nav-menu-t span{font-family:var(--font-mono-marca);font-size:var(--text-micro);letter-spacing:.06em;color:var(--meta)}
html[data-sin-tema] .brj-nav-menu-i{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:9px 10px;border-radius:var(--radius-sm);
  color:var(--ink);text-decoration:none;font-size:var(--text-apoyo);font-weight:var(--weight-medium,500)}
html[data-sin-tema] .brj-nav-menu-i small{font-family:var(--font-mono-marca);font-size:var(--text-micro);letter-spacing:.04em;color:var(--meta)}
html[data-sin-tema] .brj-nav-menu-i:is(:hover,:focus-visible){background:var(--surface-sunken);outline:0}
html[data-sin-tema] .brj-nav-menu-i.aqui{color:var(--gold-text)}
@media (prefers-reduced-motion:reduce){
  html[data-sin-tema] :is(.brj-nav-dock,.brj-nav-tecla,.brj-nav-menu,.brj-nav-nombre){transition:none}
}
/* EL DOCK GRANDE, en el Inicio: es la navegación de la página. Siempre a la
   vista, teclas de 58 y el nombre de cada módulo debajo, como un muelle.
   Y ES EL SUELO DE LA PÁGINA (1 oct 2026, Samuel: «para pantallas que no son tan
   altas, el dock se queda encima de widgets y no se ve bien»): una franja del
   color del fondo, a lo ancho, con el dock centrado. Lo que se desplaza pasa
   POR DEBAJO y se corta limpio en su borde, en vez de verse detrás de las
   teclas (llevaba un hilo arriba y se retiró: Samuel, «elimina la línea
   horizontal»); la página reserva al final ese mismo alto
   (`--ini-dock` en index.html), así que la última pieza siempre se ve entera.
   En pantallas bajas el dock se encoge: teclas más pequeñas y, por debajo de
   700 px de alto, sin el nombre (sigue en su `aria-label`). */
html[data-sin-tema] .brj-nav-dock.grande,html[data-sin-tema] .brj-nav-dock.grande.arriba{left:0;right:0;transform:none;padding:10px 16px 16px;
  background:var(--bg);box-shadow:none}
/* REFINADO (1 oct 2026, Samuel: «refina el dock para que sea un diseño más
   profesional, fluido y ordenado»): UNA bandeja con su hilo y las teclas
   planas dentro, todas del mismo ancho y con el nombre entero debajo («Base de
   datos» se cortaba); el color se reserva para la tecla cuyo menú está ABIERTO
   (`.abierta`), que es un estado.
   EL HOVER ES EL DE LAS PÁGINAS (12 oct 2026, Samuel: «debe de ser el mismo
   que el dock cuando está en una página, me gusta más el de la página»). Hubo
   una onda que agrandaba la tecla bajo el puntero y a sus vecinas; ahora la
   losa del icono es la tecla de las páginas —en relieve— y al pasar se levanta
   tres píxeles con el mismo muelle, y al tocarla se hunde. */
html[data-sin-tema] .brj-nav-dock.grande .brj-nav-bandeja{gap:2px;padding:8px 10px 6px;border-radius:20px;overflow:visible;
  background:var(--surface-raised);box-shadow:var(--elev-dialogo)}
html[data-sin-tema] .brj-nav-dock.grande .brj-nav-tecla{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;
  width:84px;height:auto;padding:4px 0 2px;border-radius:14px;background:transparent;box-shadow:none;color:var(--ink);transform:none}
html[data-sin-tema] .brj-nav-dock.grande .brj-nav-tecla .brj-nav-ic{width:48px;height:48px;padding:13px;box-sizing:border-box;border-radius:14px;
  background:var(--surface-raised);box-shadow:var(--relieve-tarjeta);color:var(--ink);
  transition:transform 220ms cubic-bezier(.3,.7,.4,1.2),box-shadow 220ms cubic-bezier(.3,.7,.4,1.2),background-color 160ms ease,color 160ms ease}
html[data-sin-tema] .brj-nav-dock.grande .brj-nav-nombre{position:static;opacity:1;transform:none;padding:0;background:none;color:var(--muted);
  font-size:var(--text-mini);font-weight:var(--weight-medium,500);letter-spacing:.01em;max-width:84px;white-space:normal;text-align:center;line-height:1.2;
  transition:color 160ms ease}
/* El nombre de un módulo NUNCA se corta (1 oct 2026, Samuel: «los nombres
   nunca pueden cortarse»): en una tecla estrecha va en dos renglones, y las
   teclas se alinean por arriba para que los iconos sigan en fila. */
html[data-sin-tema] .brj-nav-dock.grande .brj-nav-bandeja{align-items:flex-start}
@media (hover:hover){
  html[data-sin-tema] .brj-nav-dock.grande .brj-nav-tecla:hover{transform:none}
  html[data-sin-tema] .brj-nav-dock.grande .brj-nav-tecla:hover .brj-nav-ic{transform:translateY(-3px)}
  html[data-sin-tema] .brj-nav-dock.grande .brj-nav-tecla:hover .brj-nav-nombre{color:var(--ink)}
}
html[data-sin-tema] .brj-nav-dock.grande .brj-nav-tecla:focus-visible{outline:0}
html[data-sin-tema] .brj-nav-dock.grande .brj-nav-tecla:focus-visible .brj-nav-ic{box-shadow:0 0 0 2px var(--gold)}
html[data-sin-tema] .brj-nav-dock.grande .brj-nav-tecla.abierta .brj-nav-ic{background:var(--gold);color:var(--on-gold);box-shadow:none}
html[data-sin-tema] .brj-nav-dock.grande .brj-nav-tecla.abierta .brj-nav-nombre{color:var(--ink)}
html[data-sin-tema] .brj-nav-dock.grande .brj-nav-tecla:active .brj-nav-ic{transform:translateY(1px);box-shadow:var(--relieve-pulsado)}
/* RESALTADA (12 oct 2026, Samuel: «resaltar algún icono para que sea fácil de
   leer rápidamente»): la elige cada persona en «Editar Inicio» y se ve en el
   dock de TODAS las pantallas. Losa teñida de ultramar, icono y nombre en su
   tinta —distinta de la tecla con su menú abierto, que va llena—. */
html[data-sin-tema] .brj-nav-tecla.resaltada{background:var(--gold-bg);color:var(--gold-text);box-shadow:inset 0 0 0 1.5px var(--gold)}
html[data-sin-tema] .brj-nav-dock.grande .brj-nav-tecla.resaltada{background:transparent}
html[data-sin-tema] .brj-nav-dock.grande .brj-nav-tecla.resaltada .brj-nav-ic{background:var(--gold-bg);color:var(--gold-text);box-shadow:inset 0 0 0 1.5px var(--gold)}
html[data-sin-tema] .brj-nav-dock.grande .brj-nav-tecla.resaltada .brj-nav-nombre{color:var(--gold-text);font-weight:var(--weight-semibold,600)}
html[data-sin-tema] .brj-nav-tecla.resaltada.aqui{background:var(--ink);color:var(--bg)}
/* ARREGLANDO EL DOCK, con «Editar Inicio» (brujula-navegar.js): las teclas
   tiemblan como las piezas, se arrastran para ordenarlas y cada una enseña su
   estrella para resaltarla. */
html[data-sin-tema] .brj-nav-resaltar{display:none}
html[data-sin-tema] .brj-nav-ayuda{margin:0 0 8px;font-size:var(--text-nota);color:var(--muted);text-align:center}
/* (El temblor es el mismo de las piezas, `brj-tiembla`, en index.html.) */
html[data-sin-tema] .brj-nav-dock.grande.editando .brj-nav-tecla{cursor:grab;touch-action:none;user-select:none}
html[data-sin-tema] .brj-nav-dock.grande.editando .brj-nav-resaltar{display:grid;place-items:center;position:absolute;top:-6px;right:12px;z-index:2;width:24px;height:24px;border-radius:50%;
  background:var(--ink);color:var(--bg);cursor:pointer;transition:background-color 160ms ease,color 160ms ease}
html[data-sin-tema] .brj-nav-resaltar svg{width:13px;height:13px}
html[data-sin-tema] .brj-nav-dock.grande.editando .brj-nav-tecla.resaltada .brj-nav-resaltar{background:var(--gold);color:var(--on-gold)}
html[data-sin-tema] .brj-nav-dock.grande .brj-nav-tecla.moviendo{z-index:3;cursor:grabbing;transition:none}
html[data-sin-tema] .brj-nav-dock.grande .brj-nav-tecla.moviendo .brj-nav-ic{transform:translateY(-6px);box-shadow:var(--elev-dialogo);animation:none}
@media (min-width:761px) and (max-width:1100px){
  html[data-sin-tema] .brj-nav-dock.grande .brj-nav-tecla{width:66px}
  html[data-sin-tema] .brj-nav-dock.grande .brj-nav-tecla .brj-nav-ic{width:42px;height:42px;padding:11px;border-radius:12px}
  html[data-sin-tema] .brj-nav-dock.grande .brj-nav-nombre{max-width:66px;font-size:var(--text-micro)}
}
@media (min-width:761px) and (max-height:820px){
  html[data-sin-tema] .brj-nav-dock.grande{padding:8px 16px 12px}
  html[data-sin-tema] .brj-nav-dock.grande .brj-nav-bandeja{padding:6px 8px 4px}
  html[data-sin-tema] .brj-nav-dock.grande .brj-nav-tecla{gap:4px}
  html[data-sin-tema] .brj-nav-dock.grande .brj-nav-tecla .brj-nav-ic{width:42px;height:42px;padding:11px;border-radius:12px}
}
@media (min-width:761px) and (max-height:700px){
  html[data-sin-tema] .brj-nav-dock.grande{padding:6px 16px 8px}
  html[data-sin-tema] .brj-nav-dock.grande .brj-nav-bandeja{padding:6px 8px}
  html[data-sin-tema] .brj-nav-dock.grande .brj-nav-tecla{width:auto;padding:0 4px}
  html[data-sin-tema] .brj-nav-dock.grande .brj-nav-tecla .brj-nav-ic{width:40px;height:40px;padding:10px}
  html[data-sin-tema] .brj-nav-dock.grande .brj-nav-nombre{display:none}
}
@media (prefers-reduced-motion:reduce){
  html[data-sin-tema] .brj-nav-dock.grande .brj-nav-tecla .brj-nav-ic{transition:none}
}
@media (max-width:760px){html[data-sin-tema] :is(.brj-nav-dock,.brj-nav-menu){display:none}}

/* «Está tardando», con gracia (14 oct 2026): píldora con el mosaico y una frase
   que cambia subiendo. La rotación la pone theme.js (`lentoDeLaEspera`). */
html[data-sin-tema] .amr-cargando-lento--vivo{display:flex;align-items:center;justify-content:center;gap:var(--space-2);font-size:var(--text-sm);
  width:max-content;max-width:100%;margin:var(--space-3) auto 0;padding:var(--space-2) var(--space-4);
  border-radius:var(--radius-pill);background:var(--surface);border:1px solid var(--hairline);color:var(--muted);overflow:hidden}
html[data-sin-tema] .amr-cargando-lento--vivo .amr-mosaico{color:var(--ink);flex:none}
html[data-sin-tema] .amr-lento-frase{display:inline-block}
@keyframes brj-frase-sube{from{opacity:0;transform:translateY(60%)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: no-preference){
  html[data-sin-tema] .amr-cargando-lento--vivo .amr-lento-frase{animation:brj-frase-sube var(--amr-dur-view) var(--amr-ease-spring,var(--amr-ease-out)) both}
}