/* =============================================================================
   public/css/parameters-popup.css — Popup modal de gestión de recetas
   F2R Engineering

   IMPORTANTE: usa exclusivamente las variables CSS del design system
   (`--surface-*`, `--text-*`, `--border-*`, `--accent-*`, `--color-*`).
   Eso permite que el popup funcione tanto en modo oscuro (default) como
   en modo claro (`body.light-mode`) sin un solo CSS extra.

   Para overrides puntuales que no caben en variables (ej. amarillo del
   warning sobre fondo blanco), se ponen al final con `body.light-mode`.
   ============================================================================= */

/* ── OVERLAY OSCURO ──────────────────────────────────────────────────────── */
.prm-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: prm-fade-in var(--transition-base);
}

body.light-mode .prm-popup-overlay {
  /* Modo claro: overlay menos oscuro para no chocar con el fondo blanco */
  background: rgba(15, 23, 42, 0.4);
}

@keyframes prm-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── POPUP CONTAINER ─────────────────────────────────────────────────────── */
.prm-popup {
  /* Centrado en el área DISPONIBLE bajo el header global (~90 px).
   * inset+margin:auto auto-centra dentro del rectángulo definido por
   * inset, no contra el viewport — evita solape con el header.
   *
   * IMPORTANTE: height DEBE ser explícito (no sólo max-height), porque
   * .prm-data-body usa flex:1 + overflow-y:auto y necesita que la
   * cadena flex tenga altura definida arriba para calcular la propia.
   * Sin height el popup se encoge al tamaño del contenido y la
   * scrollbar interna no aparece — el botón "ACEPTAR EDICIÓN" del
   * sticky footer queda fuera de pantalla sin manera de hacer scroll. */
  position: fixed;
  inset: 90px 30px 30px 30px;
  margin: auto;
  width:      min(1400px, calc(100vw - 60px));
  max-width:  min(1400px, calc(100vw - 60px));
  height:     min(900px, calc(100vh - 120px));
  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: prm-pop-in 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes prm-pop-in {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* ── HEADER ──────────────────────────────────────────────────────────────── */
.prm-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);
}

.prm-popup-title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.prm-popup-title-lbl {
  font-size: var(--fs-sm);
  letter-spacing: 1.5px;
  color: var(--text-muted);
  text-transform: uppercase;
}
.prm-popup-title-station {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.prm-popup-close {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  transition: all var(--transition-fast);
}
.prm-popup-close:hover {
  color: var(--text-primary);
  background: var(--surface-elevated);
  border-color: var(--border-strong);
}

/* ── BODY: SIDEBAR + DATA PANEL ──────────────────────────────────────────── */
.prm-popup-body {
  flex: 1;
  min-height: 0;   /* permite que el grid hijo se encoga y los .*-body scroleen */
  display: grid;
  grid-template-columns: 320px 1fr;
  overflow: hidden;
}

/* ── SIDEBAR ─────────────────────────────────────────────────────────────── */
.prm-sidebar {
  border-right: 1px solid var(--border-base);
  display: flex;
  flex-direction: column;
  background: var(--surface-base);
  min-height: 0;   /* sin esto el flex:1 de .prm-sidebar-body NO se encoge,
                    * y el slot 25+ queda invisible (no scroll) */
  overflow: hidden;
}

.prm-sidebar-header {
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-base);
  background: var(--surface-overlay);
  flex-shrink: 0;
}

.prm-sidebar-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-3);
}

.prm-slot-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.prm-slot-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: var(--fs-base);
  transition: all var(--transition-fast);
}

.prm-slot-btn:hover {
  background: var(--surface-overlay);
  border-color: var(--border-base);
}

.prm-slot-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-inverse);
}

.prm-slot-btn.is-empty .prm-slot-desc {
  color: var(--text-muted);
  font-style: italic;
}

/* Toggle "Mostrar todos los slots vacíos / Ocultar vacíos" al final del
 * listado. Visual minimal — link-style con borde discreto para no robar
 * atención a los slots reales. */
.prm-slot-toggle {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  color: var(--text-muted);
  border: 1px dashed var(--border-base);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-align: center;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.prm-slot-toggle:hover {
  background: var(--surface-overlay);
  color: var(--text-primary);
  border-style: solid;
}

/* Botón de "ACTUAL EN PRODUCCIÓN" — destacado en verde semántico */
.prm-slot-btn.prm-slot-prod {
  background: var(--color-success-soft);
  border-color: var(--color-success);
}
.prm-slot-btn.prm-slot-prod.is-active {
  background: var(--color-success);
  border-color: var(--color-success-strong);
  color: var(--text-inverse);
}
.prm-slot-btn.prm-slot-prod .prm-slot-num {
  color: var(--color-success);
  font-size: var(--fs-md);
}
.prm-slot-btn.prm-slot-prod.is-active .prm-slot-num {
  color: var(--text-inverse);
}

.prm-slot-num {
  font-weight: var(--fw-bold);
  min-width: 28px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.prm-slot-btn.is-active .prm-slot-num {
  color: var(--text-inverse);
}

.prm-slot-desc {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prm-divider {
  margin: var(--space-3) 0;
  border: 0;
  border-top: 1px solid var(--border-base);
}

/* ── DATA PANEL ──────────────────────────────────────────────────────────── */
.prm-data-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-raised);
  min-height: 0;   /* permite encogerse para que .prm-data-body scroleé */
}

.prm-data-header {
  padding: var(--space-3) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  border-bottom: 1px solid var(--border-base);
  background: var(--surface-overlay);
  flex-shrink: 0;
}

#prm-data-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  letter-spacing: 0.4px;
  color: var(--text-primary);
}

.prm-data-actions { display: flex; gap: var(--space-2); }

.prm-data-body {
  flex: 1;
  min-height: 0;   /* el truco flex+overflow — sin esto .prm-data-body crece
                    * al tamaño de su contenido y nunca activa el scroll */
  padding: var(--space-6);
  overflow-y: auto;
}

.prm-empty-msg {
  padding: var(--space-10) var(--space-5);
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
}

/* ── BUTTONS ─────────────────────────────────────────────────────────────── */
.prm-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-transform: uppercase;
}
.prm-btn:hover  { transform: translateY(-1px); }
.prm-btn:active { transform: translateY(0); }

.prm-btn-secondary {
  background: var(--surface-elevated);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.prm-btn-secondary:hover {
  background: var(--surface-overlay);
  border-color: var(--border-emphasis);
}

.prm-btn-warning {
  background: var(--color-warning-soft);
  border-color: var(--color-warning);
  color: var(--color-warning);
}
.prm-btn-warning:hover {
  background: var(--color-warning);
  color: var(--text-inverse);
}

.prm-btn-success {
  background: var(--color-success-soft);
  border-color: var(--color-success);
  color: var(--color-success);
}
.prm-btn-success:hover {
  background: var(--color-success);
  color: var(--text-inverse);
}

/* Estado deshabilitado para cualquier .prm-btn (ej. ACEPTAR bloqueado por
   valores fuera de rango). No hover, sin transform, gris apagado. */
.prm-btn:disabled,
.prm-btn[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
  filter: grayscale(0.3);
  pointer-events: none;
}

/* En modo claro el amarillo no contrasta — usar la variante naranja */
body.light-mode .prm-btn-warning {
  color: var(--color-warning-strong);
  border-color: var(--color-warning-strong);
}
body.light-mode .prm-btn-warning:hover {
  background: var(--color-warning-strong);
}

/* ── TABLA DE PARÁMETROS ─────────────────────────────────────────────────── */
.prm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
  /* Layout fijo: las columnas no recalculan anchos al entrar/salir de edición.
     La columna de edición está siempre reservada (30%) pero su <td> usa
     `visibility: hidden` cuando no estamos editando, así no hay reflow. */
  table-layout: fixed;
}
.prm-table thead th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 1px;
  color: var(--text-muted);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-base);
  background: var(--surface-overlay);
}
/* Sin edición: 2 columnas (40% / 60%). Con edición: 3 columnas (30/35/35).
   table-layout: fixed garantiza que dentro de cada modo el ancho no
   recalcula al hacer scroll ni al añadir filas. */
.prm-table thead th:nth-child(1) { width: 40%; }
.prm-table thead th:nth-child(2) { width: 60%; }
.prm-data-panel.mode-editing .prm-table thead th:nth-child(1) { width: 30%; }
.prm-data-panel.mode-editing .prm-table thead th:nth-child(2) { width: 35%; }
.prm-data-panel.mode-editing .prm-table thead th:nth-child(3) { width: 35%; }
.prm-table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: middle;
}
.prm-cell-label {
  font-weight: var(--fw-normal);
  color: var(--text-secondary) !important;
}
/* `display: flex` sobre un <td> rompe las semánticas de table-cell —
   en concreto `vertical-align: middle` deja de aplicarse y el row
   height ya no se propaga al cell. Eso provocaba que el valor + rango
   quedaran arriba mientras el label y el input numérico (en celdas
   vecinas table-cell) se centraban verticalmente — una desalineación
   de media línea visible en todas las filas.
   Mantenemos el td como table-cell normal y apilamos value+range con
   `display: block` en sus hijos. */
.prm-cell-actual {
  font-family: var(--font-tech);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.prm-cell-value {
  display: block;
  color: var(--text-primary);
}
.prm-cell-range {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  letter-spacing: 0.5px;
  font-family: var(--font-tech);
}
.prm-cell-actual.is-out-of-range .prm-cell-value {
  color: var(--color-danger-strong, var(--color-danger));
  font-weight: var(--fw-bold);
}
.prm-cell-actual.is-out-of-range .prm-cell-range {
  color: var(--color-danger);
}
.prm-table tbody tr.is-out-of-range {
  background: var(--color-danger-soft);
}
.prm-edit-input.is-out-of-range {
  border-color: var(--color-danger);
  background: var(--color-danger-soft);
}

/* Columna de edición — oculta por defecto, visible en mode-editing. */
.prm-col-edit {
  display: none !important;
}
.prm-data-panel.mode-editing .prm-col-edit {
  display: table-cell !important;
}
.prm-data-panel.mode-editing thead .prm-col-edit {
  display: table-cell !important;
}

.prm-edit-input,
.prm-edit-checkbox {
  font-family: inherit;
  font-size: var(--fs-base);
}
.prm-edit-input {
  width: 100%;
  padding: var(--space-1) var(--space-2);
  background: var(--surface-base);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  outline: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.prm-edit-input:focus {
  border-color: var(--accent);
  background: var(--surface-raised);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.prm-edit-input.is-saving { border-color: var(--color-warning); }
.prm-edit-input.is-saved  { border-color: var(--color-success); }
.prm-edit-input.is-error  { border-color: var(--color-danger); }

.prm-edit-checkbox {
  width: 20px;
  height: 20px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent);
  flex-shrink: 0;
}

/* Contenedor del control BOOL en edición: checkbox + texto ON/OFF.
   Replica la huella visual de `.prm-edit-input` (mismo borde, padding,
   ancho 100% y radio) para que la fila no se vea vacía cuando el resto
   de filas tienen inputs numéricos a todo lo ancho de la celda. */
.prm-edit-bool {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-1) var(--space-2);
  min-height: 32px;
  user-select: none;
  background: var(--surface-base);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.prm-edit-bool:hover {
  border-color: var(--accent);
}
.prm-edit-bool:focus-within {
  border-color: var(--accent);
  background: var(--surface-raised);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}
.prm-edit-bool-text {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  /* Reserva el ancho del texto más largo (OFF) para que el control no
     "salte" horizontalmente al cambiar de estado. */
  min-width: 2.2em;
}
.prm-edit-bool-text[data-state="on"]  { color: var(--color-success); }
.prm-edit-bool-text[data-state="off"] { color: var(--text-muted); }

.prm-readonly {
  color: var(--text-muted);
  font-style: italic;
}

.prm-table-msg, .prm-table-error {
  padding: var(--space-6);
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
}
.prm-table-error { color: var(--color-danger); }

/* Aviso de rango inválido en una fila (Min > Max del PLC). Se muestra
   en lugar del rango normal — con icono ⚠ inline, color warning y
   subrayado punteado para tooltipear el motivo. NO bloquea la edición. */
.prm-cell-range-invalid {
  color: var(--color-warning);
  cursor: help;
  text-decoration: underline dotted currentColor;
  text-underline-offset: 2px;
}
body.light-mode .prm-cell-range-invalid {
  color: var(--color-warning-strong);
}

/* ── EDIT FOOTER (banner naranja "estás editando") ───────────────────────── */
/* Sticky al fondo del `prm-data-body` (que tiene overflow-y:auto). Antes,
   cuando un schema tenía 50+ filas, el botón ACEPTAR EDICIÓN quedaba
   debajo del fold y el usuario tenía que hacer scroll hasta el final para
   encontrarlo. Con position: sticky vive siempre visible al fondo. */
.prm-edit-footer {
  position: sticky;
  bottom: 0;
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  /* Fondo OPACO + tinte cálido encima. `--color-warning-soft` es
     rgba(...,0.15) — si lo usamos solo, las filas de la tabla se
     ven a través del banner cuando el contenido hace scroll. La
     capa de `--surface-raised` debajo lo hace totalmente opaco
     tanto en modo oscuro como en claro. */
  background:
    linear-gradient(var(--color-warning-soft), var(--color-warning-soft)),
    var(--surface-raised);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-md);
  box-shadow: 0 -6px 14px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  z-index: 2;
}
body.light-mode .prm-edit-footer {
  box-shadow: 0 -6px 14px rgba(15, 23, 42, 0.08);
}

/* Variante danger del mismo banner (cuando hay valores fuera de rango).
   Sobreescribe el background ABAJO en el archivo — esa regla también
   necesita la capa opaca. */
.prm-edit-warning {
  margin: 0;
  color: var(--color-warning);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
}

/* Banner cambia a rojo cuando hay valores fuera de rango */
.prm-edit-footer.has-out-of-range {
  background:
    linear-gradient(var(--color-danger-soft), var(--color-danger-soft)),
    var(--surface-raised);
  border-color: var(--color-danger);
}
.prm-edit-footer.has-out-of-range .prm-edit-warning {
  color: var(--color-danger-strong, var(--color-danger));
}

body.light-mode .prm-edit-footer {
  border-color: var(--color-warning-strong);
}
body.light-mode .prm-edit-warning {
  color: var(--color-warning-strong);
}

/* ── UTILS ───────────────────────────────────────────────────────────────── */
.prm-popup .hidden { display: none !important; }

/* ── BOTÓN "GESTIONAR RECETAS" en panel de estación ──────────────────────── */
.prod-recipes-panel .prod-recipes-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
}
.prod-recipes-panel .prod-recipes-btn:hover {
  background: var(--accent);
  color: var(--text-inverse);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.prod-recipes-panel .prod-recipes-btn [data-icon] {
  font-size: var(--fs-lg);
  color: var(--accent);
}
.prod-recipes-panel .prod-recipes-btn:hover [data-icon] {
  color: var(--text-inverse);
}
.prod-recipes-panel .prod-recipes-btn-label {
  flex: 1;
}
.prod-recipes-panel .prod-recipes-btn-hint {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-weight: var(--fw-normal);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.prod-recipes-panel .prod-recipes-btn:hover .prod-recipes-btn-hint {
  color: var(--text-inverse);
  opacity: 0.85;
}