/* Login de CriaTrack: vidrio sobre fondo carbón con luces suaves. Tokens del modo claro y del oscuro. */
:root{color-scheme:light;--ink:#2a2a30;--muted:#55555e;--line:#cfcfd6;--red:#be1e2d;--red-dark:#9c1824;--focus:#be1e2d;
 --stage-a:#383840;--stage-b:#565660;--stage-c:#33333d;--light-1:#9999a3;--light-2:#984353;
 --orb-1:linear-gradient(135deg,rgba(255,255,255,.44),rgba(196,196,208,.06));--orb-2:linear-gradient(140deg,rgba(190,30,45,.8),rgba(168,68,85,.06));
 --card-border:rgba(255,255,255,.5);--card-bg:rgba(255,255,255,.08);--card-shine:rgba(255,255,255,.28);--card-shadow:0 18px 45px rgba(0,0,0,.24);
 --brand-bg:rgba(48,48,56,.25);--form-bg:rgba(255,255,255,.78);--form-shine:rgba(255,255,255,.75);
 --input-bg:rgba(255,255,255,.86);--input-border:#cfcfd6;--input-hover:#a9a9b0;
 --error-bg:#fdf0f1;--error-border:#f0b8bd;--error-ink:#8a1420;--note-line:rgba(44,44,49,.1);
 --toggle-bg:rgba(255,255,255,.14);--toggle-border:rgba(255,255,255,.4);--toggle-ink:#f2f2f5;--toggle-on:rgba(255,255,255,.9);--toggle-on-ink:#2a2a30}
@media screen{:root[data-theme="dark"]{color-scheme:dark;--ink:#ececf0;--muted:#a9a9b3;--line:#4a4b53;--red:#c8293a;--red-dark:#a91f2e;--focus:#ff8a95;
 --stage-a:#16171b;--stage-b:#24252b;--stage-c:#141519;--light-1:#4b4b55;--light-2:#5e2431;
 --orb-1:linear-gradient(135deg,rgba(255,255,255,.12),rgba(160,160,176,.02));--orb-2:linear-gradient(140deg,rgba(190,30,45,.55),rgba(120,40,55,.04));
 --card-border:rgba(255,255,255,.14);--card-bg:rgba(255,255,255,.03);--card-shine:rgba(255,255,255,.08);--card-shadow:0 22px 50px rgba(0,0,0,.5);
 --brand-bg:rgba(20,20,24,.35);--form-bg:rgba(32,33,38,.74);--form-shine:rgba(255,255,255,.07);
 --input-bg:rgba(20,21,25,.7);--input-border:#4a4b53;--input-hover:#6b6c75;
 --error-bg:rgba(200,41,58,.14);--error-border:rgba(255,138,149,.45);--error-ink:#ffb4bb;--note-line:rgba(255,255,255,.1);
 --toggle-bg:rgba(255,255,255,.06);--toggle-border:rgba(255,255,255,.18);--toggle-ink:#d9d9df;--toggle-on:rgba(255,255,255,.16);--toggle-on-ink:#fff}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{position:relative;margin:0;border-top:4px solid var(--red);min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px 16px;overflow-x:hidden;isolation:isolate;
 color:var(--ink);font:16px/1.5 'Segoe UI',system-ui,-apple-system,Arial,sans-serif;
 background:radial-gradient(ellipse at 12% 10%,var(--light-1) 0%,transparent 42%),radial-gradient(ellipse at 92% 96%,var(--light-2) 0%,transparent 44%),
  linear-gradient(135deg,var(--stage-a),var(--stage-b) 48%,var(--stage-c)) fixed}
/* Formas de luz detrás del vidrio y franja roja superior */
body::before,body::after{content:"";position:fixed;z-index:-1;border-radius:50%;pointer-events:none}
body::before{width:min(46vw,420px);aspect-ratio:1;left:46%;top:max(-170px,-18vw);background:var(--orb-1)}
body::after{width:min(38vw,340px);aspect-ratio:1;left:18%;bottom:max(-150px,-16vw);background:var(--orb-2)}

/* Tarjeta de vidrio */
.login{position:relative;width:100%;max-width:880px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);border-radius:20px;overflow:hidden;
 border:1px solid var(--card-border);background:var(--card-bg);box-shadow:inset 0 1px 0 var(--card-shine),var(--card-shadow);
 -webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%)}
/* Reflejo sutil en diagonal */
.login::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 70%,rgba(255,255,255,.05) 100%);mix-blend-mode:soft-light}

/* Marca */
.brandside{position:relative;display:flex;flex-direction:column;justify-content:center;gap:22px;padding:48px 40px;color:#fff;background:var(--brand-bg);border-right:3px solid var(--red)}
.brandside img{display:block;width:108px;height:auto}
.product{padding-top:20px;border-top:1px solid rgba(255,255,255,.28)}
.product p{margin:0}
.name{display:flex;align-items:baseline;gap:4px;font-size:36px;font-weight:700;line-height:1.1;letter-spacing:-.03em}
.name .dot{width:8px;height:8px;border-radius:50%;background:#f55765;flex-shrink:0}
.tagline{margin-top:6px!important;font-size:17px;color:#ececf0}
.scope{margin:0;font-size:14px;line-height:1.6;color:#dcdce2;max-width:30ch}

/* Formulario */
.formside{display:flex;flex-direction:column;gap:18px;padding:52px 48px 40px;background:linear-gradient(120deg,rgba(255,255,255,.09),rgba(255,255,255,.02)),var(--form-bg);
 box-shadow:inset 0 1px 0 var(--form-shine);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.formhead h1{margin:0;font-size:26px;font-weight:650;line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.formhead p{margin:6px 0 0;font-size:15px;color:var(--muted)}
label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--ink)}
input{font:inherit;font-weight:400;width:100%;min-height:46px;padding:10px 13px;border:1px solid var(--input-border);border-radius:9px;color:var(--ink);background:var(--input-bg);transition:border-color .15s,box-shadow .15s}
input:hover{border-color:var(--input-hover)}
input:focus{outline:none;border-color:var(--muted);box-shadow:0 0 0 3px rgba(128,128,140,.22)}
input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
input[aria-invalid="true"]{border-color:var(--focus)}
.submit{font:inherit;font-weight:600;min-height:48px;margin-top:6px;padding:12px 16px;border:0;border-radius:9px;background:var(--red);color:#fff;cursor:pointer;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 16px rgba(190,30,45,.25);transition:background-color .15s}
.submit:hover{background:var(--red-dark)}
.submit:active{background:#83141e}
.submit:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.error{display:flex;gap:10px;align-items:flex-start;margin:0;padding:11px 14px;border:1px solid var(--error-border);border-left:4px solid var(--red);border-radius:9px;background:var(--error-bg);color:var(--error-ink);font-size:14px;font-weight:600;line-height:1.45}
.error svg{flex-shrink:0;width:20px;height:20px;margin-top:-1px}
.note{display:flex;align-items:center;gap:7px;margin:4px 0 0;padding-top:16px;border-top:1px solid var(--note-line);font-size:13px;color:var(--muted)}
.note svg{flex-shrink:0;width:15px;height:15px}

/* Control claro / oscuro */
.themetoggle{position:fixed;top:16px;right:16px;z-index:3;display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--toggle-border);border-radius:999px;
 background:var(--toggle-bg);color:var(--toggle-ink);cursor:pointer;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.themetoggle svg{display:block;width:30px;height:30px;padding:6px;border-radius:50%;transition:background-color .15s,color .15s}
:root:not([data-theme="dark"]) .themetoggle .sun,:root[data-theme="dark"] .themetoggle .moon{background:var(--toggle-on);color:var(--toggle-on-ink)}
.themetoggle:focus-visible{outline:2px solid #fff;outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Sin desenfoque (navegadores viejos): superficies opacas para que todo siga legible */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.login{background:#4a4a52}.formside{background:#fff}:root[data-theme="dark"] .formside{background:#232429}}

/* Tableta y celular: la marca queda arriba, compacta */
@media(max-width:760px){
 body{place-items:start center;padding:64px 16px 24px}
 .login{grid-template-columns:1fr;max-width:460px}
 .brandside{flex-direction:row;align-items:center;gap:16px;padding:20px 22px;border-right:0;border-bottom:3px solid var(--red)}
 .brandside img{width:60px}
 .product{padding:0 0 0 16px;border-top:0;border-left:1px solid rgba(255,255,255,.28)}
 .name{font-size:26px}.tagline{margin-top:2px!important;font-size:14px}
 .scope{display:none}
 .formside{padding:28px 22px 24px;gap:16px}
 .formhead h1{font-size:22px}
 input{font-size:16px}
 .themetoggle{top:12px;right:12px}
}
@media(max-width:360px){.brandside{padding:16px}.brandside img{width:50px}.name{font-size:22px}.formside{padding:24px 16px 20px}}
@media(forced-colors:active){body{border-top-color:CanvasText}.submit{border:1px solid ButtonText}.themetoggle svg{forced-color-adjust:auto}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}