/* ==========================================================================
   DELLA CHÀ TRALCAO - CONTROL DE PLANTA (PWA TABLET INTERFACE)
   Ubicación: Mariquina, Chile
   Estándar de Diseño: Alta Legibilidad, Contraste Industrial y Ergonomía Táctil
   ========================================================================== */

:root {
  /* Paleta Corporativa Solicitada */
  --cider-burgundy: #6b1d2f;
  --cider-burgundy-light: #8f263e;
  --cider-burgundy-dark: #48121f;
  --cider-burgundy-glow: rgba(107, 29, 47, 0.45);

  --apple-amber: #d9822b;
  --apple-amber-light: #f59e0b;
  --apple-amber-dark: #b45309;
  --apple-amber-glow: rgba(217, 130, 43, 0.4);

  --bg-slate: #121820;
  --bg-slate-dark: #0b0f14;
  --bg-surface: #1a222d;
  --bg-surface-elevated: #222d3b;
  --bg-surface-hover: #293647;

  --border-subtle: #2a3749;
  --border-focus: #d9822b;
  --border-burgundy: #6b1d2f;

  /* Tipografía y Contrastes Nítidos para Bodega */
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-amber: #fbbf24;
  --text-emerald: #34d399;
  --text-rose: #f43f5e;

  /* Estados Funcionales */
  --status-online: #10b981;
  --status-online-glow: rgba(16, 185, 129, 0.35);
  --status-offline: #f59e0b;
  --status-error: #ef4444;

  /* Geometría y Ergonomía Táctil */
  --touch-target-min: 52px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--border-subtle);
  --shadow-glow: 0 0 25px rgba(217, 130, 43, 0.25);
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset y Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: var(--bg-slate);
  color: var(--text-primary);
  line-height: 1.4;
  min-height: 100vh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* Custom Scrollbars para Pantallas Táctiles */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-slate-dark);
}
::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--apple-amber);
}

/* ==========================================================================
   HEADER PRINCIPAL
   ========================================================================== */
.app-header {
  background: linear-gradient(180deg, #17202c 0%, var(--bg-slate) 100%);
  border-bottom: 2px solid var(--border-subtle);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.4);
}

.brand-section {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-logo-badge {
  width: 48px;
  height: 48px;
  background: radial-gradient(circle at 30% 30%, var(--cider-burgundy-light), var(--cider-burgundy-dark));
  border: 2px solid var(--apple-amber);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 15px var(--apple-amber-glow);
  flex-shrink: 0;
}

.brand-logo-badge svg {
  width: 28px;
  height: 28px;
  fill: var(--apple-amber);
}

.brand-info h1 {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-info h1 span.divider {
  color: var(--apple-amber);
  font-weight: 300;
}

.brand-subtitle {
  font-size: 0.78rem;
  color: var(--apple-amber);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Header Centro: Estado de Sincronización WHM SQL */
.header-center {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sync-status-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.sync-status-card:hover {
  background: var(--bg-surface-elevated);
  border-color: var(--apple-amber);
}

.sync-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--status-online);
  box-shadow: 0 0 12px var(--status-online);
  animation: pulse-dot 2.5s infinite;
}

.sync-status-card.offline .sync-dot {
  background-color: var(--status-offline);
  box-shadow: 0 0 12px var(--status-offline);
  animation: none;
}

@keyframes pulse-dot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 var(--status-online-glow); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.sync-text {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.3px;
}

.sync-subtext {
  font-size: 0.7rem;
  color: var(--text-emerald);
  display: block;
}

.sync-status-card.offline .sync-subtext {
  color: var(--text-amber);
}

/* Header Derecho: Badge Operario e Interruptores de Planta */
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.operator-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(107, 29, 47, 0.4), var(--bg-surface));
  border: 1px solid var(--cider-burgundy);
  padding: 6px 14px;
  border-radius: var(--radius-md);
}

.operator-avatar {
  width: 32px;
  height: 32px;
  background: var(--cider-burgundy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-primary);
  border: 1px solid var(--apple-amber);
}

.operator-meta {
  display: flex;
  flex-direction: column;
}

.operator-role {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
}

.operator-station {
  font-size: 0.68rem;
  color: var(--apple-amber);
  text-transform: uppercase;
  font-weight: 600;
}

.header-action-btn {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
}

.header-action-btn:hover {
  background: var(--bg-surface-elevated);
  color: var(--apple-amber);
  border-color: var(--apple-amber);
}

/* ==========================================================================
   LAYOUT PRINCIPAL - SPLIT VIEW PARA TABLETS INDUSTRIALES
   ========================================================================== */
.main-plant-container {
  flex: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 20px;
  padding: 20px;
  max-width: 1920px;
  margin: 0 auto;
  width: 100%;
}

@media (max-width: 1080px) {
  .main-plant-container {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ==========================================================================
   PANEL IZQUIERDO: MONITOR DE CALDOS EN ESTANQUES (TANK BROTH MONITOR)
   ========================================================================== */
.tanks-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-surface);
  padding: 14px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
}

.panel-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.panel-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: rgba(217, 130, 43, 0.15);
  border: 1px solid var(--apple-amber);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--apple-amber);
}

.panel-title-group h2 {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--text-primary);
}

.panel-title-group p {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.tank-summary-pill {
  background: var(--bg-slate-dark);
  border: 1px solid var(--border-subtle);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--apple-amber);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Grilla de 6 Estanques */
.tanks-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (min-width: 1500px) {
  .tanks-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .tanks-grid {
    grid-template-columns: 1fr;
  }
}

/* Tarjeta de Estanque */
.tank-card {
  background: var(--bg-surface);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-card);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.tank-card:hover {
  border-color: var(--apple-amber);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6), 0 0 15px var(--apple-amber-glow);
}

.tank-card.selected {
  border-color: var(--apple-amber);
  background: linear-gradient(135deg, rgba(217, 130, 43, 0.08) 0%, var(--bg-surface) 100%);
  box-shadow: 0 0 0 3px rgba(217, 130, 43, 0.4), var(--shadow-card);
}

.tank-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.tank-number-tag {
  display: inline-block;
  background: var(--bg-slate-dark);
  color: var(--apple-amber);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(217, 130, 43, 0.3);
  margin-bottom: 4px;
}

.tank-name {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
}

.tank-gl-badge {
  background: rgba(107, 29, 47, 0.4);
  border: 1px solid var(--cider-burgundy);
  color: #fca5a5;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Medidor de Líquido Visual (Liquid Tank Gauge) */
.tank-visual-container {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-slate-dark);
  border-radius: var(--radius-md);
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.tank-bottle-preview {
  width: 44px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 2px;
}

.tank-bottle-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
  transition: transform 0.2s ease;
}

.tank-card:hover .tank-bottle-preview img {
  transform: scale(1.08) translateY(-2px);
}

.variety-touch-btn img.v-bottle-thumb {
  height: 38px;
  width: auto;
  object-fit: contain;
  margin-bottom: 2px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.tank-gauge-cylinder {
  width: 60px;
  height: 120px;
  background: #0f151c;
  border: 2px solid #334155;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8);
  flex-shrink: 0;
}

/* Marcas de graduación del estanque (25%, 50%, 75%) */
.gauge-ticks {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 5;
}

.gauge-tick {
  position: absolute;
  right: 4px;
  width: 10px;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
}

.gauge-tick::after {
  content: attr(data-label);
  position: absolute;
  right: 14px;
  top: -6px;
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
}

.gauge-tick[data-pos="75"] { top: 25%; }
.gauge-tick[data-pos="50"] { top: 50%; width: 14px; background: rgba(255, 255, 255, 0.5); }
.gauge-tick[data-pos="25"] { top: 75%; }

/* Reflejo de cristal vertical */
.gauge-glare {
  position: absolute;
  top: 0;
  left: 6px;
  width: 6px;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 6;
  border-radius: 4px;
}

/* Cuerpo del Líquido Dinámico */
.tank-liquid {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%; /* Dinámico según % */
  transition: height 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

/* Variaciones de color de caldo por variedad */
.liquid-amber {
  background: linear-gradient(180deg, #f59e0b 0%, #b45309 60%, #78350f 100%);
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
}

.liquid-rose {
  background: linear-gradient(180deg, #fb7185 0%, #be123c 60%, #881337 100%);
  box-shadow: 0 0 15px rgba(251, 113, 133, 0.4);
}

.liquid-murta {
  background: linear-gradient(180deg, #9f1239 0%, #6b1d2f 60%, #4c0519 100%);
  box-shadow: 0 0 15px rgba(159, 18, 57, 0.4);
}

.liquid-lemon-brut {
  background: linear-gradient(180deg, #fef08a 0%, #ca8a04 60%, #854d0e 100%);
  box-shadow: 0 0 15px rgba(254, 240, 138, 0.4);
}

.liquid-lemon-demi {
  background: linear-gradient(180deg, #fde047 0%, #d97706 60%, #92400e 100%);
  box-shadow: 0 0 15px rgba(253, 224, 71, 0.4);
}

.liquid-chicha {
  background: linear-gradient(180deg, #d97706 0%, #92400e 60%, #58240c 100%);
  box-shadow: 0 0 15px rgba(217, 119, 6, 0.4);
}

/* Olas y Efervescencia de Sidra */
.liquid-wave {
  position: absolute;
  top: -8px;
  left: -50%;
  width: 200%;
  height: 14px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 40%;
  animation: wave-anim 3.5s infinite linear;
}

@keyframes wave-anim {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Lecturas y Estadísticas del Estanque */
.tank-readings {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reading-primary {
  display: flex;
  flex-direction: column;
}

.reading-liters-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.reading-liters {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}

.reading-unit {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--apple-amber);
}

.reading-capacity {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.reading-percentage-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-emerald);
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 2px 8px;
  border-radius: 999px;
  align-self: flex-start;
}

.reading-percentage-badge.warning {
  color: var(--apple-amber-light);
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.3);
}

.reading-percentage-badge.danger {
  color: var(--text-rose);
  background: rgba(244, 63, 94, 0.12);
  border-color: rgba(244, 63, 94, 0.3);
}

/* Métrica de Cajas Potenciales Restantes (Liters / 4.2 L) */
.tank-boxes-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.boxes-label {
  display: flex;
  flex-direction: column;
}

.boxes-label span.title {
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 600;
}

.boxes-label span.formula {
  font-size: 0.62rem;
  color: var(--text-muted);
}

.boxes-value-badge {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--apple-amber-light);
  background: rgba(217, 130, 43, 0.15);
  padding: 3px 10px;
  border-radius: 8px;
  border: 1px solid rgba(217, 130, 43, 0.3);
}

/* ==========================================================================
   PANEL DERECHO: FORMULARIO DE REGISTRO RÁPIDO Y TECLADO TÁCTIL
   ========================================================================== */
.entry-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.entry-card {
  background: var(--bg-surface);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Selector de Variedades en Botones Grandes */
.form-section-title {
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.form-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

.varieties-touch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

@media (max-width: 600px) {
  .varieties-touch-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.variety-touch-btn {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  cursor: pointer;
  transition: var(--transition-fast);
  min-height: 64px;
  position: relative;
}

.variety-touch-btn:active {
  transform: scale(0.97);
}

.variety-touch-btn:hover {
  background: var(--bg-surface-hover);
  border-color: var(--apple-amber);
}

.variety-touch-btn.active {
  background: linear-gradient(135deg, var(--cider-burgundy) 0%, #4a1320 100%);
  border-color: var(--apple-amber);
  box-shadow: 0 0 15px var(--cider-burgundy-glow), inset 0 0 0 1px var(--apple-amber);
}

.variety-touch-btn .v-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.15;
}

.variety-touch-btn.active .v-name {
  color: #ffffff;
}

.variety-touch-btn .v-tank {
  font-size: 0.65rem;
  color: var(--apple-amber);
  font-weight: 600;
}

/* Selector desplegable de estanque complementario */
.tank-select-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.touch-select {
  width: 100%;
  height: var(--touch-target-min);
  background: var(--bg-slate-dark);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0 14px;
  cursor: pointer;
  outline: none;
  transition: var(--transition-fast);
}

.touch-select:focus {
  border-color: var(--apple-amber);
  box-shadow: 0 0 0 2px var(--apple-amber-glow);
}

/* Visualizador de Cajas Embotelladas */
.bottling-input-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.input-display-box {
  background: var(--bg-slate-dark);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: var(--transition-fast);
}

.input-display-box.focused {
  border-color: var(--apple-amber);
  box-shadow: 0 0 15px var(--apple-amber-glow);
}

.display-meta {
  display: flex;
  flex-direction: column;
}

.display-meta-title {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
}

.display-meta-sub {
  font-size: 0.68rem;
  color: var(--apple-amber);
  font-weight: 500;
}

.display-digits-container {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.display-digits {
  font-size: 2.3rem;
  font-weight: 900;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}

.display-digits.zero {
  color: var(--text-muted);
}

.display-unit {
  font-size: 1rem;
  font-weight: 700;
  color: var(--apple-amber);
}

/* Presets rápidos (+10, +25, +50, +100, MÁX) */
.quick-presets-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.preset-pill {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 700;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
}

.preset-pill:hover {
  background: var(--apple-amber);
  color: #000;
  border-color: var(--apple-amber);
}

.preset-pill:active {
  transform: scale(0.95);
}

.preset-pill.max-btn {
  background: rgba(107, 29, 47, 0.4);
  border-color: var(--cider-burgundy);
  color: #fca5a5;
}

.preset-pill.max-btn:hover {
  background: var(--cider-burgundy);
  color: #fff;
}

/* TECLADO NUMÉRICO TÁCTIL (LARGE NUMERIC TOUCH KEYPAD) */
.touch-keypad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 4px;
}

.keypad-key {
  height: 62px;
  background: var(--bg-surface-elevated);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 1.6rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.1s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.keypad-key:active {
  background: var(--apple-amber);
  color: #0b0f14;
  transform: scale(0.94);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.keypad-key:hover {
  border-color: var(--apple-amber);
}

.keypad-key.action-clear {
  color: var(--text-rose);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.keypad-key.action-backspace {
  color: var(--apple-amber);
}

/* CAJA DE CONVERSIÓN DINÁMICA (DYNAMIC CONVERSION BOX) */
.dynamic-conversion-box {
  background: linear-gradient(135deg, rgba(217, 130, 43, 0.12) 0%, rgba(107, 29, 47, 0.12) 100%);
  border: 2px solid var(--apple-amber);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 0 20px rgba(217, 130, 43, 0.15);
}

.conversion-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.conversion-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--apple-amber-light);
  letter-spacing: 0.5px;
}

.conversion-formula-badge {
  font-size: 0.7rem;
  background: rgba(0, 0, 0, 0.4);
  color: var(--text-secondary);
  padding: 2px 8px;
  border-radius: 4px;
}

.conversion-main-text {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.conversion-main-text .highlight-liters {
  color: var(--apple-amber);
  font-size: 1.35rem;
  font-weight: 900;
  background: rgba(0, 0, 0, 0.5);
  padding: 2px 10px;
  border-radius: 6px;
  border: 1px solid rgba(217, 130, 43, 0.4);
}

/* Indicador de advertencia si excede stock */
.stock-warning-banner {
  display: none;
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid var(--status-error);
  color: #fca5a5;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 8px;
  align-items: center;
  gap: 8px;
}

.stock-warning-banner.visible {
  display: flex;
}

/* BOTÓN MAESTRO DE ACCIÓN: REGISTRAR EMBOTELLADO Y DESCONTAR CALDO */
.btn-primary-action {
  width: 100%;
  height: 64px;
  background: linear-gradient(135deg, var(--cider-burgundy) 0%, var(--cider-burgundy-light) 100%);
  border: 2px solid var(--apple-amber);
  border-radius: var(--radius-md);
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(107, 29, 47, 0.5), 0 0 15px var(--apple-amber-glow);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 4px;
}

.btn-primary-action:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(107, 29, 47, 0.7), 0 0 25px rgba(217, 130, 43, 0.6);
  background: linear-gradient(135deg, var(--cider-burgundy-light) 0%, var(--cider-burgundy) 100%);
}

.btn-primary-action:active:not(:disabled) {
  transform: scale(0.98);
}

.btn-primary-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  border-color: var(--border-subtle);
  background: var(--bg-surface-elevated);
}

/* ==========================================================================
   MODAL DE CONFIRMACIÓN DE TRANSACCIÓN (PRE-COMMIT)
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11, 15, 20, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-card {
  background: var(--bg-surface);
  border: 2px solid var(--apple-amber);
  border-radius: var(--radius-xl);
  max-width: 560px;
  width: 100%;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 40px var(--apple-amber-glow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: scale(0.92);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-backdrop.active .modal-card {
  transform: scale(1);
}

.modal-header {
  background: linear-gradient(135deg, var(--cider-burgundy) 0%, #43101c 100%);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--apple-amber);
}

.modal-header-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-header-title h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: #ffffff;
}

.modal-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.summary-item {
  background: var(--bg-slate-dark);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.summary-item.full-width {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(217, 130, 43, 0.15), var(--bg-slate-dark));
  border-color: var(--apple-amber);
}

.summary-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 700;
}

.summary-val {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
}

.summary-val.highlight-amber {
  color: var(--apple-amber-light);
  font-size: 1.35rem;
}

.summary-val.highlight-rose {
  color: #fca5a5;
}

/* Comparador de nivel Antes / Después */
.tank-impact-preview {
  background: var(--bg-surface-elevated);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--border-subtle);
}

.impact-stage {
  display: flex;
  flex-direction: column;
}

.impact-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 700;
}

.impact-val {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary);
}

.impact-arrow {
  color: var(--apple-amber);
  font-size: 1.4rem;
  font-weight: 900;
}

/* Destino de base de datos */
.db-target-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.78rem;
  color: var(--text-emerald);
}

.modal-footer {
  padding: 16px 24px;
  background: var(--bg-slate-dark);
  border-top: 1px solid var(--border-subtle);
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 12px;
}

.btn-modal-cancel {
  height: 52px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-modal-cancel:hover {
  background: var(--bg-surface-elevated);
  color: #ffffff;
}

.btn-modal-confirm {
  height: 52px;
  background: linear-gradient(135deg, var(--apple-amber) 0%, var(--apple-amber-dark) 100%);
  border: none;
  border-radius: var(--radius-md);
  color: #0b0f14;
  font-weight: 900;
  font-size: 0.98rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 15px rgba(217, 130, 43, 0.4);
  transition: var(--transition-fast);
}

.btn-modal-confirm:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.btn-modal-confirm:active {
  transform: scale(0.97);
}

/* ==========================================================================
   TOAST NOTIFICATIONS (CONFIRMACIÓN INMEDIATA EN PANTALLA)
   ========================================================================== */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 2000;
  pointer-events: none;
}

.toast {
  background: var(--bg-surface-elevated);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.9rem;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
  max-width: 400px;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.toast.success {
  border-color: var(--status-online);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), var(--bg-surface-elevated));
}

.toast.warning {
  border-color: var(--apple-amber);
}

/* ==========================================================================
   DRAWER HISTORIAL DE REGISTROS / AUDITORÍA DE TURNO
   ========================================================================== */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.drawer-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.drawer-panel {
  position: fixed;
  top: 0;
  right: -420px;
  width: 420px;
  max-width: 100vw;
  height: 100vh;
  background: var(--bg-surface);
  border-left: 2px solid var(--border-subtle);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.7);
  z-index: 1300;
  transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.drawer-backdrop.active + .drawer-panel,
.drawer-panel.active {
  right: 0;
}

.drawer-header {
  padding: 18px 24px;
  background: var(--bg-slate-dark);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drawer-header h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary);
}

.drawer-close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
}

.drawer-close-btn:hover {
  color: #fff;
  background: var(--bg-surface);
}

.drawer-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.history-card {
  background: var(--bg-slate-dark);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.history-time {
  font-size: 0.7rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.history-variety {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--apple-amber);
}

.history-numbers {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.history-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 0.9rem;
}