/* Estilos compartidos por las páginas auxiliares (login, setup, upload,
   usuarios). Reutiliza la paleta e identidad visual del dashboard principal
   (Barlow Semi Condensed + los azules/verde reales de Ipsos, extraídos de
   ipsos.com) para que se sientan parte de la misma aplicación.

   La tipografía Barlow Semi Condensed NO se carga acá con @import: un
   @import dentro de un CSS obliga al navegador a descargar y parsear este
   archivo primero para recién ahí descubrir que necesita pedir otra hoja
   de estilos (una cadena de requests extra, siempre bloqueante). Cada
   página que usa este archivo la carga en su <head> con <link
   rel="preconnect"> + <link rel="stylesheet">, igual que ya hacía
   dashboard.php — así el navegador la pide en paralelo desde el arranque
   y, al ser la misma URL en todas las páginas, el CSS y las fuentes
   quedan cacheados entre una página y otra. */

:root{
  --ipsos:#121B5A;
  --primary:#2F469C;
  --primary-d:#273980;
  --primary-soft:#F0F2F8;
  --primary-line:#DADEED;
  --aqua:#14A19E;
  --ink:#121B5A;
  --ink2:#46545E;
  --muted:#71808A;
  --line:#DDE4E8;
  --bg:#F4F7F8;
  --ok:#1E8E5A;
  --bad:#C0392B;
  --warn:#9A6400;
}
*{box-sizing:border-box;}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg);
  font-family:'Barlow Semi Condensed',system-ui,sans-serif;
  color:var(--ink);
}
.card{
  width:100%;
  max-width:420px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:32px;
  box-shadow:0 8px 30px rgba(30,42,50,.08);
}
.card.wide{width:90%;max-width:1800px;}
h1{
  font-size:22px;
  font-weight:800;
  margin:0 0 4px;
  color:var(--ipsos);
}
p.sub{
  margin:0 0 24px;
  color:var(--muted);
  font-size:14px;
}
label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--ink2);
  margin:14px 0 6px;
}
input[type=text],input[type=password],input[type=file],select{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  font-family:inherit;
  font-size:14px;
  background:#fff;
}
input:focus,select:focus{outline:2px solid var(--primary-line);border-color:var(--primary);}
.pw-wrap{position:relative;}
.pw-wrap input{padding-right:40px;}
.pw-toggle{
  position:absolute;
  top:50%;
  right:4px;
  transform:translateY(-50%);
  margin:0;
  width:32px;
  padding:0;
  border:0;
  background:none;
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  cursor:pointer;
}
.pw-toggle:hover{background:var(--primary-soft);color:var(--primary);}
.pw-toggle:focus-visible{outline:2px solid var(--primary-line);outline-offset:1px;}
.pw-toggle svg{display:block;}
button,.btn{
  margin-top:20px;
  width:100%;
  padding:11px 16px;
  border:none;
  border-radius:8px;
  background:var(--primary);
  color:#fff;
  font-family:inherit;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  text-align:center;
  text-decoration:none;
  display:inline-block;
}
button:hover,.btn:hover{background:var(--primary-d);}
button.secondary,.btn.secondary{background:#fff;color:var(--primary);border:1px solid var(--primary-line);}
.msg{
  margin:0 0 16px;
  padding:10px 12px;
  border-radius:8px;
  font-size:13px;
}
.msg.bad{background:#FBEAE8;color:var(--bad);border:1px solid #F1C4BE;}
.msg.ok{background:#E7F5EE;color:var(--ok);border:1px solid #BFE3D0;}
.msg.warn{background:#FBF2E1;color:var(--warn);border:1px solid #F0DDAF;}
.msg.warn form{margin-top:4px;}
.msg.warn .btn.danger,.msg.warn button.danger{margin-top:0;width:auto;}
button.danger,.btn.danger{background:var(--bad);}
button.danger:hover,.btn.danger:hover{background:#a3301f;}
table{width:100%;border-collapse:collapse;margin-top:12px;font-size:13px;}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);}
th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em;}
.top-link{display:block;text-align:center;margin-top:14px;font-size:13px;color:var(--primary);text-decoration:none;}
.top-link:hover{text-decoration:underline;}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:20px;
}
.brand .logo{
  height:38px;width:auto;max-width:44px;object-fit:contain;display:block;
}
.badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  background:var(--primary-soft);
  color:var(--primary-d);
}