/* ===== Dieta · estilos =====
   Colores de los macros (se usan en toda la app):
   proteína = tomate, hidratos = azafrán, grasa = aceituna, kcal = berenjena */
@font-face { font-family: 'Bricolage'; src: url('../fonts/bricolage.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../fonts/figtree-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../fonts/figtree-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../fonts/figtree-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../fonts/figtree-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --berenjena: #3A2341;
  --berenjena-2: #4D3156;
  --berenjena-3: #6B4C74;
  --kcal: #5B3A66;
  --kcal-claro: #8E6E98;
  --prot: #D9473F;
  --hidr: #E39A2D;
  --gras: #7C8C2E;
  --hoja: #2F8A57;
  --aviso: #B7741A;
  --peligro: #C4372F;
  --fondo: #F2F4EF;
  --superficie: #FFFFFF;
  --superficie-2: #F8F9F6;
  --linea: #E1E5DA;
  --pista: #ECEEE7;
  --texto: #2A1F2D;
  --texto-2: #6B6170;
  --sombra: 0 1px 2px rgba(58, 35, 65, .06), 0 8px 24px -12px rgba(58, 35, 65, .18);
  --r-panel: 20px;
  --r-tarjeta: 14px;
  --r-ctrl: 10px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--fondo); color: var(--texto);
  font: 15px/1.5 'Figtree', 'Segoe UI', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: 'Bricolage', 'Figtree', sans-serif; font-weight: 650; letter-spacing: -0.01em; margin: 0; line-height: 1.15; }
h1 { font-size: 34px; font-weight: 700; letter-spacing: -0.025em; font-variation-settings: 'opsz' 60; }
h2 { font-size: 22px; }
h3 { font-size: 17px; }
a { color: var(--kcal); }
p { margin: .4em 0; }
input, select, textarea, button { font: inherit; color: inherit; }
input:not([type=checkbox]):not([type=range]):not([type=radio]), select, textarea {
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-ctrl);
  padding: 8px 11px; outline: none; width: 100%; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--kcal-claro); box-shadow: 0 0 0 3px rgba(142, 110, 152, .2); }
textarea { resize: vertical; }
input[type=checkbox] { accent-color: var(--kcal); width: 17px; height: 17px; }
input[type=range] { width: 100%; accent-color: var(--kcal); }
:focus-visible { outline: 2px solid var(--kcal-claro); outline-offset: 2px; }
.ico { flex: none; }
.suave { color: var(--texto-2); }
.rojo { color: var(--peligro); }
.emoji { font-family: 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif; }

/* ===== Estructura ===== */
.app { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.lateral {
  background: var(--berenjena); color: #EFE7F1; padding: 22px 14px; position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 10px;
}
.marca { display: flex; align-items: center; gap: 10px; padding: 0 8px 18px; font-family: 'Bricolage'; font-size: 26px; font-weight: 700; letter-spacing: -0.03em; color: #fff; }
.lateral ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.lateral a {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 11px; color: #D9CCDD; text-decoration: none; font-weight: 500;
}
.lateral a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.lateral a.on { background: #fff; color: var(--berenjena); font-weight: 650; }
.contador { margin-left: auto; font-style: normal; font-size: 12px; background: var(--hidr); color: var(--berenjena); border-radius: 99px; padding: 0 7px; font-weight: 700; }
.mini-hoy {
  margin-top: auto; text-align: left; background: var(--berenjena-2); border: 0; border-radius: 16px; padding: 14px; color: #EFE7F1; cursor: pointer;
  display: grid; gap: 1px;
}
.mini-hoy span:first-child { font-size: 13px; color: #CDBDD2; }
.mini-hoy b { font-family: 'Bricolage'; font-size: 30px; line-height: 1.05; color: #fff; }
.mini-hoy small { color: #CDBDD2; }
.mini-barra { height: 5px; background: rgba(255, 255, 255, .15); border-radius: 9px; margin-top: 8px; overflow: hidden; }
.mini-barra i { display: block; height: 100%; background: #fff; border-radius: 9px; }
.principal { padding: 30px 38px 60px; min-width: 0; max-width: 1360px; }
.vista { display: flex; flex-direction: column; gap: 18px; }
.cab-vista { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.cab-vista p { flex-basis: 100%; margin: 0; }
.cargando { display: grid; place-items: center; height: 100vh; font-family: 'Bricolage'; font-size: 22px; color: var(--texto-2); }

/* ===== Botones ===== */
.btn {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--linea); background: var(--superficie);
  padding: 8px 14px; border-radius: var(--r-ctrl); cursor: pointer; font-weight: 550; font-size: 14px; white-space: nowrap;
  transition: background .12s, border-color .12s, transform .06s;
}
.btn:hover:not(:disabled) { border-color: var(--kcal-claro); background: var(--superficie-2); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primario { background: var(--berenjena); border-color: var(--berenjena); color: #fff; }
.btn.primario:hover:not(:disabled) { background: var(--berenjena-2); }
.btn.acento { background: #FCF1DF; border-color: #F0D3A2; color: #7A4A0A; }
.btn.ia { background: linear-gradient(135deg, #FFF6E7, #F7ECF8); border-color: #E9D3EE; }
.btn.grande { padding: 12px 20px; font-size: 15.5px; border-radius: 12px; }
.btn.icono { padding: 7px; }
.btn.icono.suave { border-color: transparent; background: transparent; color: var(--texto-2); }
.btn.icono.suave:hover { color: var(--peligro); background: #FBEDEC; }
.btn.redondo { border-radius: 99px; padding: 7px; background: var(--berenjena); color: #fff; border-color: var(--berenjena); }
.btn.enlace { border: 0; background: none; padding: 4px 0; color: var(--kcal); }
.btn.mini { padding: 4px 9px; font-size: 13px; }
.barra-acciones, .acciones-fila, .vm-acciones, .fila-opciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.separador { flex: 1; }
.acciones-col { display: flex; flex-direction: column; gap: 8px; align-items: stretch; margin-top: 10px; }
.acciones-col .btn { justify-content: flex-start; }

/* ===== Paneles y campos ===== */
.panel { background: var(--superficie); border-radius: var(--r-panel); padding: 22px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.panel-tit { font-size: 19px; }
.panel-subtit { font-size: 16px; margin-top: 12px; }
.sec-tit { font-size: 15px; margin: 14px 0 6px; display: flex; gap: 10px; align-items: baseline; }
.sec-tit small { font-family: 'Figtree'; font-weight: 400; color: var(--texto-2); font-size: 13px; }
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo-et { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.campo small { color: var(--texto-2); font-size: 12.5px; }
.rejilla-2, .rejilla-3, .rejilla-4, .rejilla-5 { display: grid; gap: 12px; }
.rejilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rejilla-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.num-input { display: inline-flex; align-items: center; position: relative; width: 100%; }
.num-input em { position: absolute; right: 10px; font-style: normal; color: var(--texto-2); font-size: 13px; pointer-events: none; }
.mini-check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--linea); background: var(--superficie); padding: 6px 13px; border-radius: 99px; cursor: pointer; font-size: 13.5px; font-weight: 500; }
.chip:hover { border-color: var(--kcal-claro); }
.chip.on { background: var(--berenjena); color: #fff; border-color: var(--berenjena); }
.pestanas { display: inline-flex; gap: 2px; background: var(--pista); padding: 3px; border-radius: 12px; flex-wrap: wrap; }
.pestanas button { border: 0; background: none; padding: 7px 14px; border-radius: 9px; cursor: pointer; font-weight: 550; color: var(--texto-2); font-size: 14px; }
.pestanas button.on { background: var(--superficie); color: var(--texto); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; border: 1px solid var(--linea); border-radius: var(--r-ctrl); padding: 6px; background: var(--superficie); }
.etiquetas input { border: 0 !important; box-shadow: none !important; flex: 1; min-width: 180px; padding: 4px 6px !important; }
.etq { display: inline-flex; align-items: center; gap: 4px; background: var(--pista); border-radius: 99px; padding: 3px 6px 3px 11px; font-size: 13.5px; }
.etq button { border: 0; background: none; cursor: pointer; display: grid; color: var(--texto-2); padding: 2px; }

/* Sellos */
.sello { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--pista); color: var(--texto-2); white-space: nowrap; }
.sello.ok { background: #E3F2E8; color: #226B42; }
.sello.medio { background: #FCF0DC; color: #8A5510; }
.sello.viejo { background: #FBE6E4; color: #A32D25; }
.sello.gen { background: #EEEAF0; color: var(--berenjena-3); }
.sello.entreno { background: #FDEBE2; color: #A13A1C; }
.sello.despensa { background: #E9F0DA; color: #546217; }
.sello.mia { background: #EEEAF0; color: var(--berenjena); }

/* Avisos */
.aviso { border-radius: 12px; padding: 12px 14px; background: var(--superficie-2); border: 1px solid var(--linea); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.aviso.info { background: #F4EFF6; border-color: #E2D5E7; }
.aviso.error { background: #FBEDEC; border-color: #F2CFCB; color: #8F2620; }
.aviso.medio { background: #FDF5E7; border-color: #F2DDB4; color: #7A4A0A; }
.aviso.ok { background: #E8F4EC; border-color: #C9E5D3; color: #1F5F3B; flex-direction: row; align-items: center; }
.vacio { text-align: center; padding: 50px 20px; color: var(--texto-2); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vacio h3 { color: var(--texto); font-size: 19px; }
.vacio p { max-width: 520px; }

/* ===== El plato ===== */
.plato { position: relative; margin: 4px auto; }
.plato svg { display: block; }
.plato .arco { transition: stroke-dasharray .6s cubic-bezier(.2, .8, .2, 1); }
.plato-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.num-grande { font-family: 'Bricolage'; font-weight: 700; font-size: 44px; letter-spacing: -0.035em; line-height: 1; color: var(--berenjena); font-variation-settings: 'opsz' 96; }
.num-grande.rojo { color: var(--peligro); }
.plato-centro small { color: var(--texto-2); font-size: 13px; margin-top: 4px; }
.leyenda-plato { text-align: center; font-weight: 600; margin-bottom: 4px; }

.barra-macro { display: flex; flex-direction: column; gap: 4px; }
.bm-cab { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 600; }
.bm-cab small { font-weight: 400; color: var(--texto-2); }
.bm-pista { height: 8px; border-radius: 9px; background: var(--pista); overflow: hidden; }
.bm-relleno { height: 100%; border-radius: 9px; transition: width .5s; }
.prot .bm-relleno { background: var(--prot); }
.hidr .bm-relleno { background: var(--hidr); }
.gras .bm-relleno { background: var(--gras); }
.bm-relleno.pasa { background-image: repeating-linear-gradient(45deg, transparent 0 5px, rgba(255, 255, 255, .45) 5px 10px); }

.macros { display: inline-flex; gap: 9px; align-items: baseline; font-size: 13.5px; white-space: nowrap; flex-wrap: wrap; }
.macros .k { color: var(--berenjena); font-weight: 700; font-size: 14.5px; }
.mp, .mc, .mg { font-weight: 600; font-style: normal; }
.mp { color: var(--prot); }
.mc { color: #B87512; }
.mg { color: #5E6B1E; }

/* ===== Diario ===== */
.cab-fecha { align-items: center; }
.fecha-tit { display: flex; flex-direction: column; min-width: 280px; }
.fecha-tit h1::first-letter { text-transform: uppercase; }
.selector-fecha { width: auto !important; margin-left: auto; }
.diario-rejilla { display: grid; grid-template-columns: 340px 1fr; gap: 22px; align-items: start; }
.diario-lado { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 20px; }
.panel-plato { align-items: stretch; }
.explica { font-size: 13px; text-align: center; }
.diario-comidas { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.panel-deporte.previsto { border: 2px dashed #E9C3B4; }
.deportes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.dep { display: flex; align-items: center; gap: 8px; border: 1px solid var(--linea); background: var(--superficie); padding: 9px 10px; border-radius: 12px; cursor: pointer; font-weight: 550; font-size: 14px; }
.dep .emoji { font-size: 19px; }
.dep.on { background: var(--berenjena); color: #fff; border-color: var(--berenjena); }
.dep.sugerido { border-color: #E9A88C; background: #FFF6F1; }
.mas-deportes { font-size: 14px; }
.dep-min { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.consejo { display: flex; gap: 8px; background: var(--superficie-2); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; margin: 0; }
.consejo .ico { margin-top: 2px; color: var(--prot); }
.ideas { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ideas li { display: flex; align-items: center; gap: 10px; background: var(--superficie-2); border-radius: 12px; padding: 8px 10px; }
.ideas .emoji { font-size: 22px; }
.idea-txt { flex: 1; display: flex; flex-direction: column; font-size: 14px; }
.nota-dia textarea { min-height: 60px; }
.pasos-det summary { cursor: pointer; color: var(--kcal); font-weight: 600; font-size: 14px; }

/* Tarjetas de comida */
.tarjeta-comida { background: var(--superficie); border-radius: var(--r-tarjeta); padding: 16px 18px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 8px; }
.tarjeta-comida > header { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.tarjeta-comida h3 small { font-family: 'Figtree'; font-weight: 500; font-size: 13.5px; margin-left: 6px; }
.slot-der { display: flex; align-items: center; gap: 12px; }
.receta-tit { margin: 3px 0 0; font-weight: 600; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.receta-tit .suave { display: inline-flex; gap: 4px; align-items: center; font-weight: 400; font-size: 13px; }
.lista-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.linea-item { display: grid; grid-template-columns: 38px minmax(0, 1fr) 104px 76px 150px 34px; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid var(--pista); }
.linea-item:first-child { border-top: 0; }
.li-nombre { display: flex; flex-direction: column; min-width: 0; }
.li-nombre b { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li-nombre small { color: var(--texto-2); font-size: 12.5px; display: flex; gap: 6px; align-items: center; }
.li-kcal { text-align: right; font-size: 13.5px; }
.li-macros { font-size: 12.5px; }
.tc-acciones { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px; border-top: 1px solid var(--pista); }
.tc-acciones .btn { font-size: 13px; padding: 6px 11px; }
.pasos { margin: 4px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 5px; }
.pasos li::marker { color: var(--kcal); font-weight: 700; }

.foto { width: 44px; height: 44px; border-radius: 10px; object-fit: contain; background: #fff; border: 1px solid var(--pista); flex: none; }
.foto.vacia { display: grid; place-items: center; font-family: 'Bricolage'; font-weight: 700; color: var(--berenjena-3); background: var(--pista); border: 0; font-size: 17px; }
.foto.cat-fruta { background: #FCEEDC; color: #B5651D; }
.foto.cat-verdura { background: #E7F1DE; color: #4F6B1E; }
.foto.cat-carne, .foto.cat-pescado { background: #FBE7E4; color: #A33A2E; }
.foto.cat-lacteos, .foto.cat-huevos { background: #F1EEF6; color: #5B4A8B; }
.foto.cat-cereales, .foto.cat-tuberculos, .foto.cat-legumbres { background: #FBF2DC; color: #8A6512; }

/* ===== Menú (planificar / mis dietas) ===== */
.vista-menu { display: flex; flex-direction: column; gap: 14px; }
.vm-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.titulo-editable { font-family: 'Bricolage' !important; font-size: 26px !important; font-weight: 700; border-color: transparent !important; background: transparent !important; padding: 4px 6px !important; max-width: 720px; }
.titulo-editable:hover, .titulo-editable:focus { border-color: var(--linea) !important; background: var(--superficie) !important; }
.resumen-obj { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 22px; background: var(--superficie); border-radius: var(--r-tarjeta); padding: 16px 20px; box-shadow: var(--sombra); align-items: center; }
.ro-kcal b { font-family: 'Bricolage'; font-size: 30px; color: var(--berenjena); letter-spacing: -0.03em; }
.ro-kcal small { color: var(--texto-2); }
.desvio { display: inline-block; margin-left: 8px; font-size: 13px; font-weight: 600; color: var(--hoja); }
.desvio.mal { color: var(--aviso); }
.comidas { display: flex; flex-direction: column; gap: 14px; }
.lista-alts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lista-alts button { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; border: 1px solid var(--linea); background: var(--superficie); border-radius: 12px; padding: 10px 14px; cursor: pointer; }
.lista-alts button:hover, .lista-alts button.on { border-color: var(--kcal-claro); background: #FAF7FB; }
.lista-alts button > span:not(.emoji) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.lista-alts small { color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emoji.grande { font-size: 28px; }

/* Planificar */
.modos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modo { text-align: left; border: 2px solid var(--linea); background: var(--superficie); border-radius: 16px; padding: 16px 18px; cursor: pointer; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; row-gap: 2px; }
.modo .ico { grid-row: span 2; color: var(--berenjena-3); margin-top: 2px; }
.modo b { font-family: 'Bricolage'; font-size: 18px; }
.modo small { color: var(--texto-2); font-size: 13.5px; }
.modo.on { border-color: var(--berenjena); background: #FAF6FB; }
.modo.on .ico { color: var(--berenjena); }
.fila-opciones > div:not(.chips) { display: flex; flex-direction: column; gap: 5px; }
.fila-opciones .campo { width: 200px; }
.prevision { display: flex; gap: 8px; flex-wrap: wrap; }
.prev-dia { background: var(--superficie-2); border: 1px solid var(--pista); border-radius: 12px; padding: 8px 12px; display: flex; flex-direction: column; min-width: 120px; }
.prev-dia span { font-size: 12.5px; color: var(--texto-2); text-transform: capitalize; }
.prev-dia b { font-family: 'Bricolage'; font-size: 18px; }
.prev-dia small { font-size: 12px; color: var(--texto-2); }
.opciones-plan { gap: 14px; }
.lista-compra-mini { list-style: none; padding: 0; margin: 0; }
.lista-compra-mini li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--pista); }

/* ===== Calendario ===== */
.nav-mes { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav-mes b { font-family: 'Bricolage'; font-size: 20px; min-width: 170px; text-align: center; text-transform: capitalize; }
.stats-mes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stats-mes div { background: var(--superficie); border-radius: var(--r-tarjeta); padding: 14px 16px; box-shadow: var(--sombra); display: flex; flex-direction: column; }
.stats-mes b { font-family: 'Bricolage'; font-size: 28px; color: var(--berenjena); letter-spacing: -0.02em; }
.stats-mes span { color: var(--texto-2); font-size: 13px; }
.cal-rejilla-doble { display: grid; grid-template-columns: 1fr 330px; gap: 20px; align-items: start; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; background: var(--superficie); border-radius: var(--r-panel); padding: 16px; box-shadow: var(--sombra); }
.cal-dsem { text-align: center; font-size: 12.5px; color: var(--texto-2); font-weight: 600; padding-bottom: 4px; }
.cal-celda { aspect-ratio: 1 / .86; border: 1px solid var(--pista); background: var(--superficie-2); border-radius: 12px; padding: 7px 8px; text-align: left; cursor: pointer; position: relative; display: flex; flex-direction: column; justify-content: space-between; }
.cal-celda.vacia { background: transparent; border: 0; cursor: default; }
.cal-celda:hover:not(.vacia) { border-color: var(--kcal-claro); }
.cal-celda.sel { outline: 2px solid var(--berenjena); outline-offset: -1px; }
.cal-celda.hoy .cal-num { background: var(--berenjena); color: #fff; border-radius: 99px; padding: 0 7px; }
.cal-num { font-weight: 650; font-size: 14px; align-self: flex-start; }
.cal-dep { position: absolute; top: 6px; right: 7px; font-size: 15px; font-family: 'Segoe UI Emoji', sans-serif; }
.cal-dep.previsto { opacity: .35; }
.cal-kcal { font-size: 12.5px; font-weight: 600; }
.cal-barra { height: 5px; border-radius: 9px; background: var(--pista); overflow: hidden; }
.cal-barra i { display: block; height: 100%; background: var(--kcal-claro); }
.cal-celda.bien { background: #EEF6F0; } .cal-celda.bien .cal-barra i { background: var(--hoja); }
.cal-celda.corto { background: #FDF6EA; } .cal-celda.corto .cal-barra i { background: var(--hidr); }
.cal-celda.pasa { background: #FBEEEC; } .cal-celda.pasa .cal-barra i { background: var(--peligro); }
.cal-leyenda { grid-column: 1 / -1; display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--texto-2); padding-top: 8px; }
.cal-leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; }
.cal-leyenda i.bien { background: var(--hoja); } .cal-leyenda i.corto { background: var(--hidr); } .cal-leyenda i.pasa { background: var(--peligro); }
.cal-detalle h3::first-letter { text-transform: uppercase; }
.cal-comidas { list-style: none; padding: 0; margin: 4px 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.cal-comidas small { display: block; color: var(--texto-2); }
.copiar-a { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; border-top: 1px solid var(--pista); padding-top: 10px; }
.copiar-a input { width: auto !important; flex: 1; }

/* ===== Rejillas de tarjetas ===== */
.rejilla-dietas, .rejilla-recetas, .rejilla-despensa { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.rejilla-dietas { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.rejilla-recetas { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.tarjeta-dieta, .tarjeta-receta { width: 100%; height: 100%; text-align: left; border: 0; background: var(--superficie); border-radius: var(--r-tarjeta); padding: 16px 18px; box-shadow: var(--sombra); cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.tarjeta-dieta:hover, .tarjeta-receta:hover { box-shadow: 0 0 0 2px var(--kcal-claro), var(--sombra); }
.tarjeta-dieta b, .tarjeta-receta b { font-family: 'Bricolage'; font-size: 17px; font-weight: 650; line-height: 1.2; }
.tarjeta-dieta small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.td-emojis { font-size: 22px; font-family: 'Segoe UI Emoji', sans-serif; letter-spacing: 2px; }
.td-sellos { display: flex; flex-wrap: wrap; gap: 5px; }
.tr-emoji { font-size: 34px; font-family: 'Segoe UI Emoji', sans-serif; line-height: 1; }
.tr-emoji.grande { font-size: 54px; }
.tarjeta-receta.evitar { opacity: .55; }
.det-receta-cab { display: flex; gap: 18px; align-items: center; }
.det-receta-cab .rejilla-3 { flex: 1; }

/* ===== Despensa ===== */
.rejilla-despensa { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
.prod { background: var(--superficie); border-radius: var(--r-tarjeta); box-shadow: var(--sombra); padding: 14px; display: grid; grid-template-columns: 64px 1fr; gap: 12px 14px; }
.prod .foto { width: 64px; height: 64px; }
.prod.agotado { opacity: .55; }
.prod-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prod-txt small { color: var(--texto-2); font-size: 13px; }
.prod-sellos { margin-top: 3px; }
.prod-ctrl { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; align-items: end; border-top: 1px solid var(--pista); padding-top: 10px; }
.mini-campo { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--texto-2); }
.mini-campo select { font-size: 13px; padding: 5px 8px; }
.prod-botones { grid-column: 1 / -1; display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.tabla-simple { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 10px; }
.tabla-simple th, .tabla-simple td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--pista); }
.tabla-simple th { font-size: 12.5px; color: var(--texto-2); }

/* ===== Compra ===== */
.anadir-rapido { display: flex; gap: 6px; min-width: 360px; }
.compra-grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; align-items: start; }
.lista-compra { list-style: none; padding: 0; margin: 0; }
.lista-compra li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--pista); }
.lista-compra label { display: flex; align-items: center; gap: 10px; flex: 1; cursor: pointer; min-width: 0; }
.lista-compra .foto { width: 32px; height: 32px; }
.lc-nom { overflow: hidden; text-overflow: ellipsis; }
.lc-cant { color: var(--texto-2); font-size: 13.5px; white-space: nowrap; }
.lista-compra li.hecho .lc-nom { text-decoration: line-through; color: var(--texto-2); }

/* ===== Perfil ===== */
.perfil-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.bienvenida { background: var(--berenjena); color: #fff; border-radius: var(--r-panel); padding: 28px 30px; display: flex; flex-direction: column; gap: 8px; }
.bienvenida h1 { font-size: 32px; max-width: 760px; }
.bienvenida p { color: #DCCFE0; max-width: 680px; }
.pie-bienvenida { display: flex; justify-content: flex-end; }
.opciones-tarjeta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opciones-tarjeta button { text-align: left; border: 1px solid var(--linea); background: var(--superficie); border-radius: 12px; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; }
.opciones-tarjeta button small { color: var(--texto-2); font-size: 12.5px; }
.opciones-tarjeta button.on { border-color: var(--berenjena); background: #FAF6FB; box-shadow: inset 0 0 0 1px var(--berenjena); }
.deslizador { margin-top: 6px; }
.cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cifras div { background: var(--superficie-2); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; }
.cifras b { font-family: 'Bricolage'; font-size: 24px; color: var(--berenjena); }
.cifras span { font-size: 12.5px; color: var(--texto-2); }
.tipos-dia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tipo-dia { border: 1px solid var(--pista); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.tipo-dia .emoji { font-size: 22px; }
.tipo-dia .num-grande { font-size: 34px; margin-top: 6px; }
.tipo-dia small { color: var(--texto-2); }
.tdm { display: flex; gap: 8px; font-size: 12.5px; margin-top: 4px; }
.tabla-semana { width: 100%; border-collapse: collapse; }
.tabla-semana td { padding: 4px 0; font-size: 14px; }
.tabla-semana td:first-child { width: 96px; font-weight: 600; }
.tabla-semana .chip { padding: 4px 10px; font-size: 13px; }
.tabla-comidas { width: 100%; border-collapse: collapse; }
.tabla-comidas th { text-align: left; font-size: 12.5px; color: var(--texto-2); padding: 4px; }
.tabla-comidas td { padding: 3px 4px; }
.tabla-comidas td:first-child { width: 28%; }
.tabla-comidas select { min-width: 130px; }
.tabla-comidas input[type=time] { width: 112px; }
.resultado { gap: 12px; }
.ruta { font-family: Consolas, monospace; font-size: 12.5px; word-break: break-all; }
.form-login { display: flex; flex-direction: column; gap: 10px; }

/* Asistente */
.pasos-asistente { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0; flex-wrap: wrap; }
.pasos-asistente button { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 6px 10px 6px 6px; border-radius: 99px; cursor: default; font-weight: 600; color: var(--texto-2); }
.pasos-asistente span { width: 26px; height: 26px; border-radius: 99px; display: grid; place-items: center; background: var(--pista); font-size: 13px; }
.pasos-asistente li.on button { color: var(--texto); }
.pasos-asistente li.on span { background: var(--berenjena); color: #fff; }
.pasos-asistente li.hecho button { cursor: pointer; color: var(--hoja); }
.pasos-asistente li.hecho span { background: #DDEFE3; color: var(--hoja); }
.lista-check { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.lista-check label { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.filtro { max-width: 300px; }

/* ===== Modal y selector ===== */
.velo { position: fixed; inset: 0; background: rgba(42, 25, 48, .45); display: grid; place-items: start center; padding: 5vh 20px; z-index: 50; overflow-y: auto; animation: aparecer .15s; }
.modal { width: 100%; background: var(--superficie); border-radius: 22px; box-shadow: 0 30px 80px -20px rgba(30, 10, 35, .45); display: flex; flex-direction: column; max-height: 90vh; animation: subir .2s cubic-bezier(.2, .8, .2, 1); }
@keyframes aparecer { from { opacity: 0; } }
@keyframes subir { from { transform: translateY(14px); opacity: 0; } }
.modal-cab { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px 10px; gap: 12px; }
.modal-cuerpo { padding: 6px 22px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.modal-pie { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--pista); }
.buscar { display: flex; flex-direction: column; gap: 12px; }
.buscador { display: flex; align-items: center; gap: 10px; border: 1px solid var(--linea); border-radius: 14px; padding: 5px 5px 5px 14px; background: var(--superficie); }
.buscador:focus-within { border-color: var(--kcal-claro); box-shadow: 0 0 0 3px rgba(142, 110, 152, .2); }
.buscador input { border: 0 !important; box-shadow: none !important; padding: 8px 0 !important; font-size: 16px; }
.buscador .ico { color: var(--texto-2); }
.lista-alim { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lista-alim button { width: 100%; display: flex; gap: 12px; align-items: center; text-align: left; border: 1px solid var(--pista); background: var(--superficie); border-radius: 12px; padding: 8px 10px; cursor: pointer; }
.lista-alim button:hover { border-color: var(--kcal-claro); background: #FCFAFC; }
.la-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.la-txt b { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.la-txt small { color: var(--texto-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.la-der { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.la-der b { font-family: 'Bricolage'; font-size: 17px; line-height: 1; }
.la-der small { font-size: 11px; color: var(--texto-2); }
.lista-vacia { padding: 8px 0; }
.detalle { display: flex; flex-direction: column; gap: 14px; }
.det-cab { display: flex; gap: 20px; align-items: flex-start; }
.det-foto { width: 150px; height: 150px; object-fit: contain; border-radius: 14px; background: #fff; border: 1px solid var(--pista); }
.det-cab h3 { font-size: 22px; }
.det-fuente { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.tabla-nutri { width: 100%; border-collapse: collapse; }
.tabla-nutri th { text-align: left; font-size: 12.5px; color: var(--texto-2); padding: 6px 10px; }
.tabla-nutri td { padding: 7px 10px; border-top: 1px solid var(--pista); }
.tabla-nutri tr.sub td { font-size: 13px; color: var(--texto-2); }
.tabla-nutri tr td:first-child { font-weight: 600; }
.fila-kcal td:first-child { color: var(--berenjena); }
.fila-p td:first-child { color: var(--prot); }
.fila-c td:first-child { color: #B87512; }
.fila-g td:first-child { color: #5E6B1E; }
.det-cantidad { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: var(--superficie-2); border-radius: 14px; padding: 12px; }
.paso-uds { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; }
.panel-codigo, .panel-crear { display: flex; flex-direction: column; gap: 12px; }

/* Toasts */
.toasts { position: fixed; bottom: 22px; right: 22px; display: flex; flex-direction: column; gap: 8px; z-index: 80; }
.toast { background: var(--berenjena); color: #fff; padding: 11px 16px; border-radius: 12px; box-shadow: 0 10px 30px -10px rgba(30, 10, 35, .5); max-width: 420px; animation: subir .2s; font-size: 14px; }
.toast.error { background: var(--peligro); }

@media (max-width: 1200px) {
  .diario-rejilla { grid-template-columns: 300px 1fr; }
  .linea-item { grid-template-columns: 38px minmax(0, 1fr) 100px 70px 34px; }
  .li-macros { display: none; }
  .cal-rejilla-doble, .perfil-rejilla { grid-template-columns: 1fr; }
  .resumen-obj { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; }
  .diario-rejilla, .modos, .lista-alim { grid-template-columns: 1fr; }
  .diario-lado { position: static; }
  .principal { padding: 20px 16px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.tabla-deportes { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla-deportes th { text-align: left; font-size: 12.5px; color: var(--texto-2); padding: 4px; }
.tabla-deportes td { padding: 4px; border-top: 1px solid var(--pista); }
details.propio summary { cursor: pointer; color: var(--kcal); font-weight: 600; font-size: 14px; margin: 4px 0 8px; }
.intensidad { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.intensidad .chip { padding: 4px 11px; }

.gustos { position: relative; }
.etq.concreto { background: #EEEAF0; color: var(--berenjena); font-weight: 600; }
.etq small { color: var(--texto-2); font-weight: 400; }
.sugerencias { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); list-style: none; margin: 0; padding: 4px; background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; box-shadow: var(--sombra); }
.sugerencias button { width: 100%; text-align: left; border: 0; background: none; padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.sugerencias li.on button, .sugerencias button:hover { background: var(--pista); }
.sugerencias small { color: var(--texto-2); margin-left: 6px; }

.pasos-ia { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 14px; }
.pasos-ia li::marker { font-family: 'Bricolage'; font-weight: 700; color: var(--kcal); }
.pasos-ia li > div:first-child { display: flex; flex-direction: column; margin-bottom: 6px; }
.pasos-ia textarea { margin-bottom: 8px; font-family: Consolas, monospace; font-size: 12.5px; }