/* ==========================================================================
   FitPantry PRO - Cyber-TUI 80s Linux Design System (Modern Terminal Glass)
   Aesthetic: DEC VT220 / UNIX Terminal, Phosphor Green (#33ff66), OLED Black
   ========================================================================== */

@layer base {
  * {
    box-sizing: border-box;
  }
  html {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    letter-spacing: -0.015em;
    overflow-x: hidden;
  }
  body {
    overflow-x: hidden;
    width: 100%;
  }
  input, textarea, select {
    user-select: text;
    -webkit-user-select: text;
    font-family: 'JetBrains Mono', monospace;
  }
  h1, h2, h3, h4, h5, h6, p, label, .break-words {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  input[type="number"] {
    -moz-appearance: textfield;
  }
}

/* Safe areas for Mobile Devices */
.safe-bottom {
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 1.25rem));
}

.safe-top {
  padding-top: max(0.85rem, env(safe-area-inset-top, 0.85rem));
}

/* Scrollbar Hiding */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Terminal Custom Scrollbar */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: #040705;
}
::-webkit-scrollbar-thumb {
  background: rgba(51, 255, 102, 0.35);
  border-radius: 2px;
}

/* ==========================================================================
   CYBER-TUI PHOSPHOR & BACKGROUND EFFECTS
   ========================================================================== */

.tui-grid-bg {
  background-color: #030604;
  background-image: 
    radial-gradient(rgba(51, 255, 102, 0.08) 1px, transparent 1px),
    linear-gradient(to right, rgba(51, 255, 102, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(51, 255, 102, 0.02) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px, 24px 24px;
}

/* Phosphor Glow Texts */
.phosphor-text {
  color: #33ff66;
  text-shadow: 0 0 8px rgba(51, 255, 102, 0.55), 0 0 18px rgba(51, 255, 102, 0.25);
}

.phosphor-text-amber {
  color: #ffb833;
  text-shadow: 0 0 8px rgba(255, 184, 51, 0.55), 0 0 18px rgba(255, 184, 51, 0.25);
}

/* Terminal Blinking Cursor */
@keyframes blink-cursor {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.terminal-cursor {
  display: inline-block;
  width: 0.55em;
  height: 1.1em;
  background-color: #33ff66;
  vertical-align: -0.15em;
  animation: blink-cursor 1s infinite;
  box-shadow: 0 0 8px #33ff66;
}

/* CRT Scanlines Overlay (Toggleable in Settings) */
body.crt-mode::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.35) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.02));
  z-index: 9999;
  background-size: 100% 3px, 6px 100%;
  pointer-events: none;
  opacity: 0.55;
}

/* ==========================================================================
   TUI GLASS MATERIALS & FRAMES
   ========================================================================== */

.glass-panel, .tui-card {
  background: rgba(8, 14, 10, 0.85);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(51, 255, 102, 0.18);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(51, 255, 102, 0.12);
}

.glass-header {
  background: rgba(4, 8, 5, 0.92);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border-color: rgba(51, 255, 102, 0.18);
}

.glass-pill {
  background: rgba(14, 24, 18, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(51, 255, 102, 0.2);
}

/* Terminal Bracket Badge */
.tui-badge {
  font-family: 'JetBrains Mono', monospace;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(51, 255, 102, 0.12);
  color: #33ff66;
  border: 1px solid rgba(51, 255, 102, 0.3);
  box-shadow: 0 0 8px rgba(51, 255, 102, 0.15);
}

/* ==========================================================================
   TERMINAL INTERACTIVE CONTROLS
   ========================================================================== */

/* Retro Terminal Checkbox */
.set-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.35rem;
  border: 1.5px solid rgba(51, 255, 102, 0.3);
  background-color: rgba(10, 18, 12, 0.85);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: 'JetBrains Mono', monospace;
}

.set-checkbox:checked {
  background: #33ff66;
  border-color: #33ff66;
  box-shadow: 0 0 16px rgba(51, 255, 102, 0.55);
  transform: scale(1.05);
}

.set-checkbox:checked::after {
  content: "✓";
  color: #030604;
  font-weight: 900;
  font-size: 1.15rem;
  line-height: 1;
}

/* Terminal Glowing Rest Timer */
@keyframes phosphor-timer-glow {
  0%, 100% {
    box-shadow: 0 0 16px rgba(51, 255, 102, 0.25);
  }
  50% {
    box-shadow: 0 0 30px rgba(51, 255, 102, 0.55);
  }
}

.timer-active-glow {
  animation: phosphor-timer-glow 2.2s infinite ease-in-out;
}

/* iOS Sheet Slide Up Transitions */
@keyframes appleSlideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-slide-up {
  animation: appleSlideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Tactile Soft-Touch Button Feedback */
.sweat-proof-btn {
  min-height: 52px;
  touch-action: manipulation;
  transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1), filter 0.15s ease;
}

.sweat-proof-btn:active {
  transform: scale(0.96);
  filter: brightness(1.2);
}

/* Pulsing Action Callout in Phosphor Green */
@keyframes pulse-green {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(51, 255, 102, 0.45);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(51, 255, 102, 0);
  }
}

.pulse-action {
  animation: pulse-green 2.4s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

/* Personal Record Gold Pulse */
@keyframes pr-gold-pulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(234, 179, 8, 0.35);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 20px rgba(234, 179, 8, 0.7);
    transform: scale(1.05);
  }
}

.badge-pr {
  animation: pr-gold-pulse 2s infinite ease-in-out;
}

/* Olympic Barbell Sleeve & Plate Realistic 3D Styling */
.barbell-plate-shadow {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* ==========================================================================
   DYNAMIC THEME & MULTI-STYLE ARCHITECTURE (APPLE HIG VS LINUX RETRO TUI)
   ========================================================================== */

:root {
  --accent: #33ff66;
  --accent-rgb: 51, 255, 102;
  --accent-text: #33ff66;
  --accent-border: rgba(51, 255, 102, 0.35);
  --accent-light: rgba(51, 255, 102, 0.12);
  --accent-glow: rgba(51, 255, 102, 0.55);
  --accent-glow-subtle: rgba(51, 255, 102, 0.25);
  --accent-gradient: linear-gradient(135deg, #10b981, #30d158);
  --font-base: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* ==========================================================================
   1. PALETAS DE ACENTO PARA MODO OSCURO (OLED / TERMINAL)
   ========================================================================== */
[data-color-mode="dark"][data-accent="emerald"],
:root:not([data-color-mode="light"]):not([data-accent]),
[data-accent="emerald"]:not([data-color-mode="light"]) {
  --accent: #33ff66;
  --accent-rgb: 51, 255, 102;
  --accent-text: #33ff66;
  --accent-border: rgba(51, 255, 102, 0.35);
  --accent-light: rgba(51, 255, 102, 0.12);
  --accent-glow: rgba(51, 255, 102, 0.55);
  --accent-glow-subtle: rgba(51, 255, 102, 0.25);
  --accent-gradient: linear-gradient(135deg, #10b981, #30d158);
}

[data-color-mode="dark"][data-accent="cyan"],
[data-accent="cyan"]:not([data-color-mode="light"]) {
  --accent: #00f0ff;
  --accent-rgb: 0, 240, 255;
  --accent-text: #00f0ff;
  --accent-border: rgba(0, 240, 255, 0.35);
  --accent-light: rgba(0, 240, 255, 0.12);
  --accent-glow: rgba(0, 240, 255, 0.55);
  --accent-glow-subtle: rgba(0, 240, 255, 0.25);
  --accent-gradient: linear-gradient(135deg, #06b6d4, #00f0ff);
}

[data-color-mode="dark"][data-accent="amber"],
[data-accent="amber"]:not([data-color-mode="light"]) {
  --accent: #ffb800;
  --accent-rgb: 255, 184, 0;
  --accent-text: #ffb800;
  --accent-border: rgba(255, 184, 0, 0.35);
  --accent-light: rgba(255, 184, 0, 0.12);
  --accent-glow: rgba(255, 184, 0, 0.55);
  --accent-glow-subtle: rgba(255, 184, 0, 0.25);
  --accent-gradient: linear-gradient(135deg, #f59e0b, #fbbf24);
}

[data-color-mode="dark"][data-accent="purple"],
[data-accent="purple"]:not([data-color-mode="light"]) {
  --accent: #c084fc;
  --accent-rgb: 192, 132, 252;
  --accent-text: #c084fc;
  --accent-border: rgba(192, 132, 252, 0.35);
  --accent-light: rgba(192, 132, 252, 0.12);
  --accent-glow: rgba(192, 132, 252, 0.55);
  --accent-glow-subtle: rgba(192, 132, 252, 0.25);
  --accent-gradient: linear-gradient(135deg, #a855f7, #c084fc);
}

[data-color-mode="dark"][data-accent="rose"],
[data-accent="rose"]:not([data-color-mode="light"]) {
  --accent: #fb7185;
  --accent-rgb: 251, 113, 133;
  --accent-text: #fb7185;
  --accent-border: rgba(251, 113, 133, 0.35);
  --accent-light: rgba(251, 113, 133, 0.12);
  --accent-glow: rgba(251, 113, 133, 0.55);
  --accent-glow-subtle: rgba(251, 113, 133, 0.25);
  --accent-gradient: linear-gradient(135deg, #f43f5e, #fb7185);
}

/* ==========================================================================
   2. PALETAS DE ACENTO PARA MODO CLARO (ALTO CONTRASTE Y LEGIBILIDAD WCAG AAA)
   ========================================================================== */
[data-color-mode="light"][data-accent="emerald"],
[data-color-mode="light"]:not([data-accent]) {
  --accent: #059669;
  --accent-rgb: 5, 150, 105;
  --accent-text: #047857;
  --accent-border: rgba(5, 150, 105, 0.4);
  --accent-light: rgba(5, 150, 105, 0.12);
  --accent-glow: rgba(5, 150, 105, 0.3);
  --accent-glow-subtle: rgba(5, 150, 105, 0.15);
  --accent-gradient: linear-gradient(135deg, #059669, #10b981);
}

[data-color-mode="light"][data-accent="cyan"] {
  --accent: #0891b2;
  --accent-rgb: 8, 145, 178;
  --accent-text: #0e7490;
  --accent-border: rgba(8, 145, 178, 0.4);
  --accent-light: rgba(8, 145, 178, 0.12);
  --accent-glow: rgba(8, 145, 178, 0.3);
  --accent-glow-subtle: rgba(8, 145, 178, 0.15);
  --accent-gradient: linear-gradient(135deg, #0891b2, #06b6d4);
}

[data-color-mode="light"][data-accent="amber"] {
  --accent: #d97706;
  --accent-rgb: 217, 119, 6;
  --accent-text: #b45309;
  --accent-border: rgba(217, 119, 6, 0.4);
  --accent-light: rgba(217, 119, 6, 0.12);
  --accent-glow: rgba(217, 119, 6, 0.3);
  --accent-glow-subtle: rgba(217, 119, 6, 0.15);
  --accent-gradient: linear-gradient(135deg, #d97706, #f59e0b);
}

[data-color-mode="light"][data-accent="purple"] {
  --accent: #7c3aed;
  --accent-rgb: 124, 58, 237;
  --accent-text: #6d28d9;
  --accent-border: rgba(124, 58, 237, 0.4);
  --accent-light: rgba(124, 58, 237, 0.12);
  --accent-glow: rgba(124, 58, 237, 0.3);
  --accent-glow-subtle: rgba(124, 58, 237, 0.15);
  --accent-gradient: linear-gradient(135deg, #7c3aed, #9333ea);
}

[data-color-mode="light"][data-accent="rose"] {
  --accent: #e11d48;
  --accent-rgb: 225, 29, 72;
  --accent-text: #be123c;
  --accent-border: rgba(225, 29, 72, 0.4);
  --accent-light: rgba(225, 29, 72, 0.12);
  --accent-glow: rgba(225, 29, 72, 0.3);
  --accent-glow-subtle: rgba(225, 29, 72, 0.15);
  --accent-gradient: linear-gradient(135deg, #e11d48, #f43f5e);
}

/* ==========================================================================
   3. ESTILOS DE INTERFAZ: APPLE HIG VS LINUX RETRO TUI (DIFERENCIACIÓN TOTAL)
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. ESTILO APPLE iOS (CUPERTINO HUMAN INTERFACE GUIDELINES)
   -------------------------------------------------------------------------- */
[data-ui-style="apple"],
[data-ui-style="apple"] body,
[data-ui-style="apple"] button,
[data-ui-style="apple"] input,
[data-ui-style="apple"] select,
[data-ui-style="apple"] textarea,
[data-ui-style="apple"] span:not(.font-numeric),
[data-ui-style="apple"] p,
[data-ui-style="apple"] h1,
[data-ui-style="apple"] h2,
[data-ui-style="apple"] h3,
[data-ui-style="apple"] div:not(.font-numeric),
[data-ui-style="apple"] .font-mono:not(.font-numeric):not(#hud-timer-countdown):not(#timer-display) {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif !important;
  letter-spacing: -0.015em !important;
}

/* Ocultar artefactos de terminal en Apple */
[data-ui-style="apple"] .terminal-cursor {
  display: none !important;
}

[data-ui-style="apple"] body.crt-mode::after {
  display: none !important;
}

[data-ui-style="apple"] body.tui-grid-bg {
  background-image: none !important;
}

/* Paneles y Tarjetas Apple: esquinas orgánicas suaves de 28px */
[data-ui-style="apple"] .glass-panel,
[data-ui-style="apple"] .tui-card {
  border-radius: 1.75rem !important;
  backdrop-filter: blur(32px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(190%) !important;
  box-shadow: 0 8px 30px -4px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Botones Apple: esquinas redondeadas y suaves estilo iOS */
[data-ui-style="apple"] button {
  border-radius: 1.1rem !important;
}

[data-ui-style="apple"] .rounded-xl,
[data-ui-style="apple"] .rounded-2xl {
  border-radius: 1.15rem !important;
}

[data-ui-style="apple"] .rounded-3xl {
  border-radius: 1.75rem !important;
}

/* Checkbox circular estilo Apple Fitness Rings / Reminders */
[data-ui-style="apple"] .set-checkbox {
  border-radius: 50% !important;
  width: 2.1rem !important;
  height: 2.1rem !important;
  border: 2px solid rgba(255, 255, 255, 0.22) !important;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

[data-ui-style="apple"][data-color-mode="light"] .set-checkbox {
  border: 2px solid #cbd5e1 !important;
}

[data-ui-style="apple"] .set-checkbox:checked {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  transform: scale(1.12) !important;
  box-shadow: 0 4px 16px var(--accent-glow) !important;
}

[data-ui-style="apple"] .set-checkbox:checked::after {
  font-size: 1.15rem !important;
  font-weight: 900 !important;
}

/* Badges y Chips en forma de píldora estilo iOS */
[data-ui-style="apple"] .tui-badge {
  border-radius: 9999px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  padding: 0.2rem 0.65rem !important;
  letter-spacing: 0.01em !important;
  border: none !important;
  box-shadow: none !important;
}

/* Textos sin resplandor fosforito retro en Apple */
[data-ui-style="apple"] .phosphor-text,
[data-ui-style="apple"] .phosphor-text-amber {
  text-shadow: none !important;
  font-weight: 700 !important;
}

/* Dock de Navegación inferior estilo iOS Tab Bar */
[data-ui-style="apple"] nav.glass-header {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  height: 3.6rem !important;
}

[data-ui-style="apple"] .nav-tab-btn {
  border-top: none !important;
  padding-top: 0.2rem !important;
}

[data-ui-style="apple"] .nav-tab-btn .nav-icon {
  width: 1.3rem !important;
  height: 1.3rem !important;
}

[data-ui-style="apple"] .nav-tab-btn .nav-label {
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  margin-top: 0.1rem !important;
}

/* --------------------------------------------------------------------------
   B. ESTILO LINUX RETRO (CYBER-TUI 80s UNIX TERMINAL WORKSTATION)
   -------------------------------------------------------------------------- */
[data-ui-style="retro"],
[data-ui-style="retro"] body,
[data-ui-style="retro"] * {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

/* Paneles y Tarjetas Retro: esquinas rectas y técnicas de terminal */
[data-ui-style="retro"] .glass-panel,
[data-ui-style="retro"] .tui-card {
  border-radius: 0.35rem !important;
  border: 1px solid var(--accent-border) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7), inset 0 0 1px var(--accent-border) !important;
}

/* Botones rectangulares de consola */
[data-ui-style="retro"] button {
  border-radius: 0.25rem !important;
}

[data-ui-style="retro"] .rounded-xl,
[data-ui-style="retro"] .rounded-2xl,
[data-ui-style="retro"] .rounded-3xl {
  border-radius: 0.35rem !important;
}

/* Checkbox cuadrado técnico de consola */
[data-ui-style="retro"] .set-checkbox {
  border-radius: 0.2rem !important;
  border: 1.5px solid var(--accent-border) !important;
}

/* Badges con corchetes de terminal */
[data-ui-style="retro"] .tui-badge {
  border-radius: 0.2rem !important;
  letter-spacing: 0.06em !important;
  border: 1px solid var(--accent-border) !important;
}

/* Resplandor fosforito de fósforo P31 activo */
[data-ui-style="retro"] .phosphor-text {
  text-shadow: 0 0 8px var(--accent-glow), 0 0 18px var(--accent-glow-subtle) !important;
}

[data-ui-style="retro"] .terminal-cursor {
  display: inline-block !important;
}

/* ==========================================================================
   4. MODO CLARO INTEGRAL (CLEAN LIGHT THEME - ZERO DARK ARTIFACTS)
   ========================================================================== */
[data-color-mode="light"] body {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

[data-color-mode="light"] body.tui-grid-bg {
  background-color: #f8fafc !important;
  background-image: 
    radial-gradient(rgba(15, 23, 42, 0.07) 1px, transparent 1px),
    linear-gradient(to right, rgba(15, 23, 42, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.025) 1px, transparent 1px) !important;
  background-size: 24px 24px, 24px 24px, 24px 24px !important;
}

[data-color-mode="light"] [data-ui-style="apple"] body.tui-grid-bg {
  background-image: none !important;
}

/* Glass Panels and Cards in Light Mode */
[data-color-mode="light"] .glass-panel,
[data-color-mode="light"] .tui-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.03) !important;
}

/* Header & Bottom Dock in Light Mode */
[data-color-mode="light"] header.glass-header,
[data-color-mode="light"] nav.glass-header,
[data-color-mode="light"] .glass-header {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.04) !important;
}

[data-color-mode="light"] .nav-tab-btn {
  color: #64748b !important;
}

[data-color-mode="light"] .nav-tab-btn:hover {
  color: #0f172a !important;
}

[data-color-mode="light"] .nav-tab-btn.text-\[\#33ff66\],
[data-color-mode="light"] .nav-tab-btn.border-\[\#33ff66\] {
  color: var(--accent-text) !important;
  border-top-color: var(--accent) !important;
  font-weight: 800 !important;
}

/* Overriding All Dark Backgrounds in Light Mode */
[data-color-mode="light"] [class*="bg-black/"]:not(.fixed):not(#focus-mode-backdrop):not(#modal-plate-calc-backdrop):not(.barbell-plate-shadow *):not(.barbell-plate-shadow),
[data-color-mode="light"] [class*="bg-zinc-950/"]:not(.fixed),
[data-color-mode="light"] [class*="bg-zinc-900/"]:not(.fixed),
[data-color-mode="light"] [class*="bg-zinc-800/"]:not(.fixed),
[data-color-mode="light"] .bg-zinc-950,
[data-color-mode="light"] .bg-zinc-900,
[data-color-mode="light"] .bg-zinc-850,
[data-color-mode="light"] .bg-zinc-800,
[data-color-mode="light"] .bg-zinc-700,
[data-color-mode="light"] .bg-\[\#030704\],
[data-color-mode="light"] .bg-\[\#030604\],
[data-color-mode="light"] .bg-\[\#040705\],
[data-color-mode="light"] .bg-\[\#040805\],
[data-color-mode="light"] .bg-\[\#040805\]\/95,
[data-color-mode="light"] .bg-\[\#050a07\],
[data-color-mode="light"] .bg-\[\#050906\],
[data-color-mode="light"] .bg-\[\#060c08\],
[data-color-mode="light"] .bg-\[\#061008\],
[data-color-mode="light"] .bg-\[\#07130a\],
[data-color-mode="light"] .bg-\[\#080e0a\],
[data-color-mode="light"] .bg-\[\#080d0a\],
[data-color-mode="light"] .bg-\[\#08140a\],
[data-color-mode="light"] .bg-\[\#090d0a\],
[data-color-mode="light"] .bg-\[\#0a120c\],
[data-color-mode="light"] .bg-\[\#0a140c\],
[data-color-mode="light"] .bg-\[\#0a180e\],
[data-color-mode="light"] .bg-\[\#0c120e\],
[data-color-mode="light"] .bg-\[\#0c120e\]\/80,
[data-color-mode="light"] .bg-\[\#0c160e\],
[data-color-mode="light"] .bg-\[\#0c1c0f\],
[data-color-mode="light"] .bg-\[\#0d1410\],
[data-color-mode="light"] .bg-\[\#0d1410\]\/95,
[data-color-mode="light"] .bg-\[\#0d2212\],
[data-color-mode="light"] .bg-\[\#101c13\],
[data-color-mode="light"] .bg-\[\#102214\],
[data-color-mode="light"] .bg-\[\#122216\],
[data-color-mode="light"] .bg-emerald-950\/20,
[data-color-mode="light"] .bg-emerald-950\/30,
[data-color-mode="light"] .bg-emerald-950\/40,
[data-color-mode="light"] .bg-amber-950\/40,
[data-color-mode="light"] .bg-black {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}

/* Secondary Surface Backgrounds (Cards & Nested Sections) */
[data-color-mode="light"] .glass-panel [class*="bg-zinc-900"],
[data-color-mode="light"] .glass-panel [class*="bg-zinc-950"],
[data-color-mode="light"] .glass-panel [class*="bg-zinc-800"],
[data-color-mode="light"] .tui-card [class*="bg-zinc-900"],
[data-color-mode="light"] .tui-card [class*="bg-zinc-950"],
[data-color-mode="light"] .bg-zinc-900\/50,
[data-color-mode="light"] .bg-zinc-900\/60,
[data-color-mode="light"] .bg-zinc-900\/70,
[data-color-mode="light"] .bg-zinc-900\/80,
[data-color-mode="light"] .bg-zinc-900\/90 {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

/* Secondary Buttons Hover in Light Mode */
[data-color-mode="light"] button[class*="bg-zinc-900"]:hover,
[data-color-mode="light"] button[class*="bg-zinc-800"]:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Active Selector Buttons (Previously white on dark, now dark on light) */
[data-color-mode="light"] .bg-zinc-100 {
  background-color: #0f172a !important;
  color: #ffffff !important;
}

[data-color-mode="light"] .bg-zinc-100.text-zinc-950,
[data-color-mode="light"] .bg-zinc-100 * {
  color: #ffffff !important;
}

/* Text Colors Hierarchy in Light Mode */
[data-color-mode="light"] .text-white,
[data-color-mode="light"] .text-zinc-100 {
  color: #0f172a !important;
}

[data-color-mode="light"] .text-zinc-200,
[data-color-mode="light"] .text-zinc-300 {
  color: #1e293b !important;
}

[data-color-mode="light"] .text-zinc-400 {
  color: #475569 !important;
}

[data-color-mode="light"] .text-zinc-500 {
  color: #64748b !important;
}

[data-color-mode="light"] .text-zinc-600 {
  color: #94a3b8 !important;
}

/* Forms, Inputs, Textareas and Selects */
[data-color-mode="light"] input,
[data-color-mode="light"] select,
[data-color-mode="light"] textarea {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

[data-color-mode="light"] input::placeholder {
  color: #94a3b8 !important;
}

[data-color-mode="light"] input:focus,
[data-color-mode="light"] select:focus,
[data-color-mode="light"] textarea:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px var(--accent-light) !important;
}

/* Universal Light Mode Borders */
[data-color-mode="light"] [class*="border-white"],
[data-color-mode="light"] [class*="border-zinc-800"],
[data-color-mode="light"] [class*="border-zinc-700"] {
  border-color: #e2e8f0 !important;
}

/* Preservar corte central de discos de barra en modo claro */
.barbell-plate-shadow .bg-black\/45,
.barbell-plate-shadow .bg-black\/55 {
  background-color: rgba(0, 0, 0, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

[data-color-mode="light"] tr.border-b {
  border-bottom-color: #e2e8f0 !important;
}

[data-color-mode="light"] tr:hover {
  background-color: rgba(241, 245, 249, 0.7) !important;
}

/* Modals Backdrops & Dialogs in Light Mode */
[data-color-mode="light"] .fixed.inset-0.bg-black\/95,
[data-color-mode="light"] .fixed.inset-0.bg-black\/90,
[data-color-mode="light"] .fixed.inset-0.bg-black\/80 {
  background-color: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(14px) !important;
}

[data-color-mode="light"] .fixed.inset-0 > .glass-panel,
[data-color-mode="light"] .fixed.inset-0 > div > .glass-panel,
[data-color-mode="light"] #modal-focus-mode {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2) !important;
}

/* Live Workout Hero Banner in Light Mode */
[data-color-mode="light"] #workout-live-mode-banner {
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%) !important;
  border-color: rgba(5, 150, 105, 0.3) !important;
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.08) !important;
}

[data-color-mode="light"] #workout-live-mode-banner .text-white {
  color: #064e3b !important;
}

[data-color-mode="light"] #live-workout-subtitle {
  color: #047857 !important;
}

/* Primary Action Buttons (High Contrast Text) */
[data-color-mode="light"] .bg-gradient-to-r.from-emerald-400,
[data-color-mode="light"] .from-emerald-400.to-\[\#30d158\],
[data-color-mode="light"] .bg-gradient-to-r.from-emerald-400.to-\[\#30d158\] {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  font-weight: 800 !important;
}

[data-color-mode="light"] .bg-gradient-to-r.from-emerald-400 *,
[data-color-mode="light"] .from-emerald-400.to-\[\#30d158\] * {
  color: #ffffff !important;
}

/* Floating Rest Timer HUD in Light Mode */
[data-color-mode="light"] #floating-rest-timer-hud > div {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: var(--accent-border) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12) !important;
}

[data-color-mode="light"] #hud-timer-target-name {
  color: #0f172a !important;
}

[data-color-mode="light"] #hud-timer-countdown {
  color: var(--accent-text) !important;
}

/* ==========================================================================
   5. SOBREESCRITURAS DE ACENTO DINÁMICO (PARA AMBOS MODOS)
   ========================================================================== */
[data-accent] .text-\[\#33ff66\],
[data-accent] .text-emerald-400,
[data-accent] .text-emerald-300,
[data-accent] .phosphor-text {
  color: var(--accent-text) !important;
}

[data-accent] .border-\[\#33ff66\],
[data-accent] .border-\[\#33ff66\]\/40,
[data-accent] .border-\[\#33ff66\]\/35,
[data-accent] .border-\[\#33ff66\]\/30,
[data-accent] .border-\[\#33ff66\]\/25,
[data-accent] .border-\[\#33ff66\]\/20,
[data-accent] .border-emerald-500,
[data-accent] .border-emerald-500\/40,
[data-accent] .border-emerald-500\/30,
[data-accent] .border-emerald-500\/25,
[data-accent] .border-emerald-500\/20,
[data-accent] .border-emerald-400 {
  border-color: var(--accent-border) !important;
}

[data-accent] .bg-emerald-500\/20,
[data-accent] .bg-emerald-500\/10,
[data-accent] .bg-emerald-500\/15,
[data-accent] .bg-emerald-500\/25,
[data-accent] .bg-\[\#33ff66\]\/15,
[data-accent] .bg-\[\#33ff66\]\/10,
[data-accent] .bg-\[\#33ff66\]\/20 {
  background-color: var(--accent-light) !important;
}

[data-accent] .bg-gradient-to-r.from-emerald-400,
[data-accent] .from-emerald-400.to-\[\#30d158\],
[data-accent] .bg-gradient-to-r.from-emerald-400.to-\[\#30d158\],
[data-accent] .bg-gradient-to-r.from-emerald-500 {
  background-image: var(--accent-gradient) !important;
}

[data-accent] .set-checkbox:checked {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 14px var(--accent-glow) !important;
}

[data-color-mode="light"] .set-checkbox:checked::after {
  color: #ffffff !important;
}

[data-accent] .terminal-cursor {
  background-color: var(--accent) !important;
  box-shadow: 0 0 8px var(--accent) !important;
}

[data-accent] ::-webkit-scrollbar-thumb {
  background: var(--accent-border) !important;
}

[data-accent] #sync-status-dot {
  background-color: var(--accent) !important;
}

[data-accent] #timer-progress-fill {
  background-color: var(--accent-light) !important;
}

[data-accent] .tui-badge {
  background: var(--accent-light) !important;
  color: var(--accent-text) !important;
  border-color: var(--accent-border) !important;
}

/* ==========================================================================
   DESKTOP & TABLET ADAPTIVE DASHBOARD (PHASE 1 RESPONSIVE ARCHITECTURE)
   ========================================================================== */

@media (min-width: 1024px) {
  /* Presentación de cuadrícula de 2 columnas para comidas en escritorio */
  #nutrition-meals-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }

  /* Presentación de cuadrícula para tarjetas de despensa */
  #pantry-items-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }

  #pantry-items-list > button,
  #pantry-items-list > .glass-panel.mb-4,
  #pantry-items-list > div.text-center {
    grid-column: span 2 / span 2 !important;
  }

  /* Cuadrícula de ejercicios en entrenamiento */
  #workout-exercises-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }

  #workout-exercises-list > div.text-center {
    grid-column: span 2 / span 2 !important;
  }

  /* Dock flotante estilo isla para pantallas grandes */
  nav.fixed.bottom-0 {
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 1.25rem !important;
    width: 36rem !important;
    max-width: 90vw !important;
    border-radius: 1.5rem !important;
    border: 1px solid rgba(51, 255, 102, 0.35) !important;
    box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.85), 0 0 25px rgba(51, 255, 102, 0.15) !important;
  }
}