/* ============================================================================
   MÓDULO MÁQUINAS — estado en planta + historial. Usa los tokens globales del
   app (--orange, --ink, --muted, --card, --line, radios, sombras, fuente).
   Colores de estado = pasteles con texto oscuro de su familia (Ley de diseño).
   ============================================================================ */
#mqRoot{--mq-radius:16px;
  --mq-prod-bg:#EAF3DE;   --mq-prod-tx:#3B6D11;   --mq-prod-dot:#4E9A17;
  --mq-libre-bg:#E7EDF3;  --mq-libre-tx:#5C6878;  --mq-libre-dot:#98A2B0;
  --mq-cal-bg:#E6F1FB;    --mq-cal-tx:#185FA5;    --mq-cal-dot:#2A7DD1;
  --mq-mant-bg:#FAEEDA;   --mq-mant-tx:#854F0B;   --mq-mant-dot:#C98A21;
  --mq-prob-bg:#FCEBEB;   --mq-prob-tx:#A32D2D;   --mq-prob-dot:#D64545;
  color:var(--ink); padding:4px 2px 40px}
#mqRoot .mq-wrap{max-width:1180px;margin:0 auto}
#mqRoot *{box-sizing:border-box}
#mqRoot .tnum{font-variant-numeric:tabular-nums}

/* Header en vivo + acciones */
#mqRoot .mq-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
#mqRoot .mq-live{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted);font-weight:600}
#mqRoot .mq-live .liveled{width:8px;height:8px;border-radius:50%;background:var(--mq-prod-dot);box-shadow:0 0 0 0 rgba(78,154,23,.5);animation:mqpulse 2s infinite}
#mqRoot .mq-acc{display:flex;gap:8px}
#mqRoot .mq-btn{height:38px;padding:0 15px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card);font-size:12.5px;font-weight:700;color:var(--ink2);display:inline-flex;align-items:center;gap:7px;cursor:pointer}
#mqRoot .mq-btn:hover{background:var(--surface2)}
#mqRoot .mq-btn.primary{background:var(--orange);border-color:var(--orange);color:#fff}
#mqRoot .mq-btn.primary:hover{filter:brightness(.95)}

/* Hero */
#mqRoot .mq-hero{background:var(--card);border:1px solid var(--line);border-radius:var(--mq-radius);box-shadow:var(--sh-1);padding:20px 22px;margin-bottom:14px}
#mqRoot .mq-hero h2{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:0}
#mqRoot .mq-hero h2 b{color:var(--mq-prod-tx)}
#mqRoot .mq-hero .sub{font-size:13px;color:var(--muted);margin-top:5px}

/* Banner rojo de impacto */
#mqRoot .mq-impacto{display:flex;align-items:flex-start;gap:11px;background:var(--mq-prob-bg);border:1px solid #F2C9C9;border-radius:var(--r);padding:13px 16px;margin-bottom:14px;color:var(--mq-prob-tx)}
#mqRoot .mq-impacto i{font-size:20px;flex-shrink:0;margin-top:1px}
#mqRoot .mq-impacto b{font-size:13.5px}
#mqRoot .mq-impacto .det{font-size:12.5px;margin-top:2px;opacity:.9}

/* Tiles de resumen (5, suman 10) */
#mqRoot .mq-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:14px}
#mqRoot .mq-tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px}
#mqRoot .mq-tile .v{font-size:24px;font-weight:800;line-height:1}
#mqRoot .mq-tile .l{font-size:11.5px;color:var(--muted);margin-top:5px;font-weight:600}
#mqRoot .mq-tile.produccion .v{color:var(--mq-prod-tx)}
#mqRoot .mq-tile.libre .v{color:var(--mq-libre-tx)}
#mqRoot .mq-tile.calibracion .v{color:var(--mq-cal-tx)}
#mqRoot .mq-tile.mantenimiento .v{color:var(--mq-mant-tx)}
#mqRoot .mq-tile.problemas .v{color:var(--mq-prob-tx)}

/* Chips de filtro (activo = naranja sólido) */
#mqRoot .mq-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
#mqRoot .mq-chip{height:34px;padding:0 14px;border-radius:17px;border:1px solid var(--line);background:var(--card);font-size:12.5px;font-weight:700;color:var(--ink2);cursor:pointer;display:inline-flex;align-items:center;gap:7px}
#mqRoot .mq-chip:hover{background:var(--surface2)}
#mqRoot .mq-chip.on{background:var(--orange);border-color:var(--orange);color:#fff}
#mqRoot .mq-chip .n{opacity:.7;font-variant-numeric:tabular-nums}
#mqRoot .mq-chip.on .n{opacity:.85}

/* Tweaks de vista */
#mqRoot .mq-tweaks{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:4px 0 16px;font-size:12px;color:var(--muted)}
#mqRoot .mq-tweaks label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
#mqRoot .mq-tweaks input{accent-color:var(--orange)}
#mqRoot .mq-seg{display:inline-flex;background:var(--surface2);border-radius:9px;padding:3px}
#mqRoot .mq-seg button{border:none;background:none;padding:5px 11px;border-radius:7px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer}
#mqRoot .mq-seg button.on{background:var(--card);color:var(--navy);box-shadow:var(--sh-1)}

/* Grupos por línea */
#mqRoot .mq-linea{margin-bottom:20px}
#mqRoot .mq-lh{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 2px 9px}
#mqRoot .mq-lh .c{background:var(--surface2);border-radius:20px;padding:1px 9px;font-size:11px;color:var(--ink2)}
#mqRoot .mq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
#mqRoot.dense .mq-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:9px}

/* Card de máquina */
#mqRoot .mq-card{background:var(--card);border:1px solid var(--line);border-radius:var(--mq-radius);box-shadow:var(--sh-1);padding:15px 16px;cursor:pointer;transition:.15s var(--ease)}
#mqRoot .mq-card:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
#mqRoot .mq-card .row1{display:flex;align-items:center;gap:10px}
#mqRoot .mq-led{width:11px;height:11px;border-radius:50%;flex-shrink:0}
#mqRoot .mq-led.produccion{background:var(--mq-prod-dot);animation:mqpulse 2s infinite}
#mqRoot .mq-led.libre{background:var(--mq-libre-dot)}
#mqRoot .mq-led.calibracion{background:var(--mq-cal-dot);animation:mqpulse 2.4s infinite}
#mqRoot .mq-led.mantenimiento{background:var(--mq-mant-dot)}
#mqRoot .mq-led.problemas{background:var(--mq-prob-dot);animation:mqpulse 1.4s infinite}
#mqRoot .mq-card .nm{font-size:14px;font-weight:700;color:var(--ink);flex:1;min-width:0}
#mqRoot .mq-card .un{font-size:11px;color:var(--muted2);font-weight:600}
#mqRoot .mq-pill{font-size:11px;font-weight:700;border-radius:8px;padding:3px 9px;white-space:nowrap}
#mqRoot .mq-pill.produccion{background:var(--mq-prod-bg);color:var(--mq-prod-tx)}
#mqRoot .mq-pill.libre{background:var(--mq-libre-bg);color:var(--mq-libre-tx)}
#mqRoot .mq-pill.calibracion{background:var(--mq-cal-bg);color:var(--mq-cal-tx)}
#mqRoot .mq-pill.mantenimiento{background:var(--mq-mant-bg);color:var(--mq-mant-tx)}
#mqRoot .mq-pill.problemas{background:var(--mq-prob-bg);color:var(--mq-prob-tx)}
#mqRoot .mq-tag{font-size:10.5px;color:var(--muted);margin-top:3px}
/* OP en curso */
#mqRoot .mq-op{margin-top:12px;border-top:1px solid var(--line);padding-top:11px}
#mqRoot .mq-op .of{font-size:12px;font-weight:700;color:var(--ink)}
#mqRoot .mq-op .pr{font-size:12px;color:var(--muted);margin-top:1px}
#mqRoot .mq-bar{height:7px;background:var(--surface2);border-radius:5px;overflow:hidden;margin:9px 0 4px}
#mqRoot .mq-bar i{display:block;height:100%;background:var(--orange);border-radius:5px}
#mqRoot .mq-op .pct{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
/* Bloque de paro */
#mqRoot .mq-paro{margin-top:12px;border-top:1px solid var(--line);padding-top:11px}
#mqRoot .mq-paro .mo{font-size:12px;font-weight:700;color:var(--mq-prob-tx)}
#mqRoot .mq-paro.mant .mo{color:var(--mq-mant-tx)}
#mqRoot .mq-paro .de{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.5}
#mqRoot .mq-paro .btnrea{margin-top:9px;height:32px;padding:0 13px;border-radius:8px;border:1px solid var(--line);background:var(--card);font-size:12px;font-weight:700;color:var(--ink2);cursor:pointer}
#mqRoot .mq-paro .btnrea:hover{background:var(--surface2)}

/* Leyenda */
#mqRoot .mq-leyenda{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;padding:12px 4px;font-size:11.5px;color:var(--muted)}
#mqRoot .mq-leyenda span{display:inline-flex;align-items:center;gap:6px}
#mqRoot .mq-leyenda i{width:9px;height:9px;border-radius:50%}

#mqRoot .mq-vacio{padding:40px 16px;text-align:center;color:var(--muted);font-size:13px}

@keyframes mqpulse{0%{box-shadow:0 0 0 0 rgba(78,154,23,.45)}70%{box-shadow:0 0 0 6px rgba(78,154,23,0)}100%{box-shadow:0 0 0 0 rgba(78,154,23,0)}}

/* ---- Ventanas (expediente, paro, accesos) ---- */
#mqRoot .mq-ov{position:fixed;inset:0;background:rgba(23,32,45,.42);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:300;overflow:auto}
#mqRoot .mq-modal{background:var(--card);border:1px solid var(--line);border-radius:var(--mq-radius);box-shadow:var(--sh-3,0 28px 64px -18px rgba(16,24,40,.28));width:100%;max-width:560px}
#mqRoot .mq-mh{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}
#mqRoot .mq-mh h3{margin:0;font-size:15px;font-weight:800;color:var(--ink)}
#mqRoot .mq-x{border:none;background:none;font-size:16px;color:var(--muted);cursor:pointer;width:32px;height:32px;border-radius:8px}
#mqRoot .mq-x:hover{background:var(--surface2)}
#mqRoot .mq-mb{padding:16px 18px}
#mqRoot .mq-esub{font-size:12.5px;color:var(--muted);margin-bottom:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#mqRoot .mq-macc{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 16px}
#mqRoot .mq-btn.danger{background:var(--mq-prob-bg);border-color:#F2C9C9;color:var(--mq-prob-tx)}
#mqRoot .mq-btn.danger:hover{filter:brightness(.97)}
#mqRoot .mq-exp h4,#mqRoot .mq-form h4{font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:16px 0 8px}
#mqRoot .mq-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink2)}
#mqRoot .mq-row:last-child{border-bottom:none}
#mqRoot .mq-when{color:var(--muted);font-size:11.5px;margin-left:auto}
#mqRoot .mq-empty{padding:12px 0;color:var(--muted);font-size:12.5px}
#mqRoot .mq-form label{display:block;font-size:12px;font-weight:700;color:var(--ink2);margin:10px 0 4px}
#mqRoot .mq-form label.mq-chk{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink2)}
#mqRoot .mq-form input[type=text],#mqRoot .mq-form input[type=number],#mqRoot .mq-form select{width:100%;height:38px;padding:0 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);font-size:13px;color:var(--ink)}
#mqRoot .mq-form input[type=checkbox]{accent-color:var(--orange);width:auto;height:auto}
#mqRoot .mq-x2{margin-left:auto;border:1px solid var(--line);background:var(--card);color:var(--mq-prob-tx);border-radius:8px;padding:4px 10px;font-size:11.5px;font-weight:700;cursor:pointer}
#mqRoot .mq-x2:hover{background:var(--mq-prob-bg)}
#mqRoot .mq-pill.mantenimiento{background:var(--mq-mant-bg);color:var(--mq-mant-tx)}
#mqRoot .mq-pill.problemas{background:var(--mq-prob-bg);color:var(--mq-prob-tx)}

@media(max-width:860px){
  #mqRoot .mq-tiles{grid-template-columns:repeat(2,1fr)}
  #mqRoot .mq-grid{grid-template-columns:1fr}
}