/* ============================================================
   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);
}
*,*::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(--steel-300);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(--steel-400);}

/* 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(--steel-300);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(--steel-300);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(--steel-300);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(--steel-400);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(--steel-300);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(--steel-300);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(--steel-400);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);}