/* =====================================================================
   FitTrack - Hoja de estilos principal

   Mobile-first: los estilos base son para móvil y las media queries
   añaden lo necesario en pantallas grandes.

   Tema: todos los colores salen de variables en :root. El bloque oscuro
   redefine SOLO las variables, con dos disparadores: la preferencia del
   sistema (prefers-color-scheme) y el interruptor manual, que pone
   data-theme="dark" o "light" en <html> (ver theme.js y app.js).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Variables
   --------------------------------------------------------------------- */
:root {
    color-scheme: light;

    --color-primary:        #e8590c;
    --color-primary-dark:   #c94a06;
    --color-primary-light:  #fff0e6;
    --color-primary-text:   #ffffff;

    --color-text:           #1a222d;
    --color-text-soft:      #4b5563;
    --color-text-muted:     #6b7280;

    --color-bg:             #f4f5f7;
    --color-surface:        #ffffff;
    --color-surface-2:      #f3f4f6;
    --color-border:         #e5e7eb;
    --color-border-strong:  #d1d5db;
    --color-track:          #eceef1;

    --color-success:        #0b8457;
    --color-success-bg:     #e6f6ef;
    --color-error:          #c92a2a;
    --color-error-bg:       #fdecec;
    --color-warning:        #b26b00;
    --color-warning-bg:     #fff6e5;
    --color-info:           #1864ab;
    --color-info-bg:        #e7f1fb;

    --color-protein:        #1c7ed6;
    --color-carbs:          #f59f00;
    --color-fat:            #ae3ec9;

    --radius:               14px;
    --radius-sm:            10px;
    --radius-xs:            6px;
    --shadow:               0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
    --shadow-lg:            0 8px 24px rgba(16, 24, 40, .10);
    --focus-ring:           0 0 0 3px var(--color-primary-light);

    --space-xs:             .5rem;
    --space-sm:             .875rem;
    --space-md:             1.25rem;
    --space-lg:             1.75rem;
    --space-xl:             2.5rem;

    --nav-height:           3.75rem;
    --topbar-height:        3.5rem;

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Tema oscuro: por preferencia del sistema (salvo que el interruptor
   fuerce el claro) o forzado con el interruptor. Mismas variables. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --color-primary:        #ff7a2f;
        --color-primary-dark:   #ff9051;
        --color-primary-light:  rgba(255, 122, 47, .16);
        --color-primary-text:   #1a0d04;

        --color-text:           #e6e9ee;
        --color-text-soft:      #b3bcc9;
        --color-text-muted:     #8792a2;

        --color-bg:             #0f141b;
        --color-surface:        #171d26;
        --color-surface-2:      #1f2733;
        --color-border:         #2a3441;
        --color-border-strong:  #3a4553;
        --color-track:          #263040;

        --color-success:        #4cd39a;
        --color-success-bg:     rgba(76, 211, 154, .14);
        --color-error:          #ff7b7b;
        --color-error-bg:       rgba(255, 123, 123, .14);
        --color-warning:        #ffc46b;
        --color-warning-bg:     rgba(255, 196, 107, .14);
        --color-info:           #7db8ff;
        --color-info-bg:        rgba(125, 184, 255, .14);

        --color-protein:        #5aa9f0;
        --color-carbs:          #ffb62e;
        --color-fat:            #cf6ee8;

        --shadow:               0 1px 2px rgba(0, 0, 0, .35);
        --shadow-lg:            0 8px 24px rgba(0, 0, 0, .45);
        --focus-ring:           0 0 0 3px rgba(255, 122, 47, .35);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --color-primary:        #ff7a2f;
    --color-primary-dark:   #ff9051;
    --color-primary-light:  rgba(255, 122, 47, .16);
    --color-primary-text:   #1a0d04;

    --color-text:           #e6e9ee;
    --color-text-soft:      #b3bcc9;
    --color-text-muted:     #8792a2;

    --color-bg:             #0f141b;
    --color-surface:        #171d26;
    --color-surface-2:      #1f2733;
    --color-border:         #2a3441;
    --color-border-strong:  #3a4553;
    --color-track:          #263040;

    --color-success:        #4cd39a;
    --color-success-bg:     rgba(76, 211, 154, .14);
    --color-error:          #ff7b7b;
    --color-error-bg:       rgba(255, 123, 123, .14);
    --color-warning:        #ffc46b;
    --color-warning-bg:     rgba(255, 196, 107, .14);
    --color-info:           #7db8ff;
    --color-info-bg:        rgba(125, 184, 255, .14);

    --color-protein:        #5aa9f0;
    --color-carbs:          #ffb62e;
    --color-fat:            #cf6ee8;

    --shadow:               0 1px 2px rgba(0, 0, 0, .35);
    --shadow-lg:            0 8px 24px rgba(0, 0, 0, .45);
    --focus-ring:           0 0 0 3px rgba(255, 122, 47, .35);
}

/* ---------------------------------------------------------------------
   2. Reinicio básico
   --------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--topbar-height) + var(--space-md));
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    /* Espacio para la barra de navegación inferior en móvil. */
    padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + var(--space-md));
}

h1, h2, h3 {
    line-height: 1.25;
    margin: 0 0 var(--space-sm);
    letter-spacing: -.01em;
    font-weight: 700;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

img { max-width: 100%; height: auto; }

/* El atributo hidden manda sobre cualquier display de una clase. */
[hidden] { display: none !important; }

button, input, select, textarea { font-family: inherit; color: inherit; }

/* Números alineados en todo lo que sea cifra. */
.big-number, .stat__value, .ring__value, .sets-table td, .data-table td,
.bar-row__value, .list__meta strong, .kpi strong { font-variant-numeric: tabular-nums; }

/* Foco siempre visible: accesibilidad con teclado. */
:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    background: var(--color-primary);
    color: var(--color-primary-text);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    z-index: 100;
}
.skip-link:focus { left: var(--space-sm); top: var(--space-sm); }

/* Iconos SVG en línea (helper icon()). Heredan el color y escalan con el texto. */
.icon {
    width: 1.25em;
    height: 1.25em;
    vertical-align: -.28em;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   3. Estructura
   --------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-md);
}

.page-title {
    font-size: 1.6rem;
    margin-bottom: var(--space-md);
}

/* Botón de volver: se pone encima del título de la página. */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 2.15rem;
    padding: .3rem .75rem .3rem .55rem;
    margin-bottom: var(--space-sm);
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-soft);
    font-size: .82rem;
    font-weight: 600;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.back-link:hover { text-decoration: none; color: var(--color-text); border-color: var(--color-text-muted); background: var(--color-surface-2); }
.back-link .icon { width: 1rem; height: 1rem; }

/* Cabecera de página con título, texto de apoyo y una acción a la derecha. */
.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-lg);
}
.page-head .page-title { margin-bottom: var(--space-xs); }
.page-head__main { min-width: 0; flex: 1 1 22rem; }
.page-head__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.page-lead {
    margin: 0;
    color: var(--color-text-soft);
    font-size: .95rem;
    max-width: 44rem;
}
.page-lead .tag { vertical-align: baseline; }

/* Barra superior */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    min-height: var(--topbar-height);
    padding: 0 var(--space-md);
    background: color-mix(in srgb, var(--color-surface) 88%, transparent);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 20;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .topbar { background: var(--color-surface); }
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-text);
    letter-spacing: -.02em;
}
.brand:hover { text-decoration: none; }
.brand__text { white-space: nowrap; }
.brand__accent { color: var(--color-primary); }
.brand__mark,
.brand .brand__mark {
    display: inline-flex;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 8px;
    background: var(--color-primary);
    color: #fff;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.brand__mark .icon { width: 1.2rem; height: 1.2rem; vertical-align: 0; stroke-width: 2.2; }

.topbar__user,
.topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}
.topbar__name {
    font-size: .875rem;
    color: var(--color-text-soft);
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.topbar__logout-label { display: none; }

.inline-form { display: inline; margin: 0; }

/* Botón cuadrado solo con icono (tema, etc.) */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-soft);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.icon-btn:hover { background: var(--color-surface-2); color: var(--color-text); }
.icon-btn .icon { width: 1.2rem; height: 1.2rem; vertical-align: 0; }

/* Interruptor de tema: luna en claro, sol en oscuro. */
.theme-toggle__sun { display: none; }
.theme-toggle__moon { display: inline-flex; }
:root[data-theme="dark"] .theme-toggle__sun { display: inline-flex; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle__sun { display: inline-flex; }
    :root:not([data-theme="light"]) .theme-toggle__moon { display: none; }
}

/* Inicial del usuario */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    border: 1px solid transparent;
}
.avatar:hover { text-decoration: none; border-color: var(--color-primary); }

/* Navegación: barra inferior en móvil */
.mainnav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    border-top: 1px solid var(--color-border);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
    z-index: 30;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .mainnav { background: var(--color-surface); }
}

.mainnav__link {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: calc(var(--nav-height) - 8px);
    padding: var(--space-xs) 2px;
    border-radius: var(--radius-sm);
    font-size: .7rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-align: center;
    transition: color .15s ease, background-color .15s ease;
}
.mainnav__link:hover { text-decoration: none; color: var(--color-text); }
.mainnav__link.is-active { color: var(--color-primary); font-weight: 600; }
.mainnav__link.is-active .mainnav__icon {
    background: var(--color-primary-light);
}
.mainnav__link--disabled { opacity: .4; cursor: not-allowed; }
.mainnav__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 1.75rem;
    border-radius: 999px;
    font-size: 1.25rem;
    line-height: 1;
    transition: background-color .15s ease;
}
.mainnav__icon .icon { width: 1.35rem; height: 1.35rem; vertical-align: 0; }

/* Pie: mismo ancho y márgenes que .container, alineado con las tarjetas. */
.footer {
    margin-top: var(--space-xl);
    border-top: 1px solid var(--color-border);
    font-size: .8rem;
    color: var(--color-text-muted);
}
.footer__inner {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-lg) var(--space-md);
}
.footer p { margin: 0 0 var(--space-xs); }
.footer__brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    color: var(--color-text-soft);
}
.footer__brand .brand__mark { width: 1.35rem; height: 1.35rem; border-radius: 6px; }
.footer__brand .brand__mark .icon { width: .85rem; height: .85rem; }
.footer__disclaimer { max-width: 44rem; margin: 0; font-size: .75rem; line-height: 1.5; }

/* ---------------------------------------------------------------------
   4. Tarjetas
   --------------------------------------------------------------------- */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}
.card--compact { padding: var(--space-md); }
.grid > .card { margin-bottom: 0; }
.card--muted { background: var(--color-surface-2); box-shadow: none; }

.card__title {
    font-size: 1.05rem;
    margin-bottom: var(--space-md);
}
.card__subtitle {
    font-size: .95rem;
    margin: var(--space-lg) 0 var(--space-xs);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}
.card__note {
    font-size: .8rem;
    color: var(--color-text-muted);
    margin: var(--space-sm) 0 0;
}

.grid { display: grid; gap: var(--space-md); }
.grid--cards { grid-template-columns: 1fr; margin-bottom: var(--space-lg); }

/* ---------------------------------------------------------------------
   5. Formularios
   --------------------------------------------------------------------- */
.field { margin-bottom: var(--space-md); border: 0; padding: 0; min-width: 0; }

.field label,
.field legend {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-text-soft);
    margin-bottom: var(--space-xs);
    padding: 0;
}
.field__optional { font-weight: 400; color: var(--color-text-muted); }

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="date"],
.field input[type="time"],
.field input[type="datetime-local"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="search"],
.field select,
.field textarea {
    width: 100%;
    /* 16px evita que iOS haga zoom al enfocar el campo. */
    font-size: 16px;
    color: var(--color-text);
    padding: .7rem .85rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
    min-height: 2.75rem;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--color-text-muted); opacity: .8; }

/* Flecha propia para los desplegables, coherente en todos los navegadores. */
.field select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 1.1rem;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
    outline: none;
}

.field input:disabled,
.field select:disabled {
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.field textarea { resize: vertical; min-height: 3.5rem; }

.field .has-error { border-color: var(--color-error); }

.field__hint {
    font-size: .78rem;
    color: var(--color-text-muted);
    margin: var(--space-xs) 0 0;
}
.field__error {
    font-size: .8rem;
    color: var(--color-error);
    margin: var(--space-xs) 0 0;
    font-weight: 500;
}

.field-row { display: grid; gap: var(--space-md); grid-template-columns: 1fr; }

/* Pie de formulario: nota a la izquierda, botón a la derecha. */
.form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}
.form-footer .card__note,
.form-footer .quota { margin: 0; flex: 1 1 14rem; }

/* Radios en forma de tarjeta: el botón a la izquierda, el texto (y su
   descripción opcional .radio-card__meta) a la derecha, siempre alineados. */
.radio-group { display: grid; gap: var(--space-sm); }

.radio-card,
.field .radio-card,
.field label.radio-card {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    align-items: start;
    column-gap: .75rem;
    padding: .85rem 1rem;
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    cursor: pointer;
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.35;
    color: var(--color-text);
    margin: 0;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.radio-card:hover { border-color: var(--color-primary); }
.radio-card > span { display: block; min-width: 0; }
.radio-card input {
    accent-color: var(--color-primary);
    width: 1.25rem;
    height: 1.25rem;
    margin: .05rem 0 0;
    cursor: pointer;
}
.radio-card:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}
.radio-card:has(input:focus-visible) { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.radio-card input:focus-visible { outline: none; }

.switch,
.field .switch,
.field label.switch {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    color: var(--color-text-soft);
    margin: 0;
}
.switch input { accent-color: var(--color-primary); width: 1.15rem; height: 1.15rem; }

/* ---------------------------------------------------------------------
   6. Botones
   --------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    /* 44px de alto mínimo: objetivo táctil cómodo. */
    min-height: 2.75rem;
    padding: .65rem 1.2rem;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, transform .08s ease, box-shadow .15s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn .icon { width: 1.1em; height: 1.1em; vertical-align: 0; }

.btn--primary {
    background: var(--color-primary);
    color: var(--color-primary-text);
    box-shadow: 0 1px 2px rgba(232, 89, 12, .25);
}
.btn--primary:hover { background: var(--color-primary-dark); }

.btn--secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border-strong);
}
.btn--secondary:hover { background: var(--color-surface-2); border-color: var(--color-text-muted); }

.btn--ghost {
    background: transparent;
    color: var(--color-text-soft);
    border-color: var(--color-border);
}
.btn--ghost:hover { background: var(--color-surface-2); color: var(--color-text); }

.btn--sm { min-height: 2.15rem; padding: .35rem .8rem; font-size: .82rem; gap: .35rem; }
.btn--block { width: 100%; }
.btn--disabled { opacity: .45; pointer-events: none; }

/* ---------------------------------------------------------------------
   7. Avisos
   --------------------------------------------------------------------- */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    border-left-width: 4px;
    margin-bottom: var(--space-md);
    font-size: .9rem;
    background: var(--color-surface);
}
.alert__icon {
    display: inline-flex;
    font-weight: 700;
    line-height: 1.5;
    margin-top: .05rem;
}
.alert__icon .icon { width: 1.2rem; height: 1.2rem; vertical-align: 0; }

.alert--success { background: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success); }
.alert--error   { background: var(--color-error-bg);   border-color: var(--color-error);   color: var(--color-error); }
.alert--warning { background: var(--color-warning-bg); border-color: var(--color-warning); color: var(--color-warning); }
.alert--info    { background: var(--color-info-bg);    border-color: var(--color-info);    color: var(--color-info); }
.alert a { color: inherit; text-decoration: underline; font-weight: 600; }

/* ---------------------------------------------------------------------
   8. Datos y estadísticas
   --------------------------------------------------------------------- */
.stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-surface-2);
    border-radius: var(--radius-sm);
}
.stat--highlight { background: var(--color-primary-light); }

.stat__label { font-size: .72rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.stat__value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.stat__unit  { font-size: .75rem; color: var(--color-text-muted); }

.big-number {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    margin: 0 0 var(--space-sm);
    letter-spacing: -.02em;
}
.big-number__unit { font-size: 1rem; font-weight: 500; color: var(--color-text-muted); letter-spacing: 0; margin-left: .25rem; }
.big-number--over { color: var(--color-warning); }

/* Anillo de progreso (calorías del día). --pct va de 0 a 100. */
.ring-card {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}
.ring {
    --pct: 0;
    --ring-size: 9.5rem;
    --ring-width: .8rem;
    --ring-color: var(--color-primary);
    position: relative;
    width: var(--ring-size);
    height: var(--ring-size);
    border-radius: 50%;
    background: conic-gradient(var(--ring-color) calc(var(--pct) * 1%), var(--color-track) 0);
    flex-shrink: 0;
}
.ring::before {
    content: "";
    position: absolute;
    inset: var(--ring-width);
    border-radius: 50%;
    background: var(--color-surface);
}
.ring--over { --ring-color: var(--color-warning); }
.ring__inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-md);
}
.ring__value { font-size: 1.75rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.ring--over .ring__value { color: var(--color-warning); }
.ring__label { font-size: .72rem; color: var(--color-text-muted); margin-top: 4px; line-height: 1.2; }

.ring-card__side { display: grid; gap: var(--space-sm); flex: 1 1 8rem; }
.kpi { display: flex; flex-direction: column; font-size: .95rem; }
.kpi__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); font-weight: 600; }
.kpi strong { font-size: 1.15rem; }
.kpi small { color: var(--color-text-muted); }

.macro-list { list-style: none; padding: 0; margin: 0; font-size: .875rem; }
.macro-list li { display: flex; align-items: center; gap: var(--space-xs); padding: 2px 0; }
.macro-list strong { margin-left: auto; }

.dot { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; }
.dot--protein { background: var(--color-protein); }
.dot--carbs   { background: var(--color-carbs); }
.dot--fat     { background: var(--color-fat); }

.trend { font-size: .85rem; font-weight: 600; margin: var(--space-xs) 0 0; }
.trend--down { color: var(--color-success); }
.trend--up   { color: var(--color-warning); }

/* ---------------------------------------------------------------------
   9. Tarjeta de acceso / registro
   --------------------------------------------------------------------- */
.auth-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: var(--space-xl) var(--space-lg);
    max-width: 26rem;
    margin: var(--space-xl) auto;
}
.auth-card__title { font-size: 1.5rem; margin-bottom: var(--space-xs); }
.auth-card__subtitle { color: var(--color-text-soft); font-size: .9rem; margin: 0 0 var(--space-lg); }
.auth-card__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
    font-size: .875rem;
    text-align: center;
}

.topbar--guest { justify-content: center; }

.debug-box {
    background: #1a222d;
    color: #e6e9ee;
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: .72rem;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    text-align: left;
}

/* ---------------------------------------------------------------------
   10. Componentes comunes y del módulo de gimnasio
   --------------------------------------------------------------------- */

/* Utilidades */
.mt-md { margin-top: var(--space-md); }
.mb-md { margin-bottom: var(--space-md); }
.full-width { grid-column: 1 / -1; width: 100%; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Cabecera de tarjeta con acción a la derecha */
.card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-sm);
    flex-wrap: wrap;
}
.card__header .card__title { margin-bottom: var(--space-md); }
.card__header > div > .card__title { margin-bottom: var(--space-xs); }
.card__header > div > .list__meta { margin-bottom: var(--space-md); }

/* Fila de botones */
.actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

/* Listas */
.list { list-style: none; padding: 0; margin: 0; }

.list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-sm);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: .92rem;
}
.list__item:last-child { border-bottom: none; }
.list__item--stacked { align-items: flex-start; }

.list--compact .list__item { padding: .4rem 0; font-size: .875rem; }

.list__title { font-weight: 600; color: var(--color-text); }
a.list__title:hover { color: var(--color-primary); }
.list__item > a:not(.btn):not(.btn-link):not(.list__title) { font-weight: 600; color: var(--color-text); }
.list__item > a:not(.btn):not(.btn-link):not(.list__title):hover { color: var(--color-primary); }

.list__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-xs);
    font-size: .8rem;
    color: var(--color-text-muted);
    margin: 2px 0 0;
}

.list__actions {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
    margin-left: auto;
}

/* Etiquetas */
.tag {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    vertical-align: middle;
    white-space: nowrap;
}
.tag--muted   { background: var(--color-surface-2); color: var(--color-text-muted); }
.tag--warning { background: var(--color-warning-bg); color: var(--color-warning); }
.tag--success { background: var(--color-success-bg); color: var(--color-success); }
.tag--info    { background: var(--color-info-bg);    color: var(--color-info); }
.tag--danger  { background: var(--color-error-bg);   color: var(--color-error); }

/* Estado vacío: una caja suave con borde discontinuo, no una frase perdida. */
.empty-state {
    color: var(--color-text-soft);
    font-size: .9rem;
    line-height: 1.5;
    padding: var(--space-md) var(--space-lg);
    margin: 0;
    text-align: center;
    background: var(--color-surface-2);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-sm);
}
.empty-state a { font-weight: 600; }
.empty-state--sm { padding: var(--space-sm) var(--space-md); font-size: .85rem; }

/* Acciones secundarias (Cambiar, Quitar, Borrar…): botones pequeños con
   borde, para que se reconozcan como botones y no como texto suelto. */
.btn-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 2.15rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    padding: .3rem .75rem;
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    color: var(--color-text-soft);
    cursor: pointer;
    text-decoration: none;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-link:hover { color: var(--color-text); background: var(--color-surface-2); border-color: var(--color-text-muted); text-decoration: none; }
.btn-link .icon { width: 1em; height: 1em; }
.btn-link--danger { color: var(--color-error); border-color: color-mix(in srgb, var(--color-error) 45%, transparent); }
.btn-link--danger:hover { color: var(--color-error); background: var(--color-error-bg); border-color: var(--color-error); }

/* Bloques desplegables: el resumen es una fila con chevron propio, en vez
   del triángulo del navegador, que cambia de aspecto en cada sistema. */
.details-summary {
    display: flex;
    align-items: center;
    gap: .6rem;
    cursor: pointer;
    font-weight: 600;
    font-size: .92rem;
    color: var(--color-text);
    padding: .6rem .85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    list-style: none;
    user-select: none;
    transition: background-color .15s ease, border-color .15s ease;
}
.details-summary::-webkit-details-marker { display: none; }
.details-summary::before {
    content: "";
    flex-shrink: 0;
    width: .5rem;
    height: .5rem;
    margin: 0 .15rem 0 .1rem;
    border-right: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    transform: translateY(-2px) rotate(45deg);
    transition: transform .15s ease;
}
details[open] > .details-summary::before { transform: translateY(1px) rotate(-135deg); }
.details-summary:hover { border-color: var(--color-primary); }
details[open] > .details-summary { margin-bottom: var(--space-sm); }
.details-summary--sm { font-size: .85rem; font-weight: 500; padding: .5rem .75rem; }
.details-summary .icon { width: 1em; height: 1em; vertical-align: -.15em; }

/* Numerito del día en una rutina */
.day-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-primary-text);
    font-size: .8rem;
    font-weight: 700;
    margin-right: var(--space-xs);
}

/* Formularios en rejilla (objetivos, series, filtros) */
.target-form,
.set-form,
.filter-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    align-items: end;
    margin-top: var(--space-sm);
}
.target-form .field,
.set-form .field,
.filter-form .field { margin-bottom: 0; }

.target-form .field--wide,
.set-form .field--wide,
.filter-form .field--wide { grid-column: 1 / -1; }

.field--actions { grid-column: 1 / -1; display: flex; gap: var(--space-xs); }
.field--check { display: flex; align-items: center; min-height: 2.75rem; }

.set-form { border-top: 1px solid var(--color-border); padding-top: var(--space-md); }
.set-form [data-set-error] { grid-column: 1 / -1; }

/* Creación rápida de ejercicios, dentro del selector */
.quick-create { margin-top: var(--space-sm); }
.quick-create__form {
    padding: var(--space-md);
    background: var(--color-surface-2);
    border-radius: var(--radius-sm);
}
.quick-create__form [data-quick-error] { grid-column: 1 / -1; }

/* Tablas de datos (series, plan de dieta, revisión de la foto). */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: var(--space-sm) 0;
}

.sets-table,
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
    margin: var(--space-sm) 0;
}
.table-scroll > .data-table,
.table-scroll > .sets-table { margin: 0; }

/* En móvil la tabla de series se convierte en un bloque con scroll:
   preferible a que se salga de la pantalla o quede ilegible. */
.sets-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.sets-table th,
.sets-table td { white-space: nowrap; }
.sets-table--wrap th,
.sets-table--wrap td { white-space: normal; }
.sets-table--wrap { min-width: 100%; }

.sets-table th,
.data-table th {
    text-align: left;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-muted);
    font-weight: 700;
    padding: .4rem .5rem;
    border-bottom: 1px solid var(--color-border);
}
.sets-table td,
.data-table td {
    padding: .5rem .5rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
.sets-table tr:last-child td,
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tfoot td,
.data-table tfoot th {
    border-top: 2px solid var(--color-border);
    border-bottom: none;
    padding-top: .6rem;
    color: var(--color-text);
    text-transform: none;
    font-size: .9rem;
    letter-spacing: 0;
}
.sets-table__actions { text-align: right; width: 2.5rem; }
.sets-table .is-warmup { color: var(--color-text-muted); }
.is-num { text-align: right; }

/* Tabla editable: los campos ocupan la celda sin cromo alrededor. */
.data-table--editable input[type="text"],
.data-table--editable input[type="number"] {
    width: 100%;
    min-width: 4.5rem;
    font-size: .9rem;
    padding: .35rem .5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    background: var(--color-surface);
    color: var(--color-text);
}
.data-table--editable input[type="text"] { min-width: 10rem; }
.data-table--editable .is-num input { text-align: right; }
.data-table--editable input:focus { border-color: var(--color-primary); box-shadow: var(--focus-ring); outline: none; }
.data-table--editable input[type="checkbox"] { width: 1.15rem; height: 1.15rem; accent-color: var(--color-primary); }
.data-table--editable tr.is-excluded input:not([type="checkbox"]) { opacity: .45; text-decoration: line-through; }

/* "Última vez" */
.last-time {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm);
    background: var(--color-surface-2);
    border-radius: var(--radius-sm);
    margin: var(--space-sm) 0;
    font-size: .82rem;
}
.last-time__label { font-weight: 600; color: var(--color-text-soft); }
.last-time__sets { display: flex; flex-wrap: wrap; gap: 4px; }

.pill {
    display: inline-block;
    padding: .15rem .55rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: .78rem;
    white-space: nowrap;
}
.pill small { color: var(--color-text-muted); }

/* Gráficas */
.chart-wrap {
    position: relative;
    width: 100%;
    height: 280px;
    margin: var(--space-sm) 0;
}
.chart-wrap--small { height: 240px; max-width: 26rem; margin-inline: auto; }

/* Paginación */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}
.pagination__info { font-size: .82rem; color: var(--color-text-muted); }

/* Radios apilados y metadatos */
.radio-group--stacked { grid-template-columns: 1fr; }
.radio-card__meta {
    display: block;
    font-size: .78rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* ---------------------------------------------------------------------
   11. Componentes del módulo de nutrición
   --------------------------------------------------------------------- */

/* Navegación por días */
.day-nav {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}
.day-nav__form { display: flex; gap: var(--space-xs); flex: 1; }
.day-nav__form input {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    padding: .4rem .6rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
}
.day-nav__label { margin-bottom: var(--space-md); }

/* Barras de progreso de macros */
.bars { display: grid; gap: var(--space-sm); }

.bar-row__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-xs);
    font-size: .85rem;
}
.bar-row__label { font-weight: 600; color: var(--color-text-soft); }
.bar-row__value { color: var(--color-text-muted); }
.bar-row__value strong { color: var(--color-text); font-size: .95rem; }
.bar-row__left { font-size: .75rem; color: var(--color-text-muted); }

.bar {
    height: .55rem;
    background: var(--color-track);
    border-radius: 999px;
    overflow: hidden;
    margin: 4px 0 2px;
}
.bar__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width .4s cubic-bezier(.2, .7, .2, 1);
}
.bar--kcal    { background: var(--color-primary); }
.bar--protein { background: var(--color-protein); }
.bar--carbs   { background: var(--color-carbs); }
.bar--fat     { background: var(--color-fat); }
/* Rayado diagonal cuando se pasa del objetivo. */
.bar__fill--over {
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, .35) 0 6px,
        transparent 6px 12px
    );
}

.text-over  { color: var(--color-warning); font-weight: 600; }
.text-under { color: var(--color-success); font-weight: 600; }

/* Ajuste rápido de cantidad */
.qty-form { display: flex; align-items: center; gap: 4px; }
.qty-form input {
    width: 5.5rem;
    padding: .35rem .5rem;
    font-size: .85rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    min-height: 2.15rem;
}

/* Atajos con forma de píldora */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: .4rem .75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    font: inherit;
    font-size: .8rem;
    color: var(--color-text);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.chip:hover { border-color: var(--color-primary); background: var(--color-primary-light); }
.chip small { color: var(--color-text-muted); }

/* Resultados del buscador de alimentos */
.food-search__results {
    margin: var(--space-xs) 0 var(--space-sm);
    max-height: 22rem;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}
.food-search__results:empty { display: none; }
.food-search__results > p { padding: var(--space-sm); margin: 0; }

.food-results { list-style: none; margin: 0; padding: 0; }

.food-result {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: .6rem .8rem;
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    font: inherit;
    color: var(--color-text);
    cursor: pointer;
}
.food-result:hover,
.food-result:focus-visible { background: var(--color-primary-light); }
.food-results li:last-child .food-result { border-bottom: none; }

.food-result__name { font-size: .9rem; font-weight: 500; }
.food-result__macros { font-size: .78rem; color: var(--color-text-muted); }

/* Zona para hacer o soltar la foto de una comida */
.dropzone {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 13rem;
    padding: var(--space-lg);
    border: 2px dashed var(--color-border-strong);
    border-radius: var(--radius);
    background: var(--color-surface-2);
    cursor: pointer;
    text-align: center;
    transition: border-color .15s ease, background-color .15s ease;
    overflow: hidden;
}
.dropzone:hover,
.dropzone.is-dragover { border-color: var(--color-primary); background: var(--color-primary-light); }
.dropzone.has-photo { padding: 0; border-style: solid; background: #000; }
.dropzone.is-loading { opacity: .6; }
.dropzone:has(input:focus-visible) { outline: 3px solid var(--color-primary); outline-offset: 2px; }

/* El input real queda encima de todo pero invisible: sigue siendo
   accesible con teclado y, en móvil, abre la cámara directamente. */
.dropzone__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}
.dropzone__preview {
    display: block;
    max-height: 22rem;
    width: 100%;
    object-fit: contain;
}
.dropzone__idle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    color: var(--color-text-soft);
}
.dropzone__icon {
    display: inline-flex;
    width: 3.5rem;
    height: 3.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-primary);
    box-shadow: var(--shadow);
    margin-bottom: .35rem;
}
.dropzone__icon .icon { width: 1.75rem; height: 1.75rem; vertical-align: 0; }
.dropzone__title { font-weight: 700; color: var(--color-text); font-size: 1.05rem; }
.dropzone__hint { font-size: .8rem; color: var(--color-text-muted); }
.dropzone__change {
    position: absolute;
    bottom: var(--space-sm);
    right: var(--space-sm);
    padding: .35rem .75rem;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    z-index: 1;
}
.photo-form.is-busy .dropzone { pointer-events: none; opacity: .7; }

.analysis-notes {
    margin: 0 0 var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-surface-2);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-sm);
    font-size: .9rem;
    color: var(--color-text-soft);
}

.tips { margin: 0; padding-left: 1.2rem; font-size: .9rem; color: var(--color-text-soft); }
.tips li { margin-bottom: .35rem; }
.tips li:last-child { margin-bottom: 0; }

.quick-entry .target-form { padding: var(--space-md); background: var(--color-surface-2); border-radius: var(--radius-sm); }

/* ---------------------------------------------------------------------
   12. Componentes del agente de IA
   --------------------------------------------------------------------- */

/* Aviso sanitario */
.disclaimer {
    padding: var(--space-sm) var(--space-md);
    background: var(--color-warning-bg);
    border-left: 3px solid var(--color-warning);
    border-radius: var(--radius-sm);
    font-size: .82rem;
    line-height: 1.45;
    color: var(--color-warning);
    margin-bottom: var(--space-lg);
}
.disclaimer strong { display: block; margin-bottom: 2px; }

/* Contador de peticiones restantes */
.quota {
    font-size: .78rem;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-sm);
}
.quota__note { display: block; font-size: .72rem; opacity: .85; }

/* Hilo de conversación */
.chat {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-height: 32rem;
    overflow-y: auto;
    padding: var(--space-xs) 0 var(--space-md);
}

.chat__empty { color: var(--color-text-muted); font-size: .88rem; }
.chat__empty ul { margin: var(--space-xs) 0 0; padding-left: 1.1rem; }
.chat__empty li { margin-bottom: 2px; }

.chat__msg {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 92%;
}
.chat__msg--user { align-self: flex-end; align-items: flex-end; }
.chat__msg--assistant { align-self: flex-start; }

.chat__author {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-muted);
    font-weight: 600;
}

.chat__body {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius);
    background: var(--color-surface-2);
    font-size: .9rem;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
}
.chat__msg--assistant .chat__body { border-bottom-left-radius: var(--radius-xs); }
.chat__msg--user .chat__body {
    background: var(--color-primary);
    color: var(--color-primary-text);
    border-bottom-right-radius: var(--radius-xs);
}
.chat__msg--pending .chat__body { opacity: .6; font-style: italic; }

.chat__body--standalone {
    background: var(--color-surface-2);
    max-width: 100%;
}

.chat-form { border-top: 1px solid var(--color-border); padding-top: var(--space-md); }
.chat-form textarea { resize: vertical; }

/* Ingredientes de una comida del plan */
.ingredient-list {
    list-style: none;
    margin: var(--space-xs) 0 0;
    padding: 0;
    font-size: .8rem;
    color: var(--color-text-soft);
}
.ingredient-list li { padding: 1px 0; }
.ingredient-list .list__meta { display: inline; }

/* ---------------------------------------------------------------------
   13. Dashboard
   --------------------------------------------------------------------- */

.dash-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-xs);
}
.dash-head .page-title { margin-bottom: 0; }

.dash-date {
    margin-top: 2px;
    margin-bottom: var(--space-md);
}
.dash-date::first-letter { text-transform: uppercase; }

.streak {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: .3rem .75rem;
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}

.dash-suggestion { margin: 0 0 var(--space-sm); font-size: 1.05rem; }
.dash-suggestion .list__meta { display: block; }

/* Accesos rápidos del inicio: rejilla de botones con icono. */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}
.quick-action {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-weight: 600;
    font-size: .9rem;
    box-shadow: var(--shadow);
    transition: border-color .15s ease, transform .08s ease, background-color .15s ease;
}
.quick-action:hover { text-decoration: none; border-color: var(--color-primary); }
.quick-action:active { transform: translateY(1px); }
.quick-action__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-xs);
    background: var(--color-primary-light);
    color: var(--color-primary);
    flex-shrink: 0;
}
.quick-action__icon .icon { width: 1.25rem; height: 1.25rem; vertical-align: 0; }
.quick-action--primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-text); }
.quick-action--primary .quick-action__icon { background: rgba(255, 255, 255, .2); color: inherit; }
.quick-action--primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }

/* ---------------------------------------------------------------------
   14. Tablet y escritorio
   --------------------------------------------------------------------- */
@media (min-width: 640px) {
    .field-row { grid-template-columns: 1fr 1fr; }
    .field-row--4 { grid-template-columns: repeat(4, 1fr); }
    .stats { grid-template-columns: repeat(4, 1fr); }
    /* Con cinco estadísticas (peso con tendencia) caben en una sola fila. */
    .stats:has(> :nth-child(5)) { grid-template-columns: repeat(5, 1fr); }
    .grid--cards { grid-template-columns: repeat(2, 1fr); }
    .radio-group { grid-template-columns: repeat(3, 1fr); }
    .radio-group--stacked { grid-template-columns: 1fr 1fr; }
    .auth-card__links { flex-direction: row; justify-content: space-between; }
    .quick-actions { grid-template-columns: repeat(3, 1fr); }
    .topbar__logout-label { display: inline; }

    .target-form { grid-template-columns: repeat(4, 1fr); }
    .set-form    { grid-template-columns: repeat(4, 1fr) auto; align-items: end; }
    .set-form .field--actions { grid-column: auto; }
    .filter-form { grid-template-columns: 2fr 1fr auto; }
    .filter-form .field--actions { grid-column: auto; }
    .quick-create__form { grid-template-columns: 2fr 1fr 1fr auto; }
    .quick-create__form .field--actions { grid-column: auto; }
}

@media (min-width: 768px) {
    /* Con sitio de sobra, la tabla vuelve a comportarse como tabla normal. */
    .sets-table { display: table; overflow-x: visible; }
    .sets-table th,
    .sets-table td { white-space: normal; }
}

@media (min-width: 900px) {
    body { padding-bottom: 0; }

    .container { padding: var(--space-lg); }
    .footer__inner { padding: var(--space-lg); }
    .page-title { font-size: 1.9rem; }
    .quick-actions { grid-template-columns: repeat(5, 1fr); }

    /* En escritorio la navegación pasa a ser una barra horizontal superior. */
    .mainnav {
        position: static;
        justify-content: flex-start;
        gap: var(--space-xs);
        border-top: none;
        border-bottom: 1px solid var(--color-border);
        padding: 0 var(--space-lg);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: var(--color-surface);
    }
    .mainnav__link {
        flex: 0 0 auto;
        flex-direction: row;
        gap: .45rem;
        min-height: 3rem;
        padding: 0 var(--space-md);
        font-size: .9rem;
        border-radius: 0;
        border-bottom: 2px solid transparent;
    }
    .mainnav__link.is-active { border-bottom-color: var(--color-primary); }
    .mainnav__link.is-active .mainnav__icon { background: transparent; }
    .mainnav__icon { width: auto; height: auto; font-size: 1.1rem; }
    .mainnav__icon .icon { width: 1.15rem; height: 1.15rem; }
}

/* ---------------------------------------------------------------------
   14b. Amigos, rutinas compartidas e imágenes de ejercicios
   --------------------------------------------------------------------- */

.mt-sm { margin-top: var(--space-sm); }

/* Aviso de solicitudes pendientes sobre el icono del menú. */
.mainnav__icon { position: relative; }
.mainnav__badge {
    position: absolute;
    top: -3px;
    right: .35rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 .22rem;
    border-radius: 999px;
    background: var(--color-error);
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    line-height: 1rem;
    text-align: center;
}

/* Fila de lista con miniatura a la izquierda. */
.list__item--media {
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: var(--space-sm);
}
.list__body {
    flex: 1 1 auto;
    /* Sin esto, un nombre largo desborda en vez de partirse. */
    min-width: 0;
}

/* Imagen o GIF del ejercicio.
   Con dos fotogramas se alternan con una animación CSS y se ve el gesto,
   sin JavaScript. La regla global de prefers-reduced-motion desactiva la
   animación y deja la primera imagen fija, que es justo lo deseable. */
.exercise-media {
    position: relative;
    flex: 0 0 auto;
    margin: 0;
    overflow: hidden;
    line-height: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.exercise-media--sm { width: 4.25rem; height: 4.25rem; }
.exercise-media--md { width: 100%; max-width: 22rem; aspect-ratio: 4 / 3; }

.exercise-media__frame {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.exercise-media__frame--b {
    position: absolute;
    inset: 0;
    opacity: 0;
}
.exercise-media--anim .exercise-media__frame--b {
    animation: exercise-frames 1.8s steps(1) infinite;
}
@keyframes exercise-frames {
    0%, 50%      { opacity: 0; }
    50.01%, 100% { opacity: 1; }
}

.exercise-media__credit {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2px 6px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: .65rem;
    line-height: 1.3;
    text-align: center;
}
/* En miniatura no cabe: la autoría se ve en la ficha grande. */
.exercise-media--sm .exercise-media__credit { display: none; }

/* Formulario de imagen dentro de cada ejercicio propio. */
.media-editor { margin-top: var(--space-sm); }
.media-editor input[type="file"] {
    width: 100%;
    font-size: .85rem;
}


/* ---------------------------------------------------------------------
   15. Preferencias del usuario e impresión
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}

/* Impresión: pensada sobre todo para llevarse el plan de dieta
   o una rutina al gimnasio en papel. */
@media print {
    .topbar,
    .mainnav,
    .footer,
    .btn,
    .btn-link,
    .actions-row,
    .quick-actions,
    .chat-form,
    .set-form,
    .target-form,
    .filter-form,
    .qty-form,
    .day-nav,
    .skip-link,
    .alert { display: none !important; }

    body {
        background: #fff;
        padding: 0;
        font-size: 11pt;
        color: #000;
    }

    .container { max-width: none; padding: 0; }

    .card {
        border: 1px solid #ccc;
        box-shadow: none;
        break-inside: avoid;
        page-break-inside: avoid;
        margin-bottom: 10pt;
        padding: 8pt;
    }

    .card__title { font-size: 12pt; }

    /* En papel el aviso sanitario debe seguir leyéndose. */
    .disclaimer {
        border: 1px solid #999;
        background: none;
        color: #000;
        font-size: 9pt;
    }

    .sets-table { display: table; width: 100%; font-size: 10pt; }
    .sets-table th, .sets-table td { border-bottom: 1px solid #ddd; }

    a { text-decoration: none; color: #000; }

    /* Cada día del plan o de la rutina, en su propia página si hace falta. */
    section[id^="dia-"] { break-inside: avoid; page-break-inside: avoid; }
}

/* ---------------------------------------------------------------------
   16. Comida por texto y etiqueta nutricional
   --------------------------------------------------------------------- */

/* Formulario «…o descríbelo con palabras» (nutrition/photo.php). */
.text-meal-form textarea { min-height: 5.5rem; }
.text-meal-form.is-busy textarea { opacity: .7; }
.text-meal-form.is-busy { pointer-events: none; }

/* La descripción original en la pantalla de revisión: puede traer saltos de línea. */
.analysis-source { white-space: pre-wrap; }

/* Zona de la etiqueta (nutrition/foods.php): la tabla nutricional es
   pequeña, así que la caja también puede serlo. */
.dropzone--label { min-height: 10rem; }
.dropzone--label .dropzone__preview { max-height: 18rem; }

/* Aviso con la confianza y las notas de la lectura de la etiqueta. */
.label-notice .tag { margin-right: .35rem; vertical-align: baseline; }
.label-notice__notes {
    display: block;
    margin-top: .35rem;
    font-size: .88rem;
    opacity: .9;
}

@media (min-width: 640px) {
    .text-meal-form textarea { min-height: 4.5rem; }
}


/* ---------------------------------------------------------------------
   16. Rutina generada por IA, coach semanal y lista de la compra
   --------------------------------------------------------------------- */

/* Material disponible del generador de rutinas: casillas en rejilla,
   que en móvil caben dos por fila sin apretarse. */
.checkbox-grid {
    display: grid;
    gap: var(--space-sm) var(--space-md);
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.checkbox-grid .switch { font-weight: 500; color: var(--color-text); }

/* Acciones del coach: numeradas, con el porqué debajo en tono suave. */
.coach-actions {
    list-style: none;
    counter-reset: coach;
    margin: 0 0 var(--space-md);
    padding: 0;
    display: grid;
    gap: var(--space-sm);
}
.coach-action {
    counter-increment: coach;
    position: relative;
    padding: var(--space-sm) var(--space-md) var(--space-sm) 2.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
}
.coach-action::before {
    content: counter(coach);
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-primary-text);
    font-size: .8rem;
    font-weight: 700;
}
.coach-action__title { margin: 0; font-weight: 600; line-height: 1.35; }
.coach-action__why {
    margin: .3rem 0 0;
    font-size: .875rem;
    color: var(--color-text-soft);
    line-height: 1.45;
}

/* Resumen del coach en la pantalla de inicio. */
.dash-coach__summary {
    margin: 0 0 var(--space-sm);
    line-height: 1.55;
    color: var(--color-text);
}

/* Lista de la compra. */
.shopping__tools { align-items: center; margin-bottom: var(--space-sm); }

/* Reserva su hueco aunque esté vacío: al copiar la lista no se mueve
   nada de sitio. */
.shopping__status {
    margin: 0;
    min-height: 1.1rem;
    font-size: .85rem;
    color: var(--color-success);
}

.shopping__list {
    list-style: none;
    margin: 0 0 var(--space-md);
    padding: 0;
}

.shopping__item { border-bottom: 1px solid var(--color-border); }
.shopping__item:last-child { border-bottom: 0; }

/* La fila entera es la etiqueta de la casilla: se marca tocando en
   cualquier punto, que en el móvil y con el carro en la mano importa. */
.shopping__row {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-sm);
    padding: .6rem .25rem;
    cursor: pointer;
    margin: 0;
}
.shopping__row input {
    accent-color: var(--color-primary);
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
}
.shopping__name { min-width: 0; overflow-wrap: anywhere; }
.shopping__amount {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--color-text-soft);
    white-space: nowrap;
}

.shopping__item.is-done .shopping__name,
.shopping__item.is-done .shopping__amount {
    text-decoration: line-through;
    color: var(--color-text-muted);
}

.shopping__days {
    margin: 0 0 .5rem 2.1rem;
    font-size: .8rem;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.shopping__plain summary { cursor: pointer; font-weight: 600; }
.shopping__pre {
    margin: var(--space-sm) 0 0;
    padding: var(--space-sm);
    background: var(--color-surface-2);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: .8rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* En papel: sin herramientas ni bloque de texto plano, con la casilla
   dibujada como un cuadrado para ir tachando a boli. */
@media print {
    .shopping__tools,
    .shopping__status,
    .shopping__plain { display: none !important; }

    /* La lista entera no cabe en una hoja: si se le deja el
       «break-inside: avoid» que llevan todas las .card, el navegador la
       empuja a la página siguiente y deja la primera casi en blanco. */
    .shopping {
        break-inside: auto;
        page-break-inside: auto;
        border: 0;
        padding: 0;
    }

    .shopping__list { break-inside: auto; }
    /* Que un epígrafe no se quede solo al final de la hoja. */
    .shopping .card__subtitle { break-after: avoid; page-break-after: avoid; }
    .shopping__item { break-inside: avoid; page-break-inside: avoid; }
    .shopping__row { padding: 2pt 0; }
    .shopping__row input { -webkit-appearance: none; appearance: none; border: 1pt solid #666; width: 10pt; height: 10pt; }
    .shopping__days { color: #444; }
}


/* ---------------------------------------------------------------------
   16. Plantillas de comidas, registro rápido y escáner de códigos
   --------------------------------------------------------------------- */

/* «Guardar como plantilla» bajo la lista de cada comida: el resumen del
   <details> se viste de .btn-link y el formulario aparece debajo. */
.tpl-save { margin-top: var(--space-sm); }
.tpl-save__summary { list-style: none; }
.tpl-save__summary::-webkit-details-marker { display: none; }
.tpl-save[open] > .tpl-save__summary { border-color: var(--color-primary); color: var(--color-text); }

.tpl-save__body { margin: var(--space-sm) 0 0; }
.tpl-save__form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    padding: var(--space-md);
    background: var(--color-surface-2);
    border-radius: var(--radius-sm);
}
.tpl-save__name { flex: 1 1 14rem; margin-bottom: 0; }
.tpl-save__hint { flex-basis: 100%; margin: 0; }

/* Chip de plantilla: con icono y una segunda línea corta. */
.chip--template { gap: 6px; }
.chip--template .icon { width: 1em; height: 1em; vertical-align: -.1em; color: var(--color-primary); }
.chip--template small { white-space: nowrap; }

/* Registro rápido en la tarjeta «Calorías de hoy» del inicio. */
.quick-log {
    margin-top: var(--space-md);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
}
.quick-log__title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin: 0;
    font-size: .85rem;
    font-weight: 700;
    color: var(--color-text-soft);
}
.quick-log__title .icon { width: 1em; height: 1em; vertical-align: -.12em; color: var(--color-primary); }
.quick-log__title .list__meta { font-weight: 400; margin: 0; }
.quick-log .card__note { margin-top: var(--space-xs); }
.quick-log .chip-row { margin-top: var(--space-sm); }

/* Buscador con botón «Escanear» al lado del campo (el botón solo existe con JS). */
.food-search__row { display: flex; gap: var(--space-xs); align-items: stretch; }
.food-search__row .food-search__input { flex: 1 1 auto; min-width: 0; }
.food-search__row .btn { flex: 0 0 auto; white-space: nowrap; }

/* Panel de la cámara: vídeo con marco guía y línea de lectura. */
.scanner { margin: var(--space-sm) 0; }
.scanner__stage {
    position: relative;
    aspect-ratio: 4 / 3;
    max-height: 60vh;
    overflow: hidden;
    background: #000;
    border-radius: var(--radius-sm);
}
.scanner__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.scanner__guide {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72%;
    height: 36%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(255, 255, 255, .85);
    border-radius: var(--radius-xs);
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35);
    pointer-events: none;
}
.scanner__line {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 50%;
    height: 2px;
    background: var(--color-primary);
    box-shadow: 0 0 8px var(--color-primary);
    animation: scanner-sweep 1.8s ease-in-out infinite alternate;
}
@keyframes scanner-sweep {
    from { transform: translateY(-2.2rem); }
    to   { transform: translateY(2.2rem); }
}
.scanner__close {
    position: absolute;
    top: var(--space-xs);
    right: var(--space-xs);
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font: inherit;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}
.scanner__close:hover,
.scanner__close:focus-visible { background: rgba(0, 0, 0, .85); }
.scanner__status {
    margin: var(--space-xs) 0 0;
    font-size: .85rem;
    color: var(--color-text-soft);
}
.scanner__status--error { color: var(--color-error); font-weight: 600; }

@media (min-width: 768px) {
    .scanner__stage { max-width: 32rem; max-height: 24rem; }
    .tpl-save__name { flex-basis: 20rem; }
}

@media print {
    .tpl-save,
    .quick-log,
    .scanner,
    [data-barcode-scan] { display: none !important; }
}

/* ---------------------------------------------------------------------
   16. Confianza: exportar datos, borrar cuenta, bienvenida y checklist
   --------------------------------------------------------------------- */

/* Zona de peligro del perfil (borrar la cuenta). */
.card--danger {
    border-color: color-mix(in srgb, var(--color-error) 35%, var(--color-border));
    background: color-mix(in srgb, var(--color-error) 4%, var(--color-surface));
}

.btn--danger {
    background: var(--color-error-bg);
    color: var(--color-error);
    border-color: color-mix(in srgb, var(--color-error) 45%, transparent);
}
.btn--danger:hover { background: var(--color-error); color: #fff; }

/* Indicador de pasos de la bienvenida (1/3, 2/3, 3/3). */
.onboard-steps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    list-style: none;
    margin: 0 0 var(--space-lg);
    padding: 0;
}
.onboard-steps__item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .8rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text-muted);
    font-size: .85rem;
    background: var(--color-surface);
}
.onboard-steps__item--current {
    border-color: var(--color-primary);
    color: var(--color-text);
    font-weight: 600;
    background: var(--color-primary-light);
}
.onboard-steps__item--done { color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 40%, var(--color-border)); }
.onboard-steps__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--color-surface-2);
    font-size: .75rem;
    flex-shrink: 0;
}
.onboard-steps__item--current .onboard-steps__num { background: var(--color-primary); color: var(--color-primary-text); }
.onboard-steps__item--done .onboard-steps__num { background: var(--color-success-bg); color: var(--color-success); }
.onboard-steps__num .icon { width: .85em; height: .85em; }
.onboard-steps__of { color: var(--color-text-muted); font-weight: 400; }

.onboard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}
.onboard-skip {
    text-align: center;
    margin: var(--space-md) 0;
}

/* Paso 2: vista previa de kcal y macros bajo cada tarjeta de objetivo. */
.onboard-goal-preview {
    display: block;
    margin-top: var(--space-xs);
    padding-top: var(--space-xs);
    border-top: 1px dashed var(--color-border);
    font-size: .85rem;
}
.onboard-goal-preview strong { color: var(--color-primary); }
.onboard-goal-preview__macros { display: block; color: var(--color-text-muted); font-size: .8rem; }

/* Paso 3: plantillas de rutina con el resumen de cada día. */
.onboard-templates {
    display: grid;
    gap: var(--space-md);
}
.onboard-template__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: .2rem;
}
.onboard-template__details { margin-top: var(--space-sm); }
.onboard-template__details summary {
    cursor: pointer;
    color: var(--color-primary);
    font-size: .85rem;
    font-weight: 600;
}
.onboard-template__details .list { margin-top: var(--space-xs); }

/* Tarjeta «Empieza bien» del inicio. */
.checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.checklist__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border);
}
.checklist__item:last-child { border-bottom: none; }
.checklist__icon {
    flex-shrink: 0;
    color: var(--color-text-muted);
    margin-top: .1rem;
}
.checklist__icon--done,
.checklist__item--done .checklist__icon { color: var(--color-success); }
.checklist__item--done .checklist__label { color: var(--color-text-muted); text-decoration: line-through; }
.checklist__body { flex: 1; min-width: 0; }
.checklist__label { margin: 0; font-weight: 600; }
.checklist__hint { margin: .15rem 0 0; color: var(--color-text-muted); font-size: .85rem; }
.checklist__install { margin-top: var(--space-xs); font-size: .85rem; }
.checklist__install summary { cursor: pointer; color: var(--color-primary); font-weight: 600; }
.checklist__install p { margin: .35rem 0 0; color: var(--color-text-soft); }
.checklist__install .icon { width: 1em; height: 1em; vertical-align: -.15em; }
.checklist__hide { text-align: right; margin-top: var(--space-sm); }

/* =====================================================================
   16. En el gimnasio: temporizador, progresión, modo entreno y discos

   Todo lo de aquí abajo es una mejora progresiva de workout.js: sin
   JavaScript no existe (la vista no pinta ninguno de estos elementos,
   o los pinta pero JS los deja ocultos hasta activarlos). Reutiliza las
   variables de color de la sección 1: nada de paletas nuevas, salvo los
   dos discos que se explican junto a `.plate--2-5`.
   ===================================================================== */

/* --- Cabecera del entreno: interruptor y botón de modo entreno -------- */
.workout-tools__switch { font-size: .85rem; }
.workout-tools__switch .icon { width: 1em; height: 1em; vertical-align: -.15em; }

.btn--secondary.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-text);
}

/* --- Temporizador de descanso: barra fija inferior --------------------
   En móvil se apoya justo ENCIMA de la barra de navegación (que ya es
   fixed y mide --nav-height + su hueco de safe-area); en escritorio la
   navegación deja de ser fixed (ver sección 14) y la barra baja al
   fondo del todo. */
.rest-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
    z-index: 25;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
}

.rest-bar__progress {
    height: 4px;
    width: 100%;
    background: var(--color-primary);
    transition: width .25s linear;
}
.rest-bar.is-done .rest-bar__progress { background: var(--color-success); width: 0 !important; }

.rest-bar__body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem var(--space-md);
    max-width: 960px;
    margin: 0 auto;
    padding: .55rem var(--space-md) .7rem;
}

.rest-bar__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 8rem;
}
.rest-bar__label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-muted);
}
.rest-bar.is-done .rest-bar__label { color: var(--color-success); }
.rest-bar__name {
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rest-bar__time {
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-primary);
    flex: 0 0 auto;
}
.rest-bar.is-done .rest-bar__time { color: var(--color-success); }

.rest-bar__actions {
    display: flex;
    gap: .4rem;
    flex: 1 1 100%;
    justify-content: flex-end;
}
.rest-bar.is-done .rest-bar__actions { display: none; }

/* Con la barra visible, el contenido necesita ese hueco extra para no
   quedar tapado detrás (además del que ya reserva `body` para el nav). */
:root.has-rest-bar body { padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 5.5rem); }

@media (min-width: 640px) {
    .rest-bar__actions { flex: 0 0 auto; justify-content: flex-start; }
}

@media (min-width: 900px) {
    /* La navegación ya no es fixed (sección 14): la barra baja al fondo. */
    .rest-bar { bottom: 0; }
    :root.has-rest-bar body { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4.5rem); }
}

/* --- Progresión sugerida: píldora bajo "última vez" -------------------- */
.suggestion {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    margin: 0 0 var(--space-sm);
    border: 1px solid var(--color-info);
    border-radius: var(--radius-sm);
    background: var(--color-info-bg);
    color: var(--color-text);
    font-size: .85rem;
}
.suggestion .icon { width: 1.1em; height: 1.1em; flex-shrink: 0; color: var(--color-info); }
.suggestion--increase { border-color: var(--color-success); background: var(--color-success-bg); }
.suggestion--increase .icon { color: var(--color-success); }
.suggestion--consolidate { border-color: var(--color-warning); background: var(--color-warning-bg); }
.suggestion--consolidate .icon { color: var(--color-warning); }

.suggestion__text { flex: 1 1 auto; min-width: 0; }
.suggestion__label {
    font-weight: 700;
    text-transform: uppercase;
    font-size: .68rem;
    letter-spacing: .03em;
    opacity: .8;
    margin-right: .2rem;
}
.suggestion__use { flex-shrink: 0; margin-left: auto; }
.suggestion__use.is-used { color: var(--color-success); border-color: var(--color-success); }

/* --- Calculadora de discos ---------------------------------------------
   El botón «Discos» y su panel viven en un envoltorio con posición
   absoluta, fuera del flujo normal: si colgaran directos del campo de
   peso, ese campo se haría más alto que sus vecinos (reps, RPE) de la
   misma fila de la rejilla y `align-items: end` desmontaba el formulario
   entero (la etiqueta «Reps» quedaba flotando a media altura). Al ser
   absoluto, el campo de peso mide lo mismo que los demás y no desplaza
   nada. Se abre hacia ARRIBA (sobre «Última vez» y la tabla, que son
   consulta, no acción) en vez de hacia abajo: si abriera hacia abajo
   taparía las reps, el RPE o «Añadir serie», que es justo lo que hace
   falta tocar justo después de mirar los discos (más notorio en modo
   entreno, con la rejilla de dos columnas y controles más altos). */
.field--weight { position: relative; }
/* Etiqueta con el botón «Discos» a la derecha, sin sacarlo del flujo. */
.field .field__label--with-action { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.field__label--with-action .plates-toggle { min-height: 1.6rem; padding: .1rem .55rem; font-size: .72rem; margin: -.2rem 0; }

.plates-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    z-index: 5;
    margin-bottom: .35rem;
}
.plates-toggle.is-active { color: var(--color-primary); border-color: var(--color-primary); }

.plates {
    margin-bottom: .35rem;
    padding: var(--space-sm) var(--space-md) var(--space-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
}

.plates__bar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    font-size: .8rem;
}
.plates__bar-label { font-weight: 600; color: var(--color-text-soft); }
.plates__bar-options { display: flex; gap: .4rem; }
.plates__bar-btn {
    min-height: 1.9rem;
    padding: .2rem .6rem;
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    color: var(--color-text-soft);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    cursor: pointer;
}
.plates__bar-btn[aria-pressed="true"] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-text);
}

.plates__side {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .4rem;
    min-height: 2.8rem;
}

/* Fichas de disco: un color por peso, calcado de los discos de gimnasio
   de verdad (rojo 25, azul 20, amarillo 15, verde 10, blanco 5, negro
   2,5/1,25). Los cuatro primeros reutilizan los pares color/fondo que ya
   existen para etiquetas y alertas, así se adaptan solos al tema oscuro.
   El blanco reutiliza la superficie de una tarjeta. El negro es la única
   excepción de la hoja: un disco negro tiene que seguir viéndose negro
   también en modo oscuro, así que lleva un color fijo (ver README). */
.plate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    line-height: 1;
    box-shadow: var(--shadow);
    flex-shrink: 0;
}
.plate--25   { width: 2.6rem;  height: 2.6rem;  font-size: .8rem;  background: var(--color-error-bg);   color: var(--color-error);   border: 2px solid var(--color-error); }
.plate--20   { width: 2.35rem; height: 2.35rem; font-size: .76rem; background: var(--color-info-bg);    color: var(--color-info);    border: 2px solid var(--color-info); }
.plate--15   { width: 2.15rem; height: 2.15rem; font-size: .72rem; background: var(--color-warning-bg); color: var(--color-warning); border: 2px solid var(--color-warning); }
.plate--10   { width: 1.95rem; height: 1.95rem; font-size: .68rem; background: var(--color-success-bg); color: var(--color-success); border: 2px solid var(--color-success); }
.plate--5    { width: 1.75rem; height: 1.75rem; font-size: .64rem; background: var(--color-surface);    color: var(--color-text);    border: 2px solid var(--color-border-strong); }
.plate--2-5  { width: 1.55rem; height: 1.55rem; font-size: .6rem;  background: #1f2937; color: #f4f5f7; border: 2px solid #111827; }
.plate--1-25 { width: 1.4rem;  height: 1.4rem;  font-size: .58rem; background: #1f2937; color: #f4f5f7; border: 2px solid #111827; }

.plates__note { margin: var(--space-sm) 0 0; font-size: .8rem; color: var(--color-text-soft); }
.plates__note.is-warning { color: var(--color-warning); font-weight: 600; }

/* --- Modo entreno --------------------------------------------------- */

/* Los pasos ±y «Repetir última serie» se crean siempre en el DOM (para no
   reconstruir el formulario al activar el modo) pero solo se ven aquí. */
.stepper { display: flex; align-items: stretch; gap: .4rem; }
/* flex-basis en 0 (no "auto"): si no, el ancho del 100% del input pelea
   con el reparto de espacio y el campo se queda casi sin sitio. */
.stepper input { flex: 1 1 0; min-width: 0; width: auto; }
.stepper__btn { display: none; }
.repeat-last { display: none; }

:root.is-training-mode .stepper__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 3rem;
    min-height: 2.75rem;
    font: inherit;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-soft);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
:root.is-training-mode .stepper__btn:active { background: var(--color-primary-light); color: var(--color-primary); }

:root.is-training-mode .repeat-last { display: inline-flex; }

/* En pantallas anchas el formulario pasa a 4 columnas + acciones (ver
   sección 14) y cada campo apenas mide 130 px: ahí no caben ni el paso
   ±2,5 ni el ±1 junto al número. En modo entreno se vuelve a la rejilla
   de dos columnas del móvil (bastante más ancha por campo) sea cual sea
   el tamaño de pantalla: aquí se prioriza el tamaño del control sobre
   la densidad. */
:root.is-training-mode .set-form { grid-template-columns: 1fr 1fr; }
:root.is-training-mode .set-form .field--actions { grid-column: 1 / -1; }

/* Entradas y botones más grandes: menos precisión hace falta entre serie
   y serie cuando llevas el móvil en la mano y las manos llenas de tiza. */
:root.is-training-mode .set-form input[type="number"] {
    font-size: 1.2rem;
    padding: .9rem;
    min-height: 3.4rem;
}
:root.is-training-mode .set-form .btn {
    min-height: 3.4rem;
    font-size: 1.05rem;
}
:root.is-training-mode .field--actions { gap: var(--space-sm); }
:root.is-training-mode .field--actions .btn { flex: 1 1 0; }

/* Resumen compacto: solo el número importa entre serie y serie. */
:root.is-training-mode .stat__label { display: none; }
:root.is-training-mode .stat { padding: .5rem var(--space-sm); }
:root.is-training-mode .stat__value { font-size: 1.15rem; }

/* Fuera lo que no hace falta mientras estás entrenando. */
:root.is-training-mode .add-exercise-card,
:root.is-training-mode .delete-session-form,
:root.is-training-mode .footer,
:root.is-training-mode .disclaimer { display: none; }

@media (max-width: 499px) {
    :root.is-training-mode .stepper__btn { width: 2.6rem; }
}

/* ---------------------------------------------------------------------
   16. Retención: logros y tarjeta de compartir
   --------------------------------------------------------------------- */

/* Logros: fila compacta en el dashboard (insignias conseguidas). */
.achievement-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.achievement-chip {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    background: var(--color-primary-light);
    border-radius: var(--radius-sm);
    padding: .5rem .75rem;
    font-size: .85rem;
}

.achievement-chip__icon {
    display: inline-flex;
    color: var(--color-primary);
    flex-shrink: 0;
}

.achievement-chip strong { display: block; color: var(--color-text); }
.achievement-chip small { color: var(--color-text-muted); }

/* Logros: rejilla completa en /logros. */
.achievement-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
}

@media (min-width: 640px) {
    .achievement-grid { grid-template-columns: repeat(2, 1fr); }
}

.achievement-badge {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-primary-light);
}

.achievement-badge--pending {
    background: var(--color-surface-2);
    opacity: .6;
}

.achievement-badge__icon {
    display: inline-flex;
    color: var(--color-primary);
    flex-shrink: 0;
}

.achievement-badge--pending .achievement-badge__icon { color: var(--color-text-muted); }

.achievement-badge__body { display: flex; flex-direction: column; gap: .15rem; }
.achievement-badge__body strong { color: var(--color-text); }
.achievement-badge__body span { color: var(--color-text-soft); font-size: .9rem; }
.achievement-badge__date { font-size: .8rem; color: var(--color-text-muted) !important; }

/* Tarjeta de compartir: previsualización de la imagen generada. */
.share-card { text-align: center; }

.share-preview {
    max-width: 100%;
    width: 340px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--space-md);
}

.share-card .actions-row { justify-content: center; }
   17. Sin conexión y avisos en el móvil

   Tres piezas, todas con las variables que ya existen arriba:
     .conn-indicator  icono discreto en la barra superior
     .offline-bar     aviso fijo de «guardado sin conexión»
     .offline-page    la página /offline y las filas pendientes de enviar
   --------------------------------------------------------------------- */

/* Indicador de conexión. Lo inyecta offline.js en .topbar__actions para
   no tocar nav.php; solo se ve cuando falta red o queda algo por enviar. */
.conn-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 var(--space-xs);
    height: 2.25rem;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
}
.conn-indicator .icon { width: 1.15rem; height: 1.15rem; vertical-align: 0; }
.conn-indicator__icon { display: inline-flex; }
.conn-indicator__count {
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 999px;
    background: var(--color-warning-bg);
    color: var(--color-warning);
}
.conn-indicator--offline { color: var(--color-error); background: var(--color-error-bg); }
.conn-indicator--pending { color: var(--color-warning); background: var(--color-warning-bg); }
.conn-indicator--pending .conn-indicator__count { background: var(--color-surface); }

/* Barra de aviso. Va abajo y por encima de la navegación móvil, que es
   donde la vista ya está mientras se apuntan series. */
.offline-bar {
    position: fixed;
    left: var(--space-sm);
    right: var(--space-sm);
    bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + var(--space-xs));
    z-index: 40;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius);
    border: 1px solid var(--color-warning);
    background: var(--color-warning-bg);
    color: var(--color-warning);
    box-shadow: var(--shadow-lg);
    font-size: .85rem;
    font-weight: 600;
}
.offline-bar__icon { display: inline-flex; flex-shrink: 0; }
.offline-bar__icon .icon { width: 1.25rem; height: 1.25rem; vertical-align: 0; }
.offline-bar__text { flex: 1; min-width: 0; }
.offline-bar__action {
    flex-shrink: 0;
    border: 1px solid currentColor;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 700;
    padding: 4px var(--space-sm);
    border-radius: var(--radius-xs);
    cursor: pointer;
}
.offline-bar__action:hover { background: var(--color-surface); }
.offline-bar__action:disabled { opacity: .6; cursor: default; }

.offline-bar--error {
    border-color: var(--color-error);
    background: var(--color-error-bg);
    color: var(--color-error);
}
.offline-bar--done {
    border-color: var(--color-success);
    background: var(--color-success-bg);
    color: var(--color-success);
}

/* Series que aún están en la cola: se ven, pero se distinguen de las
   que el servidor ya ha aceptado. */
.sets-table tr.is-pending { opacity: .75; }
.sets-table tr.is-pending td:first-child { border-left: 3px solid var(--color-warning); }

/* Página /offline */
.offline-page { text-align: left; }
.offline-page__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto var(--space-md);
    border-radius: 50%;
    background: var(--color-warning-bg);
    color: var(--color-warning);
}
.offline-page__mark .icon { width: 1.75rem; height: 1.75rem; vertical-align: 0; }
.offline-page .auth-card__title,
.offline-page .auth-card__subtitle { text-align: center; }
.offline-page__subtitle {
    font-size: .95rem;
    margin: var(--space-lg) 0 var(--space-xs);
}
.offline-page__list {
    margin: 0 0 var(--space-lg);
    padding-left: var(--space-lg);
    color: var(--color-text-soft);
    font-size: .9rem;
    line-height: 1.6;
}
.offline-page__list li + li { margin-top: var(--space-xs); }

@media (min-width: 900px) {
    /* En escritorio la navegación ya no está fija abajo. */
    .offline-bar {
        left: auto;
        right: var(--space-lg);
        bottom: var(--space-lg);
        max-width: 30rem;
    }
}

@media print {
    .offline-bar,
    .conn-indicator { display: none !important; }
}


/* =====================================================================
   18. gym-avanzado: superseries, calentamiento, notas y resumen

   Cuatro mejoras del módulo de gimnasio. Como el resto de la hoja, todo
   sale de las variables de color de la sección 1 (nada de colores fijos,
   para que el modo oscuro funcione solo) y los componentes reutilizan
   .card, .btn, .list y .tag.
   ===================================================================== */

/* --- Superseries ------------------------------------------------------
   Los ejercicios encadenados se pintan unidos con una línea vertical a la
   izquierda: el grupo se lee de un vistazo sin cambiar el orden ni la
   estructura de la lista. */
.superset-tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: .02em;
}

.superset-tag .icon { width: 1em; height: 1em; vertical-align: -.1em; }

.superset-tag--block {
    margin: 0 0 var(--space-xs);
    text-transform: none;
    letter-spacing: 0;
    font-size: .82rem;
}

.superset-item {
    border-left: 3px solid var(--color-primary);
    padding-left: var(--space-sm);
    background: var(--color-primary-light);
}

.superset-item--first { border-top-left-radius: var(--radius-sm); }
.superset-item--last { border-bottom-left-radius: var(--radius-sm); }

/* Las tarjetas del grupo se pegan entre sí (sin margen ni esquinas
   redondeadas entre medias) para que se lean como un bloque único. */
.superset-block {
    border-left: 3px solid var(--color-primary);
}

.superset-block:not(.superset-block--last) {
    margin-bottom: var(--space-xs);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.superset-block:not(.superset-block--first) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* El ejercicio al que se salta tras anotar una serie del anterior. */
.exercise-block.is-next-up {
    box-shadow: var(--focus-ring);
}

/* --- Nota propia del ejercicio ---------------------------------------- */
.exercise-note {
    margin: var(--space-xs) 0 var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-surface-2);
    border-radius: var(--radius-sm);
}

.exercise-note__text {
    margin: 0;
    font-size: .88rem;
    color: var(--color-text-soft);
}

.exercise-note__text.is-empty {
    color: var(--color-text-muted);
    font-style: italic;
}

.exercise-note__editor { margin-top: var(--space-xs); }
.exercise-note__form { margin-top: var(--space-xs); }
.exercise-note__form .field { margin-bottom: var(--space-xs); }

.exercise-note__saved {
    margin-left: var(--space-xs);
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-success);
}

/* Nota en el catálogo de ejercicios. */
.exercise-note-chip {
    display: block;
    margin-top: .2rem;
    font-size: .85rem;
    color: var(--color-text-soft);
}

.exercise-note-chip .icon { width: 1em; height: 1em; vertical-align: -.15em; }

/* --- Calentamiento propuesto ------------------------------------------ */
.warmup {
    grid-column: 1 / -1;
    margin-top: var(--space-sm);
    padding: var(--space-sm);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.warmup__title {
    margin: 0 0 var(--space-xs);
    font-size: .95rem;
}

.warmup__list {
    margin: 0 0 var(--space-xs);
    padding: 0;
    list-style: none;
}

.warmup__row {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: .15rem var(--space-xs);
    padding: .35rem 0;
    border-bottom: 1px solid var(--color-border);
}

.warmup__row:last-child { border-bottom: 0; }

.warmup__percent {
    grid-row: span 2;
    align-self: center;
    font-weight: 700;
    color: var(--color-primary);
}

.warmup__load { font-weight: 600; }

.warmup__plates {
    font-size: .82rem;
    color: var(--color-text-muted);
}

.warmup__note {
    margin: 0 0 var(--space-xs);
    font-size: .82rem;
    color: var(--color-text-muted);
}

/* --- Resumen del entreno ---------------------------------------------- */
.summary-card { position: relative; overflow: hidden; }

.trend {
    display: block;
    margin-top: .15rem;
    font-size: .8rem;
    font-weight: 600;
}

.trend--up { color: var(--color-success); }
.trend--down { color: var(--color-error); }
.trend--flat { color: var(--color-text-muted); }

.record-item__value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
}

.record-item__value small {
    font-size: .75rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.record-item .list__title .icon {
    width: 1em;
    height: 1em;
    vertical-align: -.15em;
    color: var(--color-warning);
}

/* --- Confeti ----------------------------------------------------------
   Papelitos que caen sobre la tarjeta del resumen cuando hay algún
   récord. Los crea workout-summary.js y cada uno trae su retraso, su
   duración, su desvío lateral (--confetti-drift) y su giro
   (--confetti-turn) en atributos de estilo. */
.confetti {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.confetti__piece {
    position: absolute;
    top: -12px;
    width: 8px;
    height: 14px;
    border-radius: 2px;
    opacity: 0;
    animation-name: confetti-fall;
    animation-timing-function: cubic-bezier(.25, .6, .4, 1);
    animation-fill-mode: forwards;
}

@keyframes confetti-fall {
    0%   { opacity: 0; transform: translate3d(0, -20px, 0) rotate(0); }
    10%  { opacity: 1; }
    100% { opacity: 0; transform: translate3d(var(--confetti-drift, 0), 320px, 0) rotate(var(--confetti-turn, 180deg)); }
}

@media (prefers-reduced-motion: reduce) {
    /* Cinturón y tirantes: el script tampoco los crea. */
    .confetti { display: none; }
}

/* =====================================================================
   18. nutricion-avanzada: micronutrientes, nevera y sugerencias

   Tres bloques pequeños, todos con las variables de color de la
   sección 1 (nada de colores fijos, así el modo oscuro sale solo):

     .micro-row / .micro-note  micronutrientes del día y avisos suaves
     .fridge / .idea           «¿qué tienes en la nevera?» e ideas de IA
     .chip--suggest            atajo de «sueles tomar a esta hora»
   ===================================================================== */

/* --- Micronutrientes del resumen del día ----------------------------- */
.micro-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xs);
    margin: var(--space-sm) 0 0;
    padding: 0;
    list-style: none;
}

.micro {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-xs);
    padding: .35rem .6rem;
    background: var(--color-surface-2);
    border-radius: var(--radius-sm);
    font-size: .8rem;
}
.micro__label { color: var(--color-text-muted); }
.micro__value { color: var(--color-text); font-weight: 600; white-space: nowrap; }
.micro__value small { color: var(--color-text-muted); font-weight: 400; }

/* Avisos: un aviso, no una alarma. Fondo suave y sin iconos rojos. */
.micro-note {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: var(--space-sm) 0 0;
    padding: .5rem .7rem;
    border-radius: var(--radius-sm);
    font-size: .85rem;
    line-height: 1.45;
    background: var(--color-surface-2);
    color: var(--color-text-soft);
}
.micro-note .icon { width: 1.1em; height: 1.1em; flex: none; margin-top: .15em; }
.micro-note--over  { background: var(--color-warning-bg); color: var(--color-warning); }
.micro-note--under { background: var(--color-info-bg);    color: var(--color-info); }

/* --- Sugerencias por franja horaria ---------------------------------- */
.suggest-card .chip-row { margin-top: var(--space-sm); }

.chip--suggest { gap: 6px; }
.chip--suggest .icon { width: 1em; height: 1em; vertical-align: -.1em; color: var(--color-primary); }
.chip--suggest small { white-space: nowrap; }

/* --- ¿Qué tienes en la nevera? --------------------------------------- */
.fridge__chips { margin-top: var(--space-sm); }

.chip--ingredient { padding-right: .6rem; }
.chip--ingredient::after {
    content: '×';
    margin-left: .35rem;
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1;
}
.chip--ingredient:hover::after { color: var(--color-primary); }

.fridge__ai {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}
.fridge__ai .btn .icon { width: 1em; height: 1em; vertical-align: -.15em; }

/* --- Una propuesta de receta de la IA -------------------------------- */
.idea {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
.idea__title { margin: 0; font-size: 1rem; }
.idea__meta  { margin: .25rem 0 0; font-size: .8rem; color: var(--color-text-soft); }
.idea__why   { margin: var(--space-xs) 0 0; font-size: .85rem; color: var(--color-text-soft); }

.idea__label {
    margin: var(--space-sm) 0 .2rem;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-muted);
}
.idea__list {
    margin: 0;
    padding-left: 1.1rem;
    font-size: .85rem;
    line-height: 1.55;
    color: var(--color-text);
}
.idea form { margin-top: var(--space-sm); }
.idea .btn .icon { width: 1em; height: 1em; vertical-align: -.15em; }

@media (min-width: 600px) {
    .micro-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* =====================================================================
   18. Registro de series por voz, agua y ayuno intermitente

   Reutiliza las variables de color de la sección 1: nada de paletas
   nuevas. El botón de micrófono y el chip de voz.js viven junto al
   formulario de «Añadir serie» (sección 16); la tarjeta de agua y la
   de ayuno son tarjetas .card--compact normales.
   ===================================================================== */

/* --- Botón grande, para «Empezar ayuno» / «Terminar ayuno» ------------ */
.btn--lg { min-height: 3.25rem; padding: .85rem 1.5rem; font-size: 1.05rem; font-weight: 700; }

/* --- Micrófono y chip de confirmación (registro de series por voz) --- */
.voice-mic { flex-shrink: 0; }
.voice-mic .icon { width: 1.1rem; height: 1.1rem; vertical-align: -.15em; }
.voice-mic.is-listening {
    background: var(--color-error-bg);
    border-color: var(--color-error);
    color: var(--color-error);
    animation: voice-pulse 1.1s ease-in-out infinite;
}
@keyframes voice-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--color-error-bg); }
    50% { box-shadow: 0 0 0 6px transparent; }
}

.voice-chip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    width: 100%;
    margin-top: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-2);
}
.voice-chip__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.voice-chip__text strong { font-size: .95rem; }
.voice-chip__heard {
    color: var(--color-text-muted);
    font-size: .8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 16rem;
}
.voice-chip__actions { display: flex; gap: var(--space-xs); flex-shrink: 0; }
.voice-chip--error {
    border-color: var(--color-error);
    background: var(--color-error-bg);
    color: var(--color-error);
    font-size: .85rem;
}

/* --- Tarjeta «Agua» ---------------------------------------------------- */
.water-card .card__title .icon { width: 1.1rem; height: 1.1rem; vertical-align: -.15em; color: var(--color-info, var(--color-primary)); }
.water-bar {
    position: relative;
    width: 100%;
    height: .6rem;
    border-radius: 999px;
    background: var(--color-surface-2);
    overflow: hidden;
}
.water-bar__fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #38bdf8, #0284c7);
    transition: width .3s ease;
}
.water-card__amount { margin: var(--space-xs) 0 0; font-size: .9rem; color: var(--color-text-soft); }
.water-card__amount strong { font-size: 1.1rem; color: var(--color-text); }
.water-card__actions { flex-wrap: wrap; }

/* --- Ayuno intermitente: temporizador circular ------------------------ */
.fasting-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-md); }
.fasting-timer { position: relative; width: 13rem; max-width: 100%; aspect-ratio: 1; }
.fasting-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.fasting-ring__bg, .fasting-ring__progress {
    fill: none;
    stroke-width: 12;
    stroke-linecap: round;
}
.fasting-ring__bg { stroke: var(--color-surface-2); }
.fasting-ring__progress {
    stroke: var(--color-primary);
    stroke-dasharray: calc(2 * 3.14159 * 88);
    stroke-dashoffset: calc(2 * 3.14159 * 88 * (1 - (var(--pct, 0) / 100)));
    transition: stroke-dashoffset .4s ease;
}
.fasting-ring__inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: var(--space-md);
    text-align: center;
}
.fasting-ring__value { font-size: 1.6rem; font-weight: 800; }
.fasting-ring__label { font-size: .8rem; color: var(--color-text-muted); }
.fasting-card__action { width: 100%; max-width: 22rem; }

@media (min-width: 900px) {
    .fasting-timer { width: 16rem; }
}

/* =====================================================================
   18. Retos con amigos y perfil público

   Reutiliza `.bar`/`.bar__fill` (sección de macros) para el ranking de
   los retos, con su propio color de relleno. El perfil público vive en
   su propia página sin el layout de la aplicación (sin nav ni topbar),
   así que trae aquí sus propias reglas de cabecera y pie.
   ===================================================================== */

/* --- Campo con prefijo fijo (el enlace público, .../u/) --------------- */
.field__prefix-group {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-surface);
}
.field__prefix-group:focus-within { border-color: var(--color-primary); }
.field__prefix {
    display: flex;
    align-items: center;
    padding: 0 var(--space-sm);
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    font-size: .85rem;
    white-space: nowrap;
}
.field__prefix-group input {
    border: none;
    border-radius: 0;
    min-height: 2.4rem;
}
.field__prefix-group input:focus { outline: none; box-shadow: none; }

.challenge-block { padding: var(--space-md) 0; border-top: 1px solid var(--color-border); }
.challenge-block:first-of-type { border-top: none; padding-top: 0; }
.challenge-block__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.challenge-ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.challenge-ranking__row {
    display: grid;
    grid-template-columns: 2rem 1fr auto;
    align-items: center;
    column-gap: var(--space-sm);
    row-gap: 2px;
}
.challenge-ranking__row .bar { grid-column: 1 / -1; }
.challenge-ranking__pos { font-weight: 700; color: var(--color-text-muted); }
.challenge-ranking__name { font-weight: 600; }
.challenge-ranking__value { font-size: .85rem; color: var(--color-text-muted); white-space: nowrap; }
.challenge-ranking__row.is-me .challenge-ranking__name { color: var(--color-primary); }
.bar__fill--reto { background: var(--color-primary); }

/* --- Tarjeta compacta del inicio --------------------------------------- */
.challenge-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}
.challenge-summary__rank {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary);
}

/* --- Perfil público (/u/{slug}): página propia, sin el layout normal --- */
.public-profile {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--space-lg) var(--space-md) var(--space-xl);
    overflow-x: hidden;
}
.public-profile__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}
.public-profile__name {
    font-size: 1.6rem;
    font-weight: 700;
    margin: var(--space-md) 0 var(--space-xs);
}
.public-profile__hero { text-align: center; margin-bottom: var(--space-lg); }
.public-profile__avatar {
    width: 4rem;
    height: 4rem;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--color-primary-light);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 700;
}
.public-profile__footer {
    text-align: center;
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: .85rem;
}
.public-profile .card { margin-bottom: var(--space-md); }
.public-routine-day + .public-routine-day { margin-top: var(--space-md); }
.public-routine-day__name { font-weight: 600; margin: 0 0 var(--space-xs); }
.public-routine-day__exercises { list-style: none; margin: 0; padding: 0; color: var(--color-text-soft); font-size: .9rem; }
.public-routine-day__exercises li { padding: 2px 0; }

/* =====================================================================
   18. entrenador-y-admin

   Tres pantallas nuevas: la lista de clientes con su semáforo, la ficha
   de un cliente y el panel de administración. Todo con las variables de
   color de la sección 1 (nada de colores fijos, para que el modo oscuro
   siga funcionando solo) y los componentes de siempre: .card, .list,
   .stats, .btn. Lo único de verdad nuevo son el semáforo de adherencia,
   la gráfica de barras del panel y la tabla de errores.
   ===================================================================== */

/* --- Semáforo de adherencia ------------------------------------------
   Nunca va el color solo: siempre lleva su texto («Al día», «Flojeando»,
   «Sin actividad») al lado, para quien no distingue verde de rojo. */
.coach-light {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}
.coach-light__dot {
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    flex: 0 0 auto;
}
.coach-light--bien    { color: var(--color-success); }
.coach-light--regular { color: var(--color-warning); }
.coach-light--mal     { color: var(--color-error); }
.coach-light--bien    .coach-light__dot { background: var(--color-success); }
.coach-light--regular .coach-light__dot { background: var(--color-warning); }
.coach-light--mal     .coach-light__dot { background: var(--color-error); }

/* --- Lista de clientes ----------------------------------------------- */
.coach-clients { list-style: none; margin: 0; padding: 0; }
.coach-client + .coach-client { border-top: 1px solid var(--color-border); }

.coach-client__link {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "head go"
        "bar  go"
        "facts go";
    gap: .45rem var(--space-sm);
    align-items: center;
    padding: var(--space-sm) 0;
    text-decoration: none;
    color: inherit;
}
.coach-client__link:hover .coach-client__name { color: var(--color-primary); }

.coach-client__head {
    grid-area: head;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
}
.coach-client__name { font-weight: 600; color: var(--color-text); }

.coach-client__bar {
    grid-area: bar;
    display: block;
    height: .4rem;
    border-radius: 999px;
    background: var(--color-surface-2);
    overflow: hidden;
}
.coach-client__fill { display: block; height: 100%; border-radius: 999px; }
.coach-client__fill--bien    { background: var(--color-success); }
.coach-client__fill--regular { background: var(--color-warning); }
.coach-client__fill--mal     { background: var(--color-error); }

.coach-client__facts {
    grid-area: facts;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem var(--space-sm);
    font-size: .8rem;
    color: var(--color-text-muted);
}
.coach-fact { display: inline-flex; align-items: center; gap: .3rem; }
.coach-fact .icon { width: 1em; height: 1em; vertical-align: -.1em; }

.coach-client__go { grid-area: go; color: var(--color-text-muted); display: flex; }
.coach-client__go .icon { width: 1.1rem; height: 1.1rem; }

/* --- Ficha del cliente: los dos formularios de asignar --------------- */
.coach-assign { margin-top: var(--space-md); }
.coach-assign + .coach-assign {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}

/* --- Notas del entrenador (las ve el cliente en su inicio) ----------- */
.coach-notes { list-style: none; margin: var(--space-md) 0 0; padding: 0; }
.coach-note + .coach-note { margin-top: var(--space-sm); }
.coach-note__body {
    margin: 0;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.5;
}
.coach-note__meta {
    margin: .2rem 0 0;
    font-size: .8rem;
    color: var(--color-text-muted);
}

/* --- Invitación de entrenador en el inicio --------------------------- */
.coach-invite { border-left: 3px solid var(--color-primary); }
.coach-invite__lead { margin: 0 0 var(--space-xs); color: var(--color-text-soft); }
.coach-invite__list {
    list-style: none;
    margin: 0 0 var(--space-md);
    padding: 0;
    display: grid;
    gap: .35rem;
    font-size: .9rem;
}
.coach-invite__list li { display: flex; align-items: center; gap: .5rem; }
.coach-invite__list .icon { width: 1.1em; height: 1.1em; color: var(--color-primary); flex: 0 0 auto; }
.coach-invite__note {
    margin: 0 0 var(--space-md);
    font-size: .85rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}
.coach-invite__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* --- Panel de administración: gráfica de altas ----------------------- */
.admin-chart {
    display: flex;
    align-items: flex-end;
    gap: .25rem;
    height: 9rem;
    margin-top: var(--space-sm);
    overflow-x: auto;
}
.admin-chart__col {
    flex: 1 1 0;
    min-width: 1.6rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: .2rem;
}
.admin-chart__value { font-size: .7rem; color: var(--color-text-muted); }
.admin-chart__bar {
    display: block;
    width: 100%;
    max-width: 2rem;
    background: var(--color-primary);
    border-radius: 3px 3px 0 0;
    min-height: 3px;
}
.admin-chart__label {
    font-size: .65rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* --- Panel de administración: tablas --------------------------------- */
.admin-subtitle {
    margin: var(--space-lg) 0 var(--space-xs);
    font-size: .95rem;
    font-weight: 600;
}
.table-wrap { overflow-x: auto; }
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}
.admin-table th,
.admin-table td {
    text-align: left;
    padding: .45rem .5rem;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}
.admin-table th { color: var(--color-text-muted); font-weight: 600; }
.admin-table tr:last-child td { border-bottom: none; }

/* --- Panel de administración: errores recientes ---------------------- */
.admin-errors {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 22rem;
    overflow-y: auto;
}
.admin-error {
    display: grid;
    gap: .1rem;
    padding: .4rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: .8rem;
}
.admin-error:last-child { border-bottom: none; }
.admin-error__time { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.admin-error__text {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--color-error);
    word-break: break-word;
}

/* --- Panel de administración: lista de usuarios ---------------------- */
.admin-search { display: grid; gap: var(--space-sm); }
.admin-search .field { margin: 0; }

.admin-user__actions { flex-wrap: wrap; gap: var(--space-xs); }
.admin-role { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
.admin-role select { width: auto; min-width: 9rem; }

.admin-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    flex-wrap: wrap;
}
.admin-pager__info { font-size: .85rem; color: var(--color-text-muted); }

@media (min-width: 700px) {
    .admin-search {
        grid-template-columns: 1fr auto;
        align-items: end;
    }

    .coach-client__link {
        grid-template-columns: 1fr 10rem auto;
        grid-template-areas:
            "head bar go"
            "facts bar go";
        gap: .3rem var(--space-md);
    }
}

/* --- Barra de navegación con 7 u 8 apartados --------------------------
   Los roles de entrenador y administración añaden hasta dos apartados
   más. Con siete u ocho, las etiquetas («Nutrición» es la más larga) ya
   no caben en un móvil de 390 px y empujaban la página a lo ancho. En
   ese caso, y solo en ese, se aprieta la barra: los enlaces pueden
   encogerse por debajo de su texto, el icono deja de tener ancho fijo y
   la etiqueta se corta con puntos suspensivos antes que desbordar. */
.mainnav--dense .mainnav__link {
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
}
.mainnav--dense .mainnav__icon { width: 2.25rem; }
.mainnav--dense .mainnav__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .65rem;
}

@media (min-width: 420px) {
    .mainnav--dense .mainnav__icon { width: 2.75rem; }
    .mainnav--dense .mainnav__label { font-size: .7rem; }
}

/* =====================================================================
   18. Cuerpo y progreso

   El apartado /cuerpo (medidas y fotos), la tarjeta «Tu gasto real», el
   mapa de calor anual de /gym/progreso y la página de importar datos.

   Como en el resto del archivo, ni un color fijo: todo sale de las
   variables de la sección 1, así que el modo oscuro se resuelve solo.
   Los cuatro niveles del mapa de calor se derivan del color principal
   con color-mix, que es lo que mantiene la escala coherente en los dos
   temas sin repetir la paleta.
   ===================================================================== */

/* --- Formulario de medidas ------------------------------------------ */
.measure-grid {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: 1fr;
    margin-bottom: var(--space-md);
}

/* Una fecha no es un número grande: se lee mejor algo más pequeña. */
.stat__value--date { font-size: 1.05rem; }

/* --- Fotos de progreso ---------------------------------------------- */
.photo-strip,
.photo-grid {
    list-style: none;
    margin: 0 0 var(--space-md);
    padding: 0;
}

/* Tira horizontal de la portada de /cuerpo: se desplaza con el dedo. */
.photo-strip {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    padding-bottom: var(--space-xs);
    -webkit-overflow-scrolling: touch;
}
.photo-strip__item {
    flex: 0 0 8.5rem;
    text-align: center;
}
.photo-strip__img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
}
.photo-strip__caption {
    display: block;
    margin-top: .35rem;
    font-size: .78rem;
    line-height: 1.3;
    color: var(--color-text-muted);
}

/* Galería de /cuerpo/fotos. */
.photo-grid {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.photo-grid__item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-xs);
    background: var(--color-surface-2);
    min-width: 0;
}
.photo-grid__img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--radius-xs);
    display: block;
}
.photo-grid__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin: var(--space-xs) 0 .25rem;
    font-size: .85rem;
}
.photo-grid__notes {
    margin: 0 0 var(--space-xs);
    font-size: .8rem;
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

/* --- Comparar dos fotos --------------------------------------------- */
.compare {
    display: grid;
    gap: var(--space-sm);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: var(--space-md);
}
.compare__side { margin: 0; min-width: 0; }
.compare__img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
    display: block;
}
.compare__caption {
    margin-top: .4rem;
    font-size: .8rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}

/* El fundido: las dos fotos en el mismo hueco, la de arriba con la
   opacidad que mande el deslizador (body.js). */
.compare-fade__stage {
    position: relative;
    width: 100%;
    max-width: 22rem;
    margin: 0 auto var(--space-md);
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
}
.compare-fade__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.compare-fade__img--top { opacity: .5; }
.compare-fade input[type="range"] {
    width: 100%;
    accent-color: var(--color-primary);
}

/* --- Tarjeta «Tu gasto real» ---------------------------------------- */
.energy-card .big-number { margin-bottom: var(--space-xs); }
.energy-card .inline-form { margin-top: var(--space-sm); }
.energy-card .switch { margin-bottom: var(--space-sm); }

/* --- Mapa de calor anual -------------------------------------------- */
.heatmap {
    --heat-0: var(--color-track);
    --heat-1: color-mix(in srgb, var(--color-primary) 25%, var(--color-surface));
    --heat-2: color-mix(in srgb, var(--color-primary) 50%, var(--color-surface));
    --heat-3: color-mix(in srgb, var(--color-primary) 75%, var(--color-surface));
    --heat-4: var(--color-primary);

    margin-bottom: var(--space-sm);
}

/* Un año no cabe en 390 px: se desplaza en horizontal. El direction:rtl
   del contenedor (con el SVG de vuelta en ltr) hace que la vista arranque
   por la DERECHA, es decir, por los días recientes, que es lo que uno
   quiere ver primero. */
.heatmap__scroll {
    overflow-x: auto;
    padding-bottom: var(--space-xs);
    -webkit-overflow-scrolling: touch;
    direction: rtl;
}
.heatmap__svg {
    display: block;
    direction: ltr;
    min-width: 44rem;
    max-width: 100%;
    height: auto;
}
.heatmap__cell { fill: var(--heat-0); }
.heatmap__cell--1 { fill: var(--heat-1); }
.heatmap__cell--2 { fill: var(--heat-2); }
.heatmap__cell--3 { fill: var(--heat-3); }
.heatmap__cell--4 { fill: var(--heat-4); }
.heatmap__axis {
    fill: var(--color-text-muted);
    font-size: 9px;
    font-family: inherit;
}

.heatmap__legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .25rem;
    margin: 0;
    font-size: .78rem;
    color: var(--color-text-muted);
}
.heatmap__legend-text { margin: 0 .25rem; }
.heatmap__key {
    width: .7rem;
    height: .7rem;
    border-radius: 2px;
    background: var(--heat-0);
    display: inline-block;
}
.heatmap__key--1 { background: var(--heat-1); }
.heatmap__key--2 { background: var(--heat-2); }
.heatmap__key--3 { background: var(--heat-3); }
.heatmap__key--4 { background: var(--heat-4); }

/* --- Importar datos -------------------------------------------------- */
.help-details {
    border-top: 1px solid var(--color-border);
    padding: var(--space-sm) 0;
}
.help-details summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-primary);
}
.help-details p {
    margin: var(--space-xs) 0 0;
    color: var(--color-text-soft);
    font-size: .9rem;
    line-height: 1.6;
}
.help-details code {
    background: var(--color-surface-2);
    border-radius: var(--radius-xs);
    padding: .05rem .3rem;
    font-size: .85em;
    overflow-wrap: anywhere;
}

@media (min-width: 640px) {
    .measure-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .photo-grid   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
    .measure-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .photo-grid   { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .heatmap__svg { min-width: 0; width: 100%; }
}

/* === 19. Índice de saltos (páginas largas como el perfil) === */
.jump-nav {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding: 0 0 .75rem;
    margin: -.25rem 0 1.25rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.jump-nav::-webkit-scrollbar { display: none; }
.jump-nav a {
    flex: 0 0 auto;
    padding: .4rem .85rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.jump-nav a:hover, .jump-nav a:focus-visible { color: var(--color-primary); border-color: var(--color-primary); }
[id] { scroll-margin-top: 5rem; }

/* === 20. experiencia === */
/* Datos de ejemplo, buscador global, estados de carga y gestos, tarjetas
   configurables del inicio y apariencia personalizable. */

/* ---------------------------------------------------------------------
   20.1 Apariencia: color de acento
   Cada acento solo redefine --color-primary y sus derivadas; el resto de
   la hoja ya tira de esas variables, así que botones, enlaces, anillos y
   gráficas (charts.js lee --color-primary) lo siguen sin tocar nada más.
   Cada uno tiene su versión clara y su versión oscura, con los dos
   disparadores de siempre: preferencia del sistema e interruptor manual.
   --------------------------------------------------------------------- */
:root[data-accent="verde"] {
    --color-primary:       #0b8457;
    --color-primary-dark:  #096b46;
    --color-primary-light: #e6f6ef;
    --color-primary-text:  #ffffff;
    --focus-ring:          0 0 0 3px rgba(11, 132, 87, .25);
}
:root[data-accent="azul"] {
    --color-primary:       #1864ab;
    --color-primary-dark:  #14538e;
    --color-primary-light: #e7f1fb;
    --color-primary-text:  #ffffff;
    --focus-ring:          0 0 0 3px rgba(24, 100, 171, .25);
}
:root[data-accent="morado"] {
    --color-primary:       #6741d9;
    --color-primary-dark:  #5730c4;
    --color-primary-light: #efeaff;
    --color-primary-text:  #ffffff;
    --focus-ring:          0 0 0 3px rgba(103, 65, 217, .25);
}
:root[data-accent="rosa"] {
    --color-primary:       #c2255c;
    --color-primary-dark:  #a51e4d;
    --color-primary-light: #fdeaf1;
    --color-primary-text:  #ffffff;
    --focus-ring:          0 0 0 3px rgba(194, 37, 92, .25);
}

@media (prefers-color-scheme: dark) {
    :root[data-accent="verde"]:not([data-theme="light"]) {
        --color-primary:       #4cd39a;
        --color-primary-dark:  #73e0b4;
        --color-primary-light: rgba(76, 211, 154, .16);
        --color-primary-text:  #042418;
        --focus-ring:          0 0 0 3px rgba(76, 211, 154, .35);
    }
    :root[data-accent="azul"]:not([data-theme="light"]) {
        --color-primary:       #7db8ff;
        --color-primary-dark:  #a3cdff;
        --color-primary-light: rgba(125, 184, 255, .16);
        --color-primary-text:  #05203a;
        --focus-ring:          0 0 0 3px rgba(125, 184, 255, .35);
    }
    :root[data-accent="morado"]:not([data-theme="light"]) {
        --color-primary:       #b197fc;
        --color-primary-dark:  #c7b4ff;
        --color-primary-light: rgba(177, 151, 252, .16);
        --color-primary-text:  #1a0f3d;
        --focus-ring:          0 0 0 3px rgba(177, 151, 252, .35);
    }
    :root[data-accent="rosa"]:not([data-theme="light"]) {
        --color-primary:       #ff8fb1;
        --color-primary-dark:  #ffb0c8;
        --color-primary-light: rgba(255, 143, 177, .16);
        --color-primary-text:  #3b0a1c;
        --focus-ring:          0 0 0 3px rgba(255, 143, 177, .35);
    }
}

:root[data-theme="dark"][data-accent="verde"] {
    --color-primary:       #4cd39a;
    --color-primary-dark:  #73e0b4;
    --color-primary-light: rgba(76, 211, 154, .16);
    --color-primary-text:  #042418;
    --focus-ring:          0 0 0 3px rgba(76, 211, 154, .35);
}
:root[data-theme="dark"][data-accent="azul"] {
    --color-primary:       #7db8ff;
    --color-primary-dark:  #a3cdff;
    --color-primary-light: rgba(125, 184, 255, .16);
    --color-primary-text:  #05203a;
    --focus-ring:          0 0 0 3px rgba(125, 184, 255, .35);
}
:root[data-theme="dark"][data-accent="morado"] {
    --color-primary:       #b197fc;
    --color-primary-dark:  #c7b4ff;
    --color-primary-light: rgba(177, 151, 252, .16);
    --color-primary-text:  #1a0f3d;
    --focus-ring:          0 0 0 3px rgba(177, 151, 252, .35);
}
:root[data-theme="dark"][data-accent="rosa"] {
    --color-primary:       #ff8fb1;
    --color-primary-dark:  #ffb0c8;
    --color-primary-light: rgba(255, 143, 177, .16);
    --color-primary-text:  #3b0a1c;
    --focus-ring:          0 0 0 3px rgba(255, 143, 177, .35);
}

/* Tamaño de letra: se agranda la raíz (y con ella todo lo que va en rem,
   incluidos los márgenes) y el cuerpo, que tiene su tamaño en píxeles. */
:root[data-font-size="grande"]      { font-size: 112.5%; }
:root[data-font-size="grande"] body { font-size: 18px; }
:root[data-font-size="muy-grande"]      { font-size: 125%; }
:root[data-font-size="muy-grande"] body { font-size: 20px; }

/* Alto contraste: bordes marcados y se quitan los grises flojos. */
:root[data-contrast="alto"] {
    --color-text-soft:     var(--color-text);
    --color-text-muted:    var(--color-text);
    --color-border:        var(--color-border-strong);
    --shadow:              none;
    --shadow-lg:           0 4px 16px rgba(0, 0, 0, .3);
}
:root[data-contrast="alto"] .card,
:root[data-contrast="alto"] .btn,
:root[data-contrast="alto"] input,
:root[data-contrast="alto"] select,
:root[data-contrast="alto"] textarea { border-width: 2px; }
:root[data-contrast="alto"] a { text-decoration: underline; }
:root[data-contrast="alto"] .card__note,
:root[data-contrast="alto"] .list__meta,
:root[data-contrast="alto"] .field__hint { font-weight: 500; }

/* Selector de acento en el perfil. */
.accent-group .radio-card span { display: flex; align-items: center; gap: .5rem; }
.accent-dot {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .18);
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------------
   20.2 Aviso de datos de ejemplo
   --------------------------------------------------------------------- */
.demo-banner { align-items: center; flex-wrap: wrap; gap: var(--space-sm); }
.demo-banner__text { flex: 1 1 16rem; }
.demo-banner form { flex: 0 0 auto; }

.demo-load {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}
.demo-load .card__note { margin: 0; flex: 1 1 12rem; }

/* ---------------------------------------------------------------------
   20.3 Buscador global
   --------------------------------------------------------------------- */
.search-dialog {
    width: min(36rem, calc(100vw - 1.5rem));
    max-height: min(34rem, calc(100vh - 4rem));
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    margin-top: 4vh;
}
.search-dialog::backdrop { background: rgba(10, 14, 20, .55); }

.search-dialog__head {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-border);
}
.search-dialog__icon { color: var(--color-text-muted); display: flex; }
.search-dialog__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    font-size: 1rem;
    padding: .4rem 0;
}
.search-dialog__input:focus { outline: none; }

.search-dialog__body {
    overflow-y: auto;
    max-height: 24rem;
    padding: var(--space-xs) 0;
}
.search-dialog__hint,
.search-dialog__foot {
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    font-size: .8rem;
    color: var(--color-text-muted);
}
.search-dialog__foot { border-top: 1px solid var(--color-border); }
.search-dialog kbd {
    font-family: var(--font-mono);
    font-size: .75em;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-xs);
    padding: .05rem .3rem;
}

.search-group {
    margin: var(--space-xs) 0 .15rem;
    padding: 0 var(--space-md);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.search-result {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: .5rem var(--space-md);
    color: var(--color-text);
    text-decoration: none;
    min-height: 2.4rem;
}
.search-result:hover,
.search-result:focus-visible { text-decoration: none; }
.search-result.is-active { background: var(--color-primary-light); }
.search-result__title { font-weight: 600; }
.search-result__meta { font-size: .78rem; color: var(--color-text-muted); text-align: right; }

/* ---------------------------------------------------------------------
   20.4 Estados de carga y transiciones entre páginas
   --------------------------------------------------------------------- */
.skeleton {
    background: linear-gradient(90deg, var(--color-surface-2) 25%, var(--color-track) 37%, var(--color-surface-2) 63%);
    background-size: 400% 100%;
    border-radius: var(--radius-sm);
    color: transparent;
    animation: skeleton-wave 1.4s ease infinite;
    min-height: 1.25rem;
}
.skeleton * { visibility: hidden; }

@keyframes skeleton-wave {
    from { background-position: 100% 50%; }
    to   { background-position: 0 50%; }
}

/* Transición suave al cambiar de página. Los navegadores que no la
   entienden ignoran la regla y navegan como siempre. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; }
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }
}

/* ---------------------------------------------------------------------
   20.5 Deslizar para borrar (móvil)
   --------------------------------------------------------------------- */
.swipe-row {
    position: relative;
    transform: translateX(var(--swipe-x, 0));
    transition: transform .18s ease;
    touch-action: pan-y;
}
.swipe-row.is-dragging { transition: none; }
.swipe-row__delete {
    position: absolute;
    top: 0;
    right: -6rem;
    width: 6rem;
    height: 100%;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--color-error);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}
tr.swipe-row .swipe-row__delete { display: none; }
tr.swipe-row.is-open .swipe-row__delete { display: block; }

/* ---------------------------------------------------------------------
   20.6 Tarjetas configurables del inicio
   --------------------------------------------------------------------- */
.dash-date-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    flex-wrap: wrap;
}
.dash-date-row .dash-date { margin: 0; }

.dash-widget { min-width: 0; }
.dash-widget > .card { margin-bottom: 0; height: 100%; }
.dash-widget[data-widget-hidden] { display: none; }

.dash-edit-note {
    margin: 0 0 var(--space-sm);
    font-size: .85rem;
    color: var(--color-text-muted);
}

.dash-widgets.is-editing .dash-widget {
    border: 2px dashed var(--color-border-strong);
    border-radius: var(--radius);
    padding: var(--space-xs);
    cursor: grab;
}
.dash-widgets.is-editing .dash-widget[data-widget-hidden] { display: block; opacity: .45; }
.dash-widgets.is-editing .dash-widget.is-dragging { opacity: .5; }
.dash-widgets.is-editing .dash-widget:focus-visible { outline: 3px solid var(--color-primary); }

.dash-widget__bar { display: none; }
.dash-widgets.is-editing .dash-widget__bar {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
}
.dash-widget__grip {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex: 1 1 auto;
    min-width: 0;
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-widget__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-soft);
    cursor: pointer;
}
.dash-widget__btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.dash-widget__btn[aria-pressed="true"] { color: var(--color-error); border-color: var(--color-error); }

@media (min-width: 640px) {
    .dash-widget--wide { grid-column: 1 / -1; }
}

/* === 20. metas-e-informes === */

/* --- Metas: tarjeta con semáforo, barra de progreso y gráfica SVG --- */
.goal-card { border-left: 4px solid var(--color-border); }
.goal-card--green  { border-left-color: var(--color-success); }
.goal-card--yellow { border-left-color: var(--color-warning); }
.goal-card--red     { border-left-color: var(--color-danger, #c0392b); }

.goal-card__title {
    font-weight: 600;
    margin: 0 0 .25rem;
}

.goal-progress-bar {
    height: .5rem;
    border-radius: 999px;
    background: var(--color-surface-2);
    overflow: hidden;
    margin: .35rem 0 .6rem;
}
.goal-progress-bar__fill {
    display: block;
    height: 100%;
    width: calc(var(--pct, 0) * 1%);
    background: var(--color-primary);
    border-radius: inherit;
    transition: width .3s ease;
}

.goal-list {
    display: grid;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.goal-chart-wrap {
    width: 100%;
    overflow-x: auto;
}
.goal-chart {
    width: 100%;
    max-width: 640px;
    height: auto;
    display: block;
}
.goal-chart__axis { stroke: var(--color-border); stroke-width: 1; }
.goal-chart__target {
    stroke: var(--color-text-muted);
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
}
.goal-chart__actual {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.goal-chart__projection {
    stroke: var(--color-warning);
    stroke-width: 2;
    stroke-dasharray: 4 4;
}
.goal-chart__dot { fill: var(--color-primary); }
.goal-chart__dot--projection { fill: var(--color-warning); }
.goal-chart__label {
    font-size: 11px;
    fill: var(--color-text-muted);
}

.goal-chart__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: .5rem 0 0;
    font-size: .8rem;
    color: var(--color-text-muted);
}
.goal-chart__swatch {
    display: inline-block;
    width: .8rem;
    height: .5rem;
    border-radius: 2px;
    margin-right: .3rem;
    vertical-align: middle;
}
.goal-chart__swatch--actual     { background: var(--color-primary); }
.goal-chart__swatch--target     { background: var(--color-text-muted); }
.goal-chart__swatch--projection { background: var(--color-warning); }

/* --- Informe mensual: página aparte, pensada para imprimir --- */
.report-page { background: var(--color-bg); }

.report {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--space-md) var(--space-sm) var(--space-xl);
}

.report__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}
.report__toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.report__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--color-primary);
    margin-bottom: var(--space-md);
}
.report__title { margin: 0; font-size: 1.4rem; }
.report__subtitle { margin: .1rem 0 0; color: var(--color-text-muted); }

.report__section {
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border);
}
.report__section--last { border-bottom: none; }
.report__section-title {
    margin: 0 0 .6rem;
    font-size: 1rem;
    color: var(--color-primary);
}
.report__line { margin: .2rem 0; }
.report__empty { color: var(--color-text-muted); font-style: italic; margin: 0; }

.report__footer {
    margin-top: var(--space-lg);
    text-align: center;
    font-size: .8rem;
    color: var(--color-text-muted);
}

@media print {
    .no-print { display: none !important; }

    .report-page { background: #fff; }

    .report {
        max-width: none;
        padding: 0;
    }

    .report__section {
        break-inside: avoid;
    }

    a { color: #000; text-decoration: none; }

    .goal-chart__actual  { stroke: #000; }
    .goal-chart__target  { stroke: #666; }
    .goal-chart__projection { stroke: #999; }
}

@page {
    margin: 1.5cm;
}

/* === 20. entrenador-y-grupos: chat, programas, check-in y grupos === */

/* --- Chat entrenador–cliente --- */
.chat-card { display: flex; flex-direction: column; gap: var(--space-md); }

.chat-log {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-height: 26rem;
    overflow-y: auto;
    padding: .25rem;
    background: var(--color-surface-2);
    border-radius: var(--radius-sm);
}

.chat-day {
    align-self: center;
    margin: .5rem 0 .25rem;
    font-size: .8125rem;
    color: var(--color-text-muted);
}
.chat-day span {
    padding: .15rem .6rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
}

.chat-msg {
    max-width: 85%;
    padding: .55rem .75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}
.chat-msg--mine {
    align-self: flex-end;
    background: var(--color-primary-light);
    border-color: var(--color-primary-light);
}
.chat-msg--theirs { align-self: flex-start; }

.chat-msg__body { margin: 0; overflow-wrap: anywhere; }
.chat-msg__meta {
    margin: .25rem 0 0;
    font-size: .75rem;
    color: var(--color-text-muted);
}

.chat-attach {
    margin-bottom: .5rem;
    padding: .5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    background: var(--color-surface-2);
}
.chat-attach__img {
    display: block;
    width: 100%;
    max-width: 14rem;
    border-radius: var(--radius-xs);
    margin-bottom: .4rem;
}
.chat-attach__title {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    font-weight: 600;
    font-size: .9375rem;
}
.chat-attach__title .icon { width: 1.1rem; height: 1.1rem; }
.chat-attach__meta {
    margin: .15rem 0 0;
    font-size: .8125rem;
    color: var(--color-text-muted);
}

.chat-send { display: flex; flex-direction: column; gap: var(--space-sm); }
.chat-attach-picker > summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .35rem;
    color: var(--color-text-soft);
    font-size: .9375rem;
}
.chat-attach-picker > summary .icon { width: 1.1rem; height: 1.1rem; }

/* --- Editor de programas --- */
.program-weeks {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: 1fr;
}
.program-week {
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
}
.program-week .switch { margin-bottom: var(--space-sm); }
.program-week > .btn { margin-top: var(--space-xs); }
.program-week__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 var(--space-sm);
    font-size: 1rem;
}

/* --- Check-in semanal --- */
.checkin-scale__options { display: flex; gap: .5rem; flex-wrap: wrap; }
.checkin-scale__option { flex: 1 1 3rem; }
.checkin-scale__option input { position: absolute; opacity: 0; width: 0; height: 0; }
.checkin-scale__option span {
    display: block;
    padding: .55rem 0;
    text-align: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    background: var(--color-surface);
    font-weight: 600;
    cursor: pointer;
}
.checkin-scale__option input:checked + span {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
}
.checkin-scale__option input:focus-visible + span { box-shadow: var(--focus-ring); }

.checkin-photos {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.checkin-photo input { position: absolute; opacity: 0; width: 0; height: 0; }
.checkin-photo span {
    display: block;
    padding: .5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    background: var(--color-surface);
    font-size: .875rem;
    cursor: pointer;
}
.checkin-photo input:checked + span {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}
.checkin-photo__date { color: var(--color-text-muted); font-size: .8125rem; }

.checkin-thumbs { display: flex; gap: .4rem; margin-top: .4rem; flex-wrap: wrap; }
.checkin-thumb {
    width: 4.5rem;
    height: 4.5rem;
    object-fit: cover;
    border-radius: var(--radius-xs);
    border: 1px solid var(--color-border);
}

/* --- Tablón del grupo --- */
.group-feed { display: flex; flex-direction: column; gap: var(--space-md); }

.group-post {
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}
.group-post__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: .35rem;
}
.group-post__author { font-weight: 600; }
.group-post__date { font-size: .8125rem; color: var(--color-text-muted); }
.group-post__body { margin: 0; overflow-wrap: anywhere; }
.group-post__actions { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }

.group-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: .6rem;
    padding: .6rem .75rem;
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-xs);
    background: var(--color-surface-2);
}
.group-card--pr         { border-left-color: var(--color-warning); }
.group-card--share_card { border-left-color: var(--color-info); }
.group-card__icon { color: var(--color-primary); flex: 0 0 auto; }
.group-card--pr .group-card__icon         { color: var(--color-warning); }
.group-card--share_card .group-card__icon { color: var(--color-info); }
.group-card__title { margin: 0; font-weight: 600; }
.group-card__meta  { margin: .1rem 0 0; font-size: .8125rem; color: var(--color-text-muted); }

/* Separación entre la lista de retos del grupo y el formulario. */
.group-challenge-new { margin-top: var(--space-lg); }

.group-rank {
    display: inline-block;
    min-width: 2rem;
    font-weight: 700;
    color: var(--color-text-muted);
}
.list__item.is-me .group-rank { color: var(--color-primary); }

@media (min-width: 640px) {
    .program-weeks  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .checkin-photos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .chat-msg       { max-width: 70%; }
}

@media (min-width: 900px) {
    .program-weeks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* === 20. cardio-y-salud === */
/* Cardio, sueño, recuperación, ciclo y la guía de Atajos de iOS.
   Todo con las variables del tema: nada de colores fijos, para que el
   modo oscuro funcione solo. */

/* --- Barra de minutos de cardio frente a la recomendación de la OMS --- */
.cardio-bar {
    height: 10px;
    border-radius: 999px;
    background: var(--color-surface-2);
    overflow: hidden;
    margin: .65rem 0 .5rem;
}
.cardio-bar__fill {
    height: 100%;
    border-radius: 999px;
    background: var(--color-primary);
    transition: width .3s ease;
}
.cardio-bar__fill--done { background: var(--color-success); }

/* Los tipos de actividad: tarjetas pequeñas con su icono. Van en flex
   con envoltura para que siete opciones no ocupen siete filas en móvil. */
.kind-group {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.kind-group .radio-card { flex: 1 1 8.5rem; }
.radio-card--icon > span {
    display: flex;
    align-items: center;
    gap: .45rem;
    white-space: nowrap;
}
.radio-card--icon .icon { width: 20px; height: 20px; flex: 0 0 auto; }
.radio-card--sm { padding: .5rem .7rem; font-size: .9375rem; }
.radio-group--tight {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.radio-group--tight .radio-card { flex: 1 1 5rem; text-align: center; }

/* --- Recuperación --- */
.recovery-score { margin: .35rem 0 .6rem; }
.recovery-gauge {
    height: 10px;
    border-radius: 999px;
    background: var(--color-surface-2);
    overflow: hidden;
}
.recovery-gauge__fill {
    height: 100%;
    border-radius: 999px;
    background: var(--color-text-muted);
    transition: width .3s ease;
}
.recovery-gauge--success .recovery-gauge__fill { background: var(--color-success); }
.recovery-gauge--info    .recovery-gauge__fill { background: var(--color-info); }
.recovery-gauge--warning .recovery-gauge__fill { background: var(--color-warning); }
.recovery-gauge--danger  .recovery-gauge__fill { background: var(--color-error); }

.recovery-score__number {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    margin: .5rem 0 0;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}
.recovery-score__max {
    font-size: .9rem;
    font-weight: 500;
    color: var(--color-text-muted);
}
.recovery-score__number .tag { margin-left: auto; }

/* El aviso de «cómo llegas hoy» en la pantalla de entreno. */
.recovery-note { display: grid; gap: .55rem; }
.recovery-note__row {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}
.recovery-note__text { margin: 0; font-size: .9375rem; line-height: 1.45; }
.recovery-note__tip { display: block; color: var(--color-text-muted); }
.recovery-dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin-top: .35rem;
    border-radius: 50%;
    background: var(--color-text-muted);
}
.recovery-dot--success { background: var(--color-success); }
.recovery-dot--info    { background: var(--color-info); }
.recovery-dot--warning { background: var(--color-warning); }
.recovery-dot--danger  { background: var(--color-error); }
.recovery-dot--cycle   { background: var(--color-primary); }

/* Registro rápido de sueño en el inicio. */
.sleep-quick { margin-top: .75rem; border-top: 1px solid var(--color-border); padding-top: .75rem; }
.sleep-quick .field { margin-bottom: .6rem; }

/* --- Ciclo --- */
.cycle-line {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 0 0 1.25rem;
    padding: .7rem .9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: .9rem;
    line-height: 1.45;
}
.cycle-line__dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: .4rem;
    border-radius: 50%;
    background: var(--color-primary);
}
.cycle-line .btn-link { margin-left: auto; white-space: nowrap; }
.cycle-phase .card__note { margin-bottom: .5rem; }

/* --- Tokens de la API de salud --- */
.token-value {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    padding: .7rem .8rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
}
.token-value code {
    flex: 1 1 14rem;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: .875rem;
}

/* Bloque de JSON con su botón de copiar. */
.code-block {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    padding: .8rem;
}
.code-block pre {
    margin: 0 0 .6rem;
    overflow-x: auto;
    font-size: .8125rem;
    line-height: 1.5;
    white-space: pre;
}

/* --- Guía paso a paso de Atajos --- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; counter-reset: paso; }
.step { display: grid; gap: 1rem; }
.step__title {
    margin: 0 0 .35rem;
    font-size: 1rem;
    display: flex;
    align-items: baseline;
    gap: .5rem;
}
.step__title::before {
    counter-increment: paso;
    content: counter(paso);
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: .8125rem;
    font-weight: 700;
}
.step__text p { margin: 0 0 .5rem; font-size: .9375rem; line-height: 1.5; }
.bullets { margin: .25rem 0 0; padding-left: 1.15rem; font-size: .9375rem; line-height: 1.6; }
.bullets code, .step__text code { overflow-wrap: anywhere; }

/* «Capturas» del iPhone dibujadas con CSS: ni imágenes que pesen ni
   capturas que se queden antiguas cuando Apple cambie un color. */
.iphone {
    max-width: 17rem;
    margin: 0 auto;
    border: 1px solid var(--color-border);
    border-radius: 1.6rem;
    background: var(--color-surface);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    font-size: .8125rem;
}
.iphone__bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .45rem .9rem .2rem;
    font-size: .6875rem;
    font-weight: 600;
    color: var(--color-text-muted);
}
.iphone__signal {
    width: 1.1rem;
    height: .45rem;
    border-radius: 2px;
    background: var(--color-text-muted);
    opacity: .5;
}
.iphone__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .35rem .9rem .6rem;
    font-weight: 700;
    border-bottom: 1px solid var(--color-border);
}
.iphone__plus { color: var(--color-primary); font-size: 1.1rem; line-height: 1; }
.iphone__body { padding: .6rem .7rem; display: grid; gap: .4rem; }
.iphone__tabs {
    display: flex;
    justify-content: space-around;
    padding: .5rem;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: .6875rem;
}
.iphone__tabs .is-on { color: var(--color-primary); font-weight: 700; }

.ios-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    padding: .5rem .6rem;
    border-radius: var(--radius-xs);
    background: var(--color-surface-2);
}
.ios-row--muted { color: var(--color-text-muted); }
.ios-row--active { border: 1px solid var(--color-primary); }
.ios-check { color: var(--color-primary); font-weight: 700; }
.ios-pill {
    padding: .35rem .6rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    text-align: center;
    color: var(--color-text-muted);
}
.ios-pill--on {
    border-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: 600;
}
.ios-switch {
    flex: 0 0 auto;
    width: 2rem;
    height: 1.15rem;
    border-radius: 999px;
    background: var(--color-border);
    position: relative;
}
.ios-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: .9rem;
    height: .9rem;
    border-radius: 50%;
    background: var(--color-surface);
}
.ios-switch.is-on { background: var(--color-success); }
.ios-switch.is-on::after { left: auto; right: 2px; }
.ios-field {
    display: grid;
    gap: .15rem;
    padding: .45rem .6rem;
    border-radius: var(--radius-xs);
    background: var(--color-surface-2);
}
.ios-field span { color: var(--color-text-muted); font-size: .6875rem; text-transform: uppercase; letter-spacing: .03em; }
.ios-field code { font-size: .75rem; overflow-wrap: anywhere; }
.ios-clock {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    padding: .5rem 0;
}

/* En escritorio, el texto del paso y su captura van en dos columnas. */
@media (min-width: 48rem) {
    .step { grid-template-columns: 1fr 18rem; align-items: start; gap: 1.5rem; }
}

/* Endpoints de la API de salud: en lista, no en tabla. Una URL completa
   no cabe en una columna de móvil sin dejar la otra ilegible. */
.endpoint-list { list-style: none; margin: .5rem 0 1rem; padding: 0; display: grid; gap: .6rem; }
.endpoint {
    display: grid;
    gap: .25rem;
    padding: .6rem .7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
}
.endpoint__url { font-size: .8125rem; overflow-wrap: anywhere; }
.endpoint__method {
    display: inline-block;
    margin-right: .35rem;
    padding: .05rem .35rem;
    border-radius: var(--radius-xs);
    background: var(--color-primary);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
}
.endpoint__what { color: var(--color-text-muted); font-size: .875rem; }

/* =====================================================================
   20. entrenar-mejor

   Plan de progresión en el entreno, mini-gráfica e historial por
   ejercicio, récords por rango de repeticiones, test de fuerza y
   temporizador guiado de movilidad.

   Todos los colores salen de las variables del tema: nada fijo, para que
   el modo oscuro funcione solo.
   ===================================================================== */

/* --- Plan de progresión dentro del entreno --- */
.progression {
    margin: var(--space-md) 0 0;
    padding: var(--space-sm) var(--space-md);
    border: 1.5px solid var(--color-primary);
    border-radius: var(--radius-sm);
    background: var(--color-primary-light);
}
.progression--deload {
    border-color: var(--color-warning);
    background: var(--color-warning-bg);
}
.progression__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .35rem;
    font-weight: 700;
    font-size: .95rem;
    color: var(--color-text);
}
.progression__head .icon { width: 1.1rem; height: 1.1rem; color: var(--color-primary); }
.progression--deload .progression__head .icon { color: var(--color-warning); }
.progression__scheme { margin-right: .15rem; }
.progression__text {
    margin: 0;
    font-size: .9rem;
    line-height: 1.45;
    color: var(--color-text-soft);
}
.progression__sets {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: .6rem 0 0;
    padding: 0;
    list-style: none;
}
.progression__set {
    display: flex;
    align-items: baseline;
    gap: .3rem;
    padding: .35rem .6rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    background: var(--color-surface);
    font-size: .85rem;
    color: var(--color-text);
}
.progression__set--amrap { border-color: var(--color-primary); font-weight: 600; }
.progression__set-n { color: var(--color-text-muted); font-size: .8rem; }
.progression__set small { color: var(--color-text-muted); font-size: .75rem; }

/* --- Plan de progresión en el editor de la rutina --- */
.progression-form {
    display: grid;
    gap: var(--space-xs);
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}
.progression-form__title {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    font-weight: 700;
    font-size: .95rem;
    color: var(--color-text);
}
.progression-form__title .icon { width: 1.1rem; height: 1.1rem; color: var(--color-primary); }
.radio-card--sm { padding: .6rem .75rem; font-size: .9rem; }
/* Con el selector de hijo para ganar a `.radio-card > span { display: block }`. */
.radio-card > .radio-card__body { display: grid; gap: .15rem; }
.radio-card__title { font-weight: 700; }
.radio-card__text {
    font-weight: 400;
    font-size: .82rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}

/* --- Mini-gráfica y récords bajo cada ejercicio --- */
.exercise-history {
    display: grid;
    gap: var(--space-md);
    margin: var(--space-md) 0 0;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
}
@media (min-width: 40rem) {
    .exercise-history { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
}
.exercise-history__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem;
    margin: 0 0 .4rem;
    font-weight: 600;
    font-size: .85rem;
    color: var(--color-text-soft);
}
.exercise-history__title .icon { width: 1rem; height: 1rem; }
.exercise-history__title small { font-weight: 400; color: var(--color-text-muted); }

.sparkline { display: block; width: 100%; height: 3.5rem; overflow: visible; }
.sparkline__line { stroke: var(--color-primary); stroke-width: 2; vector-effect: non-scaling-stroke; }
.sparkline__area { fill: var(--color-primary); opacity: .12; }
.sparkline__dot { fill: var(--color-surface); stroke: var(--color-primary); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sparkline__dot--last { fill: var(--color-primary); }

/* --- Récords por rango de repeticiones --- */
.rm-list { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.rm-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4rem;
    font-size: .85rem;
    color: var(--color-text);
}
.rm-list__label {
    min-width: 4.5rem;
    font-weight: 600;
    color: var(--color-text-soft);
}
.rm-list__item small { color: var(--color-text-muted); font-size: .78rem; }
.rm-card { margin: .35rem 0; }
.rm-card .rm-list { margin-top: .4rem; }

/* --- Test de fuerza --- */
.strength-test__row {
    display: grid;
    /* En móvil: el nombre arriba y los dos números debajo, uno al lado
       del otro; así cada ejercicio ocupa dos líneas y no cinco. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-xs) var(--space-sm);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border);
}
.strength-test__row:last-child { border-bottom: 0; }
.strength-test__name { grid-column: 1 / -1; }
.strength-test__name .list__meta { margin: .15rem 0 0; }
.strength-test__row .field { margin: 0; }
@media (min-width: 38rem) {
    .strength-test__row {
        grid-template-columns: minmax(0, 1fr) 7rem 7rem;
        align-items: end;
    }
    .strength-test__name { grid-column: auto; }
}

/* --- Movilidad: lista de rutinas --- */
.mobility-card__meta {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 0 0 .4rem;
    font-size: .85rem;
    color: var(--color-text-muted);
}
.mobility-card__meta .icon { width: 1rem; height: 1rem; }

.mobility-nudge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}
.mobility-nudge__text {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 0;
    font-size: .9rem;
    line-height: 1.45;
    color: var(--color-text-soft);
}
.mobility-nudge__text .icon { flex: 0 0 auto; width: 1.2rem; height: 1.2rem; color: var(--color-primary); }

/* --- Movilidad: las posturas, una a una --- */
.mobility-poses { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; counter-reset: postura; }
.mobility-pose {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: var(--space-sm);
    align-items: start;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border);
}
.mobility-pose:last-child { border-bottom: 0; }
.mobility-pose__media { display: flex; align-items: center; justify-content: center; }
.mobility-pose__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    color: var(--color-text-muted);
}
.mobility-pose__name {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-weight: 700;
    color: var(--color-text);
}
.mobility-pose__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: .8rem;
    font-weight: 700;
}
.mobility-pose__time {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin: .2rem 0;
    font-size: .82rem;
    color: var(--color-text-muted);
}
.mobility-pose__time .icon { width: .95rem; height: .95rem; }
.mobility-pose__desc { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--color-text-soft); }

/* --- Movilidad: el temporizador guiado --- */
.mobility-start { display: grid; gap: var(--space-sm); margin-top: var(--space-md); justify-items: start; }
.mobility-start .card__note { margin: 0; }

.mobility-player {
    display: grid;
    gap: var(--space-sm);
    justify-items: center;
    text-align: center;
    padding: var(--space-lg) var(--space-md);
    margin-bottom: var(--space-md);
    border: 1.5px solid var(--color-primary);
    border-radius: var(--radius);
    background: var(--color-surface);
}
.mobility-player__step { margin: 0; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); }
.mobility-player__name { margin: 0; font-size: 1.35rem; line-height: 1.25; color: var(--color-text); }
.mobility-player__side { margin: 0; font-weight: 700; color: var(--color-primary); }
.mobility-player__media { min-height: 0; }
.mobility-player__media img { max-width: 12rem; border-radius: var(--radius-sm); }
.mobility-player__time {
    margin: 0;
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}
.mobility-player__bar {
    width: 100%;
    max-width: 22rem;
    height: .4rem;
    border-radius: 999px;
    background: var(--color-track);
    overflow: hidden;
}
.mobility-player__bar-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--color-primary);
    transition: width .95s linear;
}
.mobility-player__desc {
    max-width: 30rem;
    margin: 0;
    font-size: .92rem;
    line-height: 1.55;
    color: var(--color-text-soft);
}
.mobility-player__controls { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: center; }

@media (prefers-reduced-motion: reduce) {
    .mobility-player__bar-fill { transition: none; }
}

/* =====================================================================
   20. comer-mejor

   Planificador semanal, batch cooking, porciones reales, presupuesto
   semanal y el registro de cafeína y alcohol. Todo con las variables de
   color de arriba, así que el modo oscuro sale solo.
   ===================================================================== */

/* --- Planificador semanal ------------------------------------------ */

/* La fecha de la semana va entre las dos flechas y puede partirse en dos
   líneas: si no, en un móvil estrecho estiraría la página entera. */
.plan-week__label {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.4;
}

.plan-week__label .tag { margin-left: .25rem; }

/* En el móvil la semana se lee como una lista de días, uno debajo de
   otro. En pantallas anchas pasa a rejilla de siete columnas. */
.plan-grid {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: 1fr;
}

.plan-day { margin: 0; }

.plan-day--today {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

.plan-day__title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.plan-day__title small {
    font-weight: 500;
    color: var(--color-text-muted);
}

.plan-cell {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-xs);
    margin-top: var(--space-xs);
}

.plan-cell__title {
    margin: 0 0 var(--space-xs);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-muted);
}

.plan-cell__empty {
    margin: 0 0 var(--space-xs);
    font-size: .85rem;
    color: var(--color-text-muted);
}

.plan-cell__list {
    list-style: none;
    margin: 0 0 var(--space-xs);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.plan-cell.is-drop-target {
    background: var(--color-primary-light);
    border-radius: var(--radius-sm);
}

.plan-cell__add { width: 100%; justify-content: center; }

.plan-chip {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: .4rem .5rem;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: grab;
}

.plan-chip.is-dragging { opacity: .5; }

.plan-chip--sent { border-style: dashed; }

.plan-chip__icon .icon {
    width: 1.1em;
    height: 1.1em;
    color: var(--color-primary);
}

.plan-chip__body { flex: 1; min-width: 0; }

.plan-chip__name {
    display: block;
    font-size: .9rem;
    font-weight: 600;
    overflow-wrap: break-word;
}

.plan-chip__meta { color: var(--color-text-muted); font-size: .78rem; }

.plan-hint {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.plan-hint .icon { width: 1.1em; height: 1.1em; flex: none; }

@media (min-width: 62rem) {
    .plan-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .plan-day { padding: var(--space-sm); }
    .plan-day__title { font-size: .95rem; }
    .plan-cell__add { font-size: .78rem; padding: .3rem .4rem; }

    /* Siete columnas dejan poco ancho: el icono sobra y el botón de
       quitar se va a la esquina, para que el nombre ocupe toda la ficha
       y se parta por palabras, no letra a letra. */
    .plan-chip {
        position: relative;
        padding: .35rem 1.4rem .35rem .45rem;
    }

    .plan-chip__icon { display: none; }
    .plan-chip__name { font-size: .8rem; }
    .plan-chip__meta { font-size: .72rem; }

    .plan-chip form {
        position: absolute;
        top: 2px;
        right: 2px;
    }

    .plan-chip form .btn-link { padding: 2px; }
    .plan-chip form .icon { width: .9em; height: .9em; }
}

/* --- Presupuesto semanal ------------------------------------------- */

.budget-line {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-xs);
    margin: var(--space-sm) 0 0;
    padding: var(--space-sm);
    background: var(--color-info-bg);
    border-radius: var(--radius-sm);
    font-size: .9rem;
    color: var(--color-text);
}

.budget-line .icon { width: 1.2em; height: 1.2em; flex: none; color: var(--color-info); }
/* El titular ocupa la línea del icono y la explicación va debajo, entera:
   si no, en un móvil quedan dos columnas estrechísimas. */
.budget-line strong { flex: 1 1 10rem; }
.budget-line small { flex: 1 1 100%; color: var(--color-text-soft); font-size: .82rem; }

/* --- Entradas planificadas en el diario ---------------------------- */

.list__item--planned { background: var(--color-surface-2); }

.tag--planned { background: var(--color-info-bg); color: var(--color-info); }

/* --- Porciones reales ----------------------------------------------- */

.portion-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
}

.portion-box__label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-text-soft);
}

.portion-box__modes,
.portion-box__mult {
    display: flex;
    gap: 4px;
}

.portion-box__modes .btn.is-active {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

.portion-box__picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    width: 100%;
}

.portion-box__picker select { flex: 1 1 12rem; }
.portion-box__picker input[type="number"] { width: 5rem; }
.portion-box__picker .field__hint { width: 100%; margin: 0; }

.portion-food { margin-bottom: var(--space-xs); }
.portion-food summary small { color: var(--color-text-muted); font-weight: 500; }

/* --- Batch cooking --------------------------------------------------- */

.batch-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: var(--space-xs) 0 0;
    font-size: .85rem;
    color: var(--color-success);
}

.batch-note .icon { width: 1.1em; height: 1.1em; flex: none; }

.batch-note--stale { color: var(--color-warning); }

.batch-form { margin-top: var(--space-xs); }
.batch-form .icon { width: 1em; height: 1em; vertical-align: -.1em; }

/* --- Cafeína y alcohol ----------------------------------------------- */

/* Tonos de los avisos de esta tarjeta (los de micronutrientes usan
   --over y --under; estos son informativos, no de exceso de nada). */
.micro-note--info { background: var(--color-info-bg);    color: var(--color-info); }
.micro-note--warn { background: var(--color-warning-bg); color: var(--color-warning); }

/* La fuente del aviso va debajo, en pequeño: es la letra pequeña, no
   una segunda columna que estreche el mensaje. */
#estimulantes .micro-note { flex-wrap: wrap; }

#estimulantes .micro-note small {
    flex: 1 1 100%;
    font-size: .78rem;
    opacity: .85;
}

/* === 21. Revisión de diseño (inicio y recuperación) === */
/* Una tarjeta del inicio puede pintar varias .card (programa, metas): se apilan. */
.dash-widget > .card + .card { margin-top: var(--space-md); }
.dash-widget:has(> .card + .card) > .card { height: auto; }
.dash-widget > .cycle-line { margin: 0; }

/* Registro rápido de sueño, compacto y sin desbordar en 390 px */
.sleep-quick__lead { margin: 0 0 .6rem; font-weight: 600; }
.sleep-quick__times {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
    margin-bottom: .75rem;
}
.sleep-quick__time { display: grid; gap: .3rem; font-size: .85rem; color: var(--color-text-muted); }
.sleep-quick__time > span { display: inline-flex; align-items: center; gap: .3rem; }
.sleep-quick__time .icon { width: 14px; height: 14px; }
.sleep-quick__time input[type="time"] { width: 100%; min-width: 0; }
.sleep-quick__legend { padding: 0; margin: 0 0 .4rem; font-size: .85rem; color: var(--color-text-muted); }
.sleep-quick .btn { margin-top: .75rem; }

/* Control segmentado: N opciones iguales en una sola fila, sin puntos de radio */
.segmented {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    overflow: hidden;
}
.sleep-quick__quality { margin: 0; padding: 0; border: 0; min-width: 0; }
.segmented__item { position: relative; display: block; min-width: 0; }
.segmented__item + .segmented__item { border-left: 1px solid var(--color-border); }
.segmented__item input {
    position: absolute;
    opacity: 0;
    inset: 0;
    margin: 0;
    cursor: pointer;
}
.segmented__item span {
    display: block;
    padding: .55rem .2rem;
    font-size: .8125rem;
    font-weight: 500;
    text-align: center;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.segmented__item input:checked + span {
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
}
.segmented__item input:focus-visible + span { outline: 2px solid var(--color-primary); outline-offset: -2px; }

/* --- Barra inferior: cinco apartados y hoja «Más» --- */
@media (max-width: 899px) {
    .mainnav__link--secondary { display: none; }
}
.mainnav__more {
    background: none;
    border: 0;
    font: inherit;
    cursor: pointer;
}
@media (min-width: 900px) {
    .mainnav__more { display: none; }
}
.more-sheet { position: fixed; inset: 0; z-index: 60; }
.more-sheet__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.more-sheet__panel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    max-height: 85vh;
    overflow-y: auto;
    padding: .5rem var(--space-md) calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
    background: var(--color-surface);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .25);
    animation: sheet-up .22s ease-out;
}
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .more-sheet__panel { animation: none; } }
.more-sheet__handle { width: 2.5rem; height: 4px; margin: .25rem auto .75rem; border-radius: 999px; background: var(--color-border-strong); }
.more-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-md); }
.more-sheet__user { display: flex; align-items: center; gap: .75rem; color: inherit; text-decoration: none; min-width: 0; }
.more-sheet__user .avatar { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
.more-sheet__user span:last-child { display: grid; line-height: 1.25; }
.more-sheet__user small { color: var(--color-text-muted); }
.more-sheet__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
}
.more-sheet__item {
    display: grid;
    justify-items: center;
    gap: .35rem;
    padding: .75rem .25rem;
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    color: var(--color-text);
    font-size: .75rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
}
.more-sheet__item:hover { text-decoration: none; background: var(--color-primary-light); color: var(--color-primary); }
.more-sheet__item.is-active { color: var(--color-primary); box-shadow: inset 0 0 0 1.5px var(--color-primary); }
.more-sheet__icon { position: relative; display: inline-flex; }
.more-sheet__icon .icon { width: 1.4rem; height: 1.4rem; }
.more-sheet__icon .mainnav__badge { right: -.6rem; }
.more-sheet__foot { margin-top: var(--space-md); display: flex; justify-content: center; }
body.has-sheet { overflow: hidden; }

/* --- Aviso sanitario plegado --- */
details.disclaimer { padding: .6rem .9rem; }
details.disclaimer summary { display: flex; align-items: center; gap: .45rem; cursor: pointer; list-style: none; }
details.disclaimer summary::-webkit-details-marker { display: none; }
details.disclaimer summary strong { display: inline; margin: 0; }
details.disclaimer summary .icon { width: 16px; height: 16px; flex: 0 0 auto; }
.disclaimer__more { margin-left: auto; font-size: .8rem; text-decoration: underline; white-space: nowrap; }
details.disclaimer[open] .disclaimer__more { display: none; }
details.disclaimer p { margin: .5rem 0 0; }

/* --- Fila de acciones en rejilla (gimnasio) --- */
@media (max-width: 639px) {
    .actions-row--grid { display: grid; grid-template-columns: 1fr 1fr; }
    .actions-row--grid .btn { justify-content: flex-start; }
    .actions-row--grid .btn--primary { grid-column: 1 / -1; justify-content: center; }
}

/* Los campos de hora y fecha ocupan el ancho del campo, como el resto */
.field input[type="time"], .field input[type="date"], .field input[type="datetime-local"] { width: 100%; min-width: 0; }

/* Formulario de serie en escritorio: los botones (calentamiento, añadir, voz)
   caben en su celda y el interruptor no se corta */
@media (min-width: 640px) {
    .set-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto auto; }
    .set-form .field { min-width: 0; }
    .set-form .field--check .switch { white-space: nowrap; }
    .set-form .field--actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .5rem; }
}

/* Inicio en escritorio: las tarjetas no se estiran a la altura de la vecina */
.dash-widgets { align-items: start; }
.dash-widget > .card { height: auto; }

/* Horas del registro rápido de sueño con el mismo aspecto que el resto de campos */
.sleep-quick__time input[type="time"] {
    font-size: 16px;
    color: var(--color-text);
    padding: .55rem .75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    min-height: 2.5rem;
}

/* Planificador en escritorio: columnas con ancho mínimo legible (con
   desplazamiento horizontal si la pantalla no da) y sin cortar palabras */
@media (min-width: 62rem) {
    .plan-grid { grid-template-columns: repeat(7, minmax(122px, 1fr)); gap: var(--space-xs); overflow-x: auto; padding-bottom: .5rem; }
    .plan-day { font-size: .875rem; }
    .plan-day * { overflow-wrap: break-word; word-break: normal; hyphens: manual; }
}

/* === 22. Aire: ritmo vertical más holgado === */
body { line-height: 1.55; }
.container { padding: 1.125rem; }
@media (min-width: 640px) { .container { padding: var(--space-lg); } }
.card--compact { padding: var(--space-md) var(--space-md) var(--space-lg); }
.card { padding: var(--space-lg); }
.card__header { margin-bottom: var(--space-xs); }
.card__note { margin-top: var(--space-sm); line-height: 1.5; }
/* Bloques seguidos dentro de una tarjeta se separan aunque no lleven margen propio */
.card > :is(p, form, ul, ol, table, section, details, .stats, .chip-row, .budget-line, .list, .empty-state, .grid, .alert, .field-row, .actions-row, .kpi-row)
  + :is(p, form, ul, ol, table, section, details, .stats, .chip-row, .budget-line, .list, .empty-state, .grid, .alert, .field-row, .actions-row, .kpi-row) {
    margin-top: var(--space-md);
}
.budget-line { margin: var(--space-md) 0; }
.macro-bar + .macro-bar { margin-top: var(--space-sm); }
.list__item { padding: var(--space-sm) 0; }
.stat { padding: var(--space-md) var(--space-md); }
.stats { gap: var(--space-sm); }
.chip-row { gap: var(--space-xs) var(--space-sm); row-gap: .6rem; }
.field { margin-bottom: var(--space-md); }
.field label, .field__label { margin-bottom: .45rem; }
.field__hint { margin-top: .45rem; line-height: 1.45; }
.alert { margin-bottom: var(--space-lg); padding: var(--space-sm) var(--space-md); }
.page-head { margin-bottom: var(--space-xl); }
.page-lead { margin-bottom: var(--space-md); line-height: 1.55; }
.actions-row { gap: var(--space-sm); margin-bottom: var(--space-xl); }
.quick-actions { margin-bottom: var(--space-xl); }
.grid--cards { gap: var(--space-md); margin-bottom: var(--space-xl); }
.dash-widgets { gap: var(--space-md); }
.dash-widget > .card + .card { margin-top: var(--space-md); }
.empty-state { padding: var(--space-lg); }
.help-details { padding: var(--space-md) 0; }
.quick-reg, .dash-registro-rapido { margin-top: var(--space-md); padding-top: var(--space-md); }
.footer { margin-top: var(--space-xl); }

/* === 23. Vídeos de ejercicios (fachada con carga bajo demanda) === */
.video-facade {
    position: relative;
    aspect-ratio: 16 / 9;
    max-width: 560px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-surface-2);
    display: grid;
    place-items: center;
}
.video-facade__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--color-surface-2);
    filter: brightness(.55);
}
.video-facade__poster--empty { display: grid; place-items: center; color: var(--color-text-muted); }
.video-facade__poster--empty .icon { width: 3rem; height: 3rem; opacity: .4; }
.video-facade__play {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: .5rem;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.video-facade__play:hover { text-decoration: none; }
.video-facade__btn {
    display: grid;
    place-items: center;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
    transition: transform .15s ease;
}
.video-facade__play:hover .video-facade__btn { transform: scale(1.06); }
.video-facade__btn .icon { width: 1.6rem; height: 1.6rem; margin-left: .2rem; fill: currentColor; }
.video-facade__note {
    position: absolute;
    right: .6rem;
    bottom: .4rem;
    margin: 0;
    font-size: .7rem;
    color: rgba(255, 255, 255, .8);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.video-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-details { margin-top: var(--space-sm); }
.video-details > summary { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.video-details[open] > summary { margin-bottom: var(--space-sm); }