/* Hallmark · design-system: design.md · macrostructure: app shell (login A1 «Instrumento» + panel de operación) · genre: modern-minimal · theme: custom INRA (papel #eef2f7 · navy #0d3580 · IBM Plex Sans + Mono) · enrichment: none */
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/IBMPlexSans-Regular.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/IBMPlexSans-Medium.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/IBMPlexSans-SemiBold.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/IBMPlexMono-Regular.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/IBMPlexMono-Medium.woff2") format("woff2")}

:root{
  --navy:#0d3580;--tinta:#142a43;--enlace:#1a56db;--panel:#101b2c;--papel:#eef2f7;--blanco:#fff;
  --linea:#d8e0ea;--linea-2:#e7edf5;--texto:#1e293b;--texto-2:#5b6b82;--texto-3:#8a99ae;
  --ok:#1f7a4d;--aviso:#b45309;--critica:#b42318;--mudo:#5b6b82;
  --sans:"IBM Plex Sans",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --sombra:0 1px 0 rgba(20,42,67,.06);
}
*{box-sizing:border-box}
html{font-size:14px}
body{margin:0;background:var(--papel);color:var(--texto);font-family:var(--sans);line-height:1.5}
a{color:var(--enlace);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--enlace);outline-offset:2px}
h1,h2,h3{color:var(--tinta);margin:0 0 .4rem;letter-spacing:-.01em}
h1{font-size:24px;font-weight:600}
h2{font-size:19px;font-weight:600}
h3{font-size:16px;font-weight:600}
p{margin:0 0 .8rem}
.mono,.valor,.meta,td.num,.etq-mono{font-family:var(--mono)}
.etq{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-2);font-weight:500}
.meta{font-size:12px;color:var(--texto-3);letter-spacing:.02em}
.oculto{position:absolute;left:-9999px}

/* ---- Cabecera de la app ---- */
.cab{background:var(--panel);color:#fff;border-bottom:1px solid #1e2c40}
.cab .fila{max-width:1120px;margin:0 auto;padding:0 20px;height:52px;display:flex;align-items:center;gap:22px}
.cab .marca{display:flex;align-items:center;gap:10px;color:#fff}
.cab .marca img{height:24px;width:auto;display:block}
.cab .marca span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#93a2b8}
.cab nav{display:flex;gap:4px;margin-left:8px}
.cab nav a{color:#c6d2e4;padding:6px 10px;border-radius:2px;font-weight:500}
.cab nav a:hover,.cab nav a[aria-current=page]{background:#1a2942;color:#fff;text-decoration:none}
.cab .der{margin-left:auto;display:flex;align-items:center;gap:14px;color:#93a2b8;font-size:13px}
.cab .der form{margin:0}
.cab .der a{color:inherit}
.cab .der button{background:none;border:1px solid #2c4160;color:#c6d2e4;border-radius:2px;padding:5px 10px;font:inherit;font-size:12px;cursor:pointer}
.cab .der button:hover{border-color:#4d7ec7;color:#fff}

/* ---- Layout ---- */
.contenido{max-width:1120px;margin:0 auto;padding:26px 20px 60px}
.miga{font-size:13px;color:var(--texto-2);margin-bottom:14px}
.miga a{color:var(--texto-2)}
.tarjeta{background:var(--blanco);border:1px solid var(--linea);border-radius:3px;box-shadow:var(--sombra)}
.tarjeta .cuerpo{padding:18px 20px}
.tarjeta .cab-tarjeta{padding:12px 20px;border-bottom:1px solid var(--linea-2);display:flex;align-items:center;justify-content:space-between;gap:12px}
.grilla{display:grid;gap:16px}
.grilla.dos{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grilla.lecturas{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.pila>*+*{margin-top:16px}
.angosto{max-width:560px}
.sep-arriba{margin-top:16px}
.sep-arriba-grande{margin-top:28px}
.cabecera-equipo{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start}
.alinear-der{text-align:right}

/* ---- Formularios ---- */
label{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-2);font-weight:500;margin:0 0 6px}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  width:100%;height:38px;border:1px solid var(--linea);border-radius:2px;background:#fff;color:var(--texto);
  font:inherit;padding:0 10px;margin-bottom:14px}
textarea{height:auto;min-height:84px;padding:8px 10px}
input:focus,select:focus,textarea:focus{border-color:var(--enlace);outline:2px solid rgba(26,86,219,.18);outline-offset:0}
input[aria-invalid=true]{border-color:var(--critica)}
input[disabled],select[disabled]{background:var(--papel);color:var(--texto-2)}
.campo-inline{display:flex;gap:10px;align-items:end}
.campo-inline>*{flex:1}
.campo-inline.centrado{align-items:center;gap:14px}
.campo-check{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-size:14px;color:var(--texto);font-weight:400;margin-bottom:14px}
.campo-check.compacto{margin-bottom:6px}
.campo-check input{width:auto;height:auto;margin:0}
.lista-marcas{max-height:160px;overflow:auto;border:1px solid var(--linea);border-radius:2px;padding:8px 10px;margin-bottom:14px}
.boton{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 16px;border-radius:2px;
  border:1px solid var(--navy);background:var(--navy);color:#fff;font:inherit;font-weight:600;cursor:pointer;letter-spacing:.02em}
.boton:hover{background:#0b2c6b;text-decoration:none}
.boton.sec{background:#fff;color:var(--tinta);border-color:var(--linea)}
.boton.sec:hover{border-color:var(--texto-2);background:#fff}
.boton.peligro{background:#fff;color:var(--critica);border-color:#e6b8b3}
.boton.peligro:hover{background:#fdf3f2}
.boton.chico{height:30px;padding:0 10px;font-size:13px;font-weight:500}
.boton.bloque{width:100%}
.boton[disabled]{opacity:.55;cursor:not-allowed}
summary.boton{list-style:none}
summary.boton::-webkit-details-marker{display:none}
details>form{margin-top:12px;max-width:420px}
.ayuda{font-size:12px;color:var(--texto-3);margin:-8px 0 14px}
.ayuda.suelta{margin:10px 0 0}
.aviso-caja{border:1px solid var(--linea);border-left:3px solid var(--aviso);background:#fff;padding:10px 14px;border-radius:2px;margin-bottom:16px}
.error-caja{border:1px solid #e6b8b3;border-left:3px solid var(--critica);background:#fdf3f2;color:#7a1d15;padding:10px 14px;border-radius:2px;margin-bottom:16px}
.ok-caja{border:1px solid #bfe0cd;border-left:3px solid var(--ok);background:#f2faf5;color:#14532d;padding:10px 14px;border-radius:2px;margin-bottom:16px}

/* ---- Tablas ---- */
.tabla-wrap{overflow-x:auto}
table.tabla{width:100%;border-collapse:collapse;font-size:13.5px}
.tabla th{text-align:left;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-2);font-weight:500;
  padding:10px 12px;border-bottom:1px solid var(--linea);white-space:nowrap}
.tabla td{padding:10px 12px;border-bottom:1px solid var(--linea-2);vertical-align:top}
.tabla tr:last-child td{border-bottom:0}
.tabla td.num{text-align:right;white-space:nowrap}
.tabla td.selector{font-family:var(--mono);font-size:12px}
.tabla .acciones{white-space:nowrap;text-align:right}
.tabla .acciones form{display:inline}
.tabla .acciones form+form{margin-left:6px}

/* ---- Estado ---- */
.estado{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:13px;letter-spacing:.02em}
.estado::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor;flex:none}
.estado.normal{color:var(--ok)}
.estado.aviso{color:var(--aviso)}
.estado.critica{color:var(--critica)}
.estado.sin-datos{color:var(--mudo)}
.estado.sin-datos::before{background:none;border:1.5px solid currentColor;width:7px;height:7px}

/* ---- Lecturas ---- */
.lectura{padding:16px 18px}
.lectura .etq{margin-bottom:6px}
.lectura .valor{font-size:32px;font-weight:500;line-height:1.15;color:var(--tinta);letter-spacing:-.01em}
.lectura .valor small{font-size:16px;color:var(--texto-2);margin-left:4px;font-weight:400}
.lectura .meta{margin-top:6px}
.lectura.sin-datos .valor{color:var(--mudo)}

/* ---- Gráfico ---- */
.grafico-controles{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.grafico-controles.pestanas{margin-bottom:18px}
.grafico-controles a{padding:5px 10px;border:1px solid var(--linea);border-radius:2px;color:var(--tinta);font-size:13px}
.grafico-controles a[aria-current=true]{background:var(--tinta);border-color:var(--tinta);color:#fff}
.grafico{padding:10px 8px 6px;min-height:300px}
.uplot,.uplot .u-legend{font-family:var(--mono)!important;font-size:12px!important}
.grafico-vacio{padding:60px 20px;text-align:center;color:var(--texto-3)}

/* ---- Login (A1) ---- */
.login{min-height:100vh;display:grid;grid-template-columns:44fr 56fr}
.login .panel{background:var(--panel);color:#fff;padding:44px 40px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.login .panel .traza{position:absolute;left:0;right:0;bottom:0;height:160px;width:100%;opacity:.3;pointer-events:none}
.login .panel .marca{position:relative}
.login .panel .marca img{width:158px;height:auto;display:block}
.login .panel .razon{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#8ea3c4;margin-top:14px}
.login .panel .filete{width:34px;height:2px;background:#3d68b8;margin-top:16px}
.login .panel .sello{position:relative;display:inline-block;border:1px solid #2c4160;border-radius:2px;padding:7px 12px;font-size:12px;letter-spacing:.13em;color:#c6d2e4;text-transform:uppercase}
.login .formulario{background:#fff;display:flex;align-items:center;justify-content:center;padding:40px 24px}
.login .formulario>div{width:100%;max-width:380px}
.login h1{font-size:22px;margin-bottom:4px}
.login .sub{color:var(--texto-2);margin-bottom:26px}
.login .pie{margin-top:26px;padding-top:12px;border-top:1px solid var(--linea-2);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;color:var(--texto-3)}
.login .enlaces{margin-top:14px;font-size:13px}
@media (max-width:760px){
  .login{grid-template-columns:1fr;min-height:auto}
  .login .panel{padding:22px 20px;flex-direction:row;align-items:center;gap:16px}
  .login .panel .traza,.login .panel .filete{display:none}
  .login .panel .marca img{width:120px}
  .login .panel .razon{display:none}
  .login .panel>div:last-child{margin-left:auto}
  .login .panel .sello{font-size:11px;padding:5px 9px;white-space:nowrap}
  .login .formulario{padding:28px 20px 40px}
}
@media (max-width:420px){
  .login .panel .sello{display:none}
}
html,body{overflow-x:clip}
.qr svg{width:200px;height:200px;display:block;background:#fff;border:1px solid var(--linea);padding:6px;border-radius:2px}
.codigos{font-family:var(--mono);columns:2;font-size:15px;line-height:1.9}

/* ---- Vigilancia (Fase 2) ---- */
.leyenda-marcas{padding:0 14px 10px}
.banda{display:inline-block;width:14px;height:10px;vertical-align:-1px;border:1px solid var(--linea);margin:0 2px 0 6px}
.banda.aviso{background:rgba(180,83,9,.18)}
.banda.critica{background:rgba(180,35,24,.2)}
.banda.nota{background:rgba(91,107,130,.16)}
.detalle-inline{display:inline-block;text-align:left}
.detalle-inline>form{min-width:340px}