/* =====================================================================
   Estilo de las pantallas de acceso (login, instalador, cambio de clave).
   Mismo kit de marca que el panel: navy #224058, terracota #A75A32,
   sand #C9C3B8, tipografía Inter.
   ===================================================================== */
:root{
  --navy:#224058; --terracotta:#A75A32; --sand:#C9C3B8;
  --off-white:#F8F8F9; --grey-mid:#6F7373;
  --surface:#142533; --surface-2:#1B3245;
  --line:rgba(201,195,184,.16); --line-soft:rgba(201,195,184,.09);
  --ink:#F8F8F9; --ink-2:#A9B4BE; --ok:#8FBF9F; --crit:#E0876B;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--navy); color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.55;
  display:flex; align-items:center; justify-content:center; padding:24px;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none;
  background:radial-gradient(1100px 620px at 50% -18%, rgba(167,90,50,.20), transparent 62%);
}
.caja{ position:relative; width:100%; max-width:400px }
.caja.ancha{ max-width:620px }
.logo{ width:168px; height:auto; color:var(--off-white); display:block; margin:0 auto 10px }
.sub{
  text-align:center; font-size:11px; letter-spacing:.20em; text-transform:uppercase;
  color:var(--sand); opacity:.72; margin:0 0 30px;
}
.panel{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:26px 24px 24px; box-shadow:0 22px 60px rgba(0,0,0,.34);
}
h1{ font-size:19px; font-weight:600; margin:0 0 4px; letter-spacing:-.01em }
h2{ font-size:14px; font-weight:600; margin:24px 0 10px; letter-spacing:-.005em }
.nota{ font-size:13.5px; color:var(--ink-2); margin:0 0 20px }
label{ display:block; font-size:12px; letter-spacing:.09em; text-transform:uppercase;
       color:var(--ink-2); margin:0 0 8px }
.campo{ position:relative; margin-bottom:16px }
input[type=password], input[type=text]{
  width:100%; padding:12px 14px; font:inherit; font-size:15px;
  color:var(--ink); background:var(--surface-2);
  border:1px solid var(--line); border-radius:9px; outline:none;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.campo.con-ojo input{ padding-right:82px }
input:focus{ border-color:var(--terracotta); box-shadow:0 0 0 3px rgba(167,90,50,.22) }
.ojo{
  position:absolute; right:7px; bottom:7px;
  background:none; border:0; color:var(--ink-2); cursor:pointer;
  padding:8px; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
}
.ojo:hover{ color:var(--ink) }
button.accion{
  width:100%; margin-top:6px; padding:12px 16px; font:inherit; font-weight:600;
  color:var(--off-white); background:var(--terracotta);
  border:0; border-radius:9px; cursor:pointer;
  transition:filter .16s ease, transform .12s ease;
}
button.accion:hover{ filter:brightness(1.08) }
button.accion:active{ transform:translateY(1px) }
button.accion[disabled]{ opacity:.4; cursor:not-allowed }
.msg{ margin:0 0 18px; padding:11px 13px; border-radius:9px; font-size:13.5px; border:1px solid var(--line) }
.msg.err{ color:#F0BBA8; border-color:rgba(224,135,107,.42); background:rgba(224,135,107,.10) }
.msg.ok{ color:#B9DCC6; border-color:rgba(143,191,159,.40); background:rgba(143,191,159,.10) }
.msg.info{ color:var(--sand); background:rgba(201,195,184,.06) }
.chequeo{ list-style:none; margin:0 0 4px; padding:0; font-size:13.5px }
.chequeo li{ display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--line-soft) }
.chequeo li:last-child{ border-bottom:0 }
.chequeo .est{ flex:0 0 18px; font-weight:700 }
.chequeo .si{ color:var(--ok) } .chequeo .no{ color:var(--crit) } .chequeo .ojo-{ color:var(--sand) }
.chequeo b{ font-weight:600 }
.chequeo small{ display:block; color:var(--ink-2); font-size:12.5px; margin-top:2px }
code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px;
      background:var(--surface-2); padding:2px 6px; border-radius:5px; color:var(--sand) }
a{ color:var(--sand) }
.pie{ text-align:center; font-size:12px; color:var(--ink-2); opacity:.6; margin:22px 0 0 }
.pie a{ color:inherit }