/* ==========================================================================
   TEMA: SYNTHWAVE / RETROWAVE 80S (OUTRUN NEON NIGHT)
   Selector: [data-theme="synthwave"]
   ========================================================================== */

[data-theme="synthwave"] {
  /* ------------------------------------------------------------------------
     1. Superficies y Fondos (Púrpura profundo y noche de neón)
     ------------------------------------------------------------------------ */
  --bg-main: #120924;
  --bg-surface: #1a0c33;
  --bg-surface-secondary: #221042;
  --bg-surface-elevated: #2c1654;
  --bg-modal: #180a30;
  --bg-modal-header: #221042;
  --bg-input: #0e061c;
  --bg-card: #1c0e38;
  --bg-card-hover: #26134b;
  --bg-control-bar: rgba(26, 12, 51, 0.85);

  /* ------------------------------------------------------------------------
     2. Bordes y Estructura
     ------------------------------------------------------------------------ */
  --border-dim: rgba(255, 0, 127, 0.25);
  --border-bright: #ff007f;
  --border-active: #00f5d4;

  /* ------------------------------------------------------------------------
     3. Textos y Tipografía
     ------------------------------------------------------------------------ */
  --text-primary: #fff0f5;
  --text-secondary: #ff71ce;
  --text-muted: #9d7db8;

  /* ------------------------------------------------------------------------
     4. Acentos, Acciones y Resplandores (Hot Pink + Cian Vaporwave)
     ------------------------------------------------------------------------ */
  --accent-primary: #ff007f;
  --accent-primary-text: #ffffff;
  --accent-primary-hover: #e60073;
  --accent-primary-glow: 0 0 15px rgba(255, 0, 127, 0.4), 0 0 25px rgba(0, 245, 212, 0.25);
  --accent-primary-glow-raw: rgba(255, 0, 127, 0.4);
  --accent-primary-dim: rgba(255, 0, 127, 0.15);
  --accent-primary-border: rgba(255, 0, 127, 0.5);

  --accent-secondary: #00f5d4;
  --accent-interactive-active: #00f5d4;

  --accent-success: #00f5d4;
  --accent-success-hover: #00d9bc;
  --accent-success-border: #00f5d4;
  --accent-success-dim: rgba(0, 245, 212, 0.2);

  --accent-warning: #ffe600;
  --accent-danger: #ff0055;

  /* Patrón de Fondo Retrowave Grid */
  --bg-pattern: linear-gradient(rgba(255, 0, 127, 0.06) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 245, 212, 0.05) 1px, transparent 1px);
  --bg-pattern-size: 28px 28px;

  /* ------------------------------------------------------------------------
     5. Adaptación de las 5 Comidas (+ Notas) Synthwave
     ------------------------------------------------------------------------ */
  /* Desayuno: Naranja sol poniente */
  --c-desayuno: #ff7b00;
  --c-desayuno-bg: rgba(255, 123, 0, 0.09);
  --c-desayuno-badge: #ff7b00;
  --c-desayuno-badge-bg: rgba(255, 123, 0, 0.18);

  /* Media Mañana: Rosa neón vaporwave */
  --c-mediamanana: #ff007f;
  --c-mediamanana-bg: rgba(255, 0, 127, 0.09);
  --c-mediamanana-badge: #ff007f;
  --c-mediamanana-badge-bg: rgba(255, 0, 127, 0.18);

  /* Comida: Magenta / Púrpura eléctrico */
  --c-comida: #bf00ff;
  --c-comida-bg: rgba(191, 0, 255, 0.09);
  --c-comida-badge: #bf00ff;
  --c-comida-badge-bg: rgba(191, 0, 255, 0.18);

  /* Merienda: Cian retro brillante */
  --c-merienda: #00f5d4;
  --c-merienda-bg: rgba(0, 245, 212, 0.09);
  --c-merienda-badge: #00f5d4;
  --c-merienda-badge-bg: rgba(0, 245, 212, 0.18);

  /* Cena: Azul eléctrico medianoche */
  --c-cena: #7928ca;
  --c-cena-bg: rgba(121, 40, 202, 0.09);
  --c-cena-badge: #9b51e0;
  --c-cena-badge-bg: rgba(121, 40, 202, 0.18);

  /* Notas: Amarillo neón láser */
  --c-notas: #ffe600;
  --c-notas-bg: rgba(255, 230, 0, 0.09);
  --c-notas-badge: #ffe600;
  --c-notas-badge-bg: rgba(255, 230, 0, 0.18);
}

/* ==========================================================================
   DETALLES ESTÉTICOS SYNTHWAVE / OUTRUN 80S
   ========================================================================== */

/* Cabecera con gradiente retro y resplandor sutil */
[data-theme="synthwave"] .app-header {
  background: linear-gradient(180deg, #1e0d3b 0%, #15082a 100%);
  border-bottom: 1px solid rgba(255, 0, 127, 0.35);
  box-shadow: 0 4px 20px rgba(18, 9, 36, 0.8), 0 1px 0 rgba(255, 0, 127, 0.25);
}

[data-theme="synthwave"] .header-badge {
  color: var(--accent-secondary);
  text-shadow: 0 0 8px rgba(0, 245, 212, 0.4);
}

[data-theme="synthwave"] .header-title {
  background: linear-gradient(135deg, #ff71ce 0%, #00f5d4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(255, 0, 127, 0.4));
}

[data-theme="synthwave"] .stat-pill,
[data-theme="synthwave"] .theme-pill {
  background: #1a0c33;
  border-color: rgba(255, 0, 127, 0.3);
}

[data-theme="synthwave"] .stat-val {
  color: var(--accent-secondary);
  text-shadow: 0 0 6px rgba(0, 245, 212, 0.35);
}

[data-theme="synthwave"] .user-val {
  color: var(--text-secondary);
  text-shadow: 0 0 6px rgba(255, 113, 206, 0.35);
}

[data-theme="synthwave"] .theme-select {
  color: var(--text-secondary);
}

[data-theme="synthwave"] .theme-select option {
  background: #1c0e38;
  color: var(--text-primary);
}

/* Barra de control con desenfoque de neón */
[data-theme="synthwave"] .control-bar {
  background: var(--bg-control-bar);
  border-bottom: 1px solid rgba(255, 0, 127, 0.25);
}

/* Botones de acción primarios con gradiente elegante retro y resplandor */
[data-theme="synthwave"] .tech-btn-primary {
  background: linear-gradient(135deg, #ff007f 0%, #bf00ff 100%);
  border-color: #ff007f;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 12px rgba(255, 0, 127, 0.35);
}

[data-theme="synthwave"] .tech-btn-primary:hover {
  background: linear-gradient(135deg, #ff1a8c 0%, #d000ff 100%);
  border-color: #00f5d4;
  box-shadow: 0 0 16px rgba(255, 0, 127, 0.6), 0 0 28px rgba(0, 245, 212, 0.4);
  transform: translateY(-1px);
}

/* Resplandores dobles neón (magenta + cian) en hover interactivo */
[data-theme="synthwave"] .tech-btn-nav:hover {
  background: #2c1654;
  border-color: #00f5d4;
  color: #00f5d4;
  box-shadow: 0 0 12px rgba(255, 0, 127, 0.45), 0 0 22px rgba(0, 245, 212, 0.3);
}

[data-theme="synthwave"] .tech-btn-success {
  background: linear-gradient(135deg, #00d9bc 0%, #009985 100%);
  border-color: #00f5d4;
  color: #0e061c;
  font-weight: 800;
}

[data-theme="synthwave"] .tech-btn-success:hover {
  background: #00f5d4;
  border-color: #00f5d4;
  color: #0e061c;
  box-shadow: 0 0 16px rgba(0, 245, 212, 0.6), 0 0 26px rgba(255, 0, 127, 0.35);
}

[data-theme="synthwave"] .tech-btn-secondary:hover {
  background: #2c1654;
  border-color: #ff007f;
  color: var(--text-primary);
  box-shadow: 0 0 10px rgba(255, 0, 127, 0.35);
}

/* Tabs de navegación móvil */
[data-theme="synthwave"] .mobile-day-tabs {
  background: #160a2d;
  border-bottom: 1px solid rgba(255, 0, 127, 0.25);
}

[data-theme="synthwave"] .day-tab {
  background: #1c0e38;
  border-color: rgba(255, 0, 127, 0.25);
  color: var(--text-secondary);
}

[data-theme="synthwave"] .day-tab.active {
  background: linear-gradient(135deg, #ff007f 0%, #7928ca 100%);
  border-color: #00f5d4;
  color: #ffffff;
  box-shadow: 0 0 14px rgba(255, 0, 127, 0.6), 0 0 24px rgba(0, 245, 212, 0.35);
}

[data-theme="synthwave"] .day-tab.completed .day-tab-dot {
  background: #00f5d4;
  box-shadow: 0 0 8px #00f5d4;
}

/* Columnas de días y tarjetas activas con resplandor neón doble */
[data-theme="synthwave"] .day-column {
  border-color: rgba(255, 0, 127, 0.3);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

[data-theme="synthwave"] .day-column:hover {
  border-color: rgba(255, 0, 127, 0.6);
  box-shadow: 0 0 14px rgba(255, 0, 127, 0.25), 0 0 24px rgba(0, 245, 212, 0.12);
}

[data-theme="synthwave"] .day-column.drag-over {
  border-color: #00f5d4;
  box-shadow: 0 0 18px rgba(0, 245, 212, 0.55), 0 0 32px rgba(255, 0, 127, 0.4);
  transform: translateY(-2px);
}

[data-theme="synthwave"] .day-column.is-completed {
  border-color: rgba(0, 245, 212, 0.45);
  box-shadow: 0 0 16px rgba(0, 245, 212, 0.2), 0 0 25px rgba(255, 0, 127, 0.1);
}

[data-theme="synthwave"] .day-header {
  background: linear-gradient(180deg, #2c1654 0%, #221042 100%);
  border-bottom: 1px solid rgba(255, 0, 127, 0.25);
}

[data-theme="synthwave"] .day-title {
  color: var(--text-primary);
  text-shadow: 0 0 8px rgba(255, 113, 206, 0.3);
}

/* Botón de check de día completado */
[data-theme="synthwave"] .day-check-btn {
  background: rgba(44, 22, 84, 0.4);
  border-color: rgba(255, 0, 127, 0.3);
  color: var(--text-secondary);
}

[data-theme="synthwave"] .day-check-btn:hover {
  background: rgba(0, 245, 212, 0.15);
  border-color: #00f5d4;
  color: #00f5d4;
  box-shadow: 0 0 10px rgba(0, 245, 212, 0.35);
}

[data-theme="synthwave"] .day-check-btn.checked {
  background: rgba(0, 245, 212, 0.2);
  border-color: #00f5d4;
  color: #00f5d4;
  box-shadow: 0 0 14px rgba(0, 245, 212, 0.5), 0 0 24px rgba(255, 0, 127, 0.25);
}

/* Tarjetas de comidas: contraste cálido, excelente legibilidad y sutil aura hover */
[data-theme="synthwave"] .meal-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="synthwave"] .meal-card:hover {
  box-shadow: 0 0 12px rgba(255, 0, 127, 0.3), 0 0 20px rgba(0, 245, 212, 0.18);
  transform: translateY(-1px);
}

[data-theme="synthwave"] .meal-content {
  color: var(--text-primary);
}

[data-theme="synthwave"] .meal-textarea {
  background: var(--bg-input);
  border-color: rgba(255, 0, 127, 0.3);
  color: var(--text-primary);
}

[data-theme="synthwave"] .meal-textarea:focus {
  border-color: var(--border-active);
  box-shadow: 0 0 12px rgba(0, 245, 212, 0.4), 0 0 20px rgba(255, 0, 127, 0.2);
  outline: none;
}

/* Resplandores específicos en badges de comidas */
[data-theme="synthwave"] .meal-card.DESAYUNO .meal-badge {
  box-shadow: 0 0 8px rgba(255, 123, 0, 0.3);
}

[data-theme="synthwave"] .meal-card.MEDIA_MANANA .meal-badge {
  box-shadow: 0 0 8px rgba(255, 0, 127, 0.35);
}

[data-theme="synthwave"] .meal-card.COMIDA .meal-badge {
  box-shadow: 0 0 8px rgba(191, 0, 255, 0.35);
}

[data-theme="synthwave"] .meal-card.MERIENDA .meal-badge {
  box-shadow: 0 0 8px rgba(0, 245, 212, 0.35);
}

[data-theme="synthwave"] .meal-card.CENA .meal-badge {
  box-shadow: 0 0 8px rgba(121, 40, 202, 0.35);
}

[data-theme="synthwave"] .meal-card.NOTAS .meal-badge {
  box-shadow: 0 0 8px rgba(255, 230, 0, 0.3);
}

/* Modales y revisión OCR */
[data-theme="synthwave"] .modal-content {
  border-color: var(--border-bright);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.9), 0 0 20px rgba(255, 0, 127, 0.35), 0 0 35px rgba(0, 245, 212, 0.15);
}

[data-theme="synthwave"] .modal-header {
  background: linear-gradient(135deg, #221042 0%, #2c1654 100%);
  border-bottom: 1px solid rgba(255, 0, 127, 0.3);
}

[data-theme="synthwave"] .modal-title {
  color: var(--text-secondary);
  text-shadow: 0 0 10px rgba(255, 113, 206, 0.4);
}

[data-theme="synthwave"] .modal-close:hover {
  color: var(--accent-secondary);
  text-shadow: 0 0 8px var(--accent-secondary);
}

[data-theme="synthwave"] .upload-dropzone {
  background: var(--bg-input);
  border-color: rgba(255, 0, 127, 0.4);
}

[data-theme="synthwave"] .upload-dropzone:hover {
  border-color: var(--border-active);
  background: rgba(255, 0, 127, 0.08);
  box-shadow: 0 0 18px rgba(0, 245, 212, 0.3), 0 0 28px rgba(255, 0, 127, 0.2);
}

/* Tabla de revisión OCR */
[data-theme="synthwave"] .review-table-wrapper {
  border-color: rgba(255, 0, 127, 0.25);
}

[data-theme="synthwave"] .review-table th {
  background: #221042;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255, 0, 127, 0.25);
  border-right: 1px solid rgba(255, 0, 127, 0.25);
}

[data-theme="synthwave"] .review-table td {
  border-bottom: 1px solid rgba(255, 0, 127, 0.2);
  border-right: 1px solid rgba(255, 0, 127, 0.2);
}

[data-theme="synthwave"] .review-table textarea {
  background: var(--bg-input);
  border-color: rgba(255, 0, 127, 0.3);
  color: var(--text-primary);
}

[data-theme="synthwave"] .review-table textarea:focus {
  border-color: var(--border-active);
  box-shadow: 0 0 10px rgba(0, 245, 212, 0.4);
  outline: none;
}

/* Vista de autenticación y PIN */
[data-theme="synthwave"] .auth-card {
  border-color: rgba(255, 0, 127, 0.4);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.9), 0 0 25px rgba(255, 0, 127, 0.25), 0 0 40px rgba(0, 245, 212, 0.1);
}

[data-theme="synthwave"] .terminal-badge {
  color: var(--accent-secondary);
  background: rgba(0, 245, 212, 0.1);
  border-color: rgba(0, 245, 212, 0.35);
  text-shadow: 0 0 6px rgba(0, 245, 212, 0.4);
}

[data-theme="synthwave"] .tech-input:focus {
  border-color: var(--border-active);
  box-shadow: 0 0 12px rgba(0, 245, 212, 0.4), 0 0 20px rgba(255, 0, 127, 0.2);
}

[data-theme="synthwave"] .pin-dots .dot {
  border-color: var(--accent-primary);
}

[data-theme="synthwave"] .pin-dots .dot.filled {
  background: var(--accent-primary);
  box-shadow: 0 0 12px #ff007f, 0 0 20px #00f5d4;
}

[data-theme="synthwave"] .key-btn {
  background: #1c0e38;
  border-color: rgba(255, 0, 127, 0.3);
  color: var(--text-primary);
}

[data-theme="synthwave"] .key-btn:active {
  background: var(--accent-secondary);
  color: #0e061c;
  box-shadow: 0 0 15px var(--accent-secondary);
}

[data-theme="synthwave"] .key-action {
  background: #221042;
  color: var(--text-secondary);
}

/* Selección de texto y scrollbar */
[data-theme="synthwave"] ::selection {
  background: rgba(255, 0, 127, 0.4);
  color: #ffffff;
}

[data-theme="synthwave"] ::-webkit-scrollbar-thumb {
  background: #6b2fa8;
  border-radius: 4px;
  border: 1px solid rgba(255, 0, 127, 0.3);
}

[data-theme="synthwave"] ::-webkit-scrollbar-thumb:hover {
  background: #ff007f;
  box-shadow: 0 0 8px #ff007f;
}