/* Entrada a CodeWise. El tema sigue siempre al sistema: no depende de preferencias guardadas. */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url("fonts/ibm-plex-sans.b2c9031d9fd6.woff2") format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:600 800;font-display:swap;src:url("fonts/schibsted-grotesk.ba4038fc5cb5.woff2") format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-mono-400.79936b18df9f.woff2") format('woff2')}

:root{
  --brand:#FF2501;--brand-hover:#E81F00;--brand-ink:#FFFFFF;--brand-text:#D21C00;--brand-soft:#FF250114;
  --bg:#F5F5F6;--surface:#FFFFFFE6;--field:#FFFFFF;--ink:#111114;--muted:#62626C;--line:#E2E2E7;--line-strong:#C9C9D1;
  --err:#B3261E;--err-soft:#FBE4E2;--ok:#17784A;--ok-soft:#DFF3E8;
  --stream:17,17,20;--stream-alpha:.05;
  --shadow:0 1px 2px #1111140f,0 1.5rem 3rem -1rem #11111424;
  --f-display:'Schibsted Grotesk','Helvetica Neue',Arial,sans-serif;
  --f-body:'IBM Plex Sans','Segoe UI',Roboto,Arial,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --brand-hover:#FF4628;--brand-text:#FF6A4F;--brand-soft:#FF25011F;
  --bg:#000000;--surface:#0F0F11E6;--field:#08080A;--ink:#F2F2F4;--muted:#A3A3AD;--line:#26262B;--line-strong:#3D3D45;
  --err:#FF8A80;--err-soft:#3D1B1A;--ok:#5BD49A;--ok-soft:#143A2A;
  --stream:243,243,245;--stream-alpha:.045;
  --shadow:0 1px 2px #0008,0 1.5rem 3rem -1rem #000c;
  color-scheme:dark;
}}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5;overflow-x:hidden}
.login-field{position:fixed;inset:0;width:100%;height:100%;display:block;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 52%,transparent 0 30%,#000 78%);mask-image:radial-gradient(ellipse 60% 55% at 50% 52%,transparent 0 30%,#000 78%)}
.login-main{position:relative;z-index:1;min-height:100dvh;display:grid;place-content:center;justify-items:center;gap:1.75rem;padding:3rem 1rem}

.login-brand{display:flex;align-items:center;gap:.75rem}
.login-brand img{display:block;height:2.6rem;width:auto;max-width:min(15rem,70vw)}
.login-env{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-text);border:1px solid color-mix(in srgb,var(--brand) 45%,transparent);border-radius:999px;padding:.12rem .55rem}

.login-card{width:min(24rem,calc(100vw - 2rem));background:var(--surface);border:1px solid var(--line);border-radius:1.1rem;padding:2rem 1.75rem 1.5rem;box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);display:grid;gap:1rem;position:relative;overflow:hidden}
.login-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,var(--brand) 20%,var(--brand) 80%,transparent);opacity:.9}
.login-card h1{margin:0;font-family:var(--f-display);font-weight:800;font-size:1.75rem;letter-spacing:-.025em;line-height:1.1}
.login-sub{margin:-.6rem 0 .25rem;color:var(--muted);font-size:.92rem}

.login-google{display:flex;align-items:center;justify-content:center;gap:.7rem;min-height:3rem;padding:.7rem 1rem;border-radius:.7rem;border:1px solid var(--line-strong);background:var(--field);color:var(--ink);
  font-weight:600;font-size:.98rem;text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .1s}
.login-google svg{width:1.25rem;height:1.25rem;flex:none}
.login-google:hover{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.login-google:active{transform:translateY(1px)}
.login-hint{margin:-.45rem 0 0;text-align:center;color:var(--muted);font-size:.8rem}

.login-divider{display:flex;align-items:center;gap:.75rem;color:var(--muted);font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;margin-top:.25rem}
.login-divider::before,.login-divider::after{content:"";flex:1;border-top:1px solid var(--line)}
.login-form{display:grid;gap:.85rem}
.login-field-row{display:grid;gap:.35rem}
.login-field-row label{font-size:.82rem;font-weight:600}
.login-field-row input{width:100%;font:inherit;font-size:.95rem;color:var(--ink);background:var(--field);border:1px solid var(--line-strong);border-radius:.6rem;padding:.65rem .8rem;transition:border-color .15s,box-shadow .15s}
.login-field-row input:hover{border-color:var(--muted)}
.login-field-row input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.login-submit{font:inherit;font-weight:700;font-size:1.19rem;min-height:3rem;border:0;border-radius:.7rem;background:var(--brand);color:var(--brand-ink);cursor:pointer;transition:background .15s,transform .1s;letter-spacing:.005em}
.login-submit:hover{background:var(--brand-hover)}
.login-submit:active{transform:translateY(1px)}
.login-submit:disabled,.login-google[aria-disabled=true]{opacity:.65;cursor:progress}
.login-error{color:var(--err);font-size:.8rem}
.login-messages{display:grid;gap:.5rem}
.login-notice{margin:0;border-radius:.6rem;padding:.6rem .8rem;font-size:.86rem;background:var(--err-soft);color:var(--err)}
.login-notice.success{background:var(--ok-soft);color:var(--ok)}
.login-notice.info,.login-notice.warning{background:var(--brand-soft);color:var(--ink)}
.login-status{margin:0;min-height:1.2em;text-align:center;color:var(--muted);font-size:.82rem}
.login-status:empty{display:none}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:.4rem}

@media (max-width:30rem){.login-main{padding:2rem 1rem;gap:1.25rem}.login-brand img{height:2.1rem}.login-card{padding:1.6rem 1.25rem 1.25rem}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}