/* ═══════════════════════════════════════════════════════════════
   KOMO UI — primitivas compartidas
   ---------------------------------------------------------------
   Los tokens y las primitivas visuales de la landing (index.html),
   extraídos para que el resto del proyecto los consuma en vez de
   redefinir su propio glass/orbs/focus en cada archivo.

   Depende de Tailwind para el layout; esto aporta marca y superficies.
   Cargar DESPUÉS de tailwind.min.css.
   ═══════════════════════════════════════════════════════════════ */

:root {
    --ink: #060912;
    --ink-2: #0b1120;
    --ink-3: #111827;
    --plate: #202731;

    /* Rampa canónica de marca, muestreada del logo. Es la misma que declara
       `tailwind.theme.js` — si cambia una, cambia la otra; el sprint 105 ya
       había sacado el indigo→violet de la landing y esta hoja era el último
       lugar donde seguía vivo.
       La rampa neón sirve como fondo o como texto sobre superficie oscura.
       Las `deep` son los mismos dos hues con la luminosidad bajada, para lo
       que necesita pasar AA sobre claro. */
    --komo-cyan: #0af8e6;
    --komo-mint: #2ff0c0;
    --komo-green: #05f58a;
    --komo-deep: #0a6b63;          /* 6.37:1 sobre blanco */
    --komo-deep-green: #036b42;    /* 6.59:1 sobre blanco */
    --komo-ink: #0a0e13;

    --jade: #10b981;
    --line: rgba(255, 255, 255, 0.08);

    /* Acento de los controles. Las pantallas white-label (perfil público,
       reserva) lo reapuntan al color del negocio del cliente:
           :root { --accent: var(--brand-color); }
       Todo lo demás hereda el cyan de KOMO. Va la variante `deep` y no la
       neón porque `--accent` se usa como fondo de botón con texto blanco y
       como borde de foco sobre claro: la neón da 1.35:1 contra blanco. */
    --accent: var(--komo-deep);
    --accent-soft: var(--komo-cyan);
}

/* ── Base ─────────────────────────────────────────── */
/* .komo-ui = superficie oscura (landing, acceso, dashboard).
   .komo-ui-light = superficie clara, para lo que ve el cliente final:
   se abre desde un link de WhatsApp, muchas veces con sol de frente. */
.komo-ui,
.komo-ui-light {
    font-family: 'Montserrat', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.komo-ui {
    background-color: var(--ink);
    color: #fff;
    --field-bg: rgba(255, 255, 255, 0.04);
    --field-bg-hover: rgba(255, 255, 255, 0.06);
    --field-border: var(--line);
    --field-text: #fff;
    --field-placeholder: rgba(255, 255, 255, 0.28);
    --label-text: rgba(255, 255, 255, 0.45);
}

.komo-ui-light {
    background-color: #f6f7fb;
    color: #1e293b;
    --field-bg: #f8fafc;
    --field-bg-hover: #fff;
    --field-border: #e2e8f0;
    --field-text: #1e293b;
    --field-placeholder: #94a3b8;
    --label-text: #94a3b8;
}

/* Montserrat de cuerpo, Outfit de titulares. La regla vive acá y no en
   main.css porque la móvil y el helpcenter no cargan ese archivo, y sus
   titulares quedaban en Montserrat. */
.komo-ui h1, .komo-ui h2, .komo-ui h3, .komo-ui h4, .komo-ui h5, .komo-ui h6,
.komo-ui-light h1, .komo-ui-light h2, .komo-ui-light h3,
.komo-ui-light h4, .komo-ui-light h5, .komo-ui-light h6,
.font-display { font-family: 'Outfit', system-ui, sans-serif; }

.komo-ui ::-webkit-scrollbar { width: 7px; }
.komo-ui ::-webkit-scrollbar-track { background: #04060d; }
.komo-ui ::-webkit-scrollbar-thumb { background: #262a3d; border-radius: 10px; }
.komo-ui ::-webkit-scrollbar-thumb:hover { background: var(--komo-deep); }

.komo-ui :focus-visible {
    outline: 2px solid var(--komo-cyan);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ── Superficies ──────────────────────────────────── */
.glass {
    background: rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--line);
}

.glass-nav {
    background: rgba(6, 9, 18, 0.72);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border-bottom: 1px solid var(--line);
}

/* Borde con degradado que aparece al hover (mask + composite) */
.edge-glow {
    position: relative;
    background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
    border: 1px solid var(--line);
}
.edge-glow::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg, rgba(10, 248, 230, .40), rgba(5, 245, 138, .16) 40%, transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .45s ease;
    pointer-events: none;
}
.edge-glow:hover::before { opacity: 1; }

/* ── Tipografía de marca ──────────────────────────── */
/* Sólido, no degradado: el texto con `background-clip: text` es decorativo y
   no significa nada: lo mismo que la rampa indigo→violet, es una firma de UI
   generada. El énfasis lo da el color de marca, no el degradado.
   La landing redefine esta clase con su propia rampa (index.html) — ahí el
   degradado se resuelve en el split A1. */
.grad-text { color: var(--komo-cyan); }
.komo-ui-light .grad-text { color: var(--komo-deep); }

.eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--komo-cyan);
}
.komo-ui-light .eyebrow { color: var(--komo-deep); }

/* Acento de texto. Existe como primitiva y no como utilidad de Tailwind
   porque el bundle es preconstruido por content-scan: una clase que no esté
   ya en el CSS generado no existe, y estas pantallas necesitan el acento sin
   depender de un rebuild. */
.k-accent { color: var(--komo-cyan); }
.komo-ui-light .k-accent { color: var(--komo-deep); }

/* Enlace apagado que se enciende en el acento al hover. */
.k-link { transition: color .2s ease; }
.k-link:hover { color: var(--komo-cyan); }
.komo-ui-light .k-link:hover { color: var(--komo-deep); }

/* ── Fondos ───────────────────────────────────────── */
.bg-grid {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 35%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 35%, transparent 78%);
}

.aurora {
    position: absolute;
    border-radius: 999px;
    filter: blur(90px);
    pointer-events: none;
    will-change: transform;
}
/* Las dos tintas del fondo. Antes venían de `bg-indigo-600/25` y
   `bg-purple-600/20` puestos en el HTML: el violeta difuso de fondo es, junto
   con el degradado indigo→violet, lo que hacía que estas pantallas se leyeran
   como plantilla genérica. */
.aurora-cyan { background: rgba(10, 248, 230, .16); }
.aurora-green { background: rgba(5, 245, 138, .11); }

/* Chip cuadrado que enmarca un ícono (el candado del modal de recuperar). */
.k-chip-accent {
    background: rgba(10, 248, 230, .10);
    border-color: rgba(10, 248, 230, .22);
}

/* Segmentado de dos opciones (móvil / escritorio en el login técnico).
   El estado activo va con la rampa de marca y tinta oscura, igual que el
   botón primario: el `peer-checked:` de Tailwind no sirve acá porque esas
   variantes no están en el bundle preconstruido. */
.k-seg-opt { transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
input:checked + .k-seg-opt {
    background: linear-gradient(to top right, var(--komo-cyan), var(--komo-green));
    color: var(--komo-ink);
    box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .6);
}

/* Contenedor del fondo. Las auroras se posicionan fuera del viewport a
   propósito, y `overflow-hidden` en <body> no alcanza: el que crece es <html>.
   Recortarlas aquí evita la barra de scroll horizontal. */
.k-backdrop {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.noise::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .028;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Formularios ──────────────────────────────────── */
/* 11px es el piso para texto funcional; a 10px estos labels quedaban por
   debajo en los 10 tamanos del barrido responsive. El tracking de 0.16em ya los
   hace anchos, asi que 1px mas no cambia el layout. */
.k-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--label-text, rgba(255, 255, 255, 0.45));
    margin-bottom: 8px;
}

.k-input {
    width: 100%;
    background: var(--field-bg, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--field-border, var(--line));
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--field-text, #fff);
    outline: none;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.k-input::placeholder { color: var(--field-placeholder, rgba(255, 255, 255, 0.28)); font-weight: 500; }
.k-input:hover { background: var(--field-bg-hover, rgba(255, 255, 255, 0.06)); }
.k-input:focus {
    border-color: var(--accent);
    background: var(--field-bg-hover, rgba(255, 255, 255, 0.06));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
.k-input:disabled { opacity: .5; cursor: not-allowed; }
/* Reserva de espacio para adornos. Van aquí y no con utilidades de Tailwind
   porque .k-input define el padding en shorthand y esta hoja carga después,
   así que las utilidades de padding de Tailwind quedarían pisadas. */
.k-input.has-icon { padding-left: 46px; }
.k-input.has-action { padding-right: 46px; }

.k-field { position: relative; }
.k-field .k-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--field-placeholder, rgba(255, 255, 255, 0.3));
    pointer-events: none;
    transition: color .25s ease;
}
.k-field:focus-within .k-icon { color: var(--accent); }

/* Barra translúcida sobre superficie clara (navs y footers fijos) */
.glass-light {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
}

/* Tarjeta sobre superficie clara */
.k-card {
    background: #fff;
    border: 1px solid #e9edf5;
    border-radius: 24px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -12px rgba(15, 23, 42, .12);
}

/* ── Botones ──────────────────────────────────────── */
.k-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 15px 24px;
    border-radius: 14px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform .2s ease, box-shadow .25s ease, background .25s ease, opacity .2s ease;
}
.k-btn:active { transform: scale(.985); }
.k-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* Esta hoja carga después del bundle de Tailwind: toda clase de acá que
   declare `display` le gana al `.hidden` del bundle, así que necesita su
   guard (misma doctrina que komo-modal.css). */
.k-label.hidden,
.k-btn.hidden { display: none; }

/* Texto oscuro y no blanco: sobre la rampa neón el blanco da 1.35:1, la tinta
   da ~14:1. La sombra es neutra a propósito — el halo de color con offset cero
   es el "cool" por defecto de la UI generada; acá la elevación la da la
   sombra, y el color lo da el botón. */
.k-btn-primary {
    background: linear-gradient(to top right, var(--komo-cyan), var(--komo-green));
    color: var(--komo-ink);
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .55);
}
.k-btn-primary:hover:not(:disabled) {
    box-shadow: 0 14px 36px -12px rgba(0, 0, 0, .65);
    transform: translateY(-1px);
}

/* Botón que toma el color del negocio (white-label). Plano a propósito: el
   degradado de KOMO competiría con la marca del cliente. */
.k-btn-brand {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--accent) 65%, transparent);
}
.k-btn-brand:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.06);
}

/* Estado de éxito del propio botón (tras guardar, activar, etc.) */
.k-btn-ok, .k-btn-primary.k-btn-ok {
    background: linear-gradient(to top right, #059669, var(--jade));
    color: #fff;
    box-shadow: 0 10px 30px -10px rgba(16, 185, 129, .5);
}

.k-btn-ghost {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--line);
    color: #fff;
}
.k-btn-ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); }

/* ── Avisos ───────────────────────────────────────── */
.k-alert {
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    border: 1px solid;
}
.k-alert-error { background: rgba(244, 63, 94, .1); border-color: rgba(244, 63, 94, .28); color: #fda4af; }
.k-alert-ok { background: rgba(16, 185, 129, .1); border-color: rgba(16, 185, 129, .28); color: #6ee7b7; }
/* Neutro y no de marca: el cyan lo dejaría a un hue del `k-alert-ok`, y un
   aviso informativo no tiene por qué gritar en el color del acento. */
.k-alert-info { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #cbd5e1; }

/* ── Movimiento ───────────────────────────────────── */
@keyframes k-fade-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes k-drift-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, 40px) scale(1.12); } }
@keyframes k-drift-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-70px, -30px) scale(1.08); } }
@keyframes k-blip { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.7); } }
@keyframes k-spin { to { transform: rotate(360deg); } }

/* Los controllers inyectan `animate-spin` por innerHTML; Tailwind no lo ve al
   escanear el HTML, así que se define aquí para que el spinner gire igual. */
.animate-spin { animation: k-spin 1s linear infinite; }

.a-fade { animation: k-fade-up .9s cubic-bezier(.16, 1, .3, 1) both; }
.a-drift-a { animation: k-drift-a 18s ease-in-out infinite; }
.a-drift-b { animation: k-drift-b 22s ease-in-out infinite; }
.a-blip { animation: k-blip 1.5s ease-in-out infinite; }
.a-spin { animation: k-spin .8s linear infinite; }

@media (prefers-reduced-motion: reduce) {
    .a-fade, .a-drift-a, .a-drift-b, .a-blip, .a-spin { animation: none !important; }
}