/* Página de Nutrición. Lo común (paleta, cristal, botones, cabecera, barra inferior...) está en base.css. */

:root {
    --nut-bien: var(--activo-fondo);
    --nut-medio: #E8B84A;
    --nut-alerta: var(--alta);
    /* Días del calendario: fijos (no cambian con la paleta) para que verde sea siempre «cumplido» y rojo «no llegaste» */
    --dia-cumplido: #3FB36F;
    --dia-fallido: #E5534B;
    /* Un color por macronutriente: el mismo en su barra, en su punto y en el trozo del aro de calorías */
    --macro-proteina: #6FA3FF;
    --macro-grasa: #F2B84B;
    --macro-carbos: #B995FF;
}

.contenido-nutricion {
    display: grid;
    gap: 1.1rem;
    max-width: 64rem;
    margin: 0 auto;
    padding: 0.75rem 10px 2rem;
}

.contenido-nutricion .bloque {
    display: grid;
    gap: 0.9rem;
    align-content: start;
    padding: 1.1rem;
}

.contenido-nutricion h2 {
    margin: 0;
    text-transform: uppercase; /* tamaño y espaciado: los de todos los bloques (base.css) */
}

/* La cabecera se alinea con el contenido: el logo y el título empiezan en la misma línea que los bloques */
body:has(.contenido-nutricion) .cabecera {
    max-width: 64rem;
    margin-inline: auto;
    padding-inline: 10px;
}

/* En pantalla ancha, «Lo que comiste» y el calendario del mes van lado a lado */
@media (min-width: 56rem) {
    .contenido-nutricion {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        align-items: start;
    }

    #bloque-cuerpo,
    #bloque-dia,
    #bloque-nutrientes,
    .creditos {
        grid-column: 1 / -1;
    }
}

/* ---------- Campo de fecha y textos de ayuda (cada página trae sus estilos de formulario) ---------- */
.contenido-nutricion .control {
    width: 100%;
    padding: 0.65rem 0.9rem;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--texto);
    background-color: var(--boton-vidrio);
    background-image: linear-gradient(160deg, var(--vidrio-brillo-1), var(--vidrio-brillo-2));
    -webkit-backdrop-filter: blur(calc(var(--vidrio-desenfoque) * 0.6)) saturate(1.6);
    backdrop-filter: blur(calc(var(--vidrio-desenfoque) * 0.6)) saturate(1.6);
    border: 1px solid var(--vidrio-borde);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 var(--vidrio-luz);
}

.contenido-nutricion .ayuda {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.4;
}

.enlace-perfil {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---------- Barras (las comparten el resumen y la lista de nutrientes) ---------- */
.nut-barra {
    height: 0.5rem;
    overflow: hidden;
    background: var(--hueco);
    border-radius: 999px;
}

.nut-relleno {
    display: block;
    height: 100%;
    background: var(--nut-bien);
    border-radius: inherit;
    transition: width 0.7s var(--mov-quart, ease-out);
}

.nut-cerca .nut-relleno,
.nut-medio .nut-relleno { background: var(--nut-medio); }
.nut-pasado .nut-relleno { background: var(--nut-alerta); }
.nut-poco .nut-relleno { background: color-mix(in srgb, var(--nut-bien) 55%, transparent); }

/* ---------- Tu IMC ---------- */
.imc {
    display: grid;
    gap: 0.6rem;
}

@media (min-width: 40rem) {
    .imc {
        grid-template-columns: minmax(11rem, auto) minmax(0, 1fr);
        align-items: center;
        column-gap: 2rem;
    }

    .imc > .ayuda {
        grid-column: 1 / -1;
    }
}

.imc-valor {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.9rem;
}

.imc-valor strong {
    font-size: 2.4rem;
    line-height: 1;
}

.imc-categoria {
    padding: 0.2rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    background: var(--hueco);
    border-radius: 999px;
}

.imc-normal { background: color-mix(in srgb, var(--nut-bien) 45%, transparent); }
.imc-sobrepeso { background: color-mix(in srgb, var(--nut-medio) 45%, transparent); }
.imc-obesidad-1, .imc-obesidad-2, .imc-obesidad-3 { background: color-mix(in srgb, var(--nut-alerta) 45%, transparent); }
.imc-delgadez-leve, .imc-delgadez-moderada, .imc-delgadez-severa { background: color-mix(in srgb, #5B8DEF 45%, transparent); }

.imc-escala {
    position: relative;
    padding-bottom: 1.2rem;
}

.imc-pista {
    display: flex;
    height: 0.7rem;
    overflow: hidden;
    border-radius: 999px;
}

.imc-tramo { display: block; }
.imc-tramo-bajo { background: #5B8DEF; }
.imc-tramo-normal { background: var(--nut-bien); }
.imc-tramo-sobrepeso { background: var(--nut-medio); }
.imc-tramo-obesidad { background: var(--nut-alerta); }

.imc-marca {
    position: absolute;
    top: -0.3rem;
    width: 0.25rem;
    height: 1.3rem;
    margin-left: -0.125rem;
    background: var(--texto);
    border-radius: 3px;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45);
    transition: left 0.7s var(--mov-quart, ease-out);
}

.imc-numeros span {
    position: absolute;
    bottom: 0;
    font-size: 0.68rem;
    opacity: 0.8;
    transform: translateX(-50%);
}

/* ---------- El día ---------- */
.dia-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1rem;
}

.dia-nav {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.dia-nav .control {
    width: auto;
}

/* La fecha lleva el envoltorio de fecha-teclado.js (ancho completo): que ceda espacio para que «Hoy» quede a su lado y no debajo */
.dia-nav .fecha-teclado {
    flex: 1 1 9rem;
    width: auto;
}

.dia-nav .btn {
    flex: none;
}

.resumen {
    display: grid;
    gap: 0.8rem;
}

@media (min-width: 48rem) {
    .resumen {
        grid-template-columns: minmax(17rem, 1.05fr) minmax(0, 1.2fr);
        grid-template-rows: auto 1fr;
        align-items: stretch;
    }

    /* El aro de calorías es lo principal: ocupa toda la columna izquierda; a la derecha, macronutrientes y colesterol */
    .resumen-calorias {
        grid-row: 1 / span 2;
    }
}

.resumen-calorias,
.resumen-macros,
.resumen-colesterol {
    display: grid;
    align-content: start;
    gap: 0.7rem;
    padding: 0.9rem 1rem;
    background: linear-gradient(160deg, var(--vidrio-brillo-1), var(--vidrio-brillo-2));
    border: 1px solid var(--vidrio-borde);
    border-radius: 18px;
    box-shadow: inset 0 1px 0 var(--vidrio-luz);
}

.resumen-colesterol {
    gap: 0.4rem;
}

/* La tarjeta principal: aro grande al centro, con un resplandor suave detrás */
.resumen-calorias {
    justify-items: center;
    align-content: center;
    gap: 0.9rem;
    padding: 1.2rem 1.1rem 1.3rem;
    text-align: center;
    background:
        radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--activo-fondo) 26%, transparent), transparent 64%),
        linear-gradient(160deg, var(--vidrio-brillo-1), var(--vidrio-brillo-2));
}

.aro-meta {
    display: grid;
    gap: 0.15rem;
}

.aro-resto {
    font-size: 1.05rem;
}

.aro-resto-pasado {
    color: var(--nut-alerta);
}

.aro-origen {
    font-size: 0.75rem;
    opacity: 0.85;
}

.aro-boton {
    min-height: 2.5rem;
}

.resumen-titulo {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.85;
}

.resumen-grande {
    font-size: 1.7rem;
    line-height: 1.1;
}

.resumen-ref {
    font-size: 0.7rem;
    opacity: 0.85;
}

.resumen-ref.nut-pasado {
    color: var(--nut-alerta);
    opacity: 1;
}

.resumen-mensaje {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
}

.resumen-colesterol.nut-pasado .resumen-mensaje { color: var(--nut-alerta); }
.resumen-colesterol.nut-cerca .resumen-mensaje { color: var(--nut-medio); }

/* El aro de calorías: la pista, y encima un trozo por macronutriente con su color */
.aro {
    position: relative;
    width: min(100%, 15.5rem);
    margin: 0 auto;
    aspect-ratio: 1;
}

.aro-svg {
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}

.aro-pista,
.aro-segmento {
    fill: none;
    stroke-width: 11;
}

.aro-pista {
    stroke: var(--hueco);
}

.aro-segmento {
    stroke-linecap: butt;
    transition: stroke-dasharray 0.9s var(--mov-quart, ease-out), stroke-dashoffset 0.9s var(--mov-quart, ease-out);
}

.aro-centro {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.1rem;
    text-align: center;
}

.aro-numero {
    font-size: clamp(2.6rem, 9vw, 3.5rem);
    line-height: 1;
}

.aro-unidad {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.aro-pct {
    font-size: 0.78rem;
    opacity: 0.85;
}

.aro-pasado .aro-pct {
    color: var(--nut-alerta);
    opacity: 1;
}

.macro-proteina { --macro: var(--macro-proteina); }
.macro-grasa { --macro: var(--macro-grasa); }
.macro-carbos { --macro: var(--macro-carbos); }

.aro-segmento { stroke: var(--macro); }

/* Cada macronutriente: punto de su color, nombre, gramos y una barra del mismo color */
.macro {
    display: grid;
    gap: 0.35rem;
}

.macro-cabecera {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.macro-punto {
    width: 0.7rem;
    height: 0.7rem;
    background: var(--macro);
    border-radius: 50%;
    box-shadow: 0 0 10px color-mix(in srgb, var(--macro) 70%, transparent);
}

.macro-nombre {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 700;
}

.macro-valor {
    font-size: 1.1rem;
}

.macro .nut-relleno {
    background: var(--macro);
}

/* ---------- Lo que se comió ---------- */
.comidas-lista {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Una de las 5 comidas del día */
.comida-grupo {
    display: grid;
    gap: 0.4rem;
}

.comida-grupo-cabecera {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.comida-grupo-nombre {
    flex: 1;
    font-size: 0.85rem;
}

.comida-grupo-kcal {
    font-size: 0.78rem;
    font-weight: 700;
    opacity: 0.9;
}

.comida-grupo-mas {
    min-width: 2rem;
    min-height: 2rem;
    padding: 0;
}

.comida-grupo-vacio {
    margin: 0;
    font-size: 0.75rem;
    opacity: 0.7;
}

.comida-grupo .comidas-lista {
    gap: 0.3rem;
}

.comidas-lista > .comida-grupo + .comida-grupo {
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.comida-item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
    background: linear-gradient(160deg, var(--vidrio-brillo-1), var(--vidrio-brillo-2));
    border: 1px solid var(--vidrio-borde);
    border-radius: 14px;
}

.comida-hora {
    font-size: 0.72rem;
    font-weight: 700;
    opacity: 0.8;
}

.comida-nombre {
    min-width: 0;
    overflow-wrap: anywhere;
}

.comida-datos {
    font-size: 0.72rem;
    white-space: nowrap;
    opacity: 0.9;
}

/* ---------- Calendario del mes ---------- */
.mes-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.mes-nav {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.mes-nombre {
    min-width: 8.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
}

.mes {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.25rem;
    max-width: 22rem;
}

.mes-letra {
    padding-bottom: 0.2rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
    opacity: 0.75;
}

.mes-dia {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    padding: 0;
    color: var(--texto);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.mes-dia:hover,
.mes-dia:focus-visible {
    border-color: var(--vidrio-borde);
}

.mes-hoy {
    border-color: var(--vidrio-borde);
    font-weight: 700;
}

/* Verde: comiste lo de tu meta (±10 %). Rojo: te quedaste corto o te pasaste. Sin color: no anotaste nada. */
.mes-cumplido {
    background: color-mix(in srgb, var(--dia-cumplido) 42%, transparent);
    border-color: var(--dia-cumplido);
}

.mes-fallido {
    background: color-mix(in srgb, var(--dia-fallido) 42%, transparent);
    border-color: var(--dia-fallido);
}

/* El día que se está viendo va con un aro claro (así no se confunde con el verde ni el rojo) */
.mes-elegido {
    font-weight: 700;
    box-shadow: 0 0 0 2px var(--texto);
}

.mes-cuenta {
    margin: 0;
    font-size: 0.82rem;
}

.mes-cuenta strong {
    color: var(--dia-cumplido);
}

.mes-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    margin: 0;
    font-size: 0.7rem;
    opacity: 0.9;
}

.mes-clave::before {
    content: '';
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    margin-right: 0.35rem;
    vertical-align: -0.08rem;
    border: 1px solid var(--vidrio-borde);
    border-radius: 4px;
}

.mes-clave-cumplido::before { background: var(--dia-cumplido); border-color: var(--dia-cumplido); }
.mes-clave-fallido::before { background: var(--dia-fallido); border-color: var(--dia-fallido); }

/* Un punto marca los días en que se registró comida */
.mes-con-comida::after {
    content: '';
    position: absolute;
    bottom: 0.22rem;
    left: 50%;
    width: 0.28rem;
    height: 0.28rem;
    margin-left: -0.14rem;
    background: currentColor;
    border-radius: 50%;
}

/* ---------- Todos los nutrientes ---------- */
.nutrientes {
    display: grid;
    gap: 0.5rem;
}

.nut-grupo {
    background: linear-gradient(160deg, var(--vidrio-brillo-1), var(--vidrio-brillo-2));
    border: 1px solid var(--vidrio-borde);
    border-radius: 16px;
}

.nut-grupo > summary {
    padding: 0.7rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.nut-filas {
    display: grid;
    gap: 0.1rem;
    padding: 0 0.9rem 0.8rem;
}

.nut-fila {
    display: grid;
    grid-template-columns: minmax(8rem, 1.2fr) minmax(5.5rem, 0.8fr) minmax(5rem, 1.4fr) minmax(5rem, 0.8fr);
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0;
    font-size: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.nut-cantidad {
    text-align: right;
}

.nut-pct,
.nut-sin-ref {
    font-size: 0.7rem;
    opacity: 0.8;
}

.nut-sin-ref {
    grid-column: 3 / -1;
}

@media (max-width: 38rem) {
    .nut-fila {
        grid-template-columns: 1fr auto;
    }

    .nut-fila .nut-barra,
    .nut-pct,
    .nut-sin-ref {
        grid-column: 1 / -1;
    }
}

/* ---------- La ventana «Calcular kcal diarias» (scripts/meta-calorias.js) ---------- */
.meta-dialogo {
    width: min(100% - 1.5rem, 36rem);
    max-height: calc(100vh - 2rem);
    margin: auto;
    padding: 1.25rem 1.35rem 1.1rem;
    color: var(--texto);
    isolation: isolate;
    overflow-y: auto;
    background-color: var(--panel);
    background-image: linear-gradient(115deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 42%);
    border: 1px solid var(--vidrio-borde);
    border-radius: 24px;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8), inset 0 1px 0 var(--vidrio-luz);
}

.meta-dialogo[open] {
    display: grid;
    gap: 0.9rem;
}

.meta-dialogo::backdrop {
    background: rgba(0, 0, 0, 0.55);
}

.meta-dialogo .control {
    width: 100%;
    padding: 0.65rem 0.9rem;
    font-size: 0.9rem;
    color: var(--texto);
    background-color: var(--boton-vidrio);
    border: 1px solid var(--vidrio-borde);
    border-radius: 14px;
}

.meta-titulo {
    margin: 0;
    font-size: 1.15rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.meta-subtitulo,
.meta-persona,
.meta-aviso {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
}

.meta-subtitulo { opacity: 0.85; }
.meta-persona { font-weight: 700; }

.meta-aviso {
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--nut-medio);
    border-radius: 12px;
}

.meta-fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.meta-campo {
    display: grid;
    gap: 0.35rem;
}

.meta-campo label,
.meta-grupo legend {
    font-size: 0.78rem;
    font-weight: 700;
}

.meta-grupo {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.meta-grupo legend {
    margin-bottom: 0.4rem;
    padding: 0;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.meta-opcion {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 0.65rem;
    padding: 0.5rem 0.8rem;
    cursor: pointer;
    background: linear-gradient(160deg, var(--vidrio-brillo-1), var(--vidrio-brillo-2));
    border: 1px solid var(--vidrio-borde);
    border-radius: 12px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.meta-opcion input {
    grid-row: 1 / span 2;
    margin: 0;
    accent-color: var(--activo-fondo);
}

.meta-opcion-titulo {
    font-size: 0.85rem;
    font-weight: 700;
}

.meta-opcion-detalle {
    grid-column: 2;
    font-size: 0.72rem;
    opacity: 0.85;
}

.meta-opcion:has(input:checked) {
    background-color: color-mix(in srgb, var(--activo-fondo) 28%, transparent);
    border-color: var(--activo-fondo);
}

.meta-opcion:has(input:focus-visible) {
    outline: 2px solid var(--texto);
    outline-offset: 2px;
}

@media (min-width: 34rem) {
    .meta-grupo-objetivo {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .meta-grupo-objetivo legend {
        grid-column: 1 / -1;
    }
}

.meta-resultado {
    display: grid;
    gap: 0.25rem;
    padding: 0.8rem 1rem;
    text-align: center;
    background: linear-gradient(160deg, var(--vidrio-brillo-1), var(--vidrio-brillo-2));
    border: 1px solid var(--vidrio-borde);
    border-radius: 16px;
}

.meta-resultado-titulo {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.85;
}

.meta-resultado-kcal {
    font-size: 1.9rem;
    line-height: 1.1;
}

.meta-resultado-detalle,
.meta-pista {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.4;
    opacity: 0.9;
}

.meta-pista-alerta,
.meta-error {
    color: var(--nut-alerta);
    opacity: 1;
}

.meta-error {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
}

.meta-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.creditos {
    margin: 0;
    font-size: 0.7rem;
    opacity: 0.75;
}