:root { --auth-navy:#071120; --auth-blue:#2563eb; --auth-orange:#f97316; --auth-text:#172033; --auth-muted:#748096; --auth-border:#e3e8f0; }
* { box-sizing:border-box; margin:0; padding:0; }
body.auth-page { min-height:100vh; font-family:"Manrope","Segoe UI",sans-serif; color:var(--auth-text); background:#eef3f9; }
.auth-page a { color:inherit; text-decoration:none; }
.auth-layout { min-height:100vh; display:grid; grid-template-columns:minmax(390px,.92fr) minmax(520px,1.08fr); }
.auth-visual { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:46px clamp(40px,6vw,82px); color:#fff; background:radial-gradient(circle at 20% 80%,rgba(37,99,235,.36),transparent 32%),linear-gradient(145deg,#071120,#102b52); }
.auth-visual::before { content:""; position:absolute; inset:0; opacity:.13; background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px); background-size:52px 52px; mask-image:linear-gradient(135deg,#000,transparent 78%); }
.auth-visual::after { content:""; position:absolute; width:430px; height:430px; right:-260px; top:15%; border:1px solid rgba(255,255,255,.1); border-radius:50%; box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.018); }
.auth-brand,.auth-message,.auth-quote { position:relative; z-index:2; }
.auth-brand { display:inline-flex; align-items:center; gap:12px; width:fit-content; font-size:15px; font-weight:800; }
.auth-brand > span { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:linear-gradient(135deg,#f97316,#fb923c); box-shadow:0 10px 28px rgba(249,115,22,.3); }
.auth-brand svg { width:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.auth-brand b { display:flex; align-items:center; gap:7px; }.auth-brand small { padding:2px 5px; color:#93c5fd; background:rgba(59,130,246,.14); border:1px solid rgba(147,197,253,.2); border-radius:5px; font-size:8px; letter-spacing:.6px; }
.auth-message { max-width:520px; margin:70px 0; }
.auth-kicker { display:flex; align-items:center; gap:9px; margin-bottom:20px; color:#bfdbfe; font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase; }.auth-kicker i { width:7px; height:7px; border-radius:50%; background:#fb923c; box-shadow:0 0 0 5px rgba(249,115,22,.12); }
.auth-message h1 { font-size:clamp(40px,4.7vw,64px); line-height:1.05; letter-spacing:-3px; }.auth-message h1 em { color:transparent; background:linear-gradient(100deg,#fff,#7fb4ff); -webkit-background-clip:text; background-clip:text; font-style:normal; }
.auth-message > p { max-width:520px; margin-top:22px; color:#aebbd0; font-size:14px; line-height:1.8; }
.auth-benefits { margin-top:32px; display:grid; gap:16px; }.auth-benefits > div { display:flex; align-items:flex-start; gap:12px; }.auth-benefits > div > span { flex:0 0 auto; width:24px; height:24px; display:grid; place-items:center; margin-top:1px; color:#fff; background:#16a34a; border-radius:7px; font-size:11px; font-weight:800; }.auth-benefits p { display:flex; flex-direction:column; }.auth-benefits b { font-size:11px; }.auth-benefits small { margin-top:2px; color:#899ab3; font-size:9px; }
.auth-quote { display:flex; align-items:flex-start; gap:12px; color:#8697b0; font-size:10px; line-height:1.6; }.auth-quote > span { color:#3b82f6; font-family:Georgia,serif; font-size:40px; line-height:.8; }
.auth-main { min-width:0; display:flex; align-items:center; justify-content:center; padding:50px clamp(28px,6vw,90px); background:#fff; }
.auth-panel { width:min(100%,470px); }.auth-panel.register-panel { width:min(100%,720px); }
.auth-mobile-brand { display:none; margin-bottom:35px; align-items:center; gap:10px; font-weight:800; }.auth-mobile-brand span { width:38px; height:38px; display:grid; place-items:center; color:#fff; background:var(--auth-orange); border-radius:10px; }.auth-mobile-brand svg { width:21px; fill:none; stroke:currentColor; stroke-width:1.8; }
.auth-heading { margin-bottom:30px; }.auth-heading .back-home { display:inline-flex; align-items:center; gap:5px; margin-bottom:22px; color:#8490a3; font-size:10px; font-weight:700; }.auth-heading h1 { font-size:30px; line-height:1.2; letter-spacing:-1px; }.auth-heading p { margin-top:9px; color:var(--auth-muted); font-size:12px; }.auth-heading p a { color:var(--auth-blue); font-weight:800; }
.auth-alert { margin-bottom:18px; padding:11px 13px; color:#b42318; background:#fff1f0; border:1px solid #ffd5d2; border-radius:9px; font-size:10px; }
.auth-form { display:grid; gap:18px; }.auth-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px 18px; }
.auth-field { min-width:0; display:flex; flex-direction:column; gap:7px; }.auth-field label { color:#334058; font-size:10px; font-weight:800; }.auth-field input,.auth-field select,.auth-field .input,.auth-field .form-control { width:100%; height:46px; padding:0 13px; color:#26334b; background:#fbfcfe; border:1px solid var(--auth-border); border-radius:9px; outline:none; font-family:inherit; font-size:12px; transition:border-color .18s,box-shadow .18s,background .18s; }.auth-field input:focus,.auth-field select:focus,.auth-field .input:focus,.auth-field .form-control:focus { background:#fff; border-color:#5b8ff0; box-shadow:0 0 0 3px rgba(37,99,235,.1); }.auth-field select { appearance:auto; }.field-error { padding:7px 9px; color:#b42318; background:#fff3f2; border-radius:6px; font-size:9px; }.field-help { color:#8a95a8; font-size:8px; }
.password-wrap { position:relative; }.password-wrap input { padding-right:44px; }.password-toggle { position:absolute; right:5px; top:5px; width:36px; height:36px; border:0; color:#8490a3; background:transparent; border-radius:7px; cursor:pointer; }.password-toggle:hover { background:#edf2f8; }.password-toggle svg { width:17px; fill:none; stroke:currentColor; stroke-width:1.8; }
.auth-row { display:flex; justify-content:flex-end; margin-top:-4px; }.auth-row a { color:var(--auth-blue); font-size:10px; font-weight:700; }
.auth-submit { width:100%; min-height:48px; border:0; display:flex; align-items:center; justify-content:center; gap:9px; color:#fff; background:linear-gradient(135deg,#3b82f6,#2563eb); border-radius:9px; box-shadow:0 12px 26px rgba(37,99,235,.22); font-family:inherit; font-size:12px; font-weight:800; cursor:pointer; transition:transform .2s,box-shadow .2s; }.auth-submit:hover { transform:translateY(-2px); box-shadow:0 16px 32px rgba(37,99,235,.3); }.auth-submit svg { width:17px; fill:none; stroke:currentColor; stroke-width:2; }
.auth-security { margin-top:20px; display:flex; align-items:center; justify-content:center; gap:7px; color:#9aa4b4; font-size:8px; }.auth-security svg { width:13px; fill:none; stroke:currentColor; stroke-width:1.8; }
.auth-terms { margin-top:18px; color:#929caf; text-align:center; font-size:8px; line-height:1.6; }
@media (max-width:960px) { .auth-layout { grid-template-columns:1fr; }.auth-visual { display:none; }.auth-main { min-height:100vh; }.auth-mobile-brand { display:flex; } }
@media (max-width:620px) { .auth-main { align-items:flex-start; padding:max(28px,env(safe-area-inset-top)) 20px max(42px,env(safe-area-inset-bottom)); }.auth-form-grid { grid-template-columns:1fr; }.auth-panel.register-panel { width:100%; }.auth-heading h1 { font-size:26px; }.auth-field input,.auth-field select { min-height:48px;font-size:16px; }.password-toggle { width:46px;height:46px; }.auth-submit { min-height:50px; } }

/* ═══════════════════════════════════════════════════════════════════
   2026-10 · Acceso y registro con el mundo de la portada
   (capítulos de color planos, General Sans, magenta en la acción).
   Se quitan degradados, rejilla y círculos decorativos, y los textos
   suben a un tamaño legible (nada bajo 13px).
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --auth-sky: #cbe4f2;
  --auth-sand: #f1e3b5;
  --auth-yellow: #ffc013;
  --auth-ink: #0a0a0a;
  --auth-accent: #b0298f;
  --auth-accent-strong: #921f76;
  --auth-text: #0a0a0a;
  --auth-muted: #3d5764;
  --auth-border: #0a0a0a;
}
body.auth-page { font-family: 'General Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; background: var(--auth-sky); font-size: 17px; -webkit-tap-highlight-color: transparent; }
.auth-visual { background: var(--auth-yellow); color: var(--auth-ink); }
.auth-visual::before,
.auth-visual::after { display: none; }
.auth-brand { font-size: 20px; }
.auth-brand > span { background: var(--auth-ink) !important; color: #f2f2f2 !important; box-shadow: none !important; border-radius: 0 !important; }
.auth-brand small { display: none; }
.auth-kicker { display: none; }
.auth-message h1 { font-size: clamp(40px, 4.4vw, 72px); line-height: 0.95; letter-spacing: -0.02em; color: var(--auth-ink); }
.auth-message h1 em { font-style: normal; color: inherit; background: none; -webkit-text-fill-color: currentColor; }
.auth-message > p,
.auth-benefits p,
.auth-benefits small,
.auth-quote { font-size: 17px; color: var(--auth-ink); opacity: 1; }
.auth-benefits > div { background: rgba(10, 10, 10, 0.06) !important; border: 0 !important; border-radius: 0 !important; backdrop-filter: none !important; }
.auth-benefits > div > span { background: var(--auth-ink) !important; color: #f2f2f2 !important; border-radius: 0 !important; }
.auth-benefits b { font-size: 17px; }
.auth-main { background: var(--auth-sky); }
.auth-panel { background: transparent; box-shadow: none; border: 0; }
.auth-heading h1 { font-size: clamp(32px, 3vw, 48px); letter-spacing: -0.02em; color: var(--auth-ink); }
.auth-heading p,
.auth-heading .back-home { font-size: 16px; color: var(--auth-muted); }
.auth-heading p a { color: var(--auth-ink); text-decoration: underline; text-underline-offset: 0.2em; }
.auth-field label { font-size: 15px; font-weight: 500; color: var(--auth-ink); }
.auth-field input,
.auth-field select,
.auth-field .input,
.auth-field .form-control {
  height: 52px;
  border: 2px solid var(--auth-ink);
  border-radius: 0;
  background: #ffffff;
  font-size: 16px;
  color: var(--auth-ink);
}
.auth-field input:focus,
.auth-field select:focus,
.auth-field .input:focus,
.auth-field .form-control:focus { border-color: var(--auth-accent); box-shadow: 0 0 0 3px rgba(176, 41, 143, 0.2); }
.field-error { font-size: 14px; border-radius: 0; }
.field-help { font-size: 13px; color: var(--auth-muted); }
.auth-row,
.auth-row a { font-size: 15px; }
.auth-row a { color: var(--auth-ink); text-decoration: underline; text-underline-offset: 0.2em; }
.auth-submit {
  min-height: 56px;
  border-radius: 0;
  background: var(--auth-accent) !important;
  box-shadow: none !important;
  font-size: 17px;
  transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1), background-color 180ms ease;
}
.auth-submit:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .auth-submit:hover { background: var(--auth-accent-strong) !important; transform: none; } }
.auth-security,
.auth-terms { font-size: 14px; color: var(--auth-muted); }
.auth-alert { border-radius: 0; font-size: 15px; }
.auth-mobile-brand span { background: var(--auth-ink) !important; box-shadow: none !important; border-radius: 0 !important; }
.auth-page :focus-visible { outline: 3px solid var(--auth-accent); outline-offset: 3px; }