/* ============================================================
   RESORTES HÉRCULES v2.0 — Industrial Steel Dark Theme
   ============================================================ */
:root {
  --steel-900:#0d1117;--steel-800:#161b22;--steel-700:#1c2330;
  --steel-600:#21262d;--steel-500:#30363d;--steel-400:#484f58;
  --steel-300:#6e7681;--steel-200:#b1bac4;--steel-100:#e6edf3;
  --accent:#f7931a;--accent-dim:#c4740e;
  --ok:#3fb950;--ok-dim:#238636;
  --fail:#f85149;--fail-dim:#b91c1c;
  --warn:#d29922;--info:#388bfd;
  --font-display:'Bebas Neue',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --font-body:'IBM Plex Sans',sans-serif;
  --radius:6px;--shadow:0 4px 24px rgba(0,0,0,.5);
  /* Variables semánticas de texto — sobreescritas en tema claro */
  --text-primary:var(--steel-100);    /* texto principal */
  --text-label:var(--steel-300);      /* labels, títulos de tarjeta */
  --text-muted:var(--steel-400);      /* subtextos, n=, máx(dim...) */
  --bg-base:var(--steel-900);
  --bg-card:var(--steel-800);
  --bg-deep:var(--steel-700);
  --border:var(--steel-500);
}

/* ── TEMA CLARO ── */
[data-theme="light"] {
  --steel-900:#f0f2f5;
  --steel-800:#ffffff;
  --steel-700:#f5f6f8;
  --steel-600:#e8eaed;
  --steel-500:#c8ccd1;
  --steel-400:#424a53;    /* gris oscuro — subtextos legibles */
  --steel-300:#1f2328;    /* muy oscuro — labels y títulos */
  --steel-200:#0d1117;    /* casi negro — texto principal */
  --steel-100:#0d1117;    /* texto máximo contraste */
  --accent:#d97706;
  --accent-dim:#b45309;
  --ok:#1a7f37;--ok-dim:#166d2f;
  --fail:#cf222e;--fail-dim:#a4161a;
  --warn:#7a5200;--info:#0550ae;  /* warn e info más saturados */
  --shadow:0 4px 24px rgba(0,0,0,.12);
  /* Variables semánticas sobreescritas para tema claro */
  --text-primary:#0d1117;   /* casi negro — máximo contraste */
  --text-label:#1f2328;     /* muy oscuro — labels y títulos */
  --text-muted:#424a53;     /* gris oscuro — subtextos */
  --bg-base:#f0f2f5;
  --bg-card:#ffffff;
  --bg-deep:#f5f6f8;
  --border:#d0d3d8;
}
[data-theme="light"] body{background:#f0f2f5;color:#1a1f24;}
[data-theme="light"] .app-header{background:#ffffff;border-bottom:2px solid var(--accent);box-shadow:0 2px 12px rgba(0,0,0,.08);}
[data-theme="light"] .nav-btn.active{background:var(--accent);color:#fff;}
[data-theme="light"] .modal-box{background:#ffffff;}
[data-theme="light"] .form-input,
[data-theme="light"] .form-select{background:#ffffff;color:#1a1f24;}
[data-theme="light"] .input-muestra{background:#fff!important;color:#1a1f24!important;}
[data-theme="light"] .input-muestra.fuera{background:rgba(207,34,46,.07)!important;}
[data-theme="light"] .data-table tbody tr:hover{background:#eef0f3;}
[data-theme="light"] .table-wrap{background:#ffffff;}
[data-theme="light"] .chart-card{background:#ffffff;border-color:#d0d3d8;}
[data-theme="light"] .stat-detail-card{background:#ffffff;}
[data-theme="light"] .stat-detail-head{
  background:#1f2328;
  color:#f7931a;
  border-bottom:none;
}
[data-theme="light"] .plc-panel{background:#ffffff;}
[data-theme="light"] .plc-drop-zone{background:#f5f6f8;}
[data-theme="light"] .toast{background:#ffffff;box-shadow:0 4px 16px rgba(0,0,0,.12);}
[data-theme="light"] ::-webkit-scrollbar-track{background:#e8eaed;}
[data-theme="light"] ::-webkit-scrollbar-thumb{background:#9198a1;}

/* Labels de KPI cards (FLECHA LIBRE, CPK MÍN. etc.) */
[data-theme="light"] .kpi-label,
[data-theme="light"] .stat-kpi-title,
[data-theme="light"] .stat-kpi-sub,
[data-theme="light"] .chart-title,
[data-theme="light"] .cpk-hist-label,
[data-theme="light"] .muestreo-label,
[data-theme="light"] .tamano-label,
[data-theme="light"] .var-label,
[data-theme="light"] .s-label,
[data-theme="light"] .plc-drop-text,
[data-theme="light"] .plc-panel-sub,
[data-theme="light"] .plc-progress-label,
[data-theme="light"] .form-group label,
[data-theme="light"] .spec-item label { color:#3a4149; }

/* Subtextos secundarios que deben ser legibles */
[data-theme="light"] .tab-btn { color:#3a4149; border-color:#c8ccd1; }
[data-theme="light"] .btn-ghost { color:#3a4149; border-color:#c8ccd1; }
[data-theme="light"] .btn-ghost:hover { color:#1a1f24; border-color:#3a4149; }
[data-theme="light"] .btn-icon { color:#3a4149; border-color:#c8ccd1; }
[data-theme="light"] .btn-close { color:#3a4149; border-color:#c8ccd1; }
[data-theme="light"] .btn-secondary { background:#e8eaed; color:#1a1f24; border-color:#c8ccd1; }

/* Tabla de datos */
[data-theme="light"] .data-table th { background:#eef0f3; color:#3a4149; border-color:#d0d3d8; }
[data-theme="light"] .data-table td { color:#1a1f24; border-color:#e8eaed; }
[data-theme="light"] .loading-row { color:#6e7681; }

/* Banner/barra de info de orden */
[data-theme="light"] .orden-info-bar { background:#eef0f3; border-color:#d0d3d8; color:#1a1f24; }
[data-theme="light"] .muestreo-banner { background:#eef0f3; border-color:#d0d3d8; color:#1a1f24; }
[data-theme="light"] .ref-preview { background:#eef0f3; border-color:#d0d3d8; color:#1a1f24; }

/* Banner de advertencia global (NO CUMPLE) */
[data-theme="light"] .banner-fail { background:rgba(207,34,46,.09); border-color:rgba(207,34,46,.4); color:#8a0f16; }
[data-theme="light"] .banner-fail strong { color:#cf222e; }

/* Textos de muestreo en análisis estadístico */
[data-theme="light"] .muestreo-badge { background:#e8eaed; color:#1a1f24; border-color:#c8ccd1; }
[data-theme="light"] .muestreo-badge .badge-tipo { color:#3a4149; }

/* CPK values */
[data-theme="light"] .cpk-na { color:#6e7681; }

/* Placeholder vacío */
[data-theme="light"] .stat-placeholder,
[data-theme="light"] .cpk-hist-placeholder { color:#6e7681; }

/* Título de gráfica CPK con valor (ej: "CAPACIDAD DE CARGA CPK: -340.7552") */
[data-theme="light"] .chart-title .cpk-val { font-weight:700; }

/* Textos dentro de tarjetas de análisis */
[data-theme="light"] .stat-kpi-val { color:#1a1f24; }
[data-theme="light"] .progreso-circle-sub { color:#6e7681; }

/* Estado sin iniciar */
[data-theme="light"] .estado-sin-iniciar { background:rgba(110,118,129,.1); color:#3a4149; border-color:#c8ccd1; }

/* Modal headers y footers */
[data-theme="light"] .modal-header { background:#f5f6f8; border-color:#d0d3d8; }
[data-theme="light"] .modal-footer { background:#f5f6f8; border-color:#d0d3d8; }

/* Tabla del informe estadístico */
[data-theme="light"] .iest-tabla th { background:#eef0f3; color:#3a4149; border-color:#d0d3d8; }
[data-theme="light"] .iest-tabla td { color:#1a1f24; border-color:#e8eaed; }
[data-theme="light"] .iest-tabla td.iest-row-label { background:#f5f6f8; color:#3a4149; }

/* ── BOTÓN TOGGLE TEMA ── */
.theme-toggle{
  background:transparent;
  border:1px solid var(--steel-500);
  color:var(--steel-300);
  width:36px;height:36px;
  border-radius:50%;
  cursor:pointer;
  font-size:1rem;
  display:flex;align-items:center;justify-content:center;
  transition:all .25s;
  flex-shrink:0;
}
.theme-toggle:hover{
  border-color:var(--accent);
  color:var(--accent);
  transform:rotate(20deg);
}
.theme-toggle .icon-dark{ display:inline; }
.theme-toggle .icon-light{ display:none; }
[data-theme="light"] .theme-toggle .icon-dark{ display:none; }
[data-theme="light"] .theme-toggle .icon-light{ display:inline; }
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:15px;}
body{background:var(--steel-900);color:var(--steel-100);font-family:var(--font-body);min-height:100vh;overflow-x:hidden;}

/* HEADER */
.app-header{display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;height:60px;background:var(--steel-800);border-bottom:2px solid var(--accent);position:sticky;top:0;z-index:100;box-shadow:0 2px 20px rgba(247,147,26,.15);}
.header-brand{display:flex;align-items:center;gap:.8rem;}
.brand-icon{font-size:1.8rem;color:var(--accent);animation:spin-slow 12s linear infinite;display:inline-block;}
@keyframes spin-slow{to{transform:rotate(360deg);}}
.brand-text{display:flex;flex-direction:column;line-height:1.2;}
.brand-name{font-family:var(--font-display);font-size:1.4rem;letter-spacing:3px;color:var(--accent);}
.brand-sub{font-size:.65rem;letter-spacing:2px;text-transform:uppercase;color:var(--steel-300);font-family:var(--font-mono);}
.app-nav{display:flex;gap:.4rem;}
.nav-btn{background:transparent;border:1px solid var(--steel-500);color:var(--steel-200);padding:.4rem .9rem;border-radius:var(--radius);font-family:var(--font-body);font-size:.82rem;cursor:pointer;transition:all .2s;}
.nav-btn:hover{border-color:var(--accent);color:var(--accent);}
.nav-btn.active{background:var(--accent);border-color:var(--accent);color:#000;font-weight:600;}

/* MAIN */
.app-main{padding:1.5rem;max-width:1600px;margin:0 auto;}
.view{display:none;}
.view.active{display:block;animation:fadeIn .3s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1}}
.view-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem;}
.view-title{font-family:var(--font-display);font-size:1.6rem;letter-spacing:2px;}

/* KPIs */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-bottom:1.2rem;}
.kpi-card{background:var(--steel-700);border:1px solid var(--steel-500);border-radius:var(--radius);padding:1rem 1.2rem;display:flex;flex-direction:column;gap:.2rem;}
.kpi-card.kpi-ok{border-left:3px solid var(--ok);}
.kpi-card.kpi-fail{border-left:3px solid var(--fail);}
.kpi-value{font-family:var(--font-display);font-size:2.2rem;color:var(--accent);line-height:1;}
.kpi-card.kpi-ok .kpi-value{color:var(--ok);}
.kpi-card.kpi-fail .kpi-value{color:var(--fail);}
.kpi-label{font-family:var(--font-mono);font-size:.68rem;color:var(--text-label);text-transform:uppercase;letter-spacing:1px;}

/* TABLA */
.table-wrap{background:var(--steel-800);border:1px solid var(--steel-500);border-radius:var(--radius);overflow:auto;}
.data-table{width:100%;border-collapse:collapse;font-size:.82rem;}
.data-table th{background:var(--steel-700);color:var(--steel-300);font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:1px;padding:.7rem .8rem;text-align:left;border-bottom:1px solid var(--steel-500);white-space:nowrap;}
.data-table td{padding:.65rem .8rem;border-bottom:1px solid var(--steel-600);vertical-align:middle;color:var(--steel-200);}
.data-table tr:last-child td{border-bottom:none;}
.data-table tbody tr:hover{background:var(--steel-700);}
.loading-row{text-align:center;color:var(--steel-400);padding:2rem!important;}

/* BADGES */
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:20px;font-size:.72rem;font-family:var(--font-mono);font-weight:600;}
.badge-ok{background:rgba(63,185,80,.15);color:var(--ok);border:1px solid var(--ok-dim);}
.badge-fail{background:rgba(248,81,73,.15);color:var(--fail);border:1px solid var(--fail-dim);}
.badge-warn{background:rgba(210,153,34,.15);color:var(--warn);}
.badge-info{background:rgba(56,139,253,.15);color:var(--info);}
.badge-reducido{background:rgba(63,185,80,.15);color:var(--ok);}
.badge-normal{background:rgba(210,153,34,.15);color:var(--warn);}
.badge-lote{background:rgba(248,81,73,.15);color:var(--fail);}
.cpk-val{font-family:var(--font-mono);font-weight:600;font-size:.85rem;}
.cpk-ok{color:var(--ok);}
.cpk-fail{color:var(--fail);}
.cpk-na{color:var(--text-muted);}

/* BOTONES */
.btn{display:inline-flex;align-items:center;gap:.35rem;padding:.5rem 1.1rem;border-radius:var(--radius);font-family:var(--font-body);font-size:.85rem;font-weight:500;cursor:pointer;border:none;transition:all .18s;}
.btn-primary{background:var(--accent);color:#000;}
.btn-primary:hover{background:#e8870a;transform:translateY(-1px);}
.btn-secondary{background:var(--steel-600);color:var(--steel-100);border:1px solid var(--steel-400);}
.btn-secondary:hover{background:var(--steel-500);}
.btn-ghost{background:transparent;color:var(--steel-300);border:1px solid var(--steel-500);}
.btn-ghost:hover{color:var(--steel-100);border-color:var(--steel-300);}
.btn-danger{background:var(--fail);color:#fff;}
.btn-danger:hover{background:var(--fail-dim);}
.btn-accent{background:var(--info);color:#fff;}
.btn-accent:hover{background:#2070d0;}
.btn-sm{padding:.3rem .7rem;font-size:.78rem;}
.btn-icon{background:transparent;border:1px solid var(--steel-500);color:var(--steel-300);padding:.25rem .55rem;border-radius:var(--radius);cursor:pointer;font-size:.78rem;transition:all .15s;}
.btn-icon:hover{color:var(--accent);border-color:var(--accent);}
.btn-close{background:transparent;border:1px solid var(--steel-500);color:var(--steel-300);width:28px;height:28px;border-radius:var(--radius);cursor:pointer;font-size:.95rem;transition:all .15s;}
.btn-close:hover{color:var(--fail);border-color:var(--fail);}

/* MODALES */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:400;display:none;align-items:center;justify-content:center;padding:1rem;}
.modal.open{display:flex;}
.modal-box{background:var(--steel-800);border:1px solid var(--steel-500);border-top:3px solid var(--accent);border-radius:var(--radius);width:100%;max-width:560px;max-height:92vh;overflow-y:auto;animation:slideUp .25s ease;}
.modal-wide{max-width:860px;}
@keyframes slideUp{from{transform:translateY(16px);opacity:0}}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.4rem;border-bottom:1px solid var(--steel-600);}
.modal-header h3{font-family:var(--font-display);font-size:1.2rem;letter-spacing:1px;}
.modal-body{padding:1.4rem;}
.modal-footer{display:flex;justify-content:flex-end;gap:.5rem;padding:.9rem 1.4rem;border-top:1px solid var(--steel-600);}
.modal-two-col{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;}

/* FORMS */
.form-group{margin-bottom:.85rem;}
.form-group label{display:block;font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:1px;color:var(--steel-300);margin-bottom:.35rem;}
.form-input,.form-select{width:100%;background:var(--steel-700);border:1px solid var(--steel-500);border-radius:var(--radius);color:var(--steel-100);padding:.55rem .85rem;font-family:var(--font-body);font-size:.88rem;outline:none;transition:border-color .18s;}
.form-input:focus,.form-select:focus{border-color:var(--accent);}
textarea.form-input{resize:vertical;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;}
.form-row-3{grid-template-columns:1fr 1fr 1fr;}
.section-label{font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);margin-bottom:.7rem;padding-bottom:.4rem;border-bottom:1px solid var(--steel-600);}

/* ESPECIFICACIONES REFERENCIA */
.spec-section{background:var(--steel-700);border:1px solid var(--steel-600);border-radius:var(--radius);padding:1rem;margin-bottom:.8rem;}
.spec-title{font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);margin-bottom:.8rem;}
.spec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.6rem;}
.spec-item label{display:block;font-family:var(--font-mono);font-size:.65rem;color:var(--steel-300);margin-bottom:.25rem;text-transform:uppercase;}
.spec-input{font-family:var(--font-mono)!important;}
.limites-preview{background:var(--steel-700);border:1px solid var(--steel-600);border-left:3px solid var(--info);border-radius:var(--radius);padding:.8rem 1rem;font-size:.78rem;font-family:var(--font-mono);display:none;}
.lim-row{display:flex;justify-content:space-between;align-items:center;padding:.2rem 0;border-bottom:1px solid var(--steel-600);}
.lim-row:last-child{border-bottom:none;}
.lim-nombre{color:var(--steel-200);}
.lim-vals{display:flex;gap:.8rem;}
.lim-lsl{color:var(--fail);}
.lim-nom{color:var(--info);}
.lim-usl{color:var(--ok);}

/* REF PREVIEW EN ORDEN */
.ref-search-row{display:flex;gap:.4rem;}
.ref-preview{background:var(--steel-700);border:1px solid var(--steel-500);border-left:3px solid var(--info);border-radius:var(--radius);padding:.7rem 1rem;margin-bottom:.8rem;font-size:.8rem;color:var(--steel-200);font-family:var(--font-mono);line-height:1.8;}

/* CPK HISTÓRICO PANEL */
.cpk-historico{background:var(--steel-700);border:1px solid var(--steel-600);border-radius:var(--radius);padding:1rem;min-height:180px;margin-bottom:.8rem;}
.cpk-hist-placeholder{color:var(--steel-400);font-size:.83rem;text-align:center;padding:2rem 0;}
.cpk-hist-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;}
.cpk-hist-item{background:var(--steel-600);border-radius:var(--radius);padding:.5rem .7rem;}
.cpk-hist-label{font-family:var(--font-mono);font-size:.65rem;color:var(--text-label);text-transform:uppercase;}
.cpk-hist-val{font-family:var(--font-display);font-size:1.4rem;line-height:1;}

/* MUESTREO */
.muestreo-result{margin-top:.5rem;}
.muestreo-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.5rem;}
.muestreo-item{background:var(--steel-700);border-radius:var(--radius);padding:.6rem .9rem;}
.muestreo-label{font-family:var(--font-mono);font-size:.65rem;color:var(--text-label);text-transform:uppercase;}
.muestreo-val{font-size:.9rem;font-weight:600;margin-top:.2rem;}
.tamano-muestra-box{background:var(--steel-700);border:2px solid var(--accent);border-radius:var(--radius);padding:.8rem 1rem;text-align:center;}
.tamano-num{font-family:var(--font-display);font-size:2.5rem;color:var(--accent);}
.tamano-label{font-family:var(--font-mono);font-size:.7rem;color:var(--text-label);text-transform:uppercase;}

/* CAPTURA MUESTRAS */
.orden-info-bar{background:var(--steel-700);border:1px solid var(--steel-500);border-left:3px solid var(--accent);border-radius:var(--radius);padding:.7rem 1rem;margin-bottom:.8rem;font-size:.82rem;font-family:var(--font-mono);display:flex;gap:2rem;flex-wrap:wrap;color:var(--steel-200);}
.orden-info-bar span strong{color:var(--accent);}
.muestras-toolbar{display:flex;gap:.5rem;flex-wrap:wrap;}
.input-muestra{width:90px!important;padding:.3rem .5rem!important;font-size:.8rem!important;text-align:right;}
.input-muestra.fuera{border-color:var(--fail)!important;background:rgba(248,81,73,.08)!important;}
.input-muestra.ok{border-color:var(--ok-dim)!important;}
.num-muestra-cell{font-family:var(--font-mono);font-size:.8rem;font-weight:600;color:var(--accent);text-align:center;}
.cumple-cell{text-align:center;}

/* ESTADÍSTICAS */
.stat-placeholder{text-align:center;padding:4rem 2rem;color:var(--steel-400);}
.placeholder-icon{font-size:3.5rem;margin-bottom:1rem;}
.stat-controls{display:flex;gap:.7rem;align-items:center;}
.stat-controls .form-select{width:300px;}
.resultado-banner{padding:1rem 1.5rem;border-radius:var(--radius);margin-bottom:.8rem;font-size:1rem;font-weight:600;font-family:var(--font-display);letter-spacing:2px;display:flex;align-items:center;gap:.8rem;}
.banner-ok{background:rgba(63,185,80,.12);border:1px solid var(--ok);color:var(--ok);}
.banner-fail{background:rgba(248,81,73,.12);border:1px solid var(--fail);color:var(--fail);}
.muestreo-banner{background:var(--steel-700);border:1px solid var(--steel-500);border-radius:var(--radius);padding:.8rem 1.2rem;margin-bottom:1rem;display:flex;gap:2rem;flex-wrap:wrap;font-family:var(--font-mono);font-size:.8rem;color:var(--steel-200);}
.muestreo-banner strong{color:var(--accent);}
.stat-kpi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.6rem;margin-bottom:1rem;}
.stat-kpi-card{background:var(--steel-700);border:1px solid var(--steel-500);border-radius:var(--radius);padding:.8rem .9rem;}
.stat-kpi-title{font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:.4rem;}
.stat-kpi-val{font-family:var(--font-display);font-size:1.6rem;line-height:1;margin-bottom:.2rem;}
.stat-kpi-sub{font-size:.68rem;color:var(--text-label);font-family:var(--font-mono);}

/* TABS */
.tab-bar{display:flex;gap:.5rem;margin-bottom:1rem;border-bottom:1px solid var(--steel-600);padding-bottom:.5rem;}
.tab-btn{background:transparent;border:1px solid var(--steel-500);color:var(--steel-300);padding:.45rem 1.1rem;border-radius:var(--radius);font-family:var(--font-body);font-size:.85rem;cursor:pointer;transition:all .18s;}
.tab-btn:hover{color:var(--accent);border-color:var(--accent);}
.tab-btn.active{background:var(--accent);border-color:var(--accent);color:#000;font-weight:600;}
.tab-panel{display:none;}
.tab-panel.active{display:block;}
.charts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:.8rem;margin-bottom:1rem;}
.chart-card{background:var(--steel-800);border:1px solid var(--steel-500);border-radius:var(--radius);padding:1rem;}
.chart-title{font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-label);margin-bottom:.6rem;}
.chart-limits{margin-top:.5rem;font-family:var(--font-mono);font-size:.7rem;display:flex;gap:1rem;flex-wrap:wrap;}
.stat-detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.7rem;margin-bottom:1rem;}
.stat-detail-card{background:var(--steel-800);border:1px solid var(--steel-500);border-radius:var(--radius);overflow:hidden;}
.stat-detail-head{background:var(--steel-700);padding:.55rem .9rem;font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);}
.stat-detail-body{padding:.6rem .9rem;}
.stat-row{display:flex;justify-content:space-between;padding:.25rem 0;border-bottom:1px solid var(--steel-700);font-size:.78rem;}
.stat-row:last-child{border-bottom:none;}
.s-label{color:var(--text-muted);font-family:var(--font-mono);font-size:.7rem;}
.s-val{font-weight:600;font-family:var(--font-mono);}
.s-val.ok{color:var(--ok);}
.s-val.fail{color:var(--fail);}

/* CATÁLOGOS */
.catalogos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;}
.catalogo-card{background:var(--steel-800);border:1px solid var(--steel-500);border-radius:var(--radius);overflow:hidden;}
.cat-header{background:var(--steel-700);padding:.7rem 1rem;font-family:var(--font-display);font-size:1.1rem;letter-spacing:1px;color:var(--accent);border-bottom:1px solid var(--steel-600);}
.cat-body{padding:.5rem;min-height:120px;max-height:200px;overflow-y:auto;}
.cat-item{display:flex;align-items:center;justify-content:space-between;padding:.4rem .6rem;border-radius:4px;font-size:.83rem;}
.cat-item:hover{background:var(--steel-700);}
.cat-footer{padding:.6rem;border-top:1px solid var(--steel-600);display:flex;gap:.4rem;}
.cat-footer .form-input{font-size:.82rem;padding:.4rem .6rem;}

/* TOAST */
#toast-container{position:fixed;bottom:1.2rem;right:1.2rem;z-index:999;display:flex;flex-direction:column;gap:.4rem;}
.toast{background:var(--steel-700);border:1px solid var(--steel-500);border-left:4px solid var(--accent);border-radius:var(--radius);padding:.7rem 1rem;font-size:.84rem;min-width:240px;animation:toastIn .25s ease;box-shadow:var(--shadow);}
.toast-ok{border-left-color:var(--ok);}
.toast-fail{border-left-color:var(--fail);}
.toast-warn{border-left-color:var(--warn);}
@keyframes toastIn{from{transform:translateX(30px);opacity:0}}

/* SCROLLBAR */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:var(--steel-800);}
::-webkit-scrollbar-thumb{background:var(--steel-500);border-radius:3px;}

/* RESPONSIVE */
@media(max-width:1100px){.stat-kpi-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:800px){
  .kpi-row{grid-template-columns:1fr 1fr;}
  .modal-two-col{grid-template-columns:1fr;}
  .app-nav .nav-btn{font-size:.72rem;padding:.35rem .6rem;}
  .charts-grid{grid-template-columns:1fr;}
}
@media(max-width:500px){
  .app-header{padding:0 .8rem;}
  .brand-name{font-size:1.1rem;}
  .brand-sub{display:none;}
  .app-main{padding:.8rem;}
}

/* ── PANEL IMPORTACIÓN PLC ── */
.plc-panel{background:var(--steel-800);border:1px solid var(--steel-500);border-top:3px solid var(--accent);border-radius:var(--radius);padding:1rem 1.2rem;margin-bottom:1rem;}
.plc-panel-header{margin-bottom:.8rem;}
.plc-panel-title{font-family:var(--font-display);font-size:1.1rem;letter-spacing:2px;color:var(--accent);}
.plc-panel-sub{font-size:.78rem;color:var(--steel-300);font-family:var(--font-mono);margin-top:.2rem;}
.plc-drop-zone{border:2px dashed var(--steel-400);border-radius:var(--radius);padding:1.2rem 1rem;text-align:center;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:.6rem;background:var(--steel-700);}
.plc-drop-zone:hover,.plc-drop-zone.drag-over{border-color:var(--accent);background:rgba(247,147,26,.06);}
.plc-drop-icon{font-size:2rem;}
.plc-drop-text{font-size:.82rem;color:var(--steel-300);line-height:1.5;}
.plc-progress-bar{background:var(--steel-600);border-radius:20px;height:6px;overflow:hidden;margin-top:.8rem;}
.plc-progress-fill{height:100%;background:var(--accent);border-radius:20px;transition:width .3s;width:0%;}
.plc-progress-label{font-family:var(--font-mono);font-size:.75rem;color:var(--steel-300);text-align:center;margin-top:.4rem;}
.plc-result{margin-top:.8rem;padding:.7rem 1rem;border-radius:var(--radius);font-family:var(--font-mono);font-size:.82rem;border:1px solid;}
.plc-result.ok{background:rgba(63,185,80,.1);border-color:var(--ok);color:var(--ok);}
.plc-result.warn{background:rgba(210,153,34,.1);border-color:var(--warn);color:var(--warn);}
.plc-result.fail{background:rgba(248,81,73,.1);border-color:var(--fail);color:var(--fail);}
.plc-result-detail{color:var(--steel-200);font-size:.78rem;margin-top:.4rem;line-height:1.7;}

/* ── PLC IMPORT PANEL ───────────────────────────────────── */
.plc-panel{background:var(--steel-800);border:1px solid var(--steel-500);border-top:3px solid var(--info);border-radius:var(--radius);margin-bottom:1rem;overflow:hidden;}
.plc-panel-header{padding:.9rem 1.2rem;display:flex;align-items:flex-start;gap:.8rem;}
.plc-panel-title{font-family:var(--font-display);font-size:1.15rem;letter-spacing:1.5px;color:var(--info);}
.plc-panel-sub{font-size:.78rem;color:var(--steel-400);margin-top:.2rem;}
.plc-drop-zone{border:2px dashed var(--steel-400);border-radius:var(--radius);padding:1.8rem 1.2rem;text-align:center;cursor:pointer;transition:all .2s;background:var(--steel-700);margin:0 1.2rem 1rem;display:flex;flex-direction:column;align-items:center;gap:.4rem;}
.plc-drop-zone:hover,.plc-drop-zone.drag-over{border-color:var(--info);background:rgba(56,139,253,.06);}
.plc-drop-icon{font-size:2.2rem;}
.plc-drop-text{font-size:.85rem;color:var(--steel-300);}
.plc-progress-bar{height:6px;background:var(--steel-600);border-radius:3px;margin:0 1.2rem .5rem;overflow:hidden;}
.plc-progress-fill{height:100%;background:var(--info);border-radius:3px;transition:width .3s;width:0%;}
.plc-progress-label{text-align:center;font-family:var(--font-mono);font-size:.75rem;color:var(--steel-300);padding-bottom:.8rem;}
.plc-result{margin:0 1.2rem 1rem;padding:.8rem 1rem;border-radius:var(--radius);font-family:var(--font-mono);font-size:.8rem;}
.plc-result.ok{background:rgba(63,185,80,.1);border:1px solid var(--ok-dim);color:var(--ok);}
.plc-result.fail{background:rgba(248,81,73,.1);border:1px solid var(--fail-dim);color:var(--fail);}
.plc-result.warn{background:rgba(210,153,34,.1);border:1px solid var(--warn);color:var(--warn);}
/* ============================================================
   RESORTES HÉRCULES v3.0 — Adiciones CSS para flujo secuencial
   ============================================================ */

/* ── PROGRESO SECUENCIAL DEL OPERARIO ── */
.progreso-panel {
  background: var(--steel-800);
  border: 1px solid var(--steel-500);
  border-top: 3px solid var(--ok);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.progreso-circle {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}
.progreso-circle svg {
  transform: rotate(-90deg);
}
.progreso-circle-bg { fill: none; stroke: var(--steel-600); stroke-width: 6; }
.progreso-circle-fill { fill: none; stroke: var(--ok); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.progreso-circle-text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--ok);
  line-height: 1;
}
.progreso-circle-sub { font-size: .52rem; color: var(--steel-400); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .5px; }
.progreso-info { flex: 1; min-width: 140px; }
.progreso-siguiente {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 1px;
  color: var(--accent);
  margin-bottom: .3rem;
}
.progreso-detalle {
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--steel-300);
  line-height: 1.6;
}
.progreso-completado {
  border-top-color: var(--ok);
  animation: pulse-ok .6s ease 2;
}
@keyframes pulse-ok {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 18px rgba(63,185,80,.3); }
}

/* ── MODAL PROCESAMIENTO MUESTRA ── */
.modal-muestra { max-width: 680px; }
.muestra-header-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--steel-700);
  border-radius: var(--radius);
  padding: .8rem 1rem;
  margin-bottom: 1rem;
}
.muestra-num-badge {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--accent);
  background: var(--steel-600);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: .2rem .8rem;
  line-height: 1;
}
.muestra-ref-info {
  flex: 1;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--steel-300);
  line-height: 1.6;
}
.muestra-ref-info strong { color: var(--info); }
.vars-grid-muestras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin-bottom: 1rem;
}
.var-input-group {
  background: var(--steel-700);
  border: 1px solid var(--steel-500);
  border-radius: var(--radius);
  padding: .6rem .75rem;
  transition: border-color .2s;
}
.var-input-group.from-plc {
  border-color: var(--info);
  background: rgba(56,139,253,.05);
}
.var-input-group.fuera-spec {
  border-color: var(--fail) !important;
  background: rgba(248,81,73,.07) !important;
}
.var-input-group.dentro-spec {
  border-color: var(--ok-dim);
}
.var-label {
  font-family: var(--font-mono);
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--steel-300);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .35rem;
}
.var-label .plc-tag {
  background: rgba(56,139,253,.2);
  color: var(--info);
  border-radius: 3px;
  padding: 0 .35rem;
  font-size: .58rem;
}
/* ── Campo calculado automáticamente (equivale al marco ROJO en VB) ── */
.var-input-group.calc-auto {
  border-color: #f97316;
  background: rgba(249,115,22,.06);
  border-left: 3px solid #f97316;
}
.var-input-group.calc-auto.fuera-spec {
  border-color: var(--fail) !important;
  background: rgba(248,81,73,.07) !important;
}
.var-input-group.calc-auto.dentro-spec {
  border-color: #10b981;
  border-left-color: #f97316;
}
.var-label .calc-tag {
  background: rgba(249,115,22,.2);
  color: #f97316;
  border-radius: 3px;
  padding: 0 .35rem;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .5px;
}
.var-input-inner.is-calc {
  color: #fb923c;
  font-weight: 600;
  cursor: default;
}
.var-input-inner.is-calc:hover {
  background: rgba(249,115,22,.05);
  border-radius: 3px;
}
.calc-hint {
  font-family: var(--font-mono);
  font-size: .58rem;
  color: #fb923c;
  margin-top: .2rem;
  opacity: .8;
}
.calc-hint.pending {
  color: var(--steel-400);
  font-style: italic;
}

/* ── Leyenda del modal de muestras ── */
.campos-leyenda {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .4rem .6rem;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--steel-600);
  border-radius: var(--radius);
  margin-bottom: .6rem;
}
.leyenda-item {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .5px;
  padding: .15rem .5rem;
  border-radius: 3px;
}
.leyenda-manual {
  background: rgba(56,139,253,.12);
  color: #60a5fa;
  border: 1px solid rgba(56,139,253,.25);
}
.leyenda-calc {
  background: rgba(249,115,22,.12);
  color: #fb923c;
  border: 1px solid rgba(249,115,22,.25);
}
.leyenda-plc {
  background: rgba(99,102,241,.12);
  color: #a5b4fc;
  border: 1px solid rgba(99,102,241,.25);
}
/* Campos manuales (grupo sin .calc-auto ni .from-plc) — borde azul sutil */
.var-input-group:not(.calc-auto):not(.from-plc) {
  border-left: 3px solid rgba(56,139,253,.4);
}
.var-input-group.from-plc:not(.calc-auto) {
  border-left: 3px solid rgba(99,102,241,.5);
}
.var-limits {
  font-family: var(--font-mono);
  font-size: .62rem;
  color: var(--steel-400);
  display: flex;
  gap: .5rem;
  margin-top: .3rem;
}
.var-limits .lsl { color: var(--fail); }
.var-limits .nom { color: var(--info); }
.var-limits .usl { color: var(--ok); }
.var-input-inner {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--steel-100);
  font-family: var(--font-mono);
  font-size: .95rem;
  padding: .2rem 0;
}
.var-input-inner::placeholder { color: var(--steel-500); }

/* ── RESULTADO MUESTRA ── */
.muestra-resultado {
  border-radius: var(--radius);
  padding: .8rem 1rem;
  font-family: var(--font-mono);
  font-size: .85rem;
  display: none;
  margin-top: .5rem;
  border: 1px solid;
}
.muestra-resultado.ok {
  background: rgba(63,185,80,.12);
  border-color: var(--ok);
  color: var(--ok);
  display: block;
}
.muestra-resultado.fail {
  background: rgba(248,81,73,.12);
  border-color: var(--fail);
  color: var(--fail);
  display: block;
}

/* ── TABLA MUESTRAS MEJORADA ── */
.muestra-row-ok td { background: rgba(63,185,80,.03); }
.muestra-row-fail td { background: rgba(248,81,73,.05); }
.muestra-row-pendiente td { background: rgba(210,153,34,.04); }
.celda-plc {
  background: rgba(56,139,253,.06) !important;
  color: var(--info) !important;
  font-family: var(--font-mono);
  font-size: .78rem;
}
.celda-fuera {
  background: rgba(248,81,73,.12) !important;
  color: var(--fail) !important;
  font-weight: 700;
}
.celda-ok {
  color: var(--ok);
  font-family: var(--font-mono);
  font-size: .78rem;
}
.celda-pendiente {
  color: var(--steel-500);
  font-style: italic;
  font-size: .75rem;
}
.celda-calc {
  color: #fb923c;
  font-weight: 600;
}
.celda-calc.celda-fuera { color: var(--fail); }
.calc-tag-table {
  display: inline-block;
  background: rgba(249,115,22,.18);
  color: #fb923c;
  border-radius: 3px;
  padding: 0 .28rem;
  font-size: .56rem;
  font-weight: 700;
  margin-left: .2rem;
  vertical-align: middle;
}
.btn-procesar-muestra {
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: var(--radius);
  padding: .25rem .55rem;
  font-size: .75rem;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  transition: all .15s;
  white-space: nowrap;
}
.btn-procesar-muestra:hover { background: #e8870a; }
.btn-procesar-muestra.completada {
  background: var(--steel-600);
  color: var(--steel-300);
  cursor: default;
}

/* ── SECCIÓN DE VARIABLES PLC ── */
.plc-vars-info {
  background: rgba(56,139,253,.07);
  border: 1px solid rgba(56,139,253,.25);
  border-radius: var(--radius);
  padding: .6rem .9rem;
  margin-bottom: .8rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--info);
}

/* ── ESTADO BADGE ORDEN ── */
.estado-orden-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .8rem;
  border-radius: 20px;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
}
.estado-sin-iniciar { background: rgba(110,118,129,.15); color: var(--steel-300); border: 1px solid var(--steel-500); }
.estado-en-proceso  { background: rgba(210,153,34,.15);  color: var(--warn);       border: 1px solid var(--warn); }
.estado-completada  { background: rgba(63,185,80,.15);   color: var(--ok);         border: 1px solid var(--ok-dim); }

/* ── PANEL DE CONSTANTE K ── */
.constante-k-panel {
  background: var(--steel-700);
  border: 1px solid var(--steel-600);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius);
  padding: .7rem 1rem;
  margin-bottom: 1rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--steel-200);
}
.constante-k-title { color: var(--warn); font-size: .7rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: .4rem; }
.constante-k-formula {
  color: var(--accent);
  font-size: .85rem;
  font-weight: 600;
}

/* ── PREASENTAMIENTO STATUS ── */
.preas-tag {
  display: inline-block;
  background: rgba(56,139,253,.15);
  color: var(--info);
  border: 1px solid rgba(56,139,253,.3);
  border-radius: 3px;
  padding: 0 .35rem;
  font-size: .65rem;
  font-family: var(--font-mono);
  vertical-align: middle;
}

/* ── TABLA COMPACTA MUESTRAS (modo solo lectura) ── */
.tabla-muestras-compact .data-table td {
  padding: .4rem .6rem;
  font-size: .77rem;
}
.tabla-muestras-compact .data-table th {
  font-size: .62rem;
  padding: .5rem .6rem;
}

/* ── RESUMEN ESTADÍSTICO RÁPIDO (panel abajo del progreso) ── */
.resumen-rapido {
  background: var(--steel-700);
  border: 1px solid var(--steel-500);
  border-radius: var(--radius);
  padding: .8rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  align-items: center;
}
.resumen-item { text-align: center; }
.resumen-num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1;
}
.resumen-lbl {
  font-family: var(--font-mono);
  font-size: .62rem;
  color: var(--steel-400);
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ── BARRA DE VALIDACION EN TIEMPO REAL ── */
.var-validation-bar {
  height: 3px;
  border-radius: 2px;
  margin-top: .3rem;
  transition: all .3s;
  background: var(--steel-500);
}
.var-validation-bar.ok   { background: var(--ok); }
.var-validation-bar.fail { background: var(--fail); }

/* ── SECCIÓN GROUP HEADER EN MODAL ── */
.vars-group-header {
  font-family: var(--font-mono);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--accent);
  padding: .4rem .2rem .3rem;
  border-bottom: 1px solid var(--steel-600);
  margin-bottom: .5rem;
  margin-top: .3rem;
  grid-column: 1 / -1;
}

/* ── STAGING STATUS PANEL ── */
.staging-status-panel {
  background: var(--steel-800);
  border: 1px solid var(--steel-500);
  border-left: 4px solid var(--info);
  border-radius: var(--radius);
  padding: .8rem 1.2rem;
  margin-bottom: .8rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.staging-file-info {
  display: flex;
  align-items: center;
  gap: .7rem;
}
.staging-file-icon { font-size: 1.6rem; }
.staging-file-nombre {
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--info);
  font-weight: 600;
}
.staging-file-fecha {
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--steel-400);
  margin-top: .1rem;
}
.staging-stats {
  display: flex;
  gap: 1rem;
  margin-left: .5rem;
}
.staging-stat { text-align: center; }
.staging-stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1;
}
.staging-stat-num.ok   { color: var(--ok); }
.staging-stat-num.warn { color: var(--warn); }
.staging-stat-lbl {
  font-family: var(--font-mono);
  font-size: .6rem;
  color: var(--steel-400);
  text-transform: uppercase;
}

/* ── BOTÓN HISTÓRICO ── */
.btn-historico {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: .5rem 1.1rem;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.btn-historico:hover { background: linear-gradient(135deg, #6d28d9, #4c1d95); transform: translateY(-1px); }
.btn-historico.btn-sm { padding: .3rem .7rem; font-size: .78rem; }

/* ── TABLA HISTÓRICO ── */
#tbody-historico tr td:nth-child(11) { font-weight: 700; }
.hist-result-ok   { color: var(--ok); }
.hist-result-fail { color: var(--fail); }

/* ── PAGINACIÓN HISTÓRICO ── */
.hist-paginacion {
  display: flex;
  justify-content: center;
  gap: .4rem;
  margin-top: .8rem;
  flex-wrap: wrap;
}
.hist-page-btn {
  background: var(--steel-700);
  border: 1px solid var(--steel-500);
  color: var(--steel-200);
  padding: .3rem .75rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: .78rem;
  transition: all .15s;
}
.hist-page-btn:hover, .hist-page-btn.active {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #fff;
}

/* ── DETALLE HISTÓRICO ── */
.hist-resumen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px,1fr));
  gap: .5rem;
  margin-bottom: .8rem;
}
.hist-resumen-item {
  background: var(--steel-700);
  border-radius: var(--radius);
  padding: .5rem .75rem;
}
.hist-resumen-label { font-family: var(--font-mono); font-size: .62rem; color: var(--steel-400); text-transform: uppercase; }
.hist-resumen-val   { font-family: var(--font-mono); font-size: .9rem; color: var(--steel-100); font-weight: 600; margin-top: .2rem; }

/* ============================================================
   INFORME DIMENSIONAL + GESTIÓN APERTURA/CIERRE — v3.2
   ============================================================ */

/* ── Informe: tabla de ingreso ── */
.inf-orden-info {
  display: flex; flex-wrap: wrap; gap: .5rem 1.2rem;
  font-family: var(--font-mono); font-size: .72rem;
  color: var(--steel-300); margin-bottom: .9rem;
  padding: .5rem .8rem;
  background: var(--steel-700); border-radius: var(--radius);
}
.inf-num-cell {
  width: 32px; text-align: center;
  font-family: var(--font-mono); font-size: .72rem;
  color: var(--steel-400); font-weight: 700;
}
.inf-input {
  width: 90px; padding: .2rem .4rem;
  background: var(--iron); border: 1px solid var(--border);
  color: var(--text); font-family: var(--font-mono); font-size: .8rem;
  border-radius: 3px; text-align: right;
  transition: border-color .15s;
}
.inf-input:focus { outline: none; border-color: var(--accent); }
.inf-input.celda-ok   { border-color: var(--ok);   background: rgba(63,185,80,.06); }
.inf-input.celda-fuera{ border-color: var(--fail);  background: rgba(248,81,73,.08); }
.inf-grid-wrap {
  overflow-x: auto; max-height: 300px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius);
}
.inf-tabla th { font-size: .7rem; white-space: nowrap; }

/* ── Informe: KPIs estadísticos ── */
.inf-kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px,1fr));
  gap: .5rem; margin-bottom: 1rem;
}
.inf-kpi {
  background: var(--steel-700); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .5rem .7rem; text-align: center;
}
.inf-kpi-lbl { font-family: var(--font-mono); font-size: .6rem; color: var(--steel-400); letter-spacing: 1px; text-transform: uppercase; }
.inf-kpi-val { font-family: var(--font-mono); font-size: .9rem; font-weight: 600; color: var(--text); margin-top: .15rem; }

/* ── Informe: gráfico ── */
.inf-chart-wrap {
  background: var(--steel-800, #0d1117);
  border: 1px solid var(--border);
  border-radius: var(--radius); padding: .8rem 1rem;
  margin-top: .6rem;
}
.inf-tabla-resultado th, .inf-tabla-resultado td { font-size: .75rem; }

/* ── Gestión Apertura/Cierre ── */
.gestion-info-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr));
  gap: .5rem; margin-bottom: 1rem;
}
.gestion-info-grid > div {
  background: var(--steel-700); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .5rem .7rem;
  display: flex; flex-direction: column; gap: .15rem;
}
.g-lbl { font-family: var(--font-mono); font-size: .58rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--steel-400); }
.g-val { font-family: var(--font-mono); font-size: .82rem; font-weight: 600; color: var(--text); }
.g-estado-borrador { color: #60a5fa; }
.g-estado-proceso  { color: #fbbf24; }
.g-estado-completada{ color: var(--ok); }
.g-estado-cancelada { color: var(--fail); }

.gestion-alert {
  border-radius: var(--radius); padding: .75rem 1rem;
  font-size: .82rem; line-height: 1.6; margin-bottom: .8rem;
}
.gestion-alert-info { background: rgba(96,165,250,.08); border: 1px solid rgba(96,165,250,.25); color: #93c5fd; }
.gestion-alert-ok   { background: rgba(63,185,80,.08);  border: 1px solid rgba(63,185,80,.25);  color: var(--ok); }
.gestion-alert-warn { background: rgba(248,81,73,.08);  border: 1px solid rgba(248,81,73,.25);  color: var(--fail); }

/* ── Badges estado en tabla de órdenes ── */
.badge-estado {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font-mono); font-size: .65rem; letter-spacing: .5px;
  border-radius: 20px; padding: .18rem .65rem; white-space: nowrap;
}
.badge-estado-borrador   { background: rgba(96,165,250,.12);  color: #60a5fa;  border: 1px solid rgba(96,165,250,.25); }
.badge-estado-en_proceso { background: rgba(251,191,36,.12);  color: #fbbf24;  border: 1px solid rgba(251,191,36,.25); }
.badge-estado-completada { background: rgba(63,185,80,.12);   color: var(--ok); border: 1px solid rgba(63,185,80,.25); }
.badge-estado-cancelada  { background: rgba(248,81,73,.12);   color: var(--fail); border: 1px solid rgba(248,81,73,.25); }

/* ── Botones apertura/cierre ── */
.btn-apertura { color: #60a5fa; border-color: rgba(96,165,250,.35) !important; }
.btn-apertura:hover { background: rgba(96,165,250,.12) !important; }
.btn-cierre   { color: #fbbf24; border-color: rgba(251,191,36,.35) !important; }
.btn-cierre:hover { background: rgba(251,191,36,.1) !important; }

/* ============================================================
   MEJORAS v4.3 — Mobile, Paginación, UI/UX
   ============================================================ */

/* ── Paginación ── */
.paginacion-bar {
  display: flex; align-items: center; justify-content: center;
  gap: .8rem; padding: .8rem 1rem; margin-top: .5rem;
  font-family: var(--font-mono); font-size: .75rem;
}
.pag-info { color: var(--steel-300); }

/* ── Barra de búsqueda ── */
#search-ordenes { transition: border-color .15s, box-shadow .15s; }
#search-ordenes:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(247,147,26,.15); }

/* ── Dashboard chart panel ── */
#dashboard-chart-wrap canvas { display: block; }

/* ── Hamburger button ── */
.hamburger-btn {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 38px; height: 38px;
  background: transparent; border: 1px solid var(--steel-500);
  border-radius: var(--radius); cursor: pointer; padding: 6px;
  flex-shrink: 0;
}
.hamburger-btn span {
  display: block; width: 20px; height: 2px;
  background: var(--steel-200); border-radius: 2px;
  transition: transform .2s, opacity .2s;
}

/* ── Mobile nav overlay ── */
.nav-close-btn {
  display: none;
  position: absolute; top: .6rem; right: .8rem;
  background: none; border: none; color: var(--steel-300);
  font-size: 1.1rem; cursor: pointer; padding: .2rem .4rem;
}

/* ── Responsive: 768px (tablet) ── */
@media (max-width: 768px) {
  /* Show hamburger, hide inline nav */
  .hamburger-btn { display: flex !important; }

  #app-nav {
    position: fixed !important; top: 0; left: 0; bottom: 0;
    width: 240px; z-index: 200;
    background: var(--steel-800) !important;
    border-right: 2px solid var(--accent) !important;
    flex-direction: column !important;
    padding: 3.5rem 1rem 1.5rem;
    gap: .35rem !important;
    box-shadow: 4px 0 24px rgba(0,0,0,.4);
    transform: translateX(-110%);
    transition: transform .25s ease;
    display: flex !important; /* always in DOM, hidden via transform */
  }
  #app-nav.nav-open {
    transform: translateX(0);
  }
  .nav-close-btn { display: block; }

  /* Nav backdrop */
  #nav-backdrop {
    display: none; position: fixed; inset: 0; z-index: 199;
    background: rgba(0,0,0,.5);
  }
  #nav-backdrop.open { display: block; }

  .nav-btn {
    width: 100%; text-align: left !important;
    padding: .75rem 1rem !important; font-size: .9rem !important;
    border-radius: var(--radius) !important;
    justify-content: flex-start !important;
  }

  /* Bigger tap targets everywhere */
  .btn { min-height: 38px; }
  .btn-icon { min-width: 36px; min-height: 36px; }

  /* Header adapts */
  .app-header { padding: 0 .75rem !important; gap: .5rem; }
  .brand-sub  { display: none; }
  #btn-back-home { font-size: .62rem; padding: .28rem .55rem; }

  /* Main content */
  .app-main { padding: .8rem !important; }

  /* Tables: horizontal scroll */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 700px; }

  /* Modals: full width */
  .modal-box { max-width: 96vw !important; margin: .5rem; max-height: 94vh; }

  /* KPI row: 2 cols */
  .kpi-row { grid-template-columns: 1fr 1fr; }

  /* Charts: single col */
  .charts-grid { grid-template-columns: 1fr !important; }

  /* Muestras panel: stack */
  .progreso-panel { flex-direction: column; align-items: flex-start; }

  /* Search bar full width */
  #search-ordenes { width: 100% !important; }
}

/* ── Responsive: 480px (phone) ── */
@media (max-width: 480px) {
  .view-header { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .stat-controls { flex-direction: column; width: 100%; }
  .stat-controls .form-select { width: 100%; }
  .kpi-row { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .kpi-value { font-size: 1.5rem; }
  .modal-two-col { grid-template-columns: 1fr; }
  .muestreo-grid { grid-template-columns: 1fr 1fr; }
  .form-row { flex-direction: column; }
  .inf-kpi-grid { grid-template-columns: repeat(3, 1fr); }
  /* Font sizes */
  body { font-size: 14px; }
  .data-table th, .data-table td { font-size: .72rem; padding: .35rem .5rem; }
}

/* ── Light mode adjustments ── */
[data-theme="light"] #dashboard-chart-wrap {
  background: #ffffff;
  border-color: #e2e8f0;
}
[data-theme="light"] .paginacion-bar { background: transparent; }
[data-theme="light"] .hamburger-btn { border-color: #e2e8f0; }
[data-theme="light"] .hamburger-btn span { background: #475569; }
[data-theme="light"] #app-nav {
  background: #ffffff !important;
  border-right-color: var(--accent) !important;
}

/* ============================================================
   MÓDULO SEGUIMIENTO DE USUARIOS — v3.2
   ============================================================ */

/* ── Topbar ── */
.seg-topbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 1.2rem; flex-wrap: wrap; gap: .8rem;
}
.seg-date-input { width: 140px; font-size: .78rem; padding: .28rem .6rem; }

/* ── Layout 2 columnas ── */
.seg-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 1rem;
  align-items: flex-start;
}
@media (max-width: 900px) { .seg-layout { grid-template-columns: 1fr; } }

/* ── Panel izquierdo ── */
.seg-panel-left {
  background: var(--steel-800);
  border: 1px solid var(--steel-500);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  overflow: hidden;
}
[data-theme="light"] .seg-panel-left {
  background: #ffffff;
  border-color: #e2e8f0;
  border-top-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.seg-list-header {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--steel-600);
}
[data-theme="light"] .seg-list-header { border-bottom-color: #e8edf3; }
.seg-section-title {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 2px;
  color: var(--accent);
  display: flex; align-items: center; gap: .5rem;
}
.seg-count-badge {
  background: var(--accent);
  color: var(--steel-900);
  font-family: var(--font-mono);
  font-size: .65rem;
  font-weight: 700;
  border-radius: 20px;
  padding: .05rem .45rem;
}
.seg-toggle-label {
  font-family: var(--font-mono);
  font-size: .65rem;
  color: var(--steel-300);
  display: flex; align-items: center; gap: .35rem;
  cursor: pointer;
}
.seg-lista-operadores { max-height: 520px; overflow-y: auto; }
.seg-loading { padding: 1.5rem; text-align: center; font-family: var(--font-mono); font-size: .78rem; color: var(--steel-400); }

/* ── Operador item ── */
.seg-op-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--steel-700);
  cursor: pointer;
  transition: background .15s;
}
[data-theme="light"] .seg-op-item { border-bottom-color: #f1f5f9; }
.seg-op-item:hover { background: rgba(247,147,26,.06); }
.seg-op-item.active { background: rgba(247,147,26,.1); border-left: 3px solid var(--accent); }
.seg-op-item.inactivo { opacity: .5; }
.seg-op-avatar-sm {
  width: 38px; height: 38px; border-radius: 8px;
  background: var(--accent);
  color: var(--steel-900);
  font-family: var(--font-display);
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0;
  letter-spacing: 1px;
}
.seg-op-item.inactivo .seg-op-avatar-sm { background: var(--steel-500); color: var(--steel-300); }
.seg-op-item-info { flex: 1; min-width: 0; }
.seg-op-item-nombre {
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.seg-op-item-meta {
  font-family: var(--font-mono);
  font-size: .62rem;
  color: var(--steel-300);
  margin-top: .1rem;
}
.seg-op-item-stats {
  font-family: var(--font-mono);
  font-size: .65rem;
  color: var(--steel-300);
  text-align: right;
  flex-shrink: 0;
}
.seg-badge-activo  { display:inline-block; padding:.05rem .5rem; border-radius:20px; font-size:.58rem; font-family:var(--font-mono); letter-spacing:.5px; background:rgba(63,185,80,.12); color:var(--ok); border:1px solid rgba(63,185,80,.2); }
.seg-badge-inactivo{ display:inline-block; padding:.05rem .5rem; border-radius:20px; font-size:.58rem; font-family:var(--font-mono); letter-spacing:.5px; background:rgba(248,81,73,.1); color:var(--fail); border:1px solid rgba(248,81,73,.2); }

/* ── Panel derecho ── */
.seg-panel-right {
  background: var(--steel-800);
  border: 1px solid var(--steel-500);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  min-height: 400px;
}
[data-theme="light"] .seg-panel-right {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.seg-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 280px; gap: .8rem;
  font-family: var(--font-mono); font-size: .82rem; color: var(--steel-400);
}
.seg-placeholder-icon { font-size: 2.5rem; opacity: .4; }

/* ── Operador header (panel derecho) ── */
.seg-op-header {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.2rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--steel-600);
  flex-wrap: wrap; gap: .6rem;
}
[data-theme="light"] .seg-op-header { border-bottom-color: #e8edf3; }
.seg-op-avatar {
  width: 52px; height: 52px; border-radius: 12px;
  background: var(--accent);
  color: var(--steel-900);
  font-family: var(--font-display);
  font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0; letter-spacing: 2px;
}
.seg-op-nombre {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 2px;
  color: var(--accent);
}
.seg-op-meta {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--steel-300);
  display: flex; align-items: center; gap: .4rem;
  flex-wrap: wrap; margin-top: .2rem;
}
.seg-op-sep { color: var(--steel-500); }

/* ── KPIs ── */
.seg-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px,1fr));
  gap: .6rem;
  margin-bottom: 1.2rem;
}
.seg-kpi {
  background: var(--steel-700);
  border: 1px solid var(--steel-600);
  border-radius: var(--radius);
  padding: .65rem .8rem;
  text-align: center;
}
[data-theme="light"] .seg-kpi { background: #f8fafc; border-color: #e2e8f0; }
.seg-kpi-num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 2px;
  color: var(--accent);
  line-height: 1;
}
.seg-kpi-lbl {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--steel-300);
  margin-top: .3rem;
}

/* ── Chart section ── */
.seg-chart-section { margin-bottom: .5rem; }
.seg-section-label {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--steel-300);
  margin-bottom: .6rem;
  display: flex; align-items: center; gap: .5rem;
}
.seg-chart-wrap {
  background: var(--steel-900);
  border: 1px solid var(--steel-600);
  border-radius: var(--radius);
  padding: .8rem 1rem;
}
[data-theme="light"] .seg-chart-wrap { background: #f8fafc; border-color: #e2e8f0; }

/* ── Sesiones list ── */
.seg-sesiones-list {
  display: flex; flex-direction: column; gap: .35rem;
  max-height: 200px; overflow-y: auto;
}
.seg-sesion-item {
  display: flex; align-items: center; gap: .8rem;
  font-family: var(--font-mono); font-size: .72rem;
  color: var(--steel-300);
  padding: .4rem .6rem;
  background: var(--steel-700);
  border-radius: var(--radius);
  border-left: 3px solid var(--ok);
}
[data-theme="light"] .seg-sesion-item { background: #f8fafc; }
.seg-sesion-hora { color: var(--text); font-weight: 600; }
.seg-sesion-ip   { color: var(--steel-400); font-size: .62rem; margin-left: auto; }

/* ── Form section label ── */
.seg-form-section {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .5rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid rgba(247,147,26,.2);
}

/* ── ORDEN COMBO BUSCADOR ───────────────────────────────────── */
.orden-combo {
  position: relative;
  width: 340px;
  font-family: var(--font-body);
}
.orden-combo-input-wrap {
  display: flex;
  align-items: center;
  background: var(--steel-700);
  border: 1px solid var(--steel-500);
  border-radius: var(--radius);
  padding: 0 .6rem;
  transition: border-color .18s;
  gap: .4rem;
}
.orden-combo.is-open .orden-combo-input-wrap,
.orden-combo-input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(247,147,26,.15);
}
.orden-combo-icon { color: var(--steel-400); font-size: .85rem; flex-shrink: 0; }
.orden-combo-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--steel-100);
  font-family: var(--font-body);
  font-size: .88rem;
  padding: .55rem 0;
  min-width: 0;
}
.orden-combo-input::placeholder { color: var(--steel-400); }
.orden-combo-clear {
  color: var(--steel-400);
  cursor: pointer;
  font-size: .75rem;
  padding: .2rem;
  border-radius: 50%;
  line-height: 1;
  display: none;
  flex-shrink: 0;
  transition: color .15s;
}
.orden-combo-clear:hover { color: var(--steel-100); }
.orden-combo.has-value .orden-combo-clear { display: flex; align-items: center; }

.orden-combo-list {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--steel-700);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  max-height: 280px;
  overflow-y: auto;
  z-index: 500;
  list-style: none;
  margin: 0; padding: .3rem 0;
  scrollbar-width: thin;
  scrollbar-color: var(--steel-500) transparent;
}
.orden-combo.is-open .orden-combo-list { display: block; }

.orden-combo-list li {
  padding: .5rem .9rem;
  cursor: pointer;
  font-size: .85rem;
  color: var(--steel-200);
  border-left: 3px solid transparent;
  transition: background .1s, border-color .1s;
  line-height: 1.35;
}
.orden-combo-list li:hover,
.orden-combo-list li.is-focused {
  background: rgba(247,147,26,.12);
  border-left-color: var(--accent);
  color: var(--steel-100);
}
.orden-combo-list li.is-selected {
  background: rgba(247,147,26,.18);
  border-left-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.orden-combo-list li .combo-order { font-weight: 600; color: var(--steel-100); }
.orden-combo-list li .combo-ref   { color: var(--steel-300); font-size: .8rem; }
.orden-combo-list li .combo-client{ color: var(--steel-400); font-size: .78rem; }
.orden-combo-list .combo-empty    { color: var(--steel-400); font-style: italic; cursor: default; }
.orden-combo-list .combo-loading  { color: var(--steel-400); font-style: italic; cursor: default; }
.orden-combo-badge {
  display: inline-block;
  background: rgba(247,147,26,.18);
  color: var(--accent);
  font-size: .72rem;
  font-family: var(--font-mono);
  padding: .1rem .45rem;
  border-radius: 3px;
  margin-bottom: .1rem;
}

/* light theme */
[data-theme="light"] .orden-combo-input-wrap { background:#fff; border-color:#cbd5e1; }
[data-theme="light"] .orden-combo-input { color:#0f172a; }
[data-theme="light"] .orden-combo-list { background:#fff; border-color:var(--accent); box-shadow:0 8px 32px rgba(0,0,0,.12); }
[data-theme="light"] .orden-combo-list li { color:#334155; }

/* responsive */
@media(max-width:600px) {
  .orden-combo { width: 100%; }
}