/* login.css — Pantalla de acceso de la puerta única.
 *
 * Las reglas de abajo se extrajeron TAL CUAL de
 * 07-pagina-web/frontend/src/index.css, el sistema visual ya definido y
 * validado el 2026-09-03. No se reinterpretaron: una segunda version del mismo
 * diseño es justo lo que no queremos.
 *
 * Lo unico propio es el bloque final: la version sin React necesita algunas
 * clases utilitarias que en el SPA resolvia el framework, y una media query
 * para el movil.
 */

:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #10213c; background: #f4f6fb; font-synthesis: none; text-rendering: optimizeLegibility;
  --ink: #10213c; --muted: #637089; --primary: #5b47f4; --primary-soft: #efedff;
  --lime: #c8da49; --coral: #ff746e; --teal: #20b8a6; --line: #dce2ed;
  --line-soft: #ebeff5; --surface: #fff; --canvas: #f4f6fb; --sidebar: 214px;
  --shadow: 0 12px 30px rgba(31, 45, 74, .055);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--canvas); }
button, input, select { font: inherit; } button { cursor: pointer; touch-action: manipulation; } button:disabled { cursor: not-allowed; }
button:focus-visible, select:focus-visible { outline: 3px solid rgba(91,71,244,.28); outline-offset: 2px; }

.auth-shell { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(420px,1.08fr) minmax(440px,.92fr); background: #fff; }.auth-story { position: relative; min-height: 100%; display: flex; flex-direction: column; overflow: hidden; padding: clamp(32px,5vw,72px); color: #fff; background: radial-gradient(circle at 82% 18%,rgba(109,89,255,.5),transparent 26rem),radial-gradient(circle at 8% 82%,rgba(32,184,166,.2),transparent 22rem),#0d1c35; }.auth-story::after { content:""; position:absolute; right:-120px; bottom:-150px; width:420px; height:420px; 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); pointer-events:none; }.auth-brand { position:relative; z-index:1; display:flex; align-items:center; gap:12px; }.auth-brand > span { width:46px; height:46px; display:grid; place-items:center; background:linear-gradient(145deg,#725eff,#4b37d1); border-radius:14px 14px 14px 5px; box-shadow:0 12px 26px rgba(0,0,0,.24); }.auth-brand > div { display:grid; gap:2px; }.auth-brand strong { font-size:22px; letter-spacing:-.03em; }.auth-brand small { color:#aebad0; font-size:11px; }.auth-story-copy { position:relative; z-index:1; max-width:590px; margin:auto 0; padding:68px 0 48px; }.auth-kicker { display:block; margin-bottom:14px; color:#c8da49; font-size:11px; font-weight:850; letter-spacing:.14em; text-transform:uppercase; }.auth-story h1 { max-width:580px; margin:0 0 20px; font-size:clamp(40px,5vw,68px); line-height:1.02; letter-spacing:-.055em; text-wrap:balance; }.auth-story-copy p { max-width:530px; margin:0; color:#bdc7d7; font-size:16px; line-height:1.65; }.auth-proof { position:relative; z-index:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; max-width:620px; }.auth-proof > div { display:flex; align-items:flex-start; gap:10px; padding:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:12px; backdrop-filter:blur(10px); }.auth-proof svg { flex:0 0 auto; color:#c8da49; }.auth-proof span { display:grid; gap:3px; }.auth-proof strong { font-size:12px; }.auth-proof small { color:#9faec3; font-size:10px; line-height:1.4; }.auth-environment { position:relative; z-index:1; margin-top:22px; color:#7486a3; font-size:9px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }

.auth-entry { display:grid; place-items:center; padding:40px clamp(28px,5vw,78px); background:linear-gradient(145deg,#fff 30%,#f6f7fc); }.auth-card { width:min(440px,100%); }.auth-card-icon { width:44px; height:44px; display:grid; place-items:center; margin-bottom:24px; color:var(--primary); background:var(--primary-soft); border:1px solid #ddd8ff; border-radius:12px; }.auth-card h2 { margin:6px 0 9px; font-size:32px; line-height:1.1; letter-spacing:-.045em; }.auth-card > p { max-width:410px; margin:0 0 27px; color:var(--muted); font-size:14px; line-height:1.55; }.auth-form { display:grid; gap:17px; }.auth-form > label { display:grid; gap:7px; }.auth-form > label > span,.auth-area legend { color:#44516a; font-size:12px; font-weight:800; }.auth-area { display:grid; gap:7px; margin:0; padding:0; border:0; }.auth-area > div { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }.auth-area button { position:relative; min-height:66px; display:grid; grid-template-columns:32px 1fr 16px; align-items:center; gap:8px; padding:9px 10px; color:#657187; background:#fff; border:1px solid #d6ddea; border-radius:10px; text-align:left; transition:border-color .14s,background .14s,box-shadow .14s; }.auth-area button:hover { border-color:#b9b1ff; background:#fbfaff; }.auth-area button.active { color:var(--primary); background:var(--primary-soft); border-color:#9f94ff; box-shadow:0 0 0 2px rgba(91,71,244,.08); }.auth-area button > span:first-child { width:32px; height:32px; display:grid; place-items:center; color:#718097; background:#f2f4f8; border-radius:8px; }.auth-area button.active > span:first-child { color:var(--primary); background:#fff; }.auth-area button > span:nth-child(2) { min-width:0; display:grid; gap:2px; }.auth-area strong { font-size:11px; }.auth-area button small { overflow:hidden; color:#7c889a; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }.auth-area > small { color:#7c8799; font-size:9px; line-height:1.4; }.auth-input { min-height:50px; display:flex; align-items:center; gap:10px; padding:0 12px; color:#78849a; background:#fff; border:1px solid #d6ddea; border-radius:10px; transition:border-color .14s,box-shadow .14s; }.auth-input:focus-within { color:var(--primary); border-color:#8f82ff; box-shadow:0 0 0 3px rgba(91,71,244,.11); }.auth-input input { width:100%; min-width:0; height:46px; color:var(--ink); background:transparent; border:0; outline:0; font-size:16px; }.auth-input input::placeholder { color:#9ca6b7; }.auth-input > button { width:38px; height:38px; display:grid; place-items:center; flex:0 0 auto; color:#6e7a90; background:transparent; border:0; border-radius:8px; }.auth-input > button:hover { color:var(--primary); background:var(--primary-soft); }.auth-feedback { display:flex; align-items:flex-start; gap:8px; padding:10px 11px; border-radius:9px; font-size:12px; line-height:1.45; }.auth-feedback.error { color:#9d2f2f; background:#fff0ef; border:1px solid #fac8c5; }.auth-feedback.success { color:#245f56; background:#eaf8f5; border:1px solid #bee7df; }.auth-feedback svg { flex:0 0 auto; }.auth-local-note { display:flex; align-items:flex-start; gap:8px; padding:10px 11px; color:#57647a; background:#f6f7fa; border:1px solid #e5e9f0; border-radius:9px; font-size:11px; line-height:1.45; }.auth-local-note svg { flex:0 0 auto; color:var(--primary); }.auth-submit { min-height:50px; display:flex; align-items:center; justify-content:center; gap:9px; color:#fff; background:var(--primary); border:0; border-radius:10px; box-shadow:0 10px 22px rgba(91,71,244,.22); font-size:13px; font-weight:850; transition:background .14s,box-shadow .14s; }.auth-submit:hover:not(:disabled) { background:#4d3bd5; box-shadow:0 12px 25px rgba(91,71,244,.28); }.auth-submit:disabled { opacity:.48; box-shadow:none; }.auth-link { min-height:44px; display:flex; align-items:center; justify-content:center; gap:4px; margin:12px auto 0; padding:0 10px; color:var(--primary); background:transparent; border:0; border-radius:8px; font-size:12px; font-weight:800; }.auth-link:hover { background:var(--primary-soft); }.auth-help { margin:20px 0 0 !important; text-align:center; font-size:10px !important; }.spin { animation:auth-spin .8s linear infinite; }@keyframes auth-spin { to { transform:rotate(360deg); } }

.auth-session-check { min-height:100vh; min-height:100dvh; display:grid; place-content:center; justify-items:center; gap:8px; color:var(--ink); background:var(--canvas); }.auth-session-check > span { width:46px; height:46px; display:grid; place-items:center; color:#fff; background:var(--primary); border-radius:14px; }.auth-session-check strong { font-size:18px; }.auth-session-check small { color:var(--muted); font-size:11px; }

.auth-area-alert { display:grid; grid-template-columns:20px 1fr; gap:9px; padding:11px 12px; color:#6f4712; background:#fff8e8; border:1px solid #f1d18b; border-radius:10px; font-size:12px; line-height:1.45; }.auth-area-alert > svg { margin-top:1px; color:#ad6d0b; }.auth-area-alert > div { display:grid; gap:2px; }.auth-area-alert strong { color:#6b4210; font-size:12px; }.auth-area-alert span { color:#7f5d2c; }.auth-area-alert button { min-height:44px; width:max-content; display:flex; align-items:center; gap:6px; margin-top:3px; padding:0 10px; color:#5b47f4; background:#fff; border:1px solid #cfc8ff; border-radius:8px; font-size:11px; font-weight:800; }.auth-area-alert button:hover { background:#f5f2ff; }.auth-local-note code { color:#3e4b61; font-family:inherit; font-size:10px; font-weight:800; }



/* ── Añadidos de la version estatica ─────────────────────────────────────── */

/* Sin fuentes remotas: la CSP es estricta y la pantalla no depende de la red
   para dibujarse. Inter si esta instalada, si no la del sistema. */
.auth-form > label > span { display: block; }
.auth-area button { font: inherit; }
.auth-story h1 { font-weight: 800; }

/* Estado oculto */
[hidden] { display: none !important; }

/* El boton de enviar cuando esta trabajando */
.auth-submit .spin { display: none; }
.auth-submit.ocupado .spin { display: inline-block; }
.auth-submit.ocupado .etiqueta-normal { display: none; }

/* Movil: la columna narrativa se recorta a una cabecera compacta. El acceso
   siempre manda; en un telefono nadie necesita el copy de marca. */
@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-story { min-height: auto; padding: 24px; }
  .auth-story-copy { padding: 28px 0 22px; }
  .auth-story h1 { font-size: 30px; }
  .auth-story-copy p, .auth-proof, .auth-environment { display: none; }
  .auth-entry { padding: 28px 20px 44px; }
}

/* El kicker de la tarjeta usa el color primario. Iba como style= en linea y la
   CSP lo bloqueaba: style-src 'self' no admite estilos incrustados. */
.auth-kicker.kicker-card { color: var(--primary); }

/* La palomita del area seleccionada.
   Iba por JS con `check.hidden = ...`, y no funcionaba: `hidden` es una
   propiedad de HTMLElement y estos checks son SVGElement, asi que asignarla no
   hace nada y el atributo nunca se escribe. Con CSS sobra el JS y no hay estado
   que sincronizar. `visibility` y no `display` para que el hueco no salte. */
.auth-area button .marca-check { visibility: hidden; }
.auth-area button.active .marca-check { visibility: visible; }