/* =============================================================================
   public/css/counters-popup.css — Popup de contadores por estación
   F2R Engineering

   Solo usa variables del design system (`--surface-*`, `--text-*`,
   `--border-*`, `--accent-*`, `--color-*`). Funciona en light/dark sin
   overrides.
   ============================================================================= */

/* ── OVERLAY ────────────────────────────────────────────────────────────── */
.cnt-popup-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: var(--z-overlay);
  animation: cnt-fade-in var(--transition-base);
}
body.light-mode .cnt-popup-overlay {
  background: rgba(15, 23, 42, 0.4);
}
@keyframes cnt-fade-in {
  from { opacity: 0; } to { opacity: 1; }
}

/* ── CONTAINER ──────────────────────────────────────────────────────────── */
.cnt-popup {
  /* inset+margin:auto centra en el área disponible bajo el header global
   * en lugar de contra el viewport entero — evita solape con el header
   * en pantallas pequeñas o con font-scale alto. */
  position: fixed;
  inset: 90px 30px 30px 30px;
  margin: auto;
  width:      min(960px, calc(100vw - 60px));
  max-width:  min(960px, calc(100vw - 60px));
  max-height: calc(100vh - 120px);
  background: var(--surface-raised);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  z-index: calc(var(--z-overlay) + 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: cnt-pop-in 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes cnt-pop-in {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* ── HEADER ─────────────────────────────────────────────────────────────── */
.cnt-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  background: var(--surface-overlay);
  border-bottom: 1px solid var(--border-base);
}
.cnt-popup-title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cnt-popup-title-lbl {
  font-size: var(--fs-sm);
  letter-spacing: 1.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
}
.cnt-popup-title-station {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}
.cnt-popup-close {
  background: transparent;
  border: 1px solid var(--border-base);
  color: var(--text-secondary);
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-base), color var(--transition-base);
}
.cnt-popup-close:hover {
  background: var(--surface-elevated);
  color: var(--text-primary);
}

/* ── BODY (grid 2x2) ────────────────────────────────────────────────────── */
.cnt-popup-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  padding: var(--space-5);
  overflow-y: auto;
}
.cnt-card {
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 10px);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.cnt-card-title {
  font-size: var(--fs-xs);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: var(--fw-medium);
}

/* ── PRODUCCIÓN: grid 2x2 de stats grandes ──────────────────────────────── */
.cnt-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.cnt-stat {
  background: var(--surface-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.cnt-stat-lbl {
  font-size: var(--fs-xs);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: var(--fw-medium);
}
.cnt-stat-val {
  font-size: var(--fs-xxl);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.cnt-stat.is-ok    .cnt-stat-val { color: var(--color-success-strong, var(--color-success)); }
.cnt-stat.is-nok   .cnt-stat-val { color: var(--color-danger-strong,  var(--color-danger));  }
.cnt-stat.is-ok    { border-color: var(--color-success-soft); }
.cnt-stat.is-nok   { border-color: var(--color-danger-soft);  }

/* ── TIEMPO DE CICLO ────────────────────────────────────────────────────── */
.cnt-time-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.cnt-time-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.cnt-time-row-lbl {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-weight: var(--fw-medium);
}
.cnt-time-row-pair {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-variant-numeric: tabular-nums;
}
.cnt-time-current {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}
.cnt-time-sep {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 1px;
}
.cnt-time-prev {
  font-size: var(--fs-md);
  color: var(--text-muted);
}

/* ── NOK CONSECUTIVOS ───────────────────────────────────────────────────── */
.cnt-consec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  align-items: stretch;
}
.cnt-consec-cell {
  background: var(--surface-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cnt-consec-lbl {
  font-size: var(--fs-xs);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: var(--fw-medium);
}
.cnt-consec-val {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.cnt-consec-led {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--surface-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  transition: border-color var(--transition-base), background var(--transition-base);
}
.cnt-consec-led-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--surface-elevated);
  border: 2px solid var(--border-base);
  transition: background var(--transition-base), box-shadow var(--transition-base);
}
.cnt-consec-led-lbl {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  text-align: center;
  font-weight: var(--fw-medium);
}
.cnt-consec-led.is-on {
  border-color: var(--color-danger);
  background: var(--color-danger-soft);
}
.cnt-consec-led.is-on .cnt-consec-led-dot {
  background: var(--color-danger);
  border-color: var(--color-danger-strong, var(--color-danger));
  box-shadow: 0 0 10px var(--color-danger);
}
.cnt-consec-led.is-on .cnt-consec-led-lbl {
  color: var(--color-danger-strong, var(--color-danger));
}

/* ── RESET BUTTONS ──────────────────────────────────────────────────────── */
.cnt-reset-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.cnt-reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid var(--border-base);
  background: var(--surface-overlay);
  color: var(--text-primary);
  transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}
.cnt-reset-btn:hover  { background: var(--surface-elevated); }
.cnt-reset-btn:active { transform: scale(0.97); }
.cnt-reset-btn.is-ok {
  border-color: var(--color-success-soft);
  color: var(--color-success-strong, var(--color-success));
}
.cnt-reset-btn.is-ok:hover {
  background: var(--color-success-soft);
  border-color: var(--color-success);
}
.cnt-reset-btn.is-nok {
  border-color: var(--color-danger-soft);
  color: var(--color-danger-strong, var(--color-danger));
}
.cnt-reset-btn.is-nok:hover {
  background: var(--color-danger-soft);
  border-color: var(--color-danger);
}

/* ── FOOTER ─────────────────────────────────────────────────────────────── */
.cnt-popup-footer {
  padding: var(--space-3) var(--space-6);
  background: var(--surface-overlay);
  border-top: 1px solid var(--border-subtle);
}
.cnt-popup-foot-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  letter-spacing: 0.3px;
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .cnt-popup-body { grid-template-columns: 1fr; }
}

/* ── PANEL EN PRODUCCIÓN (botón que abre el popup) ─────────────────────── */
.prod-counters-panel { /* hereda layout estándar de .panel */ }

.prod-counters-btn {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-overlay);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-primary);
  text-align: left;
  transition: background var(--transition-base), border-color var(--transition-base);
}
.prod-counters-btn:hover {
  background: var(--surface-elevated);
  border-color: var(--accent);
}
.prod-counters-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  background: var(--surface-base);
  color: var(--accent);
}
.prod-counters-quick {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.prod-counters-quick-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.prod-counters-quick-lbl {
  font-size: var(--fs-xs);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: var(--fw-medium);
}
.prod-counters-quick-val {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.prod-counters-quick-item.is-ok  .prod-counters-quick-val { color: var(--color-success-strong, var(--color-success)); }
.prod-counters-quick-item.is-nok .prod-counters-quick-val { color: var(--color-danger-strong,  var(--color-danger));  }
.prod-counters-btn-cta {
  font-size: var(--fs-xs);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: var(--fw-bold);
}