/* ============================================================
   APP DE PORCIONES — Comiendo con Ciencia
   Estética dark minimalista, alineada con www y clinic
   Tipografía: Cormorant Garamond + DM Sans
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap');

/* ── VARIABLES ─────────────────────────────────────────────── */
:root {
  --black:        #0a0a0a;
  --gray-900:     #141414;
  --gray-850:     #1a1a1a;
  --gray-800:     #1e1e1e;
  --gray-750:     #252525;
  --gray-700:     #2e2e2e;
  --gray-600:     #444;
  --gray-500:     #666;
  --gray-400:     #888;
  --gray-300:     #aaa;
  --gray-200:     #ccc;
  --gray-100:     #e5e5e5;
  --white:        #fafafa;

  --accent:       #7ec8a4;
  --accent-dark:  #5aad89;
  --accent-light: #a3d9be;
  --danger:       #e07070;
  --warning:      #e0b870;
  --info:         #7ab4e0;

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'DM Sans', system-ui, sans-serif;

  --radius:    10px;
  --radius-sm: 6px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,.5);

  /* aliases semánticos usados en toda la app */
  --green-dark:  var(--accent-dark);
  --green-mid:   var(--accent);
  --green-light: var(--accent-light);
  --green-pale:  rgba(126,200,164,0.1);
  --red:         var(--danger);
  --orange:      var(--warning);
}

/* ── MODO CLARO ─────────────────────────────────────────────── */
body:not(.dark) {
  --black:    #fafafa;
  --gray-900: #f4f4f4;
  --gray-850: #eeeeee;
  --gray-800: #e8e8e8;
  --gray-750: #e0e0e0;
  --gray-700: #d0d0d0;
  --gray-600: #aaa;
  --gray-500: #888;
  --gray-400: #666;
  --gray-300: #444;
  --gray-200: #222;
  --gray-100: #111;
  --white:    #0a0a0a;
  --green-pale: rgba(64,145,108,0.08);
}

/* ── RESET & BASE ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--black);
  color: var(--white);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s, color 0.3s;
}

/* FIX: Asegurar herencia de color nativo en inputs de iOS/Android */
input, select, textarea, button {
  font-family: inherit;
  color: inherit;
}

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--gray-900); }
::-webkit-scrollbar-thumb { background: var(--gray-700); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-600); }

/* ── SCREENS ────────────────────────────────────────────────── */
.screen { display: none; }
.screen.active { display: block; }

#screen-login.active,
#screen-configurar-plan-prueba.active,
#screen-elegir-modo-prueba.active {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--black);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── AUTH CARD ──────────────────────────────────────────────── */
.card {
  background: var(--gray-900);
  border: 1px solid var(--gray-700);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 640px;
}

.logo-area { text-align: center; margin-bottom: 2rem; }

.logo-area-icons {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-bottom: 8px;
}

.logo-area .logo-icon { font-size: 2.5rem; display: block; }
.logo-area .logo-img  { height: 42px; width: 42px; object-fit: cover; border-radius: 50%; }

.logo-area h1 {
  font-family: var(--font-serif);
  font-size: 1.5rem; font-weight: 300;
  color: var(--white); margin-bottom: 0.25rem; letter-spacing: 0.04em;
}

.subtitle { color: var(--gray-400); font-size: 0.85rem; font-weight: 300; }

/* ── PLAN PRUEBA ────────────────────────────────────────────── */
.plan-prueba-resumen-box {
  background: var(--green-pale);
  border: 1px solid rgba(126,200,164,0.2);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  font-size: 0.88rem; color: var(--accent);
}

.modo-prueba-buttons { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; }

.btn-modo-prueba {
  background: var(--gray-800); border: 1px solid var(--gray-700);
  border-radius: var(--radius-sm); padding: 1rem 1.25rem;
  font-size: 0.9rem; font-weight: 400; color: var(--gray-300);
  cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s;
  font-family: var(--font-sans); text-align: left;
}
.btn-modo-prueba:hover { border-color: var(--accent); color: var(--white); }

.btn-modo-gramos { }
.btn-modo-porciones { border-color: var(--accent); color: var(--accent); }
.btn-modo-porciones:hover { background: rgba(126,200,164,0.08); }

/* ── FORMS ──────────────────────────────────────────────────── */
form fieldset {
  border: 1px solid var(--gray-700);
  border-radius: var(--radius-sm);
  padding: 1.25rem 1rem; margin-bottom: 1.25rem;
}

form fieldset legend {
  font-size: 0.7rem; font-weight: 500;
  color: var(--accent); padding: 0 6px;
  text-transform: uppercase; letter-spacing: .06em;
}

.field { display: flex; flex-direction: column; margin-bottom: 1rem; }
.field:last-child { margin-bottom: 0; }

.field label {
  font-size: 0.75rem; font-weight: 500;
  color: var(--gray-300); margin-bottom: 0.35rem; letter-spacing: 0.03em;
}

.field input,
.field select,
.field textarea {
  background: var(--gray-800); border: 1px solid var(--gray-700);
  color: var(--white); border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem; font-family: var(--font-sans);
  font-size: 0.85rem; outline: none;
  transition: border-color 0.2s, background 0.2s; width: 100%;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--accent); background: var(--gray-750); }
.field input::placeholder { color: var(--gray-500); }

.field-group.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.field-group.categories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }

/* ── SECTION LABEL ──────────────────────────────────────────── */
.section-label {
  font-size: 0.7rem; font-weight: 500;
  color: var(--accent); text-transform: uppercase;
  letter-spacing: .06em; margin: 14px 0 8px;
}
.optional-tag { font-weight: 300; color: var(--gray-500); text-transform: none; letter-spacing: 0; font-size: 0.75rem; }

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--black);
  border: none; border-radius: var(--radius-sm);
  padding: 0.6rem 1.25rem; font-size: 0.8rem; font-weight: 500;
  font-family: var(--font-sans); cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  letter-spacing: 0.02em; white-space: nowrap;
}
.btn-primary:hover  { background: var(--accent-dark); }
.btn-primary:active { transform: scale(0.98); }

.btn-full { width: 100%; }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--gray-300);
  border: 1px solid var(--gray-700); border-radius: var(--radius-sm);
  padding: 0.6rem 1.25rem; font-size: 0.8rem; font-family: var(--font-sans);
  cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.btn-ghost:hover { border-color: var(--gray-500); color: var(--white); background: var(--gray-800); }

.btn-add {
  background: var(--green-pale); color: var(--accent);
  border: 1px solid rgba(126,200,164,0.2); border-radius: var(--radius-sm);
  padding: 0.55rem 1rem; font-size: 0.82rem; font-weight: 500;
  cursor: pointer; transition: background 0.2s, border-color 0.2s;
  font-family: var(--font-sans);
}
.btn-add:hover { background: rgba(126,200,164,0.18); border-color: rgba(126,200,164,0.4); }

.btn-remove {
  background: none; border: none; color: var(--danger);
  cursor: pointer; font-size: 1rem; padding: 2px 6px;
  border-radius: 4px; transition: background 0.15s; line-height: 1;
}
.btn-remove:hover { background: rgba(224,112,112,0.12); }

.btn-edit {
  background: none; border: none; cursor: pointer;
  color: var(--gray-500); font-size: 0.9rem;
  padding: 2px 5px; border-radius: 4px; transition: color 0.15s;
}
.btn-edit:hover { color: var(--white); }

.btn-add-prep {
  background: var(--accent); color: var(--black);
  border: none; border-radius: var(--radius-sm);
  padding: 0.55rem 1rem; font-size: 0.82rem; font-weight: 500;
  cursor: pointer; transition: background 0.2s; font-family: var(--font-sans);
}
.btn-add-prep:hover { background: var(--accent-dark); }

.btn-reset {
  background: none; border: 1px solid var(--gray-700); color: var(--gray-400);
  border-radius: var(--radius-sm); padding: 0.55rem 1.1rem;
  font-size: 0.80rem; font-weight: 400; cursor: pointer;
  transition: border-color 0.2s, color 0.2s; font-family: var(--font-sans);
}
.btn-reset:hover { border-color: var(--gray-500); color: var(--white); }

/* ── APP HEADER ─────────────────────────────────────────────── */
.app-header {
  background: var(--gray-900);
  border-bottom: 1px solid var(--gray-700);
  color: var(--white);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.5rem; height: 56px;
  position: sticky; top: 0; z-index: 100;
}

.header-left { display: flex; align-items: center; gap: 0.75rem; }
.logo-icon-sm { font-size: 1.3rem; }
.app-header .logo-header-sm { height: 28px; width: 28px; object-fit: cover; border-radius: 50%; }

.app-header h2 {
  font-family: var(--font-serif);
  font-size: 1.05rem; font-weight: 400;
  color: var(--white); letter-spacing: 0.04em;
}

.header-right { display: flex; align-items: center; gap: 0.75rem; font-size: 0.82rem; }

/* ── APP BODY ───────────────────────────────────────────────── */
.app-body {
  max-width: 900px; margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
  display: flex; flex-direction: column; gap: 1.5rem;
}

/* ── SUMMARY PANEL ──────────────────────────────────────────── */
.summary-panel {
  background: var(--gray-900);
  border: 1px solid var(--gray-700);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.25rem 1rem;
}

.summary-panel h3 {
  font-size: 0.7rem; font-weight: 500;
  color: var(--gray-500); text-transform: uppercase;
  letter-spacing: 0.1em; margin-bottom: 1rem;
}

.summary-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem; margin-bottom: 1.25rem;
}

.summary-card {
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 0.85rem;
  display: flex; flex-direction: column; gap: 2px;
}

.summary-label {
  font-size: 0.65rem; font-weight: 500;
  color: var(--gray-500); text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: 0.3rem;
}

.summary-value {
  font-family: var(--font-serif);
  font-size: 1.5rem; font-weight: 300; color: var(--white);
}

.summary-total { font-size: 0.72rem; color: var(--gray-500); margin-top: 0.15rem; }

.summary-card-progress {
  margin-top: 0.5rem; height: 4px;
  background: var(--gray-700); border-radius: 99px; overflow: hidden;
}
.summary-card-progress-fill { height: 100%; border-radius: 99px; transition: width 0.3s ease; }

.summary-panel.modo-gramos .porciones-bar-wrap { display: none; }

/* ── PROGRESS BAR (porciones) ───────────────────────────────── */
.porciones-bar-wrap {
  background: var(--green-pale);
  border: 1px solid rgba(126,200,164,0.15);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
}

.porciones-bar-header {
  display: flex; justify-content: space-between;
  font-size: 0.82rem; margin-bottom: 0.6rem;
  color: var(--accent);
}

.porciones-bar-toggle {
  cursor: pointer; user-select: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.porciones-bar-toggle:hover { opacity: 0.8; }
.porciones-bar-toggle .porciones-toggle-icon { margin-left: 4px; font-size: 0.7rem; transition: transform 0.2s; }
.porciones-bar-wrap.collapsed .porciones-toggle-icon { transform: rotate(-90deg); }

.porciones-bar-collapsible {
  max-height: 1200px; overflow: hidden;
  transition: opacity 0.2s, max-height 0.3s;
}
.porciones-bar-wrap.collapsed .porciones-bar-collapsible {
  max-height: 0; opacity: 0; pointer-events: none;
}

.progress-track {
  background: rgba(0,0,0,.25);
  border-radius: 99px; height: 10px; overflow: hidden;
}
.progress-fill {
  height: 100%; border-radius: 99px;
  background: var(--accent);
  transition: width 0.4s ease, background 0.3s; width: 0%;
}
.progress-fill.over-limit { background: var(--danger); }

.porciones-restantes {
  text-align: right; font-size: 0.78rem;
  color: var(--accent); margin-top: 0.5rem;
}
.porciones-restantes.over-limit { color: var(--danger); font-weight: 500; }

/* ── MEALS SECTION ──────────────────────────────────────────── */
.meals-section { display: flex; flex-direction: column; gap: 0.85rem; }
.meals-section > h3 { font-size: 0.7rem; font-weight: 500; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.1em; }

/* ── MEAL CARDS ─────────────────────────────────────────────── */
.meal-card {
  background: var(--gray-900);
  border: 1px solid var(--gray-700);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.meal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.1rem; background: var(--gray-850);
  cursor: pointer; user-select: none;
  border-bottom: 1px solid var(--gray-700);
  transition: background 0.15s;
}
.meal-header:hover { background: var(--gray-800); }

.meal-header-left { display: flex; align-items: center; gap: 0.75rem; min-width: 0; flex: 1; }

.meal-icon { font-size: 1.2rem; }
.meal-title { font-size: 0.9rem; font-weight: 500; color: var(--white); }
.meal-subtitle { font-size: 0.75rem; color: var(--gray-500); margin-top: 1px; }

.meal-badge {
  background: rgba(126,200,164,0.12); color: var(--accent);
  border: 1px solid rgba(126,200,164,0.2); border-radius: 20px;
  padding: 0.2rem 0.7rem; font-size: 0.72rem; font-weight: 500;
}

.meal-toggle { font-size: 0.8rem; color: var(--gray-500); transition: transform 0.2s; }
.meal-toggle.open { transform: rotate(180deg); }

.meal-body { padding: 1rem 1.1rem; }

.meal-card.modo-gramos .prep-row,
.meal-card.modo-gramos .add-entry-row,
.meal-card.modo-gramos .meal-badge { display: none !important; }

/* ── ENTRIES ────────────────────────────────────────────────── */
.entries-list {
  list-style: none; margin-bottom: 0.85rem;
  display: flex; flex-direction: column; gap: 0.4rem;
}

.entry-item {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--gray-800); border: 1px solid var(--gray-700);
  border-radius: var(--radius-sm); padding: 0.6rem 0.85rem; font-size: 0.85rem;
}

.entry-row-top { display: flex; align-items: center; width: 100%; }
.entry-row-bottom {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: 6px;
}

.entry-name { font-weight: 500; color: var(--white); flex: 1; word-break: break-word; }

.entry-cat {
  font-size: 0.68rem; font-weight: 500;
  background: rgba(126,200,164,0.1); color: var(--accent);
  border: 1px solid rgba(126,200,164,0.15); border-radius: 20px;
  padding: 1px 8px; white-space: nowrap; flex-shrink: 0;
}
.entry-cat--bebida { background: rgba(122,180,224,0.1); color: var(--info); border-color: rgba(122,180,224,0.15); }

.entry-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: auto; }
.entry-qty { font-weight: 500; color: var(--accent); white-space: nowrap; font-size: 0.82rem; }
.entry-item--secondary { opacity: 0.5; font-style: italic; }

.empty-entries {
  text-align: center; color: var(--gray-500);
  font-size: 0.82rem; padding: 0.5rem 0; font-style: italic;
}

/* ── ENTRY EDIT INLINE ──────────────────────────────────────── */
.entry-qty-input {
  width: 72px; padding: 5px 8px;
  border: 1px solid var(--accent); border-radius: var(--radius-sm);
  background: var(--gray-750); color: var(--white);
  font-size: 0.9rem; text-align: center; outline: none;
  -moz-appearance: textfield;
}
.entry-qty-input::-webkit-outer-spin-button,
.entry-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }

.btn-confirm {
  background: var(--accent); color: var(--black);
  border: none; border-radius: var(--radius-sm);
  padding: 5px 10px; font-size: 0.85rem; cursor: pointer;
  min-width: 36px; min-height: 36px;
}
.btn-confirm:hover { background: var(--accent-dark); }

.btn-cancel {
  background: var(--gray-700); color: var(--gray-300);
  border: none; border-radius: var(--radius-sm);
  padding: 5px 10px; font-size: 0.85rem; cursor: pointer;
  min-width: 36px; min-height: 36px;
}
.btn-cancel:hover { background: var(--gray-600); color: var(--white); }

/* ── ADD ENTRY ROW ──────────────────────────────────────────── */
.add-entry-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

.add-entry-row input[type="text"],
.add-entry-row input[type="number"] {
  background: var(--gray-800); border: 1px solid var(--gray-700);
  color: var(--white); border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem; font-size: 0.85rem;
  outline: none; transition: border-color 0.2s; font-family: var(--font-sans);
}
.add-entry-row input[type="text"]   { flex: 1; min-width: 140px; }
.add-entry-row input[type="number"] { width: 80px; text-align: center; }
.add-entry-row input:focus { border-color: var(--accent); }

/* ── PREP ROW ───────────────────────────────────────────────── */
.prep-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.6rem; }

.input-prep {
  flex: 1; min-width: 180px;
  background: var(--gray-800); border: 1px solid var(--gray-700);
  color: var(--white); border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem; font-size: 0.85rem; outline: none;
  transition: border-color 0.2s; font-family: var(--font-sans);
}
.input-prep:focus { border-color: var(--accent); }

.input-prep-qty {
  width: 70px; background: var(--gray-800); border: 1px solid var(--gray-700);
  color: var(--white); border-radius: var(--radius-sm);
  padding: 0.5rem; font-size: 0.85rem; text-align: center;
  outline: none; transition: border-color 0.2s;
}
.input-prep-qty:focus { border-color: var(--accent); }

/* ── CATEGORY SELECT ────────────────────────────────────────── */
.input-categoria {
  background: var(--gray-800); border: 1px solid var(--gray-700);
  color: var(--white); border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem; font-size: 0.82rem;
  outline: none; cursor: pointer; transition: border-color 0.2s; font-family: var(--font-sans);
}
.input-categoria:focus { border-color: var(--accent); }

/* ── ENTRY MACROS ROW ───────────────────────────────────────── */
.entry-macros-row { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.6rem; }

.entry-macro-field { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.entry-macro-field label { font-size: 0.72rem; font-weight: 500; color: var(--gray-400); }
.entry-macro-field input {
  border: 1px solid var(--gray-700); border-radius: var(--radius-sm);
  background: var(--gray-800); color: var(--white);
  padding: 6px 8px; font-size: 0.85rem; text-align: center;
  outline: none; width: 100%; transition: border-color 0.2s;
}
.entry-macro-field input:focus { border-color: var(--accent); }

.btn-mis-preps {
  background: var(--gray-800); color: var(--gray-300);
  border: 1px solid var(--gray-700); border-radius: var(--radius-sm);
  padding: 0.55rem 1rem; font-size: 0.82rem; font-weight: 400;
  cursor: pointer; transition: border-color 0.2s, color 0.2s;
  width: 100%; text-align: center; min-height: 44px; font-family: var(--font-sans);
}
.btn-mis-preps:hover { border-color: var(--gray-500); color: var(--white); }

.entry-macros-row .btn-usda {
  background: var(--gray-800); color: var(--gray-300);
  border: 1px solid var(--gray-700); border-radius: var(--radius-sm);
  padding: 0.55rem 1rem; font-size: 0.82rem; font-weight: 400;
  cursor: pointer; transition: border-color 0.2s, color 0.2s;
  width: 100%; text-align: center; min-height: 44px; font-family: var(--font-sans);
}
.entry-macros-row .btn-usda:hover { border-color: var(--accent); color: var(--accent); }

.btn-bebida {
  background: var(--gray-800); color: var(--gray-300);
  border: 1px solid var(--gray-700); border-radius: var(--radius-sm);
  padding: 0.55rem 1rem; font-size: 0.82rem;
  cursor: pointer; transition: border-color 0.2s, color 0.2s;
  width: 100%; text-align: center; min-height: 44px; font-family: var(--font-sans);
}
.btn-bebida:hover { border-color: var(--info); color: var(--info); }

/* ── CATEGORY TABLE ─────────────────────────────────────────── */
.cat-table-wrap { margin-top: 1rem; overflow-x: auto; }
.cat-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }

.cat-table th {
  padding: 0.5rem 0.75rem;
  font-size: 0.65rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent); background: var(--green-pale);
  border-bottom: 1px solid rgba(126,200,164,0.2); text-align: left;
}

.cat-table td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--gray-800); color: var(--gray-200); }
.cat-table tbody tr:last-child td { border-bottom: none; }
.cat-table tbody tr:hover td { background: var(--gray-850); }

.cat-name { font-weight: 500; color: var(--white); }
.cat-note { font-size: 0.7rem; color: var(--gray-500); font-weight: 300; }
.cat-consumed { font-weight: 500; color: var(--accent); }
.cat-extra-faltantes { font-size: 0.82em; color: var(--gray-400); }
.cat-rest.negative { color: var(--danger); font-weight: 500; }
.over-limit-row td { background: rgba(224,112,112,0.05); }

/* ── RESET DAY ──────────────────────────────────────────────── */
.reset-day-wrap { text-align: right; margin-top: 0.6rem; }

/* ── LOGIN ──────────────────────────────────────────────────── */
.login-card { max-width: 380px; }

.error-msg {
  background: rgba(224,112,112,0.1); border: 1px solid var(--danger);
  color: var(--danger); border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem; font-size: 0.82rem; margin-bottom: 0.75rem;
}

.auth-link { text-align: center; margin-top: 1rem; font-size: 0.82rem; color: var(--gray-500); }
.auth-link a { color: var(--accent); text-decoration: none; }
.auth-link a:hover { text-decoration: underline; }

/* ── MODAL ──────────────────────────────────────────────────── */
.modal-overlay-prep {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; padding: 1rem; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.modal-buscador-movil { touch-action: pan-y; }
.usda-resultados-scroll { overscroll-behavior: contain; min-height: 120px; }

.modal-prep-box {
  background: var(--gray-900); border: 1px solid var(--gray-700);
  border-radius: var(--radius-lg); padding: 1.5rem;
  width: 100%; max-width: 440px; max-height: 90vh;
  overflow-y: auto; animation: modal-in 0.2s ease;
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.modal-prep-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem;
}
.modal-prep-title {
  font-family: var(--font-serif); font-size: 1.2rem; font-weight: 400; color: var(--white);
}

.modal-prep-box .field label { font-size: 0.75rem; font-weight: 500; color: var(--gray-400); margin-bottom: 0.3rem; display: block; }
.modal-prep-box .field input {
  background: var(--gray-800); border: 1px solid var(--gray-700); color: var(--white);
  border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; font-size: 0.85rem;
  width: 100%; outline: none; transition: border-color 0.2s;
}
.modal-prep-box .field input:focus { border-color: var(--accent); }

.req { color: var(--danger); }

.modal-prep-macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-top: 0.85rem; }

.mp-toggle-extra {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: var(--gray-800); border: 1px solid var(--gray-700);
  border-radius: var(--radius-sm); padding: 0.6rem 0.85rem; margin-top: 0.85rem;
  font-size: 0.82rem; font-weight: 400; color: var(--gray-300);
  cursor: pointer; text-align: left; transition: border-color 0.2s; font-family: var(--font-sans);
}
.mp-toggle-extra:hover { border-color: var(--gray-500); color: var(--white); }

.mp-opcional { font-weight: 300; color: var(--gray-500); font-size: 0.78rem; }

.mp-extra-wrap {
  border: 1px solid var(--gray-700); border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: 0.85rem; background: var(--gray-850);
}
.mp-extra-grid { margin-top: 0; }

.modal-prep-kcal {
  margin-top: 0.85rem; background: var(--green-pale);
  border: 1px solid rgba(126,200,164,0.2); border-radius: var(--radius-sm);
  padding: 0.6rem 1rem; font-size: 0.82rem; font-weight: 500;
  color: var(--accent); text-align: center;
}

.modal-prep-actions { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 1.25rem; }

/* Gestionar preps */
.gestionar-tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--gray-700); margin-bottom: 0.85rem;
}
.gestionar-tab {
  padding: 0.6rem 1rem; font-size: 0.82rem; font-weight: 400;
  color: var(--gray-500); background: transparent; border: none;
  border-bottom: 2px solid transparent; cursor: pointer;
  transition: color 0.15s, border-color 0.15s; font-family: var(--font-sans);
}
.gestionar-tab:hover { color: var(--gray-200); }
.gestionar-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.gestionar-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem; padding: 0.7rem 0.85rem;
  background: var(--gray-800); border: 1px solid var(--gray-700);
  border-radius: var(--radius-sm); margin-bottom: 0.5rem;
}
.gestionar-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.gestionar-nombre { font-weight: 500; font-size: 0.88rem; color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gestionar-macros { font-size: 0.72rem; color: var(--gray-500); }

/* Meals sort */
.meals-sort-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 0.85rem; background: var(--gray-800);
  border: 1px solid var(--gray-700); border-radius: var(--radius-sm);
  margin-bottom: 0.4rem; user-select: none; cursor: grab;
}
.meals-sort-item:active { cursor: grabbing; }
.meals-sort-drag { color: var(--gray-600); font-size: 0.85rem; cursor: grab; margin-right: 2px; }
.meals-sort-item.meals-dragging { opacity: 0.5; box-shadow: var(--shadow-md); }
.meals-sort-item.meals-drag-over { border-color: var(--accent); background: var(--green-pale); }
.meals-sort-icon { font-size: 1.1rem; }
.meals-sort-label { font-size: 0.88rem; font-weight: 400; color: var(--white); }
.meals-sort-del { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }

/* Prep opción nueva */
.prep-opcion-nueva { color: var(--accent); font-weight: 500; }

/* ... aquí termina el último estilo que tenías del modal (como .modal-close) ... */

  /* === ARREGLO PARA TEXTOS INVISIBLES EN EL BUSCADOR (MODO OSCURO / CLARO) === */

  /* 1. Forzar color claro por defecto (Modo Oscuro) a los resultados del buscador */
  .usda-resultados-scroll,
  .usda-resultados-scroll div,
  .usda-resultados-scroll span,
  .usda-resultados-scroll h1,
  .usda-resultados-scroll h2,
  .usda-resultados-scroll h3,
  .usda-resultados-scroll h4,
  .usda-resultados-scroll p {
    color: var(--white) !important;
  }

  /* 2. Mantener gris el texto secundario (los gramos, kcal, etc.) para que haya contraste */
  .usda-resultados-scroll small,
  .usda-resultados-scroll .text-muted {
    color: var(--gray-400) !important;
  }

  /* 3. Asegurar que el texto inferior de atribución (Powered by...) sea legible */
  .modal-prep-box small,
  .modal-prep-box .text-muted {
    color: var(--gray-400);
  }

  /* 4. REVERSIÓN PARA MODO CLARO (Cuando NO tiene la clase .dark) */
  body:not(.dark) .usda-resultados-scroll,
  body:not(.dark) .usda-resultados-scroll div,
  body:not(.dark) .usda-resultados-scroll span,
  body:not(.dark) .usda-resultados-scroll h1,
  body:not(.dark) .usda-resultados-scroll h2,
  body:not(.dark) .usda-resultados-scroll h3,
  body:not(.dark) .usda-resultados-scroll h4,
  body:not(.dark) .usda-resultados-scroll p {
    color: #0a0a0a !important; /* Texto oscuro en fondo claro */
  }

  body:not(.dark) .usda-resultados-scroll small,
  body:not(.dark) .usda-resultados-scroll .text-muted,
  body:not(.dark) .modal-prep-box small,
  body:not(.dark) .modal-prep-box .text-muted {
    color: var(--gray-600) !important; /* Gris oscuro para el modo claro */
  }

/* ── TABLES / ENTRIES ────────────────────────────────────── */
/* ... aquí continúa tu código normal de tablas ... */

/* ── HISTORIAL ──────────────────────────────────────────────── */
.historial-item {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: var(--gray-800); border: 1px solid var(--gray-700);
  border-radius: var(--radius-sm); padding: 0.75rem 1rem;
  cursor: pointer; text-align: left;
  transition: border-color 0.15s, background 0.15s;
  font-size: 0.85rem; -webkit-tap-highlight-color: transparent;
}
.historial-item:hover { border-color: var(--gray-500); background: var(--gray-850); }
.historial-hoy { border-color: rgba(126,200,164,0.3); background: var(--green-pale); }
.historial-fecha { font-weight: 500; color: var(--white); }
.historial-info { font-size: 0.75rem; color: var(--gray-500); }

/* ── BEBESTIBLES ────────────────────────────────────────────── */
.bebidas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }

.btn-bebida-opcion {
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--gray-800); border: 1px solid var(--gray-700);
  border-radius: var(--radius-sm); padding: 0.75rem;
  cursor: pointer; text-align: left;
  transition: border-color 0.15s; -webkit-tap-highlight-color: transparent; min-height: 48px;
}
.btn-bebida-opcion:hover { border-color: var(--info); }
.bebida-icon  { font-size: 1.2rem; flex-shrink: 0; }
.bebida-label { font-size: 0.8rem; font-weight: 400; color: var(--gray-300); line-height: 1.2; }

/* ── USDA ───────────────────────────────────────────────────── */
.usda-modal-box { max-width: 560px; }
.usda-result-card {
  background: var(--gray-800); border: 1px solid var(--gray-700);
  border-radius: var(--radius-sm); padding: 0.75rem 1rem;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.usda-result-card:hover { border-color: var(--accent); background: var(--green-pale); }
.usda-macros-row { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 5px; font-size: 0.75rem; color: var(--gray-500); }

/* ── ESCÁNER ────────────────────────────────────────────────── */
.btn-escanear-movil {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 52px; flex-shrink: 0; background: var(--gray-800);
  color: var(--gray-300); border: 1px solid var(--gray-700);
  border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 400;
  cursor: pointer; transition: border-color 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; overflow: visible;
}
.btn-escanear-movil:hover, .btn-escanear-movil:active { border-color: var(--accent); color: var(--accent); }

.btn-escanear-icon {
  display: inline-block; width: 3px; height: 14px;
  background: currentColor; border-radius: 1px; opacity: 0.9;
  box-shadow: 4px 0 0 currentColor, 8px 0 0 currentColor, 12px 0 0 currentColor, 16px 0 0 currentColor;
  vertical-align: middle;
}

.modal-escaner-centrado { align-items: center !important; padding: 16px; }
.modal-escaner-caja { position: relative; }
#escaner-viewfinder { position: relative; z-index: 1; }
.escaner-viewfinder-centrado { display: block; margin: 0 auto; }
.escaner-viewfinder-movil { max-height: 72vmin !important; min-height: 240px; aspect-ratio: 1; }
.escaner-viewfinder-movil video, .escaner-viewfinder-movil #escaner-html5qrcode { width: 100% !important; height: 100% !important; object-fit: cover; }
.escaner-viewfinder { min-height: 200px; }

.btn-cerrar-escaner {
  position: absolute; top: 12px; right: 12px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0,0,0,0.6); color: #fff;
  border: none; font-size: 1.1rem; cursor: pointer; z-index: 20;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; pointer-events: auto;
}
.btn-cerrar-escaner:hover, .btn-cerrar-escaner:active { background: rgba(0,0,0,0.8); }

.btn-link-muted {
  background: none; border: none; color: var(--gray-500);
  font-size: 0.82rem; text-decoration: underline; cursor: pointer; padding: 4px 8px;
  -webkit-tap-highlight-color: transparent;
}
.btn-link-muted:hover { color: var(--gray-300); }
.escaner-acciones .btn-link-muted { pointer-events: auto; }

/* ── MENÚ HAMBURGUESA ───────────────────────────────────────── */
#btn-hamburguesa {
  background: none; border: none; cursor: pointer;
  padding: 8px; display: flex; flex-direction: column;
  gap: 5px; z-index: 10; order: -1; border-radius: 6px; transition: background 0.15s;
}
#btn-hamburguesa:hover { background: var(--gray-800); }
#btn-hamburguesa span {
  display: block; width: 20px; height: 1.5px;
  background: var(--gray-300); border-radius: 2px; transition: all 0.25s;
}

#btn-toggle-tema-header {
  font-size: 1.1rem; line-height: 1; padding: 5px 8px;
  border-radius: var(--radius-sm); border: 1px solid var(--gray-700);
  background: transparent; color: var(--gray-400);
  cursor: pointer; transition: border-color 0.2s, color 0.2s;
  margin-left: auto; flex-shrink: 0;
}
#btn-toggle-tema-header:hover { border-color: var(--gray-500); color: var(--white); }

#menu-hamburguesa-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0);
  z-index: 300; pointer-events: none; transition: background 0.25s;
}
#menu-hamburguesa-overlay.open { background: rgba(0,0,0,0.6); pointer-events: all; }

#menu-hamburguesa-drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: min(280px, 85vw); background: var(--gray-900);
  border-right: 1px solid var(--gray-700);
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(.4,0,.2,1);
  overflow-y: auto; display: flex; flex-direction: column;
  box-shadow: 4px 0 24px rgba(0,0,0,.5); pointer-events: all;
}
#menu-hamburguesa-drawer.open { transform: translateX(0); }

.drawer-header {
  background: var(--black); border-bottom: 1px solid var(--gray-700);
  padding: 1.75rem 1rem 1.25rem; display: flex; align-items: center; gap: 0.75rem;
}
.drawer-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--gray-800); border: 1px solid var(--gray-700);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; font-weight: 500; flex-shrink: 0; color: var(--accent);
}
.drawer-name { font-weight: 500; font-size: 0.9rem; color: var(--white); }
.drawer-sub  { font-size: 0.72rem; color: var(--gray-500); margin-top: 1px; }
.drawer-user { flex: 1; }
.drawer-close { background: none; border: none; color: var(--gray-500); font-size: 1rem; cursor: pointer; padding: 4px; }
.drawer-close:hover { color: var(--white); }

.drawer-section-label {
  font-size: 0.62rem; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gray-600); padding: 1.25rem 1rem 0.35rem;
}

.drawer-item {
  display: flex; align-items: center; gap: 0.75rem;
  width: 100%; padding: 0.75rem 1rem; background: none; border: none;
  text-align: left; font-size: 0.86rem; font-weight: 400; color: var(--gray-400);
  cursor: pointer; transition: background 0.15s, color 0.15s;
  min-height: 48px; font-family: var(--font-sans);
}
.drawer-item:hover { background: var(--gray-800); color: var(--white); }
.drawer-icon { font-size: 1rem; width: 20px; text-align: center; }
.drawer-contact:hover { background: none; color: var(--gray-400); }

/* ── VISTAS ─────────────────────────────────────────────────── */
.vista-contenido { display: none; }

/* ── DASHBOARD ──────────────────────────────────────────────── */
.dashboard-wrap { padding: 1rem; max-width: 600px; margin: 0 auto; }

.dashboard-title {
  font-family: var(--font-serif); font-size: 1.4rem; font-weight: 300;
  color: var(--white); margin-bottom: 2px;
}
.dashboard-fecha { font-size: 0.72rem; color: var(--gray-500); margin-bottom: 4px; letter-spacing: 0.04em; }
.dashboard-bienvenida { font-size: 0.9rem; color: var(--gray-400); margin-bottom: 1.25rem; font-weight: 300; }

.dash-section-label {
  font-size: 0.62rem; font-weight: 500; letter-spacing: 0.1em;
  color: var(--gray-600); margin: 1.25rem 0 0.6rem; text-transform: uppercase;
}

.dash-macros-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }

.dash-macro-card {
  background: var(--gray-900); border: 1px solid var(--gray-700);
  border-radius: var(--radius-sm); padding: 0.85rem;
  display: flex; flex-direction: column; gap: 2px;
}
.dash-macro-icon  { font-size: 1.4rem; }
.dash-macro-label { font-size: 0.65rem; color: var(--gray-500); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }
.dash-macro-val   { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 300; color: var(--white); line-height: 1; }
.dash-macro-unit  { font-size: 0.72rem; font-weight: 300; color: var(--gray-400); }
.dash-macro-meta  { font-size: 0.68rem; color: var(--gray-600); }

.dash-progress-bar {
  width: 100%; height: 4px; background: var(--gray-700);
  border-radius: 99px; overflow: hidden; margin-top: 0.5rem;
}
.dash-progress-fill { height: 100%; border-radius: 99px; transition: width 0.4s ease; }

.dash-fibra-card {
  background: var(--gray-900); border: 1px solid rgba(126,200,164,0.25);
  border-radius: var(--radius-sm); padding: 0.85rem;
}
.dash-fibra-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.dash-fibra-icon { font-size: 1.4rem; }
.dash-fibra-val  { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 300; color: var(--accent); }
.dash-fibra-unit { font-size: 0.72rem; font-weight: 300; }
.dash-fibra-meta { font-size: 0.75rem; color: var(--gray-500); flex: 1; }
.dash-fibra-edit { background: none; border: none; cursor: pointer; font-size: 0.85rem; padding: 3px; color: var(--gray-500); transition: color 0.2s; }
.dash-fibra-edit:hover { color: var(--white); }
.dash-fibra-sub  { font-size: 0.75rem; color: var(--gray-500); margin-top: 0.35rem; }

.dash-bebidas-card {
  background: rgba(122,180,224,0.06); border: 1px solid rgba(122,180,224,0.2);
  border-radius: var(--radius-sm); padding: 0.85rem;
  display: flex; gap: 0.85rem; align-items: flex-start;
}
.dash-bebidas-icon   { font-size: 1.8rem; }
.dash-bebidas-count  { font-size: 1rem; font-weight: 500; color: var(--info); }
.dash-bebidas-list   { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.dash-bebida-tag {
  background: rgba(122,180,224,0.12); color: var(--info);
  border: 1px solid rgba(122,180,224,0.2); border-radius: 20px;
  padding: 1px 8px; font-size: 0.72rem; font-weight: 500;
}

.dash-peso-card {
  background: var(--gray-900); border: 1px solid rgba(126,200,164,0.25);
  border-radius: var(--radius-sm); padding: 0.85rem;
}
.dash-peso-controles { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.75rem; }

/* ── HÁBITOS ────────────────────────────────────────────────── */
.habitos-wrap { padding: 1rem; max-width: 600px; margin: 0 auto; }

.select-filtro {
  background: var(--gray-800); border: 1px solid var(--gray-700);
  border-radius: var(--radius-sm); padding: 0.35rem 0.75rem;
  font-size: 0.82rem; cursor: pointer; color: var(--gray-300);
  min-width: 200px; outline: none; font-family: var(--font-sans); transition: border-color 0.2s;
}
.select-filtro:focus { border-color: var(--accent); }

.habitos-grafica-personalizado-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.habitos-grafica-desc { font-size: 0.78rem; color: var(--gray-500); margin: 0 0 0.5rem; }

.habito-banner-vencido {
  background: rgba(224,184,112,0.08); border: 1px solid rgba(224,184,112,0.2);
  border-radius: var(--radius-sm); padding: 0.75rem 1rem;
  font-size: 0.82rem; color: var(--warning); margin-bottom: 0.85rem;
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
}

.habito-seguimiento-card {
  background: var(--gray-900); border: 1px solid var(--gray-700);
  border-radius: var(--radius-sm); padding: 1rem; margin-bottom: 0.6rem;
}
.habito-seg-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; flex-wrap: wrap; }
.habito-seg-nombre { font-weight: 500; font-size: 0.9rem; color: var(--accent); }
.habito-seg-dias   { font-size: 0.72rem; color: var(--gray-500); }
.habito-seg-fechas { font-size: 0.7rem; color: var(--gray-600); margin-top: 4px; }

.habito-checklist-hoy { margin-top: 0.75rem; }
.habito-check-btn {
  width: 100%; padding: 0.6rem 1rem; border-radius: var(--radius-sm);
  border: 1px solid var(--gray-700); background: var(--gray-800);
  font-size: 0.85rem; cursor: pointer; font-weight: 400;
  color: var(--gray-400); transition: all 0.2s; font-family: var(--font-sans);
}
.habito-check-btn.completado { background: var(--green-pale); border-color: rgba(126,200,164,0.3); color: var(--accent); }

.habito-maestra-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 0.85rem; background: var(--gray-900);
  border: 1px solid var(--gray-700); border-radius: var(--radius-sm);
  margin-bottom: 0.4rem; flex-wrap: wrap;
}
.habito-maestra-nombre { font-size: 0.88rem; font-weight: 400; color: var(--white); }
.habito-maestra-actions { display: flex; gap: 0.4rem; align-items: center; }

.btn-sm-green {
  background: var(--green-pale); color: var(--accent);
  border: 1px solid rgba(126,200,164,0.2); border-radius: var(--radius-sm);
  padding: 4px 10px; font-size: 0.75rem; font-weight: 500;
  cursor: pointer; font-family: var(--font-sans); min-height: 32px;
}
.btn-sm-red {
  background: rgba(224,112,112,0.08); color: var(--danger);
  border: 1px solid rgba(224,112,112,0.2); border-radius: var(--radius-sm);
  padding: 4px 8px; font-size: 0.75rem; font-weight: 500;
  cursor: pointer; font-family: var(--font-sans); min-height: 32px;
}
.habito-tag-activo {
  background: rgba(122,180,224,0.1); color: var(--info);
  border: 1px solid rgba(122,180,224,0.15); border-radius: 20px;
  padding: 2px 10px; font-size: 0.72rem; font-weight: 500;
}

.habito-sugerencia-chip {
  background: var(--gray-800); color: var(--gray-300);
  border: 1px solid var(--gray-700); border-radius: 20px;
  padding: 4px 12px; font-size: 0.75rem; cursor: pointer;
  transition: border-color 0.15s; font-family: var(--font-sans);
}
.habito-sugerencia-chip:hover { border-color: var(--accent); color: var(--accent); }

.seg-opcion { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; cursor: pointer; padding: 5px 0; color: var(--gray-300); }

.grafico-card {
  background: var(--gray-900); border: 1px solid var(--gray-700);
  border-radius: var(--radius-sm); padding: 1rem; overflow: hidden;
}
.grafico-title { font-weight: 500; color: var(--white); margin-bottom: 0.6rem; font-size: 0.88rem; }
.grafico-filtros { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.btn-filtro {
  background: var(--gray-800); border: 1px solid var(--gray-700);
  border-radius: 20px; padding: 0.2rem 0.7rem;
  font-size: 0.72rem; cursor: pointer; transition: border-color 0.15s;
  color: var(--gray-400); font-family: var(--font-sans);
}
.btn-filtro.active, .btn-filtro:hover { border-color: var(--accent); color: var(--accent); }

/* ── ESTADO DE ÁNIMO ────────────────────────────────────────── */
.animo-wrap { padding: 1rem; max-width: 600px; margin: 0 auto; }

.animo-registro-hoy {
  background: var(--gray-900); border: 1px solid var(--gray-700);
  border-radius: var(--radius-lg); padding: 1.25rem;
}
.animo-pregunta { font-size: 0.95rem; font-weight: 400; color: var(--white); margin-bottom: 1rem; text-align: center; }
.animo-opciones { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 0.85rem; }
.animo-opcion {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 0.75rem 0.6rem; border-radius: var(--radius-sm);
  border: 1px solid var(--gray-700); background: var(--gray-800);
  cursor: pointer; min-width: 58px; transition: all 0.2s; font-family: var(--font-sans);
}
.animo-opcion:hover { border-color: var(--accent); background: var(--green-pale); }
.animo-opcion.seleccionado { border-color: var(--accent); background: var(--green-pale); }
.animo-emoji { font-size: 1.8rem; }
.animo-label { font-size: 0.62rem; text-align: center; color: var(--gray-500); }
.animo-opcion.seleccionado .animo-label { color: var(--accent); }
.animo-nota-wrap { margin-top: 0.85rem; }
.animo-nota-btn {
  margin-top: 0.5rem; padding: 0.4rem 0.85rem; font-size: 0.82rem;
  background: var(--gray-800); color: var(--gray-300);
  border: 1px solid var(--gray-700); border-radius: var(--radius-sm);
  cursor: pointer; font-family: var(--font-sans); transition: border-color 0.2s;
}
.animo-nota-btn:hover { border-color: var(--accent); color: var(--accent); }

.animo-historial { display: flex; flex-direction: column; gap: 0.4rem; }
.animo-hist-item {
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--gray-900); border: 1px solid var(--gray-700);
  border-radius: var(--radius-sm); padding: 0.65rem 0.85rem;
}
.animo-hist-item-editable { cursor: pointer; }
.animo-hist-item-editable:hover { border-color: var(--gray-600); background: var(--gray-850); }
.animo-hist-fecha { font-size: 0.72rem; color: var(--gray-600); width: 36px; flex-shrink: 0; }
.animo-hist-emoji { font-size: 1.3rem; }
.animo-hist-label { font-size: 0.82rem; font-weight: 400; flex: 1; color: var(--gray-300); }
.animo-hist-nota  { font-size: 0.9rem; cursor: help; color: var(--gray-500); }

/* ── ANTROPOMETRÍA ──────────────────────────────────────────── */
.antropometria-wrap { padding: 1rem; max-width: 700px; margin: 0 auto; }
.antropometria-placeholder { text-align: center; padding: 3rem 1rem; color: var(--gray-500); font-size: 0.9rem; line-height: 1.6; }

.medidas-form {
  background: var(--gray-900); border: 1px solid var(--gray-700);
  border-radius: var(--radius-sm); padding: 1rem 1.1rem; margin-bottom: 1rem;
}
.medidas-form-title { font-weight: 500; color: var(--white); margin-bottom: 0.75rem; font-size: 0.9rem; }
.medidas-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem 0.85rem; }

.medidas-historial { margin-top: 1.25rem; }
.medidas-historial-title { font-weight: 500; color: var(--white); margin-bottom: 0.5rem; font-size: 0.9rem; }

.medida-card {
  background: var(--gray-900); border: 1px solid var(--gray-700);
  border-radius: var(--radius-sm); padding: 0.75rem 0.85rem; margin-bottom: 0.4rem;
}
.medida-card-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; flex-wrap: wrap; }
.medida-fecha { font-size: 0.75rem; color: var(--gray-500); }
.medida-tipo  { font-weight: 500; font-size: 0.85rem; color: var(--accent); flex: 1; }
.btn-delete-medida {
  background: none; border: none; cursor: pointer; font-size: 0.9rem;
  padding: 2px 5px; border-radius: 4px; color: var(--danger); transition: background 0.15s;
}
.btn-delete-medida:hover { background: rgba(224,112,112,0.12); }
.medida-valores { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.medida-val {
  font-size: 0.75rem; background: var(--green-pale); color: var(--accent);
  border: 1px solid rgba(126,200,164,0.15); border-radius: 20px; padding: 1px 8px; font-weight: 500;
}

.graficos-container { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1rem; }

.pdf-card-paciente {
  background: var(--gray-900); border: 1px solid var(--gray-700);
  border-radius: var(--radius-sm); padding: 0.75rem 0.85rem; margin-bottom: 0.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap;
}
.pdf-card-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pdf-card-nombre { font-weight: 500; font-size: 0.88rem; color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-card-fecha { font-size: 0.72rem; color: var(--gray-500); }

/* ── CONTROL NUTRICIONAL ────────────────────────────────────── */
.control-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  color: var(--black); border-radius: var(--radius-sm);
  padding: 1rem 1.25rem; margin-bottom: 1.25rem; flex-wrap: wrap; position: relative;
}
.control-banner-text { display: flex; align-items: flex-start; gap: 0.75rem; }
.control-banner-icon { font-size: 1.6rem; flex-shrink: 0; }
.control-banner-btn {
  background: var(--black); color: var(--accent); border: none;
  border-radius: var(--radius-sm); padding: 0.45rem 1rem;
  font-weight: 500; font-size: 0.9rem; cursor: pointer; white-space: nowrap;
  transition: opacity 0.15s; font-family: var(--font-sans);
}
.control-banner-btn:hover { opacity: 0.8; }
.control-banner-close {
  background: rgba(0,0,0,0.2); border: none; color: var(--black);
  width: 32px; height: 32px; border-radius: var(--radius-sm); font-size: 0.9rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s; position: absolute; right: 0.75rem; top: 0.75rem; z-index: 2;
}
.control-banner-close:hover { background: rgba(0,0,0,0.35); }

.password-banner { background: linear-gradient(135deg, #9a7830, var(--warning)); }

.control-wrap { max-width: 680px; margin: 0 auto; padding: 1rem 1rem 2rem; }
.control-empty {
  text-align: center; padding: 2.5rem 1rem;
  background: var(--gray-900); border: 1px solid var(--gray-700);
  border-radius: var(--radius-sm); margin-bottom: 1rem; color: var(--gray-500);
}

.control-pregunta {
  background: var(--gray-900); border: 1px solid var(--gray-700);
  border-radius: var(--radius-sm); padding: 1rem 1.25rem; margin-bottom: 1rem;
}
.control-pregunta-titulo { font-weight: 500; font-size: 0.95rem; color: var(--white); margin-bottom: 0.6rem; }
.control-subtexto { font-size: 0.82rem; color: var(--gray-500); margin-bottom: 0.5rem; }
.control-required { color: var(--danger); }

.control-input,
.control-textarea {
  width: 100%; background: var(--gray-800); border: 1px solid var(--gray-700);
  color: var(--white); border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem; font-size: 0.85rem; font-family: var(--font-sans);
  transition: border-color 0.15s; resize: vertical; outline: none;
}
.control-input:focus, .control-textarea:focus { border-color: var(--accent); }
.control-textarea { min-height: 80px; }

.control-escala-labels { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--gray-600); margin-bottom: 0.35rem; }
.control-escala { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 0.25rem; }
.escala-btn {
  flex: 1; min-width: 36px; padding: 0.45rem 0.3rem;
  border: 1px solid var(--gray-700); border-radius: var(--radius-sm);
  background: var(--gray-800); cursor: pointer; font-size: 0.9rem;
  font-weight: 400; text-align: center; color: var(--gray-400);
  transition: background 0.15s, border-color 0.15s, color 0.15s; font-family: var(--font-sans);
}
.escala-btn:hover { background: var(--green-pale); border-color: rgba(126,200,164,0.3); color: var(--accent); }
.escala-btn.active { background: var(--accent); border-color: var(--accent-dark); color: var(--black); font-weight: 500; }

.bristol-tabla { margin-bottom: 0.75rem; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--gray-700); }
.bristol-fila { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.45rem 0.75rem; font-size: 0.82rem; }
.bristol-fila:nth-child(even) { background: var(--gray-850); }
.bristol-tipo { font-weight: 500; color: var(--accent); min-width: 56px; flex-shrink: 0; }
.bristol-desc { color: var(--gray-300); }

.hidratacion-barras { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 0.25rem; }
.hidratacion-btn {
  display: flex; flex-direction: column; align-items: center;
  padding: 0.5rem 0.4rem; border-radius: var(--radius-sm); border: 2px solid transparent;
  cursor: pointer; flex: 1; min-width: 60px;
  transition: border-color 0.15s, transform 0.1s; font-family: var(--font-sans);
}
.hidratacion-btn:hover { transform: scale(1.05); }
.hidratacion-btn.active { border-color: var(--accent) !important; box-shadow: 0 0 0 2px rgba(126,200,164,0.2); }
.hidratacion-num { font-weight: 700; font-size: 1rem; }
.hidratacion-label { font-size: 0.62rem; text-align: center; margin-top: 2px; color: var(--gray-500); }

.control-historial { margin-top: 1.5rem; }
.control-historial-title { font-weight: 500; font-size: 0.9rem; color: var(--white); margin-bottom: 0.75rem; }

.control-card {
  background: var(--gray-900); border: 1px solid var(--gray-700);
  border-radius: var(--radius-sm); margin-bottom: 0.75rem; overflow: hidden;
}
.control-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1.1rem; cursor: pointer; user-select: none;
}
.control-card-header:hover { background: var(--gray-850); }
.control-card-fecha { font-weight: 500; font-size: 0.9rem; color: var(--white); display: block; margin-bottom: 0.3rem; }
.control-card-badges { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.control-badge {
  font-size: 0.7rem; background: var(--green-pale); color: var(--accent);
  border: 1px solid rgba(126,200,164,0.15); border-radius: 20px;
  padding: 0.15rem 0.55rem; font-weight: 500;
}
.control-card-toggle { color: var(--gray-600); font-size: 0.75rem; flex-shrink: 0; }
.control-card.open .control-card-toggle { transform: rotate(180deg); }
.control-card-body {
  display: none; padding: 0 1.1rem 1rem;
  border-top: 1px solid var(--gray-700);
}
.control-card.open .control-card-body { display: block; }
.control-detalle-row {
  display: grid; grid-template-columns: 180px 1fr; gap: 0.5rem;
  padding: 0.4rem 0; border-bottom: 1px solid var(--gray-800); font-size: 0.85rem;
}
.control-detalle-row:last-child { border-bottom: none; }
.control-detalle-label { font-weight: 500; color: var(--gray-500); }

/* ── GUÍA DE PORCIONES ──────────────────────────────────────── */
.guia-wrap { padding: 0 0 2rem; }

.guia-grupo-card {
  background: var(--gray-900); border: 1px solid var(--gray-700);
  border-radius: var(--radius-sm); overflow: hidden; transition: border-color 0.15s;
}
.guia-grupo-card:hover { border-color: var(--gray-600); }

.guia-grupo-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.85rem 1rem; cursor: pointer; user-select: none; gap: 0.5rem;
}
.guia-grupo-header:active { background: var(--gray-850); }
.guia-grupo-nombre { font-weight: 500; font-size: 0.9rem; color: var(--white); line-height: 1.3; }
.guia-grupo-sub { font-size: 0.72rem; color: var(--gray-500); margin-top: 1px; }
.guia-toggle-icon { color: var(--gray-600); font-size: 0.75rem; flex-shrink: 0; transition: transform 0.2s; }

.guia-grupo-body { border-top: 1px solid var(--gray-700); padding: 0.75rem 1rem 1rem; }

.guia-macros {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  background: var(--green-pale); border: 1px solid rgba(126,200,164,0.15);
  border-radius: var(--radius-sm); padding: 0.45rem 0.75rem;
  font-size: 0.75rem; font-weight: 500; color: var(--accent); margin-bottom: 0.75rem;
}

.guia-nota {
  background: rgba(224,184,112,0.08); border: 1px solid rgba(224,184,112,0.2);
  border-radius: var(--radius-sm); padding: 0.4rem 0.75rem;
  font-size: 0.75rem; color: var(--warning); margin-bottom: 0.75rem;
}

.guia-tabla-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.guia-tabla { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.guia-tabla thead th {
  font-size: 0.65rem; font-weight: 500; color: var(--gray-600);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.4rem 0.25rem; border-bottom: 1px solid var(--gray-700); text-align: left;
}
.guia-tabla tbody tr { border-bottom: 1px solid var(--gray-800); transition: background 0.1s; }
.guia-tabla tbody tr:last-child { border-bottom: none; }
.guia-tabla tbody tr:hover { background: var(--gray-850); }
.guia-tabla tbody td { padding: 0.45rem 0.25rem; color: var(--gray-300); vertical-align: middle; }

.guia-resultado-card {
  background: var(--gray-900); border: 1px solid var(--gray-700);
  border-radius: var(--radius-sm); padding: 0.75rem 1rem;
}
.guia-resultado-fila { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }

#guia-buscador {
  background: var(--gray-800); border: 1px solid var(--gray-700);
  color: var(--white); font-family: var(--font-sans);
}
#guia-buscador::placeholder { color: var(--gray-500); }
#guia-buscador:focus {
  border-color: var(--accent); outline: none;
  box-shadow: 0 0 0 2px rgba(126,200,164,0.1);
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .field-group.two-col { grid-template-columns: 1fr; }
  .field-group.categories-grid { grid-template-columns: repeat(2, 1fr); }
  .app-header h2 { font-size: 0.9rem; }
}

@media (max-width: 480px) {
  .escaner-viewfinder-movil { max-height: 65vh !important; min-height: 220px; }
  .modal-prep-macros { grid-template-columns: repeat(2, 1fr); }
  .control-banner-btn { width: 100%; }
  .hidratacion-barras { flex-direction: column; }
}

@media (max-width: 400px) {
  .summary-grid { grid-template-columns: 1fr; }
  .dash-macros-grid { grid-template-columns: 1fr; }
  .field-group.categories-grid { grid-template-columns: 1fr; }
  .animo-opciones { gap: 4px; }
  .animo-opcion { min-width: 48px; padding: 0.65rem 0.4rem; }
}

@media (max-width: 600px) {
  input, select, textarea { font-size: 16px !important; }

  button, .btn-add, .btn-remove, .btn-edit,
  .btn-add-prep, .btn-mis-preps, .btn-primary, .btn-reset { min-height: 44px; min-width: 44px; }

  .modal-prep-box {
    width: 100% !important; max-width: 100% !important;
    min-height: 50vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    position: fixed; bottom: 0; left: 0; right: 0;
    max-height: 92vh; overflow-y: auto;
  }
  .modal-overlay-prep { align-items: flex-end !important; }

  .prep-row { flex-wrap: wrap; gap: 0.5rem; }
  .prep-row select { width: 100%; }
  .add-entry-row { flex-wrap: wrap; gap: 0.5rem; }
  .add-entry-row input[type="text"] { width: 100%; }
  .add-entry-row .input-categoria { width: 100%; flex: unset; }

  .btn-edit, .btn-remove { min-width: 40px; min-height: 40px; font-size: 1rem; padding: 4px 6px; }
  .btn-confirm, .btn-cancel { min-width: 40px; min-height: 40px; font-size: 1rem; }
  .entry-qty-input { width: 80px !important; font-size: 16px !important; min-height: 40px; }

  .meal-header { padding: 0.85rem 0.9rem; }
  .meal-header-left { min-width: 0; }
  .meal-title { font-size: 0.88rem; }
  .meal-subtitle { font-size: 0.72rem; }
  .meal-badge { font-size: 0.68rem !important; max-width: 48vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .reset-day-wrap { text-align: center; }
  .reset-day-wrap .btn-reset { width: 100%; }
  .bebidas-grid { grid-template-columns: 1fr; }

  .graficos-container { grid-template-columns: 1fr; }
  .medidas-form-grid { grid-template-columns: 1fr; }
  .control-detalle-row { grid-template-columns: 1fr; gap: 0.15rem; }
  .hidratacion-label { font-size: 0.55rem; }

  .btn-sm-green, .btn-sm-red { min-height: 44px; padding: 6px 12px; }
  .habito-maestra-item { flex-wrap: wrap; }
  .habito-seg-header { flex-wrap: wrap; }
  .usda-modal-box { max-width: 100%; }
}

/* ── MODO CLARO — SOBREESCRITURAS ───────────────────────────── */
body:not(.dark) .card,
body:not(.dark) .summary-panel,
body:not(.dark) .meal-card,
body:not(.dark) .modal-prep-box,
body:not(.dark) .dash-macro-card,
body:not(.dark) .dash-fibra-card,
body:not(.dark) .dash-peso-card,
body:not(.dark) .habito-seguimiento-card,
body:not(.dark) .habito-maestra-item,
body:not(.dark) .animo-registro-hoy,
body:not(.dark) .animo-hist-item,
body:not(.dark) .control-pregunta,
body:not(.dark) .control-card,
body:not(.dark) .medida-card,
body:not(.dark) .grafico-card,
body:not(.dark) .usda-result-card,
body:not(.dark) .guia-grupo-card,
body:not(.dark) .guia-resultado-card,
body:not(.dark) .historial-item,
body:not(.dark) .gestionar-item,
body:not(.dark) .entry-item,
body:not(.dark) .meals-sort-item,
body:not(.dark) .control-banner,
body:not(.dark) .habito-banner-vencido {
  background: #ffffff;
  border-color: #e0e0e0;
}

body:not(.dark) .app-header { background: #141414; }
body:not(.dark) .app-header h2 { color: #fafafa; }
body:not(.dark) #btn-hamburguesa span { background: #fafafa; }
body:not(.dark) #btn-toggle-tema-header { border-color: rgba(255,255,255,0.2); color: #fafafa; }

body:not(.dark) .summary-panel   { background: #f8f8f8; border-color: #e0e0e0; }
body:not(.dark) .summary-card    { background: #f0f0f0; border-color: #e0e0e0; border-left-color: #40916c; }
body:not(.dark) .porciones-bar-wrap { background: rgba(64,145,108,0.06); border-color: rgba(64,145,108,0.2); }
body:not(.dark) .porciones-bar-header { color: #40916c; }
body:not(.dark) .porciones-restantes { color: #40916c; }
body:not(.dark) .progress-track { background: rgba(0,0,0,0.1); }
body:not(.dark) .progress-fill   { background: #40916c; }

body:not(.dark) .meal-header       { background: #f0f0f0; border-color: #e0e0e0; }
body:not(.dark) .meal-header:hover { background: rgba(64,145,108,0.05); }
body:not(.dark) .meal-title    { color: #0a0a0a; }
body:not(.dark) .meal-subtitle { color: #888; }

body:not(.dark) .field input,
body:not(.dark) .field select,
body:not(.dark) .add-entry-row input,
body:not(.dark) .input-prep,
body:not(.dark) .input-prep-qty,
body:not(.dark) .input-categoria,
body:not(.dark) .control-input,
body:not(.dark) .control-textarea,
body:not(.dark) #guia-buscador {
  background: #f4f4f4; border-color: #d0d0d0; color: #0a0a0a;
}

body:not(.dark) .select-filtro { background: #f4f4f4; border-color: #d0d0d0; color: #333; }
body:not(.dark) .entry-qty-input { background: #fff; border-color: #40916c; color: #0a0a0a; }

body:not(.dark) .cat-table th  { background: rgba(64,145,108,0.08); color: #2d6a4f; border-color: rgba(64,145,108,0.25); }
body:not(.dark) .cat-table td  { border-color: #f0f0f0; color: #333; }
body:not(.dark) .cat-table tbody tr:hover td { background: #f8f8f8; }
body:not(.dark) .cat-name  { color: #0a0a0a; }
body:not(.dark) .over-limit-row td { background: #fff5f5; }

body:not(.dark) #menu-hamburguesa-drawer { background: #ffffff; border-color: #e0e0e0; }
body:not(.dark) .drawer-header           { background: #141414; }
body:not(.dark) .drawer-item             { color: #555; }

/* REPARACIÓN FINAL: Cierre correcto del menú lateral en Modo Claro */
body:not(.dark) .drawer-item:hover { background: #f4f4f4; color: #0a0a0a; }
body:not(.dark) .drawer-section-label { color: #888; }

/* FIX ADICIONAL CONTRASTE MODO CLARO: Botones principales legibles con fondo verde oscuro */
body:not(.dark) .btn-primary,
body:not(.dark) .btn-add-prep {
  background: #40916c;
  color: #ffffff;
}
body:not(.dark) .btn-primary:hover,
body:not(.dark) .btn-add-prep:hover {
  background: #2d6a4f;
}

body:not(.dark) .btn-modo-prueba { background: #ffffff; border-color: #d0d0d0; color: #333; }
body:not(.dark) .btn-modo-prueba:hover { border-color: #40916c; color: #0a0a0a; }
body:not(.dark) .btn-modo-porciones { border-color: #40916c; color: #40916c; background: rgba(64,145,108,0.05); }

/* === CORRECCIÓN DE BADGE "POWERED BY" Y TARJETA DE MACROS === */

/* 1. MODO OSCURO (Por defecto) */

/* Cambiar el texto "Powered by fatsecret" a un tono legible (gris claro o blanco) */
.modal-prep-box a[href*="fatsecret"], 
.modal-prep-box span[class*="powered"],
.modal-prep-box .powered-by {
  color: var(--gray-400) !important;
  text-decoration: none;
}

/* Ajustar la tarjeta blanca de "VALORES POR 100g" */
/* Buscamos el contenedor interno que aloja los iconos y nombres de los macros */
.modal-prep-box .valores-por-100g, 
.modal-prep-box [class*="valores-container"],
.modal-prep-box div[style*="background:#f8f9fa"],
.modal-prep-box div[style*="background: #f8f9fa"] {
  background: var(--gray-800) !important;
  border: 1px solid var(--gray-700) !important;
  border-radius: 10px !important;
}

/* Forzar a que los nombres de los nutrientes (Calorías, Carbohidratos, etc.) se vean blancos */
.modal-prep-box div[style*="background:#f8f9fa"] *,
.modal-prep-box div[style*="background: #f8f9fa"] * {
  color: var(--white) !important;
}


/* 2. MODO CLARO (Reversión cuando NO tiene la clase .dark) */

/* Modo claro: devolver fondo claro con texto oscuro */
body:not(.dark) .modal-prep-box div[style*="background:#f8f9fa"],
body:not(.dark) .modal-prep-box div[style*="background: #f8f9fa"] {
  background: #f4f4f4 !important;
  border-color: #e0e0e0 !important;
}

body:not(.dark) .modal-prep-box div[style*="background:#f8f9fa"] *,
body:not(.dark) .modal-prep-box div[style*="background: #f8f9fa"] * {
  color: #0a0a0a !important;
}

/* Texto secundario dentro del modal de detalle USDA */
.modal-prep-box div[style*="font-size:0.72rem"],
.modal-prep-box div[style*="font-size: 0.72rem"] {
  color: var(--gray-400) !important;
}
/* ===== MODO OSCURO: BUSCADOR Y BADGES ===== */

body.dark .usda-result-card {
  background: var(--gray-800, #1e1e1e);
  border-color: var(--gray-700, #333);
  color: var(--gray-100, #f0f0f0);
}

body.dark .usda-result-card:hover {
  background: var(--gray-700, #2a2a2a);
}

/* Badge DB Local */
body.dark span[style*="background:#d8f3dc"] {
  background: #1a3a2a !important;
  color: #6dbf8a !important;
}

/* Badge Open Food Facts / FatSecret */
body.dark span[style*="background:#e8f4fd"] {
  background: #0d2a3a !important;
  color: #6ab8e8 !important;
}

/* Badge Chile */
body.dark span[style*="background:#fff3cd"] {
  background: #3a2e00 !important;
  color: #e0b84a !important;
}

/* Badge gris genérico (dataType) */
body.dark span[style*="background:#f3f3f3"] {
  background: #2a2a2a !important;
  color: #aaa !important;
}

/* Badge marca (brandOwner) */
body.dark span[style*="background:#e2e2e2"] {
  background: #2a2a2a !important;
  color: #aaa !important;
}

/* Macros row en resultado */
body.dark .usda-macros-row {
  color: var(--gray-400, #aaa);
}

/* Modal detalle USDA */
body.dark .modal-prep-box {
  background: var(--gray-900, #111);
  color: var(--gray-100, #f0f0f0);
}

/* Tabla de macros por 100g dentro del modal */
body.dark div[style*="background:#f8f9fa"] {
  background: #1a1a1a !important;
  border-color: #333 !important;
}

body.dark div[style*="border-bottom:1px solid #eee"] {
  border-color: #333 !important;
}

/* Preview de macros (fondo verde pálido) */
body.dark #usda-preview {
  background: #0d2a1a !important;
  color: var(--gray-100, #f0f0f0) !important;
}

/* Inputs cantidad y selector unidad */
body.dark #usda-cantidad,
body.dark #usda-unidad,
body.dark #usda-gramos-por-unidad {
  background: #1e1e1e !important;
  color: #f0f0f0 !important;
  border-color: #444 !important;
}

/* Opciones de modo (radio labels) */
body.dark .usda-modo-opcion {
  background: #1e1e1e !important;
  color: #ccc !important;
  border-color: #444 !important;
}

body.dark .usda-modo-opcion:has(input:checked) {
  background: #0d2a1a !important;
  color: #6dbf8a !important;
  border-color: #40916c !important;
}

/* Input buscador */
body.dark #usda-input {
  background: #1e1e1e !important;
  color: #f0f0f0 !important;
  border-color: #444 !important;
}

body.dark #usda-input::placeholder {
  color: #666 !important;
}

/* Texto secundario "por 100g · FatSecret" */
body.dark .usda-result-card div[style*="color:#bbb"] {
  color: #666 !important;
}

/* Nombre del alimento en tarjeta resultado */
body.dark .usda-result-card div[style*="color:#222"] {
  color: #f0f0f0 !important;
}

/* Flecha › */
body.dark .usda-result-card span[style*="color:#aaa"] {
  color: #555 !important;
}