/* sitio/acceso.css — alimentacion-salud
 *
 * Las pantallas del alta segura: entrar, activar, cuentas y mi contraseña.
 * Los colores del medidor son los de la franja: rojo, ámbar y verde. Cuando el
 * proyecto tenga identidad propia, esto se ajusta a `diseno/identidad.md`.
 */
:root { color-scheme: light dark; --tinta:#1a1a1a; --papel:#fff; --borde:#d8d8d8; --apagado:#666; }
@media (prefers-color-scheme: dark) { :root { --tinta:#e8e8e8; --papel:#161616; --borde:#333; --apagado:#999; } }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.6 system-ui,sans-serif; color:var(--tinta); background:var(--papel); }
main { max-width:26rem; margin:0 auto; padding:2.5rem 1.25rem; }
main.ancho { max-width:60rem; }
h1 { font-size:1.5rem; margin:0 0 1.25rem; }
h2, h3 { margin:0; font-size:1.15rem; }
#franja { padding:.6rem 1.25rem; font-weight:700; text-align:center; letter-spacing:.04em; }
#franja.desarrollo { background:#c2410c; color:#fff; }
#franja.peligro    { background:#b91c1c; color:#fff; }
#franja.aciegas    { background:#a16207; color:#fff; }
#franja.produccion { display:none; }
.barra { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.75rem 1.25rem; border-bottom:1px solid var(--borde); font-size:.9rem; }
.barra nav { display:flex; gap:1rem; }
.barra a { color:var(--tinta); }
/* Sin esto, un display:flex de una clase le gana al atributo hidden y el
   formulario "oculto" se ve. */
[hidden] { display:none !important; }
.caja { display:flex; flex-direction:column; gap:1rem; }
.caja.borde { border:1px solid var(--borde); border-radius:.4rem; padding:1rem; }
.campo { display:flex; flex-direction:column; gap:.35rem; font-size:.9rem; }
label { display:flex; flex-direction:column; gap:.3rem; font-size:.9rem; }
label.casilla { flex-direction:row; align-items:center; gap:.5rem; }
input, select { padding:.55rem .7rem; font:inherit; border:1px solid var(--borde); border-radius:.3rem;
  background:var(--papel); color:var(--tinta); }
.fila { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.fila input { flex:1; min-width:0; }
button { padding:.6rem 1rem; font:inherit; font-weight:600; cursor:pointer; border:0; border-radius:.3rem;
  background:var(--tinta); color:var(--papel); }
button:disabled { opacity:.55; cursor:default; }
button.liso { background:none; color:var(--tinta); border:1px solid var(--borde); padding:.3rem .7rem; font-weight:400; }
button.enlace { background:none; color:var(--tinta); border:0; padding:0; font-weight:400; text-decoration:underline; align-self:flex-start; }
.acciones { display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; }
.error { margin:0; padding:.7rem .9rem; border-left:4px solid #b91c1c; background:#b91c1c14; }
.aviso { margin:0; padding:.7rem .9rem; border-left:4px solid #a16207; background:#a1620714; }
.aviso-ok { margin:0; padding:.7rem .9rem; border-left:4px solid #15803d; background:#15803d14; }
.pie { margin:0; font-size:.85rem; color:var(--apagado); }
.medidor { display:flex; flex-direction:column; gap:.3rem; }
.barra-medidor { display:grid; grid-template-columns:repeat(4,1fr); gap:.25rem; }
.barra-medidor span { height:.35rem; border-radius:.2rem; background:var(--borde); }
.barra-medidor span.lleno.nivel-0, .barra-medidor span.lleno.nivel-1 { background:#b91c1c; }
.barra-medidor span.lleno.nivel-2 { background:#a16207; }
.barra-medidor span.lleno.nivel-3, .barra-medidor span.lleno.nivel-4 { background:#15803d; }
.sugerencia, .clave { display:block; margin:0; padding:.6rem .7rem; border:1px solid var(--borde); border-radius:.3rem;
  font-family:ui-monospace,monospace; word-break:break-all; }
.qr { width:12rem; height:12rem; align-self:center; background:#fff; padding:.5rem; }
.codigos { display:grid; grid-template-columns:repeat(2,1fr); gap:.3rem 1rem; margin:0; padding:0; list-style:none;
  font-family:ui-monospace,monospace; }
.lista { width:100%; border-collapse:collapse; font-size:.92rem; }
.lista th { text-align:left; font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--apagado); padding:.4rem .5rem; border-bottom:1px solid var(--borde); }
.lista td { padding:.5rem; border-bottom:1px solid var(--borde); vertical-align:middle; }
.lista tr.apagada td { opacity:.5; }
.vos { font-size:.75rem; color:var(--apagado); }
@media (max-width: 40rem) { .lista th:nth-child(2), .lista td:nth-child(2) { display:none; } }