:root {
  --bg:#0F1315; --surface:#181F22; --surface-2:#202A2E; --line:#2A3538;
  --text:#E6EBEC; --text-dim:#8FA0A5; --text-faint:#819297;
  --accent:#58A0A6;
  --ok:#56B075; --warn:#DBA33F; --down:#D66A48; --idle:#8A989C;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg:#EDF1F0; --surface:#FFFFFF; --surface-2:#F3F6F5; --line:#D5DEDD;
    --text:#15201F; --text-dim:#5B6C6C; --text-faint:#627575;
    --accent:#2E7176;
    --ok:#277A48; --warn:#82601B; --down:#B9482A; --idle:#687679;
  }
}
* { box-sizing:border-box; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Avenir Next","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
.mono { font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
        font-variant-numeric:tabular-nums; font-size:11px; letter-spacing:.05em; }
.dim { color:var(--text-faint); }
a { color:var(--accent); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }

.topbar { display:flex; align-items:center; gap:14px; padding:0 18px; height:52px;
          background:var(--surface); border-bottom:1px solid var(--line); }
.brand { font-weight:700; letter-spacing:.10em; color:var(--accent); }
.crumb { color:var(--text-dim); font-size:13px; }
.topbar .sp { flex:1; }
.pill { display:flex; align-items:center; gap:8px; background:var(--surface-2);
        border:1px solid var(--line); padding:6px 13px; border-radius:20px; }
.salir { font-size:13px; text-decoration:none; }

.stage { max-width:1200px; margin:0 auto; padding:22px 20px 40px; }
h1 { margin:0; font-size:26px; font-weight:600; letter-spacing:-.015em; }
.sub { margin:3px 0 20px; color:var(--text-dim); }

.aviso { background:color-mix(in srgb, var(--warn) 12%, var(--surface));
         border:1px solid color-mix(in srgb, var(--warn) 40%, transparent);
         border-radius:9px; padding:12px 14px; margin:0 0 18px; font-size:13px; }
.aviso ul { margin:8px 0 0; padding-left:20px; }

.zona { margin:0 0 28px; }
.zona h2 { font-size:15px; font-weight:600; margin:0 0 10px;
           display:flex; align-items:baseline; gap:8px; }
.count { font-family:ui-monospace,Menlo,monospace; font-size:11px; color:var(--text-faint); font-weight:400; }

.lista { width:100%; border-collapse:collapse; background:var(--surface);
         border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.lista th { text-align:left; font-size:10px; letter-spacing:.09em; text-transform:uppercase;
            color:var(--text-faint); font-weight:500; padding:9px 12px;
            border-bottom:1px solid var(--line); background:var(--surface-2); }
.lista td { padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top; font-size:13px; }
.lista tr:last-child td { border-bottom:none; }

.dot { width:7px; height:7px; border-radius:50%; display:inline-block; }
.dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)}
.dot.down{background:var(--down)}
.dot.obra, .dot.desconocido { background:none; border:1.5px dashed var(--idle); width:9px; height:9px; }
.s-ok{color:var(--ok)} .s-warn{color:var(--warn)}
.s-down{color:var(--down)} .s-obra,.s-desconocido{color:var(--idle)}

.entrar { text-decoration:none; font-weight:600; font-size:13px; white-space:nowrap; }
.http { color:var(--warn); font-size:11px; margin-left:6px; white-space:nowrap; }
.pie { color:var(--text-faint); font-size:12px; margin-top:24px; }
.ger { color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
       padding:2px 8px; border-radius:11px; font-size:10.5px;
       font-family:ui-monospace,Menlo,monospace; letter-spacing:.06em; text-transform:uppercase; }

@media (max-width:820px) {
  .lista, .lista thead, .lista tbody, .lista tr, .lista td { display:block; }
  .lista thead { display:none; }
  .lista tr { border-bottom:1px solid var(--line); padding:6px 0; }
  .lista td { border:none; padding:4px 12px; }
}

.cabecera { display:flex; align-items:center; gap:14px; margin:3px 0 0; }
.cabecera .sub { margin:0; }
.cabecera .sp { flex:1; }
.vista-toggle { background:var(--surface); border:1px solid var(--line); color:var(--text-dim);
                padding:6px 12px; border-radius:7px; font:inherit; font-size:12.5px; cursor:pointer; }
.vista-toggle:hover { color:var(--text); border-color:var(--accent); }
.oficina { display:flex; flex-direction:column; min-height:520px; margin-top:8px; }
[hidden] { display:none !important; }

/* ── pantalla de login ─────────────────────────────────────────────────────
   Las clases vienen de login.php, que se copió de panel-semar. Ese proyecto
   tenía su propio estilos.css con estas reglas; acá se reescriben sobre los
   mismos tokens que el resto de la oficina para que la primera pantalla no
   se vea de otro sistema. */
.pantalla-login { display:flex; align-items:center; justify-content:center;
                  min-height:100vh; padding:24px; }
.tarjeta-login { background:var(--surface); border:1px solid var(--line);
                 border-radius:14px; padding:34px 32px 28px; max-width:380px;
                 width:100%; text-align:center;
                 box-shadow:0 18px 50px rgba(0,0,0,.28); }
.marca { font-weight:700; font-size:26px; letter-spacing:.10em;
         color:var(--accent); line-height:1; }
.marca small { display:block; margin-top:7px; font-size:12px; font-weight:500;
               letter-spacing:.04em; color:var(--text-dim); }
.texto-login { color:var(--text-dim); font-size:14px; margin:22px 0 18px; }
.boton-google { display:block; text-decoration:none; background:var(--accent);
                color:var(--bg); padding:11px 16px; border-radius:9px;
                font-weight:600; font-size:14px; }
.boton-google:hover { filter:brightness(1.10); }
.pie-login { color:var(--text-faint); font-size:12px; margin:18px 0 0; }
.pie-login strong { color:var(--text-dim); font-weight:600; }
.aviso-error { background:color-mix(in srgb, var(--down) 14%, var(--surface));
               border:1px solid color-mix(in srgb, var(--down) 45%, transparent);
               color:var(--down); border-radius:9px; padding:10px 12px;
               font-size:13px; margin:18px 0 0; text-align:left; }