/* ==========================================================================
   EXPORTA INGENIO — Monitoreo de planta remoto (login + dashboard)
   ========================================================================== */

.monitor-body{background:var(--paper);}
.on-dark{color:rgba(255,255,255,.75) !important;}

/* ---------------- LOGIN ---------------- */
.login-wrap{
  min-height:calc(100vh - 68px);
  display:flex; align-items:center; justify-content:center;
  padding:60px 5vw;
  background:
    radial-gradient(circle at 85% 10%, rgba(255,107,85,0.16), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(75,46,143,0.4), transparent 50%),
    linear-gradient(160deg, #3a1f72 0%, #241143 60%, #170a2c 100%);
}
.login-card{
  width:100%; max-width:380px;
  background:var(--panel);
  border-radius:var(--radius);
  padding:36px 32px;
  box-shadow:0 30px 60px -24px rgba(23,10,44,.5);
  display:flex; flex-direction:column; gap:6px;
}
.login-card h1{font-size:24px; margin:6px 0 10px;}
.login-sub{color:var(--ink-soft); font-size:13.5px; line-height:1.55; margin:0 0 20px;}
.login-card label{
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px;
}
.login-card input{
  font-family:'Inter', sans-serif; font-size:15px;
  padding:12px 14px; border-radius:12px; border:1px solid var(--line);
  background:var(--paper); color:var(--ink); margin-bottom:18px;
}
.login-card input:focus{outline:2px solid var(--royal-violet); outline-offset:1px;}
.login-error{
  background:rgba(225,79,59,.1); color:var(--coral-deep);
  font-size:12.5px; padding:10px 12px; border-radius:10px; margin-bottom:16px;
}
.login-btn{border:none; cursor:pointer; justify-content:center; font-size:14px; width:100%;}
.login-back{
  margin-top:16px; text-align:center;
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.04em;
  text-decoration:none; color:var(--ink-soft);
}
.login-back:hover{color:var(--coral-deep);}

/* ================= DASHBOARD ================= */
.dash-body{max-width:1180px; margin:0 auto; padding:22px 5vw 70px;}
.dash-topline{display:flex; justify-content:flex-end; margin-bottom:6px;}
.dash-topline a{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-soft); text-decoration:none;}
.dash-topline a:hover{color:var(--coral-deep);}

.machine-tabs{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 20px;}
.machine-tab{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.04em;
  padding:9px 16px; border-radius:20px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink-soft); cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
}
.machine-tab.active{background:var(--royal-violet); border-color:var(--royal-violet); color:#fff;}
.machine-tab.disabled{opacity:.5; cursor:not-allowed;}
.soon-tag{
  font-size:9px; background:rgba(75,46,143,.12); color:var(--royal-violet);
  padding:2px 6px; border-radius:8px;
}
.machine-tab.active .soon-tag{background:rgba(255,255,255,.2); color:#fff;}

/* Panel grande: fin estimado (o alerta de paro) */
.finish-panel{
  display:flex; align-items:center; gap:18px;
  background:linear-gradient(155deg, var(--royal-violet) 0%, var(--deep-violet) 70%, #170a2c 100%);
  border-radius:var(--radius); padding:24px 28px; color:#fff; margin-bottom:20px;
  transition:background .3s ease;
}
.finish-panel.paro{ background:linear-gradient(155deg, var(--coral-deep) 0%, #7a2a1f 70%, #37110b 100%); }
.finish-icon{width:48px; height:48px; border-radius:14px; background:rgba(255,255,255,.14); flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.finish-icon svg{width:22px; height:22px;}
.finish-text .eyebrow{color:#FFA491;}
.finish-value{font-family:'Space Grotesk', sans-serif; font-size:clamp(20px,2.6vw,28px); font-weight:700; margin:4px 0 4px;}
.finish-sub{font-size:12.5px; color:rgba(255,255,255,.75);}
.finish-warn{margin-top:8px; padding:8px 12px; border-radius:10px; font-size:12.5px; font-weight:600; line-height:1.4;} .finish-warn.warn-high{background:rgba(255,107,85,.22); color:#fff;} .finish-warn.warn-low{background:rgba(255,255,255,.16); color:#fff;}

/* Datos de la orden */
.order-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:24px 26px; margin-bottom:20px;}
.order-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px 16px; margin-top:14px;}
.field-label{font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft); display:block; margin-bottom:4px;}
.field-value{font-family:'Inter', sans-serif; font-weight:600; font-size:14.5px; color:var(--ink);}

/* KPIs */
.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px;}
.kpi-card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:18px 20px;}
.kpi-card.span2{grid-row:span 2; display:flex; flex-direction:column; justify-content:center;}
.kpi-card .field-label{color:var(--coral-deep);}
.kpi-value{font-family:'Space Grotesk', sans-serif; font-size:24px; font-weight:700; color:var(--ink);}
.kpi-value .unit{font-size:13px; font-weight:400; color:var(--ink-soft); margin-left:2px;}
.kpi-card-double{display:flex; flex-direction:column;} .kpi-sublabel{margin-top:10px;} .kpi-value-sm{font-size:18px;}

.gauge-wrap{position:relative; width:100%; max-width:220px; margin:6px auto -8px;}
.gauge-svg{width:100%; display:block;}
.gauge-track{fill:none; stroke:rgba(75,46,143,.12); stroke-width:14; stroke-linecap:round;}
.gauge-fill{fill:none; stroke:url(#gaugeGrad); stroke-width:14; stroke-linecap:round; transition:stroke-dasharray .6s ease;}
.gauge-value-text{position:absolute; left:0; right:0; bottom:2px; text-align:center; font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:30px; color:var(--ink);}
.gauge-sub{text-align:center; font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-top:2px;}

.qty-value{font-family:'Space Grotesk', sans-serif; font-size:26px; font-weight:700; color:var(--ink);}
.qty-value .qty-meta{font-size:15px; font-weight:400; color:var(--ink-soft);}
.progress-track{width:100%; height:10px; border-radius:6px; background:rgba(75,46,143,.1); overflow:hidden; margin:12px 0 6px;}
.progress-fill{height:100%; border-radius:6px; background:linear-gradient(90deg,var(--royal-violet),var(--coral));}
.progress-pct{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-soft); text-align:right;}

/* Reporte de paros por causa */
.paros-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:24px 26px;}
.paros-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(112px,1fr)); gap:12px; margin-top:14px;}
.paro-item{background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:14px 14px 12px;}
.paro-item.muted{opacity:.42;}
.paro-item .p-label{font-family:'IBM Plex Mono', monospace; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); display:block; margin-bottom:9px;}
.paro-item .p-min{font-family:'Space Grotesk', sans-serif; font-size:20px; font-weight:700; color:var(--ink);}
.paro-item .p-min span{font-size:12px; font-weight:400; color:var(--ink-soft);}
.paro-item .p-ev{font-size:11px; color:var(--ink-soft); margin:2px 0 9px;}
.paro-item .p-bar{height:5px; border-radius:4px; background:rgba(75,46,143,.1); overflow:hidden;}
.paro-item .p-bar-fill{height:100%; border-radius:4px; background:linear-gradient(90deg,var(--royal-violet),var(--coral));}

.last-update-line{text-align:center; font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-soft); margin-top:20px;}

.status-sindatos{
  text-align:center; padding:40px 20px; color:var(--ink-soft);
  background:var(--panel); border:1px dashed var(--line); border-radius:var(--radius); font-size:13.5px;
}

@media (max-width:820px){
  .order-grid{grid-template-columns:repeat(2,1fr);}
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:520px){
  .kpi-card.span2{grid-row:auto;}
}

.turn-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 20px; margin-bottom:10px;}
.turn-card-active{border-color:var(--royal-violet); border-width:2px;}
.turn-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;}
.turn-badge{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase; background:var(--line); color:var(--ink-soft); padding:3px 9px; border-radius:20px;}
.turn-badge-active{background:var(--royal-violet); color:#fff;}
.turn-time{font-size:11px; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace;}
.turn-op{font-size:15px; font-weight:600; color:var(--ink); margin-bottom:8px;}
.turn-kpis{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.turn-val{font-family:'Space Grotesk',sans-serif; font-size:20px; font-weight:700; color:var(--ink);}
.turn-lbl{font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft);}
.turn-paros{font-size:11px; color:var(--ink-soft); flex:1; min-width:140px;}
.turn-resumen{padding:10px 16px; background:rgba(75,46,143,.08); border-radius:10px; margin-top:10px;}

.turnos-tabla-wrap{overflow-x:auto; margin-top:12px;}
.turnos-tabla{width:100%; border-collapse:collapse; font-size:12.5px;}
.turnos-tabla th{text-align:left; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); padding:8px 10px; border-bottom:2px solid var(--line); white-space:nowrap;}
.turnos-tabla td{padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; color:var(--ink);}
.turnos-tabla tbody tr:hover{background:rgba(75,46,143,.04);}
.resumen-op-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin-bottom:16px;}
.resumen-op-card{background:rgba(75,46,143,.06); border-radius:12px; padding:12px 14px;}
.resumen-op-nombre{font-size:13px; font-weight:700; color:var(--ink); margin-bottom:6px;}
.resumen-op-linea{font-size:11px; color:var(--ink-soft); display:flex; justify-content:space-between; margin-bottom:2px;}
.resumen-op-linea b{color:var(--ink); font-weight:600;}

.turno-alerta{color:var(--coral-deep); font-weight:800; animation:eiParpadeoTurno 1s ease-in-out infinite;}
@keyframes eiParpadeoTurno{0%,100%{opacity:1;} 50%{opacity:.2;}}