/* ============================================================
   Demo de tablero de producción
   ============================================================ */

:root{
  --tinta:#0C1116;
  --tinta2:#111924;
  --tinta3:#18222F;
  --papel:#F4F1EA;
  --gris:#A7AEBA;
  --linea:rgba(244,241,234,.12);
  --naranja:#E4572E;
  --verde:#4FBF8B;
  --ambar:#E8B04B;
  --rojo:#E4572E;
  --titulo:"Space Grotesk","Segoe UI",sans-serif;
  --texto:"Inter","Segoe UI",sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  background:var(--tinta);
  color:var(--papel);
  font-family:var(--texto);
  display:flex;flex-direction:column;
  min-height:100%;
}

/* cabecera */
.cab{
  height:64px;flex:none;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:0 24px;
  border-bottom:1px solid var(--linea);
  background:var(--tinta2);
}
.cab-marca{display:flex;align-items:center;gap:9px;color:var(--papel);text-decoration:none;}
.cab-marca span{font-family:var(--titulo);font-size:12.5px;font-weight:600;}
.cab-titulo{display:flex;flex-direction:column;line-height:1.3;text-align:center;}
.cab-titulo span{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);}
.cab-titulo strong{font-family:var(--titulo);font-size:13.5px;font-weight:600;}
.cab-volver{font-size:12px;color:var(--gris);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;}
.cab-volver:hover{color:var(--papel);border-bottom-color:var(--naranja);}

/* tablero */
.tablero{
  flex:1;min-height:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto 1fr auto;
  gap:16px;
  padding:16px;
  align-content:start;
}

.kpis{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
}

.kpi{
  border:1px solid var(--linea);
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);
  padding:14px 16px;
}
.kpi-et{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);}
.kpi-val{
  font-family:var(--titulo);
  font-size:clamp(1.5rem,2.4vw,2rem);
  font-weight:600;letter-spacing:-.02em;
  margin-top:6px;
  font-variant-numeric:tabular-nums;
}
.kpi-sub{font-size:11px;color:rgba(244,241,234,.45);margin-top:2px;}
.kpi--alerta .kpi-val{color:var(--naranja);}

.grafica,.paros{
  border:1px solid var(--linea);
  background:var(--tinta2);
  display:flex;flex-direction:column;
  min-height:0;
}
.grafica-cab{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:14px 18px 0;
}
.grafica-cab h2{
  font-family:var(--titulo);font-size:13.5px;font-weight:600;
  letter-spacing:.02em;
}
.meta{
  font-size:11px;color:var(--gris);
  display:flex;align-items:center;gap:10px;
  font-variant-numeric:tabular-nums;
}
.separador{width:1px;height:11px;background:var(--linea);}

.lienzo-grafica{flex:1;padding:10px 12px 14px;min-height:200px;}
.lienzo-grafica svg{width:100%;height:100%;display:block;}

/* tabla */
.paros table{width:100%;border-collapse:collapse;font-size:12.5px;}
.paros thead th{
  text-align:left;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris);font-weight:500;
  padding:10px 18px;border-bottom:1px solid var(--linea);
}
.paros tbody td{
  padding:9px 18px;
  border-bottom:1px solid rgba(244,241,234,.06);
  color:rgba(244,241,234,.82);
  font-variant-numeric:tabular-nums;
}
.paros tbody tr:last-child td{border-bottom:0;}
.paros tbody tr.nueva{animation:entra .45s ease;}
@keyframes entra{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.et-causa{
  display:inline-block;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 7px;border:1px solid rgba(244,241,234,.2);color:var(--gris);
}
.et-causa--critica{border-color:rgba(228,87,46,.5);color:var(--naranja);}

/* barra inferior */
.barra{
  grid-column:1 / -1;
  display:flex;align-items:center;gap:12px;
  padding-top:4px;
}
.play{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--naranja);color:#fff;border:0;
  padding:12px 20px;cursor:pointer;
  font:600 13px/1 var(--texto);letter-spacing:.02em;
  transition:background .2s ease;
}
.play:hover{background:#f0643a;}
.play svg{width:16px;height:16px;}
.play .ico-pausa{display:none;}
.play.reproduciendo .ico-play{display:none;}
.play.reproduciendo .ico-pausa{display:block;}

.secundario{
  background:none;border:1px solid var(--linea);
  color:var(--papel);padding:12px 18px;cursor:pointer;
  font:500 12.5px/1 var(--texto);letter-spacing:.04em;
}
.secundario:hover{border-color:rgba(244,241,234,.35);}

.nota{font-size:11px;color:rgba(244,241,234,.38);margin-left:auto;}

/* pie */
.pie{
  flex:none;height:40px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;border-top:1px solid var(--linea);
  background:var(--tinta2);
  font-size:11px;color:var(--gris);
}

@media (max-width:900px){
  .tablero{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;}
  .kpis{grid-template-columns:repeat(2,1fr);}
  .kpi:last-child{grid-column:1 / -1;}
  .nota{margin-left:0;}
  .cab-titulo{display:none;}
  body{height:auto;}
}