/* [Hecho por Claude, 12/10/2026 12:50] PANTALLAS DE ACCESO · Login, RecuperarPassword y RestablecerPassword.
   Docs/diseno/login-nuevo-fondo-landing.html

   Aspecto de la landing nueva (ErpCloud_V1.Landing/wwwroot/landing/css/styles.css):
     - Marco de líneas finas: línea de 1px bajo la cabecera y dos líneas verticales que encierran el contenido en
       1200px (las .sec/.g de la landing, color --ln). El logo va pegado a la línea izquierda, como en la cabecera.
     - La cinta azul de fondo la pinta js/acceso.js en <canvas id="flow">.
     - En pantallas de 1100px o más se amplía todo en proporción (--z, la misma cuenta que la landing).
   El cuadro central es el UI KIT Fluent 2: tokens de css/erp-kit.css con la marca del tema Corporativo. Se copian
   aquí porque erp-kit.css cuelga todo de html.kit-fluent y del marcado del ERP.

   Antes cada pantalla llevaba su CSS copiado en su <style>. Ahora comparten esta hoja, porque son el mismo
   diseño y la cinta son 100 líneas de script: si se cambia aquí, cambian las tres pantallas. */

:root {
    --fontFamilyBase: 'Segoe UI', 'Segoe UI Variable Text', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --colorNeutralForeground1: #242424; --colorNeutralForeground2: #424242;
    --colorNeutralForeground3: #616161; --colorNeutralForeground4: #707070;
    --colorNeutralForegroundOnBrand: #ffffff;
    --colorNeutralBackground1: #ffffff; --colorNeutralBackground1Hover: #f5f5f5;
    --colorSubtleBackgroundHover: #f5f5f5; --colorSubtleBackgroundPressed: #e0e0e0;
    --colorNeutralStroke1: #d1d1d1; --colorNeutralStroke1Hover: #c7c7c7; --colorNeutralStroke2: #e0e0e0;
    --colorNeutralStrokeAccessible: #616161; --colorNeutralStrokeAccessibleHover: #575757;
    --colorBrandBackground: #0B1E3F; --colorBrandBackgroundHover: #1A428A; --colorBrandBackgroundPressed: #06122a;
    --colorBrandBackground2: #e8edf6; --colorBrandForeground1: #1A428A; --colorBrandForegroundLink: #1A428A;
    --colorCompoundBrandStroke: #1A428A; --colorStrokeFocus2: #000000;
    --colorStatusSuccessBackground1: #f1faf1; --colorStatusSuccessForeground1: #0e700e; --colorStatusSuccessBorder1: #9fd89f;
    --colorStatusDangerBackground1: #fdf3f4; --colorStatusDangerForeground1: #b10e1c;
    --colorStatusDangerForeground3: #c50f1f; --colorStatusDangerBorder1: #eeacb2;
    --borderRadiusMedium: 4px; --borderRadiusLarge: 8px;
    --shadow28: 0 0 8px rgba(0,0,0,0.12), 0 14px 28px rgba(0,0,0,0.14);
    /* De la landing */
    --nv: #0B1E3F; --ln: rgba(11,30,63,.16); --w: 1200px;
    --pad: clamp(16px, calc(4vw / var(--z, 1)), 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
    margin: 0; background: #fff; color: var(--colorNeutralForeground1);
    font-family: var(--fontFamilyBase); font-size: 14px; line-height: 20px;
    -webkit-font-smoothing: antialiased;
}

/* ── Fondo: la cinta. Va fuera del marco ampliado: el script ya la dibuja con --z. ── */
#flow { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0; }

/* ── Marco (todo lo demás). La ampliación de la landing, sólo aquí dentro. ── */
.acc-frame {
    position: relative; z-index: 1; zoom: var(--z, 1);
    min-height: 100vh; min-height: calc(100dvh / var(--z, 1));
    display: flex; flex-direction: column;
}
/* Las dos líneas verticales que bajan por toda la página.
   [Hecho por Claude, 12/10/2026 13:12] Arrancan en la línea de la cabecera (81px), no arriba del todo. */
.acc-rails {
    position: absolute; top: 81px; bottom: 0; left: 0; right: 0; margin: 0 auto;
    width: min(var(--w), 100% - 2 * var(--pad));
    border-left: 1px solid var(--ln); border-right: 1px solid var(--ln);
    pointer-events: none;
}

/* Cabecera: la de la landing (.top .g, 11px arriba y abajo + logo de 59px = 81px) con su línea inferior.
   [Hecho por Claude, 12/10/2026 13:12] Como en la landing: la línea horizontal sí, y las verticales empiezan
   DEBAJO de ella (.acc-rails top). Antes cruzaban la cabecera y formaban una cruz junto al logo (AK). */
.acc-top { --acc-top-h: 82px; height: var(--acc-top-h); padding: 0 var(--pad); border-bottom: 1px solid var(--ln); }
.acc-top-g { max-width: var(--w); margin: 0 auto; padding: 11px 0; display: flex; align-items: center; }

/* Logo: .nv-logo con su zoom 1,232 ya aplicado a las medidas */
.brand {
    display: flex; align-items: center; gap: 9.9px; height: 59px;
    text-decoration: none; color: var(--nv);
}
.brand svg { width: 16.6px; height: 25.9px; flex: none; }
.brand span { font-size: 24.6px; line-height: 25.9px; font-weight: 600; letter-spacing: -.02em; }
.brand:focus-visible { outline: 2px solid var(--colorStrokeFocus2); outline-offset: 4px; border-radius: 2px; }

/* ── Centro ── */
.acc-main { flex: 1; display: grid; place-items: center; padding: 48px var(--pad) 64px; }

/* Card (Fluent 2) */
.card {
    width: 100%; max-width: 460px; background: var(--colorNeutralBackground1);
    border-radius: var(--borderRadiusLarge); box-shadow: var(--shadow28);
    padding: 40px 40px 32px;
}
.card-head { margin-bottom: 28px; }
.card-eyebrow {
    display: block; margin-bottom: 8px; font-size: 12px; line-height: 16px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: var(--colorBrandForeground1);
}
.card-head h1 { margin: 0 0 8px; font-size: 28px; line-height: 36px; font-weight: 600; color: var(--colorNeutralForeground1); }
.card-head p { margin: 0; font-size: 16px; line-height: 22px; color: var(--colorNeutralForeground3); }
.card-foot {
    margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--colorNeutralStroke2);
    color: var(--colorNeutralForeground3); text-align: center;
}

/* Icono redondo de los estados «Revisa tu correo» / «Este enlace ya no vale» */
.card-icon {
    display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 20px; border-radius: 50%;
    background: var(--colorBrandBackground2); color: var(--colorBrandForeground1);
}
.card-icon svg { width: 22px; height: 22px; }
.card-text { font-size: 14px; line-height: 20px; color: var(--colorNeutralForeground2); }
.card-text p { margin: 0 0 12px; }
.card-text ul { margin: 0 0 12px; padding-left: 20px; }
.card-text li { margin: 2px 0; }
.card-text .fine, .card-text.fine { font-size: 12px; line-height: 16px; color: var(--colorNeutralForeground3); }
.card-text .mail { font-weight: 600; color: var(--colorNeutralForeground1); word-break: break-all; }

/* Field + Input outline (large: 40px; 16px de letra, que además evita el zoom de iOS al enfocar) */
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 20px; }
.field > label { font-size: 14px; line-height: 20px; color: var(--colorNeutralForeground1); }
.input {
    display: flex; align-items: center; min-height: 40px;
    background: var(--colorNeutralBackground1); border: 1px solid var(--colorNeutralStroke1);
    border-bottom-color: var(--colorNeutralStrokeAccessible); border-radius: var(--borderRadiusMedium);
    transition: border-color .1s;
}
.input:hover { border-color: var(--colorNeutralStroke1Hover); border-bottom-color: var(--colorNeutralStrokeAccessibleHover); }
.input:focus-within {
    border-color: var(--colorNeutralStroke1); border-bottom-color: var(--colorCompoundBrandStroke);
    box-shadow: inset 0 -1px 0 var(--colorCompoundBrandStroke);
}
.input input {
    flex: 1; min-width: 0; height: 38px; padding: 0 12px; border: 0; outline: 0; background: transparent;
    font: inherit; font-size: 16px; color: var(--colorNeutralForeground1);
}
.input input::placeholder { color: var(--colorNeutralForeground4); }
.input:has(input.input-validation-error) { border-bottom-color: var(--colorStatusDangerForeground3); box-shadow: inset 0 -1px 0 var(--colorStatusDangerForeground3); }
.hint { font-size: 12px; line-height: 16px; color: var(--colorNeutralForeground3); }

.toggle-pwd {
    display: grid; place-items: center; width: 32px; height: 32px; margin-right: 4px; flex: none;
    border: 0; border-radius: var(--borderRadiusMedium); background: transparent; cursor: pointer;
    color: var(--colorNeutralForeground3);
}
.toggle-pwd:hover { background: var(--colorSubtleBackgroundHover); color: var(--colorNeutralForeground2); }
.toggle-pwd:focus-visible { outline: 2px solid var(--colorStrokeFocus2); outline-offset: 0; }
.toggle-pwd svg { width: 18px; height: 18px; }

/* Mensaje de validación del Field */
.val-error { font-size: 12px; line-height: 16px; color: var(--colorStatusDangerForeground1); }
.val-error:empty { display: none; }

/* MessageBar (error y éxito). El resumen vacío de ASP.NET sale con validation-summary-valid: se oculta. */
.msgbar {
    display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; margin-bottom: 20px;
    border: 1px solid; border-radius: var(--borderRadiusMedium); font-size: 14px; line-height: 20px;
}
.msgbar ul { margin: 0; padding: 0; list-style: none; }
.msgbar.validation-summary-valid { display: none; }
.msgbar-error { background: var(--colorStatusDangerBackground1); border-color: var(--colorStatusDangerBorder1); color: var(--colorNeutralForeground1); }
.msgbar-ok { background: var(--colorStatusSuccessBackground1); border-color: var(--colorStatusSuccessBorder1); color: var(--colorNeutralForeground1); }
.msgbar-error::before, .msgbar-ok::before {
    content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%;
    background: currentColor no-repeat center / 10px 10px;
}
.msgbar-error::before { color: var(--colorStatusDangerForeground3); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 2v3.4' stroke='%23fff' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='5' cy='7.6' r='.8' fill='%23fff'/%3E%3C/svg%3E"); }
.msgbar-ok::before { color: var(--colorStatusSuccessForeground1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.4 5.2l1.8 1.8 3.6-3.8' fill='none' stroke='%23fff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* Fila Recordarme / ¿Olvidaste...? */
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 28px; flex-wrap: wrap; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; color: var(--colorNeutralForeground1); }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--colorCompoundBrandStroke); cursor: pointer; }

/* Link (Fluent) */
.link { color: var(--colorBrandForegroundLink); text-decoration: none; }
.link:hover { text-decoration: underline; }
.link:focus-visible, .check input:focus-visible { outline: 2px solid var(--colorStrokeFocus2); outline-offset: 2px; border-radius: 2px; }

/* Button primary (large). También sirve en <a>. */
.btn-primary {
    width: 100%; min-height: 40px; padding: 8px 16px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--colorBrandBackground); color: var(--colorNeutralForegroundOnBrand);
    border: 1px solid transparent; border-radius: var(--borderRadiusMedium);
    font: inherit; font-size: 16px; line-height: 22px; font-weight: 600; text-decoration: none; cursor: pointer;
    transition: background .1s;
}
.btn-primary:hover { background: var(--colorBrandBackgroundHover); }
.btn-primary:active { background: var(--colorBrandBackgroundPressed); }
.btn-primary:focus-visible { outline: 2px solid var(--colorStrokeFocus2); outline-offset: 2px; }
.btn-primary svg { width: 16px; height: 16px; }

/* «¿A qué empresa vas?»: una fila por empresa */
.tenant-pick { display: flex; flex-direction: column; gap: 8px; }
.tenant-option {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; text-align: left;
    background: var(--colorNeutralBackground1); border: 1px solid var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusMedium); font: inherit; color: var(--colorNeutralForeground1); cursor: pointer;
    transition: background .1s, border-color .1s;
}
.tenant-option:hover { background: var(--colorNeutralBackground1Hover); border-color: var(--colorNeutralStroke1Hover); }
.tenant-option:active { background: var(--colorSubtleBackgroundPressed); }
.tenant-option:focus-visible { outline: 2px solid var(--colorStrokeFocus2); outline-offset: 2px; }
.tenant-initial {
    display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: var(--borderRadiusMedium);
    background: var(--colorBrandBackground2); color: var(--colorBrandForeground1); font-weight: 600;
}
.tenant-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tenant-option svg { width: 16px; height: 16px; flex: none; color: var(--colorNeutralForeground3); }
.tenant-email { color: var(--colorNeutralForeground3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.row-tenant { margin: 16px 0 0; }

/* Campo trampa de RecuperarPassword: lo rellenan los bots, las personas no lo ven */
.hp { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }

/* [Hecho por Claude, 12/10/2026 13:05] Pie en blanco: en gris no se leía encima de la cinta azul (AK). La sombra
   suave lo mantiene legible en los tramos en que la cinta no pasa por detrás (fondo blanco). */
.acc-foot {
    padding: 0 var(--pad) 20px; text-align: center;
    font-size: 12px; line-height: 16px; color: #fff;
    text-shadow: 0 0 2px rgba(11,30,63,.55), 0 1px 3px rgba(11,30,63,.45);
}

@media (max-width: 560px) {
    .acc-main { padding-top: 32px; padding-bottom: 40px; }
    .card { padding: 28px 20px 24px; }
    .card-head h1 { font-size: 24px; line-height: 32px; }
}