@font-face { font-family:"Schibsted"; src:url("/recursos/schibsted-grotesk.woff2") format("woff2"); font-weight:400 900; font-display:swap; }
:root { --cenit:#1c3f6e; --cielo:#8fb3d6; --bruma:#eef1ee; --tinta:#0f1e33; --cobalto:#2147c9; --sol:#e8c25a;
        --suave:#4a5a72; --linea:#d3dad8; --mal:#b3261e; --ok:#1d7a4f; --aviso:#9a6a00; }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.55 "Schibsted",system-ui,sans-serif; color:var(--tinta); background:var(--bruma); }
a { color:var(--cobalto); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline:3px solid var(--sol); outline-offset:2px; }

/* Pantallas de acceso: tarjeta sobre el cielo */
body.cielo { min-height:100vh; display:grid; place-items:center; padding:24px 16px;
  background:linear-gradient(180deg, var(--cenit) 0%, #3f6ea3 40%, var(--cielo) 75%, var(--bruma) 100%); }
.tarjeta { width:100%; max-width:420px; background:#fff; border-radius:18px; padding:34px 32px 26px; box-shadow:0 24px 60px rgba(15,30,51,.28); }
.tarjeta.ancha { max-width:520px; }
.logo { display:flex; flex-direction:column; align-items:center; gap:8px; margin:0 auto 24px; text-decoration:none; }
.logo .simbolo { width:96px; height:auto; }
.logo .nombre { width:150px; height:auto; }
h1 { font-size:27px; letter-spacing:-.025em; line-height:1.15; margin:0 0 6px; }
p.ayuda { color:var(--suave); margin:0 0 22px; }
label { display:block; font-weight:600; font-size:14px; margin:0 0 6px; }
input[type=text], input[type=password], select { width:100%; font:inherit; font-size:17px; padding:11px 13px; border:1.5px solid var(--linea);
  border-radius:10px; margin-bottom:16px; background:#fbfcfb; color:var(--tinta); }
input:focus, select:focus { border-color:var(--cobalto); }
input.codigo { font-size:28px; letter-spacing:.4em; text-align:center; padding-left:.4em; }
button { width:100%; font:inherit; font-weight:700; font-size:16px; padding:13px; border:0; border-radius:999px; background:var(--tinta); color:#fff; cursor:pointer; }
button:hover { background:#1d3354; }
button.secundario { background:#fff; color:var(--tinta); border:1.5px solid var(--linea); }
button.peligro { background:var(--mal); }
.error { background:#fdeceb; color:var(--mal); border-radius:10px; padding:10px 14px; font-size:15px; margin:0 0 16px; }
.bien { background:#e8f4ee; color:var(--ok); border-radius:10px; padding:10px 14px; font-size:15px; margin:0 0 16px; }
.pie { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:20px; font-size:14px; color:var(--suave); }
.qr { display:flex; justify-content:center; margin:6px 0 10px; }
.qr svg { width:200px; height:200px; }
.secreto { font-family:ui-monospace,monospace; font-size:13px; word-break:break-all; background:var(--bruma); padding:8px 10px; border-radius:8px; margin:0 0 18px; }
details { margin:0 0 16px; font-size:14px; color:var(--suave); }

/* Portal */
header.barra { background:var(--tinta); }
header.barra .ancho { display:flex; align-items:center; justify-content:space-between; gap:16px; height:68px; }
.marca { display:flex; align-items:center; gap:10px; text-decoration:none; }
.marca .simbolo { height:36px; width:auto; }
.marca .nombre { height:19px; width:auto; margin-top:3px; }
nav.menu { display:flex; gap:6px; flex-wrap:wrap; }
nav.menu a, nav.menu button { color:#dfe7f2; text-decoration:none; font-size:15px; padding:7px 12px; border-radius:999px; background:none; width:auto; font-weight:500; }
nav.menu a[aria-current=page] { background:rgba(255,255,255,.14); color:#fff; }
nav.menu form { margin:0; }
.ancho { max-width:1040px; margin:0 auto; padding:0 20px; }
main.portal { padding:40px 0 72px; }
main.portal h1 { font-size:32px; margin-bottom:4px; }
.sub { color:var(--suave); margin:0 0 28px; }
.caja { background:#fff; border-radius:14px; padding:22px; margin-bottom:18px; border:1px solid var(--linea); overflow-x:auto; }
.caja h2 { font-size:18px; margin:0 0 14px; }
table { width:100%; border-collapse:collapse; font-size:15px; }
th { text-align:left; font-weight:600; color:var(--suave); font-size:13px; padding:6px 12px 6px 0; }
td { padding:10px 12px 10px 0; border-top:1px solid var(--linea); vertical-align:top; }
.estado { display:inline-flex; align-items:center; gap:7px; font-weight:600; }
.estado::before { content:""; width:9px; height:9px; border-radius:50%; background:currentColor; }
.ok { color:var(--ok); } .mal { color:var(--mal); } .aviso { color:var(--aviso); } .gris { color:var(--suave); }
.rejilla { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:18px; }
.enlace { font-family:ui-monospace,monospace; font-size:13px; word-break:break-all; background:var(--bruma); padding:10px 12px; border-radius:8px; }
.acciones { display:flex; gap:8px; flex-wrap:wrap; }
.acciones form { margin:0; }
.acciones button { width:auto; padding:7px 14px; font-size:14px; white-space:nowrap; }
td .acciones { flex-wrap:nowrap; }
small { color:var(--suave); }
@media (max-width:620px) { header.barra .ancho { height:auto; padding-top:12px; padding-bottom:12px; flex-wrap:wrap; } }