/* Página de un recordatorio (formulario). Lo común está en base.css. */

.contenido-formulario {
    width: min(100% - 20px, 40rem);
    margin: 0.75rem auto 2rem;
    padding: 1.1rem;
}

#mensaje {
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

#mensaje:empty {
    display: none;
}

.formulario {
    display: grid;
    gap: 1.25rem;
}

/* El selector de tipo está fuera del formulario: sin este margen el Título y la segunda columna quedan pegados a sus botones */
.grupo-tipo {
    margin-bottom: 1.25rem;
}

.campo {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
    border: 0;
}

.campo label, .campo legend {
    font-size: 0.8rem;
    font-weight: 700;
}

.fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr); /* con 1fr a secas la columna crece al ancho natural de un campo de fecha u hora y se sale de la pantalla */
    gap: 1rem;
    align-items: start;
}

/* Tabletas y computadoras: el cristal ocupa todo el ancho de la página y el formulario corre en columnas, como una hoja
   de periódico, con una línea fina entre ellas. Lo largo (pasos, acciones, errores) no se parte. */
@media (min-width: 48rem) {
    .contenido-formulario {
        width: min(100% - 3rem, 110rem);
        padding: 1.75rem 2.25rem;
    }

    .formulario {
        display: block;
        columns: 2 22rem;
        column-gap: 2.5rem;
        column-rule: 1px solid rgba(255, 255, 255, 0.12);
    }

    .formulario > * {
        break-inside: avoid;
        margin-bottom: 1.4rem;
    }

    .formulario > .seccion-pasos {
        break-inside: auto;
    }

    /* Buscar una receta o una rutina: con 20 resultados la sección mide miles de píxeles y, partida en columnas, sus resultados
       salían arriba de la segunda columna, pegados al título. Ahora la sección va entera en una columna y su lista se desplaza. */
    .formulario > .seccion-recetas,
    .formulario > .seccion-comer {
        break-inside: avoid;
    }

    .seccion-recetas .resultados-recetas {
        max-height: 30rem;
        padding-right: 0.3rem;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .formulario > .acciones,
    .formulario > .error-form {
        column-span: all;
    }

    .formulario > .acciones {
        margin: 0.4rem 0 0;
        padding-top: 1.4rem;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }
}

.control {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.65rem 0.9rem;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--texto);
    background: 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), 0 6px 14px -8px rgba(0, 0, 0, 0.55);
}

/* Fecha, hora y número: en el teléfono traen su propio ancho y alto y no respetan el ancho del contenedor; se igualan a los demás campos */
input.control[type="date"],
input.control[type="time"],
input.control[type="number"] {
    display: block;
    min-height: 2.75rem;
    -webkit-appearance: none;
    appearance: none;
}

input.control[type="date"]::-webkit-date-and-time-value,
input.control[type="time"]::-webkit-date-and-time-value {
    min-width: 0;
    text-align: left;
}

/* Duración propia: horas y minutos lado a lado */
.duracion-propia {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.1rem;
}

.duracion-propia-campo {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    font-size: 0.85rem;
}

.control:focus-visible {
    outline-offset: 1px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
}

.control::placeholder {
    color: var(--texto);
    opacity: 0.65;
}

textarea.control {
    resize: vertical;
}

/* ---------- Color del compromiso ---------- */
.grupo-color {
    gap: 0.8rem;
}

.paleta-color {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.muestra {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

/* El botón de radio queda fuera de vista, pero el teclado sigue funcionando */
.muestra-radio {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.muestra-color {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    background-color: var(--c);
    color: var(--c-texto);
    border: 3px solid transparent;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    font-size: 0; /* la palomita solo aparece en el color elegido */
    font-weight: 700;
    transition: transform 0.15s;
}

.muestra:hover .muestra-color {
    transform: scale(1.08);
}

.muestra-radio:checked + .muestra-color {
    border-color: var(--texto);
    font-size: 1.1rem;
    transform: scale(1.12);
}

.muestra-radio:focus-visible + .muestra-color {
    outline: 3px solid var(--texto);
    outline-offset: 3px;
}

.color-propio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.8rem;
}

.color-propio label {
    font-size: 0.8rem;
    font-weight: 700;
}

/* Cómo se verá la etiqueta del compromiso */
.color-vista {
    padding: 0.25rem 1rem;
    color: var(--c-texto);
    background-color: var(--c);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
}

/* ---------- Rutina por pasos ---------- */
.seccion-pasos {
    display: grid;
    gap: 0.6rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    background: transparent;
}

.seccion-pasos h2 {
    font-size: 1rem;
}

.ayuda {
    font-size: 0.75rem;
}

.seccion-pasos > .btn {
    justify-self: start;
    min-height: 2.5rem;
}

.lista-pasos {
    display: grid;
    gap: 0.6rem;
    list-style: none;
}

.paso {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "numero texto"
        ".      controles"
        ".      descripcion";
    gap: 0.4rem 0.5rem;
    align-items: center;
    padding: 0.75rem;
    background: linear-gradient(160deg, var(--vidrio-brillo-1), var(--vidrio-brillo-2));
    border: 1px solid var(--vidrio-borde);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 var(--vidrio-luz);
}

.paso .control {
    background: rgba(255, 255, 255, 0.07);
}

/* Paso que se puede hacer a la vez con el anterior: una casilla entre los controles y la descripción */
.paso-con-junto {
    grid-template-areas:
        "numero texto"
        ".      controles"
        ".      junto"
        ".      descripcion";
}

.paso-junto {
    grid-area: junto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    cursor: pointer;
}

/* Pasos que se hacen a la vez: una franja de color a la izquierda los une */
.paso-en-grupo {
    border-left: 4px solid var(--activo-fondo, currentColor);
}

.paso-separar {
    min-height: 2.25rem;
    padding: 0 0.6rem;
    font-size: 0.8rem;
}

.paso-numero {
    grid-area: numero;
    min-width: 1.5rem;
    font-weight: 700;
    text-align: center;
}

.paso-texto {
    grid-area: texto;
    min-width: 0; /* el nombre siempre ocupa todo el ancho de su fila */
}

.paso-descripcion {
    grid-area: descripcion;
    min-width: 0;
    resize: vertical;
    font-size: 0.8rem;
}

.paso-controles {
    grid-area: controles;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.5rem;
}

.paso-duracion {
    width: 5.5rem;
}

.paso-unidad, .paso-hora {
    font-size: 0.75rem;
}

.paso-acciones {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
}

.btn-icono {
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
}

.total-pasos {
    font-weight: 700;
    font-size: 0.8rem;
}

/* Botones para agregar un paso (con tiempo o de lista) */
.acciones-pasos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.acciones-pasos .btn {
    min-height: 2.5rem;
}

/* Paso de lista (check): sin duración, con una etiqueta en su lugar */
.paso-check {
    border-style: dashed;
}

.paso-etiqueta-check {
    padding: 0.2rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 700;
    background-color: var(--boton-vidrio-hover);
    border: 1px solid var(--vidrio-borde);
    border-radius: 999px;
}

/* Equipo e ingredientes (solo cocina) */
.seccion-cocina .btn {
    justify-self: start;
    min-height: 2.5rem;
}

.subtitulo-cocina {
    margin-top: 0.4rem;
    font-size: 0.85rem;
}

.lista-cocina {
    display: grid;
    gap: 0.4rem;
    list-style: none;
}

.fila-cocina {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.fila-cocina .cocina-texto {
    flex: 2 1 10rem;
    min-width: 0;
}

.fila-cocina .cocina-cantidad {
    flex: 1 1 5rem;
    min-width: 0;
}

.fila-cocina .cocina-unidad {
    flex: 1 1 8.5rem;
    min-width: 0;
}

/* «Después me lo como» */
.comer-despues {
    display: grid;
    gap: 0.7rem;
    margin-top: 0.4rem;
}

.comer-despues-campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
    gap: 0.7rem;
    padding: 0 0.2rem;
}

.comer-despues-campos[hidden] {
    display: none;
}

.comer-despues-campos .ayuda {
    grid-column: 1 / -1;
    margin: 0;
}

/* Con una receta o rutina ya cargada (plantilla) no se ofrece guardarla de nuevo */
.con-plantilla .guardar-receta {
    display: none;
}

/* ---------- Buscar una receta (cocina) ---------- */
.buscar-receta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.buscar-receta .control {
    flex: 1 1 14rem;
    min-width: 0;
}

.aviso-reemplazo {
    display: grid;
    gap: 0.5rem;
    padding: 0.75rem;
    font-size: 0.85rem;
    font-weight: 700;
    background-color: var(--boton-vidrio);
    border: 1px dashed var(--vidrio-borde);
    border-radius: 14px;
}

.resultados-recetas {
    display: grid;
    gap: 0.6rem;
    list-style: none;
}

.receta-resultado {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    column-gap: 0.75rem;
    row-gap: 0.3rem;
    padding: 0.75rem;
    background-color: var(--boton-vidrio);
    border: 1px solid var(--vidrio-borde);
    border-radius: 16px;
}

/* El ícono del plato a la izquierda; todo lo demás, en la segunda columna */
.receta-resultado > * {
    grid-column: 2;
}

.receta-resultado > .receta-icono {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 3.5rem;
    height: 3.5rem;
    object-fit: cover;
    border-radius: 12px;
}

.receta-nombre {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.receta-etiqueta {
    margin-left: 0.5rem;
    padding: 0.1rem 0.5rem;
    font-size: 0.7rem;
    border: 1px solid currentColor;
    border-radius: 999px;
}

.receta-datos,
.receta-ingredientes {
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

.receta-coincide {
    font-weight: 700;
}

.receta-variantes summary {
    cursor: pointer;
    min-height: 2rem;
    font-size: 0.8rem;
    font-weight: 700;
}

.receta-lista-variantes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.3rem;
    list-style: none;
}

.receta-lista-variantes .btn {
    min-height: 2.25rem;
    font-size: 0.8rem;
}

.nota-orientativa {
    font-weight: 700;
}

/* Guardar la rutina como receta */
.guardar-receta {
    display: grid;
    gap: 0.4rem;
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--vidrio-borde);
}

.guardar-receta label {
    font-size: 0.8rem;
    font-weight: 700;
}

.error-form {
    padding: 0.6rem 0.75rem;
    color: var(--alta);
    background-color: var(--panel);
    border: 2px solid var(--alta);
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 700;
}

.acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.acciones .btn {
    min-height: 2.75rem;
    padding: 0.4rem 1.2rem;
}

.acciones .btn-peligro {
    margin-left: auto;
}

@media (min-width: 40rem) {
    .fila {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Tipo: compromiso o hábito ---------- */
.opciones-tipo {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
}

/* "Recordatorio" es otra página: se ve como una opción más, pero es un enlace. La opción de la página actual */
/* no es enlace, y lleva el mismo tamaño de letra para que no cambie al llegar. */
a.opcion-tipo,
.opcion-tipo.opcion-actual {
    color: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
}

.opcion-tipo {
    position: relative;
    display: flex;
    cursor: pointer;
}

/* El botón de radio queda fuera de vista, pero el teclado sigue funcionando */
.opcion-tipo input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.opcion-tipo span {
    display: grid;
    gap: 0.2rem;
    width: 100%;
    padding: 0.85rem 1rem;
    text-align: center;
    background-color: var(--boton-vidrio);
    border: 1px solid var(--vidrio-borde);
    border-radius: 18px;
    line-height: 1.3;
    transition: background-color 0.2s;
}

.opcion-tipo small {
    font-size: 0.72rem;
}

.opcion-tipo:hover span {
    background-color: var(--boton-vidrio-hover);
}

.opcion-tipo input:checked + span,
.opcion-tipo.opcion-actual span {
    color: var(--activo-texto);
    background-color: var(--activo-fondo);
    border-color: transparent;
}

.opcion-tipo input:focus-visible + span {
    outline: 3px solid var(--texto);
    outline-offset: 2px;
}

/* ---------- Cuándo se repite un hábito ---------- */
.opciones-habito {
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--vidrio-borde);
    border-radius: 20px;
    background-color: rgba(127, 127, 127, 0.1);
}

.opciones-habito legend {
    padding: 0 0.4rem;
}

/* El selector de días de la semana (.dias-semana/.dia-opcion/.dia-casilla/.dia-letra) ahora vive en base.css:
   lo usa también «Comenzar hábito» en Perfil. */

/* Aviso en la repetición de un hábito */
/* Al guardar un cambio en una repetición de un hábito: ¿solo este día o todos los que faltan? */
.alcance-habito {
    display: grid;
    gap: 0.7rem;
    padding: 0.9rem 1.1rem;
    border: 1.5px solid var(--activo-fondo);
    border-radius: 16px;
    background-color: color-mix(in srgb, var(--activo-fondo) 12%, transparent);
}

.alcance-habito[hidden] {
    display: none;
}

.alcance-habito p {
    margin: 0;
}

.nota-habito {
    padding: 0.85rem 1.1rem;
    border: 1px dashed var(--vidrio-borde);
    border-radius: 16px;
    font-size: 0.85rem;
    line-height: 1.5;
}

.nota-habito a {
    color: var(--texto);
    font-weight: 700;
}

/* ---------- Opción con casilla (p. ej. "Permitir hacerlo con anticipación") ---------- */
.opcion-simple {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.9rem 1.1rem;
    background-color: var(--boton-vidrio);
    border: 1px solid var(--vidrio-borde);
    border-radius: 18px;
    cursor: pointer;
}

.opcion-simple:hover {
    background-color: var(--boton-vidrio-hover);
}

.opcion-simple span {
    display: grid;
    gap: 0.2rem;
    line-height: 1.35;
}

.opcion-simple small {
    font-size: 0.75rem;
}

/* ---------- Cristal interior ---------- */
/* Lo que va dentro del formulario lleva el mismo reflejo que las tarjetas; conserva su propio color de fondo. */
.opcion-tipo span,
.opcion-simple,
.aviso-reemplazo,
.receta-resultado {
    background-image: linear-gradient(160deg, var(--vidrio-brillo-1), var(--vidrio-brillo-2));
    box-shadow: inset 0 1px 0 var(--vidrio-luz);
}

/* ---------- Rutinas de ejercicio (Personal > Ejercicio) ---------- */
/* Las ilustraciones de los ejercicios de una rutina, en su orden: dos posiciones por ejercicio y su número */
.rutina-miniaturas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 0.8rem;
}

.rutina-mini {
    margin: 0;
    text-align: center;
}

.rutina-mini-imagenes {
    display: flex;
    gap: 2px;
}

.rutina-mini img {
    display: block;
    width: 3.1rem;
    height: 3.1rem;
    background-color: #d5e8f7;
    border-radius: 8px;
    object-fit: cover;
}

.rutina-mini figcaption {
    margin-top: 0.15rem;
    font-size: 0.7rem;
    font-weight: 700;
}

.rutina-cargada {
    display: grid;
    gap: 0.4rem;
    margin: 0;
}

.rutina-cargada figcaption {
    font-size: 0.75rem;
    line-height: 1.4;
}


/* En pantalla ancha el formulario corre en columnas: el título de una sección no se queda solo al final de una columna */
.seccion-pasos > h2,
.seccion-pasos > h3,
.guardar-receta > h3 {
    break-after: avoid;
}

/* En pantalla ancha el formulario corre en columnas: una tarjeta, un paso o una fila nunca se parte entre dos columnas
   (se pasa entera a la siguiente) */
.receta-resultado,
.paso,
.fila-cocina,
.aviso-reemplazo,
.rutina-cargada,
.opcion-simple {
    break-inside: avoid;
}

/* ---------- Recientes: lo último que guardaste, a un toque de cargarse en el formulario ---------- */
/* En pantallas angostas «Recientes» va arriba del formulario; desde 64rem pasa a la derecha y se queda a la vista al bajar. */
.con-recientes {
    overflow-x: clip;
    overflow-clip-margin: 2.5rem; /* que no se corte la sombra del cristal */
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    width: min(100% - 20px, 40rem);
    margin: 0.75rem auto 2rem;
}

.con-recientes > .contenido-formulario {
    width: 100%;
    margin: 0;
}

.recientes {
    order: -1;
    padding: 0.9rem 1rem;
}

.recientes[hidden] {
    display: none;
}

.recientes h2 {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.recientes-pestanas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.7rem;
}

.recientes-pestanas input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.recientes-pestanas label {
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--vidrio-borde);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    background: linear-gradient(160deg, var(--vidrio-brillo-1), var(--vidrio-brillo-2));
}

.recientes-pestanas input:checked + label {
    color: var(--activo-texto);
    background: var(--activo-fondo);
    border-color: transparent;
}

.recientes-pestanas input:focus-visible + label {
    outline: 3px solid var(--texto);
    outline-offset: 2px;
}

/* En pantallas angostas los recientes van en una fila que se desliza para no empujar el formulario hacia abajo */
.recientes-lista {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(13rem, 72%);
    gap: 0.45rem;
    margin: 0;
    padding: 0 0 0.35rem;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
}

.recientes-lista > li {
    scroll-snap-align: start;
    min-width: 0;
}

.reciente {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 0.5rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    color: var(--texto);
    text-align: left;
    font: inherit;
    cursor: pointer;
    background: linear-gradient(160deg, var(--vidrio-brillo-1), var(--vidrio-brillo-2));
    border: 1px solid var(--vidrio-borde);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 var(--vidrio-luz);
    transition: background-color 0.2s, border-color 0.2s;
}

.reciente:hover,
.reciente:focus-visible {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06));
    border-color: var(--texto);
}

.reciente-titulo {
    grid-column: 1;
    min-width: 0;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.reciente-cuando {
    grid-column: 2;
    grid-row: 1;
    font-size: 0.72rem;
    opacity: 0.8;
    white-space: nowrap;
}

.reciente-tipo {
    grid-row: 2;
    grid-column: 1 / -1;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.75;
}

.reciente-meta {
    grid-column: 1 / -1;
    font-size: 0.72rem;
    opacity: 0.8;
    overflow-wrap: anywhere;
}

.recientes-vacio {
    margin: 0;
    font-size: 0.8rem;
    opacity: 0.85;
}

/* En pantallas angostas la envoltura no existe: «Recientes» (arriba), el formulario y «Comenzar hábito» se ordenan como hijos directos */
.columna-lateral {
    display: contents;
}

@media (min-width: 64rem) {
    .con-recientes {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 21rem;
        overflow: visible; /* en dos columnas ya no hay listas que se salgan, y el recorte cortaba el brillo del lado izquierdo */
        align-items: start;
        gap: 1.25rem;
        width: min(100% - 3rem, 110rem);
    }

    .con-recientes:has(.recientes[hidden]) {
        grid-template-columns: minmax(0, 1fr);
    }

    .recientes-lista {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        padding: 0;
        overflow-x: visible;
    }

    .recientes {
        order: 0;
        max-height: 24rem;
        overflow-y: auto;
    }

    /* La columna de la derecha apila «Recientes» y «Comenzar hábito» (en pantallas angostas la envoltura no existe: cada uno ocupa su sitio de siempre) */
    .columna-lateral {
        display: grid;
        gap: 1.25rem;
        align-content: start;
        min-width: 0;
    }
}

/* ---------- Imagen de un paso de ejercicio ---------- */
.paso-con-imagen {
    grid-template-areas:
        "numero texto"
        ".      controles"
        ".      imagen"
        ".      descripcion";
}

.paso-con-junto.paso-con-imagen {
    grid-template-areas:
        "numero texto"
        ".      controles"
        ".      junto"
        ".      imagen"
        ".      descripcion";
}

.paso-imagen {
    grid-area: imagen;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    justify-self: start;
    max-width: 100%;
    padding: 0.3rem 0.6rem 0.3rem 0.3rem;
    text-align: left;
    border-radius: 14px;
}

.paso-imagen-mini {
    flex: none;
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 10px;
    background: var(--hueco);
}

.paso-imagen-vacia {
    display: grid;
    place-items: center;
    font-size: 1.05rem;
}

.paso-imagen-texto {
    min-width: 0;
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

.selector-imagen {
    width: min(100% - 2rem, 54rem);
    max-height: calc(100vh - 3rem);
    margin: auto;
    padding: 1.25rem 1.4rem 1rem;
    color: var(--texto);
    border: 1px solid var(--vidrio-borde);
    border-radius: 24px;
    background-color: var(--panel);
    background-image: linear-gradient(115deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 42%);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8), inset 0 1px 0 var(--vidrio-luz);
    overflow: hidden;
}

/* Cabecera y pie quietos; solo la lista de ejercicios se desplaza */
.selector-imagen[open] {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    height: calc(100vh - 3rem);
}

.selector-imagen-cabecera {
    grid-row: 1;
    display: grid;
    gap: 0.6rem;
    margin-bottom: 0.8rem;
}

.selector-imagen-cabecera .selector-imagen-titulo {
    margin: 0;
}

.selector-imagen-buscador {
    width: 100%;
}

.selector-imagen-grupos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.selector-imagen-grupo {
    padding: 0.3rem 0.8rem;
    color: var(--texto);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    background: linear-gradient(160deg, var(--vidrio-brillo-1), var(--vidrio-brillo-2));
    border: 1px solid var(--vidrio-borde);
    border-radius: 999px;
    transition: background-color 0.2s, border-color 0.2s;
}

.selector-imagen-grupo[aria-pressed="true"] {
    background: var(--activo-fondo);
    border-color: var(--activo-fondo);
}

.selector-imagen-vacio {
    grid-row: 2;
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
}

.selector-imagen-opcion[hidden] {
    display: none;
}

.selector-imagen::backdrop {
    background: rgba(0, 0, 0, 0.55);
}

.selector-imagen-titulo {
    margin: 0 0 0.8rem;
    font-size: 1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.selector-imagen-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 0.55rem;
    grid-row: 3;
    align-content: start;
    min-height: 0;
    padding: 0.2rem 0.2rem 0.4rem 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.selector-imagen-opcion {
    display: grid;
    justify-items: center;
    gap: 0.25rem;
    padding: 0.55rem 0.4rem;
    color: var(--texto);
    text-align: center;
    font: inherit;
    cursor: pointer;
    background: linear-gradient(160deg, var(--vidrio-brillo-1), var(--vidrio-brillo-2));
    border: 1px solid var(--vidrio-borde);
    border-radius: 14px;
    transition: border-color 0.2s, background-color 0.2s;
}

.selector-imagen-opcion:hover,
.selector-imagen-opcion:focus-visible {
    border-color: var(--texto);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06));
}

.selector-imagen-opcion img,
.selector-imagen-sin {
    width: 5.5rem;
    height: 5.5rem;
    object-fit: cover;
    border-radius: 12px;
    background: var(--hueco);
}

.selector-imagen-sin {
    display: grid;
    place-items: center;
    font-size: 2rem;
}

.selector-imagen-opcion strong {
    font-size: 0.78rem;
}

.selector-imagen-opcion small {
    font-size: 0.66rem;
    opacity: 0.8;
}

.selector-imagen-pie {
    grid-row: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.9rem;
}

/* Desplegable al escribir un ingrediente o un equipo (scripts/autocompletar.js) */
.autocompletar {
    position: fixed;
    z-index: 60;
    max-height: 14rem;
    margin: 0;
    padding: 0.3rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
    color: var(--texto);
    background-color: var(--panel);
    background-image: linear-gradient(160deg, var(--vidrio-brillo-1), var(--vidrio-brillo-2));
    border: 1px solid var(--vidrio-borde);
    border-radius: 14px;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.7), inset 0 1px 0 var(--vidrio-luz);
}

.autocompletar[hidden] {
    display: none;
}

.autocompletar-opcion {
    padding: 0.5rem 0.7rem;
    font-size: 0.85rem;
    cursor: pointer;
    border-radius: 10px;
}

.autocompletar-opcion:hover,
.autocompletar-opcion[aria-selected="true"] {
    background: color-mix(in srgb, var(--activo-fondo) 40%, transparent);
}

/* ---------- Personal > Comer: lo cocinado y las otras cosas que se van a comer (scripts/comer-formulario.js) ---------- */
.platos-cocinados,
.comidas-libres {
    display: grid;
    gap: 0.6rem;
    margin: 0 0 0.8rem;
    padding: 0;
    list-style: none;
}

.plato-cocinado {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    column-gap: 0.75rem;
    row-gap: 0.5rem;
    align-items: center;
    padding: 0.7rem;
    background-color: var(--boton-vidrio);
    border: 1px solid var(--vidrio-borde);
    border-radius: 16px;
    break-inside: avoid;
}

.plato-cocinado-icono {
    width: 2.75rem;
    height: 2.75rem;
    object-fit: cover;
    border-radius: 10px;
}

.plato-cocinado-texto {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.plato-cocinado-campo {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.plato-cocinado-porciones {
    width: 5.5rem;
}

.comida-libre {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.5rem 0.5rem 0.85rem;
    background-color: var(--boton-vidrio);
    border: 1px solid var(--vidrio-borde);
    border-radius: 14px;
}

.comida-libre-nombre {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.comida-libre-gramos {
    flex: none;
    font-variant-numeric: tabular-nums;
    opacity: 0.8;
}

.porciones-receta {
    max-width: 14rem;
}

/* ---------- Comenzar hábito ---------- */
#ch-pedir {
    min-height: 2.5rem;
    padding: 0.35rem 1.1rem;
    border-radius: 999px;
}

#ch-cupo,
#ch-estado {
    margin: 0;
}

#ch-cupo.error,
#ch-estado.error {
    color: var(--alta);
    font-weight: 700;
}

.ch-plan {
    display: grid;
    gap: 0.8rem;
}

.ch-plan-titulo {
    margin: 0;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ch-etapas {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: etapa;
}

.ch-etapas li {
    position: relative;
    padding: 0.7rem 0.9rem 0.7rem 2.6rem;
    font-size: 0.88rem;
    background: var(--boton-vidrio);
    background-image: linear-gradient(160deg, var(--vidrio-brillo-1), var(--vidrio-brillo-2));
    border: 1px solid var(--vidrio-borde);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 var(--vidrio-luz);
}

.ch-etapas li::before {
    counter-increment: etapa;
    content: counter(etapa);
    position: absolute;
    top: 0.55rem;
    left: 0.8rem;
    display: grid;
    place-items: center;
    width: 1.3rem;
    height: 1.3rem;
    color: var(--activo-texto);
    background: var(--activo-fondo);
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
}

.comenzar-habito {
    display: grid;
    gap: 0.9rem;
    padding: 1.1rem;
}

.comenzar-habito .ayuda {
    font-size: 0.75rem;
    line-height: 1.4;
}

.comenzar-habito > .btn {
    justify-self: start;
}

/* ---------- Dentro del cuadro del calendario (?incrustado=1, navegacion-previa.js): solo el formulario, sin marco propio ---------- */
html.incrustado,
html.incrustado body {
    background: none;
    background-color: transparent;
}

html.incrustado body {
    padding-bottom: 0;
}

html.incrustado::before,
html.incrustado::after,
html.incrustado body::before,
html.incrustado .barra-nav,
html.incrustado .menu-cuenta,
html.incrustado .cabecera,
html.incrustado .recientes,
html.incrustado #grupo-tipo {
    display: none;
}

html.incrustado .con-recientes,
html.incrustado .con-recientes > .contenido-formulario,
html.incrustado .contenido-formulario {
    display: block;
    width: auto;
    margin: 0;
    overflow: visible;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

html.incrustado .contenido-formulario {
    padding: 0.9rem 1rem 1.2rem;
}

html.incrustado .contenido-formulario::before {
    display: none;
}