/* Vittia — estilos. Pensado primero para el celular; en pantalla grande el menú pasa arriba. */
:root {
  --verde: #16A34A; --verde-osc: #0F7A38; --verde-claro: #DCFCE7; --verde-suave: #F0FDF4;
  --fondo: #F4FBF6; --tarjeta: #FFFFFF; --borde: #DDEFE3; --texto: #1F2A24; --suave: #5F6F66;
  --naranja: #FF8A3D; --rojo: #E5484D; --rojo-claro: #FEE9EA; --ambar-claro: #FFF4DB; --ambar: #8A5A00;
  --prot: #3B82F6; --carb: #F59E0B; --gras: #EC4899;
  --radio: 18px; --sombra: 0 2px 10px rgba(22, 90, 50, .07);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 16px/1.5 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
h1, h2, h3 { font-family: 'Fredoka', 'Nunito', sans-serif; font-weight: 600; line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: 1.7rem; margin: .4rem 0 1rem; }
h2 { font-size: 1.2rem; display: flex; align-items: center; gap: 8px; }
h3 { font-size: 1.05rem; margin: 0; }
a { color: var(--verde-osc); }
p { margin: .4rem 0; }
code { background: #E8F5EC; padding: 1px 6px; border-radius: 6px; font-size: .9em; }
.suave { color: var(--suave); }
.chico-p { font-size: .9rem; margin: .3rem 0; }
.ayuda { color: var(--suave); font-size: .85rem; margin: .25rem 0 0; display: block; }
.solo-pc { display: none; }
.svg { flex: none; }

/* Barra y menús */
.barra { background: #fff; border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top); }
.barra-in { max-width: 980px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 16px; }
.marca { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--verde-osc); font: 600 1.4rem 'Fredoka', sans-serif; margin-right: auto; }
.barra-user { display: flex; align-items: center; gap: 6px; text-decoration: none; color: var(--suave); padding: 6px; border-radius: 12px; }
.menu-arriba { display: none; gap: 4px; }
.menu-arriba a { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; text-decoration: none; color: var(--suave); font-weight: 700; }
.menu-arriba a.on, .menu-arriba a:hover { background: var(--verde-claro); color: var(--verde-osc); }
.menu-abajo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #fff; border-top: 1px solid var(--borde);
  display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 14px rgba(22, 90, 50, .06); }
.menu-abajo a { display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: var(--suave); padding: 4px 0; border-radius: 12px; font-weight: 700; }
.menu-abajo a small { font-size: .7rem; }
.menu-abajo a.on { color: var(--verde-osc); }
.menu-abajo a.on svg { stroke-width: 2.6; }

.contenido { max-width: 760px; margin: 0 auto; padding: 14px 16px; }
.pie { max-width: 760px; margin: 0 auto; padding: 8px 16px 24px; text-align: center; color: var(--suave); font-size: .78rem; }

/* Tarjetas */
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; margin: 0 0 14px; box-shadow: var(--sombra); }
.tarjeta.destacada { background: linear-gradient(135deg, var(--verde-claro), #fff 70%); border-color: #B7E4C7; }
.tarjeta.centro { text-align: center; max-width: 420px; margin-inline: auto; }
.tarjeta.ancha { max-width: 640px; text-align: left; }
.tarjeta.ancha > h1, .tarjeta.ancha > .logo-grande { display: block; text-align: center; margin-inline: auto; }
.tarjeta.mini { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--texto); margin: 0; }
.tarjeta.mini b { font: 600 1.5rem 'Fredoka', sans-serif; color: var(--verde-osc); }
.tarjeta.mini svg { color: var(--verde); }
.enlace-tarjeta { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--texto); }
.enlace-tarjeta svg { color: var(--verde); }
.enlace-tarjeta div { display: flex; flex-direction: column; }
.grilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.grilla-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0; }
.dato { text-align: center; background: var(--verde-suave); border-radius: 14px; padding: 10px 6px; }
.dato b { display: block; font: 600 1.25rem 'Fredoka', sans-serif; }
.dato span { font-size: .78rem; color: var(--suave); }
.dato.m-prot b { color: var(--prot); } .dato.m-carb b { color: #C77700; } .dato.m-gras b { color: var(--gras); }
.fila-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.fila-titulo h2 { margin: 0; }
.subtitulo { margin: 22px 0 10px; }
.saludo { margin-bottom: 14px; }
.saludo small { display: block; font: 400 .95rem "Nunito", sans-serif; color: var(--suave); }
.saludo small::first-letter { text-transform: uppercase; }
.gigante { font: 600 3rem 'Fredoka', sans-serif; color: var(--verde-osc); margin: 0; line-height: 1.1; }
.gigante small { font-size: 1.1rem; color: var(--suave); }
.lista-simple { padding-left: 1.1rem; margin: .6rem 0; }
.lista-simple li { margin: .25rem 0; }
.rojo { color: var(--rojo); }
.grande { font-size: 1.15rem; margin: .2rem 0; }

/* Anillo de calorías */
.resumen-kcal { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.resumen-lado { flex: 1; min-width: 160px; }
.anillo { position: relative; width: 150px; height: 150px; flex: none; }
.anillo svg { display: block; }
.anillo-fondo { fill: none; stroke: #E4F3E9; stroke-width: 12; }
.anillo-valor { fill: none; stroke: var(--verde); stroke-width: 12; stroke-linecap: round; transition: stroke-dasharray .6s; }
.anillo.pasado .anillo-valor { stroke: var(--rojo); }
.anillo-texto { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.anillo-texto strong { font: 600 1.9rem 'Fredoka', sans-serif; line-height: 1; }
.anillo-texto span { font-size: .78rem; color: var(--suave); }

/* Macros */
.macro { margin: 8px 0; }
.macro-fila { display: flex; justify-content: space-between; font-size: .9rem; }
.macro-barra { height: 9px; border-radius: 9px; background: #EAF4EE; overflow: hidden; margin-top: 3px; }
.macro-barra i { display: block; height: 100%; border-radius: 9px; background: var(--verde); }
.m-prot .macro-barra i { background: var(--prot); } .m-carb .macro-barra i { background: var(--carb); } .m-gras .macro-barra i { background: var(--gras); }

/* Agua */
.barra-agua { height: 14px; border-radius: 14px; background: #E0F2FE; overflow: hidden; margin: 6px 0 12px; }
.barra-agua i { display: block; height: 100%; background: linear-gradient(90deg, #38BDF8, #0EA5E9); border-radius: 14px; transition: width .5s; }
.botones-agua { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.botones-agua .btn { flex-direction: column; padding: 10px 6px; gap: 0; line-height: 1.2; }
.botones-agua small { font-weight: 400; font-size: .72rem; color: var(--suave); }

/* Semana */
.grafico-semana { position: relative; display: flex; align-items: flex-end; gap: 8px; height: 140px; padding-bottom: 20px; margin-top: 8px; }
.grafico-semana .col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.grafico-semana .col i { display: block; width: 100%; max-width: 34px; background: var(--verde); border-radius: 8px 8px 3px 3px; min-height: 3px; }
.grafico-semana .col i.pasado { background: var(--rojo); }
.grafico-semana small { position: absolute; bottom: -20px; color: var(--suave); font-size: .72rem; }
.linea-meta { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--naranja); z-index: 1; margin-bottom: 20px; }
.linea-meta em { position: absolute; right: 0; top: -18px; font-size: .7rem; color: var(--naranja); font-style: normal; font-weight: 700; }

/* Botones y formularios */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--verde); color: #fff; border: 0; border-radius: 14px; padding: 11px 18px;
  font: 700 1rem 'Nunito', sans-serif; text-decoration: none; cursor: pointer; transition: transform .1s, background .15s; }
.btn:hover { background: var(--verde-osc); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-suave { background: var(--verde-claro); color: var(--verde-osc); }
.btn-suave:hover { background: #BBF7D0; }
.btn-grande { padding: 14px 22px; font-size: 1.05rem; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.acciones form { margin: 0; }
.enlace { background: none; border: 0; padding: 4px 0; color: var(--verde-osc); font: 700 .9rem 'Nunito', sans-serif; cursor: pointer; text-decoration: underline; }
.enlace.peligro { color: var(--rojo); }
.campo { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: .92rem; margin: 8px 0; }
.campo-ancho { grid-column: 1 / -1; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], select, textarea {
  width: 100%; border: 1.5px solid var(--borde); background: #fff; border-radius: 12px; padding: 11px 12px; font: 400 1rem 'Nunito', sans-serif; color: var(--texto); }
input:focus, select:focus, textarea:focus { outline: 3px solid #BBF7D0; border-color: var(--verde); }
input[type=range] { width: 100%; accent-color: var(--verde); }
.form-columnas { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
.form-columnas > h2 { grid-column: 1 / -1; margin-top: 6px; }
.form-simple .btn { margin-top: 8px; }
.macros-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
fieldset { border: 1.5px solid var(--borde); border-radius: 14px; margin: 10px 0; padding: 8px 14px 12px; grid-column: 1 / -1; }
legend { font-weight: 800; padding: 0 6px; }
.codigo { width: 100%; font-family: ui-monospace, monospace; font-size: .85rem; }

/* Avisos */
.aviso { border-radius: 14px; padding: 11px 14px; margin: 0 0 12px; font-weight: 600; }
.aviso-ok { background: var(--verde-claro); color: var(--verde-osc); }
.aviso-error { background: var(--rojo-claro); color: #9B1C20; }
.aviso-ojo { background: var(--ambar-claro); color: var(--ambar); }
.estado-ia { border-radius: 14px; padding: 12px 14px; margin: 10px 0; font-weight: 600; background: var(--verde-suave); }
.estado-ia.error { background: var(--rojo-claro); color: #9B1C20; }
.estado-ia.cargando::before { content: ''; display: inline-block; width: 14px; height: 14px; border: 3px solid var(--verde); border-right-color: transparent; border-radius: 50%;
  margin-right: 8px; vertical-align: -2px; animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.vacio { text-align: center; padding: 26px 16px; color: var(--suave); }
.vacio h2 { justify-content: center; color: var(--texto); }

/* Pestañas */
.pestanas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: #E6F4EA; padding: 5px; border-radius: 16px; margin-bottom: 14px; }
.pestanas button { border: 0; background: transparent; padding: 10px 4px; border-radius: 12px; font: 700 .95rem 'Nunito', sans-serif; color: var(--suave); cursor: pointer; }
.pestanas button.on { background: #fff; color: var(--verde-osc); box-shadow: var(--sombra); }
.pestanas button:disabled { opacity: .45; cursor: not-allowed; }
.previa { display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: 16px; margin: 12px 0; }

/* Selector de día */
.selector-dia { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--borde); border-radius: 16px; padding: 6px; margin-bottom: 14px; }
.selector-dia .flecha { width: 44px; height: 44px; display: grid; place-items: center; font-size: 1.6rem; text-decoration: none; border-radius: 12px; color: var(--verde-osc); }
.selector-dia .flecha:hover { background: var(--verde-claro); }
.selector-dia .flecha.apagada { opacity: .3; pointer-events: none; }
.dia-actual { text-align: center; text-transform: capitalize; }
.dia-actual .chico { display: block; font-size: .78rem; text-transform: none; }

/* Comidas */
.grupo-comida { margin-bottom: 12px; }
.grupo-comida > .fila-titulo { padding: 0 4px; }
.comida { display: flex; gap: 12px; background: #fff; border: 1px solid var(--borde); border-radius: 16px; padding: 12px; margin-bottom: 10px; box-shadow: var(--sombra); }
.comida-foto { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; display: block; }
.comida-cuerpo { flex: 1; min-width: 0; }
.macros-linea { font-size: .9rem; margin: .2rem 0; }
.etiqueta { display: inline-block; background: var(--verde-claro); color: var(--verde-osc); border-radius: 8px; padding: 0 7px; font-size: .72rem; font-weight: 800; margin-left: 6px; }
.comida-acciones { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.comida-acciones form { margin: 0; }
.fila-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border: 1px solid var(--borde); border-radius: 14px; padding: 10px 14px; margin-bottom: 8px; }
.fila-item div { display: flex; flex-direction: column; min-width: 0; }
.fila-item form { margin: 0; }
.puntos-semana { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.puntos-semana i { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--borde); background: #fff; }
.puntos-semana i.on { background: var(--verde); border-color: var(--verde); }

/* Compras */
.item-compra { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #EEF6F1; }
.item-compra:last-of-type { border-bottom: 0; }
.item-compra span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.item-compra form { margin: 0; }
.tilde { width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid #B8D8C4; background: #fff; cursor: pointer; font-weight: 800; color: #fff; padding: 0; }
.tilde.on { background: var(--verde); border-color: var(--verde); }
.lista-compras.hecho .item-compra span { text-decoration: line-through; color: var(--suave); }

/* Citas */
.cita { display: flex; gap: 14px; }
.cita-fecha { flex: none; width: 58px; height: 64px; border-radius: 14px; background: var(--verde-claro); color: var(--verde-osc); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cita-fecha b { font: 600 1.5rem 'Fredoka', sans-serif; line-height: 1; }
.cita-fecha span { font-size: .72rem; text-transform: uppercase; font-weight: 800; }
.cita-cuerpo { flex: 1; min-width: 0; }
.cita.estado-cancelada, .cita.estado-hecha { opacity: .75; }

/* Peso */
.grafico-peso { width: 100%; height: auto; margin-top: 6px; }
.g-linea { fill: none; stroke: var(--verde); stroke-width: 2.5; stroke-linejoin: round; }
.g-punto { fill: #fff; stroke: var(--verde); stroke-width: 2; }
.g-meta { stroke: var(--naranja); stroke-width: 1.5; stroke-dasharray: 5 4; }
.g-txt { fill: var(--naranja); font-size: 9px; font-weight: 700; }

.menu-mas { display: grid; gap: 0; }
.menu-mas .tarjeta { margin-bottom: 10px; }
.pasos { padding-left: 1.2rem; }
.pasos li { margin: .4rem 0; }
.requisitos { list-style: none; padding: 0; margin: 10px 0; text-align: left; }
.requisitos li { padding: 3px 0; }
.marca-titulo { font-size: 2.2rem; color: var(--verde-osc); margin: 0; }
.logo-grande { width: 84px; height: 84px; margin: 0 auto 8px; display: block; }

/* Botón flotante de comida */
.fab { position: fixed; right: 18px; bottom: calc(86px + env(safe-area-inset-bottom)); width: 58px; height: 58px; border-radius: 50%; background: var(--naranja); color: #fff;
  display: grid; place-items: center; box-shadow: 0 6px 18px rgba(255, 138, 61, .45); z-index: 25; text-decoration: none; }
.fab:active { transform: scale(.95); }

/* Pantalla de ingreso */
body.pantalla-centro { display: flex; align-items: center; min-height: 100vh; padding-bottom: 0; background: linear-gradient(160deg, #DCFCE7, #F4FBF6 55%, #FFF1E6); }
body.pantalla-centro .contenido { width: 100%; }

@media (min-width: 700px) {
  .form-columnas { grid-template-columns: 1fr 1fr; }
  .macros-form { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .menu-abajo { display: none; }
  .menu-arriba { display: flex; }
  .solo-pc { display: inline; }
  .fab { bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- 1.1.0: foto de perfil, avisos, recetas, reloj, administración ---- */
.avatar { border-radius: 50%; object-fit: cover; flex: none; display: inline-block; vertical-align: middle; background: var(--verde-claro); }
.avatar-inicial { display: inline-flex; align-items: center; justify-content: center; background: var(--verde); color: #fff; font-family: 'Fredoka', sans-serif; font-weight: 600; }
.saludo { display: flex; align-items: center; gap: 12px; }
.saludo small { display: block; font: 600 .85rem 'Nunito', sans-serif; color: var(--suave); }
.barra-user .avatar { border: 2px solid var(--verde-claro); }
.perfil-cabeza { display: flex; align-items: center; gap: 16px; }
.perfil-cabeza > div { display: flex; flex-direction: column; min-width: 0; }
.perfil-nombre { font: 600 1.25rem 'Fredoka', sans-serif; }
.aviso-cita { display: block; background: var(--verde-claro); color: var(--verde-osc); text-decoration: none; }
.etiqueta-verde { background: var(--verde); color: #fff; }
.check { display: flex; align-items: center; gap: 10px; flex-direction: row; }
.check input { width: 20px; height: 20px; flex: none; }

.macros-mini { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: .88rem; font-weight: 700; margin: 4px 0 8px; }
.macros-mini .m-prot { color: var(--prot); } .macros-mini .m-carb { color: #C77700; } .macros-mini .m-gras { color: var(--gras); }
.receta { margin-bottom: 14px; }
.receta .fila-titulo { align-items: flex-start; }
.receta-datos { margin: 2px 0; }
.receta details { margin: 8px 0; }
.receta summary { cursor: pointer; font-weight: 700; color: var(--verde-osc); }
.receta h4 { margin: 12px 0 4px; font-size: .95rem; }
.receta-ing, .receta-pasos { margin: 0; padding-left: 20px; }
.receta-ing li, .receta-pasos li { margin: 3px 0; }

.reloj-lista { margin: 6px 0 4px; }
.reloj-lista .fila-item { margin-bottom: 6px; }

.usuario-fila.apagado { opacity: .6; }
.usuario-cab { display: flex; align-items: center; gap: 12px; }
.fila-item .comida-acciones, .usuario-fila .comida-acciones { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; }
.comida-acciones form { margin: 0; }
.rojo { color: var(--rojo); }

.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla-consumo { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla-consumo th, .tabla-consumo td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla-consumo th { font-weight: 800; color: var(--suave); font-size: .8rem; text-transform: uppercase; letter-spacing: .02em; }
.tabla-consumo td.num, .tabla-consumo th.num { text-align: right; }
.pestanas a { display: block; text-align: center; text-decoration: none; padding: 10px 4px; border-radius: 12px; font: 700 .95rem 'Nunito', sans-serif; color: var(--suave); }
.pestanas a.on { background: #fff; color: var(--verde-osc); box-shadow: var(--sombra); }

/* ---- 1.2.0: datos del reloj ---- */
.grilla-datos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 10px 0 14px; }
@media (min-width: 640px) { .grilla-datos { grid-template-columns: repeat(4, 1fr); } }
.zonas-barra { display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: #E6F4EA; margin: 8px 0; }
.zonas-barra .zona { display: block; height: 100%; }
.zona { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.zona1 { background: #A7D8B8; } .zona2 { background: #5CC08A; } .zona3 { background: #F6C945; } .zona4 { background: #FF8A3D; } .zona5 { background: #E5484D; }
.zonas-ley { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: .85rem; color: var(--suave); }
.zonas-ley .zona { margin-right: 6px; }