/* =====================================================================================================================
   login-kit.css — la pantalla de entrar común (diseño «A · Sello animado», elegido por Robert el 11-nov-2026).
   EL MISMO ARCHIVO en Contabilidad (contabilidad/login-kit.css) y en la Caja (public/css/login-kit.css), con su login-kit.js.
   Todo cuelga de .lk y de clases lk-*: no toca nada de la app y la app no le toca (las dos tienen .btn, .sub, .enlace…).
   Verde de noche con una luz dorada QUIETA (la guía de la casa: «brillo dorado quieto»); lo único que se mueve es la entrada:
   el aro del sello se dibuja, el oro brilla una vez y la tarjeta sube, todo en menos de un segundo.
   Sin color-mix() (iOS < 16.2): los tonos con transparencia van con rgba fijos. Kings: bronce.
   LOS TEMAS (12-nov-2026, Robert: «hazlo diferente diseño de cada app»): la tarjeta, los campos, los botones y los avisos son los mismos en
   todas (la misma casa); cada app cambia sus colores, la letra del nombre, su sello o su dibujo, el fondo y, en el ordenador, la maqueta.
     spoons · kings ......... la Caja (verde y oro con el sello de la cuchara; bronce con el letrero de Kings)
     conta .................. Contabilidad: claro como por dentro, el azulejo verde de las barras; en el ordenador, el lateral verde a la izquierda
     horario ................ la semana: papel y marrón (los colores de la foto del horario) o, con el aparato en oscuro, el verde de noche
     avisos ................. el tablón: grafito, ámbar y el punto de «hay algo»
     redes .................. la parrilla de publicaciones: granate de noche y champán
     resenas ................ cinco estrellas en un cielo de noche; en el ordenador, la cita grande a la izquierda
     remesas ................ la tesorería: tinta azul petróleo con la roseta de guilloché de los billetes
     sale-spoons · sale-kings el panel de las webs .sale: claro como una invitación (crema y oro viejo; verde oliva y oro)
   Cada tema = sus variables (.lk[data-tema=…]) + lo suyo más abajo. data-maqueta="lado" (≥1100 px) y data-cab="fila" los pone login-kit.js.
   ===================================================================================================================== */
.lk {
  --lk-f-ui: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lk-f-disp: "Cinzel", "Trajan Pro", Georgia, serif;
  --lk-g0: #06120E; --lk-g1: #0A1C16; --lk-g2: #10291F; --lk-g3: #1A3F33;
  --lk-meta: #0A1C16;
  --lk-fondo-bg: radial-gradient(130% 90% at 50% -12%, var(--lk-g3) 0%, var(--lk-g2) 32%, var(--lk-g1) 62%, var(--lk-g0) 100%);
  --lk-ac: #D4AF37; --lk-ac-claro: #E9D48F;
  --lk-luz1: rgba(212,175,55,.20); --lk-luz2: rgba(44,132,98,.32); --lk-luz3: rgba(233,212,143,.09);
  --lk-halo1: rgba(233,212,143,.24); --lk-halo2: rgba(233,212,143,.05);
  --lk-disco1: rgba(233,212,143,.13); --lk-disco2: rgba(233,212,143,.03); --lk-disco-borde: rgba(233,212,143,.20);
  --lk-tx: #EEF2EE; --lk-tx2: #B9C8C0; --lk-tx3: #91A69C; --lk-label: #CBD6CF;
  --lk-campo-bg: rgba(4,14,11,.52); --lk-campo-borde: rgba(233,212,143,.18); --lk-campo-borde-hover: rgba(233,212,143,.34);
  --lk-campo-tx: #F4F6F2; --lk-campo-ph: rgba(203,214,207,.42); --lk-autorrelleno: #0B1D17;
  --lk-foco: #E9D48F; --lk-foco-halo: rgba(233,212,143,.22);
  --lk-ojo-tx: #A9BBB2; --lk-ojo-hover: rgba(255,255,255,.07);
  --lk-btn-bg: linear-gradient(180deg, #E8CA68 0%, #CDA638 100%); --lk-btn-tx: #0E2219;
  --lk-btn-sombra: 0 14px 28px -14px rgba(212,175,55,.65), inset 0 1px 0 rgba(255,255,255,.42);
  --lk-sw-off: rgba(255,255,255,.17); --lk-sw-on: #C9A236; --lk-sw-bola: #FFFDF6;
  --lk-enlace: #E9D48F; --lk-enlace-raya: rgba(233,212,143,.40);
  --lk-error-bg: rgba(224,90,70,.17); --lk-error-borde: rgba(255,140,120,.42); --lk-error-tx: #FFB6A8;
  --lk-alerta-bg: rgba(240,163,75,.12); --lk-alerta-borde: rgba(245,180,106,.42); --lk-alerta-tx: #F8CB8C;
  --lk-info-bg: rgba(233,212,143,.08); --lk-info-borde: rgba(233,212,143,.30); --lk-info-tx: #E9D48F;
  --lk-av-bg: rgba(233,212,143,.12); --lk-av-tx: #E9D48F;
  --lk-hecho-bg: rgba(127,224,166,.14); --lk-hecho-tx: #7FE0A6;
  --lk-tarjeta-bg: linear-gradient(180deg, rgba(26,62,51,.80) 0%, rgba(12,33,26,.86) 100%); --lk-tarjeta-borde: rgba(233,212,143,.15);
  --lk-tarjeta-sombra: 0 40px 80px -36px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05); --lk-tarjeta-radio: 22px;
  --lk-titulo-sombra: 0 2px 18px rgba(0,0,0,.35); --lk-logo-sombra: drop-shadow(0 8px 18px rgba(0,0,0,.5)); --lk-grano: .07;
  color-scheme: dark;
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1900;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  margin: 0; padding: 0; background: var(--lk-g1); color: var(--lk-tx);
  font: 400 16px/1.45 var(--lk-f-ui); text-align: left; letter-spacing: normal; text-transform: none; word-spacing: normal;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation;
}
/* Kings: bronce */
.lk[data-tema="kings"] {
  --lk-g0: #080503; --lk-g1: #110C06; --lk-g2: #1B140B; --lk-g3: #33261A; --lk-meta: #110C06;
  --lk-ac: #C9974F; --lk-ac-claro: #EACB8E;
  --lk-luz1: rgba(226,178,104,.18); --lk-luz2: rgba(154,106,58,.32); --lk-luz3: rgba(234,203,142,.08);
  --lk-halo1: rgba(234,203,142,.24); --lk-halo2: rgba(234,203,142,.05);
  --lk-disco1: rgba(234,203,142,.13); --lk-disco2: rgba(234,203,142,.03); --lk-disco-borde: rgba(234,203,142,.20);
  --lk-tx2: #CDBEA6; --lk-tx3: #A69379; --lk-label: #DACCB5;
  --lk-campo-bg: rgba(10,6,2,.52); --lk-campo-borde: rgba(234,203,142,.18); --lk-campo-borde-hover: rgba(234,203,142,.34); --lk-campo-ph: rgba(218,204,181,.42); --lk-autorrelleno: #150F08;
  --lk-foco: #EACB8E; --lk-foco-halo: rgba(234,203,142,.22); --lk-ojo-tx: #BBA88C;
  --lk-btn-bg: linear-gradient(180deg, #E4B873 0%, #AE7A45 100%); --lk-btn-tx: #1A1108;
  --lk-btn-sombra: 0 14px 28px -14px rgba(201,151,79,.65), inset 0 1px 0 rgba(255,255,255,.36);
  --lk-sw-on: #B4834A; --lk-enlace: #EACB8E; --lk-enlace-raya: rgba(234,203,142,.40);
  --lk-info-bg: rgba(234,203,142,.08); --lk-info-borde: rgba(234,203,142,.30); --lk-info-tx: #EACB8E;
  --lk-av-bg: rgba(234,203,142,.12); --lk-av-tx: #EACB8E;
  --lk-tarjeta-bg: linear-gradient(180deg, rgba(56,42,24,.80) 0%, rgba(25,18,9,.88) 100%); --lk-tarjeta-borde: rgba(234,203,142,.15);
}

/* ---------- los temas claros (Contabilidad, Horario de día, el panel .sale y Remesas B): lo que comparten ---------- */
.lk[data-tema="conta"], .lk[data-tema="horario"], .lk[data-tema="sale-spoons"], .lk[data-tema="sale-kings"], .lk[data-tema="remesas-claro"] {
  color-scheme: light;
  --lk-luz1: transparent; --lk-luz2: transparent; --lk-luz3: transparent; --lk-grano: 0;
  --lk-titulo-sombra: none; --lk-sw-bola: #FFFFFF;
  --lk-error-bg: #FBECE9; --lk-error-borde: #EBBDB4; --lk-error-tx: #9B2C1F;
  --lk-alerta-bg: #FDF3E3; --lk-alerta-borde: #E9C893; --lk-alerta-tx: #7A4F0B;
  --lk-hecho-bg: #E3F2E9; --lk-hecho-tx: #1D7A4C;
}
/* Contabilidad: el «verde sobrio» de dentro (fondo #F3F5F1, verde #173A30, oro solo en lo que importa, DM Sans) */
.lk[data-tema="conta"] {
  --lk-f-disp: var(--lk-f-ui);
  --lk-g0: #E8ECE6; --lk-g1: #F3F5F1; --lk-g2: #F7F8F5; --lk-g3: #FFFFFF; --lk-meta: #F3F5F1;
  --lk-fondo-bg: radial-gradient(110% 60% at 90% -8%, #FFFFFF 0%, #F7F8F5 45%, #F3F5F1 75%);
  --lk-ac: #B8922F; --lk-ac-claro: #E2C46E; --lk-halo1: transparent; --lk-halo2: transparent;
  --lk-tx: #17201C; --lk-tx2: #56635D; --lk-tx3: #5E6B65; --lk-label: #2E3A35;
  --lk-campo-bg: #FAFBF9; --lk-campo-borde: #CFD8D2; --lk-campo-borde-hover: #B3C0B8; --lk-campo-tx: #17201C; --lk-campo-ph: #7D8984; --lk-autorrelleno: #F2F6F2;
  --lk-foco: #B8922F; --lk-foco-halo: rgba(184,146,47,.20); --lk-ojo-tx: #66736D; --lk-ojo-hover: rgba(23,58,48,.06);
  --lk-btn-bg: linear-gradient(180deg, #1E4639 0%, #173A30 100%); --lk-btn-tx: #FFFFFF;
  --lk-btn-sombra: 0 12px 24px -16px rgba(23,58,48,.8), inset 0 1px 0 rgba(255,255,255,.10);
  --lk-sw-off: #CFD8D2; --lk-sw-on: #173A30; --lk-enlace: #7E5F15; --lk-enlace-raya: rgba(126,95,21,.35);
  --lk-info-bg: #F6EED8; --lk-info-borde: #E2CD92; --lk-info-tx: #634B10;
  --lk-av-bg: #E6EEE8; --lk-av-tx: #173A30;
  --lk-tarjeta-bg: #FFFFFF; --lk-tarjeta-borde: #E1E6DF; --lk-tarjeta-radio: 18px;
  --lk-tarjeta-sombra: 0 1px 2px rgba(23,58,48,.05), 0 24px 48px -30px rgba(23,58,48,.32);
}
/* Horario de día: el papel y el marrón de la foto del horario que se manda al grupo, con sus franjas (verde, azul, naranja) */
.lk[data-tema="horario"] {
  --lk-f-disp: "Playfair Display", Georgia, serif;
  --lk-g0: #E5DECF; --lk-g1: #EFEBE1; --lk-g2: #F4F1EA; --lk-g3: #FAF8F3; --lk-meta: #EFEBE1;
  --lk-fondo-bg: linear-gradient(180deg, #F7F4EE 0%, #EFEBE1 52%, #E8E2D4 100%);
  --lk-ac: #54422F; --lk-ac-claro: #C98A44; --lk-halo1: transparent; --lk-halo2: transparent;
  --lk-tx: #2F271D; --lk-tx2: #685D4B; --lk-tx3: #6B5F4B; --lk-label: #43382B;
  --lk-campo-bg: #FFFEFB; --lk-campo-borde: #D6CAB0; --lk-campo-borde-hover: #C0AF8E; --lk-campo-tx: #2F271D; --lk-campo-ph: #8F836B; --lk-autorrelleno: #FBF7EE;
  --lk-foco: #C98A44; --lk-foco-halo: rgba(201,138,68,.22); --lk-ojo-tx: #7A6E59; --lk-ojo-hover: rgba(84,66,47,.07);
  --lk-btn-bg: linear-gradient(180deg, #614D38 0%, #4C3B29 100%); --lk-btn-tx: #F8F3E8;
  --lk-btn-sombra: 0 12px 24px -16px rgba(60,45,30,.85), inset 0 1px 0 rgba(255,255,255,.12);
  --lk-sw-off: #D8CEBA; --lk-sw-on: #54422F; --lk-enlace: #8A5524; --lk-enlace-raya: rgba(138,85,36,.35);
  --lk-info-bg: #F5ECDA; --lk-info-borde: #DEC9A0; --lk-info-tx: #5E4626;
  --lk-av-bg: #E8DFCC; --lk-av-tx: #54422F;
  --lk-tarjeta-bg: #FCFAF6; --lk-tarjeta-borde: #DCD1B7; --lk-tarjeta-radio: 16px;
  --lk-tarjeta-sombra: 0 1px 2px rgba(84,66,47,.06), 0 26px 50px -32px rgba(84,66,47,.5);
  --lk-titulo: #33291E; --lk-rejilla: rgba(84,66,47,.06);
  --lk-cal-hoja: #FFFDF8; --lk-cal-borde: #CDBE9C; --lk-cal-cab: #54422F; --lk-cal-anilla: #3A2D20; --lk-cal-tx: #F4EEE2;
  --lk-c-d: #CDDA9E; --lk-c-d2: #93A758; --lk-c-m: #B4CDDC; --lk-c-m2: #6F9CB5; --lk-c-t: #EFB97E; --lk-c-t2: #C98A44; --lk-c-l: #EBE8E0; --lk-c-l2: #D3CDBF;
  --lk-s-hora: rgba(51,41,30,.32); --lk-s-nom: #D9CFBB; --lk-panel-bg: linear-gradient(180deg, #E8E1D2 0%, #E1D9C8 100%);
}
/* … y de noche (el aparato en modo oscuro): el verde del horario por dentro, con las mismas franjas */
@media (prefers-color-scheme: dark) {
  .lk[data-tema="horario"] {
    color-scheme: dark;
    --lk-g0: #091B17; --lk-g1: #0E241F; --lk-g2: #133029; --lk-g3: #1C4036; --lk-meta: #0E241F;
    --lk-fondo-bg: linear-gradient(180deg, #17392F 0%, #0E241F 55%, #0A1C18 100%);
    --lk-ac: #D4AF37; --lk-ac-claro: #E3A35F;
    --lk-tx: #F3EBDD; --lk-tx2: #B8C3B9; --lk-tx3: #93A59A; --lk-label: #D9D4C5;
    --lk-campo-bg: rgba(4,14,11,.52); --lk-campo-borde: rgba(245,232,211,.16); --lk-campo-borde-hover: rgba(245,232,211,.30); --lk-campo-tx: #F6EFE3; --lk-campo-ph: rgba(217,212,197,.42); --lk-autorrelleno: #0F2620;
    --lk-foco: #E3A35F; --lk-foco-halo: rgba(227,163,95,.24); --lk-ojo-tx: #A9B7AE; --lk-ojo-hover: rgba(255,255,255,.07);
    --lk-btn-bg: linear-gradient(180deg, #E8CA68 0%, #CDA638 100%); --lk-btn-tx: #0D2620;
    --lk-btn-sombra: 0 14px 28px -14px rgba(212,175,55,.6), inset 0 1px 0 rgba(255,255,255,.42);
    --lk-sw-off: rgba(255,255,255,.17); --lk-sw-on: #C9A236; --lk-sw-bola: #FFFDF6; --lk-enlace: #E9D48F; --lk-enlace-raya: rgba(233,212,143,.40);
    --lk-error-bg: rgba(224,90,70,.17); --lk-error-borde: rgba(255,140,120,.42); --lk-error-tx: #FFB6A8;
    --lk-alerta-bg: rgba(240,163,75,.12); --lk-alerta-borde: rgba(245,180,106,.42); --lk-alerta-tx: #F8CB8C;
    --lk-info-bg: rgba(233,212,143,.08); --lk-info-borde: rgba(233,212,143,.30); --lk-info-tx: #E9D48F;
    --lk-av-bg: rgba(233,212,143,.12); --lk-av-tx: #E9D48F; --lk-hecho-bg: rgba(127,224,166,.14); --lk-hecho-tx: #7FE0A6;
    --lk-tarjeta-bg: linear-gradient(180deg, rgba(30,66,56,.82) 0%, rgba(15,40,34,.9) 100%); --lk-tarjeta-borde: rgba(245,232,211,.12);
    --lk-tarjeta-sombra: 0 40px 80px -36px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05);
    --lk-titulo: #F5ECDD; --lk-rejilla: rgba(245,232,211,.05);
    --lk-cal-hoja: #1C4036; --lk-cal-borde: rgba(245,232,211,.22); --lk-cal-cab: #D4AF37; --lk-cal-anilla: #F0DCA0; --lk-cal-tx: #0D2620;
    --lk-c-d: #4A5D31; --lk-c-d2: #9DB86A; --lk-c-m: #2C4855; --lk-c-m2: #7FB8D9; --lk-c-t: #6B4A2A; --lk-c-t2: #E3A35F; --lk-c-l: #224238; --lk-c-l2: #3A5D52;
    --lk-s-hora: rgba(245,232,211,.42); --lk-s-nom: rgba(245,232,211,.14); --lk-panel-bg: linear-gradient(180deg, #0B201B 0%, #08181A 100%);
  }
}
/* Avisos: el tablón de lo que falta y lo que se rompe; grafito, el ámbar de «ojo» y el coral de lo urgente (sus colores de urgencia) */
.lk[data-tema="avisos"] {
  --lk-f-disp: "Manrope", var(--lk-f-ui);
  --lk-g0: #0B0E0F; --lk-g1: #111516; --lk-g2: #171C1E; --lk-g3: #232B2E; --lk-meta: #111516;
  --lk-fondo-bg: radial-gradient(120% 75% at 50% -10%, #252E31 0%, #192022 42%, #111516 72%, #0C0F10 100%);
  --lk-ac: #F2A65A; --lk-ac-claro: #F7C38A;
  --lk-luz1: rgba(231,111,81,.11); --lk-luz2: rgba(118,179,157,.09); --lk-luz3: rgba(242,166,90,.05);
  --lk-halo1: rgba(242,166,90,.15); --lk-halo2: rgba(242,166,90,.03);
  --lk-tx: #EEF1F0; --lk-tx2: #B3BBB9; --lk-tx3: #8E9896; --lk-label: #CCD2D0;
  --lk-campo-bg: rgba(5,7,8,.55); --lk-campo-borde: rgba(255,255,255,.11); --lk-campo-borde-hover: rgba(255,255,255,.22); --lk-campo-tx: #F2F4F3; --lk-campo-ph: rgba(204,210,208,.4); --lk-autorrelleno: #101415;
  --lk-foco: #F2A65A; --lk-foco-halo: rgba(242,166,90,.24); --lk-ojo-tx: #A2ABA9;
  --lk-btn-bg: linear-gradient(180deg, #F7B874 0%, #E8924A 100%); --lk-btn-tx: #22140A;
  --lk-btn-sombra: 0 14px 28px -14px rgba(232,146,74,.6), inset 0 1px 0 rgba(255,255,255,.35);
  --lk-sw-on: #E28C45; --lk-enlace: #F6BE84; --lk-enlace-raya: rgba(246,190,132,.4);
  --lk-info-bg: rgba(242,166,90,.08); --lk-info-borde: rgba(242,166,90,.30); --lk-info-tx: #F6BE84;
  --lk-av-bg: rgba(242,166,90,.12); --lk-av-tx: #F6BE84;
  --lk-tarjeta-bg: linear-gradient(180deg, rgba(38,46,49,.86) 0%, rgba(22,27,29,.92) 100%); --lk-tarjeta-borde: rgba(255,255,255,.08); --lk-tarjeta-radio: 18px;
  --lk-titulo: #F3F5F4;
}
/* Redes: la parrilla de publicaciones; granate de noche (el color de Kings en Redes) y champán */
.lk[data-tema="redes"] {
  --lk-f-disp: "Playfair Display", Georgia, serif;
  --lk-g0: #0E0407; --lk-g1: #19090E; --lk-g2: #260D16; --lk-g3: #401525; --lk-meta: #19090E;
  --lk-ac: #E2B48A; --lk-ac-claro: #F1D2AE;
  --lk-luz1: rgba(226,180,138,.15); --lk-luz2: rgba(142,38,57,.42); --lk-luz3: rgba(241,210,174,.07);
  --lk-halo1: rgba(241,210,174,.18); --lk-halo2: rgba(241,210,174,.04);
  --lk-tx: #F7EDEF; --lk-tx2: #D3BCC1; --lk-tx3: #AD939A; --lk-label: #E4D3D6;
  --lk-campo-bg: rgba(10,3,5,.5); --lk-campo-borde: rgba(241,210,174,.17); --lk-campo-borde-hover: rgba(241,210,174,.33); --lk-campo-tx: #FBF3F4; --lk-campo-ph: rgba(228,211,214,.42); --lk-autorrelleno: #1D0B11;
  --lk-foco: #F1D2AE; --lk-foco-halo: rgba(241,210,174,.22); --lk-ojo-tx: #C9B0B6;
  --lk-btn-bg: linear-gradient(180deg, #F3D6B4 0%, #D7A577 100%); --lk-btn-tx: #2B0F17;
  --lk-btn-sombra: 0 14px 28px -14px rgba(215,165,119,.55), inset 0 1px 0 rgba(255,255,255,.45);
  --lk-sw-on: #C98F62; --lk-enlace: #F1D2AE; --lk-enlace-raya: rgba(241,210,174,.4);
  --lk-info-bg: rgba(241,210,174,.08); --lk-info-borde: rgba(241,210,174,.30); --lk-info-tx: #F1D2AE;
  --lk-av-bg: rgba(241,210,174,.12); --lk-av-tx: #F1D2AE;
  --lk-tarjeta-bg: linear-gradient(180deg, rgba(66,22,38,.78) 0%, rgba(31,11,18,.9) 100%); --lk-tarjeta-borde: rgba(241,210,174,.14);
  --lk-titulo: #FAF0F1;
}
/* Reseñas: las estrellas (el amarillo de sus estrellas) en un cielo de noche */
.lk[data-tema="resenas"] {
  --lk-f-disp: "Playfair Display", Georgia, serif;
  --lk-g0: #050A14; --lk-g1: #0A1222; --lk-g2: #0F1B33; --lk-g3: #1B2E54; --lk-meta: #0A1222;
  --lk-ac: #F0C05A; --lk-ac-claro: #F7D98F;
  --lk-luz1: rgba(240,192,90,.12); --lk-luz2: rgba(56,96,178,.30); --lk-luz3: rgba(247,217,143,.06);
  --lk-halo1: rgba(247,217,143,.16); --lk-halo2: rgba(247,217,143,.03);
  --lk-tx: #F1F3F8; --lk-tx2: #B5BFD3; --lk-tx3: #8F9BB4; --lk-label: #D1D8E7;
  --lk-campo-bg: rgba(3,7,15,.55); --lk-campo-borde: rgba(247,217,143,.16); --lk-campo-borde-hover: rgba(247,217,143,.32); --lk-campo-tx: #F5F7FB; --lk-campo-ph: rgba(209,216,231,.42); --lk-autorrelleno: #0B1324;
  --lk-foco: #F7D98F; --lk-foco-halo: rgba(247,217,143,.22); --lk-ojo-tx: #A7B2C9;
  --lk-btn-bg: linear-gradient(180deg, #F7D581 0%, #E3AE3F 100%); --lk-btn-tx: #191204;
  --lk-btn-sombra: 0 14px 28px -14px rgba(240,192,90,.6), inset 0 1px 0 rgba(255,255,255,.45);
  --lk-sw-on: #D9A63A; --lk-enlace: #F7D98F; --lk-enlace-raya: rgba(247,217,143,.4);
  --lk-info-bg: rgba(247,217,143,.08); --lk-info-borde: rgba(247,217,143,.30); --lk-info-tx: #F7D98F;
  --lk-av-bg: rgba(247,217,143,.12); --lk-av-tx: #F7D98F;
  --lk-tarjeta-bg: linear-gradient(180deg, rgba(27,45,82,.94) 0%, rgba(12,21,40,.97) 100%); --lk-tarjeta-borde: rgba(247,217,143,.14);
  --lk-titulo: #F6F1E6;
  --lk-panel-bg: radial-gradient(120% 75% at 22% 0%, #1D3260 0%, #0F1C38 46%, #070D1A 100%);
  --lk-lado-der: radial-gradient(90% 70% at 70% 0%, #13213D 0%, #0A1222 60%, #070D19 100%);
}
/* Remesas: la tesorería; tinta azul petróleo y oro, con la roseta de guilloché de los billetes y los cheques (IBM Plex: la letra de sus cifras) */
.lk[data-tema="remesas"] {
  --lk-f-disp: "IBM Plex Sans", var(--lk-f-ui);
  --lk-g0: #041013; --lk-g1: #07171B; --lk-g2: #0C2227; --lk-g3: #15383F; --lk-meta: #07171B;
  --lk-ac: #D9B45A; --lk-ac-claro: #EED79B;
  --lk-luz1: rgba(217,180,90,.13); --lk-luz2: rgba(28,108,122,.30); --lk-luz3: rgba(238,215,155,.05);
  --lk-halo1: rgba(238,215,155,.16); --lk-halo2: rgba(238,215,155,.03);
  --lk-tx: #EDF3F2; --lk-tx2: #AFC1C0; --lk-tx3: #89A09F; --lk-label: #CBD9D7;
  --lk-campo-bg: rgba(2,9,10,.52); --lk-campo-borde: rgba(238,215,155,.16); --lk-campo-borde-hover: rgba(238,215,155,.32); --lk-campo-tx: #F2F7F6; --lk-campo-ph: rgba(203,217,215,.42); --lk-autorrelleno: #0A1C1F;
  --lk-foco: #EED79B; --lk-foco-halo: rgba(238,215,155,.22); --lk-ojo-tx: #A2B5B4;
  --lk-btn-bg: linear-gradient(180deg, #EBCB7D 0%, #C9A14A 100%); --lk-btn-tx: #0A1A1C;
  --lk-btn-sombra: 0 14px 28px -14px rgba(217,180,90,.55), inset 0 1px 0 rgba(255,255,255,.42);
  --lk-sw-on: #B8933F; --lk-enlace: #EED79B; --lk-enlace-raya: rgba(238,215,155,.4);
  --lk-info-bg: rgba(238,215,155,.08); --lk-info-borde: rgba(238,215,155,.30); --lk-info-tx: #EED79B;
  --lk-av-bg: rgba(238,215,155,.12); --lk-av-tx: #EED79B;
  --lk-tarjeta-bg: linear-gradient(180deg, rgba(22,60,66,.74) 0%, rgba(8,26,30,.9) 100%); --lk-tarjeta-borde: rgba(238,215,155,.14); --lk-tarjeta-radio: 16px;
  --lk-titulo: #F1F6F5;
}
/* Remesas B · «el cheque» (la otra propuesta para Remesas): claro como el papel de un cheque, la roseta y las ondas en azul petróleo, el punto de oro */
.lk[data-tema="remesas-claro"] {
  --lk-f-disp: "IBM Plex Sans", var(--lk-f-ui);
  --lk-g0: #D9E6E8; --lk-g1: #EAF2F2; --lk-g2: #F0F6F6; --lk-g3: #F8FBFB; --lk-meta: #EAF2F2;
  --lk-fondo-bg: linear-gradient(180deg, #F6FAFA 0%, #EAF2F2 55%, #DFEBEC 100%);
  --lk-ac: #B8922F; --lk-ac-claro: #2C6A73; --lk-halo1: transparent; --lk-halo2: transparent;
  --lk-tx: #10262B; --lk-tx2: #43585C; --lk-tx3: #475C60; --lk-label: #1F363B;
  --lk-campo-bg: #FFFFFF; --lk-campo-borde: #C3D5D8; --lk-campo-borde-hover: #A2BCC0; --lk-campo-tx: #10262B; --lk-campo-ph: #6F8589; --lk-autorrelleno: #EEF6F6;
  --lk-foco: #2C6A73; --lk-foco-halo: rgba(44,106,115,.20); --lk-ojo-tx: #475C60; --lk-ojo-hover: rgba(16,60,68,.06);
  --lk-btn-bg: linear-gradient(180deg, #24636D 0%, #174952 100%); --lk-btn-tx: #FFFFFF;
  --lk-btn-sombra: 0 12px 24px -16px rgba(16,60,68,.8), inset 0 1px 0 rgba(255,255,255,.12);
  --lk-sw-off: #C3D5D8; --lk-sw-on: #1D5560; --lk-enlace: #1D5560; --lk-enlace-raya: rgba(29,85,96,.35);
  --lk-info-bg: #E3F0F1; --lk-info-borde: #B0CDD1; --lk-info-tx: #18454D;
  --lk-av-bg: #D9EAEC; --lk-av-tx: #1D5560;
  --lk-tarjeta-bg: #FBFDFD; --lk-tarjeta-borde: #CFDDDF; --lk-tarjeta-radio: 16px;
  --lk-tarjeta-sombra: 0 1px 2px rgba(16,60,68,.05), 0 24px 48px -30px rgba(16,60,68,.38);
  --lk-titulo: #10262B;
}
/* El panel de las webs .sale (Nochevieja, grupos, vales): claro como sus webs; Spoons crema y oro viejo, Kings verde oliva y oro */
.lk[data-tema="sale-spoons"] {
  --lk-f-disp: "Playfair Display", Georgia, serif;
  --lk-g0: #E7DCC6; --lk-g1: #F4EEE1; --lk-g2: #F8F3E8; --lk-g3: #FDF8EC; --lk-meta: #F4EEE1;
  --lk-fondo-bg: radial-gradient(125% 78% at 50% -6%, #FDF8EC 0%, #F4EEE1 46%, #E9DFCA 100%);
  --lk-ac: #A5761C; --lk-ac-claro: #C99A34;
  --lk-halo1: rgba(214,170,74,.26); --lk-halo2: rgba(214,170,74,.05);
  --lk-tx: #2C2415; --lk-tx2: #6B5C41; --lk-tx3: #6C5C40; --lk-label: #3E3322;
  --lk-campo-bg: #FFFEFA; --lk-campo-borde: #DFD1B3; --lk-campo-borde-hover: #CBB78C; --lk-campo-tx: #2C2415; --lk-campo-ph: #93835F; --lk-autorrelleno: #FFFAEF;
  --lk-foco: #A5761C; --lk-foco-halo: rgba(165,118,28,.20); --lk-ojo-tx: #7F6F51; --lk-ojo-hover: rgba(90,70,30,.07);
  --lk-btn-bg: linear-gradient(180deg, #9E7322 0%, #7C580C 100%); --lk-btn-tx: #FFFBF2;
  --lk-btn-sombra: 0 12px 24px -14px rgba(138,100,20,.65), inset 0 1px 0 rgba(255,255,255,.3);
  --lk-sw-off: #DDD2BB; --lk-sw-on: #A5761C; --lk-enlace: #835F12; --lk-enlace-raya: rgba(131,95,18,.35);
  --lk-info-bg: #F7EDD6; --lk-info-borde: #E1C98D; --lk-info-tx: #634810;
  --lk-av-bg: #F1E5CB; --lk-av-tx: #835F12;
  --lk-tarjeta-bg: linear-gradient(160deg, #FFFDF7 0%, #FBF6EA 100%); --lk-tarjeta-borde: rgba(165,118,28,.30); --lk-tarjeta-radio: 16px;
  --lk-tarjeta-sombra: inset 0 0 0 6px #FFFDF7, inset 0 0 0 7px rgba(165,118,28,.18), 0 26px 50px -30px rgba(90,70,30,.45);
  --lk-titulo: #2C2415; --lk-logo-sombra: drop-shadow(0 8px 16px rgba(120,88,20,.30)); --lk-chispa: #C2922E;
}
.lk[data-tema="sale-kings"] {
  --lk-f-disp: "Playfair Display", Georgia, serif;
  --lk-g0: #D3DABF; --lk-g1: #E3E8D6; --lk-g2: #E9EDDE; --lk-g3: #EFF2E3; --lk-meta: #E3E8D6;
  --lk-fondo-bg: radial-gradient(125% 78% at 50% -6%, #EEF2E0 0%, #E3E8D6 46%, #CCD4B9 100%);
  --lk-ac: #8A6A10; --lk-ac-claro: #AD8A24;
  --lk-halo1: rgba(173,138,36,.24); --lk-halo2: rgba(173,138,36,.05);
  --lk-tx: #1D2718; --lk-tx2: #4A5A41; --lk-tx3: #4F6046; --lk-label: #2C3826;
  --lk-campo-bg: #FCFDF7; --lk-campo-borde: #C9D1B7; --lk-campo-borde-hover: #AEB991; --lk-campo-tx: #1D2718; --lk-campo-ph: #78866B; --lk-autorrelleno: #F4F7EA;
  --lk-foco: #8A6A10; --lk-foco-halo: rgba(138,106,16,.22); --lk-ojo-tx: #5F7155; --lk-ojo-hover: rgba(40,65,35,.07);
  --lk-btn-bg: linear-gradient(180deg, #94761A 0%, #6E540A 100%); --lk-btn-tx: #FDFBEF;
  --lk-btn-sombra: 0 12px 24px -14px rgba(109,82,11,.65), inset 0 1px 0 rgba(255,255,255,.28);
  --lk-sw-off: #CBD3BB; --lk-sw-on: #6D520B; --lk-enlace: #6D520B; --lk-enlace-raya: rgba(109,82,11,.38);
  --lk-info-bg: #F1EDD5; --lk-info-borde: #D4C48A; --lk-info-tx: #5B470C;
  --lk-av-bg: #E8E6CC; --lk-av-tx: #6D520B;
  --lk-tarjeta-bg: linear-gradient(160deg, #FBFCF3 0%, #F2F5E6 100%); --lk-tarjeta-borde: rgba(138,106,16,.28); --lk-tarjeta-radio: 16px;
  --lk-tarjeta-sombra: inset 0 0 0 6px #FBFCF3, inset 0 0 0 7px rgba(138,106,16,.18), 0 26px 50px -30px rgba(40,55,30,.45);
  --lk-titulo: #1D2718; --lk-logo-sombra: drop-shadow(0 6px 12px rgba(40,50,20,.28)); --lk-chispa: #8A6A10;
}

.lk[hidden], .lk [hidden] { display: none !important; }
.lk *, .lk *::before, .lk *::after { box-sizing: border-box; }
/* mientras se ve: la app de detrás quieta y del color del tema (sin destellos al abrir ni con el teclado; --lk-html lo pone login-kit.js) */
html.lk-visible, html.lk-visible body { background: var(--lk-html, #0A1C16) !important; }
html.lk-visible body { overflow: hidden !important; }
html.lk-visible { scrollbar-gutter: auto !important; }   /* (Contabilidad reserva el hueco de la barra: con la entrada delante, no; si no, la tarjeta no queda en el centro) */
.lk-sr { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }

/* ---------- el fondo: verde de noche y una luz dorada quieta (cada tema, el suyo) ---------- */
.lk-fondo { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; pointer-events: none; background: var(--lk-fondo-bg); }
.lk-luz { position: absolute; border-radius: 50%; }
.lk-l1 { width: 120vmax; height: 120vmax; left: -64vmax; top: -72vmax; background: radial-gradient(closest-side, var(--lk-luz1), transparent 72%); }
.lk-l2 { width: 130vmax; height: 130vmax; right: -70vmax; bottom: -82vmax; background: radial-gradient(closest-side, var(--lk-luz2), transparent 70%); }
.lk-l3 { width: 80vmax; height: 80vmax; left: -12vmax; top: 34%; background: radial-gradient(closest-side, var(--lk-luz3), transparent 70%); }
.lk-grano { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: var(--lk-grano); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* el motivo de cada tema (login-kit.js lo pone en .lk-arte) */
.lk-arte { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.lk-arte:empty { display: none; }
.lk-a { position: absolute; display: block; overflow: visible; fill: none; stroke: none; }
.lk-a-comillas { display: none; }

/* ---------- la columna ---------- */
.lk-col { position: relative; min-height: 100%; display: flex; flex-direction: column; align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 26px) max(16px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 16px) max(16px, env(safe-area-inset-left, 0px)); }
.lk-in { width: 100%; max-width: 400px; margin: auto 0; }

/* ---------- el sello ---------- */
.lk-cab { position: relative; margin: 0; padding: 0; text-align: center; }
.lk-sello { position: relative; width: 118px; height: 118px; margin: 0 auto; }
.lk-sello.lk-placa { width: 236px; height: 88px; }
.lk-halo { position: absolute; left: 50%; top: 50%; width: min(300%, calc(100vw - 16px)); height: 300%; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--lk-halo1), var(--lk-halo2) 45%, transparent 70%); }
.lk-placa .lk-halo { width: min(170%, calc(100vw - 16px)); height: 330%; }   /* (el halo nunca más ancho que la pantalla: sin barra de lado) */
.lk-sello-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; }
.lk-aro { fill: none; stroke: var(--lk-ac-claro); stroke-width: 1.3; opacity: .9; }
.lk-aro2 { fill: none; stroke: var(--lk-ac-claro); stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: 0 5.6; opacity: .5; transform-box: fill-box; transform-origin: center; }
.lk-sello-centro { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; }
.lk-sello-centro > * { grid-area: 1 / 1; }
.lk-disco { position: absolute; top: 15%; right: 15%; bottom: 15%; left: 15%; border-radius: 50%; border: 1px solid var(--lk-disco-borde);
  background: radial-gradient(circle at 50% 30%, var(--lk-disco1), var(--lk-disco2) 72%); }
.lk-marca-img { display: block; width: 78%; height: auto; max-width: none; margin: 0; filter: var(--lk-logo-sombra); -webkit-user-select: none; user-select: none; }
.lk-placa .lk-marca-img { width: 80%; filter: drop-shadow(0 6px 14px rgba(0,0,0,.55)); }
.lk-marca-conta { position: relative; width: 48%; height: 48%; }
.lk-marca-conta .lk-b1, .lk-marca-conta .lk-b2 { fill: var(--lk-ac); }
.lk-marca-conta .lk-b3 { fill: var(--lk-ac-claro); }
.lk-destello { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.75) 50%, transparent 60%); background-size: 300% 100%; background-position: 100% 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: var(--lk-mask, 78%); mask-size: var(--lk-mask, 78%); }
/* el azulejo («pieza»: el icono de la app con su aro) y el dibujo solo («libre») */
.lk-pieza .lk-disco { top: 8.5%; right: 8.5%; bottom: 8.5%; left: 8.5%; border-radius: 26%; }
.lk-pieza .lk-aro { stroke-width: 1.6; }
.lk-marca-dib { position: relative; display: block; width: 44%; height: 44%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--lk-ac-claro); }
.lk-libre .lk-marca-dib { width: 100%; height: 100%; }

.lk .lk-titulo { margin: 20px 0 0; padding: 0; font: 600 30px/1.1 var(--lk-f-disp); letter-spacing: .1em; text-transform: uppercase; color: var(--lk-ac-claro); text-shadow: var(--lk-titulo-sombra); }
.lk .lk-sub { margin: 6px 0 0; padding: 0; font: 500 15px/1.3 var(--lk-f-ui); letter-spacing: .02em; text-transform: none; color: var(--lk-tx2); }
.lk[data-tema="kings"] .lk-sub { margin-top: 16px; font: 600 17px/1.2 var(--lk-f-disp); letter-spacing: .14em; text-transform: uppercase; color: var(--lk-ac-claro); }

/* ---------- la tarjeta ---------- */
.lk-tarjeta { position: relative; margin: 26px 0 0; padding: 22px 20px 10px; border-radius: var(--lk-tarjeta-radio); background: var(--lk-tarjeta-bg); border: 1px solid var(--lk-tarjeta-borde);
  box-shadow: var(--lk-tarjeta-sombra); }
.lk-form { margin: 0; padding: 0; border: 0; }

@media (min-width: 700px) {
  .lk-in { max-width: 424px; }
  .lk-sello { width: 132px; height: 132px; }
  .lk-sello.lk-placa { width: 262px; height: 98px; }
  .lk .lk-titulo { font-size: 33px; }
  .lk-tarjeta { padding: 28px 28px 14px; }
}

/* ---------- campos (con #lk: que ninguna hoja de una app los pise; Remesas pone a sus campos 14 px y su fondo con input:not(…)×6) ---------- */
.lk-campo { margin: 0; padding: 0; }
.lk-campo + .lk-campo { margin-top: 16px; }
.lk .lk-campo label { display: block; margin: 0 0 7px; padding: 0; font: 500 14px/1.3 var(--lk-f-ui); letter-spacing: normal; text-transform: none; color: var(--lk-label); cursor: default; }
#lk .lk-campo input {
  display: block; width: 100%; height: 50px; min-height: 0; margin: 0; padding: 0 14px;
  font: 400 16px/1.2 var(--lk-f-ui); letter-spacing: normal; text-transform: none; color: var(--lk-campo-tx);
  background: var(--lk-campo-bg); border: 1px solid var(--lk-campo-borde); border-radius: 12px; box-shadow: none;
  outline: 0; -webkit-appearance: none; appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
#lk .lk-campo input::placeholder { color: var(--lk-campo-ph); opacity: 1; }
#lk .lk-campo input:hover { border-color: var(--lk-campo-borde-hover); }
#lk .lk-campo input:focus { border-color: var(--lk-foco); box-shadow: 0 0 0 3px var(--lk-foco-halo); outline: 0; }
#lk .lk-campo input[aria-invalid="true"] { border-color: var(--lk-error-tx); }
#lk .lk-campo input[readonly] { cursor: default; }
/* el autorrelleno (llavero del iPhone, Chrome) sin su fondo azul o amarillo */
#lk .lk-campo input:-webkit-autofill, #lk .lk-campo input:-webkit-autofill:hover { -webkit-text-fill-color: var(--lk-campo-tx); caret-color: var(--lk-campo-tx); box-shadow: 0 0 0 50px var(--lk-autorrelleno) inset; transition: background-color 9999s; }
#lk .lk-campo input:-webkit-autofill:focus { box-shadow: 0 0 0 50px var(--lk-autorrelleno) inset, 0 0 0 3px var(--lk-foco-halo); }

.lk-clave-caja { position: relative; }
#lk .lk-clave-caja input { padding-right: 54px; }
.lk .lk-ver {
  position: absolute; top: 3px; right: 3px; width: 44px; height: 44px; min-width: 0; min-height: 0; margin: 0; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; box-shadow: none;
  color: var(--lk-ojo-tx); cursor: pointer; transition: color .15s, background-color .15s;
}
.lk .lk-ver:hover { color: var(--lk-tx); background: var(--lk-ojo-hover); }
.lk .lk-ver:focus { outline: 0; }
.lk .lk-ver:focus-visible { outline: 2px solid var(--lk-foco); outline-offset: -3px; }
.lk-ver svg { display: block; width: 20px; height: 20px; }
.lk-ver .lk-i-tapar, .lk-ver.lk-abierto .lk-i-ver { display: none; }
.lk-ver.lk-abierto .lk-i-tapar { display: block; }

.lk .lk-mayus, .lk .lk-campo-err { display: flex; align-items: center; gap: 7px; margin: 8px 0 0; padding: 0; font: 400 13.5px/1.35 var(--lk-f-ui); }
.lk .lk-mayus { color: var(--lk-alerta-tx); }
.lk-mayus svg { flex: none; width: 15px; height: 15px; }
.lk .lk-campo-err { color: var(--lk-error-tx); }

/* ---------- Recuérdame ---------- */
.lk-recuerda { margin: 18px 0 0; }
.lk .lk-interruptor { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; cursor: pointer; font: 400 15.5px/1.3 var(--lk-f-ui); color: var(--lk-tx); -webkit-user-select: none; user-select: none; }
.lk .lk-interruptor input { position: absolute; left: 0; top: 50%; width: 44px; height: 28px; margin: -14px 0 0; padding: 0; opacity: 0; cursor: pointer; }
.lk-pista { flex: none; position: relative; width: 44px; height: 26px; border-radius: 13px; background: var(--lk-sw-off); transition: background-color .2s ease; }
.lk-pista::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--lk-sw-bola); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .22s cubic-bezier(.3,.7,.3,1); }
.lk-interruptor input:checked + .lk-pista { background: var(--lk-sw-on); }
.lk-interruptor input:checked + .lk-pista::after { transform: translateX(18px); }
.lk-interruptor input:focus-visible + .lk-pista { outline: 2px solid var(--lk-foco); outline-offset: 3px; }
.lk-interruptor input:disabled + .lk-pista { opacity: .7; }
.lk .lk-nota { margin: 0 0 0 56px; padding: 0; font: 400 13.5px/1.45 var(--lk-f-ui); color: var(--lk-tx3); }

/* ---------- botones ---------- */
.lk .lk-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 52px; height: auto; margin: 22px 0 0; padding: 0 18px;
  border: 0; border-radius: 12px; background: var(--lk-btn-bg); color: var(--lk-btn-tx);
  font: 600 16px/1 var(--lk-f-ui); letter-spacing: .01em; text-transform: none; cursor: pointer;
  box-shadow: var(--lk-btn-sombra); transition: filter .2s ease, transform .12s ease, opacity .2s ease, box-shadow .2s ease;
}
.lk .lk-btn:hover { filter: brightness(1.06); }
.lk .lk-btn:active { transform: scale(.985); }
.lk .lk-btn:focus { outline: 0; }
.lk .lk-btn:focus-visible { outline: 2px solid var(--lk-foco); outline-offset: 3px; }
.lk .lk-btn:disabled { cursor: default; opacity: .6; filter: none; transform: none; }
.lk .lk-btn.lk-cargando { cursor: progress; opacity: 1; }
.lk-btn-in { display: inline-flex; align-items: center; gap: 10px; }
.lk-btn .lk-spin, .lk-btn .lk-ok { display: none; }
.lk-btn.lk-cargando .lk-spin { display: inline-block; }
.lk-btn.lk-listo .lk-ok { display: inline-block; }
.lk-spin { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: lk-giro .7s linear infinite; }
.lk-ok { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.lk-ok path { stroke-dasharray: 22; stroke-dashoffset: 22; animation: lk-trazo .26s ease-out forwards; }

.lk .lk-btn-sec {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin: 18px 0 0; padding: 0 16px;
  border: 1px solid var(--lk-campo-borde-hover); border-radius: 12px; background: transparent; color: var(--lk-tx); box-shadow: none;
  font: 600 15.5px/1 var(--lk-f-ui); text-transform: none; cursor: pointer; transition: background-color .15s;
}
.lk .lk-btn-sec:hover { background: var(--lk-ojo-hover); }
.lk .lk-btn-sec:focus { outline: 0; }
.lk .lk-btn-sec:focus-visible { outline: 2px solid var(--lk-foco); outline-offset: 3px; }

.lk .lk-enlace {
  display: flex; align-items: center; justify-content: center; min-height: 44px; margin: 6px auto 0; padding: 0 14px;
  border: 0; border-radius: 10px; background: transparent; box-shadow: none; color: var(--lk-enlace); cursor: pointer;
  font: 500 15px/1.2 var(--lk-f-ui); text-transform: none; text-decoration: underline; text-decoration-color: var(--lk-enlace-raya); text-underline-offset: 4px;
}
.lk .lk-enlace:hover { text-decoration-color: currentColor; }
.lk .lk-enlace:focus { outline: 0; }
.lk .lk-enlace:focus-visible { outline: 2px solid var(--lk-foco); outline-offset: 0; }

.lk-form.lk-ocupado .lk-campo, .lk-form.lk-ocupado .lk-recuerda, .lk-form.lk-ocupado .lk-enlace { opacity: .55; pointer-events: none; transition: opacity .2s; }

/* ---------- avisos (error, demasiados intentos, sin conexión, los 30 días) ---------- */
.lk .lk-aviso {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 18px; padding: 12px 14px;
  border: 1px solid; border-radius: 12px; font: 400 14.5px/1.42 var(--lk-f-ui);
  animation: lk-aviso .22s ease-out;
}
.lk-aviso > svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.lk-aviso b { font-weight: 600; }
.lk .lk-aviso.lk-error { background: var(--lk-error-bg); border-color: var(--lk-error-borde); color: var(--lk-error-tx); }
.lk .lk-aviso.lk-alerta { background: var(--lk-alerta-bg); border-color: var(--lk-alerta-borde); color: var(--lk-alerta-tx); }
.lk .lk-aviso.lk-info { background: var(--lk-info-bg); border-color: var(--lk-info-borde); color: var(--lk-info-tx); }
.lk .lk-aviso-btn {
  display: inline-flex; align-items: center; min-height: 40px; margin: 9px 0 0; padding: 0 12px;
  border: 1px solid currentColor; border-radius: 9px; background: transparent; box-shadow: none; color: inherit;
  font: 600 14px/1 var(--lk-f-ui); text-transform: none; cursor: pointer;
}
.lk .lk-aviso-btn:focus { outline: 0; }
.lk .lk-aviso-btn:focus-visible { outline: 2px solid var(--lk-foco); outline-offset: 2px; }

/* ---------- ¿Olvidaste la contraseña? ---------- */
.lk .lk-volver {
  display: inline-flex; align-items: center; gap: 4px; min-height: 40px; margin: -6px 0 6px -8px; padding: 0 10px 0 4px;
  border: 0; border-radius: 10px; background: transparent; box-shadow: none; color: var(--lk-tx2); cursor: pointer; font: 500 14.5px/1 var(--lk-f-ui); text-transform: none;
}
.lk-volver svg { width: 20px; height: 20px; }
.lk .lk-volver:hover { color: var(--lk-tx); }
.lk .lk-volver:focus { outline: 0; }
.lk .lk-volver:focus-visible { outline: 2px solid var(--lk-foco); outline-offset: 0; }
.lk .lk-o-h { margin: 0; padding: 0; font: 600 21px/1.25 var(--lk-f-ui); letter-spacing: -.01em; text-transform: none; color: var(--lk-tx); outline: 0; }
.lk .lk-o-txt { margin: 8px 0 20px; padding: 0; font: 400 15px/1.5 var(--lk-f-ui); color: var(--lk-tx2); }
.lk-enviado { margin: 18px 0 0; }
.lk-enviado-ico { width: 52px; height: 52px; margin: 0 0 14px; border-radius: 50%; display: grid; place-items: center; background: var(--lk-av-bg); color: var(--lk-av-tx); }
.lk-enviado-ico svg { width: 26px; height: 26px; }
.lk .lk-enviado p { margin: 0; padding: 0; font: 400 15.5px/1.5 var(--lk-f-ui); color: var(--lk-tx); }
.lk .lk-enviado .lk-pequeno { margin-top: 8px; font-size: 14px; color: var(--lk-tx2); }

/* ---------- «Hola, Robert» (sesión recordada) ---------- */
.lk-v-recordado { text-align: center; padding: 16px 0 2px; }
.lk-r-av { position: relative; width: 76px; height: 76px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 50%; background: var(--lk-av-bg); color: var(--lk-av-tx); font: 600 30px/1 var(--lk-f-ui); }
.lk-r-aro { position: absolute; top: -7px; left: -7px; width: 90px; height: 90px; animation: lk-giro 1.1s linear infinite; }
.lk-r-aro circle { fill: none; stroke: var(--lk-av-tx); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 64 220; }
.lk .lk-r-hola { margin: 0; padding: 0; font: 600 25px/1.2 var(--lk-f-ui); letter-spacing: -.01em; color: var(--lk-tx); }
.lk .lk-r-entrando { margin: 6px 0 0; padding: 0; font: 400 15.5px/1.4 var(--lk-f-ui); color: var(--lk-tx2); }
.lk-sin-nombre .lk-r-hola { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.lk-sin-nombre .lk-r-entrando { margin-top: 0; font-size: 19px; font-weight: 600; color: var(--lk-tx); }
.lk-v-recordado .lk-enlace { margin-top: 14px; font-size: 14.5px; }

/* ---------- un aviso de la app dentro de la tarjeta (la Caja: «Acceso no autorizado», cargar catálogos…) ---------- */
.lk-v-mensaje { text-align: center; padding: 4px 0 10px; color: var(--lk-tx); font: 400 15px/1.5 var(--lk-f-ui); }
.lk .lk-v-mensaje h1, .lk .lk-v-mensaje h2 { margin: 2px 0 10px; font: 600 21px/1.25 var(--lk-f-ui); letter-spacing: -.01em; color: var(--lk-tx); }
.lk .lk-v-mensaje p { margin: 0 0 18px; color: var(--lk-tx2); font: 400 15px/1.5 var(--lk-f-ui); }

/* ---------- «Entrar con Face ID» (12-nov-2026): el botón grande arriba si el aparato tiene su llave; la contraseña sigue debajo ---------- */
.lk-llave { margin: 0; }
.lk .lk-btn.lk-btn-llave { margin-top: 0; }
.lk-btn-ico { display: inline-grid; place-items: center; }
.lk-btn-ico svg { display: block; width: 22px; height: 22px; }
.lk-btn.lk-cargando .lk-btn-ico, .lk-btn.lk-listo .lk-btn-ico { display: none; }
.lk .lk-o { display: flex; align-items: center; gap: 12px; margin: 20px 0 16px; font: 500 13.5px/1.2 var(--lk-f-ui); color: var(--lk-tx3); text-transform: none; }
.lk-o::before, .lk-o::after { content: ""; flex: 1; height: 1px; background: var(--lk-campo-borde); }
/* con la llave delante, «Entrar» (con la contraseña) pasa a segundo plano: un solo botón dorado */
.lk .lk-form.lk-con-llave .lk-btn[data-lk="entrar"] { background: transparent; color: var(--lk-tx); border: 1px solid var(--lk-campo-borde-hover); box-shadow: none; }
.lk .lk-form.lk-con-llave .lk-btn[data-lk="entrar"]:hover { background: var(--lk-ojo-hover); filter: none; }
.lk-form.lk-ocupado .lk-llave .lk-btn:not(.lk-cargando) { opacity: .55; }

/* ---------- tras la contraseña: «¿Entrar la próxima vez con Face ID?» ---------- */
.lk-v-oferta { text-align: center; padding: 8px 0 2px; }
.lk-of-ico { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; background: var(--lk-av-bg); color: var(--lk-av-tx); }
.lk-of-ico svg { display: block; width: 32px; height: 32px; }
.lk .lk-of-h { text-wrap: balance; }
.lk .lk-of-txt { margin: 8px 0 0; text-wrap: pretty; }
.lk-v-oferta .lk-aviso { margin: 16px 0 0; text-align: left; }
.lk .lk-v-oferta .lk-btn { margin-top: 20px; }
.lk .lk-v-oferta .lk-btn-sec { margin-top: 10px; }
.lk .lk-of-nota { margin: 14px 0 4px; padding: 0; font: 400 13.5px/1.45 var(--lk-f-ui); color: var(--lk-tx3); }
.lk-v-oferta.lk-hecho .lk-of-ico { background: var(--lk-hecho-bg); color: var(--lk-hecho-tx); }

/* ---------- tarda más de lo normal ---------- */
.lk-lento { margin: 14px 0 6px; text-align: center; font: 400 14.5px/1.4 var(--lk-f-ui); color: var(--lk-tx2); }
.lk-lento .lk-btn-sec { margin-top: 10px; }

/* ---------- la línea de confianza ---------- */
.lk .lk-confianza { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; margin: 22px 0 0; padding: 0; font: 400 12.5px/1.4 var(--lk-f-ui); color: var(--lk-tx3); text-align: center; }
.lk-seg { display: inline-flex; align-items: center; gap: 6px; }
.lk-confianza svg { flex: none; width: 13px; height: 13px; }

/* =====================================================================================================================
   LA CABECERA DE CADA TEMA: el nombre, su letra y su sello o dibujo
   ===================================================================================================================== */
/* el sello a la izquierda del nombre (Contabilidad, Horario, Avisos, Remesas): como la cabecera de esas apps */
.lk[data-cab="fila"] .lk-cab { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 16px; text-align: left; }
.lk[data-cab="fila"] .lk-sello { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
.lk[data-cab="fila"] .lk-titulo { grid-column: 2; grid-row: 1; align-self: end; margin: 0; }
.lk[data-cab="fila"] .lk-sub { grid-column: 2; grid-row: 2; align-self: start; margin: 3px 0 0; }
.lk[data-cab="fila"] .lk-halo { width: 260%; height: 260%; }

/* Contabilidad: el azulejo verde con las barras de oro (su icono) y el nombre como sus pantallas (DM Sans, verde) */
.lk[data-tema="conta"] .lk-sello { width: 66px; height: 66px; }
.lk[data-tema="conta"] .lk-disco { border: 0; background: linear-gradient(155deg, #275646 0%, #173A30 62%, #12302A 100%); box-shadow: 0 10px 20px -12px rgba(23,58,48,.8); }
.lk[data-tema="conta"] .lk-aro { stroke: #C9A649; opacity: .85; }
.lk[data-tema="conta"] .lk-marca-conta { width: 54%; height: 54%; }
.lk[data-tema="conta"] .lk-marca-conta .lk-b1, .lk[data-tema="conta"] .lk-marca-conta .lk-b2 { fill: #C9A13C; }
.lk[data-tema="conta"] .lk-marca-conta .lk-b3 { fill: #EBD38A; }
.lk[data-tema="conta"] .lk-titulo { font: 700 28px/1.12 var(--lk-f-disp); letter-spacing: -.02em; text-transform: none; color: #173A30; }
.lk[data-tema="conta"] .lk-sub { font: 500 15px/1.3 var(--lk-f-ui); letter-spacing: 0; color: var(--lk-tx2); }
/* su trayectoria, abajo y muy suave (como la gráfica de su Inicio) */
.lk[data-tema="conta"] .lk-a-traza { left: 0; right: 0; bottom: 0; width: 100%; height: max(64px, calc(50vh - 300px));
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%); }
.lk-t-red { stroke: rgba(23,58,48,.06); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lk-t-area { fill: rgba(184,146,47,.07); }
.lk-t-linea { stroke: rgba(184,146,47,.55); stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* Horario: la hoja del calendario con la semana pintada y el nombre en la letra de su «Semana 46» */
.lk[data-tema="horario"] .lk-sello { width: 66px; height: 66px; }
.lk[data-tema="horario"] .lk-titulo { font: 700 33px/1.05 var(--lk-f-disp); letter-spacing: -.005em; text-transform: none; color: var(--lk-titulo); }
.lk[data-tema="horario"] .lk-sub { font: 500 15px/1.3 var(--lk-f-ui); letter-spacing: 0; color: var(--lk-tx2); }
.lk-h-hoja { fill: var(--lk-cal-hoja); stroke: var(--lk-cal-borde); stroke-width: 1; }
.lk-h-cab { fill: var(--lk-cal-cab); stroke: none; }
.lk-h-anilla { fill: var(--lk-cal-anilla); stroke: var(--lk-cal-hoja); stroke-width: 1.4; }
.lk-c { stroke-width: .7; }
.lk-c-d { fill: var(--lk-c-d); stroke: var(--lk-c-d2); }
.lk-c-m { fill: var(--lk-c-m); stroke: var(--lk-c-m2); }
.lk-c-t { fill: var(--lk-c-t); stroke: var(--lk-c-t2); }
.lk-c-l { fill: var(--lk-c-l); stroke: var(--lk-c-l2); }
/* … y detrás, la rejilla de la semana (siete columnas), muy suave */
.lk[data-tema="horario"] .lk-arte { background-image: linear-gradient(90deg, var(--lk-rejilla) 1px, transparent 1px), linear-gradient(180deg, var(--lk-rejilla) 1px, transparent 1px);
  background-size: calc(100% / 7) 100%, 100% 54px; background-position: 0 0, 0 -1px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.45) 32%, transparent 64%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.45) 32%, transparent 64%); }
.lk-a-semana { display: none; }

/* Avisos: el escudo de su cabecera en un azulejo grafito y el punto coral de «hay algo», que salta al abrir */
.lk[data-tema="avisos"] .lk-sello { width: 64px; height: 64px; }
.lk[data-tema="avisos"] .lk-disco { border: 1px solid rgba(255,255,255,.08); background: linear-gradient(160deg, #2B3437 0%, #1B2224 100%); box-shadow: 0 12px 24px -14px rgba(0,0,0,.8); }
.lk[data-tema="avisos"] .lk-aro { stroke: #F2A65A; opacity: .5; }
.lk[data-tema="avisos"] .lk-marca-dib { width: 52%; height: 52%; color: #F5B26F; stroke-width: 1.7; }
.lk-punto { position: absolute; top: -3px; right: -3px; width: 16px; height: 16px; border-radius: 50%; background: #E76F51; box-shadow: 0 0 0 3px var(--lk-g1), 0 4px 12px rgba(231,111,81,.5); }
.lk[data-tema="avisos"] .lk-titulo { font: 800 31px/1.05 var(--lk-f-disp); letter-spacing: -.03em; text-transform: none; color: var(--lk-titulo); }
.lk[data-tema="avisos"] .lk-sub { font: 500 15px/1.3 var(--lk-f-ui); letter-spacing: 0; color: var(--lk-tx2); }
/* el tablón: una rejilla de puntos, arriba y suave */
.lk[data-tema="avisos"] .lk-arte { background-image: radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1.7px); background-size: 22px 22px; background-position: 11px 11px;
  -webkit-mask-image: radial-gradient(130% 62% at 50% 0%, #000 25%, transparent 85%); mask-image: radial-gradient(130% 62% at 50% 0%, #000 25%, transparent 85%); }
.lk[data-tema="avisos"] .lk-arte:empty { display: block; }

/* Redes: la parrilla (la foto, el «me gusta», el comentario; el verde de Spoons y el granate de Kings) y el nombre en Playfair */
.lk[data-tema="redes"] .lk-sello { width: 78px; height: 78px; }
.lk-r-t { stroke: none; }
.lk-r1 { fill: #EBC9A2; } .lk-r2 { fill: #8E2639; } .lk-r3 { fill: #F4E8DD; } .lk-r4 { fill: #2D5A4C; }
.lk-r-g { fill: none; stroke: #7A2030; stroke-width: 2.2; }
.lk-r-sol { fill: #7A2030; stroke: none; }
.lk-r-corazon { fill: #F9E6E9; stroke: none; }
.lk[data-tema="redes"] .lk-titulo { margin-top: 18px; font: 700 37px/1.05 var(--lk-f-disp); letter-spacing: 0; text-transform: none; color: var(--lk-titulo); }
.lk[data-tema="redes"] .lk-sub { margin-top: 7px; font: 500 15px/1.3 var(--lk-f-ui); letter-spacing: 0; color: var(--lk-tx2); }
/* detrás, la parrilla de un perfil, muy suave y solo arriba */
.lk[data-tema="redes"] .lk-a-parrilla { left: 50%; top: 0; width: 100%; max-width: 620px; height: auto; transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.45) 40%, transparent 78%); mask-image: linear-gradient(180deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.45) 40%, transparent 78%); }
.lk-p0 { fill: rgba(241,210,174,.055); } .lk-p1 { fill: rgba(241,210,174,.028); } .lk-p2 { fill: rgba(170,48,72,.16); } .lk-p3 { fill: rgba(45,90,76,.14); }

/* Reseñas: cinco estrellas que se encienden una a una, el nombre en Playfair y un cielo de noche */
.lk[data-tema="resenas"] .lk-sello { width: 176px; height: 32px; }
.lk-e-borde { fill: none; stroke: rgba(247,217,143,.42); stroke-width: 1.1; stroke-linejoin: round; }
.lk-e { fill: var(--lk-ac); stroke: var(--lk-ac); stroke-width: .8; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; }
.lk[data-tema="resenas"] .lk-halo { width: 170%; height: 520%; }
.lk[data-tema="resenas"] .lk-titulo { margin-top: 22px; font: 700 36px/1.05 var(--lk-f-disp); letter-spacing: 0; text-transform: none; color: var(--lk-titulo); }
.lk[data-tema="resenas"] .lk-sub { margin-top: 8px; font: 500 15px/1.3 var(--lk-f-ui); letter-spacing: 0; color: var(--lk-tx2); }
.lk[data-tema="resenas"] .lk-a-cielo { left: 0; top: 0; width: 100%; height: 78%;
  -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 100%); mask-image: linear-gradient(180deg, #000 35%, transparent 100%); }
.lk-cs1 { fill: rgba(247,217,143,.40); } .lk-cs2 { fill: rgba(255,255,255,.45); } .lk-cs3 { fill: rgba(255,255,255,.75); }
.lk-ch1 { fill: rgba(247,217,143,.45); } .lk-ch2 { fill: rgba(247,217,143,.65); } .lk-ch3 { fill: rgba(247,217,143,.85); }

/* Remesas: la roseta de guilloché (las líneas finas de los billetes) y el nombre en IBM Plex, la letra de sus cifras */
.lk[data-tema^="remesas"] .lk-sello { width: 72px; height: 72px; }
.lk-gu { fill: none; stroke: var(--lk-ac-claro); stroke-width: .75; opacity: .9; }
.lk-gu2 { stroke-width: .9; opacity: 1; }
.lk-gu-puntos { fill: none; stroke: var(--lk-ac-claro); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 0 4.15; opacity: .6; }
.lk-gu-centro { fill: var(--lk-ac); stroke: none; }
.lk[data-tema^="remesas"] .lk-titulo { font: 600 30px/1.08 var(--lk-f-disp); letter-spacing: -.015em; text-transform: none; color: var(--lk-titulo); }
.lk[data-tema^="remesas"] .lk-sub { font: 500 15px/1.3 var(--lk-f-ui); letter-spacing: 0; color: var(--lk-tx2); }
/* detrás, una banda de ondas de guilloché */
.lk[data-tema^="remesas"] .lk-a-ondas { left: 0; top: 3vh; width: 100%; height: 200px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); }
.lk-on0, .lk-on1, .lk-on2 { fill: none; stroke-width: .6; }
.lk-on0 { stroke: rgba(238,215,155,.16); } .lk-on1 { stroke: rgba(238,215,155,.10); } .lk-on2 { stroke: rgba(120,190,196,.12); }
.lk[data-tema="remesas-claro"] .lk-on0 { stroke: rgba(44,106,115,.22); } .lk[data-tema="remesas-claro"] .lk-on1 { stroke: rgba(44,106,115,.13); } .lk[data-tema="remesas-claro"] .lk-on2 { stroke: rgba(184,146,47,.22); }
.lk[data-tema="remesas-claro"] .lk-gu { opacity: .85; }

/* El panel .sale: el logo del local con su aro de oro, el nombre en Playfair (la letra de sus webs) y una tarjeta como una invitación */
.lk[data-tema^="sale-"] .lk-aro { stroke: var(--lk-ac-claro); opacity: .9; }
.lk[data-tema^="sale-"] .lk-aro2 { stroke: var(--lk-ac); opacity: .45; }
.lk[data-tema^="sale-"] .lk-placa .lk-marca-img { filter: var(--lk-logo-sombra); }
.lk[data-tema^="sale-"] .lk-titulo { font: 700 33px/1.08 var(--lk-f-disp); letter-spacing: 0; text-transform: none; color: var(--lk-titulo); }
.lk[data-tema^="sale-"] .lk-sub { font: 500 15px/1.3 var(--lk-f-ui); letter-spacing: .02em; color: var(--lk-tx2); }
.lk[data-tema="sale-kings"] .lk-sub { margin-top: 16px; font: 600 20px/1.2 var(--lk-f-disp); letter-spacing: 0; color: var(--lk-titulo); }
.lk[data-tema^="sale-"] .lk-a-chispas { left: 50%; top: 0; width: 100%; max-width: 860px; height: auto; transform: translateX(-50%); }
.lk-a-chispas .lk-ch1 { fill: var(--lk-chispa); opacity: .3; } .lk-a-chispas .lk-ch2 { fill: var(--lk-chispa); opacity: .5; } .lk-a-chispas .lk-ch3 { fill: var(--lk-chispa); opacity: .72; }

/* =====================================================================================================================
   EN EL ORDENADOR, A DOS COLUMNAS (data-maqueta="lado": Contabilidad, Horario y Reseñas). A la izquierda la marca y el dibujo de la app;
   a la derecha, la tarjeta. Con el teclado del iPad no se mueve la cabecera (está al lado, no encima).
   ===================================================================================================================== */
@media (min-width: 1100px) and (min-height: 560px) {
  .lk[data-maqueta="lado"] { --lk-lado: 44%; background: var(--lk-lado-der, var(--lk-g1)); }
  .lk[data-maqueta="lado"] .lk-fondo { right: auto; width: var(--lk-lado); background: var(--lk-panel-bg, var(--lk-fondo-bg)); }
  .lk[data-maqueta="lado"] .lk-col { padding-left: calc(var(--lk-lado) + 48px); padding-right: 48px; }
  .lk[data-maqueta="lado"] .lk-in { max-width: 420px; }
  .lk[data-maqueta="lado"] .lk-cab { position: absolute; top: 0; bottom: 0; left: 0; width: var(--lk-lado); padding: 64px 72px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
    transform: none !important; margin: 0 !important; transition: none; }
  .lk[data-maqueta="lado"] .lk-tarjeta, .lk[data-maqueta="lado"].lk-escribiendo .lk-tarjeta { margin-top: 0; }
  .lk[data-maqueta="lado"].lk-escribiendo .lk-sub, .lk[data-maqueta="lado"].lk-escribiendo .lk-halo { opacity: 1; }

  /* Contabilidad: el lateral verde de la app, con su azulejo de oro, el nombre en blanco y la trayectoria abajo */
  .lk[data-tema="conta"][data-maqueta="lado"] { --lk-panel-bg: linear-gradient(165deg, #22503F 0%, #173A30 52%, #112C26 100%); }
  .lk[data-tema="conta"][data-maqueta="lado"] .lk-cab { align-items: flex-start; text-align: left; padding: 64px 72px 26vh; }
  .lk[data-tema="conta"][data-maqueta="lado"] .lk-sello { width: 84px; height: 84px; margin: 0 0 30px; }
  .lk[data-tema="conta"][data-maqueta="lado"] .lk-disco { background: linear-gradient(155deg, #EDD48C 0%, #CBA343 58%, #B48B2C 100%); box-shadow: 0 18px 32px -18px rgba(0,0,0,.6); }
  .lk[data-tema="conta"][data-maqueta="lado"] .lk-aro { stroke: rgba(226,196,110,.7); }
  .lk[data-tema="conta"][data-maqueta="lado"] .lk-marca-conta rect { fill: #173A30; }
  .lk[data-tema="conta"][data-maqueta="lado"] .lk-titulo { margin: 0; align-self: auto; font-size: 46px; letter-spacing: -.025em; color: #FFFFFF; }
  .lk[data-tema="conta"][data-maqueta="lado"] .lk-sub { margin: 10px 0 0; align-self: auto; font-size: 18px; color: #A6C0B5; }
  .lk[data-tema="conta"][data-maqueta="lado"] .lk-a-traza { height: 40%; min-height: 0; -webkit-mask-image: none; mask-image: none; }
  .lk[data-tema="conta"][data-maqueta="lado"] .lk-t-red { stroke: rgba(255,255,255,.07); }
  .lk[data-tema="conta"][data-maqueta="lado"] .lk-t-area { fill: rgba(226,196,110,.13); }
  .lk[data-tema="conta"][data-maqueta="lado"] .lk-t-linea { stroke: #E2C46E; stroke-width: 2.2; }

  /* Horario: arriba el nombre y debajo la semana entera, como la foto del horario */
  .lk[data-tema="horario"][data-maqueta="lado"] .lk-cab { display: grid; bottom: auto; align-content: start; justify-content: start; text-align: left; padding: 56px 64px 0; }
  .lk[data-tema="horario"][data-maqueta="lado"] .lk-sello { width: 74px; height: 74px; }
  .lk[data-tema="horario"][data-maqueta="lado"] .lk-titulo { font-size: 40px; }
  .lk[data-tema="horario"][data-maqueta="lado"] .lk-sub { font-size: 16.5px; }
  .lk[data-tema="horario"][data-maqueta="lado"] .lk-arte { background: none; -webkit-mask-image: none; mask-image: none; }
  .lk[data-tema="horario"][data-maqueta="lado"] .lk-a-semana { display: block; left: 64px; top: 64px; width: calc(100% - 128px); height: calc(100% - 128px); }
  .lk-a-semana .lk-c { stroke-width: 1.3; }
  .lk-s-tabla { fill: var(--lk-cal-hoja); stroke: var(--lk-cal-borde); stroke-width: 1; }
  .lk-s-cab { fill: var(--lk-cal-cab); }
  .lk-s-dia { fill: var(--lk-cal-tx); font: 700 14px var(--lk-f-ui); text-anchor: middle; letter-spacing: .04em; }
  .lk-s-raya { stroke: var(--lk-cal-borde); stroke-width: 1; opacity: .7; }
  .lk-s-av { stroke: none; } .lk-s-av0 { fill: #5D8A5E; } .lk-s-av1 { fill: #9A6B3E; } .lk-s-av2 { fill: #7A5A8C; } .lk-s-av3 { fill: #4F7E93; } .lk-s-av4 { fill: #A0574F; } .lk-s-av5 { fill: #6F8A3D; }
  .lk-s-ini { fill: #FFFFFF; font: 700 14px var(--lk-f-ui); text-anchor: middle; }
  .lk-s-nom { fill: var(--lk-s-nom); }
  .lk-s-hora { fill: var(--lk-s-hora); }

  /* Reseñas: el cielo, una comilla grande y las estrellas con el nombre, en medio; a la derecha la tarjeta */
  .lk[data-tema="resenas"][data-maqueta="lado"] .lk-sello { width: 236px; height: 43px; }
  .lk[data-tema="resenas"][data-maqueta="lado"] .lk-titulo { margin-top: 30px; font-size: 60px; }
  .lk[data-tema="resenas"][data-maqueta="lado"] .lk-sub { margin-top: 12px; font-size: 19px; }
  .lk[data-tema="resenas"][data-maqueta="lado"] .lk-a-cielo { height: 100%; -webkit-mask-image: none; mask-image: none; }
  .lk[data-tema="resenas"][data-maqueta="lado"] .lk-a-comillas { display: block; position: absolute; left: 7%; top: 3%; font: 700 300px/1 "Playfair Display", Georgia, serif; color: rgba(240,192,90,.10); }
}
@media (min-width: 1100px) and (min-height: 560px) and (prefers-color-scheme: dark) {
  .lk[data-tema="horario"][data-maqueta="lado"] .lk-s-ini { fill: #0D2620; }
  .lk[data-tema="horario"][data-maqueta="lado"] .lk-s-av0 { fill: #9DB86A; } .lk[data-tema="horario"][data-maqueta="lado"] .lk-s-av1 { fill: #E3A35F; } .lk[data-tema="horario"][data-maqueta="lado"] .lk-s-av2 { fill: #B48EAD; }
  .lk[data-tema="horario"][data-maqueta="lado"] .lk-s-av3 { fill: #7FB8D9; } .lk[data-tema="horario"][data-maqueta="lado"] .lk-s-av4 { fill: #E07A5F; } .lk[data-tema="horario"][data-maqueta="lado"] .lk-s-av5 { fill: #D4AF37; }
}

/* ---------- la entrada (una vez al abrir; el formulario se puede usar desde el primer momento). Todo acaba antes de 1 s ---------- */
.lk-entra .lk-halo { animation: lk-halo .9s cubic-bezier(.2,.7,.2,1) both; }
.lk-entra .lk-aro { stroke-dasharray: var(--lk-L); stroke-dashoffset: var(--lk-L); animation: lk-trazo .75s cubic-bezier(.65,0,.25,1) .02s forwards; }
.lk-entra .lk-aro2 { animation: lk-puntos .85s cubic-bezier(.2,.7,.2,1) .1s both; }
.lk-entra .lk-sello-centro { animation: lk-centro .6s cubic-bezier(.2,.7,.2,1) .08s both; }
.lk-entra .lk-marca-conta rect { transform-box: fill-box; transform-origin: 50% 100%; animation: lk-barra .45s cubic-bezier(.2,.8,.2,1) both; }
.lk-entra .lk-marca-conta .lk-b1 { animation-delay: .22s; }
.lk-entra .lk-marca-conta .lk-b2 { animation-delay: .29s; }
.lk-entra .lk-marca-conta .lk-b3 { animation-delay: .36s; }
.lk-entra .lk-destello { animation: lk-destello .6s cubic-bezier(.4,0,.2,1) .34s both; }
.lk-entra .lk-titulo { animation: lk-sube .5s cubic-bezier(.2,.7,.2,1) .14s both; }
.lk-entra .lk-sub { animation: lk-sube .5s cubic-bezier(.2,.7,.2,1) .2s both; }
.lk-entra .lk-tarjeta { animation: lk-tarjeta .55s cubic-bezier(.2,.7,.2,1) .24s both; }
.lk-entra .lk-confianza { animation: lk-aparece .5s ease .44s both; }
/* lo de cada tema: el escudo y la roseta se dibujan, la semana se rellena, la parrilla se monta, las estrellas se encienden, el punto salta */
.lk-entra .lk-traza { stroke-dasharray: 1; stroke-dashoffset: 1; animation: lk-trazo .6s cubic-bezier(.65,0,.25,1) .12s forwards; }
.lk-entra .lk-traza2 { animation-delay: .5s; animation-duration: .3s; }
.lk-entra .lk-gu.lk-traza { animation-duration: .85s; animation-delay: .04s; }
.lk-entra .lk-c, .lk-entra .lk-s-hora { transform-box: fill-box; transform-origin: 0 50%; animation: lk-celda .3s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.22s + var(--i, 0) * 45ms); }
.lk-entra .lk-r { transform-box: fill-box; transform-origin: center; animation: lk-pieza .42s cubic-bezier(.3,1.4,.5,1) both; animation-delay: calc(.12s + var(--i, 0) * 90ms); }
.lk-entra .lk-e { animation: lk-estrella .4s cubic-bezier(.3,1.5,.5,1) both; animation-delay: calc(.18s + var(--i, 0) * 85ms); }
.lk-entra .lk-punto { animation: lk-punto .45s cubic-bezier(.3,1.6,.5,1) .55s both; }
.lk-entra .lk-a-semana, .lk-entra .lk-a-traza, .lk-entra .lk-a-cielo, .lk-entra .lk-a-ondas, .lk-entra .lk-a-parrilla, .lk-entra .lk-a-chispas, .lk-entra .lk-a-comillas { animation: lk-aparece .8s ease .1s both; }
/* al volver a salir (tras «Salir» o un aviso): sin la entrada entera */
.lk.lk-aparece { animation: lk-aparece .26s ease both; }
.lk-vista.lk-aparece { animation: lk-vista .24s cubic-bezier(.2,.7,.2,1); }
/* al entrar en la app: el login se va y deja ver la app de detrás */
.lk.lk-sale { opacity: 0; pointer-events: none; transition: opacity .32s ease; }
.lk.lk-sale .lk-col { transform: scale(1.015); transition: transform .32s ease; }

@keyframes lk-halo { from { opacity: 0; transform: translate(-50%, -50%) scale(.55); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes lk-centro { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
@keyframes lk-puntos { from { opacity: 0; transform: rotate(-50deg); } to { opacity: .5; transform: none; } }
@keyframes lk-barra { from { transform: scaleY(0); } to { transform: none; } }
@keyframes lk-destello { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes lk-tarjeta { from { opacity: 0; transform: translateY(26px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes lk-giro { to { transform: rotate(360deg); } }
@keyframes lk-trazo { to { stroke-dashoffset: 0; } }
@keyframes lk-sube { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes lk-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes lk-vista { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes lk-aviso { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes lk-celda { from { opacity: 0; transform: scaleX(.2); } to { opacity: 1; transform: none; } }
@keyframes lk-pieza { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
@keyframes lk-estrella { from { opacity: 0; transform: scale(.35) rotate(-30deg); } to { opacity: 1; transform: none; } }
@keyframes lk-punto { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }

/* quien pide menos movimiento: todo quieto; solo lo que dice que algo pasa (girar) sigue, más despacio */
@media (prefers-reduced-motion: reduce) {
  .lk *, .lk *::before, .lk *::after, .lk { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .lk .lk-spin, .lk .lk-r-aro { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
  .lk.lk-sale .lk-col { transform: none; }
}
/* (12-nov-2026, Robert con el iPhone SE) pantallas bajas: el sello y el título más pequeños, la tarjeta más arriba */
@media (max-height: 720px) {
  .lk-col { padding-top: calc(env(safe-area-inset-top, 0px) + 14px); }
  .lk-sello { width: 88px; height: 88px; }
  .lk-sello.lk-placa { width: 196px; height: 72px; }
  .lk .lk-titulo { font-size: 24px; margin-top: 12px; }
  .lk-tarjeta { margin-top: 16px; }
  .lk[data-tema="conta"] .lk-sello, .lk[data-tema="horario"] .lk-sello, .lk[data-tema="avisos"] .lk-sello, .lk[data-tema^="remesas"] .lk-sello { width: 58px; height: 58px; }
  .lk[data-tema="conta"] .lk-titulo, .lk[data-tema="avisos"] .lk-titulo, .lk[data-tema^="remesas"] .lk-titulo { font-size: 26px; }
  .lk[data-tema="horario"] .lk-titulo { font-size: 30px; }
  .lk[data-tema="redes"] .lk-sello { width: 62px; height: 62px; }
  .lk[data-tema="conta"] .lk-a-traza { display: none; }
  .lk[data-tema="redes"] .lk-titulo, .lk[data-tema="resenas"] .lk-titulo { margin-top: 12px; font-size: 30px; }
  .lk[data-tema="resenas"] .lk-sello { width: 150px; height: 27px; }
  .lk[data-tema^="sale-"] .lk-titulo { margin-top: 12px; font-size: 27px; }
  .lk[data-tema="sale-kings"] .lk-sub { margin-top: 12px; font-size: 18px; }
}
/* con el teclado abierto (login-kit.js, actualizar): la entrada mide lo que se ve */
.lk.lk-teclado .lk-in { margin: 0; }
.lk.lk-teclado .lk-col { min-height: 0; padding-bottom: 12px; }
/* (12-nov-2026, Robert: «que se mueva la parte de arriba cuando quieres escribir, como los profesionales») escribiendo con el dedo, la cabecera
   se encoge y sube a la vez que sale el teclado y la tarjeta sube detrás (login-kit.js, ponerEscribir y moverSuave: todo con transform) */
.lk-cab { transform-origin: 50% 0; transition: transform .32s cubic-bezier(.2,.8,.2,1); }
.lk[data-cab="fila"] .lk-cab { transform-origin: 0 0; }
.lk .lk-sub, .lk-halo { transition: opacity .3s ease .06s; }
.lk.lk-escribiendo .lk-cab { transform: scale(var(--lk-esc, .5)); margin-bottom: calc(-1 * var(--lk-recorte, 0px)); }
.lk.lk-escribiendo .lk-sub, .lk.lk-escribiendo .lk-halo { opacity: 0; transition: opacity .16s ease; }
.lk.lk-escribiendo .lk-in { margin: 0; }
.lk.lk-escribiendo .lk-col { padding-top: calc(env(safe-area-inset-top, 0px) + 10px); }
.lk.lk-escribiendo .lk-tarjeta { margin-top: 14px; }