/* =====================================================================
   FIT BITES · estilos.css
   Diseño de "app de verdad", inspirado en los diarios de comida más
   usados (MyFitnessPal, Cronometer, MacroFactor, Yazio):
   - fondo neutro, tarjetas blancas con borde fino (casi sin sombras)
   - una sola tipografía (Inter) y números que no "bailan" (tabular-nums)
   - un solo color de marca (verde) y un color fijo por macro
   - en el móvil, barra de pestañas abajo, como en una app
   Cómo se lee un CSS:  selector { propiedad: valor; }
   Va DESPUÉS de Bootstrap: lo que pongamos aquí pisa lo suyo.
   ===================================================================== */

/* ---------- 1. COLORES Y MEDIDAS (variables) ----------
   Todo el diseño usa estas variables: para cambiar un color, se cambia aquí */
:root {
  --fondo: #F5F6F5;           /* fondo de la página: gris casi blanco */
  --superficie: #FFFFFF;      /* tarjetas, ventanas y casillas */
  --superficie-2: #F0F2F1;    /* fondos suaves (al pasar el ratón, carriles de barras) */
  --borde: #E3E6E4;           /* líneas finas */
  --texto: #121715;           /* texto principal (casi negro) */
  --texto-suave: #5C6661;     /* texto secundario (gris; contraste 5,6:1 sobre blanco) */

  --marca: #1E6B4E;           /* verde de la marca (texto y detalles) */
  --marca-boton: #1E6B4E;     /* verde de los botones rellenos */
  --marca-hover: #17573F;     /* verde al pasar el ratón */
  --marca-suave: #E7F1EC;     /* verde muy suave (fondos de lo elegido) */

  --aviso: #B4471F;           /* "te has pasado": naranja quemado (5:1 sobre blanco) */
  --peligro: #C0392B;         /* borrar */

  --macro-p: #D6456A;         /* proteína: frambuesa */
  --macro-c: #DE9426;         /* carbohidratos: ámbar */
  --macro-g: #3D72D3;         /* grasas: azul */

  --radio: 14px;              /* esquinas de las tarjetas */
  --radio-sm: 10px;           /* esquinas de botones y casillas */
  --sombra: 0 1px 2px rgba(16, 24, 20, .05);   /* sombra mínima: solo da un poco de relieve */
  --sombra-flotante: 0 8px 28px rgba(16, 24, 20, .12);  /* para lo que flota (barra de abajo, ventanas) */

  /* Bootstrap lee sus propias variables: las apuntamos a las nuestras */
  --bs-body-bg: var(--fondo);
  --bs-body-color: var(--texto);
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* Inter; si no carga, la del sistema */
  --bs-body-font-size: .95rem;
  --bs-border-color: var(--borde);
  --bs-secondary-color: var(--texto-suave);          /* .text-body-secondary */
  --bs-emphasis-color: var(--texto);
  --bs-link-color: var(--marca);
  --bs-link-color-rgb: 30, 107, 78;                  /* el mismo verde en formato r, g, b (Bootstrap lo necesita así) */
  --bs-link-hover-color: var(--marca-hover);
  --bs-link-hover-color-rgb: 23, 87, 63;
  --bs-focus-ring-color: rgba(30, 107, 78, .25);
}

/* TEMA OSCURO: Bootstrap pone data-bs-theme="dark" en <html>; aquí cambiamos los valores */
[data-bs-theme="dark"] {
  --fondo: #0D1110;
  --superficie: #151A18;
  --superficie-2: #1C2320;
  --borde: #28312D;
  --texto: #E7ECE9;
  --texto-suave: #9AA6A0;

  --marca: #4CB386;           /* verde más claro: se lee sobre fondo oscuro */
  --marca-boton: #23704F;     /* los botones, más oscuros: el texto blanco encima se lee bien (6:1) */
  --marca-hover: #1C5C41;
  --marca-suave: #17261F;

  --aviso: #F08A6C;
  --peligro: #F07F6A;

  --macro-p: #F06A8B;
  --macro-c: #F0B04D;
  --macro-g: #6E9BEF;

  --sombra: none;
  --sombra-flotante: 0 8px 28px rgba(0, 0, 0, .5);

  --bs-body-bg: var(--fondo);
  --bs-body-color: var(--texto);
  --bs-border-color: var(--borde);
  --bs-secondary-color: var(--texto-suave);
  --bs-emphasis-color: var(--texto);
  --bs-link-color: var(--marca);
  --bs-link-color-rgb: 76, 179, 134;
  --bs-link-hover-color: #7FD0AB;
  --bs-link-hover-color-rgb: 127, 208, 171;
  --bs-focus-ring-color: rgba(76, 179, 134, .3);
}

/* ---------- 2. BASE ---------- */
body {
  -webkit-font-smoothing: antialiased;     /* letras más finas y nítidas en Mac */
  font-feature-settings: "cv11";           /* variante de Inter con la "a" de un piso, más limpia */
}

h1, h2, h3, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 650;                        /* títulos firmes pero no gruesos */
  letter-spacing: -.015em;                 /* letras un poco más juntas: aspecto más cuidado */
}

.num { font-variant-numeric: tabular-nums; }  /* números: todas las cifras miden lo mismo (no "bailan" al cambiar) */

.min-w-0 { min-width: 0; }                 /* deja que un texto largo se recorte con "…" en vez de empujar */

/* Contorno de foco para quien usa el teclado (:focus-visible = solo con teclado, no con el ratón) */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
}

/* Enlace "Saltar al contenido": escondido arriba hasta que llega el foco con Tab */
.saltar-contenido {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 2000;
  padding: .55rem 1rem;
  border-radius: var(--radio-sm);
  background: var(--marca-boton);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.saltar-contenido:focus { top: .75rem; }

#diario:focus { outline: none; }           /* la sección recibe el foco al saltar, sin contorno */

/* ---------- 3. BOTONES ---------- */
.btn {
  --bs-btn-font-weight: 500;
  --bs-btn-border-radius: var(--radio-sm);
  --bs-btn-focus-box-shadow: 0 0 0 3px var(--bs-focus-ring-color);
}

/* Botón principal: verde relleno */
.btn-verde {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--marca-boton);
  --bs-btn-border-color: var(--marca-boton);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--marca-hover);
  --bs-btn-hover-border-color: var(--marca-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--marca-hover);
  --bs-btn-active-border-color: var(--marca-hover);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--marca-boton);
  --bs-btn-disabled-border-color: var(--marca-boton);
}

/* Botón secundario (usamos la clase de Bootstrap btn-outline-dark): blanco con borde fino */
.btn-outline-dark {
  --bs-btn-color: var(--texto);
  --bs-btn-bg: var(--superficie);
  --bs-btn-border-color: var(--borde);
  --bs-btn-hover-color: var(--texto);
  --bs-btn-hover-bg: var(--superficie-2);
  --bs-btn-hover-border-color: var(--borde);
  --bs-btn-active-color: var(--texto);
  --bs-btn-active-bg: var(--superficie-2);
  --bs-btn-active-border-color: var(--borde);
  --bs-btn-disabled-color: var(--texto);
  --bs-btn-disabled-bg: var(--superficie);
  --bs-btn-disabled-border-color: var(--borde);
}

.btn-outline-danger {
  --bs-btn-color: var(--peligro);
  --bs-btn-border-color: var(--borde);
  --bs-btn-bg: var(--superficie);
  --bs-btn-hover-bg: var(--peligro);
  --bs-btn-hover-border-color: var(--peligro);
}

/* Botón redondo solo con icono (tema, flechas...) */
.boton-icono {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--texto);
  font-size: 1.05rem;
}

.boton-icono:hover:not(:disabled) { background: var(--superficie-2); }
.boton-icono:disabled { opacity: .3; }

/* Control segmentado (Día | Semana, Alimentos | Recetas): dos botones pegados sobre un carril gris */
.control-segmentado {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: var(--radio-sm);
  background: var(--superficie-2);
}

.control-segmentado .btn {
  --bs-btn-padding-y: .3rem;
  --bs-btn-padding-x: .9rem;
  --bs-btn-font-size: .85rem;
  border: 0;
  border-radius: 8px !important;            /* Bootstrap junta las esquinas de los grupos: aquí cada uno redondeado */
  background: transparent;
  color: var(--texto-suave);
}

.control-segmentado .btn.active {          /* el elegido: blanco y con relieve, como en iOS */
  background: var(--superficie);
  color: var(--texto);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

.control-segmentado.w-100 .btn { flex: 1; }  /* si ocupa todo el ancho, los botones se reparten */

/* Número entre − y + (raciones): Bootstrap apaga los "disabled" al 65 %; aquí no, para que se lea */
.contador-raciones.disabled {
  opacity: 1;
  color: var(--texto);
  min-width: 3rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- 4. FORMULARIOS ---------- */
.form-control,
.form-select {
  background-color: var(--superficie);
  border-color: var(--borde);
  border-radius: var(--radio-sm);
  color: var(--texto);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--marca);
  box-shadow: 0 0 0 3px var(--bs-focus-ring-color);  /* un halo verde suave */
}

.input-group-text { background: var(--superficie-2); border-color: var(--borde); color: var(--texto-suave); }

.form-check-input:checked { background-color: var(--marca-boton); border-color: var(--marca-boton); }  /* casillas marcadas en verde */
.form-check-input:focus { box-shadow: 0 0 0 3px var(--bs-focus-ring-color); border-color: var(--marca); }

/* Buscador grande: lupa y casilla en una sola pieza redondeada */
.buscador-grande .input-group-text { background: var(--superficie); border-right: 0; border-radius: var(--radio-sm) 0 0 var(--radio-sm); }
.buscador-grande .form-control { border-left: 0; border-radius: 0 var(--radio-sm) var(--radio-sm) 0; }
.buscador-grande .form-control:focus { box-shadow: none; }
.buscador-grande:focus-within { border-radius: var(--radio-sm); box-shadow: 0 0 0 3px var(--bs-focus-ring-color); }  /* el halo, en toda la pieza */
.buscador-grande:focus-within .input-group-text,
.buscador-grande:focus-within .form-control { border-color: var(--marca); }

/* ---------- 5. BARRA SUPERIOR ---------- */
.barra-app {
  position: sticky;                        /* se queda arriba al bajar */
  top: 0;
  z-index: 1020;
  background: color-mix(in srgb, var(--superficie) 88%, transparent);  /* blanco un poco transparente... */
  backdrop-filter: saturate(180%) blur(12px);  /* ...que difumina lo que pasa por debajo (como en iOS) */
  border-bottom: 1px solid var(--borde);
}

.barra-app-contenido {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 3.5rem;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.02em;
  color: var(--texto);
  text-decoration: none;
}

.logo-cuenco { fill: var(--marca); }       /* el logo: cuenco verde... */
.logo-hoja-1 { fill: #8CC63F; }            /* ...y dos hojas */
.logo-hoja-2 { fill: #5FA83A; }

.nav-principal { display: flex; gap: .25rem; margin-left: 1rem; }

.nav-enlace {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .75rem;
  border: 0;
  border-radius: var(--radio-sm);
  background: transparent;
  color: var(--texto-suave);
  font-weight: 500;
  text-decoration: none;
}

.nav-enlace:hover { background: var(--superficie-2); color: var(--texto); }

.contador {                                /* el numerito (lista de la compra) */
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--marca-boton);
  color: #fff;
  font-size: .7rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.contador[data-cero] { display: none; }    /* si es 0, no se enseña (JavaScript pone data-cero) */

.barra-acciones { margin-left: auto; display: flex; align-items: center; gap: .25rem; }

.boton-cuenta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .8rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto);
  font-weight: 500;
  font-size: .9rem;
}

.boton-cuenta:hover { background: var(--superficie-2); }

/* ---------- 6. SECCIONES Y TARJETAS ---------- */
.seccion { padding: 1.5rem 0 2rem; }

.titulo-pagina { font-size: 1.6rem; margin: 0; }

.titulo-seccion { font-size: 1.25rem; margin: 0; }

.subtitulo { color: var(--texto-suave); margin: 0; font-size: .9rem; }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.aviso-suave {
  padding: .6rem .9rem;
  border-radius: var(--radio-sm);
  background: var(--marca-suave);
  color: var(--texto);
  font-size: .875rem;
}

/* ---------- 7. DIARIO: cabecera y tira de la semana ---------- */
.diario-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
}

.tira-semana {
  display: flex;
  align-items: center;
  gap: .25rem;
  max-width: 40rem;                        /* en pantallas anchas no se estira de más */
  margin-bottom: 1.25rem;
}

.dias-tira {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));  /* 7 columnas iguales */
  gap: .25rem;
}

.dia-tira {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: .45rem 0 .6rem;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

.dia-tira .letra { font-size: .7rem; font-weight: 600; color: var(--texto-suave); text-transform: uppercase; }  /* L, M, X... */
.dia-tira .numero { font-size: 1rem; font-weight: 600; }  /* 13, 14... */

.dia-tira:hover:not(:disabled) { background: var(--superficie); border-color: var(--borde); }

.dia-tira.hoy .numero { color: var(--marca); }  /* hoy, en verde */

.dia-tira[aria-pressed="true"] {           /* el día elegido: relleno verde, como en Yazio */
  background: var(--marca-boton);
  border-color: var(--marca-boton);
}

.dia-tira[aria-pressed="true"] .letra,
.dia-tira[aria-pressed="true"] .numero { color: #fff; }

.dia-tira.con-datos::after {               /* un puntito debajo si ese día tiene algo apuntado */
  content: "";
  position: absolute;
  bottom: .25rem;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--marca);
}

.dia-tira[aria-pressed="true"].con-datos::after { background: #fff; }
.dia-tira:disabled { opacity: .35; }       /* los días que aún no han llegado */

/* ---------- 8. DIARIO: resumen (anillo + macros) ---------- */
.resumen-dia { padding: 1.25rem; }

@media (min-width: 992px) {
  .resumen-dia { position: sticky; top: 4.5rem; }  /* en ordenador, el resumen se queda a la vista al bajar */
}

.anillo-caja {
  position: relative;                      /* para poner el número encima del anillo */
  width: 168px;
  height: 168px;
  margin: 0 auto .75rem;
}

.anillo-caja svg { width: 100%; height: 100%; transform: rotate(-90deg); }  /* el anillo empieza arriba (por defecto empezaría a la derecha) */
.anillo-carril { fill: none; stroke: var(--superficie-2); stroke-width: 12; }
.anillo-progreso { fill: none; stroke: var(--marca); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset .5s ease; }
.anillo-progreso.pasado { stroke: var(--aviso); }

.anillo-centro {
  position: absolute;
  inset: 0;                                /* ocupa todo el anillo... */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;                 /* ...y centra el texto */
}

.anillo-numero { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.anillo-etiqueta { font-size: .8rem; color: var(--texto-suave); margin-top: .25rem; }
.anillo-centro.pasado .anillo-numero { color: var(--aviso); }

.ecuacion {                                /* Objetivo − Comido = Restantes */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
  padding: .75rem 0;
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
  margin-bottom: 1rem;
}

.ecuacion strong { display: block; font-size: 1rem; font-variant-numeric: tabular-nums; }
.ecuacion span { font-size: .75rem; color: var(--texto-suave); }

.macro-fila { margin-bottom: .75rem; }

.macro-fila-texto {
  display: flex;
  justify-content: space-between;
  font-size: .85rem;
  margin-bottom: .3rem;
}

.macro-fila-texto .valor { font-variant-numeric: tabular-nums; color: var(--texto-suave); }
.macro-fila-texto .valor strong { color: var(--texto); font-weight: 600; }

.macro-barra { height: 6px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; }
.macro-barra > span { display: block; height: 100%; border-radius: inherit; transition: width .4s ease; }

.excedido { color: var(--aviso); font-weight: 600; }

.punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .35rem; }  /* el puntito de color de cada macro */

/* colores por macro (barras, puntos y gráficos) */
.macro-p { background-color: var(--macro-p); }
.macro-c { background-color: var(--macro-c); }
.macro-g { background-color: var(--macro-g); }
.barra-kcal { background-color: var(--marca); }

/* ---------- 9. DIARIO: comidas ---------- */
.comidas-lista { display: grid; gap: 1rem; }

.comida-tarjeta { overflow: hidden; }      /* para que las filas respeten las esquinas redondeadas */

.comida-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  padding: .9rem 1.1rem .6rem;
}

.comida-titulo { font-size: 1rem; margin: 0; }
.comida-macros { font-size: .75rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.comida-kcal { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.lista-filas { list-style: none; margin: 0; padding: 0; }

.fila-alimento { border-top: 1px solid var(--borde); }

.fila-alimento-boton {                     /* toda la fila es un botón: al pulsarla se edita */
  width: 100%;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem 1.1rem;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.fila-alimento-boton:hover { background: var(--superficie-2); }
.fila-alimento-boton:focus-visible { outline-offset: -2px; }

.fila-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fila-nombre { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }  /* si no cabe: "…" */
.fila-detalle { font-size: .78rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.fila-kcal { font-weight: 600; font-variant-numeric: tabular-nums; }
.fila-kcal small { font-weight: 400; color: var(--texto-suave); }

.fila-alimento.editando { background: var(--superficie-2); }

.fila-editor {                             /* lo que aparece al pulsar la fila: cantidad, eliminar y listo */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: 0 1.1rem .75rem;
}

.cantidad-gramos { width: 7rem; flex: 0 0 auto; }  /* la casilla de gramos: estrecha */

.btn-anadir-comida {                       /* "+ Añadir alimento" al final de cada comida */
  width: 100%;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.1rem;
  border: 0;
  border-top: 1px solid var(--borde);
  background: transparent;
  color: var(--marca);
  font-weight: 600;
  font-size: .9rem;
  text-align: left;
}

.btn-anadir-comida:hover { background: var(--marca-suave); }
.btn-anadir-comida:focus-visible { outline-offset: -2px; }

/* ---------- 10. SEMANA ---------- */
.macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }  /* las 3 cifras del resumen semanal */

.macro {
  padding: .9rem 1rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  font-size: .8rem;
  color: var(--texto-suave);
}

.macro strong { display: block; font-size: 1.35rem; color: var(--texto); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.grafico-semana { display: block; width: 100%; height: auto; overflow: visible; }
.grafico-semana .fondo-barra { fill: var(--superficie-2); }
.grafico-semana .barra-kcal { fill: var(--marca); }
.grafico-semana .macro-p { fill: var(--macro-p); }
.grafico-semana .linea-meta { stroke: var(--texto-suave); stroke-width: 1; stroke-dasharray: 4 4; }
.grafico-semana .texto-meta { fill: var(--texto-suave); font-size: 10px; text-anchor: end; }
.grafico-semana .etiqueta-barra { fill: var(--texto-suave); font-size: 11px; text-anchor: middle; }
.grafico-semana .etiqueta-barra.hoy { fill: var(--texto); font-weight: 700; }

.dias-semana { list-style: none; padding: 0; margin: 0; }

.dia-semana {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem .25rem;
  border: 0;
  border-bottom: 1px solid var(--borde);
  background: transparent;
  color: inherit;
  text-align: left;
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
}

.dia-semana:hover:not(:disabled) { background: var(--superficie-2); }
.dia-semana.hoy { font-weight: 600; }
.dia-semana:disabled { opacity: .4; }

/* ---------- 11. VENTANA DE AÑADIR ---------- */
.titulo-lista {                            /* "Recientes", "Todos los alimentos" */
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texto-suave);
  margin: .75rem 0 .35rem;
}

.lista-opciones { display: flex; flex-direction: column; }

.opcion-fila { display: flex; align-items: center; border-bottom: 1px solid var(--borde); }

.opcion {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .75rem;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.opcion:hover { background: var(--superficie-2); }
.opcion.elegida { background: var(--marca-suave); box-shadow: inset 3px 0 0 var(--marca); }  /* la elegida: fondo verde suave y una raya a la izquierda */

.opcion-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.opcion-nombre { font-weight: 500; }
.opcion-detalle { font-size: .78rem; color: var(--texto-suave); }
.opcion-kcal { font-size: .85rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.opcion-kcal small { font-weight: 400; color: var(--texto-suave); }

.etiqueta-propio {                         /* "Tuyo" */
  margin-left: .35rem;
  padding: .05rem .4rem;
  border-radius: 6px;
  background: var(--marca-suave);
  color: var(--marca);
  font-size: .7rem;
  font-weight: 600;
  vertical-align: middle;
}

.seleccion-anadir {                        /* abajo: lo elegido, la cantidad y "Añadir" */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem .75rem;
  background: var(--superficie);
  border-top: 1px solid var(--borde);
}

.seleccion-anadir > .flex-grow-1 { flex-basis: 12rem; }

.chips-gramos { display: flex; flex-wrap: wrap; gap: .35rem; flex-basis: 100%; }  /* los botones de gramos rápidos, en su propia línea */

.chip-gramos {
  padding: .25rem .65rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto);
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
}

.chip-gramos:hover { background: var(--superficie-2); }
.chip-gramos[aria-pressed="true"] { border-color: var(--marca); background: var(--marca-suave); color: var(--marca); font-weight: 600; }

/* ---------- 12. PÍLDORAS (filtros) ---------- */
.pills-scroll {
  display: flex;
  gap: .4rem;
  overflow-x: auto;                        /* si no caben, se deslizan hacia los lados */
  padding-bottom: .25rem;
  scrollbar-width: none;                   /* sin barra de desplazamiento (Firefox) */
}

.pills-scroll::-webkit-scrollbar { display: none; }  /* ...ni en Chrome y Safari */

.pill-tipo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .8rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto);
  font-size: .85rem;
  white-space: nowrap;
}

.pill-tipo:hover { background: var(--superficie-2); }
.pill-tipo.activa { background: var(--texto); border-color: var(--texto); color: var(--fondo); }  /* la elegida: oscura (en oscuro, clara) */

.barra-filtros { display: flex; flex-direction: column; gap: .75rem; }

@media (min-width: 768px) {
  .barra-filtros { flex-direction: row; align-items: center; justify-content: space-between; gap: 1.5rem; }
  .barra-filtros .pills-scroll { flex: 1; min-width: 0; }
}

.ordenar-caja { width: auto; flex: 0 0 auto; }

/* ---------- 13. RECETAS ---------- */
.receta {
  border: 1px solid var(--borde) !important;  /* Bootstrap le pone border-0 desde el HTML: aquí manda el borde fino */
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--superficie);
  box-shadow: var(--sombra) !important;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}

.receta:hover { border-color: color-mix(in srgb, var(--texto) 25%, var(--borde)) !important; box-shadow: var(--sombra-flotante) !important; }

.receta-img { background: var(--superficie-2); }
.receta-img.ratio { --bs-aspect-ratio: 66%; }  /* foto apaisada (3:2) */
.receta-img > div { color: var(--texto-suave); }
.receta-foto { width: 100%; height: 100%; object-fit: cover; }  /* la foto rellena el hueco sin deformarse */

.receta-titulo {                           /* el nombre: es un botón (para el teclado) que se ve como un título */
  all: unset;
  cursor: pointer;
  border-radius: 4px;
}

.receta-titulo:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.receta:hover .receta-titulo { text-decoration: underline; text-underline-offset: 3px; }

.kcal-grande { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.recipe-tag {                              /* el tipo de plato (Bowl, Pasta...) */
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .15rem .55rem;
  border-radius: 6px;
  background: var(--superficie-2);
  color: var(--texto-suave);
  font-size: .72rem;
  font-weight: 600;
}

.receta-fuego {                            /* "Alta en proteína", encima de la foto */
  position: absolute;
  top: .75rem;
  right: .75rem;
  background: rgba(255, 255, 255, .94);
  color: #9B1C40;                          /* frambuesa oscuro: se lee bien sobre el blanco */
}

.btn-fav {                                 /* el corazón, encima de la foto */
  position: absolute;
  top: .65rem;
  left: .65rem;
  width: 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: #59615D;
}

.btn-fav.activa { color: #D6365A; }

.progress-stacked { height: 6px; border-radius: 999px; background: var(--superficie-2); }  /* la barra del reparto de calorías */

.btn-compra { --bs-btn-color: var(--texto); --bs-btn-border-color: var(--borde); --bs-btn-bg: var(--superficie); --bs-btn-hover-bg: var(--superficie-2); --bs-btn-hover-border-color: var(--borde); }
.btn-compra.activa { --bs-btn-color: #fff; --bs-btn-bg: var(--marca-boton); --bs-btn-border-color: var(--marca-boton); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--marca-hover); }

#detalleFoto { display: block; width: 100%; height: 15rem; object-fit: cover; }  /* la foto del detalle */

/* ---------- 14. FORMULARIO DE RECETA ---------- */
#listaIngredientes { list-style: none; padding: 0; margin: .75rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }

.chip-ingrediente {                        /* cada ingrediente como etiqueta con su × */
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .4rem .25rem .7rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie);
  font-size: .85rem;
}

.chip-ingrediente button {
  width: 1.4rem;
  height: 1.4rem;
  border: 0;
  border-radius: 50%;
  background: var(--superficie-2);
  color: var(--texto-suave);
  line-height: 1;
}

.chip-ingrediente button:hover { background: var(--peligro); color: #fff; }

.foto-vista { max-width: 12rem; max-height: 9rem; object-fit: cover; }

/* ---------- 15. LISTA DE LA COMPRA ---------- */
.item-compra {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--borde);
  margin: 0;
  cursor: pointer;
}

.item-compra .item-nombre { flex: 1; cursor: pointer; margin: 0; }
.item-compra .item-cantidad { color: var(--texto-suave); font-variant-numeric: tabular-nums; white-space: nowrap; }
.item-compra small { display: block; color: var(--texto-suave); font-size: .75rem; }
.item-compra.tachado .item-nombre,
.item-compra.tachado .item-cantidad { text-decoration: line-through; opacity: .5; }

.compra-borrar,
.compra-quitar {
  border: 0;
  background: none;
  color: var(--texto-suave);
  font-size: 1.15rem;
  line-height: 1;
  padding: 0 .25rem;
  border-radius: 4px;
}

.compra-borrar:hover,
.compra-quitar:hover { color: var(--peligro); }

/* ---------- 16. VENTANAS, PANELES Y AVISOS ---------- */
.modal { --bs-modal-bg: var(--superficie); --bs-modal-border-radius: 18px; --bs-modal-header-border-color: var(--borde); --bs-modal-footer-border-color: var(--borde); }
.offcanvas { --bs-offcanvas-bg: var(--superficie); }
.modal-content { box-shadow: var(--sombra-flotante); }
.modal-dialog-scrollable .modal-content { overflow: hidden; }  /* que el contenido no se salga de las esquinas redondeadas */

.separador-o { display: flex; align-items: center; gap: .75rem; }  /* "—— o con tu email ——" */
.separador-o::before,
.separador-o::after { content: ""; flex: 1; border-top: 1px solid var(--borde); }

.toast { --bs-toast-bg: var(--texto); --bs-toast-color: var(--fondo); --bs-toast-border-radius: 12px; }  /* el aviso: oscuro en claro y claro en oscuro */
.toast-body { font-weight: 500; }

/* ---------- 17. PIE ---------- */
.pie {
  padding: 2rem 0 2.5rem;
  border-top: 1px solid var(--borde);
  color: var(--texto-suave);
  font-size: .85rem;
}

.pie a { color: var(--texto-suave); }
.pie a:hover { color: var(--texto); }

/* ---------- 18. MÓVIL: barra de pestañas abajo ---------- */
.barra-inferior {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  display: grid;
  grid-template-columns: repeat(5, 1fr);   /* 5 huecos: Diario, Semana, +, Recetas, Compra */
  align-items: center;
  padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom));  /* respeta la "barra de inicio" del iPhone */
  background: color-mix(in srgb, var(--superficie) 92%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--borde);
}

.tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: .3rem 0;
  border: 0;
  background: transparent;
  color: var(--texto-suave);
  font-size: .68rem;
  font-weight: 500;
  text-decoration: none;
}

.tab .bi { font-size: 1.25rem; }
.tab.activa { color: var(--marca); }       /* la pestaña en la que estás */

.tab .contador { position: absolute; top: 0; left: 55%; }  /* el numerito, encima del icono */

.tab-anadir .bi {                          /* el botón central "+": redondo, verde y algo más grande */
  width: 2.9rem;
  height: 2.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--marca-boton);
  color: #fff;
  font-size: 1.4rem;
  box-shadow: 0 4px 12px rgba(30, 107, 78, .35);
}

@media (max-width: 767.98px) {
  body { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }  /* que la barra de abajo no tape el final de la página */
  .toast-container { bottom: calc(4.5rem + env(safe-area-inset-bottom)) !important; }  /* los avisos, por encima de la barra */
  .titulo-pagina { font-size: 1.35rem; }
  .resumen-dia { padding: 1rem; }
  .anillo-caja { width: 148px; height: 148px; }
}

/* ---------- 19. MENOS MOVIMIENTO ---------- */
@media (prefers-reduced-motion: reduce) {  /* si la persona pidió "menos animaciones" en su sistema... */
  *, *::before, *::after { transition: none !important; animation: none !important; }  /* ...quitamos todas */
}

/* La X del aviso: el aviso es oscuro en el tema claro (X blanca) y claro en el oscuro (X negra) */
.toast .btn-close { filter: invert(1) grayscale(1) brightness(2); }
[data-bs-theme="dark"] .toast .btn-close { filter: none; }

/* Los avisos de Bootstrap ("alert"), con los colores de la marca en vez del azul y amarillo de serie */
.alert { --bs-alert-border-radius: var(--radio-sm); --bs-alert-border-color: transparent; font-size: .875rem; }
.alert-info { --bs-alert-bg: var(--marca-suave); --bs-alert-color: var(--texto); }
.alert-warning { --bs-alert-bg: color-mix(in srgb, var(--aviso) 12%, var(--superficie)); --bs-alert-color: var(--texto); }