/* Estilos compartidos por el asistente de primer arranque y el login.
 * Reutilizan la paleta y el sistema del panel, en una única tarjeta centrada. */

:root {
  --bg: #F5F8FA; --panel: #FFFFFF; --panel-2: #ECF3F6;
  --ink: #16242A; --muted: #66787F; --faint: #A3B2B8; --line: #DCE7EB;
  --brand: #10B0E6; --brand-ink: #0A87B4; --on-brand: #FFFFFF;
  --ok: #15A05C; --down: #D93A3A;
  --r: 12px; --r-s: 8px;
  --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --shadow: 0 1px 2px rgba(22,36,42,.04), 0 18px 50px -24px rgba(22,36,42,.4);
  --ease: cubic-bezier(.4,0,.2,1); --t: 220ms;
  --ui: "Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  --disp: "Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1519; --panel: #151F24; --panel-2: #1C282E;
    --ink: #E3EDF0; --muted: #8EA1A9; --faint: #5C6E76; --line: #26343A;
    --brand-ink: #4FC8F0; --on-brand: #06222E;
    --ok: #3EBB80; --down: #EE6A6A;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 18px 50px -24px rgba(0,0,0,.75);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 15px/1.5 var(--ui); -webkit-font-smoothing: antialiased;
  display: grid; place-items: center; padding: var(--s5);
}
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-s); }

.card {
  width: min(420px, 100%);
  background: var(--panel); border-radius: var(--r); box-shadow: var(--shadow);
  padding: var(--s6); animation: rise var(--t) var(--ease);
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.brand { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5); }
.brand img { width: 58px; height: auto; }
@media (prefers-color-scheme: dark) { .brand img { filter: invert(1) hue-rotate(180deg); } }
.brand .sep { width: 1px; height: 20px; background: var(--line); }
.brand .nm { font-family: var(--disp); font-size: 16px; font-weight: 600; }
.brand .sub { font-size: 11.5px; color: var(--faint); }

h1 { margin: 0 0 var(--s2); font-family: var(--disp); font-size: 21px; font-weight: 500; letter-spacing: -.01em; }
.lead { margin: 0 0 var(--s5); font-size: 14px; color: var(--muted); }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s4); }
.field label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); }
.field input {
  font: inherit; font-size: 15px; color: var(--ink); background: var(--bg); border: none;
  border-radius: var(--r-s); padding: var(--s3); box-shadow: inset 0 0 0 1.5px var(--line);
  transition: box-shadow var(--t) var(--ease);
}
.field input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--brand); }
.hint { font-size: 12px; color: var(--faint); margin-top: 4px; }

.btn {
  width: 100%; font: inherit; font-size: 15px; font-weight: 600; color: var(--on-brand);
  background: var(--brand-ink); border: none; border-radius: var(--r-s); padding: var(--s3);
  cursor: pointer; margin-top: var(--s2);
  transition: background var(--t) var(--ease), transform 140ms var(--ease);
}
.btn:hover { background: var(--brand); color: #06222E; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .6; cursor: default; transform: none; }

.msg { margin-top: var(--s4); font-size: 13px; color: var(--down); min-height: 18px; }
.foot { margin-top: var(--s5); font-size: 11.5px; color: var(--faint); text-align: center; }
.foot strong { color: var(--muted); font-weight: 600; }

@media (prefers-reduced-motion: reduce) { * { animation-duration: 1ms !important; transition-duration: 1ms !important; } }