/* ══════════════════════════════════════════════════════════════════════════
   ui.css — CÓMO SE MUEVE EL PRODUCTO
   ──────────────────────────────────────────────────────────────────────────
   Marc: «el producto es tan simple que debería ser lo más visual e
   interactivamente divertido posible, para que el poco tiempo que se está en
   él sea con ganas de usarlo y toquearlo».

   Y su otra mitad, que es la que manda: «odio cuando algo interactivo
   parpadea como un bug». Un elemento que aparece de golpe, o un texto que da
   un tirón al abrirse, se lee como una avería aunque funcione. Así que aquí
   NADA cambia de estado a saltos: todo lo que aparece, crece o se va, lo hace
   en una curva.

   Tres reglas, y valen para todo el producto:
     1 · lo que se toca SE HUNDE al pulsarlo y vuelve al soltar
     2 · lo que se abre SUBE o CRECE, nunca aparece
     3 · lo que cambia algo, lo DICE al terminar
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ LA CURVA ═════════════════════════════════════════════════════════════
   Una sola, para que todo el producto se mueva con el mismo carácter. Sale
   deprisa y frena al final, que es como se mueven las cosas con peso. */
:root{
  --ui-curva:cubic-bezier(.22,.72,.28,1);
  --ui-rapido:.14s;
  --ui-medio:.24s;
  --ui-lento:.34s;

  /* ══ EL TACTO · AQUI VIVE, Y SOLO AQUI ═════════════════════════════════
     ⚠️ EL MOLDE ES EL BOTON «+ Añadir» de Mi equipo. Marc: «el efecto de
     profundidad dura un poquito mas, y el color tambien. Eso es lo ideal»,
     frente al resto, que eran «flashing lights e instantaneo, no sabes ni
     que esta pasando».
     Estos numeros estan COPIADOS de ese boton, no elegidos:
        escala  .97                          · su regla :active
        luz     rgba(212,180,131,.11)        · su resplandor al pulsar
        entra   .14s                         · su transicion de transform
        vuelve  .24s                         · su transicion de color
        curva   cubic-bezier(.22,.72,.28,1)  · la unica del producto
     Y POR QUE EL RESTO PARECIA UN FLASH: su luz era un ::after que solo
     existe mientras esta pulsado, y un pseudo-elemento que nace y muere no
     puede animarse — aparecia y desaparecia de golpe. Ahora la luz es una
     sombra interior, que si se desvanece, y lo hace con los .24s que este
     boton ya declaraba para su color.
     Marc: «prefiero un minimo de paciencia, que haya tiempo a experienciar
     y saber que pasa, a que todo vaya a lo loco con flashes».
     ══════════════════════════════════════════════════════════════════════ */
  --tacto-escala:.97;        /* cuanto se hunde lo que se pulsa */
  --tacto-suave:.99;         /* las cabeceras de seccion, que no son botones */
  /* ⚠️ UN ICONO NECESITA MAS PORCENTAJE PARA EL MISMO MOVIMIENTO. Medido: el
     .97 en «Ajustes de reparto» (349 px de ancho) son 10,5 px de hundimiento y
     se ve de sobra; el MISMO .97 en la «+ personita» (47 px) son 1,4 px, o sea
     nada. Igualar el numero no es igualar la sensacion. Los botones de icono
     llevan su propia escala para que el desplazamiento se parezca al de los
     demas: .90 sobre 47 px son 4,7 px. */
  --tacto-icono:.90;
  /* ⚠️ LA ESPERA ANTES DE UNA ACCIÓN QUE SE LLEVA POR DELANTE LO PULSADO.
     Marc: «debe haber una muy pequeñísima espera, no debe ser instante, eso es
     lo molesto; pero los que tenías eran demasiado largos». Estuvo en 140 ms y
     se notaba como lentitud; en 0 y se notaba como corte.
     60 ms son unos cuatro fotogramas: suficiente para que el hundimiento
     empiece y se lea, y por debajo de lo que se percibe como espera. Está aquí
     y no escrito en el código para poder moverlo sin buscarlo. */
  --tacto-gesto:60ms;
  --tacto-luz:rgba(212,180,131,.11);
  --tacto-entra:var(--ui-rapido);   /* .14s · lo que tarda en hundirse */
  --tacto-vuelve:var(--ui-medio);   /* .24s · lo que tarda en volver, que es
                                       lo que se ve, y por eso es el largo */
}

/* ══ 1 · TODO LO QUE SE TOCA SE HUNDE ═════════════════════════════════════
   `:active` y no una clase: no hay que acordarse de ponérsela a nada, funciona
   con el dedo igual que con el ratón, y vuelve solo al soltar.
   La lista es DELIBERADAMENTE amplia —cualquier button, cualquier enlace,
   cualquier cosa con rol de botón— porque la versión de antes iba nombrando
   clases una a una y se dejaba la mitad: el lápiz de editar, el menú de la
   cabecera, el nombre de un agente… Todos parecían muertos. */
button, a, [role="button"], summary, label.campo,
.pf-line, .pf-card, .fx-op, .fx-tit, .fx-puesto, .ag, .baja, .op, .t, .t-line{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* ── QUIEN SE ENCIENDE Y QUIEN NO ──────────────────────────────────────────
   Dos variables por elemento, y con eso se decide todo sin repetir reglas:
     --hunde  cuanto se encoge
     --luz    de que color se enciende
   Cada elemento las coge del grupo al que pertenece, y la regla de :active es
   UNA SOLA para el producto entero. El dia que Marc quiera otro tacto se toca
   arriba, en :root, y cambia en todas las pantallas de una vez. */
button, a, [role="button"], summary, label.campo,
.pf-line, .pf-card, .fx-op, .fx-tit, .fx-puesto, .ag, .baja, .op, .t, .t-line{
  --hunde:var(--tacto-escala);
  --luz:var(--tacto-luz);
  transition:transform var(--tacto-vuelve) var(--ui-curva),
             box-shadow var(--tacto-vuelve) var(--ui-curva),
             background-color var(--tacto-vuelve) var(--ui-curva),
             border-color var(--tacto-vuelve) var(--ui-curva),
             color var(--tacto-vuelve) var(--ui-curva),
             opacity var(--tacto-vuelve) var(--ui-curva);
}
/* QUIÉN NO SE ENCIENDE. Y son MENOS de los que puse la primera vez.
   Lo que Marc llamó «un bloque brillante que no pega con la sección» era la
   CABECERA de «Dados de baja» —una fila de rótulo, sin caja, sin borde: ahí un
   lavado de champán no se lee como un botón pulsado, se lee como una mancha—.
   Pero una TARJETA sí tiene caja y borde, y encenderla es exactamente lo que
   dice «te he oído». Al quitarles la luz a las tarjetas se quedaron a medias,
   y eso es lo que se nota al pulsar una ficha de agente.
   Así que sin luz solo las cabeceras de sección, que además se hunden apenas
   porque no son botones. */
.bajas-cab, .fx-tit, .sec-cab{ --luz:transparent; --hunde:var(--tacto-suave) }
/* 🔴 UNA FICHA NO SE ENCIENDE PORQUE PULSES UN BOTÓN DE DENTRO. El :active se
   le pega también a los padres, así que al tocar «Llamar», los tres puntos o
   «Contactado» se encendía la tarjeta ENTERA además del botón. Dos respuestas
   a un solo gesto, y la grande tapa a la pequeña.
   Con :has() la tarjeta se aparta cuando el que se está pulsando es algo suyo
   de dentro: se enciende el botón, que es lo que has tocado, y ya. */
.pf-card:has(button:active, a:active, [role="button"]:active),
.pf-card:has(button.ui-pulsado, a.ui-pulsado){
  --luz:transparent; --hunde:1 }
/* Los botones que son solo un icono: mismo tacto, mas escala, porque son
   pequeños. Ver --tacto-icono. */
.ui-x, .fx-x, .win .x, .lapiz, .menu-btn, .pf-dots, .fx-puesto .x, .limpia-eq{
  --hunde:var(--tacto-icono) }

/* ══ 🔴 LO QUE DESAPARECE AL PULSARLO NO DABA TIEMPO A VERSE ══════════════
   Marc señaló cinco: «Cancelar», «Dejárselo», las «X», «‹ Mi equipo» y clicar
   una ficha de agente. Medidos, los cinco TENÍAN el efecto correcto —0,97 y
   champán, como «+ Añadir»—. Lo que tienen en común es otra cosa: los cinco
   hacen que lo que estás pulsando SE VAYA. Cierras la hoja, cambias de
   pantalla, navegas a la ficha. El :active dura lo que dura el dedo abajo, y
   como el elemento desaparece en ese mismo instante, la vuelta —que es la
   mitad que se ve— no llega a ocurrir nunca. El efecto estaba; no había tiempo
   material de verlo.
   Por eso existe .ui-pulsado: dice lo mismo que :active pero lo pone el
   código y NO se suelta al levantar el dedo. Se pone al pulsar, la acción
   espera un pestañeo, y entonces se va. Es la paciencia de Marc puesta en el
   sitio donde de verdad hacía falta: «prefiero un mínimo de paciencia, que
   haya tiempo a experienciar y saber qué pasa». */
button:not(:disabled):active, a[class]:active, [role="button"]:active,
summary:active, label.campo:active,
.pf-line:active, .pf-card:active, .fx-op:active, .fx-tit:active,
.fx-puesto:active, .ag:active, .baja:active, .op:active, .t-line:active,
.ui-pulsado{
  transform:scale(var(--hunde,1));
  box-shadow:inset 0 0 0 100vmax var(--luz,transparent);
  transition-duration:var(--tacto-entra);
}
/* ⚠️ AQUI HABIA TRES ESCALAS DISTINTAS —.955, .975 y .985— repartidas a mano
   por listas de clases. Eso es exactamente lo que Marc noto: cada cosa se
   sentia de una manera. Ahora la escala es UNA, la del boton «+ Añadir», y
   sale de --tacto-escala. Si algo tuviera que hundirse distinto se le cambia
   --hunde; no se le escribe otro numero suelto.
   Un enlace DENTRO DE UNA FRASE sigue siendo la excepcion de verdad: encoger
   una palabra en medio de un parrafo se lee como un fallo de maquetacion, asi
   que se enciende y no se mueve. */
a:not([class]):active, .pie a:active, .centro a:active, .pf-sub a:active{
  transform:none; box-shadow:none; opacity:.7 }
/* La marca no se encoge: gira un pelo, que es lo que ya hace al pasar. */
/* Y ojo con el peso del selector: la regla comun de arriba es
   a[class]:active, que pesa MAS que .marca:active y se la comia —la marca
   pasaba a encogerse como un boton cualquiera—. Con a.marca:active empatan y
   gana esta, que va despues. Y no se enciende: es un logotipo, no un boton. */
.marca{ --luz:transparent }
a.marca:active .marca-n{ transform:rotate(-8deg) scale(.94) }
a.marca:active{ transform:none; box-shadow:none }

/* Y al pasar por encima, lo que se puede tocar se levanta un pelo. Es lo que
   distingue «esto es una tarjeta» de «esto es un botón grande». */
.ag:hover, .baja:hover, .pf-card:hover{ transform:translateY(-1px) }
/* Al pulsar, la tarjeta pierde el levantamiento del hover —se hunde, no puede
   seguir flotando— y gana la luz, como cualquier otra cosa que se pulsa. */
.ag:active, .baja:active, .pf-card:active{
  transform:translateY(0) scale(var(--hunde,1));
  box-shadow:inset 0 0 0 100vmax var(--luz,transparent) }

/* ── LOS BOTONES DE ICONO TIENEN SITIO DONDE HUNDIRSE ─────────────────────
   Una «X» o un lápiz sueltos no tienen fondo: al pulsarlos no cambia ninguna
   superficie y parecen muertos aunque funcionen. Se les da una caja redonda
   que se enciende al tocar. */
.ui-x, .fx-x, .win .x, .lapiz, .menu-btn, .pf-dots, .fx-puesto .x{
  position:relative; border-radius:10px;
}
.ui-x:hover, .fx-x:hover, .win .x:hover, .lapiz:hover, .menu-btn:hover{
  background:rgba(255,255,255,.07);
}
/* Y al pulsarlos, EL MISMO tacto que todo lo demas: ni escala propia ni fondo
   propio. Antes se encogian un 10 % y se encendian al doble de fuerza que un
   boton, y por eso destacaban como un parpadeo. La luz de arriba les cubre la
   caja entera, que en algo de 36 px se ve de sobra. */
/* El lápiz, además, se inclina: dice «vas a escribir». */
.lapiz svg{ transition:transform var(--ui-medio) var(--ui-curva) }
.lapiz:hover svg{ transform:rotate(-12deg) }

:where(button, a, [role="button"]):focus-visible{
  outline:2px solid var(--gold,#D4B483); outline-offset:2px; border-radius:8px;
}

/* ── EL MENÚ DE LA CABECERA · las tres rayas se convierten en aspa ────────
   Es el ejemplo que pidió Marc con la flecha de «Dados de baja»: el propio
   botón dice en qué estado está, sin leer nada. */
.menu-btn svg path{ transition:transform var(--ui-medio) var(--ui-curva), opacity var(--ui-rapido) }
.menu-btn svg{ overflow:visible }
/* 🔴 LA X SE QUEDABA PUESTA AL CERRAR EL MENÚ PULSANDO FUERA.
   La forma del botón dependía SOLO de aria-expanded, que lo pone el código a
   mano en cada sitio que abre o cierra… y en el panel de admin el cierre por
   clic fuera se olvidaba de ponerlo. O sea: el menú se iba y el botón se
   quedaba en X, diciendo que había algo abierto que ya no estaba.
   Se arregla en los dos sentidos, para que no vuelva:
     · el atributo se sigue mirando (lectores de pantalla lo necesitan);
     · y ADEMÁS se mira si el menú está de verdad abierto, con :has(). Así la
       forma del botón sale de la realidad y no de que alguien se acuerde. */
.menu-btn[aria-expanded="true"] svg path:nth-child(1),
.yo:has(> .panelyo.on) .menu-btn svg path:nth-child(1),
.who:has(> .panelyo.on) .menu-btn svg path:nth-child(1),
.yo:has(> .panel.on) .menu-btn svg path:nth-child(1){ transform:translateY(5px) rotate(45deg) }
.menu-btn[aria-expanded="true"] svg path:nth-child(2),
.yo:has(> .panelyo.on) .menu-btn svg path:nth-child(2),
.who:has(> .panelyo.on) .menu-btn svg path:nth-child(2),
.yo:has(> .panel.on) .menu-btn svg path:nth-child(2){ opacity:0 }
.menu-btn[aria-expanded="true"] svg path:nth-child(3),
.yo:has(> .panelyo.on) .menu-btn svg path:nth-child(3),
.who:has(> .panelyo.on) .menu-btn svg path:nth-child(3),
.yo:has(> .panel.on) .menu-btn svg path:nth-child(3){ transform:translateY(-5px) rotate(-45deg) }
.menu-btn svg path{ transform-origin:center; transform-box:fill-box }

/* El desplegable del menú también SUBE, no aparece. */
.panel, .panelyo{
  transform-origin:top right;
  transition:opacity var(--ui-rapido) var(--ui-curva), transform var(--ui-rapido) var(--ui-curva),
             visibility 0s var(--ui-rapido);
  opacity:0; transform:translateY(-8px) scale(.97); visibility:hidden;
  display:block!important;                 /* lo esconde la visibilidad, no el display */
  pointer-events:none;
}
.panel.on, .panelyo.on{
  opacity:1; transform:none; visibility:visible; pointer-events:auto;
  transition:opacity var(--ui-rapido) var(--ui-curva), transform var(--ui-rapido) var(--ui-curva), visibility 0s;
}

/* ══ 2 · LO QUE SE ABRE, CRECE. NUNCA APARECE ═════════════════════════════
   El truco de las dos filas de rejilla (0fr → 1fr) es la única forma de
   animar hasta «lo que mida» sin saber cuánto mide. `display:none` daba el
   parpadeo que Marc odia: el texto entra de golpe y empuja la página. */
.ui-crece{ display:grid; grid-template-rows:0fr;
  transition:grid-template-rows var(--ui-medio) var(--ui-curva), opacity var(--ui-rapido);
  opacity:.4 }
.ui-crece > *{ overflow:hidden; min-height:0 }
.ui-crece.on{ grid-template-rows:1fr; opacity:1 }

/* ══ 3 · MIENTRAS TRABAJA, SE VE QUE TRABAJA ══════════════════════════════ */
.ui-esperando{ position:relative; pointer-events:none; opacity:.75 }
.ui-esperando::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  background-size:220% 100%; animation:ui-barrido 1.05s ease-in-out infinite;
}
@keyframes ui-barrido{ 0%{background-position:180% 0} 100%{background-position:-80% 0} }

/* ══ LO QUE CAMBIA, SE DICE ═══════════════════════════════════════════════ */
.ui-avisos{
  position:fixed; left:12px; right:12px; z-index:200;
  bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  display:flex; flex-direction:column-reverse; align-items:center; gap:8px;
  pointer-events:none;
}
.ui-aviso{
  display:flex; align-items:center; gap:11px;
  max-width:460px; width:100%;
  padding:13px 16px; border-radius:12px;
  background:var(--card-hi,#231F1A);
  border:1px solid var(--edge-gold,rgba(212,180,131,.24));
  box-shadow:0 16px 44px rgba(0,0,0,.55);
  font-size:14.5px; line-height:1.4; color:var(--txt,#F2EEE6);
  transform:translateY(16px) scale(.96); opacity:0;
  transition:transform var(--ui-lento) var(--ui-curva), opacity var(--ui-medio);
  pointer-events:auto; cursor:pointer;
}
.ui-aviso.on{ transform:none; opacity:1 }
.ui-aviso .ico{
  width:22px; height:22px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(212,180,131,.18); color:var(--gold,#D4B483);
}
.ui-aviso .ico svg{ width:13px; height:13px; stroke:currentColor; fill:none;
  stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:24; stroke-dashoffset:24; animation:ui-traza .42s var(--ui-curva) .1s forwards }
@keyframes ui-traza{ to{ stroke-dashoffset:0 } }
.ui-aviso.malo{ border-color:rgba(204,129,99,.5) }
.ui-aviso.malo .ico{ background:rgba(204,129,99,.18); color:var(--copper,#CC8163) }
.ui-aviso b{ font-weight:600; color:var(--gold,#D4B483) }
@media (min-width:640px){ .ui-avisos{ left:auto; right:22px; bottom:22px; align-items:flex-end } }

/* Dónde ha pasado: la fila que acaba de cambiar se enciende un segundo. */
@keyframes ui-nuevo{
  0%{ background-color:rgba(212,180,131,.22); box-shadow:0 0 0 1px var(--gold,#D4B483) inset }
  100%{ background-color:transparent; box-shadow:0 0 0 1px transparent inset }
}
.ui-tocado{ animation:ui-nuevo 1.5s ease-out }

/* ══ VOLVER · un botón, no un texto suelto ════════════════════════════════ */
.ui-volver{
  display:inline-flex; align-items:center; gap:9px;
  min-height:46px; padding:0 17px 0 13px; border-radius:99px;
  border:1px solid var(--edge,#2C2620); background:var(--card,#1C1915);
  color:var(--txt-2,#B3AA9A); font-size:14.5px; font-weight:500;
}
.ui-volver:hover{ border-color:var(--edge-gold,rgba(212,180,131,.24));
  color:var(--txt,#F2EEE6); background:var(--card-hi,#231F1A) }
.ui-volver:active{ transform:scale(var(--hunde,1)) }
.ui-volver svg{ width:16px; height:16px; flex:none; stroke:currentColor; fill:none;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform var(--ui-medio) var(--ui-curva) }
.ui-volver:hover svg{ transform:translateX(-3px) }

/* ══ CAMBIAR DE PANTALLA NO ES UN PARPADEO ════════════════════════════════ */
/* 4 · Y el cambio de vista, con el tiempo del molde en vez de un .22s suelto.
   Es lo mismo que se pedía para los botones: que dé tiempo a ver que ha
   pasado algo, en vez de un corte seco. */
.vista.on{ animation:ui-entra var(--tacto-vuelve) var(--ui-curva) }
@keyframes ui-entra{
  from{ opacity:0; transform:translateY(8px) }
  to{ opacity:1; transform:none }
}
/* Y las fichas de una lista entran escalonadas: se ve que son varias cosas y
   no un bloque que aparece. Solo las diez primeras — a partir de ahí el
   retraso se notaría como lentitud. */
@keyframes ui-cae{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
/* 🔴 AQUÍ ESTABA LA «EPILEPSIA».
   ──────────────────────────────────────────────────────────────────────────
   Marc: «entrar a sitios y sentir epilepsia al hacer varias cosas dentro del
   producto… y no es siempre, sino que a veces sí pasa».
   Y el «a veces» es la pista: esta animación se dispara CADA VEZ QUE NACE UNA
   TARJETA, no cada vez que se entra. O sea, cada vez que una lista se
   reconstruye —cambiar un filtro, cambiar el orden, volver a Leads, entrar en
   una ficha, guardar cualquier cosa— las cuarenta tarjetas vuelven a caer,
   escalonadas, aunque digan exactamente lo mismo que antes. Aparecer una vez
   es bonito; aparecer cada vez que tocas algo es un parpadeo.
   Ahora solo cae lo que se ve por PRIMERA vez: la clase la pone quien pinta y
   se quita sola cuando la lista ya está puesta. Los repintados posteriores no
   la llevan, así que no se mueve nada.
   ⚠️ Y la reconciliación no la necesita nunca: ahí las tarjetas ni se tocan. */
.pf-rows.recien > .pf-card{ animation:ui-cae .3s var(--ui-curva) backwards }
.pf-rows > .pf-card:nth-child(1){ animation-delay:0ms }
.pf-rows > .pf-card:nth-child(2){ animation-delay:35ms }
.pf-rows > .pf-card:nth-child(3){ animation-delay:70ms }
.pf-rows > .pf-card:nth-child(4){ animation-delay:105ms }
.pf-rows > .pf-card:nth-child(5){ animation-delay:140ms }
.pf-rows > .pf-card:nth-child(6){ animation-delay:170ms }
.pf-rows > .pf-card:nth-child(7){ animation-delay:195ms }
.pf-rows > .pf-card:nth-child(8){ animation-delay:215ms }
.pf-rows > .pf-card:nth-child(n+9){ animation-delay:230ms }

/* ══════════════════════════════════════════════════════════════════════════
   LAS HOJAS · UNA SOLA MANERA DE ABRIR ALGO ENCIMA
   ──────────────────────────────────────────────────────────────────────────
   Marc: «los pop-ups que no sean centrados; que se puedan deslizar hacia
   abajo; y que no se pueda clicar fuera ni deslizar el fondo».
   Las tres cosas tienen la misma razón: CONTROL. Una ventana centrada aparece
   de la nada y no se sabe por dónde se fue; una hoja sube desde abajo, por
   donde está el pulgar, y se va por donde vino.
   ══════════════════════════════════════════════════════════════════════════ */
.ui-sheet{
  /* Lo que hay que desplazar en horizontal para quedar centrada: 0 en móvil,
     -50% en PC. En una variable porque el arrastre reescribe el transform
     entero y tiene que saber cuál de las dos es. */
  --ui-dx:0;
  position:fixed; left:0; right:0; bottom:0; z-index:81;
  display:flex; flex-direction:column;
  max-height:88svh;
  background:var(--card,#1C1915);
  border:1px solid var(--edge-gold,rgba(212,180,131,.24)); border-bottom:0;
  border-radius:18px 18px 0 0;
  box-shadow:0 -22px 60px rgba(0,0,0,.62);
  transform:translateY(101%);
  /* Apagada está fuera de pantalla, pero además OCULTA: si no, sus botones
     siguen en el recorrido del tabulador y se llega con el teclado a una hoja
     que nadie ve. La visibilidad se retrasa para que la salida se vea. */
  visibility:hidden;
  transition:transform var(--ui-lento) var(--ui-curva), visibility 0s var(--ui-lento);
  will-change:transform;
}
.ui-sheet.on{
  transform:translateY(0); visibility:visible;
  transition:transform var(--ui-lento) var(--ui-curva), visibility 0s;
}
.ui-sheet.ui-arrastrando{ transition:none }
@media (min-width:640px){
  .ui-sheet{ --ui-dx:-50%;
    left:50%; right:auto; transform:translate(-50%,101%);
    width:min(560px,94vw); max-height:82svh }
  .ui-sheet.on{ transform:translate(-50%,0) }
}
/* El asa: es lo que dice «de aquí se tira». Sin ella, deslizar es un secreto. */
.ui-asa{ flex:none; padding:10px 0 4px; display:grid; place-items:center;
  cursor:grab; touch-action:none }
.ui-asa::before{ content:""; width:44px; height:4px; border-radius:99px;
  background:var(--edge-gold,rgba(212,180,131,.24));
  transition:background var(--ui-rapido), width var(--ui-rapido) var(--ui-curva) }
.ui-asa:hover::before{ background:var(--gold,#D4B483); width:56px }
.ui-sheet.ui-arrastrando .ui-asa{ cursor:grabbing }
.ui-sheet.ui-arrastrando .ui-asa::before{ background:var(--gold,#D4B483); width:56px }

/* 🔴 `pointer-events:none` MIENTRAS ESTÁ APAGADO, Y NO ES UN DETALLE.
   Sin ella el velo apagado sigue ahí —transparente, pero ocupando la pantalla
   entera a z-index 80— y se come TODOS los clics de la página: no se podía
   pulsar nada. Y no lo cacé probando porque probaba con `elemento.click()`,
   que dispara el evento a mano y no mira si hay algo encima. Lo que hay que
   mirar es `document.elementFromPoint(x,y)`. */
.ui-velo{ position:fixed; inset:0; z-index:80; background:rgba(10,9,7,.76);
  opacity:0; pointer-events:none; transition:opacity var(--ui-medio); cursor:default;
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px) }
.ui-velo.on{ opacity:1; pointer-events:auto }
body.fx-quieto{ position:fixed; left:0; right:0; width:100%; overflow:hidden }

/* ══════════════════════════════════════════════════════════════════════════
   LA MARCA · una sola definición para las cinco pantallas
   ──────────────────────────────────────────────────────────────────────────
   La «N» de antes se confundía con la agencia: en la cabecera se leía
   «N RE/MAX Amanecer» y no se sabía qué era cada cosa.
   El símbolo nuevo es una N dibujada de un trazo con un nudo en cada extremo
   de la diagonal: es la letra y es una conexión —dos puntos unidos—, que es
   lo que hace el producto. Va en el masque de CSS y no como SVG suelto para
   que sea EL MISMO en login, alta, producto y la página pública, sin copiarlo
   cinco veces y sin esperar a que cargue JavaScript.
   ══════════════════════════════════════════════════════════════════════════ */
.marca{ display:inline-flex; align-items:center; gap:11px; min-width:0 }
.marca-n{
  width:32px; height:32px; flex:none; display:block;
  background:linear-gradient(150deg, var(--gold-soft,#E8D6B4), var(--gold,#D4B483) 62%);
  -webkit-mask:var(--marca-svg) center/contain no-repeat;
          mask:var(--marca-svg) center/contain no-repeat;
  transition:transform var(--ui-lento) var(--ui-curva), filter var(--ui-medio);
}
:root{
  --marca-svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g fill='none' stroke='%23000' stroke-width='3.1' stroke-linecap='round' stroke-linejoin='round'><path d='M8.5 25.5V6.5L23.5 25.5V6.5'/></g><circle cx='8.5' cy='6.5' r='3.1' fill='%23000'/><circle cx='23.5' cy='25.5' r='3.1' fill='%23000'/></svg>");
}
a:hover > .marca-n, .marca:hover .marca-n{ transform:rotate(-4deg) scale(1.06) }
.marca-txt{ font-size:17px; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--txt,#F2EEE6); white-space:nowrap }
/* La agencia va DETRÁS de una raya, en otro peso y otro color: así se lee
   «Novoconect, de RE/MAX Amanecer» y no «N RE/MAX Amanecer». */
.marca-sep{ width:1px; height:20px; flex:none; background:var(--edge,#2C2620) }
.marca-ag{ font-size:14.5px; font-weight:500; color:var(--txt-3,#8A8175);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0 }
/* 🔴 EN MÓVIL SE QUEDA LA MARCA, NO LA AGENCIA.
   Antes se escondía «NOVOCONECT» por falta de sitio y quedaba el símbolo
   pegado a «RE/MAX Amanecer»: exactamente lo que Marc no entendía —«N RE/MAX
   Amanecer», y el símbolo sin explicar—. El nombre del producto es lo único
   que no puede faltar; la agencia ya la sabe quien la usa, y además está en el
   menú, debajo de su nombre. */
@media (max-width:430px){
  .marca-txt{ font-size:15px; letter-spacing:.11em }
  .marca-sep, .marca-ag{ display:none }
}

/* ══ EL SALUDO ════════════════════════════════════════════════════════════
   «Buenos días, Marc». Cuesta una línea y cambia lo que se siente al entrar:
   la pantalla sabe quién eres y qué hora es. */
.saludo{ font-family:var(--serif,Georgia,serif); font-weight:500;
  font-size:clamp(21px,5.5vw,26px); letter-spacing:-.01em; margin:0;
  color:var(--txt,#F2EEE6); animation:ui-entra .4s var(--ui-curva) }
.saludo b{ color:var(--gold,#D4B483); font-weight:500 }
.saludo-sub{ margin:5px 0 0; font-size:14.5px; color:var(--txt-3,#8A8175) }

@media (prefers-reduced-motion: reduce){
  *, *::after, *::before{ animation:none!important; transition-duration:.01ms!important }
  button:active, .pf-line:active, .ag:active, .baja:active{ transform:none!important }
}

/* ══ LA FRANJA DE «ESTÁS MIRANDO COMO ADMINISTRADOR» ══════════════════════
   Cobre, que es el color que este producto usa para «ojo con esto», y pegada
   arriba del todo. EMPUJA la página en vez de flotar por encima: lo que flota
   se lee como un aviso que se va, y esto no se va hasta que sales. */
.ui-admin{
  position:fixed; top:0; left:0; right:0; z-index:120;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:9px 16px calc(9px); min-height:46px;
  /* ⚠️ COBRE PROPIO, no el --copper del tema. Medido: marfil sobre el cobre
     del producto (#CC8163) da 3,00:1 — por debajo de 4,5, o sea que el texto
     de la franja se leia mal justo en el sitio donde mas importa entenderlo.
     Con #A8410F da 6,02:1. Es el mismo cobre, con menos luz. */
  background:#A8410F; color:#FFFDF7;
  font-family:var(--sans,system-ui); font-size:14px; font-weight:500;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
}
.ui-admin-ojo{ display:grid; place-items:center; flex:none }
.ui-admin-ojo svg{ width:18px; height:18px; stroke:currentColor; fill:none;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round }
.ui-admin-t{ flex:1; min-width:0 }
.ui-admin-t b{ font-weight:700 }
.ui-admin-x, .ui-admin-modo{
  flex:none; min-height:34px; padding:0 13px; border-radius:7px;
  border:1px solid rgba(255,253,247,.55); background:rgba(255,253,247,.12);
  color:#FFFDF7; font:inherit; font-weight:600; cursor:pointer;
  --luz:rgba(255,253,247,.22);
}
.ui-admin-modo{ background:#FFFDF7; color:#A8410F; border-color:#FFFDF7 }
.ui-admin-modo:hover{ background:#fff }
/* ACTUANDO · rojo, y el rojo no es decorativo: es la unica diferencia visible
   entre estar mirando y poder cambiarle las cosas a un cliente. Medido: marfil
   sobre #8E1B0E da 8,92:1. */
.ui-admin.actuando{ background:#8E1B0E }
.ui-admin.actuando .ui-admin-modo{ background:rgba(255,253,247,.12); color:#FFFDF7;
  border-color:rgba(255,253,247,.55) }
.ui-admin.actuando .ui-admin-t b{ letter-spacing:.06em }
.ui-admin-x:hover{ background:rgba(255,253,247,.22) }
.ui-admin-x:disabled{ opacity:.6; cursor:default }
/* El hueco lo pone el script midiendo la franja: escrito a mano se queda
   corto en cuanto el nombre de una agencia hace que el texto pase a dos
   lineas, y la cabecera del producto se mete debajo. */
body.con-franja-admin{ padding-top:46px }

/* ══════════════════════════════════════════════════════════════════════════
   LA HOJA DE CONFIRMAR · la que le gusta a Marc, para todo lo importante
   ══════════════════════════════════════════════════════════════════════════ */
.ui-confirma .cab{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 20px 12px; border-bottom:1px solid var(--edge,#2C2620); flex:none }
.ui-confirma .cab h2{ margin:0; font-family:var(--serif,Georgia,serif); font-weight:500; font-size:21px }
.ui-confirma .ui-x{ width:44px; height:44px; flex:none; border:0; background:none; cursor:pointer;
  display:grid; place-items:center; color:var(--txt-3,#8A8175) }
.ui-confirma .ui-x svg{ width:18px; height:18px; stroke:currentColor; fill:none;
  stroke-width:2.2; stroke-linecap:round }
.ui-conf-cuerpo{ padding:18px 20px 6px; overflow:auto }
.ui-conf-txt{ margin:0; font-size:16px; line-height:1.55; color:var(--txt-2,#B3AA9A) }
.ui-conf-txt b{ color:var(--txt,#F2EEE6); font-weight:600 }
/* Lo que hace daño se ve que hace daño ANTES de pulsar nada. */
.ui-conf-txt.malo{ padding:13px 15px; border-radius:9px;
  background:rgba(204,129,99,.09); border-left:3px solid var(--copper,#CC8163) }
.ui-conf-pie{ display:flex; gap:9px; flex-wrap:wrap; align-items:center; flex:none;
  padding:16px 20px calc(18px + env(safe-area-inset-bottom,0px)) }
.ui-conf-no, .ui-conf-si{ min-height:52px; padding:0 22px; border-radius:8px; font:inherit;
  font-size:15px; font-weight:600; cursor:pointer; white-space:nowrap; width:auto }
.ui-conf-no{ background:none; border:1px solid var(--edge,#2C2620); color:var(--txt-2,#B3AA9A); flex:0 1 auto }
.ui-conf-no:hover{ border-color:var(--edge-gold,rgba(212,180,131,.24)); color:var(--txt,#F2EEE6) }
.ui-conf-si{ background:var(--gold,#D4B483); color:#14120F; border:0; flex:1 1 auto }
.ui-conf-si:hover{ background:var(--gold-soft,#E8D6B4); box-shadow:0 8px 26px rgba(212,180,131,.26) }
.ui-conf-si.malo{ background:var(--copper,#CC8163); color:#fff }
.ui-conf-si.malo:hover{ background:#D9906F; box-shadow:0 8px 26px rgba(204,129,99,.3) }

/* ══════════════════════════════════════════════════════════════════════════
   PLEGADOS SIN HUECO · el padding no puede sobrevivir al cierre
   ──────────────────────────────────────────────────────────────────────────
   El plegado va con `grid-template-rows: 0fr → 1fr`, que anima de verdad y no
   parpadea. Pero un hijo con `padding` y `box-sizing:border-box` NO puede
   medir cero: el relleno se queda, y quedaba una franja de 12 px abierta bajo
   «Dados de baja» y de 20 px bajo cada ficha cerrada. Se le quita el relleno
   vertical mientras está cerrado; como está recortado, el cambio no se ve.
   ══════════════════════════════════════════════════════════════════════════ */
/* 🔴 …PERO QUITARLO DE GOLPE ES EL TIRÓN AL CERRAR. Marc: «en la cuenta de
   agente el cerrar fichas se cierra más brusco». Y era esto: la fila del grid
   se cierra en 280 ms, con su curva, pero estos 40 px de relleno desaparecían
   en el fotograma en que se quita la clase. O sea, la ficha daba un salto seco
   y DESPUÉS terminaba de cerrarse suave. Se nota más en la pantalla del agente
   porque sus fichas llevan botones dentro y el relleno pesa más.
   El relleno se va CON el plegado, en el mismo tiempo y con la misma curva. */
.bajas-dentro, .pf-more-in{
  transition:padding-top .28s var(--ui-curva), padding-bottom .28s var(--ui-curva) }
.bajas-lista:not(.on) > .bajas-dentro{ padding-top:0; padding-bottom:0 }
.pf-card:not(.abierta) .pf-more-in{ padding-top:0; padding-bottom:0 }

/* ══════════════════════════════════════════════════════════════════════════
   IRSE DE LA LISTA SIN DEJAR EL HUECO
   ──────────────────────────────────────────────────────────────────────────
   Marc: «al irse deberían los de abajo subir arriba, si no se queda hueco».
   No basta con desvanecer la ficha: mientras siga ocupando su alto, los de
   abajo no se mueven. Aquí se va en dos tiempos —se desvanece y se desliza, y
   a la vez su alto y su hueco se van a cero—, así que la lista se cierra sola
   por encima de ella.
   El `margin-bottom` negativo se come el `gap` de la columna, que si no se
   quedaría como una franja vacía.
   ══════════════════════════════════════════════════════════════════════════ */
.pf-card.yendose, .t.yendose{
  opacity:0; transform:translateX(26px);
  max-height:0!important; margin-bottom:-9px!important;
  padding-top:0; padding-bottom:0; border-width:0;
  overflow:hidden; pointer-events:none;
  transition:opacity .19s ease-in, transform .24s var(--ui-curva),
             max-height .28s var(--ui-curva), margin-bottom .28s var(--ui-curva),
             border-width .2s, padding .2s;
}

/* La agencia, dentro del menú de «quién soy»: en móvil la cabecera solo tiene
   sitio para la marca, así que aquí es donde se comprueba en qué casa estás. */
.panel .quien em, .panelyo .quien em{
  display:block; margin-top:3px; font-style:normal; font-size:13.5px;
  color:var(--txt-3,#8A8175);
}

/* ── LOS QUE TRAEN SU PROPIA TRANSICIÓN ───────────────────────────────────
   `.pf-act`, `.fx-abre` y compañía declaran su transition en ficha.css y
   filtros.css, y una regla de clase gana a la de elemento de más arriba: se
   quedaban sin animar el `transform`, así que se hundían DE GOLPE en vez de
   hundirse. Aquí se les devuelve, sin quitarles la suya. */
.pf-act, .pf-ghost, .pf-mark, .pf-dots, .pf-qmore, .fx-abre, .fx-puesto,
.fx-ok, .fx-no, .fx-x, .t-act, .t-ghost, .t-hecho, .verhechos, .mas,
.ui-conf-si, .ui-conf-no, .ui-volver, .bajas-cab, .lapiz, .menu-btn, .baja, .ag,
.t, .t-line, .pf-line, .fx-tit, .fx-op, .op, .re, .otra{
  transition:transform var(--tacto-vuelve) var(--ui-curva),
             box-shadow var(--tacto-vuelve) var(--ui-curva),
             background-color var(--tacto-vuelve) var(--ui-curva),
             border-color var(--tacto-vuelve) var(--ui-curva),
             color var(--tacto-vuelve) var(--ui-curva),
             opacity var(--tacto-vuelve) var(--ui-curva);
}
/* Y los dos que más se pulsan se levantan al pasar por encima: dicen «esto es
   lo que vienes a hacer». */
.pf-act:hover, .t-act:hover, .ui-conf-si:hover{ transform:translateY(-1px) }
.pf-act:active, .t-act:active, .ui-conf-si:active{
  transform:translateY(0) scale(var(--hunde,1)) }

/* ══════════════════════════════════════════════════════════════════════════
   EL :hover PEGADO · SOLO PARA RATÓN
   ──────────────────────────────────────────────────────────────────────────
   En un móvil no hay puntero: al tocar algo, el navegador le deja el :hover
   PEGADO hasta que se toca otra cosa. Por eso al abrir «Provincia» la primera
   opción salía iluminada, como si el ratón estuviera encima, y parecía
   elegida sin estarlo.

   Lo que engaña es el HOVER QUE PINTA UNA SUPERFICIE —un fondo, un borde
   encendido—, porque es lo mismo que usamos para decir «esto está puesto». El
   que solo cambia el color de un texto no confunde a nadie, y se queda.

   Así que aquí, y solo donde no hay puntero, se apaga el fondo y el borde de
   lo que se puede tocar en una lista. `@media (hover:none)` es exactamente la
   pregunta «¿este aparato tiene ratón?».
   ══════════════════════════════════════════════════════════════════════════ */
@media (hover: none){
  /* Las opciones de un filtro y las de una ventana: son las que se leían como
     «ya elegida». La que SÍ está elegida lleva `.on` y no pasa por aquí. */
  .fx-op:hover:not(.on){ background:transparent }
  .op:hover:not(.on){ background:transparent; color:var(--txt-2,#B3AA9A) }
  .fx-tit:hover, .bajas-cab:hover{ color:var(--txt-3,#8A8175) }

  /* Tarjetas y filas: el hover las levanta y les enciende el borde, que es la
     misma señal que «esta es la abierta». */
  .ag:hover, .baja:hover, .pf-card:hover, .t:hover{
    transform:none; border-color:var(--edge,#2C2620); background:var(--card,#1C1915);
  }
  .pf-card.abierta:hover, .t.abierta:hover{
    border-color:var(--edge-gold,rgba(212,180,131,.24)); background:var(--card-hi,#231F1A);
  }
  .baja:hover{ background:transparent; opacity:.82 }

  /* Los botones de icono: su hover es una caja gris que se quedaba encendida. */
  .ui-x:hover, .fx-x:hover, .win .x:hover, .lapiz:hover, .menu-btn:hover,
  .panel a:hover, .panel button:hover, .panelyo a:hover, .panelyo button:hover{
    background:transparent;
  }
  .lapiz:hover svg{ transform:none }
  .ui-volver:hover svg{ transform:none }
  .marca:hover .marca-n, a:hover > .marca-n{ transform:none }
  .ui-asa:hover::before{ background:var(--edge-gold,rgba(212,180,131,.24)) }

  /* Y el `:active` sí se queda: en táctil es el que dice «te he oído». */
}

/* ══════════════════════════════════════════════════════════════════════════
   EL TACTO DE REFERENCIA · el de «Agente / Responsable»
   ──────────────────────────────────────────────────────────────────────────
   Marc ha señalado ese botón como EL molde: se hunde de verdad y a la vez la
   superficie se enciende en champán. Dos cosas a la vez, y por eso se siente.

   🔴 POR QUÉ EL BARRIDO DE AYER DIO 0 Y ESTOS SE ESCAPARON. El barrido
   preguntaba «¿existe una regla :active que toque a este elemento?». Existía…
   y era `scale(.985)` o `scale(.99)`: un 1 % de encogimiento, que no lo nota
   nadie. Medía si HABÍA efecto, no si SE SENTÍA. Y login.html ni siquiera
   estaba en la lista de pantallas del barrido.
   Aquí se iguala todo al molde, y el barrido nuevo exige un mínimo.
   ══════════════════════════════════════════════════════════════════════════ */
/* 🔴 3.2 · AQUI VIVIA EL BUG DE LA FLECHA ENCIMA DE LA FICHA.
   ──────────────────────────────────────────────────────────────────────────
   La luz al pulsar se pintaba en un ::after con position:absolute e inset:0.
   Pero la ficha YA USA su ::after para otra cosa: la flecha de desplegar
   (ficha.css, .pf-line::after — un cuadradito de 11 px con dos bordes, girado
   45°). Un elemento solo tiene UN ::after. Al pulsar la ficha, esa flecha
   dejaba de ser una flecha al pie de la tarjeta y pasaba a ser una caja del
   tamaño de la tarjeta ENTERA —inset:0— conservando sus dos bordes de 2 px
   girados. Eso es «la flecha de expansion aparece encima de la ficha»: no
   aparecia otra flecha, era la misma reventada.
   Se quita el pseudo-elemento entero. La luz ahora es una sombra interior, en
   la regla de :active de arriba, que ademas SI se puede desvanecer.
   ⚠️ Y la regla para el futuro: no se pinta con ::before/::after sobre una
   lista amplia de selectores. No sabes cual de ellos ya lo estaba usando.

   Los enlaces que van SOLOS en su linea son destinos, no palabras dentro de
   un parrafo: se hunden como cualquier boton y con el mismo tacto. Marc los
   nombro uno a uno —«¿Has olvidado la contraseña?», «Escribenos», «¿Que es
   Novoconect?», «Ir a iniciar sesion»—. */
.pie a:active, .centro a:active, .que:active, .olvido:active, .olvide:active,
.ayuda a:active, .enlace-abajo:active{
  transform:scale(var(--tacto-escala)); opacity:1;
  box-shadow:inset 0 0 0 100vmax var(--tacto-luz);
}

/* ⚠️ NINGÚN CAMPO POR DEBAJO DE 16px EN UN MÓVIL. Da igual lo que diga la
   regla de su pantalla: en iOS, enfocar un campo más pequeño amplía la página
   sola y no vuelve —se queda torcida hasta que uno pellizca para salir—. Esto
   es el suelo, y vive aquí para que el campo que se escriba mañana lo herede
   sin que nadie tenga que acordarse de esta nota.
   El max() respeta a quien pide MÁS de 16; solo levanta a los que piden menos. */
@media (max-width: 767px){
  input, select, textarea { font-size: max(16px, 1em) }
}

/* ══════════════════════════════════════════════════════════════════════════
   EL BRILLO DE LA N · aparece, traza la letra y se apaga
   ──────────────────────────────────────────────────────────────────────────
   Vive AQUÍ y no en login.html porque el símbolo vive aquí: así brilla igual
   en las siete pantallas —login, activar, el panel, la lista del agente, el
   admin, /que-es y sin-agencia— y no solo en la de entrar.

   🔴 Y AHORA TRAZA LAS LÍNEAS DE VERDAD. La versión anterior movía el punto
   entre posiciones a ojo (27% y 73%), y con un punto del 62% de la caja esos
   números caen en el 41% y el 59% reales: la luz pasaba por el centro, no por
   el trazo. Las posiciones de abajo están CALCULADAS desde el propio path de
   la marca —M8.5 25.5 V6.5 L23.5 25.5 V6.5, en un viewBox de 32— con la
   fórmula que relaciona background-position con la coordenada real:
       posición = (coordenada − tamaño/2) ÷ (100 − tamaño)
   Con un punto del 40%, los cuatro vértices caen en 10,9% / 89,1% en x y
   0,5% / 99,5% en y. Ahí sí va POR la letra.

   Y el tiempo se reparte por la LONGITUD de cada tramo —19, 24,2 y 19, o sea
   30,5% · 38,9% · 30,5%— para que la luz vaya a velocidad constante y no
   acelere en la diagonal.

   El aparecer y el irse son de tamaño, no de posición: el punto CRECE desde
   cero y ENCOGE hasta cero, en tres pasos cada uno para que el fundido sea
   suave. A tamaño cero no hay nada que ver, así que no hay ni entrada ni
   salida por la puerta: se enciende y se apaga donde está.
   Del ciclo de 30 s, se ve 4,2: 0,6 de encendido, 3 de recorrido y 0,6 de
   apagado. De los efectos que no se notan pero se sienten.
   ══════════════════════════════════════════════════════════════════════════ */
.marca-n{
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,253,247,.98) 0 16%, rgba(255,247,229,.60) 38%, rgba(255,247,229,0) 66%) no-repeat,
    linear-gradient(150deg, var(--gold-soft,#E8D6B4), var(--gold,#D4B483) 62%);
  background-size:0% 0%, 100% 100%;
  background-position:10.9% 99.5%, 0 0;
  animation:marca-brillo 30s linear infinite;
}
@keyframes marca-brillo{
  /* encender, quieto en el pie izquierdo */
  0%     { background-position:10.9% 99.5%, 0 0; background-size:0% 0%,   100% 100% }
  0.7%   { background-position:10.9% 99.5%, 0 0; background-size:18% 18%, 100% 100% }
  1.6%   { background-position:10.9% 99.5%, 0 0; background-size:40% 40%, 100% 100% }
  /* el trazo: sube por la izquierda, baja la diagonal, sube por la derecha */
  4.65%  { background-position:10.9% 0.5%,  0 0; background-size:40% 40%, 100% 100% }
  8.55%  { background-position:89.1% 99.5%, 0 0; background-size:40% 40%, 100% 100% }
  11.6%  { background-position:89.1% 0.5%,  0 0; background-size:40% 40%, 100% 100% }
  /* apagar donde ha llegado, sin tirones */
  12.5%  { background-position:89.1% 0.5%,  0 0; background-size:18% 18%, 100% 100% }
  13.2%  { background-position:89.1% 0.5%,  0 0; background-size:0% 0%,   100% 100% }
  /* y el resto del ciclo, apagada */
  100%   { background-position:10.9% 99.5%, 0 0; background-size:0% 0%,   100% 100% }
}
/* Con la pestaña de fondo se para: un brillo que nadie mira es batería tirada. */
.marca-n.quieta{ animation-play-state:paused }
@media (prefers-reduced-motion:reduce){ .marca-n{ animation:none } }