/* Robot CityPC · pantalla de entrada (sólo tema claro) */
:root {
  color-scheme: light;
  --bg: #F5F9FF; --surface: #FFFFFF; --surface-2: #EAF2FF; --line: #D5E1F0; --ink: #14304A; --muted: #52657D;
  --brand: #2364D2; --brand-d: #1A4CA3; --ok: #2FB36A; --ok-txt: #127A42; --ok-bg: #E6F7EE;
  --danger: #B42335; --ko-bg: #FDECEE; --robot: #FF7A1A; --robot-bg: #FFF0E3; --xp: #FFC21A;
  --f-display: ui-rounded, "SF Pro Rounded", "Baloo 2", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --f-body: system-ui, -apple-system, "Segoe UI", "Nunito", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; font-family: var(--f-body); color: var(--ink); background-color: var(--bg);
  background-image: radial-gradient(circle at 1px 1px, #D5E1F0 1.2px, transparent 1.4px),
    radial-gradient(60% 50% at 50% 0%, #E2EEFF 0%, rgba(226, 238, 255, 0) 70%);
  background-size: 22px 22px, 100% 100%;
  display: flex; align-items: center; justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}
.entrar { width: 100%; max-width: 420px; text-align: center; }
.robot-saluda { position: relative; width: min(260px, 72vw); margin: 0 auto 6px; }
.robot-saluda svg { position: relative; display: block; width: 100%; height: auto; }
.halo { position: absolute; inset: 8% 6% 4%; border-radius: 50%; background: radial-gradient(closest-side, #FFF0E3, rgba(255, 240, 227, 0)); }
h1 { font-family: var(--f-display); font-size: clamp(30px, 8vw, 40px); line-height: 1.05; margin: 4px 0 6px; letter-spacing: -.5px; }
h1 span { color: var(--brand); }
.sub { margin: 0 auto 18px; color: var(--muted); font-size: 16px; line-height: 1.45; max-width: 34ch; }
.caja {
  background: var(--surface); border: 1.5px solid var(--line); border-bottom-width: 5px; border-radius: 22px;
  padding: 20px 18px 18px; text-align: left; box-shadow: 0 14px 30px -18px rgba(20, 48, 74, .35);
}
.caja label { display: block; font-weight: 800; font-family: var(--f-display); margin: 0 0 8px; font-size: 16px; }
.fila { display: flex; gap: 8px; }
.fila input {
  flex: 1 1 auto; min-width: 0; height: 52px; border-radius: 14px; border: 2px solid var(--line); background: #FBFDFF;
  font: 600 20px/1 var(--f-body); color: var(--ink); padding: 0 14px; letter-spacing: 1px;
}
.fila input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(35, 100, 210, .18); }
.ver {
  flex: none; width: 52px; height: 52px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface-2);
  color: var(--brand-d); display: grid; place-items: center; cursor: pointer;
}
.ver[aria-pressed="true"] .tache { display: none; }
.ver:focus-visible, .btn:focus-visible { outline: 3px solid var(--robot); outline-offset: 2px; }
.msg { margin: 10px 2px 0; font-weight: 700; font-size: 15px; }
.msg.error { color: var(--danger); }
.msg.ok { color: var(--ok-txt); }
.msg.info { color: #1A4CA3; background: #EAF2FF; border: 1.5px solid #BFD0E6; border-radius: 12px; padding: 9px 12px; }
.btn {
  margin-top: 14px; width: 100%; min-height: 54px; border: 0; border-radius: 16px; cursor: pointer;
  background: var(--brand); color: #FFFFFF; font: 800 19px/1 var(--f-display); letter-spacing: .3px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 5px 0 var(--brand-d), 0 10px 18px -8px rgba(35, 100, 210, .6);
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--brand-d), 0 4px 8px -6px rgba(35, 100, 210, .6); }
.btn[disabled] { opacity: .7; cursor: progress; }
.btn.cargando span::after { content: "…"; }
.sacude { animation: sacude .45s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes sacude {
  10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); } 40%, 60% { transform: translateX(8px); }
}
.bien { border-color: var(--ok); }
.pie { color: var(--muted); font-size: 13px; margin-top: 18px; }
@media (prefers-reduced-motion: reduce) {
  .sacude { animation: none; }
  .btn { transition: none; }
}