/* ==========================================================================
   Atek Ingeniería — Sistema visual del laboratorio de calibración
   --------------------------------------------------------------------------
   Un solo lugar para color, tipografía y componentes. Lo cargan tanto las
   pantallas internas (vía base.html) como las páginas públicas autónomas.

   Tipografía por rol:
     · Space Grotesk  → títulos y cifras: carácter técnico, uso con moderación
     · IBM Plex Sans  → interfaz y texto corrido
     · IBM Plex Mono  → identificadores y valores medidos (series, correlativos,
                        flujos, masas). Se leen como lectura de instrumento y,
                        con cifras tabulares, alinean en columna.
   ========================================================================== */

@font-face{font-family:'Space Grotesk';src:url('/static/fonts/SpaceGrotesk-var.woff2') format('woff2');
           font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('/static/fonts/IBMPlexSans-var.woff2') format('woff2');
           font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/static/fonts/IBMPlexMono-400.woff2') format('woff2');
           font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/static/fonts/IBMPlexMono-500.woff2') format('woff2');
           font-weight:500;font-style:normal;font-display:swap}

:root{
  /* Tinta y superficies */
  --ink:        #0E1526;   /* barra superior, títulos */
  --ink-2:      #1B2540;
  --text:       #131A2B;
  --paper:      #EDF0F5;   /* fondo de la aplicación */
  --surface:    #FFFFFF;   /* tarjetas */
  --surface-2:  #F6F8FB;   /* bloques suaves dentro de tarjetas */
  --rule:       #DCE2EC;   /* hairlines y bordes de control */
  --rule-soft:  #EAEEF4;

  /* Texto secundario */
  --text-2:     #4A5468;
  --muted:      #5F697A;
  --faint:      #707C95;
  --nav-idle:   #9FADC8;
  --nav-dim:    #7F8CA8;

  /* Señal: el azul del instrumento */
  --signal:     #0F62C4;
  --signal-ink: #0A4A97;
  --signal-bg:  #E4EDFA;

  /* Acento Atek */
  --ember:      #CB4E1C;

  /* Rampa de estado */
  --ok:    #0B7A4B;  --ok-bg:    #E3F3EA;
  --warn:  #9A6503;  --warn-bg:  #FDF4DC;
  --alert: #C2352A;  --alert-bg: #FCEAE8;  --alert-line:#F2C4BF;
  --info:  #4C40B8;

  /* Tipografía */
  --font-display: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif;
  --font-sans:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Forma y profundidad */
  --r-sm: 6px;  --r:  9px;  --r-lg: 13px;
  --shadow:    0 1px 2px rgba(14,21,38,.05), 0 4px 14px rgba(14,21,38,.05);
  --shadow-lg: 0 10px 34px rgba(14,21,38,.16);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-sans);background:var(--paper);color:var(--text);
     font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
     font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.01em}
a{color:var(--signal)}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:4px}

/* Cifras e identificadores: lectura de instrumento */
.mono,.cert-id,.serie,code,kbd{font-family:var(--font-mono);font-feature-settings:'tnum' 1}

/* ── Barra superior ───────────────────────────────────────────────────── */
.topbar{background:var(--ink);color:#fff;padding:0 24px;height:54px;display:flex;
        align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;
        box-shadow:0 1px 0 rgba(255,255,255,.06)}
.topbar-left{display:flex;align-items:center;gap:14px;text-decoration:none;
             border-radius:var(--r-sm);padding:4px 6px;margin-left:-6px;transition:background .15s}
.topbar-left:hover{background:rgba(255,255,255,.08)}
/* El símbolo va solo, sin el logotipo: a 26px «INGENIERIA» medía 1,5px y
   quedaba en una mancha gris, y además repetía el nombre que la barra ya
   escribe al lado en tipografía real. El JPG con fondo blanco se queda en
   las pantallas del cliente y en los PDF, donde el papel es blanco. */
.topbar img{height:30px}
.topbar-title{font-family:var(--font-display);font-size:14px;font-weight:600;color:#fff;
              letter-spacing:-.01em}
.topbar-sub{font-family:var(--font-mono);font-size:11px;color:var(--nav-dim);
            letter-spacing:.04em;margin-top:1px}
.nav{display:flex;gap:2px}
.nav a{padding:6px 12px;border-radius:var(--r-sm);color:var(--nav-idle);text-decoration:none;
       font-size:13px;font-weight:500;transition:background .15s,color .15s;white-space:nowrap}
.nav a:hover{background:rgba(255,255,255,.09);color:#fff}
.nav a.active{background:var(--signal);color:#fff}
.topbar-right{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--nav-dim)}
.topbar-right .usuario{color:#fff;font-weight:500}
.topbar-right a{color:var(--nav-dim);text-decoration:none;font-size:12px}
.topbar-right a:hover{color:#fff}

/* Desplegable "Nuevo" */
.nav-drop{position:relative}
.nav-drop .drop-toggle{display:block}
.drop-menu{display:none;position:absolute;top:calc(100% + 7px);left:0;min-width:296px;
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  padding:6px;z-index:300;border:1px solid var(--rule)}
.drop-menu.on{display:block}
/* el último desplegable se alinea a la derecha para no salirse de la ventana */
.nav-drop:last-child .drop-menu{left:auto;right:0}
.drop-label{font-family:var(--font-mono);font-size:11px;font-weight:500;color:var(--faint);
  letter-spacing:.13em;text-transform:uppercase;padding:9px 12px 5px}
.drop-menu a{display:block;padding:9px 12px;border-radius:var(--r-sm);text-decoration:none;color:var(--text)}
.drop-menu a:hover{background:var(--surface-2)}
.drop-menu a b{display:block;font-size:13px;font-weight:600}
.drop-menu a span{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.drop-menu a.drop-main{background:var(--signal-bg)}
.drop-menu a.drop-main b{color:var(--signal-ink)}
.drop-menu a.drop-main:hover{background:#D5E4F7}

/* ── Estructura ───────────────────────────────────────────────────────── */
.container{max-width:1600px;margin:0 auto;padding:22px 24px 48px}
.card{background:var(--surface);border:1px solid var(--rule-soft);border-radius:var(--r-lg);
      box-shadow:var(--shadow);padding:1.4rem 1.5rem;margin-bottom:1rem}

/* FIRMA: la regla de medición. Cada rótulo de sección cierra con una escala
   de ticks, como la de un instrumento. Estructura, no adorno. */
.section-label{display:flex;align-items:center;gap:11px;font-family:var(--font-mono);
               font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.14em;
               text-transform:uppercase;margin:1.5rem 0 .75rem}
.section-label::after{content:'';flex:1;height:8px;align-self:flex-end;
  background-image:repeating-linear-gradient(to right,var(--rule) 0 1px,transparent 1px 7px);
  background-position:bottom;background-repeat:repeat-x}
.section-label:first-child{margin-top:0}

/* ── Formularios ──────────────────────────────────────────────────────── */
.form-grid{display:grid;gap:13px;margin-bottom:.75rem}
.form-grid.two{grid-template-columns:1fr 1fr}
.form-grid.three{grid-template-columns:1fr 1fr 1fr}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-group label{font-size:12px;font-weight:600;color:var(--text-2);letter-spacing:.01em}
/* Las casillas y los radios quedan fuera: esta regla está pensada para campos
   de texto, y `width:100%` con `padding:9px 12px` los infla hasta correr el
   texto que va al lado. Cada pantalla que los usaba tenía que acordarse de
   escribir `width:auto`, y la que se olvidaba salía descuadrada — pasó en el
   selector de uso del contrato de arriendo. Excluirlos acá lo arregla de una
   vez y para las que vengan. */
input:not([type=checkbox]):not([type=radio]),select,textarea{
  padding:9px 12px;border:1px solid var(--rule);border-radius:var(--r-sm);
  font-size:13px;font-family:inherit;background:var(--surface);color:var(--text);
  outline:none;transition:border-color .15s,box-shadow .15s;width:100%}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{
  border-color:var(--signal);
  box-shadow:0 0 0 3px rgba(15,98,196,.13)}
/* El foco de una casilla se ve igual, pero como contorno y no como campo. */
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{
  outline:2px solid var(--signal);outline-offset:2px}
input[type=checkbox],input[type=radio]{accent-color:var(--signal);cursor:pointer}
input::placeholder,textarea::placeholder{color:var(--faint)}
textarea{resize:vertical;min-height:58px;line-height:1.55}
input[type=date],input[type=number]{font-family:var(--font-mono);font-size:12.5px}

/* ── Botones ──────────────────────────────────────────────────────────── */
.btn{padding:8px 17px;border-radius:var(--r-sm);font-size:13px;font-weight:600;
     cursor:pointer;transition:background .15s,border-color .15s,transform .1s;
     border:1px solid var(--rule);font-family:inherit;text-decoration:none;
     display:inline-block;line-height:1.5}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--signal);color:#fff;border-color:var(--signal)}
.btn-primary:hover{background:var(--signal-ink);border-color:var(--signal-ink)}
.btn-secondary{background:var(--surface);color:var(--text)}
.btn-secondary:hover{background:var(--surface-2);border-color:var(--rule)}
.btn-danger{background:var(--surface);color:var(--alert);border-color:var(--alert-line)}
.btn-danger:hover{background:var(--alert-bg)}
.btn-sm{padding:5px 12px;font-size:12px}
.btn-row{display:flex;gap:8px;justify-content:flex-end;margin-top:1.4rem}

/* ── Valores medidos ──────────────────────────────────────────────────── */
.vals-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:.75rem}
.vals-card{background:var(--surface-2);border-radius:var(--r);border:1px solid var(--rule-soft);
           padding:.95rem 1.05rem}
.vals-card-title{font-family:var(--font-mono);font-size:11px;font-weight:500;color:var(--muted);
                 letter-spacing:.12em;text-transform:uppercase;margin-bottom:.7rem}
.vals-inner{display:grid;grid-template-columns:1fr 1fr;gap:9px}

/* Tabla de mediciones */
.meas-table{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:.5rem}
.meas-table th{text-align:left;padding:7px 10px;font-family:var(--font-mono);font-size:11px;
               font-weight:500;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;
               border-bottom:1px solid var(--rule-soft);background:var(--surface-2)}
.meas-table td{padding:4px;border-bottom:1px solid var(--rule-soft)}
.meas-table td input{padding:5px 8px;font-size:12px;font-family:var(--font-mono)}
.err-ok{color:var(--ok);font-weight:600;font-family:var(--font-mono)}
.err-bad{color:var(--alert);font-weight:600;font-family:var(--font-mono)}
.err-cell{font-family:var(--font-mono);font-size:12px;padding:5px 8px;text-align:right;color:var(--faint)}
.del-btn{background:none;border:none;cursor:pointer;color:var(--faint);padding:2px 6px;
         font-size:14px;border-radius:4px}
.del-btn:hover{color:var(--alert);background:var(--alert-bg)}

/* ── Gráficos ─────────────────────────────────────────────────────────── */
.chart-wrap{border:1px solid var(--rule-soft);border-radius:var(--r);padding:1rem;
            margin-top:.75rem;background:var(--surface)}
.chart-canvas-wrap{position:relative;height:220px}
.chart-empty{height:100px;display:flex;align-items:center;justify-content:center;
             color:var(--faint);font-size:12px;border:1px dashed var(--rule);border-radius:var(--r-sm)}

/* ── Firma del documento ──────────────────────────────────────────────── */
.firma-card{background:var(--surface-2);border:1px solid var(--rule-soft);border-radius:var(--r);
            padding:.95rem 1.05rem;margin-top:.5rem}
.firma-preview{margin-top:.8rem;padding:.8rem 1rem;border:1px dashed var(--rule);
               border-radius:var(--r-sm);background:var(--surface);font-size:12px}
.firma-preview .fp-name{font-family:var(--font-display);font-weight:700;color:var(--ink)}
.firma-preview .fp-sub{color:var(--muted);margin-top:2px}

/* ── Métricas ─────────────────────────────────────────────────────────── */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:1.25rem}
.stat-card{background:var(--surface);border-radius:var(--r);border:1px solid var(--rule-soft);
           padding:.95rem 1.05rem;box-shadow:var(--shadow)}
.stat-card .sv{font-family:var(--font-display);font-size:25px;font-weight:700;color:var(--ink);
               line-height:1.1;letter-spacing:-.02em}
.stat-card .sl{font-size:12px;color:var(--muted);margin-top:3px}

/* ── Búsqueda y tablas ────────────────────────────────────────────────── */
.search-bar{display:flex;gap:8px;margin-bottom:1rem;align-items:center;flex-wrap:wrap}
.search-bar input{max-width:250px}
.search-bar .spacer{flex:1}
.reg-table-wrap{overflow-x:auto;width:100%}
.data-table{width:100%;border-collapse:collapse;font-size:13px}
.data-table th{text-align:left;padding:9px 12px;font-family:var(--font-mono);font-size:11px;
               font-weight:500;color:var(--muted);letter-spacing:.09em;text-transform:uppercase;
               border-bottom:1px solid var(--rule);white-space:nowrap;background:var(--surface-2)}
.data-table td{padding:9px 12px;border-bottom:1px solid var(--rule-soft);vertical-align:middle}
.data-table tr:hover td{background:var(--surface-2)}
.cert-id{font-family:var(--font-mono);font-weight:500;color:var(--signal);letter-spacing:-.01em}
.vencido-row td{opacity:.55}
.action-btn{background:none;border:none;cursor:pointer;color:var(--faint);padding:3px 6px;
            border-radius:var(--r-sm);font-size:15px;margin:0 1px;text-decoration:none;
            display:inline-block;transition:background .15s,color .15s}
.action-btn:hover{color:var(--ink);background:var(--rule-soft)}
/* Enlace de acción junto a un rótulo: «✎ corregir» al lado de un dato. No es
   un botón —no compite con la acción principal de la tarjeta— pero tiene que
   verse tocable, o el dato parece de sólo lectura. */
.lnk-mini{background:none;border:0;cursor:pointer;color:var(--signal);
  font-family:var(--font-sans);font-size:11.5px;padding:1px 4px;width:auto;
  border-radius:var(--r-sm);line-height:1.4}
.lnk-mini:hover{background:var(--signal-bg);text-decoration:underline}
.lnk-mini:focus-visible{outline:2px solid var(--signal);outline-offset:1px}

/* Casillas de accesorio. Las comparten el ingreso de la OT y la ficha, que
   corrige lo que llegó de verdad al revisar el equipo. */
.acc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.acc-item{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--surface-2);
          border:1px solid var(--rule-soft);border-radius:7px;font-size:12px;cursor:pointer}
.acc-item input{width:auto;margin:0}
.acc-item.on{background:var(--signal-bg);border-color:var(--signal);color:var(--signal);font-weight:600}

/* ── Estado ───────────────────────────────────────────────────────────── */
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:600;
       white-space:nowrap}
.badge-ok{background:var(--ok-bg);color:var(--ok)}
.badge-warn{background:var(--warn-bg);color:var(--warn)}
.badge-danger{background:var(--alert-bg);color:var(--alert)}
.cert-num-badge{font-family:var(--font-mono);font-size:13px;font-weight:500;color:var(--signal-ink);
                background:var(--signal-bg);padding:4px 11px;border-radius:var(--r-sm);
                letter-spacing:-.01em}

/* ── Importador AirQ ──────────────────────────────────────────────────── */
.airq-importer{background:var(--surface-2);border:1px solid var(--rule-soft);
               border-radius:var(--r);padding:1rem;margin-bottom:.75rem}
.airq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:.75rem}
.airq-panel{background:var(--surface);border-radius:var(--r-sm);border:1px solid var(--rule-soft);padding:.85rem}
.airq-panel.airq-ref{border-top:3px solid var(--signal)}
.airq-panel.airq-equipo{border-top:3px solid var(--ember)}
.airq-panel-title{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:2px;
                  display:flex;align-items:center;gap:6px}
.airq-panel-sub{font-size:12px;color:var(--muted);margin-bottom:8px}
.airq-raw{width:100%;font-size:12px;font-family:var(--font-mono);padding:7px 9px;
  border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--surface-2);
  color:var(--text);resize:vertical;min-height:90px;outline:none}
.airq-raw:focus{border-color:var(--signal);background:var(--surface)}
.airq-col-row{display:flex;align-items:center;gap:6px;margin-top:8px}
.airq-col-row label{font-size:12px;font-weight:600;color:var(--text-2);white-space:nowrap}
.airq-col-row select{font-size:12px;padding:4px 8px;max-width:120px}
.airq-status{font-size:12px;margin-top:6px;padding:3px 8px;border-radius:5px;display:none}
.airq-status.ok{background:var(--ok-bg);color:var(--ok);display:block}
.airq-status.err{background:var(--alert-bg);color:var(--alert);display:block}
.airq-btn-row{display:flex;align-items:center;gap:8px}
.airq-dot{display:inline-block;width:9px;height:9px;border-radius:50%}
.airq-dot.ref{background:var(--signal)}
.airq-dot.equipo{background:var(--ember)}

/* ── Aviso flotante ───────────────────────────────────────────────────── */
.toast{position:fixed;bottom:22px;right:22px;background:var(--ink);color:#fff;
       padding:11px 18px;border-radius:var(--r);font-size:13px;box-shadow:var(--shadow-lg);
       opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;
       pointer-events:none;z-index:999;max-width:min(420px,90vw)}
.toast.show{opacity:1;transform:translateY(0)}

/* ── Roles tipográficos en componentes de pantalla ────────────────────────
   Las vistas definen su propio layout; aquí sólo se les asigna el rol de
   tipografía para que cifras e identificadores se lean igual en todo el
   sistema. Ninguna de estas reglas toca tamaño ni color. */
.kpi-v,.emb-n,.mini b,.doc-txt b,.estado-pill,.sv{
  font-family:var(--font-display);letter-spacing:-.02em}
.act-meta,.tl-meta,.emb-nom,.kv b,.dup-meta,.doc-txt span{
  font-family:var(--font-mono)}
.kv b{font-weight:500;font-size:12.5px}
.emb-nom{font-size:12px;letter-spacing:-.01em}

/* ── Respeto por el usuario ───────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
@media(max-width:1180px){
  .topbar{padding:0 14px}
  .nav a{padding:6px 9px;font-size:12.5px}
  .stats-row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .topbar{height:auto;flex-wrap:wrap;padding:8px 14px;gap:8px;position:static}
  .nav{flex-wrap:wrap;order:3;width:100%}
  .container{padding:16px 14px 40px}
  .form-grid.two,.form-grid.three,.vals-grid,.airq-grid{grid-template-columns:1fr}
  .card{padding:1.1rem 1rem}
}
@media print{
  .topbar,.toast,.btn,.action-btn{display:none !important}
  body{background:#fff}
  .card{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
}