:root {
  /* Brand Colors (configurable via JS) */
  --primary-color: #00D9FF;
  --secondary-color: #1A1A2E;
  --accent-color: #FF6B6B;

  /* Base Colors */
  --bg-dark: #0F0F1E;
  --bg-card: #1A1A2E;
  --bg-input: #252538;
  --text-primary: #FFFFFF;
  --text-secondary: #B0B0B0;
  --text-muted: #6B6B7F;

  /* Status Colors */
  --success: #10B981;
  --warning: #F59E0B;
  --error: #EF4444;
  --info: #3B82F6;
  
  --success-color: var(--success);
  --warning-color: var(--warning);
  --error-color: var(--error);
  --info-color: var(--info);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 20px rgba(0, 217, 255, 0.3);

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;

  /* Typography */
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

/* Hide default details marker */
details.dropdown-details>summary {
  list-style: none;
}

details.dropdown-details>summary::-webkit-details-marker {
  display: none;
}

/* Control dropdown visibility */
details.dropdown-details .dropdown-menu {
  display: none;
}

details.dropdown-details[open] .dropdown-menu {
  display: block;
}

body {
  font-family: var(--font-body);
  background: var(--bg-dark);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--spacing-md);
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.25rem;
}

h5 {
  font-size: 1.125rem;
}

h6 {
  font-size: 1rem;
}

p {
  margin-bottom: var(--spacing-md);
  color: var(--text-secondary);
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--accent-color);
}

/* ============================================
   LAYOUT
   ============================================ */

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

.page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  padding: var(--spacing-xl) 0;
}

/* Grid System */
.grid {
  display: grid;
  gap: var(--spacing-lg);
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-5 {
  grid-template-columns: repeat(5, 1fr);
}

.grid-6 {
  grid-template-columns: repeat(6, 1fr);
}

@media (max-width: 1024px) {

  .grid-6,
  .grid-5,
  .grid-4,
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* Flexbox Utilities */
.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.flex-wrap {
  flex-wrap: wrap !important;
}

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

.gap-sm {
  gap: var(--spacing-sm);
}

.gap-md {
  gap: var(--spacing-md);
}

.gap-lg {
  gap: var(--spacing-lg);
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */

.header {
  background: var(--bg-card);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: var(--spacing-md) 0;
  position: sticky;
  top: 0;
  z-index: 10000;
  backdrop-filter: blur(10px);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {

display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--primary-color);
  padding: var(--spacing-sm) 0;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.logo-img:not([src]), 
.logo-img[src=""] {
  display: none;
}

.logo-img {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
}

.nav-links {
  display: flex;
  align-items: center;
  /* Con nueve apartados mas «Salir», el hueco de 24 px pedia 1.366 px y el
     contenedor topa en 1.400 menos su margen: no cabia ni en pantalla grande.
     Medido con scripts/pruebas/el-menu-de-entrenadora-cabe.js. */
  gap: 8px;
  list-style: none;
}

.nav-link {
  color: var(--text-secondary);
  font-weight: 500;
  transition: color var(--transition-fast);
  padding: var(--spacing-sm) 10px;
  border-radius: var(--radius-sm);
  /* Un apartado nunca se parte en dos lineas. Al añadir «Tareas» el menu paso
     a nueve y «🚪 Salir» se quedo con el texto debajo del icono. */
  white-space: nowrap;
}

/* El menu de escritorio no se convierte en hamburguesa hasta los 768 px, asi
   que entre medias hay un tramo largo -portatiles de 13"- donde los nueve
   apartados tienen que caber igual. Se aprieta en dos pasos antes de llegar
   ahi, en lugar de desbordarse. */
@media (max-width: 1250px) {
  .nav-links { gap: 4px; }
  .nav-link { padding: var(--spacing-sm); font-size: 0.95rem; }
}

@media (max-width: 1130px) {
  .nav-links { gap: 2px; }
  .nav-link { padding: 6px; font-size: 0.9rem; }
  .logo { font-size: 1rem; letter-spacing: 0.5px; }
  .logo-img { width: 32px; height: 32px; }
}

/* Ultimo tramo antes de la hamburguesa. Aqui ya no da de si apretando, asi que
   el nombre de la marca se queda en su logo: el menu es lo que hay que poder
   usar, y la marca ya se sabe de quien es. */
@media (max-width: 1060px) {
  .nav-link { padding: 6px 2px; font-size: 0.79rem; }
  .logo span { display: none; }
  .logo { gap: 0; }
}

.nav-link:hover,
.nav-link.active {
  color: var(--primary-color);
  background: rgba(var(--primary-color-rgb, 0, 217, 255), 0.1);
}

/* Mobile Menu */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1.5rem;
  cursor: pointer;
}

@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    flex-direction: column;
    padding: var(--spacing-lg);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: all var(--transition-base);
    z-index: 9999;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-lg);
  }

  .nav-links.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }
}

/* ============================================
   CARDS
   ============================================ */

.card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-lg);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.card-body {
  color: var(--text-secondary);
}

.card-footer {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Glassmorphism Card */
.card-glass {
  background: rgba(26, 26, 46, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Stat Card */
.stat-card {
  text-align: center;
}

.stat-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: var(--spacing-sm);
}

.stat-label {
  color: var(--text-muted);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--primary-color);
  color: var(--bg-dark);
}

.btn-primary:hover:not(:disabled) {
  background: var(--accent-color);
  box-shadow: var(--shadow-glow);
}

.fab:hover {
  box-shadow: var(--shadow-glow);
}

.btn-secondary {
  background: var(--bg-input);
  color: var(--text-primary);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--secondary-color);
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
}

.btn-outline:hover:not(:disabled) {
  background: var(--primary-color);
  color: var(--bg-dark);
}

.btn-danger {
  background: var(--error);
  color: white;
}

.btn-danger:hover:not(:disabled) {
  background: #DC2626;
}

.btn-success {
  background: var(--success);
  color: white;
}

.btn-sm {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: 0.875rem;
}

.btn-lg {
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: 1.125rem;
}

.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;

border-radius: 50%;
}

/* ============================================
   FORMS
   ============================================ */

.form-group {
  margin-bottom: var(--spacing-lg);
}

.form-label {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--spacing-md);
  background: var(--bg-input);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: all var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.1);
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
}

.form-error {
  color: var(--error);
  font-size: 0.875rem;
  margin-top: var(--spacing-xs);
}

.form-hint {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-top: var(--spacing-xs);
}

/* ============================================
   TABLES
   ============================================ */

.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: var(--spacing-md);
  text-align: left;
}

.table thead {
  background: var(--bg-input);
}

.table th {
  font-weight: 600;
  color: var(--text-primary);
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
}

.table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background var(--transition-fast);
}

.table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

.table td {
  color: var(--text-secondary);
}

/* ============================================
   BADGES & TAGS
   ============================================ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-success {
  background: rgba(16, 185, 129, 0.2);
  color: var(--success);
}

.badge-warning {
  background: rgba(245, 158, 11, 0.2);
  color: var(--warning);
}

.badge-error {
  background: rgba(239, 68, 68, 0.2);
  color: var(--error);
}

.badge-info {
  background: rgba(59, 130, 246, 0.2);
  color: var(--info);
}

/* ============================================
   UTILITIES
   ============================================ */

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

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

.text-primary {
  color: var(--primary-color);
}

.text-success {
  color: var(--success);
}

.text-error {
  color: var(--error);
}

.mt-sm {
  margin-top: var(--spacing-sm);
}

.mt-md {
  margin-top: var(--spacing-md);
}

.mt-lg {
  margin-top: var(--spacing-lg);
}

.mb-sm {
  margin-bottom: var(--spacing-sm);
}

.mb-md {
  margin-bottom: var(--spacing-md);
}

.mb-lg {
  margin-bottom: var(--spacing-lg);
}

.hidden {
  display: none;
}

.visible {
  display: block;
}

/* Loading Spinner */
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================
   LIGHT MODE OVERRIDES (MODO DÍA)
   ============================================ */
:root {
  --light-bg-dark: #E2E8F0;
  --light-bg-card: #FFFFFF;
  --light-bg-input: #FFFFFF;
  --light-text-primary: #0F172A;
  --light-text-secondary: #334155;
  --light-text-muted: #475569;
  --light-border: rgba(0, 0, 0, 0.12);
}

html.theme-light,
body.theme-light {
  --bg-dark: #E2E8F0;
  --bg-card: #FFFFFF;
  --bg-input: #FFFFFF;
  --text-primary: #0F172A;
  --text-secondary: #334155;
  --text-muted: #475569;
  --border-color: rgba(0, 0, 0, 0.12);
  --secondary-color: #CBD5E1;

  background: var(--bg-dark) !important;
  color: var(--text-primary) !important;
}

/* Global Light Mode Safety Overrides for Inline Styles & Hardcoded Text */
html.theme-light [style*="color: #fff"],
html.theme-light [style*="color: #ffffff"],
html.theme-light [style*="color:#fff"],
html.theme-light [style*="color:#ffffff"],
html.theme-light [style*="color: white"],
html.theme-light [style*="color:white"],
html.theme-light [style*="color: var(--text-primary)"],
html.theme-light [style*="color:var(--text-primary)"],
html.theme-light [style*="rgb(255, 255, 255)"],
html.theme-light [style*="rgb(255,255,255)"],
html.theme-light #suppListBody,
html.theme-light #cardioContentBody,
html.theme-light #saasExpiryVal,
html.theme-light #saasClientLimitVal,
html.theme-light #saasLicenseCard span,
html.theme-light #saasLicenseCard div,
html.theme-light #suppListBody *,
html.theme-light #cardioContentBody *,
html.theme-light .text-white,
html.theme-light strong[style*="color"] {
  color: var(--text-primary) !important;
}

/* Enforce white text color for the dark supplementation preview card in light mode */
html.theme-light #suppPreviewContent,
html.theme-light #suppPreviewContent * {
  color: #ffffff !important;
}

/* Force opacity labels to be fully visible and readable secondary color */
html.theme-light #saasLicenseCard span[style*="opacity"],
html.theme-light #saasLicenseCard .opacity-70 {
  opacity: 1 !important;
  color: var(--text-secondary) !important;
}

html.theme-light [style*="color: rgba(255, 255, 255"],
html.theme-light [style*="color:rgba(255,255,255"],
html.theme-light [style*="color: rgba(255,255,255"],
html.theme-light [style*="color:rgba(255, 255, 255"] {
  color: var(--text-secondary) !important;
}

html.theme-light [style*="color: rgba(255,255,255,0.5)"],
html.theme-light [style*="color:rgba(255,255,255,0.5)"],
html.theme-light [style*="color: rgba(255, 255, 255, 0.5)"],
html.theme-light [style*="color: rgba(255, 255, 255, 0.6)"],
html.theme-light [style*="color: rgba(255, 255, 255, 0.7)"],
html.theme-light [style*="color: rgba(255, 255, 255, 0.8)"],
html.theme-light [style*="color: rgba(255, 255, 255, 0.9)"] {
  color: var(--text-secondary) !important;
}

html.theme-light [style*="color: rgba(255,255,255,0.3)"],
html.theme-light [style*="color:rgba(255,255,255,0.3)"],
html.theme-light [style*="color: rgba(255, 255, 255, 0.3)"],
html.theme-light [style*="color: rgba(255, 255, 255, 0.4)"] {
  color: var(--text-muted) !important;
}

/* Hardcoded background inline styles overrides for light mode */
html.theme-light [style*="background: rgba(255,255,255"],
html.theme-light [style*="background:rgba(255,255,255"],
html.theme-light [style*="background: rgba(255, 255, 255"],
html.theme-light [style*="background:rgba(255, 255, 255"] {
  background: rgba(0, 0, 0, 0.04) !important;
}

html.theme-light [style*="background:rgba(0,0,0,0.2)"],
html.theme-light [style*="background:rgba(0,0,0,0.3)"],
html.theme-light [style*="background: rgba(0,0,0,0.2)"],
html.theme-light [style*="background: rgba(0,0,0,0.3)"],
html.theme-light [style*="background: rgba(0, 0, 0, 0.2)"],
html.theme-light [style*="background: rgba(0, 0, 0, 0.3)"],
html.theme-light [style*="background:rgba(0, 0, 0, 0.2)"],
html.theme-light [style*="background:rgba(0, 0, 0, 0.3)"] {
  background: rgba(0, 0, 0, 0.05) !important;
}

html.theme-light [style*="background: linear-gradient(135deg, #1e1e1e"],
html.theme-light [style*="background:linear-gradient(135deg, #1e1e1e"],
html.theme-light [style*="background: linear-gradient"],
html.theme-light [style*="background:linear-gradient"] {
  background: linear-gradient(135deg, #E2E8F0 0%, #FFFFFF 100%) !important;
}

/* Inline border overrides */
html.theme-light [style*="border: 1px solid rgba(255"],
html.theme-light [style*="border: 1px solid rgba(255,255,255"],
html.theme-light [style*="border:1px solid rgba(255,255,255"],
html.theme-light [style*="border-bottom: 1px solid rgba(255"],
html.theme-light [style*="border-top: 1px solid rgba(255"],
html.theme-light [style*="border-bottom: 1.5px solid rgba(255"],
html.theme-light [style*="border: 1.5px solid rgba(255"],
html.theme-light [style*="border:1px solid rgba(255"] {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

html.theme-light .card,
html.theme-light .wizard-card,
html.theme-light .modal,
body.theme-light .card,
body.theme-light .wizard-card,
body.theme-light .modal {
  background: var(--light-bg-card) !important;
  border-color: var(--light-border) !important;

box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
  color: var(--light-text-primary) !important;
}

html.theme-light .card-title,
html.theme-light h1,
html.theme-light h2,
html.theme-light h3,
html.theme-light h4,
html.theme-light h5,
html.theme-light h6,
body.theme-light .card-title,
body.theme-light h1,
body.theme-light h2,
body.theme-light h3,
body.theme-light h4,
body.theme-light h5,
body.theme-light h6 {
  color: var(--light-text-primary) !important;
}

html.theme-light p,
html.theme-light .text-muted,
html.theme-light .form-hint,
body.theme-light p,
body.theme-light .text-muted,
body.theme-light .form-hint {
  color: var(--light-text-secondary) !important;
}

html.theme-light .form-input,
html.theme-light .form-select,
html.theme-light .form-textarea,
body.theme-light .form-input,
body.theme-light .form-select,
body.theme-light .form-textarea {
  background: var(--light-bg-input) !important;
  color: var(--light-text-primary) !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

html.theme-light .form-input:focus,
html.theme-light .form-select:focus,
html.theme-light .form-textarea:focus,
body.theme-light .form-input:focus,
body.theme-light .form-select:focus,
body.theme-light .form-textarea:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2) !important;
}

html.theme-light .form-input::placeholder,
html.theme-light .form-textarea::placeholder,
body.theme-light .form-input::placeholder,
body.theme-light .form-textarea::placeholder {
  color: rgba(0, 0, 0, 0.4) !important;
}

html.theme-light .form-label,
body.theme-light .form-label {
  color: var(--light-text-primary) !important;
  font-weight: 600 !important;
}

html.theme-light .divider,
body.theme-light .divider {
  background: var(--light-border) !important;
}

html.theme-light .header,
body.theme-light .header {
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--light-border) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
}

html.theme-light .nav-link,
body.theme-light .nav-link {
  color: var(--light-text-secondary) !important;
}

html.theme-light .menu-toggle,
body.theme-light .menu-toggle {
  color: var(--light-text-primary) !important;
}

@media (max-width: 768px) {
  html.theme-light .nav-links,
  body.theme-light .nav-links {
    background: #FFFFFF !important;
    border: 1px solid var(--light-border) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05) !important;
  }
}

html.theme-light .nav-link:hover,
html.theme-light .nav-link.active,
body.theme-light .nav-link:hover,
body.theme-light .nav-link.active {
  color: var(--primary-color) !important;
}

/* Specific component fixes for light mode */
html.theme-light .meal-name-row,
html.theme-light .meal-name-row span,
html.theme-light .meal-title,
html.theme-light .food-name,
html.theme-light .macro-mini-val,
html.theme-light .option-label,
html.theme-light .option-counter,
html.theme-light .swipe-indicator,
html.theme-light .shopping-item div,
html.theme-light .modal-content h3 {
  color: var(--text-primary) !important;
}

html.theme-light .option-counter {
  background: rgba(0, 217, 255, 0.08) !important;
  border-color: rgba(0, 217, 255, 0.25) !important;
}

html.theme-light .food-item {
  background: var(--light-bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--light-border) !important;
}

html.theme-light .meal-card {
  background: var(--light-bg-card) !important;
  border: 1px solid var(--light-border) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
}

html.theme-light .meal-tabs-container {
  background: rgba(226, 232, 240, 0.95) !important;
  border-bottom: 1px solid var(--light-border) !important;
}

html.theme-light .meal-tab {
  background: rgba(0, 0, 0, 0.05) !important;
  color: var(--text-secondary) !important;
}

html.theme-light .meal-tab.active {
  background: var(--primary-color) !important;
  color: #000000 !important;
}

html.theme-light .shopping-item {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: var(--light-border) !important;
}

html.theme-light .shopping-item.checked {
  background: rgba(0, 0, 0, 0.01) !important;
}

html.theme-light .modal-content {
  background: var(--light-bg-card) !important;
  border: 1px solid var(--light-border) !important;
  color: var(--text-primary) !important;
}

html.theme-light .form-control,
body.theme-light .form-control {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}
html.theme-light .form-control:focus,
body.theme-light .form-control:focus {
  background: #ffffff !important;
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 2px rgba(165, 94, 234, 0.1) !important;
}
html.theme-light .form-control::placeholder,
body.theme-light .form-control::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}
html.theme-light .btn-upload,
body.theme-light .btn-upload {
  background: #f1f5f9 !important;
  border: 1px dashed #cbd5e1 !important;
  color: #0f172a !important;
}
html.theme-light .btn-upload:hover,
body.theme-light .btn-upload:hover {
  background: #e2e8f0 !important;
  border-color: var(--primary-color) !important;
  color: #0f172a !important;
}
html.theme-light select.form-control option,
body.theme-light select.form-control option {
  background: #ffffff !important;
  color: #0f172a !important;
}

html.theme-light .btn-outline {
  color: var(--text-primary) !important;
  border-color: var(--primary-color) !important;
}

/* Routine client logger overrides for light mode */
html.theme-light [id^="weight_"],
html.theme-light [id^="reps_"],
html.theme-light [id^="rir_"] {
  background: var(--light-bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--light-border) !important;
}

html.theme-light .card div[style*="background: rgba(255,255,255,0.03)"],
html.theme-light .card div[style*="background:rgba(255,255,255,0.03)"] {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: var(--light-border) !important;
  color: var(--text-primary) !important;
}

html.theme-light .card span[style*="color: #ffeb3b"],
html.theme-light .card span[style*="color:#ffeb3b"] {
  color: #B45309 !important;
}

html.theme-light .table th,
body.theme-light .table th {
  background: rgba(0, 0, 0, 0.02) !important;
  color: var(--light-text-primary) !important;
  border-bottom: 2px solid var(--light-border) !important;
}

html.theme-light .table td,
body.theme-light .table td {
  border-bottom: 1px solid var(--light-border) !important;
  color: var(--light-text-secondary) !important;
}

html.theme-light .table tr:hover,
body.theme-light .table tr:hover {
  background: rgba(0, 0, 0, 0.01) !important;
}

html.theme-light .modal-header,
body.theme-light .modal-header {
  border-bottom: 1px solid var(--light-border) !important;
}

html.theme-light .modal-footer,
body.theme-light .modal-footer {
  border-top: 1px solid var(--light-border) !important;
}

html.theme-light .client-card,
html.theme-light .routine-card,
html.theme-light .diet-card,
body.theme-light .client-card,
body.theme-light .routine-card,
body.theme-light .diet-card {
  background: #FFFFFF !important;
  border: 1px solid var(--light-border) !important;
}

html.theme-light .list-group-item,
html.theme-light .food-item,
html.theme-light .exercise-item,
body.theme-light .list-group-item,
body.theme-light .food-item,
body.theme-light .exercise-item {
  background: #FFFFFF !important;
  border: 1px solid var(--light-border) !important;
  color: var(--light-text-primary) !important;
}

html.theme-light .search-box,
body.theme-light .search-box {
  background: #FFFFFF !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

html.theme-light .btn-secondary,
body.theme-light .btn-secondary {
  background: #E2E8F0 !important;
  color: #1E293B !important;
  border: 1px solid #CBD5E1 !important;
}

html.theme-light .btn-secondary:hover,
body.theme-light .btn-secondary:hover {
  background: #CBD5E1 !important;
}

html.theme-light .sidebar,
body.theme-light .sidebar {
  background: #FFFFFF !important;
  border-right: 1px solid var(--light-border) !important;
}

html.theme-light .card-header,
body.theme-light .card-header {
  border-bottom: 1px solid var(--light-border) !important;
}

/* ============================================
   LIGHT MODE ADDITIONAL REFINEMENTS
   ============================================ */
html.theme-light h1,
html.theme-light h2,
html.theme-light h3,
html.theme-light h4,
html.theme-light h5,
html.theme-light h6,
body.theme-light h1,
body.theme-light h2,
body.theme-light h3,
body.theme-light h4,
body.theme-light h5,
body.theme-light h6,
body.theme-light .tool-title,
body.theme-light #clientName,
body.theme-light #brandName,
body.theme-light .client-info h2,
body.theme-light .metric-value,
body.theme-light .stat-number,
body.theme-light .profile-header h2,
body.theme-light #sessionExercises,
body.theme-light #sessionExercises + span {
  color: var(--light-text-primary) !important;
}

html.theme-light .main-tool-card,
body.theme-light .main-tool-card {
  background: var(--light-bg-card) !important;
  border: 1px solid var(--light-border) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
}

html.theme-light .main-tool-card .tool-title,
body.theme-light .main-tool-card .tool-title {
  color: var(--light-text-primary) !important;
}

html.theme-light .main-tool-card:hover,
body.theme-light .main-tool-card:hover {
  background: #F8F9FD !important;
}

html.theme-light .metric-card,
body.theme-light .metric-card {
  background: var(--light-bg-card) !important;
  border: 1px solid var(--light-border) !important;
}

html.theme-light .metric-label,
body.theme-light .metric-label {
  color: var(--light-text-secondary) !important;
}

/* ==========================================================================
   PREMIUM INTERACTION SYSTEM (MODO DINÁMICO & COLORES DE MARCA)
   ========================================================================== */

/* 1. Suavizado de todas las transiciones del sistema */
.btn, .card, .nav-link, .tab, .media-card, .list-group-item {
  transition: all var(--transition-fast) cubic-bezier(0.4, 0, 0.2, 1) !important;
}



/* 3. Estilo estático elegante para tarjetas (sin movimiento) */
.card:hover, .media-card:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important;
}

/* 4. Aplicación de colores secundarios y acentos para resaltar la marca */
.btn-primary {
  background: var(--primary-color) !important;
  color: #000000 !important; /* Máxima legibilidad y contraste premium */
}

/* El botón secundario realiza una transición al color secundario personalizado */
.btn-secondary:hover:not(:disabled) {
  background: var(--secondary-color) !important;
  color: #ffffff !important;
  border-color: var(--secondary-color) !important;
}

/* El botón principal realiza un destello glow al color de acento al pasar el ratón */
.btn-primary:hover:not(:disabled) {
  background: var(--accent-color) !important;
  box-shadow: 0 0 20px rgba(var(--primary-color-rgb), 0.4) !important;
}

/* 5. PROTECCIÓN ESTÁTICA TOTAL Y GLOBAL (Desactiva por completo el movimiento en hovers y clicks) */
.btn:hover, .btn:active,
[class*="btn"]:hover, [class*="btn"]:active,
button:hover, button:active,
.card:hover, .card:active,
.media-card:hover, .media-card:active,
.list-group-item:hover, .list-group-item:active,
.table tr:hover, .table tr:active,
a:hover, a:active,
.nav-link:hover, .nav-link:active,
.tab:hover, .tab:active,
.hover-scale:hover, .hover-scale:active,
[role="button"]:hover, [role="button"]:active {
  transform: none !important;
}

/* El hover de botones secundarios mantiene el color de la marca sin movimiento */
.btn-secondary:hover:not(:disabled),
.theme-client .btn-secondary:hover:not(:disabled) {
  background: var(--secondary-color) !important;
  color: #ffffff !important;
}

/* ============================================
   INFINITE COACH: MOBILE RESPONSIVE SYSTEM
   ============================================ */

@media (max-width: 1024px) {
    .grid-6,
    .grid-5 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 768px) {
    /* 1. Base Containers & Layout */
    .container, .container-fluid {
        padding: 0 var(--spacing-md) !important;
    }

    .main-content {
        padding-top: var(--spacing-md) !important;
        padding-bottom: var(--spacing-xl) !important;
    }

    /* 2. Typography Scaling */
    h1 {
        font-size: 1.85rem !important;
    }
    h2 {
        font-size: 1.5rem !important;
    }
    h3 {
        font-size: 1.25rem !important;
    }
    p {
        font-size: 0.925rem !important;
    }

    /* 3. Grid Collapse Rules */
    .grid {
        gap: var(--spacing-md) !important;
    }
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr !important;
    }
    .grid-6,
    .grid-5 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 4. Navigation & Premium Dropdown Menu */
    .menu-toggle {
        display: block !important;
        font-size: 1.75rem !important;
        color: var(--primary-color) !important;
        background: transparent !important;
        border: none !important;
        outline: none !important;
        padding: var(--spacing-xs) !important;
        transition: transform var(--transition-fast) !important;
    }

    .menu-toggle:active {
        transform: scale(0.9);
    }

    .nav-links {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        background: rgba(26, 26, 46, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-bottom: 2px solid rgba(0, 217, 255, 0.25) !important;
        flex-direction: column !important;
        padding: var(--spacing-lg) !important;
        gap: var(--spacing-sm) !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6) !important;
        transform: translateY(-20px) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        z-index: 9999 !important;
    }

    .nav-links.active {
        transform: translateY(0) !important;
        opacity: 1 !important;
        pointer-events: all !important;
    }

    .nav-link {
        display: block !important;
        text-align: center !important;
        padding: 12px 20px !important;
        font-size: 1.05rem !important;
        border-radius: var(--radius-md) !important;
        border: 1px solid rgba(255, 255, 255, 0.03) !important;
        background: rgba(255, 255, 255, 0.02) !important;
        transition: all var(--transition-fast) !important;
    }

    .nav-link:hover, .nav-link.active {
        background: rgba(0, 217, 255, 0.12) !important;
        border-color: rgba(0, 217, 255, 0.3) !important;
        color: var(--primary-color) !important;
    }

    /* 5. Header and Filters Layout Collapse */
    .flex-between:not(.card-header):not(.nav) {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--spacing-md) !important;
    }

    .flex-between:not(.card-header):not(.nav) > * {
        width: 100% !important;
    }

    .flex-between:not(.card-header):not(.nav) .btn {
        width: 100% !important;
    }

    /* Filters wrapping inside dashboard/management pages */
    .filters-wrapper, .filters-container {
        flex-direction: column !important;
        gap: var(--spacing-sm) !important;
    }
    
    .filters-wrapper > *, .filters-container > * {
        width: 100% !important;
    }

    /* 6. Stats & Cards Optimization */
    .stat-card {
        padding: var(--spacing-md) !important;
    }

    .stat-value {
        font-size: 1.85rem !important;
    }

    .stat-label {
        font-size: 0.725rem !important;
    }

    /* 7. Scrollable Premium Tabs */
    .tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: var(--spacing-sm) !important;
        margin-bottom: var(--spacing-md) !important;
        gap: var(--spacing-xs) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .tab {
        white-space: nowrap !important;
        padding: var(--spacing-sm) var(--spacing-md) !important;
        font-size: 0.875rem !important;
    }

    /* 8. Tables and Horizontal Smooth Scroll */
    .table-wrapper {
        border-radius: var(--radius-md) !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 0 -8px !important;
        padding: 0 8px !important;
    }

    .table th, .table td {
        padding: var(--spacing-sm) var(--spacing-md) !important;
        font-size: 0.875rem !important;
    }

    /* Helper to hide less important columns on small screens */
    .hide-on-mobile {
        display: none !important;
    }

    /* 9. Premium Modals (Sheet-like layouts on mobile) */
    .modal-overlay {
        padding: 80px 10px 20px 10px !important;
    }

    .modal {
        max-width: 100% !important;
        width: 100% !important;
        max-height: calc(100vh - 100px) !important;
        border-radius: var(--radius-lg) !important;
    }

    .modal-body {
        padding: var(--spacing-md) !important;
    }

    .modal-footer {
        padding: var(--spacing-md) !important;
        flex-direction: column-reverse !important;
        gap: var(--spacing-sm) !important;
    }

    .modal-footer button, .modal-footer .btn {
        width: 100% !important;
        margin: 0 !important;
        padding: 12px !important;
    }

    /* 10. Forms Adjustments */
    .form-input, .form-select, .form-textarea {
        padding: 12px !important;
        font-size: 0.95rem !important;
    }

    /* 11. FAB & Navigation buttons */
    .fab {
        bottom: 20px !important;
        right: 20px !important;
        width: 54px !important;
        height: 54px !important;
    }

    /* Search Input mobile optimization (remove magnifying glass) */
    .search-icon-span {
        display: none !important;
    }
    input#searchInput.search-input-mobile {
        padding-left: 12px !important;
    }

    /* Sub-tabs horizontal scrolling on mobile */
    .flex-scroll-mobile {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 8px !important;
        width: 100% !important;
    }
    .flex-scroll-mobile .btn, .flex-scroll-mobile button {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
}

@media (max-width: 480px) {
    .grid-6,
    .grid-5 {
        grid-template-columns: 1fr !important;
    }
    
    .logo {
        font-size: 1.05rem !important;
    }
}

/* Intermediate screen size optimizations for responsive header nav */
@media (min-width: 769px) and (max-width: 1200px) {
    .nav-links {
        gap: var(--spacing-sm) !important;
    }
    .nav-link {
        padding: var(--spacing-sm) 8px !important;
        font-size: 0.85rem !important;
    }
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-none {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}


/* ── Técnicas de intensidad en tema claro ──────────────────────────────
   Dropset, rest-pause y compañía se pintan en #fb923c, que sobre el fondo
   oscuro se lee bien pero sobre el blanco del tema claro se queda en un
   contraste de 2.3 y no hay quien lo lea. El mismo naranja, más oscuro.
   Va por el atributo style porque las chapas se montan desde JavaScript
   con el color puesto a mano, y si no, el inline gana siempre. */
html.theme-light [style*="#fb923c"],
body.theme-light [style*="#fb923c"] {
    color: #b45309 !important;
}