/* ═══════════════════════════════════════════════════════════════════
   HSEQ · estilos del módulo, portados desde el ERP minero.

   Vienen ya acotados bajo #mod-hseq, así que no hay riesgo de que se
   escapen al shell: ninguna de sus clases sale de ese subárbol.

   Lo único que se tocó son los tokens. El módulo hablaba el vocabulario
   del ERP minero (--panel, --border, --text, --muted, --green); acá se
   amarran a los de Hadysic para que herede la paleta naranja y el modo
   claro/oscuro sin reescribir una regla.
   ═══════════════════════════════════════════════════════════════════ */
#mod-hseq{
  --panel:var(--surface); --panel2:var(--surface2);
  --border:var(--line); --text:var(--ink); --muted:var(--ink3);
  --green:var(--ok); --green2:var(--ok-bg);
}
    /* ── Variables HSEQ mapeadas al ERP ── */
    #mod-hseq {
      --hseq-gold:   #e8a020;
      --hseq-gold-bg:rgba(232,160,32,.10);
      --hseq-gold-br:rgba(232,160,32,.28);
      --hseq-blue:   #2176ae;
      --hseq-blue2:  #3498db;
      --hseq-red2:   #e74c3c;
      --hseq-amber2: #f39c12;
      /* Aliases que usa el JS heredado */
      --cgc-text:    var(--text);
      --cgc-text2:   var(--muted);
      --cgc-text3:   rgba(15,23,42,.45);
      --cgc-border:  var(--border);
      --cgc-border2: rgba(15,23,42,.20);
      --cgc-card:    var(--panel);
      --cgc-card2:   var(--panel2);
      --cgc-gold:    var(--hseq-gold);
      --cgc-gold-bg: var(--hseq-gold-bg);
      --cgc-gold-br: var(--hseq-gold-br);
      --cgc-green:   var(--green);
      --cgc-green2:  var(--green2);
      --cgc-blue:    var(--hseq-blue);
      --cgc-blue2:   var(--hseq-blue2);
      --cgc-red2:    var(--hseq-red2);
      --cgc-amber2:  var(--hseq-amber2);
      --cgc-shadow:  var(--shadow);
    }

    /* ── Layout HSEQ ── */
    #mod-hseq .panel { display:none; flex-direction:column; flex:1; padding:18px 20px; }
    #mod-hseq .panel.active { display:flex; }
    #mod-hseq .toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 0 14px; border-bottom:1px solid var(--border); margin-bottom:14px; }
    #mod-hseq .filter-box { display:flex; flex-direction:column; gap:3px; }
    #mod-hseq .filter-box label { font-size:9px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); }
    #mod-hseq .filter-box select { border:1px solid var(--border); background:var(--panel); color:var(--text); padding:5px 8px; border-radius:6px; font-size:12px; }
    #mod-hseq .ml-auto { margin-left:auto; }

    /* ── KPIs ── */
    #mod-hseq .kpi-row { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:16px; }
    #mod-hseq .kpi { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:3px; box-shadow:var(--shadow); }
    #mod-hseq .kpi.k-gold  { border-left:3px solid var(--hseq-gold); }
    #mod-hseq .kpi.k-green { border-left:3px solid var(--green); }
    #mod-hseq .kpi.k-blue  { border-left:3px solid var(--hseq-blue); }
    #mod-hseq .kpi.k-amber { border-left:3px solid var(--hseq-amber2); }
    #mod-hseq .kpi.k-red   { border-left:3px solid var(--hseq-red2); }
    #mod-hseq .kpi.k-teal  { border-left:3px solid #1195a7; }
    #mod-hseq .kpi-lbl { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); }
    #mod-hseq .kpi-val { font-size:28px; font-weight:800; color:var(--text); line-height:1; }
    #mod-hseq .kpi-sub { font-size:10px; color:var(--muted); }

    /* ── Tabla ── */
    #mod-hseq .tbl-wrap { overflow-x:auto; border-radius:10px; border:1px solid var(--border); box-shadow:var(--shadow); background:var(--panel); }
    #mod-hseq table { width:100%; border-collapse:collapse; font-size:12px; }
    #mod-hseq thead th { background:var(--panel2); color:var(--muted); font-size:9px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; padding:10px 12px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap; }
    #mod-hseq tbody tr { border-bottom:1px solid var(--border); transition:background .1s; cursor:pointer; }
    #mod-hseq tbody tr:hover { background:#f0faf5; }
    #mod-hseq tbody tr:last-child { border-bottom:none; }
    #mod-hseq td { padding:9px 12px; color:var(--text); vertical-align:middle; }
    #mod-hseq td.mt { color:var(--muted); font-size:11px; }
    #mod-hseq td.sm { font-size:11px; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

    /* ── Badges ── */
    #mod-hseq .badge { display:inline-block; padding:2px 8px; border-radius:20px; font-size:10px; font-weight:700; }
    #mod-hseq .b-stp     { background:rgba(33,118,174,.12);  color:#2176ae; }
    #mod-hseq .b-ctp     { background:rgba(192,57,43,.12);   color:#c0392b; }
    #mod-hseq .b-cuasi   { background:rgba(232,160,32,.15);  color:#b8860b; }
    #mod-hseq .b-hallazgo{ background:rgba(125,60,152,.12);  color:#7d3c98; }
    #mod-hseq .b-falla   { background:rgba(211,84,0,.12);    color:#d35400; }
    #mod-hseq .b-dano    { background:rgba(15,122,79,.12);   color:var(--green); }
    #mod-hseq .b-ydn     { background:rgba(17,149,167,.12);  color:#0f7280; }
    #mod-hseq .b-bp  { background:rgba(34,160,107,.12); color:#22a06b; }
    #mod-hseq .b-l4  { background:rgba(33,118,174,.12); color:#2176ae; }
    #mod-hseq .b-l3  { background:rgba(232,160,32,.15); color:#b8860b; }
    #mod-hseq .b-l2  { background:rgba(192,57,43,.12);  color:#c0392b; }
    #mod-hseq .b-l1  { background:rgba(139,0,0,.12);    color:#8b0000; }
    #mod-hseq .b-bor { background:rgba(15,23,42,.07);   color:var(--muted); }
    #mod-hseq .b-env { background:rgba(33,118,174,.12); color:#2176ae; }
    #mod-hseq .b-rev { background:rgba(232,160,32,.15); color:#b8860b; }
    #mod-hseq .b-apr { background:rgba(15,122,79,.12);  color:var(--green); }
    #mod-hseq .b-cerr{ background:rgba(15,23,42,.07);   color:var(--muted); }
    #mod-hseq .b-zona-ch { background:rgba(33,118,174,.12); color:#2176ae; border-radius:12px; padding:2px 8px; font-size:10px; font-weight:700; }
    #mod-hseq .b-zona-ma { background:rgba(15,122,79,.12);  color:var(--green); border-radius:12px; padding:2px 8px; font-size:10px; font-weight:700; }
    #mod-hseq .b-zona-pu { background:rgba(139,90,0,.12);   color:#8b5a00; border-radius:12px; padding:2px 8px; font-size:10px; font-weight:700; }
    #mod-hseq .b-zona-ge { background:rgba(15,23,42,.07);   color:var(--muted); border-radius:12px; padding:2px 8px; font-size:10px; font-weight:700; }

    /* ── Formulario ── */
    #mod-hseq .fs { margin-bottom:18px; }
    #mod-hseq .fs-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--green); margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid rgba(15,122,79,.15); }
    #mod-hseq .fg { display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
    #mod-hseq .fg label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); }
    #mod-hseq .fg input, #mod-hseq .fg select, #mod-hseq .fg textarea { border:1px solid var(--border); background:var(--panel); color:var(--text); padding:8px 10px; border-radius:7px; font-size:12px; font-family:inherit; outline:none; transition:border-color .12s; width:100%; }
    #mod-hseq .fg input:focus, #mod-hseq .fg select:focus, #mod-hseq .fg textarea:focus { border-color:var(--green); box-shadow:0 0 0 2px rgba(15,122,79,.10); }
    #mod-hseq .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    #mod-hseq .grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
    #mod-hseq .grid4 { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:10px; }
    #mod-hseq .span2 { grid-column:span 2; }
    #mod-hseq .req { color:var(--hseq-red2); }

    /* ── Pills tipo evento ── */
    #mod-hseq .pills { display:flex; flex-wrap:wrap; gap:7px; }
    #mod-hseq .pill { padding:6px 12px; border-radius:20px; font-size:11px; font-weight:600; cursor:pointer; border:1.5px solid var(--border); background:var(--panel); color:var(--muted); transition:all .12s; user-select:none; }
    #mod-hseq .pill:hover { border-color:var(--green); color:var(--green); }
    #mod-hseq .pill.sel-stp    { background:rgba(33,118,174,.10);  border-color:#2176ae; color:#2176ae; }
    #mod-hseq .pill.sel-ctp    { background:rgba(192,57,43,.10);   border-color:#c0392b; color:#c0392b; }
    #mod-hseq .pill.sel-cuasi  { background:rgba(232,160,32,.12);  border-color:#b8860b; color:#b8860b; }
    #mod-hseq .pill.sel-hallazgo{ background:rgba(125,60,152,.10); border-color:#7d3c98; color:#7d3c98; }
    #mod-hseq .pill.sel-falla  { background:rgba(211,84,0,.10);    border-color:#d35400; color:#d35400; }
    #mod-hseq .pill.sel-dano   { background:rgba(15,122,79,.10);   border-color:var(--green); color:var(--green); }
    #mod-hseq .pill.sel-tray   { background:rgba(15,23,42,.06);    border-color:var(--muted); color:var(--muted); }
    #mod-hseq .pill.sel-ydn    { background:rgba(17,149,167,.10);  border-color:#1195a7; color:#0f7280; }

    /* ── Modales ── */
    #mod-hseq .overlay { display:none; position:fixed; inset:0; background:rgba(2,6,23,.55); z-index:9000; align-items:center; justify-content:center; padding:20px; }
    #mod-hseq .overlay.open { display:flex; }
    #mod-hseq .modal { background:var(--panel); border-radius:var(--r); width:100%; max-width:860px; max-height:90vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(2,6,23,.25); border:1px solid var(--border); }
    #mod-hseq .m-head { display:flex; align-items:center; gap:10px; padding:16px 20px; border-bottom:1px solid var(--border); flex-shrink:0; }
    #mod-hseq .m-title { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--text); }
    #mod-hseq .m-dot { width:8px; height:8px; border-radius:50%; background:var(--hseq-gold); flex-shrink:0; }
    #mod-hseq .m-close { margin-left:auto; background:none; border:none; font-size:20px; cursor:pointer; color:var(--muted); line-height:1; padding:0 4px; }
    #mod-hseq .m-close:hover { color:var(--hseq-red2); }
    #mod-hseq .m-body { flex:1; overflow-y:auto; padding:20px; }
    #mod-hseq .m-foot { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-top:1px solid var(--border); gap:8px; flex-shrink:0; background:var(--panel2); border-radius:0 0 var(--r) var(--r); }

    /* ── Botones ── */
    #mod-hseq .btn { display:inline-flex; align-items:center; gap:5px; padding:8px 14px; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; border:1px solid transparent; transition:all .13s; font-family:inherit; white-space:nowrap; }
    #mod-hseq .btn-ghost { background:var(--panel); border-color:var(--border); color:var(--text); }
    #mod-hseq .btn-ghost:hover { background:var(--panel2); border-color:var(--green); }
    #mod-hseq .btn-gold { background:var(--hseq-gold); border-color:var(--hseq-gold); color:#fff; }
    #mod-hseq .btn-gold:hover { filter:brightness(1.08); }
    #mod-hseq .btn-ok { background:var(--green); border-color:var(--green); color:#fff; }
    #mod-hseq .btn-danger-s { background:transparent; border-color:var(--hseq-red2); color:var(--hseq-red2); padding:4px 10px; font-size:11px; }
    #mod-hseq .btn-sm { padding:5px 10px; font-size:11px; }

    /* ── Dashboard cards ── */
    #mod-hseq .dash-g { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
    #mod-hseq .dash-c { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:16px; box-shadow:var(--shadow); }
    #mod-hseq .dash-c-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--border); }

    /* ── Sección headers ── */
    #mod-hseq .sec-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
    #mod-hseq .sec-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted); }

    /* ── Toggle ── */
    #mod-hseq .tog { display:inline-flex; align-items:center; cursor:pointer; position:relative; }
    #mod-hseq .tog input { opacity:0; width:0; height:0; position:absolute; }
    #mod-hseq .tog-track { width:34px; height:18px; border-radius:9px; background:var(--border); transition:background .2s; }
    #mod-hseq .tog input:checked ~ .tog-track { background:var(--green); }
    #mod-hseq .tog-thumb { position:absolute; left:2px; top:50%; transform:translateY(-50%); width:14px; height:14px; border-radius:50%; background:var(--panel); transition:left .2s; box-shadow:0 1px 4px rgba(0,0,0,.2); }
    #mod-hseq .tog input:checked ~ .tog-track ~ .tog-thumb { left:18px; }


    /* ── PUENTE CGC: mapeo de clases HSEQ → sistema CGC ── */
    /* Botones HSEQ usan el sistema CGC directamente */
    #mod-hseq .btn-ghost { background:var(--panel); border:1px solid var(--border); color:var(--text); padding:7px 14px; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:all .13s; font-family:inherit; }
    #mod-hseq .btn-ghost:hover { background:var(--panel2); border-color:var(--green); }
    #mod-hseq .btn-ok { background:linear-gradient(180deg,var(--green),#0a5c3a); border:none; color:#fff; padding:7px 14px; border-radius:8px; font-size:12px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:filter .13s; font-family:inherit; }
    #mod-hseq .btn-ok:hover { filter:brightness(1.08); }
    #mod-hseq .btn-gold { background:var(--hseq-gold); border:none; color:#fff; padding:7px 14px; border-radius:8px; font-size:12px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:5px; font-family:inherit; }
    /* KPI panel HSEQ → formato CGC */
    #mod-hseq .kpi-row { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:16px; }
    #mod-hseq .kpi { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:14px 16px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:4px; }
    #mod-hseq .kpi-lbl { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); }
    #mod-hseq .kpi-val { font-size:28px; font-weight:800; color:var(--text); line-height:1.1; }
    #mod-hseq .kpi-sub { font-size:10px; color:var(--muted); }
    #mod-hseq .kpi.k-gold  { border-top:3px solid var(--hseq-gold); }
    #mod-hseq .kpi.k-green { border-top:3px solid var(--green); }
    #mod-hseq .kpi.k-blue  { border-top:3px solid var(--hseq-blue); }
    #mod-hseq .kpi.k-amber { border-top:3px solid var(--hseq-amber2); }
    #mod-hseq .kpi.k-red   { border-top:3px solid var(--hseq-red2); }
    #mod-hseq .kpi.k-teal  { border-top:3px solid #1195a7; }
    /* Tabla HSEQ → formato CGC */
    #mod-hseq .tbl-wrap { border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); background:var(--panel); }
    #mod-hseq thead th { background:var(--panel2); color:var(--muted); font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; padding:10px 12px; border-bottom:1px solid var(--border); }
    /* Header del módulo HSEQ → formato CGC card */
    #mod-hseq .panel { padding:18px 20px; }
    #mod-hseq .toolbar { padding:0 0 14px; margin-bottom:14px; }

    /* ── Barras ── */
    #mod-hseq .bar-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:11px; }
    #mod-hseq .bar-lbl { width:130px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    #mod-hseq .bar-track { flex:1; height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
    #mod-hseq .bar-fill { height:100%; border-radius:3px; transition:width .4s; }
    #mod-hseq .bf-gold  { background:var(--hseq-gold); }
    #mod-hseq .bf-green { background:var(--green); }
    #mod-hseq .bf-blue  { background:var(--hseq-blue); }
    #mod-hseq .bf-red   { background:var(--hseq-red2); }
    #mod-hseq .bar-num  { width:36px; text-align:right; color:var(--muted); font-weight:600; }

    /* ── Infobox ── */
    #mod-hseq .infobox { background:rgba(15,122,79,.07); border:1px solid rgba(15,122,79,.20); border-radius:8px; padding:10px 14px; font-size:12px; color:var(--text); margin-bottom:14px; }
    #mod-hseq .infobox-blue { background:rgba(33,118,174,.07); border-color:rgba(33,118,174,.20); }

    /* ── Source note ── */
    #mod-hseq .source-note { background:rgba(33,118,174,.06); border:1px solid rgba(33,118,174,.18); border-radius:7px; padding:8px 12px; font-size:11px; color:var(--muted); margin-bottom:12px; }

    /* ── Acciones rows ── */
    #mod-hseq .acc-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
    #mod-hseq .acc-row input { flex:1; border:1px solid var(--border); background:var(--panel); color:var(--text); padding:7px 10px; border-radius:6px; font-size:12px; font-family:inherit; outline:none; }
    #mod-hseq .acc-row input:focus { border-color:var(--green); }

    /* ── Reporte ejecutivo ── */
    #mod-hseq .re-card { background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; margin-top:16px; }
    #mod-hseq .re-card-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted); padding:12px 16px; border-bottom:1px solid var(--border); background:var(--panel2); }
    #mod-hseq .re-body { display:grid; grid-template-columns:1fr 1fr; gap:0; }
    #mod-hseq .re-left { padding:14px 16px; border-right:1px solid var(--border); }
    #mod-hseq .re-right { padding:14px 16px; }
    #mod-hseq .re-row { display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid rgba(15,23,42,.05); }
    #mod-hseq .re-row:last-child { border-bottom:none; }
    #mod-hseq .re-dot { width:14px; height:14px; border-radius:50%; border:2px solid var(--green); background:rgba(15,122,79,.10); flex-shrink:0; }
    #mod-hseq .re-lbl { flex:1; font-weight:600; color:var(--text); text-transform:uppercase; font-size:10px; letter-spacing:.5px; }
    #mod-hseq .re-val { font-size:18px; font-weight:800; color:var(--text); min-width:28px; text-align:right; }
    #mod-hseq .re-section { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.4px; color:var(--muted); margin:10px 0 6px; padding-bottom:4px; border-bottom:1px solid var(--border); }
    #mod-hseq .re-section:first-child { margin-top:0; }
    #mod-hseq .re-h-zone { font-weight:700; font-size:10px; color:var(--muted); margin-top:7px; }
    #mod-hseq .re-h-item { padding:2px 0 2px 8px; font-size:11px; color:var(--text); border-left:2px solid var(--border); margin-left:2px; margin-bottom:3px; }
    #mod-hseq .re-h-id { color:var(--muted); font-size:10px; margin-right:4px; }
    #mod-hseq .re-foot { display:grid; grid-template-columns:120px 1fr 1fr; gap:0; border-top:1px solid var(--border); }
    #mod-hseq .re-gauge-wrap { padding:14px 12px; border-right:1px solid var(--border); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
    #mod-hseq .re-gauge { width:72px; height:38px; border-radius:60px 60px 0 0; border:8px solid var(--green); border-bottom:none; }
    #mod-hseq .re-gauge-pct { font-size:18px; font-weight:800; color:var(--green); line-height:1; }
    #mod-hseq .re-gauge-lbl { font-size:9px; font-weight:700; text-transform:uppercase; color:var(--muted); text-align:center; line-height:1.3; }
    #mod-hseq .re-bars-col { padding:12px 16px; border-right:1px solid var(--border); }
    #mod-hseq .re-bars-col:last-child { border-right:none; }
    #mod-hseq .re-bar-row { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
    #mod-hseq .re-bar-row:last-child { margin-bottom:0; }
    #mod-hseq .re-bar-lbl { width:80px; color:var(--text); font-weight:600; font-size:10px; white-space:nowrap; }
    #mod-hseq .re-bar-track { flex:1; height:10px; background:var(--border); border-radius:5px; overflow:hidden; }
    #mod-hseq .re-bar-fill { height:100%; border-radius:5px; background:var(--green); }
    #mod-hseq .re-bar-pct { width:36px; text-align:right; font-weight:700; font-size:11px; color:var(--text); }
