/* =====================================================================
   Portal Ferrox · auth.css — Login, recuperar y restablecer contraseña
   ---------------------------------------------------------------------
   Idea visual: "hierro al rojo". Grises acero fríos y calmados para la
   zona de trabajo (cansan menos la vista) y un solo elemento expresivo:
   el panel de marca carmesí con un degradado de malla (mesh) que recuerda
   metal caliente. Todo lo demás es sobrio.
   Tokens en :root; el modo oscuro solo redefine los tokens.
   ===================================================================== */

@font-face {
    font-family: "Inter";
    src: url("fonts/inter-latin.woff2") format("woff2");
    font-weight: 100 900; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter";
    src: url("fonts/inter-latin-ext.woff2") format("woff2");
    font-weight: 100 900; font-style: normal; font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
    --font: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;

    --brand:        #A3202F;   /* carmesí Ferrox: botón principal, enlaces, foco */
    --brand-hover:  #8C1A28;
    --brand-oxide:  #5E1222;   /* sombra profunda del panel */
    --brand-ember:  #E06A3A;   /* brasa: luz cálida del mesh */
    --ring:         rgba(163, 32, 47, .20);

    --bg:           #EEF0F3;   /* acero claro */
    --surface:      #FFFFFF;
    --surface-2:    #F6F7F9;
    --ink:          #1E2430;   /* texto principal: gris tinta, no negro puro */
    --ink-2:        #4B5563;
    --muted:        #6B7280;
    --border:       #D9DDE3;
    --border-strong:#C3C9D2;
    --input-bg:     #FBFBFC;

    --ok:     #15803D;  --ok-bg:   #ECFDF3;
    --error:  #B42318;  --error-bg:#FEF3F2;
    --info:   #1D4ED8;  --info-bg: #EFF4FF;

    --radius-card: 20px;
    --radius-xl:   12px;        /* "rounded-xl" de inputs y botones */
    --shadow-card: 0 1px 2px rgba(16, 24, 40, .05), 0 12px 32px -12px rgba(16, 24, 40, .14);
    --ease: cubic-bezier(.2, .7, .2, 1);
}

:root[data-theme="dark"] {
    --brand:        #E0495A;
    --brand-hover:  #EC6070;
    --ring:         rgba(224, 73, 90, .28);
    --bg:           #12161D;
    --surface:      #1A1F28;
    --surface-2:    #20262F;
    --ink:          #E6E9EE;
    --ink-2:        #B6BDC8;
    --muted:        #8A93A1;
    --border:       #2C333E;
    --border-strong:#3A4250;
    --input-bg:     #151A22;
    --ok:     #4ADE80;  --ok-bg:   rgba(74, 222, 128, .10);
    --error:  #F97066;  --error-bg:rgba(249, 112, 102, .10);
    --info:   #84ADFF;  --info-bg: rgba(132, 173, 255, .10);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px -16px rgba(0, 0, 0, .6);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.5;
    color: var(--ink); background: var(--bg);
    -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01";
}
a { color: var(--brand); }
.i { width: 18px; height: 18px; flex: none; }

/* ---------- Layout dividido ----------
   Móvil y tablet (< 1024 px): una columna, solo el formulario.
   lg (≥ 1024 px): panel de marca a la izquierda + formulario a la derecha. */
body.auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); }

.brand-panel { display: none; }

@media (min-width: 1024px) {
    body.auth { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
    .brand-panel {
        display: block; position: sticky; top: 0; height: 100vh; height: 100dvh;
        padding: 14px;                       /* el panel "flota" dentro del lienzo */
    }
}

/* ---------- Panel de marca con mesh gradient ----------
   Color sólido de base + 5 degradados radiales superpuestos y desenfocados.
   Un movimiento lento (40 s) que se desactiva con prefers-reduced-motion. */
.brand-panel > .mesh,
.brand-panel > .brand-inner { border-radius: 24px; }

.brand-panel { isolation: isolate; }
.brand-panel > .mesh {
    position: absolute; inset: 14px; overflow: hidden; z-index: -1;
    background-color: var(--brand-oxide);
}
.brand-panel > .mesh::before {
    content: ""; position: absolute; inset: -20%;
    background:
        radial-gradient(38% 42% at 18% 22%, #D2453F 0%, transparent 70%),
        radial-gradient(34% 40% at 86% 12%, #7A1638 0%, transparent 70%),
        radial-gradient(42% 46% at 80% 78%, var(--brand-ember) 0%, transparent 68%),
        radial-gradient(40% 44% at 14% 86%, #3D0C1E 0%, transparent 70%),
        radial-gradient(55% 55% at 50% 50%, #A3202F 0%, transparent 75%);
    filter: blur(28px) saturate(115%);
    animation: deriva 40s var(--ease) infinite alternate;
}
/* Grano fino para que el degradado no se vea "plástico" */
.brand-panel > .mesh::after {
    content: ""; position: absolute; inset: 0; opacity: .14; mix-blend-mode: overlay;
    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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes deriva {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    50%  { transform: translate3d(-4%, 3%, 0) rotate(8deg) scale(1.06); }
    100% { transform: translate3d(3%, -2%, 0) rotate(-6deg) scale(1.02); }
}

.brand-inner {
    position: relative; height: 100%; color: #fff;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: clamp(28px, 4vw, 56px);
}
.brand-top { display: flex; align-items: center; gap: 12px; }
.brand-mark {
    width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(6px);
}
.brand-mark svg { width: 30px; height: 30px; fill: #fff; }
.brand-name { font-weight: 650; letter-spacing: -.01em; font-size: 16px; }

.brand-copy { max-width: 30rem; }
.brand-eyebrow { margin: 0 0 18px; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .72); }
.brand-headline {
    margin: 0; font-size: clamp(2.5rem, 3.6vw, 3.6rem); line-height: 1.02;
    font-weight: 760; letter-spacing: -.035em; text-wrap: balance;
}
.brand-sub { margin: 20px 0 0; font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, .82); max-width: 26rem; }

.testimonial {
    margin: 0; max-width: 30rem; padding: 22px 24px; border-radius: 18px;
    background: rgba(20, 6, 10, .22); border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(10px);
}
.testimonial blockquote { margin: 0; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, .92); }
.testimonial figcaption { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.testimonial figcaption strong { display: block; font-size: 14px; font-weight: 600; }
.testimonial figcaption small { display: block; font-size: 13px; color: rgba(255, 255, 255, .66); }
.t-avatar {
    width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
    background: #fff; color: var(--brand-oxide); font-size: 13px; font-weight: 700;
}

/* ---------- Zona del formulario ---------- */
.form-side {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 56px 20px 28px; min-height: 100vh; min-height: 100dvh;
}
.card-wrap { width: 100%; max-width: 368px; }
.form-foot { margin: 28px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }

.card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
    box-shadow: var(--shadow-card); padding: 32px 28px 28px;
}
.card-logo { display: block; width: 44px; height: 44px; margin-bottom: 20px; }
.card-title { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.card-sub { margin: 8px 0 24px; color: var(--ink-2); font-size: 14.5px; }
.card-note { margin: 20px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }

/* ---------- Campos (rounded-xl, borde sutil, anillo de foco dinámico) ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 550; color: var(--ink); }

.input-wrap { position: relative; }
.input-wrap > .i {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--muted); pointer-events: none; transition: color .18s var(--ease);
}
.input {
    width: 100%; height: 46px; padding: 0 14px 0 42px;
    font: inherit; font-size: 15px; color: var(--ink);
    background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius-xl);
    outline: none; appearance: none;
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
.input::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
.input:hover { border-color: var(--border-strong); }
.input:focus {
    background: var(--surface); border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--ring);
}
.input-wrap:focus-within > .i { color: var(--brand); }
.input-wrap:has(.peek) .input { padding-right: 46px; }

/* Estado inválido: el anillo cambia a rojo */
.input.is-invalid, .input.is-invalid:focus { border-color: var(--error); box-shadow: 0 0 0 4px color-mix(in srgb, var(--error) 18%, transparent); }
.field-error { min-height: 0; margin: 6px 2px 0; font-size: 12.5px; color: var(--error); }
.field-error:empty { display: none; }

/* Mostrar / ocultar contraseña */
.peek {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 9px;
    background: transparent; color: var(--muted); cursor: pointer;
    transition: background-color .15s, color .15s;
}
.peek:hover { background: var(--surface-2); color: var(--ink); }
.peek:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.peek .ojo-off, .peek[aria-pressed="true"] .ojo { display: none; }
.peek[aria-pressed="true"] .ojo-off { display: block; }

/* Medidor de fortaleza */
.fuerza { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.fuerza span { height: 4px; border-radius: 4px; background: var(--border); transition: background-color .25s; }
.fuerza[data-nivel="1"] span:nth-child(-n+1) { background: var(--error); }
.fuerza[data-nivel="2"] span:nth-child(-n+2) { background: #F79009; }
.fuerza[data-nivel="3"] span:nth-child(-n+3) { background: #84CC16; }
.fuerza[data-nivel="4"] span { background: var(--ok); }

/* ---------- Recordarme + ¿Olvidaste…? (misma fila) ---------- */
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 22px; flex-wrap: wrap; }
.check { position: relative; display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-2); cursor: pointer; user-select: none; }
.check input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; cursor: pointer; }
.check-box {
    width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--border-strong); background: var(--input-bg);
    display: grid; place-items: center; transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.check-box::after {
    content: ""; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0;
    transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform .15s var(--ease);
}
.check input:checked + .check-box { background: var(--brand); border-color: var(--brand); }
.check input:checked + .check-box::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.check input:focus-visible + .check-box { box-shadow: 0 0 0 4px var(--ring); border-color: var(--brand); }

.link { font-size: 14px; font-weight: 550; text-decoration: none; border-radius: 4px; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- Botones ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 46px; padding: 0 18px; border-radius: var(--radius-xl);
    font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
    border: 1px solid transparent; -webkit-appearance: none; appearance: none;
    transition: background-color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), transform .12s var(--ease), color .18s;
}
.btn-block { width: 100%; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .12), inset 0 1px 0 rgba(255, 255, 255, .14); }
.btn-primary:hover { background: var(--brand-hover); }
.btn-primary:focus-visible { box-shadow: 0 0 0 4px var(--ring), inset 0 1px 0 rgba(255, 255, 255, .14); }

/* Estado "cargando": el botón es un <input type=submit>, así que el giro va como imagen de fondo (SVG animado) */
.btn.is-loading {
    pointer-events: none; opacity: .9;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='white' stroke-opacity='.35' stroke-width='3'/%3E%3Cpath d='M21 12a9 9 0 0 0-9-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat; background-size: 18px 18px; background-position: 18px 50%;
}

.btn-outline { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
.btn-outline:hover { background: var(--surface-2); border-color: var(--muted); }
.btn-outline .i { color: var(--ink-2); }
.espacio-arriba { margin-top: 12px; }
.flip { transform: scaleX(-1); }

/* ---------- Divisor "o continúa con" ---------- */
.divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--muted); font-size: 12.5px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; }
.divider::before { background: linear-gradient(90deg, transparent, var(--border)); }
.divider::after  { background: linear-gradient(90deg, var(--border), transparent); }

/* ---------- Mensajes ---------- */
.alert { padding: 11px 14px; margin: 0 0 18px; border-radius: 12px; font-size: 13.5px; border: 1px solid transparent; }
.alert-error { background: var(--error-bg); color: var(--error); border-color: color-mix(in srgb, var(--error) 25%, transparent); }
.alert-ok    { background: var(--ok-bg);    color: var(--ok);    border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.alert-info  { background: var(--info-bg);  color: var(--info);  border-color: color-mix(in srgb, var(--info) 25%, transparent); }
.alert { animation: aparece .25s var(--ease); }
@keyframes aparece { from { opacity: 0; transform: translateY(-4px); } }

.estado-ok { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 16px; background: var(--ok-bg); color: var(--ok); }
.estado-ok .i { width: 24px; height: 24px; }
.folio { margin: 0 0 22px; padding: 12px; border-radius: 12px; background: var(--surface-2); border: 1px dashed var(--border-strong); text-align: center; font-weight: 650; letter-spacing: .02em; }

/* ---------- Botón de tema ---------- */
.tema-btn {
    position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 12px;
    border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); cursor: pointer; font-size: 17px;
    transition: border-color .15s, color .15s;
}
.tema-btn:hover { border-color: var(--border-strong); color: var(--ink); }
.tema-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); }
.tema-luna, :root[data-theme="dark"] .tema-sol { display: none; }
:root[data-theme="dark"] .tema-luna { display: inline; }

/* ---------- Pantallas chicas ---------- */
@media (max-width: 420px) {
    .form-side { padding: 64px 14px 24px; justify-content: flex-start; }
    .card { padding: 26px 20px 22px; border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}