/* mat.css · componentes del Módulo de Materiales (opción B de la guía de TI: HTML + CSS listos para pasar a JSX + module.css)
Cada bloque .mat-* corresponde a un componente React sugerido (comentado al inicio de cada bloque). */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--mat-gris-50);color:var(--mat-texto);font:var(--mat-fs-base)/1.5 var(--mat-font);-webkit-font-smoothing:antialiased}
a{color:var(--mat-azul)}
code,.mat-code{font-family:var(--mat-mono);font-weight:700;font-variant-numeric:tabular-nums;font-size:.95em}
h1,h2,h3{margin:0;color:var(--mat-azul);line-height:1.2}
h1{font-size:var(--mat-fs-titulo);font-weight:700}
h2{font-size:17px;font-weight:700}
h3{font-size:15px;font-weight:700;color:var(--mat-texto)}
.mat-meta{font-size:var(--mat-fs-meta);color:var(--mat-texto-2)}
.mat-sub{color:var(--mat-texto-2);font-size:13px;margin:2px 0 12px}
/* */
.mat-top{position:sticky;top:0;z-index:20;background:var(--mat-navy);color:#fff;display:flex;align-items:center;gap:14px;padding:0 18px;min-height:56px}
.mat-top .brand{font-weight:700;font-size:15px;white-space:nowrap}
.mat-top .brand span{display:block;font-weight:400;font-size:var(--mat-fs-meta);color:#C9D7EA}
.mat-top .grow{flex:1}
.mat-top .sesion{font-size:12.5px;color:#C9D7EA;text-align:right;line-height:1.3}
.mat-top .sesion b{color:#fff}
.mat-netind{background:var(--mat-crit-fill);color:#fff;font:700 12px var(--mat-font);padding:5px 10px;border-radius:999px;white-space:nowrap}
.mat-netind[hidden]{display:none}
.mat-netind.sync{background:var(--mat-warn-fill)}
/* navegación del kit */
.mat-nav{display:flex;gap:6px;flex-wrap:wrap;padding:10px 18px;background:#fff;border-bottom:1px solid var(--mat-gris-200)}
.mat-nav a{font-size:12.5px;font-weight:700;color:var(--mat-azul);text-decoration:none;padding:6px 10px;border-radius:999px;border:1px solid var(--mat-gris-200)}
.mat-nav a.active,.mat-nav a:hover{background:var(--mat-azul);color:#fff;border-color:var(--mat-azul)}
.mat-wrap{max-width:1240px;margin:0 auto;padding:18px}
.mat-grid2{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px}
@media (max-width:860px){.mat-grid2{grid-template-columns:1fr}}
/* */
.mat-panel{background:#fff;border:1px solid var(--mat-gris-200);border-radius:var(--mat-radius);padding:16px 18px;margin:0 0 16px;box-shadow:var(--mat-shadow)}
.mat-panel h2{margin-bottom:2px}
.mat-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 10px}
.mat-row label{font-size:12.5px;color:var(--mat-texto-2);font-weight:700}
/* · campo de pistoleo: prominente, foco automático, Enter = fin de lectura, se limpia solo, destello por resultado */
.mat-scan{display:flex;gap:10px;align-items:stretch;margin:0 0 10px}
.mat-scan input{flex:1;min-width:0;min-height:var(--mat-touch);font:700 var(--mat-fs-scan)/1.2 var(--mat-mono);letter-spacing:.04em;text-transform:uppercase;padding:8px 14px;border:2px solid var(--mat-azul);border-radius:var(--mat-radius);color:var(--mat-texto);background:#fff;transition:background .15s,border-color .15s}
.mat-scan input::placeholder{font:400 15px var(--mat-font);text-transform:none;letter-spacing:0;color:var(--mat-texto-2)}
.mat-scan input:focus{outline:3px solid var(--mat-celeste);outline-offset:1px}
.mat-scan input.ok{background:var(--mat-ok-fill);border-color:var(--mat-ok-fill);color:#fff}
.mat-scan input.crit{background:var(--mat-crit-fill);border-color:var(--mat-crit-fill);color:#fff}
/* aviso a pantalla completa arriba (verde 0,9 s / rojo 1,8 s) */
.mat-flash{position:fixed;left:0;right:0;top:0;z-index:60;padding:12px 16px;text-align:center;font:700 16px var(--mat-font);color:#fff;transform:translateY(-100%);transition:transform .15s;pointer-events:none}
.mat-flash.ok{background:var(--mat-ok-fill)} .mat-flash.crit{background:var(--mat-crit-fill)} .mat-flash.on{transform:none}
.mat-flash code{color:#fff;font-size:18px;background:rgba(255,255,255,.18);padding:1px 6px;border-radius:4px}
/* ≥ 44 px */
.mat-btn{min-height:var(--mat-touch);font:700 14px var(--mat-font);border:1px solid var(--mat-azul);background:var(--mat-azul);color:#fff;border-radius:var(--mat-radius);padding:9px 16px;cursor:pointer;white-space:nowrap}
.mat-btn:hover{filter:brightness(1.1)} .mat-btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.mat-btn.sec{background:#fff;color:var(--mat-azul)}
.mat-btn.ghost{background:transparent;border-color:var(--mat-gris-200);color:var(--mat-texto)}
.mat-btn.crit{background:var(--mat-crit);border-color:var(--mat-crit)} .mat-btn.warn{background:var(--mat-warn);border-color:var(--mat-warn)}
.mat-btn.sm{min-height:34px;font-size:12.5px;padding:5px 11px}
.mat-chip{display:inline-block;min-height:32px;padding:5px 11px;border-radius:999px;border:1px solid var(--mat-gris-200);background:#fff;color:var(--mat-texto);font:12.5px var(--mat-mono);cursor:pointer}
.mat-chip:hover{border-color:var(--mat-celeste)}
/* */
.mat-field{display:flex;flex-direction:column;gap:4px;min-width:160px}
.mat-field label{font-size:12.5px;color:var(--mat-texto-2);font-weight:700}
.mat-field input,.mat-field select,.mat-field textarea{min-height:var(--mat-touch);font:14px var(--mat-font);color:var(--mat-texto);background:#fff;border:1px solid var(--mat-gris-200);border-radius:var(--mat-radius);padding:8px 10px}
.mat-field input:focus,.mat-field select:focus{outline:2px solid var(--mat-celeste);outline-offset:1px}
/* */
.mat-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:0 0 12px}
.mat-kpi{background:var(--mat-gris-100);border:1px solid var(--mat-gris-200);border-radius:var(--mat-radius);padding:10px 12px}
.mat-kpi .v{font:700 var(--mat-fs-kpi)/1.1 var(--mat-font);color:var(--mat-azul);font-variant-numeric:tabular-nums}
.mat-kpi .l{font-size:var(--mat-fs-meta);color:var(--mat-texto-2);text-transform:uppercase;letter-spacing:.05em;font-weight:700;margin-top:2px}
.mat-kpi.ok .v{color:var(--mat-ok)} .mat-kpi.warn .v{color:var(--mat-warn)} .mat-kpi.crit .v{color:var(--mat-crit)}
.mat-bar{height:8px;background:var(--mat-gris-100);border-radius:4px;overflow:hidden;margin:6px 0 12px} .mat-bar i{display:block;height:100%;background:var(--mat-celeste)}
/* semáforo */
.mat-tag{display:inline-block;padding:2px 8px;border-radius:4px;font:700 11px var(--mat-mono);letter-spacing:.02em;white-space:nowrap}
.mat-tag.ok{background:var(--mat-ok-bg);color:var(--mat-ok)} .mat-tag.crit{background:var(--mat-crit-bg);color:var(--mat-crit)} .mat-tag.warn{background:var(--mat-warn-bg);color:var(--mat-warn)}
.mat-tag.info{background:var(--mat-info-bg);color:var(--mat-info)} .mat-tag.pend{background:var(--mat-pend-bg);color:var(--mat-pend)}
/* */
.mat-tw{overflow-x:auto;border:1px solid var(--mat-gris-200);border-radius:var(--mat-radius);margin:0 0 14px;background:#fff}
.mat-table{border-collapse:collapse;width:100%;font-size:var(--mat-fs-tabla);font-variant-numeric:tabular-nums}
.mat-table th{background:var(--mat-azul);color:#fff;text-align:left;padding:8px 10px;font-weight:700;font-size:12.5px;white-space:nowrap;position:sticky;top:0}
.mat-table td{padding:7px 10px;border-top:1px solid var(--mat-gris-200);vertical-align:top}
.mat-table tbody tr:nth-child(even) td{background:var(--mat-gris-50)}
.mat-table tr.sel td{background:var(--mat-info-bg)}
/* lecturas aceptadas / pendientes / rechazadas */
.mat-list{border:1px solid var(--mat-gris-200);border-radius:var(--mat-radius);max-height:320px;overflow:auto;background:#fff;font-size:13px}
.mat-list .it{display:flex;gap:10px;align-items:center;padding:7px 10px;border-top:1px solid var(--mat-gris-200)} .mat-list .it:first-child{border-top:0}
.mat-list .it .m{color:var(--mat-texto-2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mat-list .it.ok{background:var(--mat-ok-bg)} .mat-list .it.crit{background:var(--mat-crit-bg)} .mat-list .it.warn{background:var(--mat-warn-bg)}
.mat-lbl{font-size:var(--mat-fs-meta);color:var(--mat-texto-2);text-transform:uppercase;letter-spacing:.05em;font-weight:700;margin:10px 0 4px}
.mat-log{font:12px/1.5 var(--mat-mono);background:var(--mat-navy);color:#DCE8F5;border-radius:var(--mat-radius);padding:8px 10px;max-height:160px;overflow:auto;white-space:pre-wrap}
/* */
.mat-callout{border-left:4px solid var(--mat-celeste);background:var(--mat-info-bg);padding:10px 12px;border-radius:0 var(--mat-radius) var(--mat-radius) 0;margin:0 0 12px;font-size:13.5px}
.mat-callout.ok{border-color:var(--mat-ok-fill);background:var(--mat-ok-bg)} .mat-callout.crit{border-color:var(--mat-crit-fill);background:var(--mat-crit-bg)} .mat-callout.warn{border-color:var(--mat-warn-fill);background:var(--mat-warn-bg)}
/* */
.mat-tabs{display:flex;gap:4px;border-bottom:1px solid var(--mat-gris-200);margin:0 0 12px;flex-wrap:wrap}
.mat-tabs a,.mat-tabs button{background:transparent;border:0;border-bottom:3px solid transparent;padding:9px 14px;font:700 13.5px var(--mat-font);color:var(--mat-texto-2);cursor:pointer;text-decoration:none;min-height:var(--mat-touch)}
.mat-tabs [aria-selected="true"]{color:var(--mat-azul);border-bottom-color:var(--mat-celeste)}
/* historial */
.mat-hist{border-left:2px solid var(--mat-gris-200);margin:6px 0 12px 6px;padding-left:12px}
.mat-hist div{position:relative;padding:3px 0;font-size:13px} .mat-hist div::before{content:"";position:absolute;left:-17px;top:11px;width:8px;height:8px;border-radius:50%;background:var(--mat-celeste)}
.mat-hist time{font:12px var(--mat-mono);color:var(--mat-texto-2);margin-right:8px}
.mat-kv{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;font-size:13.5px;margin:0 0 12px} .mat-kv dt{color:var(--mat-texto-2);font-weight:700} .mat-kv dd{margin:0}
/* Documentos carta (actas y vouchers): vista en pantalla y @page letter */
.mat-doc{background:#fff;color:#222;border:1px solid var(--mat-gris-200);border-radius:var(--mat-radius);padding:22px 26px;margin:12px auto;max-width:816px;font-family:var(--mat-font);font-size:13px}
.mat-doc .hd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border-bottom:2px solid var(--mat-azul);padding-bottom:8px;margin-bottom:12px}
.mat-doc .hd h1{font-size:18px} .mat-doc .ref{font:12px var(--mat-mono);color:#555}
.mat-doc .brand{font-weight:700;color:var(--mat-azul);font-size:14px} .mat-doc .brand small{display:block;font-weight:400;color:#555;font-size:11px}
.mat-doc table{border-collapse:collapse;width:100%;font-size:12.5px;margin:8px 0 12px} .mat-doc th{background:var(--mat-azul);color:#fff;text-align:left;padding:5px 7px;font-size:11.5px} .mat-doc td{padding:4px 7px;border-top:1px solid #ddd;vertical-align:top}
.mat-doc td.chk{white-space:nowrap} .mat-doc .casilla{display:inline-block;width:11px;height:11px;border:1px solid #333;vertical-align:middle;margin-right:3px} .mat-doc .linea{display:inline-block;min-width:80px;border-bottom:1px solid #333}
.mat-doc .firmas{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px;font-size:12px} .mat-doc .firmas div{border-top:1px solid #333;padding-top:4px}
.mat-doc .ft{font-size:11px;color:#555;border-top:1px solid #ddd;margin-top:16px;padding-top:6px;display:flex;justify-content:space-between}
.mat-doc .qr{width:64px;height:64px;border:1px solid #333;display:grid;place-items:center;font:10px var(--mat-mono);color:#555}
@media print{@page{size:letter;margin:18mm 16mm}body{background:#fff}.mat-top,.mat-nav,.noprint{display:none!important}.mat-doc{border:0;margin:0;max-width:none;padding:0}.mat-wrap{padding:0}}