/* ═══════════════════════════════════════════════════════════════════════════
   VIMEDIA UI-KIT · Streaming Go
   Sistema compartido de TODAS las pantallas. Se carga ANTES de la hoja
   propia de cada página.

   Reglas que hace cumplir este archivo:
   · UN solo acento sólido — var(--accent), configurable desde el admin.
   · Ningún valor literal aguas abajo: todo sale de un token --k-*.
   · Pesos 300-700. El 700 es SOLO para lo que debe resaltar (títulos de
     pantalla y cifras); el cuerpo nunca pasa de 600. Corregido el 21/08/26 por
     el dueño: «las letras se ven muy sencillas, frágiles, no hay letras que
     resalten, que se vean pro». Antes el tope era 600 y nada destacaba.
   · Superficies planas y blancas. Sin degradados. Sin tintes lavados.
   · Botones a la medida de su texto (36-40px). Solo-ícono = circular.
   · Una sola curva y una sola duración de movimiento.
   · Foco visible siempre, y prefers-reduced-motion respetado.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── El acento: uno solo. Sale del tema del admin, con el morado de la marca
       como valor por defecto. Investigado 17/08/26: de los cinco carriles del
       streaming (rojo Netflix/YouTube · azul Disney+/Prime/Paramount+/Max ·
       verde Spotify · negro Apple TV+ · morado Twitch/Roku) el morado es el
       único que NO choca con ningún logo del catálogo que este portal exhibe. */
    --k-acento: var(--accent, #5e2ced);
    --k-acento-tinte: color-mix(in srgb, var(--k-acento) 10%, #fff);
    --k-acento-borde: color-mix(in srgb, var(--k-acento) 26%, #fff);
    --k-acento-aro: color-mix(in srgb, var(--k-acento) 14%, transparent);

    /* ── Tinta y grises neutros ── */
    --k-tinta: #111214;
    --k-blanco: #ffffff;
    --k-g50: #f7f7f8;
    --k-g100: #efeff1;
    --k-g200: #e3e4e7;
    --k-g400: #a2a4aa;   /* SOLO decoración: bordes e íconos apagados. Nunca texto. */
    --k-g600: #6a6c72;   /* el texto secundario vive acá */

    /* ── Estados funcionales — SÓLIDOS (orden del usuario 18/08/26: nada de
       tintes lavados; "sobrios y sólidos" dice el estándar). Los -t/-f viejos
       quedan solo para AVISOS grandes de texto largo. ── */
    --k-ok: #0b8457;     /* verde sólido, texto blanco — medido: 4.7 con blanco */
    /* el azul del verificado: lo dio el dueño y es identidad, no decoración,
       así que vive como token y no repetido a mano en cada hoja */
    --k-verificado: #4a9be8;
    --k-warn: #f7b32b;   /* ámbar sólido, texto tinta oscura */
    --k-err: #e02d2d;    /* rojo sólido, texto blanco */
    --k-ok-t: #14634a;   --k-ok-f: #e8f5ef;
    --k-warn-t: #6b4a00; --k-warn-f: #faf3e0;
    --k-err-t: #a32323;  --k-err-f: #fbecec;

    /* ── Movimiento: UNA curva, UNA duración ── */
    --k-curva: cubic-bezier(.2, .8, .2, 1);
    --k-t: 180ms var(--k-curva);
    --k-t-lento: 240ms var(--k-curva);

    /* ── Elevación: dos niveles, casi imperceptible ── */
    --k-sombra: 0 10px 24px -12px rgba(17, 18, 20, .14);
    --k-sombra-alta: 0 16px 32px -14px rgba(17, 18, 20, .22);

    /* ═══ LA ESCALA TIPOGRAFICA (21/08/26) ══════════════════════════════
       Antes NO HABIA escala: 27 tamaños distintos escritos a mano por las
       hojas, entre 11 y 34px, sin relación entre ellos. Medido en el checkout:
       el texto más grande de toda la pantalla era el total, a 18px, y los
       títulos («Tu carrito», «Tus datos») estaban a 13-14px. Un título de 14px
       no es un título: por eso «no había letras que resaltaran».
       Seis escalones y se acabó. Cada hoja elige un token, no un número. */
    --k-f-xs: 12px;    /* pies, notas, pistas */
    --k-f-sm: 13px;    /* apoyo */
    --k-f-md: 15px;    /* CUERPO — antes 12-13, que a peso 300 se deshacía */
    --k-f-lg: 18px;    /* subtítulo, dato de tarjeta */
    --k-f-xl: 22px;    /* título de sección */
    --k-f-2xl: clamp(26px, 3.4vw, 34px);   /* título de pantalla */

    /* ── Pesos ── */
    /* ⚠ EL CUERPO ARRANCA EN 400 Y NO BAJA. Había 66 reglas con `font-weight:
       300` repartidas por las hojas, casi todas sobre texto de 11 a 13px —y
       varias en blanco sobre fondo oscuro, que es peor todavía—. Montserrat
       Light a ese tamaño tiene trazo de hilo: se lava, y eso es exactamente lo
       que el dueño describió como «letras sencillas, frágiles». El 300 sigue
       cargado para tipografía GRANDE, donde sí es elegante. */
    --k-peso-cuerpo: 400;
    --k-peso-medio: 500;
    --k-peso-fuerte: 600;
    /* ⚠ 700 SOLO donde tiene que pesar. Repartirlo lo vuelve ruido y se pierde
       otra vez la jerarquía, que es justo lo que se está arreglando. */
    --k-peso-destaque: 700;

    /* ── Medidas ── */
    --k-alto: 38px;
    --k-alto-btn: 36px;
    --k-radio: 10px;
    --k-radio-caja: 12px;
    --k-linea: var(--k-g200);

    /* ═══ LA RETÍCULA (20/08/26) ═══════════════════════════════════════════
       Medido antes de escribirla: el riel tenía tres anchos de pieza (82·54·42)
       y dos ejes verticales (51 y 46), y los pies de las tarjetas caían en tres
       alturas distintas (123·100·71). Nada de eso se ve como un error concreto
       — se siente como desorden. La cura no es empujar cada pieza a mano, es
       que todas midan desde la misma escala.

       Todo sale de una base de 4. Si un valor no está acá, no se inventa: se
       usa el escalón más cercano. */
    --k-e1: 4px;
    --k-e2: 8px;
    --k-e3: 12px;
    --k-e4: 16px;
    --k-e5: 24px;
    --k-e6: 32px;
    --k-e7: 40px;

    /* La CAJA ÓPTICA del ícono: el glifo mide una cosa y su caja otra. Fijar
       las dos es lo que hace que un ícono suelto y otro dentro de un botón
       caigan en el mismo eje. */
    --k-ico: 20px;        /* el dibujo */
    --k-ico-caja: 36px;   /* lo que ocupa y lo que se puede tocar */
    --k-ico-chico: 16px;

    /* Alturas de control — tres y basta */
    --k-alto-sm: 32px;
    --k-alto-md: 38px;    /* = --k-alto, el de los campos */
    --k-alto-lg: 44px;    /* objetivo táctil mínimo */

    /* La marca de una app: una sola caja en todo el sistema */
    --k-marca-caja: 44px;
    --k-marca-radio: 12px;
}

/* ── Reset mínimo ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* ── FOCO VISIBLE — faltaba en todo el sistema ────────────────────────── */
:focus-visible {
    outline: 2px solid var(--k-acento);
    outline-offset: 2px;
    border-radius: 4px;
}
/* un div con onclick que es la acción principal también necesita foco */
[role="button"]:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--k-acento); outline-offset: 2px; }

/* strong/b del navegador pesan 700: acá NINGÚN peso pasa de 600 */
strong, b { font-weight: 600; }

/* el ícono de la casa (sprite sólido): tamaño base SIEMPRE, o el SVG explota */
.k-ic { width: 16px; height: 16px; flex-shrink: 0; fill: currentColor; }
.k-btn-ico .k-ic { width: 17px; height: 17px; }
/* el ícono que encabeza una sección: la caja de la retícula, no 16 sueltos */
.k-ic-cab { width: var(--k-ico); height: var(--k-ico); color: var(--k-acento); }

/* ── Ancho de lectura: nunca más de ~70 caracteres ─────────────────────── */
.k-lectura { max-width: 65ch; }

/* ═══ BOTONES ═══════════════════════════════════════════════════════════
   Miden lo que mide su texto + respiro. Full-width SOLO en móvil.        */
.k-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: var(--k-alto-btn); padding: 0 14px; width: auto;
    border: 1px solid var(--k-linea); border-radius: 9px;
    background: var(--k-blanco); color: var(--k-tinta);
    font-size: 13px; font-weight: 600; line-height: 1;
    cursor: pointer; white-space: nowrap;
    transition: background var(--k-t), border-color var(--k-t), transform var(--k-t), box-shadow var(--k-t);
}
.k-btn:hover { background: var(--k-g50); border-color: var(--k-g400); }
.k-btn:active { transform: translateY(1px); }
.k-btn:disabled, .k-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.k-btn:disabled:hover, .k-btn[aria-disabled="true"]:hover { background: var(--k-blanco); border-color: var(--k-linea); }

/* el ÚNICO sólido de la pantalla */
.k-btn-primary { background: var(--k-acento); border-color: var(--k-acento); color: #fff; }
.k-btn-primary:hover { background: var(--k-acento); border-color: var(--k-acento); filter: brightness(1.08); }

/* ═══ LA PASTILLA DE ESTADO ══════════════════════════════════════════════
   ⚠ Vivía definida TRES veces —portal.css a 32, application.css a 26 y
   .status-pill a 24— y cada pantalla mostraba una altura distinta según qué
   hoja cargara última. Ese es el desorden que se siente sin poder señalarlo.
   Nace acá y las hojas particulares solo le añaden lo suyo. */
.dias-pill, .status-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--k-e2);
    height: var(--k-alto-sm);
    padding: 0 var(--k-e3);
    border-radius: 999px;
    border: 1px solid var(--k-g200);
    background: var(--k-blanco);
    color: var(--k-tinta);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
.dias-pill i, .status-pill i { display: none; }   /* el punto reemplaza al ícono */
.dias-pill::before, .status-pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--k-g400);
    flex: 0 0 auto;
}
.dias-pill.dias-ok::before,    .status-pill.is-ok::before    { background: var(--k-ok); }
.dias-pill.dias-pocos::before, .status-pill.is-warn::before  { background: var(--k-warn); }
.dias-pill.dias-cero::before,  .status-pill.is-err::before   { background: var(--k-err); }

.k-btn-sm { height: var(--k-alto-sm); padding: 0 var(--k-e3); font-size: 12px; border-radius: 8px; }
.k-btn-lg { height: 40px; padding: 0 18px; }

/* destructivo: outline NEUTRO con el rojo en la letra y el ícono */
.k-btn-peligro { color: var(--k-err-t); }
.k-btn-peligro:hover { background: var(--k-g50); border-color: var(--k-g400); }

.k-btn i, .k-btn svg { font-size: 13px; width: 15px; height: 15px; }

/* ═══ BOTÓN DE SOLO-ÍCONO — circular, sin caja ══════════════════════════
   El hover NO pinta un círculo gris: el ícono crece ~18%, sube 1px y se
   oscurece. Y donde tiene sentido, se mueve según lo que hace.           */
.k-btn-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--k-alto-btn); height: var(--k-alto-btn); border-radius: 50%;
    border: none; background: transparent; color: var(--k-g600);
    cursor: pointer; flex-shrink: 0; padding: 0;
    transition: color var(--k-t), transform var(--k-t);
}
.k-btn-ico:hover { color: var(--k-tinta); transform: translateY(-1px); }
.k-btn-ico:active { transform: scale(.92); }
.k-btn-ico i, .k-btn-ico svg { font-size: 16px; transition: transform 220ms var(--k-curva); }
.k-btn-ico:hover i, .k-btn-ico:hover svg { transform: scale(1.18); }
.k-btn-ico.k-peligro:hover { color: var(--k-err-t); }
.k-btn-ico.k-sobre-foto { color: #fff; }
.k-btn-ico.k-sobre-foto:hover { filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .55)); }

/* movimiento con sentido — data-mov en botones de ícono Y en baldosas:
   la campana repica, la llave y el engranaje giran, la tienda cae… */
.k-btn-ico[data-mov="repica"]:hover :is(i, svg),
.k-baldosa:hover .k-baldosa-cara[data-mov="repica"] :is(i, svg) { animation: kRepica 550ms var(--k-curva); }
.k-btn-ico[data-mov="acerca"]:hover :is(i, svg) { transform: scale(1.34); }
.k-baldosa:hover .k-baldosa-cara[data-mov="acerca"] :is(i, svg) { transform: scale(1.22); }
.k-btn-ico[data-mov="avanza"]:hover :is(i, svg),
.k-baldosa:hover .k-baldosa-cara[data-mov="avanza"] :is(i, svg) { transform: scale(1.12) translateX(3px); }
.k-btn-ico[data-mov="sale"]:hover :is(i, svg) { transform: scale(1.12) translateX(3px); }
.k-btn-ico[data-mov="cae"]:hover :is(i, svg),
.k-baldosa:hover .k-baldosa-cara[data-mov="cae"] :is(i, svg) { animation: kCae 450ms var(--k-curva); }
.k-btn-ico[data-mov="gira"]:hover :is(i, svg),
.k-baldosa:hover .k-baldosa-cara[data-mov="gira"] :is(i, svg) { transform: scale(1.14) rotate(52deg); }
.k-btn-ico[data-mov="cierra"]:hover :is(i, svg) { transform: scale(1.18) rotate(90deg); }
@keyframes kRepica {
    0%, 100% { transform: scale(1.18) rotate(0); }
    22% { transform: scale(1.18) rotate(-12deg); }
    55% { transform: scale(1.18) rotate(9deg); }
    80% { transform: scale(1.18) rotate(-4deg); }
}
@keyframes kCae {
    0%   { transform: scale(1.18) translateY(0); }
    45%  { transform: scale(1.18) translateY(3px); }
    100% { transform: scale(1.18) translateY(0); }
}

/* ═══ TOOLTIP ═══════════════════════════════════════════════════════════
   Solo en botones de solo-ícono, y solo cuando AGREGA información.
   Los universales (lupa, engranaje, papelera) llevan aria-label y nada más. */
:where([data-tip]) { position: relative; }  /* :where = no pisa position:fixed/absolute */
[data-tip]::after {
    content: attr(data-tip);
    --tipx: -50%;
    position: absolute; bottom: calc(100% + 9px); left: 50%;
    transform: translateX(var(--tipx)) translateY(3px);
    background: #2a2b2f; color: #fff;
    font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap;
    padding: 7px 11px; border-radius: 8px;
    opacity: 0; pointer-events: none; z-index: 80;
    transition: opacity var(--k-t), transform var(--k-t);
}
[data-tip]::before {
    content: ""; position: absolute; bottom: calc(100% + 4px); left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: #2a2b2f; border-bottom: none;
    opacity: 0; pointer-events: none; z-index: 80;
    transition: opacity var(--k-t);
}
[data-tip]:hover::after { opacity: 1; transform: translateX(var(--tipx)) translateY(0); }
[data-tip]:hover::before { opacity: 1; }

/* posición inteligente — el JS marca estos atributos midiendo el borde */
[data-tip][data-tip-pos="abajo"]::after {
    bottom: auto; top: calc(100% + 9px);
    transform: translateX(var(--tipx, -50%)) translateY(-3px);
}
[data-tip][data-tip-pos="abajo"]::before {
    bottom: auto; top: calc(100% + 4px);
    border-top: none; border-bottom: 5px solid #2a2b2f;
}
[data-tip][data-tip-pos="abajo"]:hover::after { transform: translateX(var(--tipx, -50%)) translateY(0); }
[data-tip][data-tip-alin="izq"]::after { --tipx: 0%; left: -4px; }
[data-tip][data-tip-alin="der"]::after { --tipx: 0%; left: auto; right: -4px; }

/* el globo se QUITA al presionar y solo vuelve al re-pasar el mouse */
[data-tip-mute]::after, [data-tip-mute]::before { opacity: 0 !important; }

/* ═══ FORMULARIOS ═══════════════════════════════════════════════════════ */
.k-label {
    display: block; margin: 0 0 5px;
    font-size: 11.5px; font-weight: 600; color: var(--k-g600);
    letter-spacing: 0; text-transform: none;
}
.k-input, .k-select, .k-textarea {
    width: 100%; height: var(--k-alto); padding: 0 12px;
    border: 1px solid var(--k-linea); border-radius: 8px;
    background: var(--k-blanco); color: var(--k-tinta);
    font-size: 13.5px;
    transition: border-color var(--k-t), box-shadow var(--k-t);
}
.k-textarea { height: auto; min-height: 86px; padding: 10px 12px; resize: vertical; line-height: 1.55; }
.k-input:focus, .k-select:focus, .k-textarea:focus {
    outline: none;
    border-color: var(--k-acento);
    box-shadow: 0 0 0 3px var(--k-acento-aro);
}
.k-input::placeholder, .k-textarea::placeholder { color: var(--k-g400); }

/* ── El campo completo: etiqueta chica arriba + control ──────────────────
   ⚠ Se usaba en perfil.php y checkout.php desde hacía días y NUNCA EXISTIÓ:
   los campos salían con el borde crudo del navegador y la etiqueta pegada a
   un lado. No daba ningún error — solo se veía "sin diseño". */
.k-campo { display: grid; gap: 5px; min-width: 0; }
.k-campo > span {
    font-size: 11.5px; font-weight: 600; color: var(--k-g600);
    letter-spacing: 0; text-transform: none;
}
.k-campo > input, .k-campo > select, .k-campo > textarea {
    width: 100%; height: var(--k-alto); padding: 0 12px;
    border: 1px solid var(--k-linea); border-radius: 8px;
    background: var(--k-blanco); color: var(--k-tinta);
    font-family: inherit; font-size: 13.5px;
    transition: border-color var(--k-t), box-shadow var(--k-t);
}
.k-campo > textarea { height: auto; min-height: 86px; padding: 10px 12px; resize: vertical; line-height: 1.55; }
.k-campo > input:focus, .k-campo > select:focus, .k-campo > textarea:focus {
    outline: none;
    border-color: var(--k-acento);
    box-shadow: 0 0 0 3px var(--k-acento-aro);
}
.k-campo > input::placeholder, .k-campo > textarea::placeholder { color: var(--k-g400); }
.k-campo small { font-size: 11.5px; font-weight: 400; color: var(--k-g600); }

/* ═══ DESPLEGABLE PROPIO — ningún <select> nativo ═══════════════════════
   El menú del sistema operativo rompe el diseño en cada pantalla. El menú
   toma el lenguaje del login (vidrio oscuro, texto blanco, radio grande),
   pero sobre pantalla clara el vidrio va MÁS CERRADO: con el valor del
   login el texto blanco quedaría ilegible. Medido, no estimado.          */
/* ⚠ EL ENVOLTORIO NO DIBUJA NADA — LA LÍNEA DOBLE VENÍA DE ACÁ.
   `armarSelect` le copia al envoltorio las clases del <select> real, para que
   un desplegable con estilo propio no pierda su color al convertirse. Pero esas
   clases casi siempre traen borde y fondo (`.form-control`, `.ab-salud-sel`) y
   el botón visible ya trae los suyos: quedaban DOS filetes pegados, en los 20
   desplegables del sistema. Medido el 21/08/26 en Abastecer: 4 de 4 dobles.
   Va con `!important` a propósito: la clase copiada puede ser cualquiera y su
   hoja carga DESPUÉS que el kit, así que a igual especificidad le ganaría. */
.k-sel {
    position: relative;
    border: 0 !important;
    background: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.k-sel > select { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
/* ⚠ Lo crea el JS del kit (vimedia-kit.js) en CADA desplegable propio y no
   estaba definido en ninguna hoja: dentro de un flex, un span sin min-width:0
   no puede encoger, así que una opción larga empujaba el chevrón fuera del
   botón. Mismo caso que .k-campo. */
.k-sel-valor {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.k-sel-btn {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; height: var(--k-alto); padding: 0 12px;
    border: 1px solid var(--k-linea); border-radius: 8px;
    background: var(--k-blanco); color: var(--k-tinta);
    font-size: 13.5px; font-weight: 500; text-align: left;
    cursor: pointer;
    transition: border-color var(--k-t), box-shadow var(--k-t);
}
.k-sel-btn:hover { border-color: var(--k-g400); }
.k-sel-btn i { font-size: 11px; color: var(--k-g600); transition: transform var(--k-t); }
.k-sel-menu.on ~ .k-sel-btn i, .k-sel-btn[aria-expanded="true"] i { transform: rotate(180deg); }
.k-sel-menu {
    position: absolute; z-index: 70; top: calc(100% + 6px); left: 0; right: 0;
    max-height: 280px; overflow-y: auto; padding: 6px;
    border-radius: 14px;
    background: rgba(18, 16, 38, .93);
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 24px 60px -26px rgba(0, 0, 0, .7);
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity var(--k-t), transform var(--k-t);
}
.k-sel-menu.on { opacity: 1; transform: translateY(0); pointer-events: auto; }
.k-sel-op {
    display: block; width: 100%; padding: 9px 11px;
    border: none; border-radius: 9px; background: transparent;
    color: #fff; font-size: 13px; font-weight: 500; text-align: left;
    cursor: pointer; transition: background var(--k-t);
}
.k-sel-op:hover { background: rgba(255, 255, 255, .12); }
.k-sel-op.on { background: var(--k-acento); }
/* la que no se puede tomar: se lee, no se ilumina y no responde */
.k-sel-op.no { opacity: .5; cursor: not-allowed; }
.k-sel-op.no:hover { background: none; }
/* las opciones entran escalonadas */
/* ── EL DESPLEGABLE CON BUSCADOR (`data-k-buscar`) ─────────────────────
   Solo lo toman los que lo piden. Es `flex` para poder mandar al frente las
   opciones que EMPIEZAN con lo tecleado, con `order`, sin reordenar el DOM. */
.k-sel-menu.con-buscar { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; }
.k-sel-buscar {
    order: -1; position: sticky; top: 0; z-index: 1;
    margin-bottom: 4px; width: 100%; height: 34px; padding: 0 10px;
    border: 0; border-bottom: 1px solid rgba(255, 255, 255, .14); border-radius: 0;
    background: rgba(20, 16, 42, .96); color: #fff; font: inherit; font-size: 12.5px; outline: none;
}
.k-sel-buscar::placeholder { color: rgba(255, 255, 255, .5); }
.k-sel-vacio { padding: 10px; color: rgba(255, 255, 255, .6); font-size: 12px; font-weight: 400; }
/* nada de entrada escalonada acá: la lista es larga y cambia con cada tecla */
.k-sel-menu.con-buscar.on .k-sel-op { animation: none; }

.k-sel-menu.on .k-sel-op { animation: kSelOp 260ms var(--k-curva) both; }
.k-sel-menu.on .k-sel-op:nth-child(1) { animation-delay: 20ms; }
.k-sel-menu.on .k-sel-op:nth-child(2) { animation-delay: 45ms; }
.k-sel-menu.on .k-sel-op:nth-child(3) { animation-delay: 70ms; }
.k-sel-menu.on .k-sel-op:nth-child(4) { animation-delay: 95ms; }
.k-sel-menu.on .k-sel-op:nth-child(n+5) { animation-delay: 115ms; }
@keyframes kSelOp { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .k-sel-menu {
        background: rgba(18, 16, 38, .84);
        backdrop-filter: blur(24px) saturate(150%);
        -webkit-backdrop-filter: blur(24px) saturate(150%);
    }
}

/* ═══ PILLS — el único lugar donde se permite un tinte suave ════════════ */
.k-pill {
    display: inline-flex; align-items: center; gap: 5px;
    height: 22px; padding: 0 10px; border-radius: 999px;
    font-size: 11px; font-weight: 600; line-height: 1;
    background: var(--k-g100); color: var(--k-g600);
    white-space: nowrap;
}
.k-pill-ok { background: var(--k-ok); color: #fff; }
.k-pill-warn { background: var(--k-warn); color: #3d2c00; }
.k-pill-err { background: var(--k-err); color: #fff; }
.k-pill-acento { background: var(--k-acento); color: #fff; }
.k-pill i { font-size: 10px; }

/* ═══ SUPERFICIES ═══════════════════════════════════════════════════════ */
.k-card {
    background: var(--k-blanco);
    border: 1px solid var(--k-linea);
    border-radius: var(--k-radio-caja);
    padding: 14px 16px;
}
.k-divider { height: 1px; background: var(--k-g100); border: none; margin: 14px 0; }

/* ═══ FILAS DENSAS — el orden se logra con tipografía, no con recuadros ══ */
.k-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--k-g100);
    transition: background var(--k-t);
}
.k-row:hover { background: var(--k-g50); }
.k-row:last-child { border-bottom: none; }

.k-item {
    display: flex; align-items: center; gap: 14px;
    padding: 11px 12px; border-radius: var(--k-radio);
    cursor: pointer;
    transition: background var(--k-t);
}
.k-item:hover { background: var(--k-g50); }
.k-item-tit { font-size: 14px; font-weight: 600; color: var(--k-tinta); }
.k-item-sub { font-size: 12px; color: var(--k-g600); margin-top: 1px; }

/* ═══ LA BANDA DE CONFIANZA ══════════════════════════════════════════════
   Pedido del dueño (21/08/26): que donde se paga «se sienta seguro» y que las
   marcas de tarjeta se vean profesionales.
   Superficie plana y blanca con hairline, como toda pantalla de trabajo: no es
   un aviso ni una alerta. Las marcas van a color porque son CONTENIDO —el
   sello de qué se acepta—; el resto es tinta sobre blanco. Sin degradados. */
.k-confianza {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    padding: 12px 16px;
    border: 1px solid var(--k-linea);
    border-radius: var(--k-radio-caja);
    background: var(--k-blanco);
}
.k-confianza-marcas { display: flex; align-items: center; gap: 8px; font-size: 26px; line-height: 1; }
.k-confianza-marcas .fa-cc-visa { color: #1a1f71; }
.k-confianza-marcas .fa-cc-mastercard { color: #eb001b; }
.k-confianza-t {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--k-f-md);
    font-weight: var(--k-peso-destaque);
    letter-spacing: -.2px;
    color: var(--k-tinta);
}
.k-confianza-t .k-ic { width: 15px; height: 15px; color: var(--k-acento); }
.k-confianza-sellos {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    margin-left: auto;
}
.k-confianza-sellos li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--k-f-xs);
    font-weight: var(--k-peso-cuerpo);
    color: var(--k-g600);
}
.k-confianza-sellos .k-ic { width: 13px; height: 13px; color: var(--k-ok-t); flex: 0 0 auto; }

/* ── PEGADA AL BORDE DE ABAJO ────────────────────────────────────────────
   `sticky` y no `fixed`: se queda a la vista mientras se paga, pero sigue
   dentro del flujo y no tapa el final de la página ni pelea con el ancho.
   ⚠ En celular el riel YA ocupa el borde inferior. Sin este respiro, la banda
     le quedaría encima y taparía la barra de navegación del cliente. */
.k-confianza-fija {
    position: sticky;
    bottom: 12px;
    z-index: 20;
    box-shadow: var(--k-sombra);
}
@media (max-width: 900px) {
    .k-confianza-fija { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
    .k-confianza { gap: 6px 12px; padding: 10px 12px; }
    .k-confianza-marcas { font-size: 22px; }
    /* ⚠ EN CELULAR LA BANDA ES CHROME PERMANENTE, y el riel ya ocupa el borde
       de abajo. Con los tres sellos en columna medía 116px: sumados a los 52
       del riel, 168 de 812 — una quinta parte de la pantalla ocupada para
       siempre. Los sellos vuelven a fila y se reparten en dos renglones. */
    .k-confianza-sellos {
        margin-left: 0;
        width: 100%;
        flex-direction: row;
        gap: 3px 12px;
        font-size: 11px;
    }
    .k-confianza-sellos li { font-size: 11px; }
}

/* ═══ TIPOGRAFÍA — la jerarquía la hacen el TAMAÑO y el PESO ════════════
   700 lo que debe resaltar · 600 lo principal · 400 el cuerpo.
   ⚠ Decía «la jerarquía la hace el peso, no el tamaño», y con todo entre 11 y
     15px y pesos de 300 a 600 no había jerarquía ninguna: un título pesaba
     600/13 y el cuerpo 400/13 — dos píxeles de diferencia que nadie ve. */
.k-titulo-pantalla {
    font-size: var(--k-f-2xl);
    font-weight: var(--k-peso-destaque);
    letter-spacing: -1.02px;
    line-height: 1.1;
    color: var(--k-tinta);
}
/* título de SECCIÓN — el escalón que faltaba entre la pantalla y el cuerpo */
.k-titulo-seccion {
    font-size: var(--k-f-xl);
    font-weight: var(--k-peso-destaque);
    letter-spacing: -.6px;
    line-height: 1.15;
    color: var(--k-tinta);
}
.k-titulo { font-size: var(--k-f-md); font-weight: var(--k-peso-fuerte); color: var(--k-tinta); margin: 18px 0 8px; }
.k-sub { font-size: var(--k-f-xs); color: var(--k-g600); }
.k-dato {
    font-size: var(--k-f-lg); font-weight: var(--k-peso-destaque); letter-spacing: -.01em;
    color: var(--k-tinta); font-variant-numeric: tabular-nums;
}

/* ═══ PESTAÑAS — pastilla suave en la activa ════════════════════════════ */
.k-tabs { display: flex; align-items: center; gap: 4px; }
.k-tab {
    border: none; background: transparent;
    height: 34px; padding: 0 15px; border-radius: 999px;
    font-size: 13.5px; font-weight: 600; color: var(--k-tinta);
    cursor: pointer; white-space: nowrap;
    transition: background var(--k-t), color var(--k-t);
}
.k-tab:hover { background: var(--k-g50); }
.k-tab.on { background: var(--k-g100); }

/* ═══ MENÚ / POPOVER — nada aparece en seco ═════════════════════════════ */
.k-menu {
    position: absolute; z-index: 60; min-width: 190px;
    background: var(--k-blanco); border: 1px solid var(--k-linea);
    border-radius: var(--k-radio); box-shadow: var(--k-sombra); padding: 5px;
    opacity: 0; transform: translateY(-4px) scale(.99); pointer-events: none;
    transition: opacity var(--k-t), transform var(--k-t);
}
.k-menu.on { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
/* el desplegable cuando no hay nada que mostrar: es el estado MÁS común de la
   campana del admin y el texto quedaba pegado al borde, sin tamaño propio */
.top-menu-vacio {
    padding: var(--k-e3);
    font-size: 12px;
    font-weight: 400;
    color: var(--k-g600);
    text-align: center;
}

.k-menu-item {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 8px 10px; border: none; border-radius: 7px;
    background: transparent; color: var(--k-tinta);
    font-size: 12.5px; font-weight: 500; text-align: left;
    cursor: pointer; transition: background var(--k-t);
}
.k-menu-item:hover { background: var(--k-g50); }
.k-menu-item i { width: 16px; text-align: center; color: var(--k-g600); }
.k-menu-sep { height: 1px; background: var(--k-g100); margin: 5px 0; }
/* cerrar sesión: al final, separado y en rojo — es la salida, no una opción más */
.k-menu-item.k-salida { color: var(--k-err-t); }
.k-menu-item.k-salida i { color: var(--k-err-t); }

/* ═══ BALDOSA — el patrón canónico de "elegir algo para trabajar" ═══════
   110×110, radio 26, blanca con hairline. El nombre va DEBAJO y el
   contador debajo de él. Al pasar el cursor la baldosa sube 5px: es el
   único sitio donde el hover mueve algo, y es su gesto propio.           */
.k-baldosas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 18px 14px;
    width: min(1100px, 100%);
    margin: 0 auto;
}
.k-baldosa {
    display: flex; flex-direction: column; align-items: center;
    background: none; border: none; padding: 0; cursor: pointer;
    color: inherit; text-align: center;
}
.k-baldosa-cara {
    position: relative;
    width: 110px; height: 110px;
    display: grid; place-items: center;
    border: 1px solid var(--k-linea); border-radius: 26px;
    background: var(--k-blanco);
    box-shadow: var(--k-sombra);
    transition: transform var(--k-t-lento), box-shadow var(--k-t-lento), border-color var(--k-t-lento);
}
.k-baldosa:hover .k-baldosa-cara,
.k-baldosa:focus-visible .k-baldosa-cara {
    transform: translateY(-5px);
    box-shadow: var(--k-sombra-alta);
    border-color: var(--k-g400);
}
.k-baldosa[aria-pressed="true"] .k-baldosa-cara { border-color: var(--k-acento); }
.k-baldosa-cara img { width: 84%; height: 84%; object-fit: contain; border-radius: 22px; }
.k-baldosa-cara i { font-size: 26px; color: var(--k-tinta); }
.k-baldosa-cara .k-ic { width: 27px; height: 27px; color: var(--k-tinta); transition: transform 220ms var(--k-curva); }
.k-baldosa-nombre {
    margin-top: 10px;
    font-size: 12.5px; font-weight: 600; color: var(--k-tinta); line-height: 1.25;
}
.k-baldosa-cuenta { margin-top: 2px; font-size: 10.5px; color: var(--k-g600); }
/* la baldosa de "agregar" lleva el MISMO filete sólido que sus hermanas;
   el punteado está prohibido en todo el sistema (18/08/26) */
.k-baldosa-nueva .k-baldosa-cara { box-shadow: none; }

/* punto de aviso sobre la baldosa — solo cuando hay algo que mirar */
.k-punto::after {
    content: ""; position: absolute; top: 10px; right: 10px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--k-acento);
    box-shadow: 0 0 0 3px var(--k-blanco);
}

/* ═══ CUANDO NO HAY NADA ════════════════════════════════════════════════
   Que lo diga igual en todas, que explique POR QUÉ y que ofrezca la salida. */
.k-vacio {
    padding: 34px 20px;
    display: grid; place-items: center; gap: 4px;
    text-align: center;
}
.k-vacio i { font-size: 20px; color: var(--k-g400); margin-bottom: 6px; }
.k-vacio h3 { font-size: 14px; font-weight: 600; color: var(--k-tinta); }
.k-vacio p { max-width: 46ch; font-size: 12.5px; font-weight: 400; color: var(--k-g600); line-height: 1.55; }
.k-vacio .k-btn { margin-top: 12px; }

/* ═══ AVISOS EN LÍNEA ═══════════════════════════════════════════════════ */
.k-aviso {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 14px; border-radius: var(--k-radio);
    font-size: 12.5px; line-height: 1.5;
    background: var(--k-g50); color: var(--k-tinta);
    border: 1px solid var(--k-linea);
}
.k-aviso:empty { display: none; }   /* un aviso con borde se ve AUNQUE esté vacío */
.k-aviso strong { font-weight: 600; }
.k-aviso i { margin-top: 1px; }
.k-aviso-ok   { background: var(--k-ok-f);   border-color: color-mix(in srgb, var(--k-ok-t) 22%, #fff);   color: var(--k-ok-t); }
.k-aviso-warn { background: var(--k-warn-f); border-color: color-mix(in srgb, var(--k-warn-t) 22%, #fff); color: var(--k-warn-t); }
.k-aviso-err  { background: var(--k-err-f);  border-color: color-mix(in srgb, var(--k-err-t) 22%, #fff);  color: var(--k-err-t); }
.k-aviso-ok strong, .k-aviso-warn strong, .k-aviso-err strong { color: inherit; }

/* ═══ AVISOS FLOTANTES — uno solo, tres tonos, abajo al centro ══════════
   El éxito se va solo. El error espera, porque hay algo que decidir.     */
.k-avisos {
    position: fixed; z-index: 200;
    left: 50%; bottom: 26px; transform: translateX(-50%);
    display: grid; gap: 8px; justify-items: center;
    pointer-events: none;
}
.k-toast {
    display: flex; align-items: center; gap: 10px;
    max-width: min(440px, calc(100vw - 32px));
    padding: 10px 14px 10px 11px;
    border-radius: 999px;
    background: var(--k-blanco); border: 1px solid var(--k-linea);
    box-shadow: var(--k-sombra-alta);
    font-size: 12.5px; font-weight: 500; color: var(--k-tinta);
    pointer-events: auto;
    animation: kToast 260ms var(--k-curva) both;
}
.k-toast.k-yendo { animation: kToastOut 200ms var(--k-curva) both; }
.k-toast-ico {
    width: 24px; height: 24px; border-radius: 50%;
    display: grid; place-items: center; flex-shrink: 0;
    font-size: 11px;
}
.k-toast-ok .k-toast-ico   { background: var(--k-ok-f);   color: var(--k-ok-t); }
.k-toast-warn .k-toast-ico { background: var(--k-warn-f); color: var(--k-warn-t); }
.k-toast-err .k-toast-ico  { background: var(--k-err-f);  color: var(--k-err-t); }
.k-toast .k-btn-sm { margin-left: 4px; }
@keyframes kToast    { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes kToastOut { from { opacity: 1; transform: translateY(0); }   to { opacity: 0; transform: translateY(6px); } }

/* ═══ BARRA DE SELECCIÓN MÚLTIPLE ══════════════════════════════════════ */
.k-barra-seleccion {
    position: fixed; z-index: 190;
    left: 50%; bottom: 24px; transform: translateX(-50%) translateY(120%);
    display: flex; align-items: center; gap: 12px;
    padding: 8px 8px 8px 16px; border-radius: 999px;
    background: var(--k-tinta); color: #fff;
    box-shadow: var(--k-sombra-alta);
    font-size: 12.5px; font-weight: 500;
    transition: transform var(--k-t-lento);
}
.k-barra-seleccion.on { transform: translateX(-50%) translateY(0); }

/* ═══ ENTRADA — nada aparece de golpe, la página se arma ════════════════
   Solo bloques grandes y pocos. Nunca en listas largas ni rejillas de
   elementos chicos: el movimiento multiplicado marea y abarata.          */
.k-entra { opacity: 0; transform: translateY(16px); }
.k-entra.k-visto {
    opacity: 1; transform: none;
    transition: opacity 520ms var(--k-curva), transform 520ms var(--k-curva);
}
/* renglón por renglón: cada línea 55ms después de la anterior */
.k-escalona > * { opacity: 0; transform: translateY(12px); }
.k-escalona.k-visto > * {
    opacity: 1; transform: none;
    transition: opacity 480ms var(--k-curva), transform 480ms var(--k-curva);
}
.k-escalona.k-visto > *:nth-child(1) { transition-delay: 0ms; }
.k-escalona.k-visto > *:nth-child(2) { transition-delay: 55ms; }
.k-escalona.k-visto > *:nth-child(3) { transition-delay: 110ms; }
.k-escalona.k-visto > *:nth-child(4) { transition-delay: 165ms; }
.k-escalona.k-visto > *:nth-child(5) { transition-delay: 220ms; }
.k-escalona.k-visto > *:nth-child(6) { transition-delay: 275ms; }
.k-escalona.k-visto > *:nth-child(n+7) { transition-delay: 330ms; }

/* si el navegador no soporta el observador, todo queda visible */
.k-sin-js .k-entra, .k-sin-js .k-escalona > * { opacity: 1; transform: none; }

.k-fade { animation: kFade .22s var(--k-curva) both; }
@keyframes kFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }


/* ═══ EL RIEL LATERAL — morado sólido flotante, ADMIN y CLIENTE ═════════
   Blanco sobre color (la fórmula del dueño, referencia SocialGo). El activo
   muerde en blanco. En móvil se vuelve la barra inferior app-like con la
   pestaña activa al ras del borde. La página que lo usa corre su contenido
   (margen izquierdo en escritorio, respiro inferior en celular).         */
.admin-rail {
    position: fixed;
    z-index: 60;
    left: 10px;
    top: 10px;
    bottom: 10px;
    width: 92px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 0 14px;
    border-radius: 24px;
    background: var(--k-acento);
    box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--k-acento) 55%, transparent);
    overflow: visible;              /* la pestaña activa se sale del riel */
}

/* ── LA VITRINA DEL RIEL ─────────────────────────────────────────────────
   El círculo ya no repite la inicial del cliente (eso vive arriba a la
   derecha con su foto): va pasando los logos de las apps que tiene. Se
   turna solo, sin botones, y lleva a sus cuentas. */
.rail-vitrina {
    position: relative;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--k-blanco);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .28);
    overflow: hidden;
    transition: transform var(--k-t), box-shadow var(--k-t);
}
.rail-vitrina:hover { transform: scale(1.06); box-shadow: 0 0 0 4px rgba(255,255,255,.42); }
.rail-vitrina:active { transform: scale(.95); }
/* La vitrina que NO navega no debe fingir que sí: sin crecer al pasar el
   cursor, sin hundirse al presionar y sin dedo. Un adorno con forma de botón
   es una mentira. */
.rail-vitrina-quieta { cursor: default; }
.rail-vitrina-quieta:hover, .rail-vitrina-quieta:active {
    transform: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .28);
}

.rail-vitrina-logo {
    position: absolute;
    width: 30px;
    height: 30px;
    object-fit: contain;
    opacity: 0;
    transform: scale(.72);
    transition: opacity 520ms var(--k-curva), transform 520ms var(--k-curva);
}
.rail-vitrina-logo.on { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
    .rail-vitrina-logo { transition: none; }
}

.rail-avatar {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: var(--k-acento);
    font-size: 19px;
    font-weight: 600;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .28);
    transition: transform var(--k-t);
}

.rail-avatar:hover { transform: translateY(-1px); }
/* la silueta que reemplazó a la inicial: al servicio del círculo, no dentro
   de una caja propia — el ícono se sostiene solo */
.rail-avatar .k-ic { width: 24px; height: 24px; color: var(--k-acento); }

.rail-raya {
    width: 46px;
    height: 1px;
    margin: 14px 0 10px;
    background: rgba(255, 255, 255, .28);
}

.rail-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    /* simétrico: sin el mordisco no hay nada que compensar y el eje sale solo */
    padding: 0 10px;
}

.rail-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: var(--k-e3) var(--k-e2);
    border: none;
    border-radius: var(--k-radio-caja);
    background: transparent;
    color: rgba(255, 255, 255, .82);
    cursor: pointer;
    transition: background var(--k-t), color var(--k-t);
}

.rail-item:hover { color: #fff; background: rgba(255, 255, 255, .12); }

/* ── EL REGALO EN EL RIEL ────────────────────────────────────────────────
   Sin nombre y sin píldora: solo el ícono con un neón que se enciende y se
   apaga por detrás. El latido para en cuanto lo abre (.visto) — un aviso que
   late para siempre deja de ser aviso y pasa a ser adorno. */
.rail-regalo {
    position: relative;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin: 10px auto 4px;
    padding: 0;
    border: none;
    border-radius: 14px;
    background: none;
    color: var(--k-blanco);
    cursor: pointer;
    transition: transform 200ms var(--k-curva);
}
.rail-regalo .k-ic { position: relative; width: 21px; height: 21px; z-index: 1; }

/* el neón vive detrás, para poder desenfocarse sin tocar al ícono */
.rail-neon {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: var(--k-blanco);
    opacity: 0;
    animation: railNeon 2.4s ease-in-out infinite;
}
@keyframes railNeon {
    0%, 100% { opacity: .06; box-shadow: 0 0 0 0 rgba(255,255,255,0); }
    50%      { opacity: .30; box-shadow: 0 0 16px 3px rgba(255,255,255,.42); }
}
.rail-regalo:hover { transform: scale(1.08); }
.rail-regalo:hover .rail-neon { opacity: .34; animation-play-state: paused; }
.rail-regalo:active { transform: scale(.94); }

/* ya lo abrió: se queda quieto y discreto, pero sigue a mano */
.rail-regalo.visto .rail-neon { animation: none; opacity: .1; }

@media (prefers-reduced-motion: reduce) {
    .rail-neon { animation: none; opacity: .18; }
}

/* la pestaña activa: BLANCA y mordiendo hacia el contenido */
/* ── EL BLOQUE BLANCO QUE VIAJA ──────────────────────────────────────────
   Es el sello de la casa: el rectángulo blanco que marca dónde estás. La
   gracia no es que aparezca en el sitio nuevo, sino que SE DESLICE hasta él.
   Por eso no vive en el ítem: es UNA sola pieza detrás de todos, que se mueve.
   (Cuando el fondo era del propio ítem no había nada que animar, y encima el
   mordisco de la versión vieja dejaba una punta recta asomando.) */
.rail-marca {
    --mordida: 18px;                /* el radio de las curvas cóncavas */
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    /* Solo el lado de adentro se redondea: el de afuera llega al borde del
       riel y se funde con la página, que es blanca. Eso es «morder». */
    /* el radio de adentro es el MISMO que el de las curvas de afuera: una sola
       medida manda la forma entera y no hay dos curvas discutiendo */
    border-radius: var(--mordida) 0 0 var(--mordida);
    background: var(--k-blanco);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    /* Solo la POSICIÓN viaja. Ancho y alto no se animan porque entre ítems no
       cambian —todos miden lo mismo— y animarlos obliga al navegador a
       recalcular la caja en cada cuadro: eso es el golpe que se sentía.
       240ms es la duración de la casa; 420 se hacía largo y se cortaba a la
       mitad cuando la página cambiaba. */
    transition: transform 240ms var(--k-curva), opacity 200ms var(--k-curva);
}

/* LAS CURVAS CÓNCAVAS, arriba y abajo de la pestaña.
   Es lo que hace que el morado parezca curvarse hacia la mordida en vez de
   cortarse en ángulo recto. Cada una es un cuadrado blanco al que se le quita
   un cuarto de círculo con una máscara: lo que queda rellena la esquina.
   ⚠ Sin esto la pestaña se lee como un rectángulo pegado, no como una mordida. */
.rail-marca::before,
.rail-marca::after {
    content: "";
    position: absolute;
    right: 0;
    width: var(--mordida);
    height: var(--mordida);
    background: var(--k-blanco);
    pointer-events: none;
}
/* ⚠ Se solapan 1px con la pestaña: aunque el redondeo del JS ya evita el
   borde fraccionario, un solape barato asegura que jamás quede la rendija
   por la que se veía el morado. */
.rail-marca::before {
    bottom: calc(100% - 1px);
    -webkit-mask: radial-gradient(circle var(--mordida) at 0 0, #0000 98%, #000 100%);
            mask: radial-gradient(circle var(--mordida) at 0 0, #0000 98%, #000 100%);
}
.rail-marca::after {
    top: calc(100% - 1px);
    -webkit-mask: radial-gradient(circle var(--mordida) at 0 100%, #0000 98%, #000 100%);
            mask: radial-gradient(circle var(--mordida) at 0 100%, #0000 98%, #000 100%);
}
/* ── EN LA BARRA INFERIOR la mordida va hacia ARRIBA ────────────────────
   El riel se vuelve horizontal: la pestaña sube y sale por el borde de
   arriba, y las curvas pasan a los costados. */
@media (max-width: 900px) {
    .rail-marca { border-radius: var(--mordida) var(--mordida) 0 0; }
    .rail-marca::before, .rail-marca::after {
        top: auto; bottom: 0; right: auto;
        width: var(--mordida); height: var(--mordida);
    }
    .rail-marca::before {
        left: calc(-1 * var(--mordida));
        -webkit-mask: radial-gradient(circle var(--mordida) at 0 0, #0000 98%, #000 100%);
                mask: radial-gradient(circle var(--mordida) at 0 0, #0000 98%, #000 100%);
    }
    .rail-marca::after {
        left: 100%;
        -webkit-mask: radial-gradient(circle var(--mordida) at 100% 0, #0000 98%, #000 100%);
                mask: radial-gradient(circle var(--mordida) at 100% 0, #0000 98%, #000 100%);
    }
}

/* si el navegador no sabe enmascarar, las curvas no se dibujan: la pestaña
   queda recta, que es lo que había antes — nunca un borrón */
@supports not ((-webkit-mask: radial-gradient(#000, #000)) or (mask: radial-gradient(#000, #000))) {
    .rail-marca::before, .rail-marca::after { display: none; }
}
.rail-marca.lista { opacity: 1; }
/* la primera colocación no se anima: aparecería viajando desde la nada */
.rail-marca.sin-viaje { transition: opacity 200ms var(--k-curva); }

.rail-item.on {
    /* ⚠ RESPALDO OBLIGATORIO: el blanco lo pinta la marca que viaja por detrás,
       que la crea el JS. Si ese guion no corre —error en otra pieza, JS
       apagado— el ítem activo quedaría con su texto en el acento sobre el
       riel del acento: contraste 1.0, invisible. Este fondo propio lo sostiene
       solo, y cuando la marca sí está, queda tapado por ella. */
    background: var(--k-blanco);
    color: var(--k-acento);
    border-radius: var(--k-radio-caja);
}
/* con la marca viva, el fondo del ítem sobra: se apaga para no doblar sombras */
.admin-rail:has(.rail-marca.lista) .rail-item.on { background: transparent; }
/* el contenido va por delante del bloque que viaja */
.rail-item > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
    .rail-marca { transition: opacity 200ms linear; }
}

.rail-ico { position: relative; display: grid; place-items: center; width: 22px; height: 22px; }
.rail-ico i { font-size: 16px; }
.rail-ico .k-ic { width: 18px; height: 18px; }

.rail-txt { font-size: 10.5px; font-weight: 600; letter-spacing: .1px; line-height: 1; }

/* el contador sobre morado: blanco con el número en el principal */
.rail-badge {
    position: absolute;
    top: -6px;
    right: -11px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #fff;
    color: var(--k-acento);
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--k-acento);
}

.rail-item.on .rail-badge { box-shadow: 0 0 0 2px var(--k-blanco); background: var(--k-acento); color: #fff; }

/* móvil: el riel es la barra de abajo */
@media (max-width: 900px) {
    .admin-rail {
        inset: auto 10px 10px 10px;
        top: auto;
        width: auto;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
        border-radius: 22px;
    }

    .rail-avatar { width: 30px; height: 30px; font-size: 12px; box-shadow: 0 0 0 2px rgba(255,255,255,.28); }
    .rail-avatar .k-ic { width: 15px; height: 15px; }
    /* la vitrina se encoge igual que el avatar al que reemplaza: a 54px se
       comía la barra frente a sus hermanos */
    .rail-vitrina { width: 34px; height: 34px; box-shadow: 0 0 0 2px rgba(255,255,255,.28); }
    .rail-vitrina-logo { width: 20px; height: 20px; }
    .rail-raya { display: none; }
    .rail-nav { flex-direction: row; flex: 1; justify-content: space-around; padding-left: 0; }
    /* en horizontal el eje lo da el propio ítem: el padding vuelve a ser simétrico */
    .rail-item { padding: var(--k-e3) var(--k-e2); }
    /* ahora que todos los ítems miden igual, el regalo se centra como ellos */
    .rail-regalo { margin: 0; align-self: center; width: 38px; height: 38px; }

    /* ⚠⚠ ACÁ ESTABA EL BAILE. Antes solo el ítem ACTIVO mostraba su nombre y
       los demás eran solo ícono: el activo medía 59px de alto y sus hermanos
       51, sus íconos caían en dos ejes (22 y 28) y —lo peor— al cambiar de
       pestaña el nombre aparecía en uno y desaparecía en otro, así que TODA
       la barra se recolocaba en cada toque. Se leía como un error, y lo era.

       En una barra de celular todos los ítems llevan su nombre siempre. Con
       la misma altura no hay nada que recolocar: lo único que cambia al
       elegir es el color de la pastilla. */
    .rail-txt { display: block; font-size: 10.5px; }
    .rail-item {
        width: auto;
        min-width: 0;
        padding: var(--k-e2) var(--k-e3);
        border-radius: var(--k-radio-caja);
    }
    .rail-item.on {
        width: auto;
        margin: 0;                 /* no se mueve: solo se pinta */
        padding: var(--k-e2) var(--k-e3);
        border-radius: var(--k-radio-caja);
        box-shadow: none;
    }

    /* ── EL REPARTO ──────────────────────────────────────────────────────
       El nav era una caja aparte que repartía SOLO sus tres ítems, mientras
       la vitrina y el regalo quedaban fuera: los huecos salían 17 · 38 · 38 ·
       27. Con `contents` los ítems pasan a ser hermanos de los otros dos y la
       barra reparte las cinco piezas con una sola regla. */
    .rail-nav { display: contents; }
    .admin-rail {
        justify-content: space-between;
        padding: 0 var(--k-e3);
        gap: var(--k-e1);
        /* ⚠ El admin tiene SIETE secciones y el cliente tres. Con siete, los
           nombres no caben en 375 y se montan unos sobre otros —medido:
           «Clientes» encima de «Catálogo», y ese encima de «Agrupar»—.
           Si no caben, la barra se desliza: así nunca se solapan por muchas
           secciones que se agreguen. */
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .admin-rail::-webkit-scrollbar { display: none; }
    /* cada pieza conserva su medida: sin encoger no hay texto aplastado */
    .rail-item, .rail-regalo, .rail-avatar, .rail-vitrina { flex: 0 0 auto; }
    /* el nombre manda el ancho del ítem, para que no se salga de su caja */
    .rail-item { padding: var(--k-e2) 6px; }
    .rail-txt { font-size: 10px; }
}

/* ═══ EL CARRITO EN EL CHROME — siempre a la vista con su cuenta ════════ */
.top-carrito { position: relative; }

.top-carrito .carrito-globo {
    position: absolute;
    top: 4px;
    right: 3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--k-acento);
    color: #fff;
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--k-blanco);
}

/* ═══ BUSCADOR GLOBAL — la casa entera busca igual ══════════════════════
   Campo con la lupa adentro + panel de resultados con identidad por fila
   (ficha de marca / silueta / ícono en el acento), entrada escalonada y
   chevrón que avisa «esto lleva a otro lugar». La página solo decide
   DÓNDE lo coloca y su modo móvil; el componente pinta todo lo demás.   */
.top-buscar-wrap { position: relative; display: inline-flex; align-items: center; }

.top-lupa { display: none; }                 /* la lupa suelta es solo del celular */

.top-buscar { position: relative; display: inline-flex; align-items: center; width: 250px; }

.top-buscar .buscar-lupa {
    position: absolute; left: 11px;
    width: 13px; height: 13px;
    color: var(--k-acento);
    pointer-events: none;
}

.top-buscar input {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 32px;
    padding: 0 12px 0 32px;
    border: 1px solid var(--k-g100); border-radius: 999px;
    background: var(--k-g50); color: var(--k-tinta);
    font-size: 12.5px;
    transition: border-color var(--k-t), background var(--k-t), box-shadow var(--k-t);
}

.top-buscar input::placeholder { color: var(--k-g400); }
.top-buscar input::-webkit-search-cancel-button { -webkit-appearance: none; }

.top-buscar input:focus {
    outline: none;
    border-color: var(--k-acento);
    background: var(--k-blanco);
    box-shadow: 0 0 0 3px var(--k-acento-aro);
}

.top-cerrar { display: none; }               /* la X solo existe en el modo búsqueda móvil */

.buscar-panel {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 70;
    width: min(430px, calc(100vw - 40px));
    max-height: min(480px, 62vh);
    overflow: auto; padding: 6px;
    background: var(--k-blanco); border: 1px solid var(--k-linea);
    border-radius: var(--k-radio); box-shadow: var(--k-sombra-alta);
    opacity: 0; transform: translateY(-4px) scale(.99); pointer-events: none;
    transition: opacity var(--k-t), transform var(--k-t);
}

.buscar-panel.on { opacity: 1; transform: none; pointer-events: auto; }

/* el título de grupo es un kicker en el principal */
.buscar-grupo {
    padding: 9px 10px 4px;
    font-size: 11px; font-weight: 500; letter-spacing: .02em;
    color: var(--k-acento);
}

.buscar-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 9px;
    color: inherit; text-decoration: none;
    transition: background var(--k-t);
}

.buscar-item:hover, .buscar-item.on { background: var(--k-g50); }

/* identidad por fila: mini-ficha de SU marca, silueta, o ícono propio */
.buscar-ficha {
    flex: 0 0 auto; width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 8px; overflow: hidden;
    background: var(--marca, var(--k-acento));
}

.buscar-ficha img {
    width: 17px; height: 17px; object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
    transition: transform 200ms var(--k-curva);
}

.buscar-ficha .k-ic { width: 13px; height: 13px; color: #fff; transition: transform 200ms var(--k-curva); }

.buscar-av {
    flex: 0 0 auto; width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 50%; background: var(--k-g100);
}

.buscar-av .k-ic { width: 13px; height: 13px; color: var(--k-g600); transition: transform 200ms var(--k-curva); }

.buscar-ic { width: 16px; height: 16px; color: var(--k-acento); flex: 0 0 auto; transition: transform 200ms var(--k-curva); }

/* el hover crece, como todo ícono de la casa */
.buscar-item:hover .buscar-ficha img,
.buscar-item:hover .buscar-ficha .k-ic,
.buscar-item:hover .buscar-av .k-ic,
.buscar-item:hover .buscar-ic { transform: scale(1.14); }

.buscar-texto { min-width: 0; flex: 1; }

.buscar-texto b {
    display: block;
    font-size: 12.5px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.buscar-texto small {
    display: block; margin-top: 1px;
    font-size: 11.5px; font-weight: 400; color: var(--k-g600);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* el chevrón dice «esto lleva a otro lugar» y avanza con el cursor */
.buscar-chev {
    flex: 0 0 auto; width: 11px; height: 11px;
    color: var(--k-g400);
    transition: transform 200ms var(--k-curva), color 200ms var(--k-curva);
}

.buscar-item:hover .buscar-chev { transform: translateX(2px); color: var(--k-g600); }

/* cada fila ENTRA escalonada — nada aparece de golpe */
@keyframes bscEntra {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.buscar-panel > * { animation: bscEntra 240ms var(--k-curva) both; }
.buscar-panel > :nth-child(2) { animation-delay: 30ms; }
.buscar-panel > :nth-child(3) { animation-delay: 60ms; }
.buscar-panel > :nth-child(4) { animation-delay: 90ms; }
.buscar-panel > :nth-child(5) { animation-delay: 120ms; }
.buscar-panel > :nth-child(6) { animation-delay: 150ms; }
.buscar-panel > :nth-child(7) { animation-delay: 180ms; }
.buscar-panel > :nth-child(n+8) { animation-delay: 210ms; }

.buscar-vacio {
    padding: 20px 12px;
    display: grid; justify-items: center; gap: 5px;
    text-align: center;
}

.buscar-vacio .k-ic { width: 18px; height: 18px; color: var(--k-g400); }
.buscar-vacio b { font-size: 12.5px; font-weight: 600; color: var(--k-tinta); }
.buscar-vacio span { font-size: 11px; font-weight: 400; color: var(--k-g600); }

/* ═══ MÓVIL — acá sí, controles a lo ancho ══════════════════════════════ */
@media (max-width: 640px) {
    .k-btn-movil-full { width: 100%; }
    .k-baldosas { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px 10px; }
    .k-baldosa-cara { width: 92px; height: 92px; border-radius: 22px; }
    .k-baldosa-cara img { width: 56px; height: 56px; border-radius: 18px; }
    /* objetivos táctiles ≥44px */
    .k-btn-ico { width: 44px; height: 44px; }
}

/* ═══ REDUCED MOTION — quien pidió menos movimiento no ve movimiento ════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .k-entra, .k-escalona > * { opacity: 1 !important; transform: none !important; }
    .k-btn-ico:hover i, .k-btn-ico:hover svg,
    .k-baldosa:hover .k-baldosa-cara :is(i, svg) { transform: none !important; animation: none !important; }
}


/* ── El selector de idioma: MUNDO + idioma destino ──────────────────────
   Nunca banderas: una bandera nombra un país y deja fuera a los demás que
   hablan el mismo idioma.                                               */
.lang-toggle { display: inline-flex; align-items: center; gap: 6px; }
.lang-toggle .k-ic { width: 14px; height: 14px; }

/* ═══ LA MARCA: StreamingGO ═════════════════════════════════════════════
   Va de corrido, en una sola palabra, con el GO en el color de la casa.
   El GO ENTRA desde la izquierda al cargar (una vez, no en bucle) y al
   pasar el puntero avanza un paso: la marca dice «go» y se comporta como
   tal. Con prefers-reduced-motion se queda quieto (lo apaga el kit).    */
.k-marca {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.2px;
    line-height: 1;
    color: inherit;
    white-space: nowrap;
}

.k-marca b {
    font-weight: 600;
    color: var(--k-acento);
    animation: marcaGo 620ms var(--k-curva) both;
    transition: transform var(--k-t), color var(--k-t);
}

/* sobre foto o fondo oscuro el acento no se lee: el GO va en lavanda */
.k-marca-claro b { color: #cdbcff; }

.k-marca:hover b { transform: translateX(2px); }

@keyframes marcaGo {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: none; }
}

/* tamaños: el chrome lo usa mediano; el login y la portada, grande */
.k-marca-lg { font-size: 22px; letter-spacing: -.6px; }

/* ── EL ISOTIPO ────────────────────────────────────────────────────────────
   El PNG de marca traía el fondo blanco HORNEADO (sin canal alpha), así que
   sobre cualquier barra aparecía un cuadro blanco. Se recortó y se convirtió
   en MÁSCARA: la silueta manda y el color lo pone el CSS con currentColor —
   blanco sobre el vidrio del héroe, acento sobre el chrome claro. Un solo
   archivo para los dos mundos, y nunca más azul suelto en un sistema morado. */
.k-isotipo {
    display: inline-block;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: var(--k-isotipo-src) center / contain no-repeat;
    mask: var(--k-isotipo-src) center / contain no-repeat;
    transition: background-color var(--k-t);
}

.k-isotipo-lg { width: 42px; height: 42px; }

/* ── TÍTULOS VIVOS ─────────────────────────────────────────────────────────
   El titular no es un bloque negro: su primera parte lleva el color de la
   casa y la segunda la tinta. Mismo peso — el contraste lo hace el color,
   no un peso mayor (el estándar no pasa de 600).                          */
.t-vivo {
    color: var(--k-acento);
    font-weight: inherit;
}

/* sobre superficie oscura el acento no se lee: lavanda */
.pr-armador .t-vivo,
.pr-pie .t-vivo,
.pr-arma .t-vivo,
.tienda-cliente .t-vivo { color: #cdbcff; }

/* la marca en tamaño de firma, para rematar un pie */
.k-marca-xl { font-size: clamp(28px, 4.6vw, 46px); letter-spacing: -1.4px; }

/* ═══ EL BOTÓN DE ACCIÓN — regla de la casa para TODO el sistema ══════════
   Orden del dueño: «el ícono, cuando se pasa el mouse, desliza suave el
   nombre a la derecha; esa regla es para todos los iconos». En reposo se ve
   solo el ícono; al apuntarlo o enfocarlo con Tab, el nombre se despliega
   ensanchando la columna (auto 0fr → auto 1fr: la única forma de llegar
   exactamente al ancho del texto sin adivinar píxeles). En pantalla táctil
   no hay puntero, así que el nombre va siempre visible.
   NUNCA botones-franja de ancho completo con el texto fijo.              */
/* ═══ EL BOTÓN DE ACCIÓN (estándar 18/08): reposo = ÍCONO; el nombre se
   DESGLOSA al cursor; en táctil va siempre a la vista; al presionar, el
   ícono se mueve. El hover no invierte colores: solo profundiza.        ═══ */
/* ⚠ hijo de un grid = se estira a toda la columna (medido: 560px en el
   perfil). El botón oficial mide lo que mide su contenido, siempre. */
.pr-accion { justify-self: start; align-self: start; width: fit-content; }

.pr-accion {
    display: inline-grid;
    grid-auto-flow: column;
    align-items: center;
    grid-template-columns: auto 0fr;
    gap: 0;
    height: 46px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: grid-template-columns 200ms var(--k-curva), gap 200ms var(--k-curva),
                background 180ms var(--k-curva), border-color 180ms var(--k-curva),
                filter 180ms var(--k-curva), transform var(--k-t);
}

.pr-accion .k-ic { width: 18px; height: 18px; transition: transform 220ms var(--k-curva); }

.pr-accion .nombre {
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    font-size: 13px;
    font-weight: 600;
    transition: opacity 160ms var(--k-curva);
}

.pr-accion:hover, .pr-accion:focus-visible { grid-template-columns: auto 1fr; gap: 9px; }
.pr-accion:hover .nombre, .pr-accion:focus-visible .nombre { opacity: 1; }
.pr-accion:active { transform: translateY(1px); }
.pr-accion:active .k-ic { transform: scale(1.22); }

/* trabajando · el nombre queda a la vista y el ícono se asienta, que es lo
   que hace guardar. Un modo sin dibujo es un botón que se queda quieto. */
.pr-accion.hace { grid-template-columns: auto 1fr; gap: 9px; pointer-events: none; }
.pr-accion.hace .nombre { opacity: 1; }
.pr-accion.hace .k-ic { animation: prGuarda 900ms var(--k-curva) infinite; }
@keyframes prGuarda {
    0%   { transform: translateY(-3px); opacity: .55; }
    55%  { transform: translateY(2px);  opacity: 1; }
    100% { transform: translateY(-3px); opacity: .55; }
}
.pr-accion.listo { grid-template-columns: auto 1fr; gap: 9px; }
.pr-accion.listo .nombre { opacity: 1; }

.pr-accion-primaria { background: var(--k-acento); color: #fff; }
.pr-accion-primaria:hover { filter: brightness(1.08); }

.pr-accion-vidrio {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .32);
    color: #fff;
}

.pr-accion-vidrio:hover { background: rgba(255, 255, 255, .20); border-color: rgba(255, 255, 255, .5); }

/* en pantalla táctil no hay cursor: el nombre va SIEMPRE a la vista */
@media (hover: none) {
    .pr-accion { grid-template-columns: auto auto; gap: 9px; }
    .pr-accion .nombre { opacity: 1; }
}

/* el aviso urgente de la campana: el ícono lo dice, no se pinta la fila */
.k-menu-item.k-menu-urgente i { color: var(--k-err); }
.k-menu-item.k-menu-urgente { font-weight: 600; }

/* ═══ EL LOGO QUE ES LA BALDOSA ════════════════════════════════════════
   Un logo que trae SU PROPIO FONDO (el rectángulo rojo de Netflix con la
   palabra dentro) no es un dibujo sobre la caja: ES la caja. Llena el cuadro
   entero y las esquinas redondeadas lo recortan, como el ícono de una app.
   Los que son un glifo suelto conservan su margen y dejan ver el color del
   cuadro alrededor.
   El normalizador (data/logo.php) marca cuál es cuál en el NOMBRE del
   archivo — así viaja solo a todas las pantallas, sin tocar ninguna. */
.product-icon img[src*="-lleno"],
.agr-cara img[src*="-lleno"],
.portada-app img[src*="-lleno"],
.arm-app-ficha img[src*="-lleno"],
.plan-t-cara img[src*="-lleno"],
.k-baldosa-cara img[src*="-lleno"] {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    filter: none;                 /* la sombra sobraba: el logo toca el borde */
    /* ⚠ Un logo de fondo BLANCO deja el cuadro blanco puro, y sobre papel
       blanco el cuadro desaparece — medido: rgb(255,255,255). Este filete
       hacia adentro dibuja el borde cuando hace falta y es invisible sobre
       cualquier color oscuro, así que sirve para todos sin excepción. */
    box-shadow: inset 0 0 0 1px rgba(17, 18, 20, .12);
}
/* ⚠ La cara de la tienda NO es cuadrada (178×104) y su alto sale de la
   proporción, no de una altura escrita. Con un alto así, `height:100%` cae a
   `auto` y la imagen toma SU proporción: un logo cuadrado se desbordaba 74px
   por debajo de la tarjeta. Medido, no supuesto. Anclarla a las cuatro
   esquinas la ata a la caja venga de donde venga el alto. */
.plan-t-cara { overflow: hidden; }
.plan-t-cara img[src*="-lleno"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* `contain`, no `cover`: la caja es más ancha que alta y recortar le comía
       la cabeza y los pies al logo. Así queda entero, y las franjas a los lados
       son del color de la marca —el mismo del logo—, así que no se ven. */
    object-fit: contain;
}