/* ==========================================================================
   Ancho completo (Antonio, 24-oct-2026)

   «Que todo use ancho completo, haz la interfaz más visual y profesional.»

   Con el menú arriba, #main-content se quedó con margin: auto a los dos lados.
   Es un hijo de un contenedor flex en columna, y ahí el margen automático lo
   encoge al ancho de lo que lleva dentro: por eso todo salía en una caja
   estrecha y centrada con hueco blanco a los lados. Aquí el contenido vuelve a
   ir de lado a lado, con un margen lateral fijo, y cada pantalla reparte sus
   columnas según el ancho.

   Solo maquetación: mismas clases, mismos colores y variables de
   apple-theme.css y del menú de arriba. Va la última de las hojas.
   ========================================================================== */

:root {
    --ac-gutter: 16px;
    --ac-gap: 16px;
    --ac-card-radius: 18px;
    --ac-card-border: 1px solid rgba(0, 0, 0, 0.06);
    --ac-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
@media (min-width: 768px) { :root { --ac-gutter: 24px; --ac-gap: 20px; } }
@media (min-width: 1280px) { :root { --ac-gutter: 32px; --ac-gap: 24px; } }
@media (min-width: 1680px) { :root { --ac-gutter: 40px; } }

/* ── El lienzo: de lado a lado ─────────────────────────────────────────── */
@media (min-width: 768px) {
    #main-content,
    #main-content:has(.page.active) {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        align-self: stretch;
    }
    #main-content > .page {
        max-width: none !important;
        padding: 28px var(--ac-gutter) 48px !important;
    }
}
/* La cabecera con el mismo margen lateral que el contenido. */
@media (min-width: 1024px) {
    #app-header { padding-left: var(--ac-gutter) !important; padding-right: var(--ac-gutter) !important; }
}
/* En el móvil, sin scroll horizontal pase lo que pase. */
@media (max-width: 767px) {
    #main-content > .page { padding-left: var(--ac-gutter); padding-right: var(--ac-gutter); }
}

/* Números que se alinean al cambiar (kcal, kg, contadores). */
.nt-hero-kcal, .nt-macro-vals, .nt-meal-kcal, .nt-entry-kcal, .nt-history-avg-val,
.nt-history-rows, .nt-balance-meta, .nt-aside-list,
#page-weight, .cons-tira-num, .cons-anillo-txt, .baraja-banda, .ap-table-wrap {
    font-variant-numeric: tabular-nums;
}

/* Cabeceras de pantalla (Rutinas, Recetas, Consulta, Herramientas IA): más
   bajas y del mismo alto en todas, para que el contenido suba. */
@media (min-width: 768px) {
    #main-content .rt-hero,
    #main-content .rec-hero,
    #main-content .cons-hero {
        padding: 14px 18px;
        margin-bottom: 16px;
        gap: 14px;
    }
    #main-content .rt-hero-icon,
    #main-content .rec-hero-icon,
    #main-content .cons-hero-icon { width: 44px; height: 44px; border-radius: 12px; }
    #main-content .rt-hero-text h2,
    #main-content .rec-hero-text h2,
    #main-content .cons-hero .calc-hero-text h2 { font-size: 19px; margin-bottom: 2px; }
}

/* ==========================================================================
   DIARIO
   ========================================================================== */

/* Las comidas se pintan antes de que lleguen los datos (js/nutritracker.js):
   mientras tanto, las kcal en gris y sin el «Aún no has apuntado nada». */
#nt-meals.is-cargando .nt-meal-kcal { opacity: .35; }
#nt-meals.is-cargando .nt-meal-vacio { visibility: hidden; }
.nt-meal-vacio {
    margin: 2px 0 10px;
    font-size: 13px;
    color: var(--text-tertiary);
}

/* Cabecera de cada comida: punto, nombre, hora… y a la derecha las kcal y
   el botón de copiar (antes flotaba en medio de la fila). */
.nt-meal-header .nt-meal-kcal { margin-left: auto; font-variant-numeric: tabular-nums; }
.nt-meal-header .nt-meal-copy-btn { order: 10; margin-left: 4px; }

/* Los filtros de kcal de «Sugerencias de recetas», sin cortes: bajan de
   línea si no caben. */
.nt-aside-tabs {
    flex-wrap: wrap !important;
    overflow: visible !important;
    row-gap: 6px !important;
}

@media (min-width: 1024px) {
    #page-nutritracker .nt-layout { gap: var(--ac-gap); }
    #page-nutritracker .nt-meal-card {
        border: var(--ac-card-border) !important;
        border-radius: var(--ac-card-radius) !important;
        box-shadow: var(--ac-card-shadow) !important;
        margin-bottom: 0 !important;
    }
    #nt-meals { display: grid; gap: 14px; }
    /* #main-content es quien hace scroll, así que el «pegajoso» se mide desde
       su borde de arriba: con 88 px, el resumen bajaba medio hueco. */
    #page-nutritracker .nt-col-summary,
    #page-nutritracker .nt-aside { top: 16px !important; }
}
@media (min-width: 1280px) {
    #page-nutritracker .nt-layout {
        grid-template-columns: minmax(300px, 340px) minmax(0, 1fr) minmax(340px, 400px) !important;
        gap: var(--ac-gap) !important;
    }
}
/* Pantallas anchas: las cinco comidas en dos columnas en vez de una tira
   larga con medio metro de aire a cada lado. */
@media (min-width: 1600px) {
    #nt-meals { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    #page-nutritracker .nt-layout {
        grid-template-columns: 360px minmax(0, 1fr) 420px !important;
    }
}

/* ==========================================================================
   MEDIDAS
   ========================================================================== */

/* «Sábado, 24 de octubre»: solo la primera letra en mayúscula (el
   capitalize de antes ponía «24 De Octubre»). */
.wqa-date { text-transform: none !important; }
.wqa-date::first-letter { text-transform: uppercase; }

/* El número del peso, grande y entero (otra hoja le ponía borde y lo
   recortaba a «7(»). */
#page-weight .wqa-peso input {
    width: 5.2ch !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    font-size: 44px !important;
}

@media (min-width: 1024px) {
    /* Una sola rejilla para toda la pantalla: las cajas de dentro
       (.weight-layout, la columna y el lateral) dejan de ser cajas. */
    #page-weight.active {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "hoy      resumen"
            "hoy      logros"
            "grafica  grafica"
            "semanal  salud"
            "semanal  medidas"
            "tabs     tabs"
            "lista    lista";
        gap: var(--ac-gap);
        align-items: start;
    }
    #page-weight .weight-layout,
    #page-weight .weight-col-main,
    #page-weight .weight-aside { display: contents !important; }

    #page-weight .weight-quick-add-full { grid-area: hoy; max-width: none !important; margin: 0 !important; align-self: stretch; }
    #page-weight .weight-summary      { grid-area: resumen; margin: 0 !important; }
    #page-weight #weight-gamification { grid-area: logros; }
    #page-weight #weight-gamification:empty { display: none; }
    #page-weight .chart-container     { grid-area: grafica; margin: 0 !important; }
    #page-weight .tabs                { grid-area: tabs; margin: 0 !important; max-width: 420px; }
    #page-weight .tab-content         { grid-area: lista; }
    #page-weight .weekly-avg-card     { grid-area: semanal; margin: 0 !important; }
    #page-weight .health-metrics-card { grid-area: salud; margin: 0 !important; }
    #page-weight .measures-chart-card { grid-area: medidas; margin: 0 !important; }
    #page-weight .fab { grid-area: auto; }

    #page-weight .weight-quick-add-full,
    #page-weight .weight-summary,
    #page-weight .chart-container,
    #page-weight .weekly-avg-card,
    #page-weight .health-metrics-card,
    #page-weight .measures-chart-card,
    #page-weight #weight-gamification > * {
        border: var(--ac-card-border) !important;
        border-radius: var(--ac-card-radius) !important;
        box-shadow: var(--ac-card-shadow) !important;
        background: var(--bg-card);
    }
    #page-weight .weight-summary { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 120px; }
    #page-weight #weight-gamification > * { margin: 0 !important; }

    /* El registro de hoy, ordenado de arriba abajo y con un Guardar de
       tamaño normal (antes una barra negra de 400 px). */
    #page-weight .weight-quick-add-full { display: flex; flex-direction: column; }
    #page-weight .wqa-guardar {
        align-self: center;
        width: auto !important;
        min-width: 180px;
        min-height: 44px !important;
        padding: 0 28px !important;
        font-size: 15px !important;
    }

    /* El historial, en rejilla de fichas en vez de filas de lado a lado. */
    #page-weight #weight-history,
    #page-weight #measures-history {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 10px;
    }
    #page-weight .history-item { margin: 0 !important; padding: 12px 14px; gap: 10px; }
    #page-weight .history-value { font-variant-numeric: tabular-nums; }
}
@media (min-width: 1280px) {
    #page-weight.active {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(340px, 400px);
        grid-template-areas:
            "hoy      resumen  salud"
            "hoy      logros   salud"
            "grafica  grafica  semanal"
            "tabs     tabs     semanal"
            "lista    lista    semanal"
            "lista    lista    medidas"
            "lista    lista    .";
        grid-template-rows: auto auto auto auto auto auto 1fr;
    }
}
@media (min-width: 1680px) {
    #page-weight.active {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(380px, 440px);
    }
}

/* En el móvil, el Guardar sigue a todo el ancho (es para el pulgar). */

/* ==========================================================================
   CONSULTA
   ========================================================================== */

/* «Subir mi menú», siempre arriba; con menú, en una fila discreta. */
.cons-subir-mini {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 14px;
    border: 1px solid #CFE3D8; border-radius: 16px; background: #F6FBF8;
    font-size: 14px; line-height: 1.4; color: var(--text);
}
.cons-subir-mini > span:nth-child(2) { flex: 1 1 220px; min-width: 0; }
.cons-subir-mini-icono {
    flex: none; width: 36px; height: 36px; border-radius: 10px;
    display: grid; place-items: center; background: #E4F2EA; color: #2F6B52;
}
.cons-subir-mini .cons-subir-otra {
    flex: none;
    min-height: 38px; padding: 0 16px;
    border: 1px solid #4A8B6F; border-radius: 999px;
    background: #fff; color: #2F6B52;
    font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.cons-subir-mini .cons-subir-otra:hover { background: #4A8B6F; color: #fff; }

/* «⇆ 3 alternativas»: que se vea que el plato se puede cambiar. */
.cons-est-cambiar {
    border-color: #BFDCCD !important;
    background: #F4FAF6 !important;
    color: #2F6B52 !important;
}
.cons-est-cambiar:hover { background: #E4F2EA !important; border-color: #4A8B6F !important; }

@media (min-width: 768px) {
    #page-consulta .calc-group { margin-bottom: 18px; }
    #page-consulta .calc-group-title { margin-bottom: 10px; }

    /* Fechas del menú, más compactas. */
    #page-consulta .cons-fechas { gap: 6px; margin-bottom: 12px; }
    #page-consulta .cons-fecha { padding: 6px 12px; min-height: 0; }

    /* Las comidas del día en tarjetas: la foto grande arriba, el nombre, los
       ingredientes, «Ver receta completa» y los tres botones dentro. */
    #page-consulta .cons-dia-card {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: var(--ac-gap);
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    /* En pantallas anchas, todas las comidas del día en una fila. */
    #page-consulta .cons-dia-titulo,
    #page-consulta .cons-dia-vacio { grid-column: 1 / -1; margin: 0; }
    #page-consulta .cons-comida {
        position: relative;
        display: flex; flex-direction: column;
        padding: 0 0 14px;
        border: var(--ac-card-border) !important;
        border-radius: var(--ac-card-radius);
        background: var(--bg-card);
        box-shadow: var(--ac-card-shadow);
        overflow: hidden;
    }
    #page-consulta .cons-comida-fila { display: block; }
    #page-consulta .cons-comida-abrir {
        flex-direction: column; align-items: stretch; gap: 0;
    }
    #page-consulta .cons-comida-foto {
        order: -1;
        width: 100% !important; height: auto !important;
        aspect-ratio: 4 / 3;
        border-radius: 0;
    }
    #page-consulta .cons-comida-txt { padding: 12px 16px 0; }
    #page-consulta .cons-comida-flecha {
        position: absolute; right: 16px; bottom: auto; margin: 0;
        top: calc(100% + 20px);
    }
    #page-consulta .cons-comida-abrir { position: relative; }
    #page-consulta .cons-comida-det { padding: 8px 16px 0; }
    #page-consulta .cons-comida-receta { margin: 8px 16px 0; align-self: flex-start; }
    #page-consulta .cons-comida-botones {
        margin: auto 16px 0; padding-top: 12px; gap: 6px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #page-consulta .cons-comida-botones .cons-est-cambiar { grid-column: 1 / -1; }
    #page-consulta .cons-est { min-height: 36px; font-size: 12.5px; border-radius: 10px; }
    #page-consulta .cons-comida-nombre { font-size: 16px; }

    /* La fila de días, del mismo ancho que la rejilla. */
    #page-consulta .cons-tira { gap: 8px; margin: 12px 0 16px; }

    /* Acciones y «Tu semana», en una fila debajo. */
    #page-consulta #cons-plan-cuerpo {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
        column-gap: var(--ac-gap);
        align-items: start;
    }
    #page-consulta #cons-plan-cuerpo > * { grid-column: 1 / -1; }
    #page-consulta #cons-plan-cuerpo > .cons-acciones { grid-column: 1; margin: 18px 0 0; }
    #page-consulta #cons-plan-cuerpo > .cons-progreso { grid-column: 2; margin: 18px 0 0; }
    #page-consulta #cons-plan-cuerpo > .cons-semana-toda { margin-top: 18px; }
}
/* Sin foto, la tarjeta empieza en el texto. */
@media (min-width: 768px) {
    #page-consulta .cons-comida-abrir:not(:has(.cons-comida-foto)) .cons-comida-flecha { top: 18px; }
    #page-consulta .cons-comida-abrir:has(.cons-comida-foto) .cons-comida-flecha { display: none; }
}


/* Consulta: según cuántas comidas trae el día, todas en una fila (la
   primera hija es el título, por eso el +1). */
@media (min-width: 1280px) {
    #page-consulta .cons-dia-card:has(> .cons-comida:nth-child(4)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #page-consulta .cons-dia-card:has(> .cons-comida:nth-child(5)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    #page-consulta .cons-dia-card:has(> .cons-comida:nth-child(6)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    #page-consulta .cons-dia-card:has(> .cons-comida:nth-child(7)) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    #page-consulta .cons-dia-card:has(> .cons-comida:nth-child(8)) { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* ==========================================================================
   RECETAS
   ========================================================================== */
@media (min-width: 1280px) {
    #page-recetas-video .recvid-grid:not(.recvid-grid-compact) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--ac-gap);
    }
    #page-recetas-video .recvid-card { grid-template-columns: 260px 1fr; }
    #page-recetas-video .recvid-video { min-height: 460px; }
    #page-recetas-video .recvid-grid.recvid-grid-compact {
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        gap: var(--ac-gap);
    }
}
@media (min-width: 1800px) {
    #page-recetas-video .recvid-grid:not(.recvid-grid-compact) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #page-recetas-video .recvid-card { grid-template-columns: 1fr; }
    #page-recetas-video .recvid-video { aspect-ratio: 16 / 10; min-height: 0; height: auto; }
}
#page-recetas-video .recvid-filters { row-gap: 8px; }
#page-recetas-video .recvid-count { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   RUTINAS (Antonio: «esto es una chapuza, ponlo bonito»)
   ========================================================================== */
@media (min-width: 1024px) {
    #page-rutinas.active {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(300px, auto);
        column-gap: var(--ac-gap);
        align-items: stretch;
    }
    #page-rutinas > * { grid-column: 1 / -1; }
    #page-rutinas > .rt-hero { grid-column: 1; margin-bottom: 16px !important; }
    #page-rutinas > .rt-wizard-cta { grid-column: 2; margin-bottom: 16px; width: auto; }
}
.rt-wizard-cta { padding: 12px 18px; }
.rt-level-filter { margin-bottom: 8px; }

.rt-equipment-grid { display: block !important; }
.rt-group { margin-top: 26px; }
.rt-group:first-child { margin-top: 10px; }
.rt-group-title {
    display: flex; align-items: baseline; gap: 10px;
    margin: 0 0 12px !important;
    font-size: 13px; letter-spacing: .06em;
}
.rt-group-n {
    font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none;
    color: var(--text-tertiary);
}
.rt-group-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 640px)  { .rt-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ac-gap); } }
@media (min-width: 1100px) { .rt-group-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .rt-group-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Cada tarjeta: arriba una franja de su color con el icono grande, debajo
   el nombre y los niveles como botones compactos con su punto. */
.rt-equipment-card {
    display: flex; flex-direction: column;
    padding: 0 !important;
    overflow: hidden;
    border: var(--ac-card-border) !important;
    border-radius: var(--ac-card-radius) !important;
    box-shadow: var(--ac-card-shadow) !important;
}
.rt-equipment-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, .07) !important; }
.rt-equipment-header {
    flex-direction: column; align-items: stretch; gap: 0 !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important;
}
.rt-equipment-header .rt-equipment-icon {
    position: relative;
    width: 100% !important; height: 104px !important;
    border-radius: 0 !important;
    overflow: hidden;
}
/* Dos círculos de su color detrás del icono: le dan cuerpo sin imágenes. */
.rt-equipment-header .rt-equipment-icon::before,
.rt-equipment-header .rt-equipment-icon::after {
    content: ""; position: absolute; border-radius: 50%;
    background: var(--rt-c, currentColor); opacity: .08;
}
.rt-equipment-header .rt-equipment-icon::before { width: 150px; height: 150px; right: -40px; top: -50px; }
.rt-equipment-header .rt-equipment-icon::after  { width: 90px; height: 90px; left: -24px; bottom: -40px; }
.rt-equipment-header .rt-equipment-icon svg {
    position: relative; z-index: 1;
    width: 48px; height: 48px;
    padding: 12px; box-sizing: content-box;
    border-radius: 18px; background: rgba(255, 255, 255, .85);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}
.rt-equipment-info { padding: 14px 16px 4px; }
.rt-equipment-info strong { font-size: 16px; }
.rt-equipment-info span { display: block; margin-top: 2px; font-size: 13px; }
.rt-levels {
    flex-direction: row !important; flex-wrap: wrap;
    gap: 6px !important;
    padding: 10px 16px 16px;
    margin-top: auto;
}
.rt-level-card {
    flex: 1 1 0;
    justify-content: center;
    gap: 6px !important;
    min-height: 38px;
    padding: 6px 10px !important;
    border: 1px solid rgba(0, 0, 0, .08) !important;
    border-radius: 999px !important;
    background: #fff !important;
    white-space: nowrap;
}
.rt-level-card:hover { border-color: var(--rt-c, #1d1d1f) !important; background: var(--rt-bg, #f5f5f7) !important; transform: none !important; }
.rt-level-card .rt-dot { width: 8px !important; height: 8px !important; }
.rt-level-card .rt-level-info { flex: 0 1 auto; }
.rt-level-card .rt-level-info strong { font-size: 13px; font-weight: 700; }
.rt-level-card .rt-level-info span,
.rt-level-card > svg { display: none; }
/* En el móvil, los niveles en lista con su frase (se tocan con el pulgar). */
@media (max-width: 479px) {
    .rt-equipment-header .rt-equipment-icon { height: 84px !important; }
    .rt-equipment-header .rt-equipment-icon svg { width: 36px; height: 36px; padding: 10px; }
    .rt-levels { flex-direction: column !important; }
    .rt-level-card { justify-content: flex-start; border-radius: 12px !important; min-height: 44px; }
    .rt-level-card .rt-level-info { flex: 1; }
    .rt-level-card .rt-level-info span { display: block; }
    .rt-level-card > svg { display: block; margin-left: auto; }
}

/* ==========================================================================
   HERRAMIENTAS IA (el hub de escáneres)
   ========================================================================== */
@media (min-width: 768px) {
    #page-scanner .scanner-hub { padding: 0; }
    #page-scanner .scanner-hub-header {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        column-gap: 14px;
        align-items: center;
        text-align: left;
        padding: 14px 18px;
        margin-bottom: 16px;
        border: 1px solid #FFE680;
        border-radius: var(--radius);
        background: linear-gradient(135deg, #FFFCEB 0%, #FFF5CC 100%);
    }
    #page-scanner .scanner-hub-icon {
        grid-row: 1 / 3;
        width: 44px; height: 44px; margin: 0; border-radius: 12px;
        background: #1d1d1f;
    }
    #page-scanner .scanner-hub-icon svg { width: 26px; height: 26px; stroke: #FFCC00; }
    #page-scanner .scanner-hub-header h3 { margin: 0 0 2px; font-size: 19px; }
    #page-scanner .scanner-hub-header p { margin: 0; font-size: 13px; }
    #page-scanner .scanner-hub-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: var(--ac-gap) !important;
        padding: 0 !important;
    }
    #page-scanner .scanner-hub-card {
        min-height: 150px;
        border: var(--ac-card-border) !important;
        border-radius: var(--ac-card-radius) !important;
        box-shadow: var(--ac-card-shadow) !important;
    }
    #page-scanner .scanner-hub-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, .07) !important; }
}
@media (min-width: 1100px) {
    #page-scanner .scanner-hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* ==========================================================================
   MI BARAJA
   ========================================================================== */
#page-baraja .baraja-cab { padding: 14px 18px; margin-bottom: 14px; }
#page-baraja .baraja-aviso { margin-top: 6px; }
@media (min-width: 1024px) {
    #page-baraja .baraja-cab {
        display: grid;
        grid-template-columns: minmax(220px, 360px) 1fr;
        align-items: center;
        column-gap: 24px;
    }
    #page-baraja .baraja-cab .baraja-aviso { margin: 0; }
    #page-baraja .baraja-todas { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; }
    #page-baraja .baraja-todas > .baraja-rejilla { flex-basis: 100%; }
    #page-baraja .baraja-pestanas,
    #page-baraja .baraja-resumen-palos { margin-bottom: 14px; }
    #page-baraja .baraja-todas > .baraja-buscar { width: 280px; margin-left: auto; }
    /* 13 cartas por fila (Antonio, 24-oct-2026: «vamos a probar a meter las
       13 cartas por fila»): cada palo, una fila (sin jokers desde el 25-oct-2026). */
    #page-baraja .baraja-todas > .baraja-rejilla { grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 16px 8px; }
    #page-baraja .baraja-todas > .baraja-rejilla .baraja-pie { font-size: 11.5px; line-height: 1.3; }
}
/* Más columnas cuanto más ancho, sin huecos entre palos. */
@media (min-width: 1600px) {
    #page-baraja .baraja-rejilla { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 18px 14px; }
}

/* «¿De qué va Mi baraja?»: seis viñetas del monigote. */
.baraja-explicacion {
    margin: 0 0 16px;
    padding: 14px 16px 16px;
    border: var(--ac-card-border);
    border-radius: var(--ac-card-radius);
    background: #FFFDF7;
}
.baraja-explicacion-cab { display: flex; align-items: center; gap: 12px; }
.baraja-explicacion-cab h3 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
.baraja-explicacion-btn {
    margin-left: auto;
    min-height: 34px; padding: 0 14px;
    border: 1px solid rgba(0, 0, 0, .12); border-radius: 999px;
    background: #fff; color: var(--text);
    font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.baraja-explicacion-btn:hover { border-color: #1d1d1f; }
.baraja-explicacion.is-plegada { padding-bottom: 14px; }
.baraja-explicacion.is-plegada .baraja-vinetas { display: none; }
.baraja-vinetas {
    list-style: none; margin: 14px 0 0; padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(200px, 72%);
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}
.baraja-vinetas::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .baraja-vinetas { grid-auto-columns: minmax(200px, 40%); } }
@media (min-width: 1024px) {
    .baraja-vinetas { grid-auto-flow: row; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: visible; }
}
.baraja-vineta { scroll-snap-align: start; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.baraja-vineta-marco {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 5;
    display: flex; align-items: center; justify-content: center;
    padding: 18px;
    border: 2px dashed #E5DCC3;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
}
.baraja-vineta-marco img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.baraja-vineta-marco.con-imagen { border-style: solid; border-color: transparent; padding: 0; aspect-ratio: 4 / 5; background: #fff; overflow: hidden; }
.baraja-vineta-marco.con-imagen img { object-fit: contain; object-position: top; }
/* Lo que dice cada paso, como etiqueta dentro de la viñeta, abajo (Antonio,
   24-oct-2026: «los mensajes que pones debajo de cada monigote mételo como
   etiqueta dentro»). Sin imagen, el texto grande ya lo dice el bocadillo. */
.baraja-vineta-etiqueta {
    position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 1;
    display: flex; flex-direction: column; gap: 3px;
    padding: 8px 10px; border-radius: 12px;
    background: rgba(255, 255, 255, 0.94); border: 1.5px solid #1d1d1f;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    text-align: left;
}
.baraja-vineta-etiqueta b { font-size: 13px; font-weight: 800; line-height: 1.25; color: #1d1d1f; }
.baraja-vineta-marco:not(.con-imagen) .baraja-vineta-etiqueta { position: static; margin-top: 10px; background: none; border: 0; box-shadow: none; padding: 0; }
.baraja-vineta-marco:not(.con-imagen) .baraja-vineta-etiqueta b { display: none; }
.baraja-vineta-marco:not(.con-imagen) .baraja-vineta-etiqueta:not(:has(> span)) { display: none; }
/* Con la imagen puesta, el bocadillo ya va dibujado: el texto queda para el
   lector de pantalla (y como alt de la imagen). */
.baraja-vineta-marco.con-imagen .baraja-vineta-bocadillo {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
.baraja-vineta-bocadillo {
    position: relative;
    padding: 12px 14px;
    border: 2px solid #1d1d1f;
    border-radius: 16px;
    background: #fff;
    font-size: 15px; font-weight: 700; line-height: 1.35;
    color: #1d1d1f; text-align: center;
}
.baraja-vineta-bocadillo::after {
    content: ""; position: absolute; left: 28px; bottom: -10px;
    width: 16px; height: 16px; background: #fff;
    border-right: 2px solid #1d1d1f; border-bottom: 2px solid #1d1d1f;
    transform: rotate(45deg);
}
.baraja-vineta-n {
    position: absolute; top: 10px; left: 10px;
    width: 24px; height: 24px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--naipe-negro, #111); color: var(--naipe-amarillo, #F7C52B);
    font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.baraja-vineta-marco.con-imagen .baraja-vineta-n { z-index: 1; }
.baraja-vineta-sub { margin: 0; font-size: 11.5px; line-height: 1.35; color: #4a4a4f; }
.baraja-vineta-palos { margin: 0; padding: 0; display: grid; gap: 1px; font-size: 11px; line-height: 1.3; color: #4a4a4f; }
.baraja-vineta-palos i { font-style: normal; display: inline-block; width: 1.1em; text-align: center; color: var(--naipe-negro, #111); }
.baraja-vineta-palos i.is-rojo { color: var(--naipe-rojo, #C8102E); }

/* ==========================================================================
   PACIENTES (admin)
   ========================================================================== */
@media (min-width: 768px) {
    #page-admin-pacientes .ap-toolbar { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
    #page-admin-pacientes .ap-toolbar input { margin-left: auto; }
    #page-admin-pacientes .ap-table-wrap {
        border: var(--ac-card-border);
        border-radius: var(--ac-card-radius);
        background: var(--bg-card);
        overflow-x: auto;
    }
    #page-admin-pacientes .ap-grid { gap: var(--ac-gap); }
}

/* ==========================================================================
   AJUSTES (page-profile)
   ========================================================================== */
#page-profile .profile-header {
    display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
}
#page-profile .profile-quien h3 { margin: 0; }
#page-profile .profile-quien p { margin: 2px 0 0; }
#page-profile .profile-grid { display: grid; gap: 14px; }
#page-profile .profile-section {
    position: relative; margin: 0 !important;
    display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-content: start;
}
#page-profile .profile-section > * { grid-column: 1 / -1; }
#page-profile .profile-section > .profile-icono { grid-column: 1; grid-row: 1 / 3; }
#page-profile .profile-section > h4,
#page-profile .profile-section > .profile-ayuda { grid-column: 2; }
#page-profile .profile-section > h4 { margin: 0 0 2px; align-self: end; }
#page-profile .profile-icono {
    width: 36px; height: 36px; border-radius: 10px;
    display: grid; place-items: center;
    background: var(--brand-yellow-soft, #FFF5CC); color: #1d1d1f;
}
#page-profile .profile-ayuda { margin: 0 0 12px; font-size: 13px; line-height: 1.45; color: var(--text-secondary); }
#page-profile .profile-fila { display: flex; gap: 8px; margin-top: auto; }
#page-profile .profile-fila select { flex: 1; min-width: 0; margin: 0; }
#page-profile .profile-btn { flex: none; width: auto; min-height: 44px; padding: 0 20px; font-size: 15px; }
#page-profile .hide-numbers-toggle { clear: both; }
#page-profile .export-grid {
    clear: both;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}
#page-profile .export-btn {
    display: flex; align-items: center; gap: 10px;
    min-height: 48px; padding: 8px 12px;
    border: 1px solid rgba(0, 0, 0, .1); border-radius: 12px;
    background: #fff; color: var(--text);
    font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer;
    transition: border-color .15s, background .15s;
}
#page-profile .export-btn:hover { border-color: #1d1d1f; background: #fafafa; }
#page-profile .export-btn svg { flex: none; color: #6e6e73; }
#page-profile .export-btn span { flex: 1; min-width: 0; line-height: 1.25; }
#page-profile .export-btn small { flex: none; font-size: 11px; font-weight: 700; color: var(--text-tertiary); letter-spacing: .04em; }
#page-profile .profile-pie { display: flex; justify-content: center; margin-top: 18px; }
#page-profile .profile-logout {
    display: inline-flex; align-items: center; gap: 8px;
    width: auto !important; min-height: 40px; padding: 0 18px !important;
    border: 1px solid rgba(0, 0, 0, .12) !important; border-radius: 999px !important;
    background: transparent !important; color: var(--text-secondary) !important;
    font-size: 14px !important; font-weight: 600 !important; box-shadow: none !important;
}
#page-profile .profile-logout:hover { color: #b91c1c !important; border-color: #fecaca !important; background: #fef2f2 !important; }

@media (min-width: 1024px) {
    #page-profile .profile-header {
        flex-direction: row; text-align: left; gap: 18px;
        padding: 20px 24px;
        margin-bottom: var(--ac-gap);
    }
    #page-profile .profile-header .profile-avatar { margin: 0; width: 72px; height: 72px; }
    #page-profile .profile-quien { flex: 1; min-width: 0; }
    #page-profile .profile-header .avatar-acciones { margin: 0; }
    #page-profile .profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ac-gap); }
    #page-profile .profile-datos { grid-column: 1 / -1; }
    #page-profile .export-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    #page-profile .profile-pie { justify-content: flex-end; }
}
#page-profile .profile-header,
#page-profile .profile-section {
    border: var(--ac-card-border);
    border-radius: var(--ac-card-radius);
    box-shadow: var(--ac-card-shadow);
}

/* ==========================================================================
   CONSULTA, MÁS COMPACTA (Antonio, 25-oct-2026: «que todo esto esté más
   compacto. optimiza»). Cabecera, «Revisar como», «¿Te han dado otro menú?»,
   las fechas, el título del menú, los botones y «Tu semana» ocupan menos alto;
   el menú sube.
   ========================================================================== */
#page-consulta .calc-group { margin-bottom: 12px; }
#page-consulta .calc-group-title { margin: 0 0 6px; font-size: 11px; }
#page-consulta .cons-hero { padding: 10px 14px; margin-bottom: 10px; gap: 12px; }
#page-consulta .cons-hero-icon { width: 36px; height: 36px; border-radius: 10px; }
#page-consulta .cons-hero-icon svg { width: 20px; height: 20px; }
#page-consulta .cons-hero .calc-hero-text h2 { font-size: 17px; margin-bottom: 0; }
#page-consulta .cons-hero .calc-hero-text p { font-size: 12.5px; line-height: 1.4; margin: 0; }
#page-consulta .cons-vista-admin { padding: 6px 10px; margin-bottom: 10px; gap: 8px; font-size: 12.5px; }
#page-consulta .cons-vista-op { padding: 4px 10px; font-size: 12.5px; }
#page-consulta .cons-subir-mini { padding: 8px 12px; gap: 10px; font-size: 13.5px; }
#page-consulta .cons-subir-mini-icono { width: 30px; height: 30px; }
#page-consulta .cons-subir-mini .cons-subir-otra { padding: 6px 14px; font-size: 13px; }
#page-consulta .cons-fechas { gap: 6px; margin-bottom: 8px; }
#page-consulta .cons-fecha { padding: 5px 11px; min-height: 0; font-size: 13px; }
#page-consulta .cons-fecha-ult { font-size: 10.5px; }
#page-consulta .cons-plan-cab { margin: 0 0 8px; }
#page-consulta .cons-plan-cab-txt { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; }
#page-consulta .cons-plan-cab-txt strong { font-size: 16px; width: 100%; }
#page-consulta .cons-plan-fecha,
#page-consulta .cons-plan-semana { font-size: 12.5px; }
#page-consulta .cons-plan-semana::before { content: '· '; }
#page-consulta .cons-acciones { gap: 6px; margin: 10px 0; }
#page-consulta .cons-accion {
    flex-direction: row; gap: 8px;
    min-height: 40px; padding: 8px 12px; border-radius: 12px; font-size: 13px;
}
#page-consulta .cons-accion-icono svg { width: 18px; height: 18px; }
#page-consulta .cons-accion-nuevo { top: 6px; right: 8px; }
#page-consulta .cons-progreso { padding: 8px 12px; gap: 10px; margin: 0 0 10px; border-radius: 14px; }
#page-consulta .cons-anillo { width: 44px; height: 44px; }
#page-consulta .cons-progreso-cab { font-size: 10.5px; }
#page-consulta .cons-progreso-txt strong { font-size: 14px; }
#page-consulta .cons-progreso-txt span:last-child { font-size: 12.5px; }
#page-consulta .cons-plan-ayuda { font-size: 12.5px; margin: 0 0 8px; }

@media (min-width: 768px) {
    #main-content #page-consulta .cons-hero { padding: 10px 16px; margin-bottom: 10px; }
    #main-content #page-consulta .cons-hero-icon { width: 36px; height: 36px; }
    #main-content #page-consulta .cons-hero .calc-hero-text h2 { font-size: 17px; }
    #page-consulta .calc-group { margin-bottom: 12px; }
    #page-consulta .calc-group-title { margin-bottom: 6px; }
    /* El título del menú a la izquierda y las fechas a la derecha, en la misma fila. */
    #page-consulta #cons-plan-cuerpo > .cons-plan-cab { grid-column: 1; grid-row: 1; align-self: center; margin: 0; }
    #page-consulta #cons-plan-cuerpo > .cons-fechas {
        grid-column: 2; grid-row: 1; justify-self: end; align-self: center; margin: 0;
        max-width: 100%;
    }
    #page-consulta #cons-plan-cuerpo > .cons-acciones { margin: 10px 0 0; }
    #page-consulta #cons-plan-cuerpo > .cons-progreso { margin: 10px 0 0; align-self: stretch; }
    #page-consulta #cons-plan-cuerpo > .cons-semana-toda { margin-top: 12px; }
    #page-consulta .cons-tira { margin: 8px 0 12px; }
}
@media (max-width: 767px) {
    /* En el móvil, la cabecera en dos líneas como mucho y «¿Te han dado otro
       menú?» con el botón al lado, en una sola fila. */
    #page-consulta .cons-hero .calc-hero-text p {
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    #page-consulta .cons-subir-mini { flex-wrap: nowrap; padding: 8px 10px; font-size: 13px; line-height: 1.3; }
    #page-consulta .cons-subir-mini > span:nth-child(2) { flex: 1 1 auto; }
    #page-consulta .cons-subir-mini-icono { display: none; }
    #page-consulta .cons-subir-mini .cons-subir-otra { flex: none; padding: 6px 12px; white-space: nowrap; }
    #page-consulta .cons-tira { margin: 6px 0 10px; }
    /* Los tres botones, con el icono encima: en fila no caben sin partir el texto. */
    #page-consulta .cons-accion { flex-direction: column; gap: 3px; min-height: 54px; padding: 6px 4px; font-size: 12px; line-height: 1.2; }
}