/* ==========================================================================
   TEMA: MATRIX CRT TERMINAL ([data-theme="matrix-crt"])
   Estética retro hacker / Mainframe DEC VT220 / Fósforo Verde Monocromo P1
   ========================================================================== */

[data-theme="matrix-crt"] {
  /* ------------------------------------------------------------------------
     1. Superficies y Fondos (Negro absoluto y negro terminal verdoso)
     ------------------------------------------------------------------------ */
  --bg-main: #020703;
  --bg-surface: #040d06;
  --bg-surface-secondary: #061409;
  --bg-surface-elevated: #091a0c;
  --bg-modal: #040e06;
  --bg-modal-header: #020703;
  --bg-input: #020603;
  --bg-card: #040d06;
  --bg-card-hover: #07190b;
  --bg-control-bar: rgba(4, 13, 6, 0.90);

  /* ------------------------------------------------------------------------
     2. Bordes y Estructura Rígida Terminal
     ------------------------------------------------------------------------ */
  --border-dim: #00441b;
  --border-bright: #00bb44;
  --border-active: #00ff66;
  --border-radius-card: 2px;

  /* ------------------------------------------------------------------------
     3. Textos Monocromáticos Fósforo Verde P1
     ------------------------------------------------------------------------ */
  --text-primary: #00ff66;
  --text-secondary: #00cc44;
  --text-muted: #008833;

  /* ------------------------------------------------------------------------
     4. Acentos, Interacciones y Glow Fósforo
     ------------------------------------------------------------------------ */
  --accent-primary: #00ff66;
  --accent-primary-text: #020703;
  --accent-primary-hover: #33ff88;
  --accent-primary-glow: 0 0 12px rgba(0, 255, 102, 0.4);
  --accent-primary-dim: rgba(0, 255, 102, 0.12);
  --accent-primary-border: rgba(0, 255, 102, 0.4);

  --accent-secondary: #00cc44;
  --accent-interactive-active: #00ff66;
  --accent-success: #00ff66;
  --accent-success-hover: #33ff88;
  --accent-success-border: #00ff66;
  --accent-success-dim: rgba(0, 255, 102, 0.18);
  --accent-warning: #aaff00;
  --accent-danger: #ff3344;

  /* Patrón de Fondo CRT */
  --bg-pattern: repeating-linear-gradient(
    0deg,
    rgba(0, 255, 102, 0.025) 0px,
    rgba(0, 255, 102, 0.025) 1px,
    transparent 1px,
    transparent 3px
  );
  --bg-pattern-size: 100% 3px;

  /* ------------------------------------------------------------------------
     5. Adaptación de las 5 Comidas (+ Notas) en el Espectro Fósforo
     ------------------------------------------------------------------------ */
  /* Desayuno: Verde fósforo P1 brillante */
  --c-desayuno: #00ff66;
  --c-desayuno-bg: rgba(0, 255, 102, 0.07);
  --c-desayuno-badge: #00ff66;
  --c-desayuno-badge-bg: rgba(0, 255, 102, 0.16);

  /* Media Mañana: Verde menta terminal */
  --c-mediamanana: #33ff99;
  --c-mediamanana-bg: rgba(51, 255, 153, 0.07);
  --c-mediamanana-badge: #33ff99;
  --c-mediamanana-badge-bg: rgba(51, 255, 153, 0.16);

  /* Comida: Verde esmeralda intenso */
  --c-comida: #00dd55;
  --c-comida-bg: rgba(0, 221, 85, 0.07);
  --c-comida-badge: #00dd55;
  --c-comida-badge-bg: rgba(0, 221, 85, 0.16);

  /* Merienda: Verde lima fósforo */
  --c-merienda: #66ff33;
  --c-merienda-bg: rgba(102, 255, 51, 0.07);
  --c-merienda-badge: #66ff33;
  --c-merienda-badge-bg: rgba(102, 255, 51, 0.16);

  /* Cena: Verde jade profundo */
  --c-cena: #00aa44;
  --c-cena-bg: rgba(0, 170, 68, 0.07);
  --c-cena-badge: #00aa44;
  --c-cena-badge-bg: rgba(0, 170, 68, 0.16);

  /* Notas: Verde ámbar fósforo */
  --c-notas: #aaff00;
  --c-notas-bg: rgba(170, 255, 0, 0.07);
  --c-notas-badge: #aaff00;
  --c-notas-badge-bg: rgba(170, 255, 0, 0.16);
}

/* ==========================================================================
   SCANLINES CRT Y BEZEL VIGNETTE (EFECTO MONITOR DE FÓSFORO)
   ========================================================================== */

/* Scanlines horizontales sutiles y no intrusivas (pointer-events: none) */
[data-theme="matrix-crt"]::before {
  content: " ";
  display: block;
  position: fixed;
  inset: 0;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%,
    rgba(0, 0, 0, 0.32) 50%
  );
  background-size: 100% 4px;
  z-index: 99999;
  pointer-events: none;
  user-select: none;
  opacity: 0.35;
}

/* Viñeteado CRT perimetral de tubo catódico */
[data-theme="matrix-crt"]::after {
  content: " ";
  display: block;
  position: fixed;
  inset: 0;
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.85), inset 0 0 25px rgba(0, 255, 102, 0.06);
  z-index: 99998;
  pointer-events: none;
  user-select: none;
}

/* ==========================================================================
   SELECCIÓN Y SCROLLBARS TERMINAL MATRIX
   ========================================================================== */

[data-theme="matrix-crt"] ::selection {
  background: #00ff66;
  color: #020703;
}

[data-theme="matrix-crt"] ::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

[data-theme="matrix-crt"] ::-webkit-scrollbar-track {
  background: #020703;
  border: 1px solid #00441b;
}

[data-theme="matrix-crt"] ::-webkit-scrollbar-thumb {
  background: #00441b;
  border: 1px solid #00bb44;
  border-radius: 0;
}

[data-theme="matrix-crt"] ::-webkit-scrollbar-thumb:hover {
  background: #00ff66;
  box-shadow: 0 0 8px #00ff66;
}

/* ==========================================================================
   ESTÉTICA TERMINAL RÍGIDA (BORDER-RADIUS 0PX O 2PX)
   ========================================================================== */

[data-theme="matrix-crt"] .auth-card,
[data-theme="matrix-crt"] .tech-input,
[data-theme="matrix-crt"] .tech-btn,
[data-theme="matrix-crt"] .key-btn,
[data-theme="matrix-crt"] .stat-pill,
[data-theme="matrix-crt"] .theme-pill,
[data-theme="matrix-crt"] .tech-select,
[data-theme="matrix-crt"] .day-tab,
[data-theme="matrix-crt"] .day-column,
[data-theme="matrix-crt"] .day-header,
[data-theme="matrix-crt"] .day-check-btn,
[data-theme="matrix-crt"] .meal-card,
[data-theme="matrix-crt"] .meal-badge,
[data-theme="matrix-crt"] .meal-textarea,
[data-theme="matrix-crt"] .modal-content,
[data-theme="matrix-crt"] .upload-dropzone,
[data-theme="matrix-crt"] .review-table-wrapper,
[data-theme="matrix-crt"] .review-table textarea,
[data-theme="matrix-crt"] .warning-box,
[data-theme="matrix-crt"] .terminal-badge,
[data-theme="matrix-crt"] .user-display,
[data-theme="matrix-crt"] .user-item {
  border-radius: 2px !important;
}

/* ==========================================================================
   CURSOR PARPADEANTE TERMINAL HACKER
   ========================================================================== */

@keyframes matrix-cursor-blink {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

[data-theme="matrix-crt"] .header-title::after {
  content: " █";
  display: inline-block;
  color: #00ff66;
  font-size: 0.8em;
  line-height: 1;
  text-shadow: 0 0 8px rgba(0, 255, 102, 0.7);
  animation: matrix-cursor-blink 1.2s steps(1, start) infinite;
  margin-left: 5px;
  vertical-align: baseline;
}

[data-theme="matrix-crt"] .auth-title::after {
  content: " _";
  display: inline-block;
  color: #00ff66;
  animation: matrix-cursor-blink 1s steps(1, start) infinite;
  margin-left: 4px;
}

/* ==========================================================================
   GLOW FÓSFORO VERDE EN CABECERAS Y BADGES
   ========================================================================== */

[data-theme="matrix-crt"] .header-title,
[data-theme="matrix-crt"] .auth-title,
[data-theme="matrix-crt"] .modal-title,
[data-theme="matrix-crt"] .review-header h3,
[data-theme="matrix-crt"] .day-title {
  color: #00ff66;
  text-shadow: 0 0 6px rgba(0, 255, 102, 0.55), 0 0 14px rgba(0, 255, 102, 0.25);
}

[data-theme="matrix-crt"] .terminal-badge {
  text-shadow: 0 0 5px rgba(0, 255, 102, 0.4);
  box-shadow: 0 0 8px rgba(0, 255, 102, 0.2);
}

/* Glow en badges de comida según su respectivo espectro fósforo */
[data-theme="matrix-crt"] .meal-badge {
  text-shadow: 0 0 5px currentColor;
  box-shadow: 0 0 6px rgba(0, 255, 102, 0.15);
}

[data-theme="matrix-crt"] .meal-card.DESAYUNO .meal-badge {
  text-shadow: 0 0 6px rgba(0, 255, 102, 0.7);
}
[data-theme="matrix-crt"] .meal-card.MEDIA_MANANA .meal-badge {
  text-shadow: 0 0 6px rgba(51, 255, 153, 0.7);
}
[data-theme="matrix-crt"] .meal-card.COMIDA .meal-badge {
  text-shadow: 0 0 6px rgba(0, 221, 85, 0.7);
}
[data-theme="matrix-crt"] .meal-card.MERIENDA .meal-badge {
  text-shadow: 0 0 6px rgba(102, 255, 51, 0.7);
}
[data-theme="matrix-crt"] .meal-card.CENA .meal-badge {
  text-shadow: 0 0 6px rgba(0, 170, 68, 0.7);
}
[data-theme="matrix-crt"] .meal-card.NOTAS .meal-badge {
  text-shadow: 0 0 6px rgba(170, 255, 0, 0.7);
}

/* ==========================================================================
   ACENTOS DE BOTONES E INTERACCIONES TERMINAL
   ========================================================================== */

[data-theme="matrix-crt"] .tech-btn-primary {
  background: #003815;
  color: #00ff66;
  border: 1px solid #00ff66;
  text-shadow: 0 0 5px rgba(0, 255, 102, 0.5);
  box-shadow: 0 0 10px rgba(0, 255, 102, 0.2);
}

[data-theme="matrix-crt"] .tech-btn-primary:hover {
  background: #00ff66;
  color: #020703;
  box-shadow: 0 0 16px rgba(0, 255, 102, 0.6);
  text-shadow: none;
}

[data-theme="matrix-crt"] .tech-btn-success {
  background: #00441b;
  color: #00ff66;
  border: 1px solid #00bb44;
  text-shadow: 0 0 4px rgba(0, 255, 102, 0.4);
}

[data-theme="matrix-crt"] .tech-btn-success:hover {
  background: #00bb44;
  color: #020703;
  box-shadow: 0 0 14px rgba(0, 187, 68, 0.6);
  text-shadow: none;
}

[data-theme="matrix-crt"] .tech-btn-accent {
  background: rgba(0, 255, 102, 0.1);
  border: 1px solid #00ff66;
  color: #00ff66;
  text-shadow: 0 0 5px rgba(0, 255, 102, 0.4);
}

[data-theme="matrix-crt"] .tech-btn-accent:hover {
  background: #00ff66;
  color: #020703;
  box-shadow: 0 0 15px rgba(0, 255, 102, 0.6);
  text-shadow: none;
}

[data-theme="matrix-crt"] .tech-btn-secondary {
  background: #040d06;
  border: 1px solid #00441b;
  color: #00cc44;
}

[data-theme="matrix-crt"] .tech-btn-secondary:hover {
  background: #061409;
  border-color: #00bb44;
  color: #00ff66;
  box-shadow: 0 0 8px rgba(0, 255, 102, 0.25);
}

[data-theme="matrix-crt"] .tech-btn-nav {
  background: #040d06;
  border: 1px solid #00441b;
  color: #00ff66;
}

[data-theme="matrix-crt"] .tech-btn-nav:hover {
  background: #00441b;
  border-color: #00ff66;
  color: #33ff88;
  box-shadow: 0 0 10px rgba(0, 255, 102, 0.35);
}

/* PIN Keypad y Dots */
[data-theme="matrix-crt"] .key-btn {
  background: #040d06;
  border: 1px solid #00441b;
  color: #00ff66;
  transition: all 0.12s ease;
}

[data-theme="matrix-crt"] .key-btn:hover {
  background: #061409;
  border-color: #00bb44;
  box-shadow: 0 0 10px rgba(0, 255, 102, 0.25);
}

[data-theme="matrix-crt"] .key-btn:active {
  background: #00ff66;
  color: #020703;
  box-shadow: 0 0 18px rgba(0, 255, 102, 0.7);
}

[data-theme="matrix-crt"] .pin-dots .dot {
  border-radius: 2px !important;
  border: 1px solid #00bb44;
  background: #020703;
}

[data-theme="matrix-crt"] .pin-dots .dot.filled {
  background: #00ff66;
  box-shadow: 0 0 10px #00ff66, 0 0 20px rgba(0, 255, 102, 0.5);
}

/* Auth Card & Warning Box */
[data-theme="matrix-crt"] .auth-card {
  border: 1px solid #00bb44;
  box-shadow: 0 0 35px rgba(0, 255, 102, 0.15), inset 0 0 30px rgba(0, 0, 0, 0.9);
}

[data-theme="matrix-crt"] .warning-box {
  background: rgba(170, 255, 0, 0.08);
  border: 1px solid #aaff00;
  color: #aaff00;
}

[data-theme="matrix-crt"] .warning-text {
  color: #aaff00;
  font-family: var(--font-mono);
}

/* ==========================================================================
   COLUMNAS DE HORARIO Y CHECK DE DÍA
   ========================================================================== */

[data-theme="matrix-crt"] .day-column {
  background: #040d06;
  border: 1px solid #00441b;
}

[data-theme="matrix-crt"] .day-column:hover {
  border-color: #00bb44;
}

[data-theme="matrix-crt"] .day-column.drag-over {
  border-color: #00ff66;
  box-shadow: 0 0 20px rgba(0, 255, 102, 0.35);
  transform: translateY(-2px);
}

[data-theme="matrix-crt"] .day-column.is-completed {
  border-color: #00bb44;
  box-shadow: 0 0 15px rgba(0, 255, 102, 0.15);
}

[data-theme="matrix-crt"] .day-header {
  background: #091a0c;
  border-bottom: 1px solid #00441b;
}

[data-theme="matrix-crt"] .day-check-btn {
  background: #020703;
  border: 1px solid #00441b;
  color: #00cc44;
}

[data-theme="matrix-crt"] .day-check-btn:hover {
  background: rgba(0, 255, 102, 0.12);
  border-color: #00ff66;
  color: #00ff66;
  box-shadow: 0 0 10px rgba(0, 255, 102, 0.3);
}

[data-theme="matrix-crt"] .day-check-btn.checked {
  background: rgba(0, 255, 102, 0.2);
  border-color: #00ff66;
  color: #00ff66;
  box-shadow: 0 0 12px rgba(0, 255, 102, 0.35);
}

/* ==========================================================================
   HEADER Y CONTROL BAR
   ========================================================================== */

[data-theme="matrix-crt"] .app-header {
  background: #040d06;
  border-bottom: 1px solid #00441b;
}

[data-theme="matrix-crt"] .header-badge {
  color: #00cc44;
  letter-spacing: 2px;
}

[data-theme="matrix-crt"] .header-subtitle {
  color: #008833;
}

[data-theme="matrix-crt"] .stat-pill {
  background: #061409;
  border: 1px solid #00441b;
}

[data-theme="matrix-crt"] .stat-label {
  color: #008833;
}

[data-theme="matrix-crt"] .stat-val {
  color: #00ff66;
  text-shadow: 0 0 6px rgba(0, 255, 102, 0.4);
}

[data-theme="matrix-crt"] .user-val {
  color: #33ff99;
}

[data-theme="matrix-crt"] .theme-pill {
  background: #061409;
  border: 1px solid #00bb44;
  box-shadow: 0 0 8px rgba(0, 255, 102, 0.2);
}

[data-theme="matrix-crt"] .theme-select {
  color: #00ff66;
}

[data-theme="matrix-crt"] .theme-select option {
  background: #020703;
  color: #00ff66;
}

[data-theme="matrix-crt"] .control-bar {
  background: rgba(4, 13, 6, 0.9);
  border-bottom: 1px solid #00441b;
}

/* ==========================================================================
   TABS MÓVIL
   ========================================================================== */

[data-theme="matrix-crt"] .mobile-day-tabs {
  background: #040d06;
  border-bottom: 1px solid #00441b;
}

[data-theme="matrix-crt"] .day-tab {
  background: #061409;
  border: 1px solid #00441b;
  color: #00cc44;
}

[data-theme="matrix-crt"] .day-tab.active {
  background: #00441b;
  border-color: #00ff66;
  color: #00ff66;
  box-shadow: 0 0 8px rgba(0, 255, 102, 0.3);
}

[data-theme="matrix-crt"] .day-tab.completed .day-tab-dot {
  background: #00ff66;
  box-shadow: 0 0 6px #00ff66;
}

/* ==========================================================================
   MODALES, TABLAS Y DROPZONE OCR (LEGIBILIDAD PERFECTA)
   ========================================================================== */

[data-theme="matrix-crt"] .modal-content {
  background: #040e06;
  border: 1px solid #00bb44;
  box-shadow: 0 0 40px rgba(0, 255, 102, 0.22), 0 0 15px rgba(0, 0, 0, 0.95);
}

[data-theme="matrix-crt"] .modal-header {
  background: #020703;
  border-bottom: 1px solid #00441b;
}

[data-theme="matrix-crt"] .modal-close {
  color: #008833;
}

[data-theme="matrix-crt"] .modal-close:hover {
  color: #00ff66;
  text-shadow: 0 0 6px #00ff66;
}

/* Dropzone de subida OCR */
[data-theme="matrix-crt"] .upload-dropzone {
  background: #020603;
  border: 2px dashed #00bb44;
  transition: all 0.2s ease;
}

[data-theme="matrix-crt"] .upload-dropzone:hover {
  border-color: #00ff66;
  background: rgba(0, 255, 102, 0.08);
  box-shadow: 0 0 22px rgba(0, 255, 102, 0.25), inset 0 0 20px rgba(0, 255, 102, 0.05);
}

[data-theme="matrix-crt"] .camera-icon {
  filter: drop-shadow(0 0 8px rgba(0, 255, 102, 0.6));
}

[data-theme="matrix-crt"] .dropzone-label p {
  color: #00ff66;
}

[data-theme="matrix-crt"] .dropzone-label small {
  color: #008833;
}

[data-theme="matrix-crt"] .spinner {
  border: 3px solid rgba(0, 255, 102, 0.2);
  border-top-color: #00ff66;
  box-shadow: 0 0 12px rgba(0, 255, 102, 0.4);
}

/* Tabla de Revisión OCR */
[data-theme="matrix-crt"] .review-table-wrapper {
  background: #020703;
  border: 1px solid #00bb44;
}

[data-theme="matrix-crt"] .review-table th {
  background: #091a0c;
  color: #00ff66;
  border-bottom: 1px solid #00bb44;
  border-right: 1px solid #00441b;
  text-shadow: 0 0 5px rgba(0, 255, 102, 0.45);
}

[data-theme="matrix-crt"] .review-table td {
  background: #020703;
  border-bottom: 1px solid #00441b;
  border-right: 1px solid #00441b;
  color: #00ff66;
}

[data-theme="matrix-crt"] .review-table textarea {
  background: #040d06;
  border: 1px solid #00441b;
  color: #00ff66;
  font-family: var(--font-mono);
}

[data-theme="matrix-crt"] .review-table textarea:focus {
  border-color: #00ff66;
  box-shadow: 0 0 10px rgba(0, 255, 102, 0.45);
  background: #061409;
  outline: none;
}

/* Modo Edición en Tarjetas de Comida */
[data-theme="matrix-crt"] .meal-textarea {
  background: #020603;
  border: 1px solid #00441b;
  color: #00ff66;
  font-family: var(--font-mono);
}

[data-theme="matrix-crt"] .meal-textarea:focus {
  border-color: #00ff66;
  box-shadow: 0 0 8px rgba(0, 255, 102, 0.4);
  outline: none;
}

/* Reducción de movimiento para accesibilidad */
@media (prefers-reduced-motion: reduce) {
  [data-theme="matrix-crt"] .header-title::after,
  [data-theme="matrix-crt"] .auth-title::after {
    animation: none;
    opacity: 1;
  }
  [data-theme="matrix-crt"]::before {
    opacity: 0.15;
  }
}