@font-face{font-family:Lato;font-style:normal;font-weight:400;font-display:swap;src:url(/fuentes/lato-400-ext.woff2) format("woff2");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}@font-face{font-family:Lato;font-style:normal;font-weight:400;font-display:swap;src:url(/fuentes/lato-400.woff2) format("woff2");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:Lato;font-style:normal;font-weight:700;font-display:swap;src:url(/fuentes/lato-700-ext.woff2) format("woff2");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}@font-face{font-family:Lato;font-style:normal;font-weight:700;font-display:swap;src:url(/fuentes/lato-700.woff2) format("woff2");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}
*,*::before,*::after{box-sizing:border-box}

:root{
  color-scheme:light dark;
  --suelo:#F7F8F6; --papel:#FFFFFF; --papel-2:#FAFBF9; --papel-3:#F2F4F1;
  --borde:#E4E7E2; --borde-2:#D6DBD3; --borde-3:#EEF0EC;
  /* el borde de un campo se tiene que ver: 3,3:1 sobre el papel (WCAG 1.4.11) */
  --borde-campo:#879189;
  --tinta:#1A221C; --tinta-2:#48534B; --tinta-3:#5C665F;
  --verde:#23502A; --verde-2:#1B3F21; --verde-3:#2E6B38; --verde-tenue:#EAF2E6; --verde-tenue-2:#DCEAD6; --verde-punto:#3C8A4B;
  --verde-hoy:#CFE5C9; --verde-hoy-texto:#1B3F21; --verde-hecha:#E8F3E4; --verde-hecha-borde:#9CC792;
  --sobre-acento:#FFFFFF; --sobre-proc:#FFFFFF; --sobre-asesor:#FFFFFF;
  --ambar:#8A5410; --ambar-tenue:#FCF3E1; --ambar-punto:#D9962A; --ambar-borde:#F2DDB4;
  /* 29/09 (Santi): el azul de «Tarea creada», el de Clientify; no es un estado
     ni el azul de un asesor (esos van llenos). 5,5:1 */
  --azul:#0B5CC4; --azul-tenue:#E7F0FC;
  --rojo:#A8341F; --rojo-tenue:#FCECE8; --rojo-punto:#C8472E;
  --gris:#58625B; --gris-tenue:#F1F3F0; --gris-punto:#9AA39D;
  --ganada:#2F7A45; --en-plazo:#B7C8B4; --whatsapp:#16804A;
  --calor-1:#EEF4EC; --calor-1-t:#2E5A33; --calor-2:#DDEBD9; --calor-2-t:#284F2D;
  --calor-3:#C3DCBE; --calor-3-t:#1F4224; --calor-4:#8FBF88; --calor-4-t:#14301A;
  /* 25/09 (ronda final 2): el primer tono era el verde de marca (#23502A) y se
     confundía con «hecho»; ahora un petróleo. Blanco encima: 6,2:1 */
  --asesor-0:#134E5E; --asesor-1:#3F6AA0; --asesor-2:#8A5A8C; --asesor-3:#4F6E62; --asesor-4:#6B6B3A;
  --tip-fondo:#1A221C; --tip-texto:#FFFFFF;
  --velo:rgba(20,28,22,.32);
  --foco:#2E6B38;
  --halo:0 0 0 3px rgba(46,107,56,.18);
  --sombra:0 1px 2px rgba(20,28,22,.04),0 1px 3px rgba(20,28,22,.06);
  --sombra-2:0 4px 12px -2px rgba(20,28,22,.10),0 2px 4px rgba(20,28,22,.05);
  --sombra-panel:-12px 0 32px -8px rgba(20,28,22,.18);
  --sombra-seg:0 1px 2px rgba(20,28,22,.12);
  --sombra-borde:rgba(20,28,22,.18);
  --rayas:rgba(255,255,255,.55);
  /* una sola escala de letra: cinco tamaños, en rem (12 · 14 · 16 · 20 · 28 px
     con la letra del navegador a 16): si alguien agranda la letra, crece todo */
  --t-1:.75rem; --t-2:.875rem; --t-3:1rem; --t-4:1.25rem; --t-5:1.75rem;
  --paso:160ms cubic-bezier(.2,.8,.2,1);
  /* las esquinas, una escala (25/09, ronda 4): marca 3 · r0 4 · r1 6 ·
     ficha 8 · r2 10 · pastilla. Ninguna esquina suelta fuera de ellas. */
  --r-marca:3px; --r0:4px; --r1:6px; --r-ficha:8px; --r2:10px; --r-pill:999px;
}
/* oscuro si el sistema lo pide y nadie eligió claro, o si se eligió oscuro */
@media (prefers-color-scheme:dark){
  :root:not([data-tema=claro]){
    --suelo:#0F1411; --papel:#161C18; --papel-2:#1B221D; --papel-3:#222A24;
    --borde:#2C3530; --borde-2:#3A443D; --borde-3:#232B26;
    --borde-campo:#66716A;
    --tinta:#E6EBE6; --tinta-2:#BAC3BC; --tinta-3:#9AA59D;
    --verde:#6FBF7C; --verde-2:#86CF92; --verde-3:#8ED39A; --verde-tenue:#1C2E20; --verde-tenue-2:#25402A; --verde-punto:#4FA35E;
    --verde-hoy:#2A4A2F; --verde-hoy-texto:#CDEBC9; --verde-hecha:#18281B; --verde-hecha-borde:#35593B;
    --sobre-acento:#0F1411; --sobre-proc:#FFFFFF; --sobre-asesor:#0F1411;
    --ambar:#E8B45E; --ambar-tenue:#2E2412; --ambar-punto:#D9962A; --ambar-borde:#4A3A1C;
    /* 29/09 (Santi): el azul de «Tarea creada», el de Clientify. 7,6:1 */
    --azul:#8CB8FF; --azul-tenue:#16263D;
    --rojo:#F08A74; --rojo-tenue:#331A15; --rojo-punto:#D5563C;
    --gris:#B3BCB5; --gris-tenue:#232A25; --gris-punto:#7D8781;
    --ganada:#6CC486; --en-plazo:#4D5F4F; --whatsapp:#3CC47C;
    --calor-1:#1C2B1F; --calor-1-t:#A9D3A6; --calor-2:#22402A; --calor-2-t:#C0E2BC;
    --calor-3:#2E5A36; --calor-3-t:#DDF0DA; --calor-4:#5FA869; --calor-4-t:#0B130D;
    /* 25/09 (ronda final 2): el primer tono era el verde de marca; ahora un petróleo */
    --asesor-0:#009AA6; --asesor-1:#7FA6DA; --asesor-2:#C39AC5; --asesor-3:#86AE9F; --asesor-4:#B5B571;
    --tip-fondo:#E6EBE6; --tip-texto:#0F1411;
    --velo:rgba(0,0,0,.55);
    --foco:#8ED39A;
    --halo:0 0 0 3px rgba(142,211,154,.25);
    --sombra:0 1px 2px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.25);
    --sombra-2:0 6px 16px -4px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.35);
    --sombra-panel:-12px 0 32px -8px rgba(0,0,0,.6);
    --sombra-seg:0 1px 2px rgba(0,0,0,.5);
    /* el aviso de «sigue de lado»: en oscuro una sombra negra no se ve sobre el
       papel; va un velo claro de la tinta 2 */
    --sombra-borde:rgba(186,195,188,.18);
    --rayas:rgba(0,0,0,.45);
}
}
:root[data-tema=oscuro]{color-scheme:dark;
    --suelo:#0F1411; --papel:#161C18; --papel-2:#1B221D; --papel-3:#222A24;
    --borde:#2C3530; --borde-2:#3A443D; --borde-3:#232B26;
    --borde-campo:#66716A;
    --tinta:#E6EBE6; --tinta-2:#BAC3BC; --tinta-3:#9AA59D;
    --verde:#6FBF7C; --verde-2:#86CF92; --verde-3:#8ED39A; --verde-tenue:#1C2E20; --verde-tenue-2:#25402A; --verde-punto:#4FA35E;
    --verde-hoy:#2A4A2F; --verde-hoy-texto:#CDEBC9; --verde-hecha:#18281B; --verde-hecha-borde:#35593B;
    --sobre-acento:#0F1411; --sobre-proc:#FFFFFF; --sobre-asesor:#0F1411;
    --ambar:#E8B45E; --ambar-tenue:#2E2412; --ambar-punto:#D9962A; --ambar-borde:#4A3A1C;
    /* 29/09 (Santi): el azul de «Tarea creada», el de Clientify. 7,6:1 */
    --azul:#8CB8FF; --azul-tenue:#16263D;
    --rojo:#F08A74; --rojo-tenue:#331A15; --rojo-punto:#D5563C;
    --gris:#B3BCB5; --gris-tenue:#232A25; --gris-punto:#7D8781;
    --ganada:#6CC486; --en-plazo:#4D5F4F; --whatsapp:#3CC47C;
    --calor-1:#1C2B1F; --calor-1-t:#A9D3A6; --calor-2:#22402A; --calor-2-t:#C0E2BC;
    --calor-3:#2E5A36; --calor-3-t:#DDF0DA; --calor-4:#5FA869; --calor-4-t:#0B130D;
    /* 25/09 (ronda final 2): el primer tono era el verde de marca; ahora un petróleo */
    --asesor-0:#009AA6; --asesor-1:#7FA6DA; --asesor-2:#C39AC5; --asesor-3:#86AE9F; --asesor-4:#B5B571;
    --tip-fondo:#E6EBE6; --tip-texto:#0F1411;
    --velo:rgba(0,0,0,.55);
    --foco:#8ED39A;
    --halo:0 0 0 3px rgba(142,211,154,.25);
    --sombra:0 1px 2px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.25);
    --sombra-2:0 6px 16px -4px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.35);
    --sombra-panel:-12px 0 32px -8px rgba(0,0,0,.6);
    --sombra-seg:0 1px 2px rgba(0,0,0,.5);
    /* el aviso de «sigue de lado»: en oscuro una sombra negra no se ve sobre el
       papel; va un velo claro de la tinta 2 */
    --sombra-borde:rgba(186,195,188,.18);
    --rayas:rgba(0,0,0,.45);
}
:root[data-tema=claro]{color-scheme:light}

html{height:100%}
body{margin:0;min-height:100%;display:grid;place-items:center;padding:24px 16px;background:var(--suelo);color:var(--tinta);font:var(--t-3)/1.5 Lato,"Segoe UI",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;color:inherit}
input{font:inherit}
:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.puerta{width:min(400px,100%);background:var(--papel);border:1px solid var(--borde);border-radius:var(--r2);box-shadow:var(--sombra-2);padding:28px 28px 24px}
.puerta .marca-b4m{display:flex;align-items:center;gap:10px;font-size:var(--t-2);font-weight:700;color:var(--tinta-2);margin-bottom:22px}
.puerta .marca-b4m .logo{width:28px;height:28px;border-radius:var(--r-ficha);background:var(--verde);color:var(--sobre-acento);display:grid;place-items:center;font-size:var(--t-1);font-weight:700}
.puerta h1{margin:0 0 4px;font-size:var(--t-4);line-height:1.25}
.puerta p{margin:0 0 22px;color:var(--tinta-3);font-size:var(--t-2)}
.puerta label{display:block;font-size:var(--t-2);font-weight:700;margin-bottom:6px;color:var(--tinta-2)}
.puerta input{width:100%;font-size:var(--t-3);padding:10px 12px;border:1px solid var(--borde-campo);border-radius:var(--r1);background:var(--papel);color:var(--tinta);transition:border-color var(--paso),box-shadow var(--paso)}
.puerta input:hover{border-color:var(--tinta-3)}
.puerta input[aria-invalid=true]{border-color:var(--rojo)}
.puerta input:focus{outline:none;border-color:var(--foco);box-shadow:var(--halo)}
.campo-puerta{margin-bottom:16px}
.con-ojo{position:relative;display:flex;align-items:center}
.con-ojo input{padding-right:50px}
.ver-clave{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;background:none;border:0;border-radius:var(--r1);color:var(--tinta-3);transition:background var(--paso),color var(--paso)}
.ver-clave:hover{background:var(--papel-3);color:var(--tinta)}
.ver-clave svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ver-clave .tachado{opacity:0}
.ver-clave[aria-pressed=true] .tachado{opacity:1}
.puerta button[type=submit]{width:100%;min-height:44px;background:var(--verde);color:var(--sobre-acento);border:0;padding:11px;border-radius:var(--r1);font-weight:700;font-size:var(--t-3);margin-top:6px;transition:background var(--paso)}
.puerta button[type=submit]:hover{background:var(--verde-2)}
.error{display:flex;gap:9px;background:var(--rojo-tenue);color:var(--rojo);padding:10px 12px;border-radius:var(--r1);font-size:var(--t-2);margin-bottom:18px;line-height:1.4}
.error::before{content:"!";font-weight:700;flex:0 0 auto}
.nota-puerta{background:var(--verde-tenue);color:var(--verde);padding:10px 12px;border-radius:var(--r1);font-size:var(--t-2);margin-bottom:18px;line-height:1.4}
.pie-puerta{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--borde);font-size:var(--t-2);color:var(--tinta-3);line-height:1.5}
@media (prefers-reduced-motion:reduce){.puerta input,.ver-clave,.puerta button[type=submit]{transition:none}}