/* App de la persona (rol `persona`): solo lo propio de Delia encima de apps-base.css. Sin #hex: todo de tokens.css. */

/* --sobre-marca ya es la tinta en tokens.css (blanco sobre el coral no pasa AA). */
body.ap{--fab-abajo:calc(78px + 16px + env(safe-area-inset-bottom))}
.ap .btn{font-size:1rem}
.ap .btn.peligro{background:var(--error);color:var(--superficie)}
.ap .btn.ancho{width:100%}
.ap .btn.chico{min-width:44px}
.ap .btn.cargando-btn{pointer-events:none;opacity:.85}
.ap .btn .giro{width:18px;height:18px;border-radius:50%;border:3px solid currentColor;border-right-color:transparent;animation:giro .8s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}

/* Fuera de sesión y al empezar: sin barra de pantallas ni perfil. */
body.ap.fuera{padding-bottom:env(safe-area-inset-bottom)}
body.ap.fuera .ap-nav,body.ap.fuera #apCab-perfil{display:none}
@media (min-width:900px){body.ap.fuera:not(.selector){grid-template-columns:minmax(0,1fr)}}
.ap-volver svg{width:22px;height:22px}

.cargando{display:flex;align-items:center;gap:12px;min-height:50dvh;justify-content:center;color:var(--tinta-2);font-weight:700}
.cargando-punto{width:14px;height:14px;border-radius:50%;background:var(--marca);animation:latido 1.1s ease-in-out infinite}
@keyframes latido{0%,100%{transform:scale(.7);opacity:.5}50%{transform:scale(1.15);opacity:1}}

/* ---- Entrada ---- */
.entrada{display:grid;gap:18px;max-width:520px;margin:0 auto}
.entrada-cab{display:flex;align-items:center;gap:14px}
.entrada-cab h1{margin:0;font-family:var(--display);font-size:var(--t-2);line-height:1.1}
.entrada-cab p{margin:4px 0 0;color:var(--tinta-2)}
.segmento{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--superficie);box-shadow:var(--sombra);overflow-x:auto;scrollbar-width:none}
.segmento button{flex:1 0 auto;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--tinta-2);font-weight:800;cursor:pointer;white-space:nowrap}
.segmento button[aria-selected="true"]{background:var(--marca-fuerte);color:var(--superficie)}
.form{display:grid;gap:14px}
.form .fila-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));gap:12px}
.campo .ayuda{font-weight:400;color:var(--tinta-2)}
.campo .error-campo{font-weight:700;color:var(--error)}
.casilla{display:flex;gap:12px;align-items:flex-start;min-height:44px;font-weight:600;cursor:pointer}
.casilla input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--marca-fuerte)}
.aviso-corto{margin:0;font-size:var(--t-chico);color:var(--tinta-2)}
.aviso-corto a,.ap .enlace-texto{color:var(--marca-fuerte);font-weight:700}
.ap .enlace-texto{display:inline-flex;align-items:center;min-height:44px;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
.mensaje-error{margin:0;padding:12px 14px;border-radius:var(--radio-chico);background:color-mix(in srgb,var(--error) 10%,var(--superficie));color:var(--error);font-weight:700}
.mensaje-ok{margin:0;padding:12px 14px;border-radius:var(--radio-chico);background:color-mix(in srgb,var(--ok) 10%,var(--superficie));color:var(--ok);font-weight:700}

/* Código de recuperación */
.codigo{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;margin:12px 0;padding:14px;border-radius:var(--radio);background:var(--fondo);border:2px dashed var(--linea)}
.codigo span{display:grid;place-items:center;min-height:40px;border-radius:8px;background:var(--superficie);font-weight:800;font-size:1.0625rem;letter-spacing:.08em;font-variant-numeric:tabular-nums}

/* Opciones como chips (radio o casilla): contraste alto al elegir */
.opciones{display:flex;flex-wrap:wrap;gap:8px;border:0;margin:0;padding:0;min-width:0}
.opciones legend,.grupo-tit{padding:0;margin:0 0 8px;font-weight:700;font-size:var(--t-chico)}
.opcion{position:relative;display:inline-flex}
.opcion input{position:absolute;opacity:0;width:1px;height:1px}
.opcion span{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--tinta-2);background:var(--superficie);color:var(--tinta);font-weight:700;cursor:pointer;transition:background var(--dur-normal) var(--curva),transform var(--dur-normal) var(--curva)}
.opcion input:checked+span{background:var(--marca-fuerte);border-color:var(--marca-fuerte);color:var(--superficie)}
.opcion input:checked+span::before{content:"✓";font-weight:800}
.opcion input:focus-visible+span{outline:3px solid var(--marca);outline-offset:2px}
.opcion span:active{transform:scale(.96)}
.opciones.bloques{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
.opciones.bloques .opcion span{width:100%;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;padding:8px 14px;border-radius:var(--radio-chico);white-space:normal;line-height:1.25}
.opciones.bloques .opcion span::before{display:none}
.opciones.bloques .opcion small{font-weight:400}
.opciones.bloques .opcion input:checked+span small{color:inherit}
.contador{display:inline-flex;align-items:center;gap:6px}
.contador button{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--tinta-2);background:var(--superficie);font-size:1.375rem;font-weight:800;cursor:pointer;line-height:1}
.contador output{min-width:3ch;text-align:center;font-family:var(--display);font-size:var(--t-3);font-weight:800}
fieldset.bloque{border:0;margin:0;padding:0;min-width:0;display:grid;gap:12px}
fieldset.bloque>legend{font-family:var(--display);font-size:var(--t-3);font-weight:800;margin-bottom:10px;padding:0}

/* ---- Metas: el momento héroe del onboarding y del perfil ---- */
.metas{display:grid;gap:14px}
.metas-kcal{display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px 16px;border-radius:var(--radio-tarjeta);background:var(--marca-suave-2);text-align:center}
.metas-kcal .odo{font-size:clamp(2.75rem,12vw,4rem);color:var(--tinta)}
.metas-kcal small{color:var(--tinta-2);font-weight:700}
.metas-fila{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.metas-fila>div{padding:14px;border-radius:var(--radio);background:var(--superficie);box-shadow:var(--sombra);min-width:0}
.metas-fila small{display:block;color:var(--tinta-2);font-weight:700}
.metas-fila .odo{font-size:var(--t-2)}
.macro-p{--c:var(--marca-fuerte)}.macro-c{--c:var(--macro-carbos)}.macro-g{--c:var(--macro-grasa)}
.macros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.macros>div{padding:12px;border-radius:var(--radio);background:var(--superficie);box-shadow:var(--sombra);min-width:0;border-top:4px solid var(--c)}
.macros small{display:block;color:var(--tinta-2);font-weight:700}
.macros .odo{font-size:var(--t-3)}
.piso{margin:0;padding:10px 14px;border-radius:var(--radio-chico);background:color-mix(in srgb,var(--aviso) 10%,var(--superficie));color:var(--aviso);font-weight:700}

/* ---- Hoy ---- */
.hoy-hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center}
.anillo{position:relative;width:148px;height:148px;flex:none}
.anillo svg{width:100%;height:100%;transform:rotate(-90deg)}
.anillo .pista{fill:none;stroke:var(--linea);stroke-width:14}
.anillo .avance{fill:none;stroke:var(--marca-fuerte);stroke-width:14;stroke-linecap:round}
.anillo-centro{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.anillo-centro .odo{font-size:1.875rem}
.anillo-centro small{color:var(--tinta-2);font-weight:700}
.barras-macro{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.barras-macro li{display:grid;gap:4px}
.barras-macro .fila-macro{display:flex;justify-content:space-between;gap:8px;font-size:var(--t-chico);font-weight:700}
.barras-macro i{display:block;height:10px;border-radius:999px;background:color-mix(in srgb,var(--c) 18%,var(--superficie));overflow:hidden}
.barras-macro i b{display:block;height:100%;width:100%;border-radius:inherit;background:var(--c);transform-origin:left;transform:scaleX(var(--p,0))}
.vasos{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0;list-style:none}
.vasos button{width:44px;height:44px;border-radius:12px;border:1.5px solid var(--agua);background:var(--superficie);cursor:pointer;position:relative;overflow:hidden}
.vasos button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--lleno,0%);background:color-mix(in srgb,var(--agua) 35%,var(--superficie));transition:height var(--dur-normal) var(--curva)}
.vasos button[aria-pressed="true"]{--lleno:100%}
.tarjeta-tit{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.tarjeta-tit h2{margin:0}
.tarjeta-tit .emoji{width:40px;height:40px}

/* ---- Listas de comidas, recetas, ejercicios ---- */
.ap .lista .num{font-variant-numeric:tabular-nums;font-weight:800;white-space:nowrap}
.borrar-fila{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--linea);background:var(--superficie);color:var(--tinta-2);font-size:1.25rem;cursor:pointer}
.vacio{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 12px;text-align:center}
.vacio p{margin:0;color:var(--tinta-2)}
.plan-dia{margin:0 0 12px}
.plan-dia h3{margin:0 0 6px;font-size:1rem;font-weight:800}
.ap h3{font-size:1.0625rem}
.resultado-ia ul,.resultado-ia ol{margin:6px 0;padding-left:20px}
.resultado-ia li{margin:4px 0}
.meta-macro{display:flex;flex-wrap:wrap;gap:4px 12px;color:var(--tinta-2);font-size:var(--t-chico);font-weight:700}
.secciones{display:flex;gap:8px;margin:0 0 14px;overflow-x:auto;scrollbar-width:none;padding:2px}
.secciones a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--tinta-2);background:var(--superficie);color:var(--tinta);font-weight:800;text-decoration:none;white-space:nowrap}
.secciones a[aria-current="true"]{background:var(--marca-fuerte);border-color:var(--marca-fuerte);color:var(--superficie)}

/* ---- Entreno ---- */
.semana{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:0 0 14px}
.semana button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:60px;border-radius:var(--radio-chico);border:1.5px solid var(--linea);background:var(--superficie);font-weight:800;cursor:pointer;padding:4px 0}
.semana button small{font-weight:700;color:var(--tinta-2)}
.semana button.con-dia{border-color:var(--tinta-2)}
.semana button.hecho{background:color-mix(in srgb,var(--ok) 14%,var(--superficie));border-color:var(--ok)}
.semana button[aria-pressed="true"]{background:var(--marca-fuerte);border-color:var(--marca-fuerte);color:var(--superficie)}
.semana button[aria-pressed="true"] small{color:inherit}
.ejercicio{display:grid;gap:8px}
.series{display:flex;flex-wrap:wrap;gap:8px}
.series button{min-width:44px;min-height:44px;padding:0 12px;border-radius:12px;border:1.5px solid var(--tinta-2);background:var(--superficie);font-weight:800;cursor:pointer}
.series button[aria-pressed="true"]{background:var(--ok);border-color:var(--ok);color:var(--superficie)}
.progreso{height:12px;border-radius:999px;background:var(--marca-suave-2);overflow:hidden;margin:6px 0 0}
.progreso b{display:block;height:100%;background:var(--ok);transform-origin:left;transform:scaleX(var(--p,0))}

/* ---- Ánimo ---- */
.caras{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;border:0;margin:0;padding:0}
.caras .opcion{display:block}
.caras .opcion span{width:100%;flex-direction:column;justify-content:center;gap:2px;min-height:72px;padding:6px 2px;border-radius:var(--radio-chico);font-size:var(--t-chico);text-align:center;line-height:1.15}
.caras .opcion span::before{display:none}
.caras .opcion i{font-style:normal;font-size:1.75rem;line-height:1}
.grafica{display:grid;grid-template-columns:repeat(var(--n,31),minmax(0,1fr));align-items:end;gap:2px;height:120px;margin:10px 0 6px;padding:0;list-style:none}
.grafica li{height:100%;display:flex;align-items:flex-end}
.grafica i{display:block;width:100%;height:calc(var(--v,0) * 20%);min-height:3px;border-radius:4px 4px 0 0;background:var(--marca-fuerte);transform-origin:bottom;transform:scaleY(var(--s,1))}
.grafica i.sin{background:var(--linea);height:3px}
.grafica-eje{display:flex;justify-content:space-between;color:var(--tinta-2);font-size:var(--t-chico);font-weight:700}
.chips-fila{display:flex;flex-wrap:wrap;gap:6px}
.chip.fuerte{background:var(--marca-fuerte);color:var(--superficie)}
.entrada-animo .cara{font-size:1.75rem;line-height:1}

/* ---- Delia (chat) ---- */
.expertos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 12px}
.expertos button{min-height:52px;padding:6px;border-radius:var(--radio-chico);border:1.5px solid var(--tinta-2);background:var(--superficie);font-weight:800;cursor:pointer;line-height:1.2}
.expertos button[aria-pressed="true"]{border-width:2px;border-color:var(--tinta);color:var(--tinta)}
.expertos [data-modo="nutricion"][aria-pressed="true"]{background:var(--pastel-menta)}
.expertos [data-modo="entreno"][aria-pressed="true"]{background:var(--pastel-durazno)}
.expertos [data-modo="emocional"][aria-pressed="true"]{background:var(--pastel-lavanda)}
.chat-zona{display:flex;flex-direction:column;gap:12px}
.chat-zona .chat{min-height:30dvh}
.redactar{position:sticky;bottom:calc(78px + env(safe-area-inset-bottom));z-index:5;display:flex;gap:8px;align-items:flex-end;padding:10px 0 6px;background:linear-gradient(to top,var(--fondo) 75%,transparent)}
.redactar textarea{flex:1;min-width:0;min-height:48px;max-height:160px;padding:12px 14px;border-radius:24px;border:1px solid var(--linea);background:var(--superficie);font-size:1rem;resize:none}
.redactar .btn{flex:none;width:48px;padding:0}
.redactar .btn svg{width:22px;height:22px}
.crisis{position:sticky;top:calc(var(--ap-top-h,60px) + 8px);z-index:6;display:grid;gap:10px;padding:16px;border-radius:var(--radio-tarjeta);background:var(--superficie);border:2px solid var(--error);box-shadow:var(--sombra-alta)}
.crisis h2{margin:0;color:var(--error)}
.crisis p{margin:0}
.crisis .acciones{display:flex;flex-wrap:wrap;gap:8px}
.crisis .btn{background:var(--error);color:var(--superficie)}
.crisis .btn.claro{background:var(--superficie);color:var(--error);border-color:var(--error)}
.nota-ia{margin:0;font-size:var(--t-chico);color:var(--tinta-2)}

/* ---- Botón flotante (crear) ---- */
.fab{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:var(--fab-abajo);z-index:19;display:inline-flex;align-items:center;gap:8px;min-height:56px;padding:0 22px 0 18px;border-radius:999px;border:0;background:var(--marca);color:var(--sobre-marca);font-weight:800;font-size:1rem;box-shadow:var(--sombra-alta);cursor:pointer}
.fab svg{width:22px;height:22px}
.fab:active{transform:scale(.96)}
.con-fab{padding-bottom:84px}
@media (min-width:900px){body.ap{--fab-abajo:calc(24px + env(safe-area-inset-bottom))}.redactar{bottom:env(safe-area-inset-bottom)}}

/* ---- Hojas (dialog nativo) ---- */
dialog.hoja{width:min(560px,100%);max-height:min(88dvh,820px);margin:auto auto 0;padding:0;border:0;border-radius:var(--radio-tarjeta) var(--radio-tarjeta) 0 0;background:var(--superficie);color:var(--tinta);box-shadow:var(--sombra-alta);overscroll-behavior:contain}
dialog.hoja::backdrop{background:color-mix(in srgb,var(--tinta) 45%,transparent)}
.hoja-cuerpo{display:grid;gap:14px;padding:18px max(18px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));overflow-y:auto;max-height:inherit}
.hoja-cab{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hoja-cab h2{margin:0}
.cerrar-hoja{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--linea);background:var(--superficie);font-size:1.25rem;cursor:pointer}
.acciones-fila{display:flex;flex-wrap:wrap;gap:10px}
@media (min-width:640px){dialog.hoja{margin:auto;border-radius:var(--radio-tarjeta)}}

/* ---- Perfil ---- */
.ajuste{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px}
.ajuste>span{min-width:0}
.ajuste small{display:block;color:var(--tinta-2)}
.zona-peligro{border:1.5px solid color-mix(in srgb,var(--error) 40%,transparent)}

@media (max-width:380px){
  .hoy-hero{grid-template-columns:minmax(0,1fr);justify-items:center}
  .anillo{width:136px;height:136px}
  .macros{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.cargando-punto,.ap .btn .giro{animation:none}}
.barras-macro .num{white-space:nowrap;font-variant-numeric:tabular-nums}
.macros>div{padding:12px 10px}.macros small{hyphens:auto;overflow-wrap:break-word}