/* EvoLift (web app para iPhone). Pensada para el móvil. */

/* ---------- Paletas: el único sitio con colores ----------
   Las cinco de la marca EvoLift (data-palette en <html>), cada una con modo oscuro y claro (data-theme); todas oscuras
   por defecto. Se eligen en Mi cuenta y se recuerdan en el móvil (js/app.js; el <head> de index.html las pone antes de pintar). Sin elegir: Lima en oscuro.
   Son los valores de EvoLift.Shared/Palettes.cs (APK) y del css de la PWA: si cambia uno, se cambia en los tres.
   Reglas comunes:
   - Acento: solo botones principales, progreso y elementos activos; el texto encima, siempre --on-accent.
   - Secundario: solo récords, logros y pequeños detalles. Como texto, --secondary-strong.
   - El error nunca se comunica solo con color, siempre con icono o texto (en Rojo se parece al acento).
   - Contraste ≥ 4.5:1: el texto de color (--error, --warning, --success, --secondary-strong) va sobre --surface o --bg;
     sobre los fondos suaves (--*-soft) y --surface-2 el texto es --text. Excepciones por fidelidad a la marca, en oscuro:
     el texto blanco sobre el azul de Eléctrico (3.7:1) y sobre el rojo de Rojo (4.2:1).
   - Marca: «EvoLift» con «Lift» en --brand; la «E» son tres franjas: --text, --brand-bright y --brand-deep. */

/* Lima · oscuro (el modo por defecto): la predeterminada: negro, grafito y verde lima */
:root, [data-palette="lima"] {
    color-scheme: dark;

    /* Base */
    --bg: #0B0F0E;
    --surface: #1F2326;
    --surface-2: #2A2F33;
    --border: #363B40;

    /* Texto */
    --text: #E5E7EB;
    --text-muted: #9CA3AF;

    /* Acento */
    --accent: #A7E35B;
    --accent-hover: #B8EA78;
    --accent-pressed: #C6EF93;
    --on-accent: #0B0F0E;

    /* Secundario */
    --secondary: #A7E35B;
    --secondary-strong: #A7E35B;

    /* Estados */
    --success: #6FCF97;
    --warning: #E9B44C;
    --error: #FF8A80;
    --focus-ring: #A7E35B;

    /* Marca: «Lift» y las franjas de la «E» (la de arriba, del color del texto) */
    --brand: #A7E35B;
    --brand-bright: #A7E35B;
    --brand-deep: #82C341;

    --shadow-color: rgb(0 0 0 / .55);
}

/* Lima · claro: botones negros con el lima encima; como texto, verde oscuro */
:root:not([data-palette])[data-theme="light"], [data-palette="lima"][data-theme="light"] {
    color-scheme: light;

    /* Base */
    --bg: #F1F2F4;
    --surface: #FFFFFF;
    --surface-2: #E5E7EB;
    --border: #D1D5DB;

    /* Texto */
    --text: #0B0F0E;
    --text-muted: #4B5563;

    /* Acento */
    --accent: #0B0F0E;
    --accent-hover: #1F2326;
    --accent-pressed: #2A2F33;
    --on-accent: #A7E35B;

    /* Secundario */
    --secondary: #A7E35B;
    --secondary-strong: #44700D;

    /* Estados */
    --success: #1E7A46;
    --warning: #8A5A00;
    --error: #B3261E;
    --focus-ring: #44700D;

    /* Marca: «Lift» y las franjas de la «E» (la de arriba, del color del texto) */
    --brand: #44700D;
    --brand-bright: #A7E35B;
    --brand-deep: #82C341;

    --shadow-color: rgb(11 15 14 / .12);
}

/* Eléctrico · oscuro (el modo por defecto): azul noche, azul eléctrico y morado neón. Texto blanco sobre el azul: 3.7:1, excepción por fidelidad a la marca */
[data-palette="electrico"] {
    color-scheme: dark;

    /* Base */
    --bg: #0A0E14;
    --surface: #1A1F2B;
    --surface-2: #242A38;
    --border: #313848;

    /* Texto */
    --text: #E2E8F0;
    --text-muted: #94A3B8;

    /* Acento */
    --accent: #3B82F6;
    --accent-hover: #2F74EE;
    --accent-pressed: #2563EB;
    --on-accent: #FFFFFF;

    /* Secundario */
    --secondary: #8B5CF6;
    --secondary-strong: #A78BFA;

    /* Estados */
    --success: #6FCF97;
    --warning: #E9B44C;
    --error: #FF8A80;
    --focus-ring: #3B82F6;

    /* Marca: «Lift» y las franjas de la «E» (la de arriba, del color del texto) */
    --brand: #3B82F6;
    --brand-bright: #3B82F6;
    --brand-deep: #8B5CF6;

    --shadow-color: rgb(0 0 0 / .55);
}

/* Eléctrico · claro: el azul algo más oscuro para el texto blanco */
[data-palette="electrico"][data-theme="light"] {
    color-scheme: light;

    /* Base */
    --bg: #EEF2F7;
    --surface: #FFFFFF;
    --surface-2: #E2E8F0;
    --border: #CBD5E1;

    /* Texto */
    --text: #0A0E14;
    --text-muted: #475569;

    /* Acento */
    --accent: #2563EB;
    --accent-hover: #1D4ED8;
    --accent-pressed: #1E40AF;
    --on-accent: #FFFFFF;

    /* Secundario */
    --secondary: #8B5CF6;
    --secondary-strong: #6D28D9;

    /* Estados */
    --success: #1E7A46;
    --warning: #8A5A00;
    --error: #B3261E;
    --focus-ring: #2563EB;

    /* Marca: «Lift» y las franjas de la «E» (la de arriba, del color del texto) */
    --brand: #2563EB;
    --brand-bright: #3B82F6;
    --brand-deep: #8B5CF6;

    --shadow-color: rgb(10 14 20 / .12);
}

/* Rojo · oscuro (el modo por defecto): negro obsidiana y rojo intenso. Texto blanco sobre el rojo: 4.2:1, excepción por fidelidad a la marca */
[data-palette="rojo"] {
    color-scheme: dark;

    /* Base */
    --bg: #0B0B0F;
    --surface: #202127;
    --surface-2: #2A2B32;
    --border: #36373F;

    /* Texto */
    --text: #F5F5F7;
    --text-muted: #A2A5AF;

    /* Acento */
    --accent: #E53945;
    --accent-hover: #D42F3B;
    --accent-pressed: #C02633;
    --on-accent: #FFFFFF;

    /* Secundario */
    --secondary: #A91D2B;
    --secondary-strong: #FF6B75;

    /* Estados */
    --success: #6FCF97;
    --warning: #E9B44C;
    --error: #FF8A80;
    --focus-ring: #E53945;

    /* Marca: «Lift» y las franjas de la «E» (la de arriba, del color del texto) */
    --brand: #E53945;
    --brand-bright: #E53945;
    --brand-deep: #A91D2B;

    --shadow-color: rgb(0 0 0 / .55);
}

/* Rojo · claro: el error, siempre con icono o texto: se parece al acento */
[data-palette="rojo"][data-theme="light"] {
    color-scheme: light;

    /* Base */
    --bg: #F5F5F7;
    --surface: #FFFFFF;
    --surface-2: #EBEBEF;
    --border: #D9DAE0;

    /* Texto */
    --text: #0B0B0F;
    --text-muted: #5B5E68;

    /* Acento */
    --accent: #D62839;
    --accent-hover: #BF2232;
    --accent-pressed: #A91D2B;
    --on-accent: #FFFFFF;

    /* Secundario */
    --secondary: #E53945;
    --secondary-strong: #A91D2B;

    /* Estados */
    --success: #1E7A46;
    --warning: #8A5A00;
    --error: #B3261E;
    --focus-ring: #D62839;

    /* Marca: «Lift» y las franjas de la «E» (la de arriba, del color del texto) */
    --brand: #D62839;
    --brand-bright: #E53945;
    --brand-deep: #A91D2B;

    --shadow-color: rgb(11 11 15 / .12);
}

/* Amarillo · oscuro (el modo por defecto): negro obsidiana y amarillo intenso */
[data-palette="amarillo"] {
    color-scheme: dark;

    /* Base */
    --bg: #0B0B0F;
    --surface: #202127;
    --surface-2: #2A2B32;
    --border: #36373F;

    /* Texto */
    --text: #F5F5F7;
    --text-muted: #A2A5AF;

    /* Acento */
    --accent: #FFD600;
    --accent-hover: #FFDE33;
    --accent-pressed: #FFE566;
    --on-accent: #0B0B0F;

    /* Secundario */
    --secondary: #B89E00;
    --secondary-strong: #FFD600;

    /* Estados */
    --success: #6FCF97;
    --warning: #F5A524;
    --error: #FF8A80;
    --focus-ring: #FFD600;

    /* Marca: «Lift» y las franjas de la «E» (la de arriba, del color del texto) */
    --brand: #FFD600;
    --brand-bright: #FFD600;
    --brand-deep: #B89E00;

    --shadow-color: rgb(0 0 0 / .55);
}

/* Amarillo · claro: botones negros con el amarillo encima; como texto, amarillo oscuro */
[data-palette="amarillo"][data-theme="light"] {
    color-scheme: light;

    /* Base */
    --bg: #F5F5F7;
    --surface: #FFFFFF;
    --surface-2: #EBEBEF;
    --border: #D9DAE0;

    /* Texto */
    --text: #0B0B0F;
    --text-muted: #5B5E68;

    /* Acento */
    --accent: #0B0B0F;
    --accent-hover: #202127;
    --accent-pressed: #2A2B32;
    --on-accent: #FFD600;

    /* Secundario */
    --secondary: #FFD600;
    --secondary-strong: #806B00;

    /* Estados */
    --success: #1E7A46;
    --warning: #8A5A00;
    --error: #B3261E;
    --focus-ring: #806B00;

    /* Marca: «Lift» y las franjas de la «E» (la de arriba, del color del texto) */
    --brand: #806B00;
    --brand-bright: #FFD600;
    --brand-deep: #B89E00;

    --shadow-color: rgb(11 11 15 / .12);
}

/* Naranja · oscuro (el modo por defecto): negro obsidiana y naranja intenso */
[data-palette="naranja"] {
    color-scheme: dark;

    /* Base */
    --bg: #0B0B0F;
    --surface: #202127;
    --surface-2: #2A2B32;
    --border: #36373F;

    /* Texto */
    --text: #F5F5F7;
    --text-muted: #A2A5AF;

    /* Acento */
    --accent: #FF8A00;
    --accent-hover: #FF9D2E;
    --accent-pressed: #FFB05C;
    --on-accent: #0B0B0F;

    /* Secundario */
    --secondary: #CC6A00;
    --secondary-strong: #FF8A00;

    /* Estados */
    --success: #6FCF97;
    --warning: #E9B44C;
    --error: #FF8A80;
    --focus-ring: #FF8A00;

    /* Marca: «Lift» y las franjas de la «E» (la de arriba, del color del texto) */
    --brand: #FF8A00;
    --brand-bright: #FF8A00;
    --brand-deep: #CC6A00;

    --shadow-color: rgb(0 0 0 / .55);
}

/* Naranja · claro: el naranja con texto negro; como texto, naranja tostado */
[data-palette="naranja"][data-theme="light"] {
    color-scheme: light;

    /* Base */
    --bg: #F5F5F7;
    --surface: #FFFFFF;
    --surface-2: #EBEBEF;
    --border: #D9DAE0;

    /* Texto */
    --text: #0B0B0F;
    --text-muted: #5B5E68;

    /* Acento */
    --accent: #FF8A00;
    --accent-hover: #F27F00;
    --accent-pressed: #E07400;
    --on-accent: #0B0B0F;

    /* Secundario */
    --secondary: #FF8A00;
    --secondary-strong: #A65300;

    /* Estados */
    --success: #1E7A46;
    --warning: #8A5A00;
    --error: #B3261E;
    --focus-ring: #A65300;

    /* Marca: «Lift» y las franjas de la «E» (la de arriba, del color del texto) */
    --brand: #B85F00;
    --brand-bright: #FF8A00;
    --brand-deep: #CC6A00;

    --shadow-color: rgb(11 11 15 / .12);
}

/* Derivados de los de arriba (se recalculan solos en cada paleta y modo). */
:root {
    --error-soft: color-mix(in srgb, var(--error) 16%, var(--surface));
    --warning-soft: color-mix(in srgb, var(--warning) 18%, var(--surface));
    --success-soft: color-mix(in srgb, var(--success) 16%, var(--surface));
    --secondary-soft: color-mix(in srgb, var(--secondary) 16%, var(--surface));
    --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--surface));
    --link-underline: color-mix(in srgb, var(--text) 40%, transparent);
    /* Bordes de casillas y huecos vacíos: algo más marcados que --border para que se vean bien al tocar. */
    --border-strong: color-mix(in srgb, var(--text-muted) 45%, var(--border));
    /* Márgenes de la muesca y la barra de inicio del iPhone (0 en el resto). */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* Montserrat, la tipografía de la marca (fuente variable, de 100 a 900; licencia en fonts/Montserrat-OFL.txt). */
@font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/montserrat.woff2") format("woff2");
}

html, body { margin: 0; background: var(--bg); color: var(--text); font-family: Montserrat, -apple-system, "Segoe UI", system-ui, Roboto, sans-serif; }
body { -webkit-text-size-adjust: 100%; overscroll-behavior-y: none; }
h1, h2, h3 { margin: 0; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }
a { color: var(--text); text-decoration-color: var(--link-underline); text-underline-offset: 2px; }
p { margin: .5rem 0; }
.muted { color: var(--text-muted); font-size: .9rem; }
.center { text-align: center; }
.section { font-size: .75rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--secondary-strong); margin: 1rem 0 .4rem; }
.card .section:first-child { margin-top: 0; }

/* ---------- Barras ---------- */
.topbar { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: .5rem; min-height: 3.25rem;
    padding: calc(var(--safe-top) + .5rem) calc(var(--safe-right) + 1rem) .5rem calc(var(--safe-left) + 1rem);
    background: var(--surface); color: var(--text); border-bottom: 1px solid var(--border); }
.topbar h1 { flex: 1; min-width: 0; font-size: 1.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* «EvoLift» en las pestañas: la «E» del icono (BrandMark.razor) y «Lift», del color de la marca de la paleta. */
.topbar h1.brand { display: flex; align-items: center; font-weight: 700; letter-spacing: -.01em; }
.topbar .brand span { color: var(--brand); }
.brand-mark { width: 1.6em; height: 1.6em; flex: none; margin-right: .25rem; }
.brand-mark .m1 { fill: var(--text); }
.brand-mark .m2 { fill: var(--brand-bright); }
.brand-mark .m3 { fill: var(--brand-deep); }
.topbar-back { padding: 0 .5rem 0 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 2rem; line-height: 1; text-decoration: none; cursor: pointer; }
.topbar-actions { display: flex; gap: .5rem; }
.topbar-icon { position: relative; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: none; color: var(--text); cursor: pointer; }
.topbar-icon:disabled { cursor: default; }
.topbar-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.topbar-icon.spinning svg { animation: spin .9s linear infinite; }
.topbar-icon.failed::after { content: ""; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--error); }
@keyframes spin { to { transform: rotate(360deg); } }
.topbar-btn { padding: .4rem .75rem; border: 1px solid var(--border); border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: .95rem; cursor: pointer; }

/* Menú ⋮ de las pestañas: desplegable arriba a la derecha (como el de Android) */
.menu-backdrop { position: fixed; inset: 0; z-index: 200; }
.menu { position: fixed; z-index: 201; top: calc(var(--safe-top) + 3.5rem); right: calc(var(--safe-right) + .5rem); min-width: 12rem; padding: .35rem 0;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 24px var(--shadow-color); }
.menu a { display: flex; align-items: center; gap: .8rem; padding: .8rem 1.1rem; color: var(--text); font-size: 1rem; text-decoration: none; }
.menu svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.menu a:active { background: var(--surface-2); }

.page { padding: 1rem calc(var(--safe-right) + 1rem) 1.5rem calc(var(--safe-left) + 1rem); max-width: 640px; margin: 0 auto; }
.with-tabs .page { padding-bottom: calc(var(--safe-bottom) + 4.5rem); }

/* Barra de pestañas, solo con iconos (el nombre va oculto, para el lector de pantalla): la elegida, con su icono sobre
   una píldora del acento (como la sección activa en la web). */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    padding: .35rem var(--safe-right) calc(var(--safe-bottom) + .35rem) var(--safe-left); background: var(--surface); border-top: 1px solid var(--border); }
.tabbar a { display: flex; justify-content: center; padding: .5rem 0; color: var(--text-muted); text-decoration: none; }
.tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tabbar a.active .tab-icon { background: var(--accent); color: var(--on-accent); }
.tab-icon { position: relative; display: inline-flex; padding: .15rem .9rem; border-radius: 999px; }
.tab-badge { position: absolute; top: -5px; right: .15rem; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--error); color: var(--surface); font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center; }

/* ---------- Componentes ---------- */
/* Texto solo para el lector de pantalla */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.card { display: block; margin-bottom: .75rem; padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
a.card { color: inherit; text-decoration: none; }
.card-active { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--accent); border-color: var(--accent); color: var(--on-accent) !important; }
.pill { padding: .05rem .4rem; border-radius: 6px; background: var(--accent); color: var(--on-accent); font-size: .7rem; font-weight: 700; }
.alert { margin-bottom: .75rem; padding: .75rem 1rem; border: 1px solid var(--error); border-radius: 10px; background: var(--error-soft); color: var(--text); }
.alert::before { content: "⚠ "; }
.empty { padding: 2rem 1rem; text-align: center; }
.empty h3 { margin-bottom: .5rem; }
.info-row { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; }
.info-row + .info-row { border-top: 1px solid var(--border); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .8rem 1rem; border: 1px solid transparent; border-radius: 12px;
    background: var(--accent); color: var(--on-accent); font: inherit; font-size: 1rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn:active { background: var(--accent-pressed); }
.btn:disabled { opacity: .45; cursor: default; }
.btn-secondary { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn-secondary:active { background: var(--border); }
.btn-danger { background: var(--surface); color: var(--error); border-color: var(--error); }
.btn-danger:active { background: var(--error-soft); color: var(--text); }
.btn-block { display: flex; width: 100%; margin-top: .75rem; }

/* 16px como mínimo: con menos, el iPhone hace zoom al tocar la casilla. */
input, textarea { width: 100%; padding: .7rem .8rem; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg); color: var(--text); font: inherit; font-size: 16px; }
input { line-height: 1.25; }
/* Las fechas, del mismo alto y ancho que las demás cajas: el navegador les pone su propio relleno y un ancho mínimo, y el
   iPhone, además, su aspecto (sin ocupar todo el ancho y con el texto centrado). El alto es el de una caja de texto. */
input[type="date"] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; height: calc(1.25em + 1.4rem + 2px); text-align: left; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
input:focus, textarea:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--border); }
textarea { min-height: 84px; resize: vertical; }
label { display: block; margin: .9rem 0 .35rem; font-size: .9rem; font-weight: 600; }

/* ---------- Login ---------- */
.login { display: flex; flex-direction: column; justify-content: center; min-height: 100dvh; max-width: 420px; margin: 0 auto;
    padding: calc(var(--safe-top) + 1.5rem) calc(var(--safe-right) + 1.25rem) calc(var(--safe-bottom) + 1.5rem) calc(var(--safe-left) + 1.25rem); }
.login-brand { margin-bottom: 1.25rem; text-align: center; }
.login-brand .brand-mark { width: 72px; height: 72px; margin: 0; }
.login-brand h1 { margin: .25rem 0 0; font-size: 2.1rem; letter-spacing: -.02em; }
.login-brand h1 span { color: var(--brand); }
/* El lema de la marca, en mayúsculas espaciadas. */
.tagline { margin: .35rem 0 .75rem; color: var(--text-muted); font-size: .66rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; }
.login .btn { margin-top: 1.25rem; }
.login-forgot { margin-top: 1rem; text-align: center; }

/* ---------- Mis entrenos ---------- */
.greeting { margin-bottom: 1rem; }
.sync-status { padding: 0; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: .8rem; cursor: pointer; }
.sync-status.failed { color: var(--error); }
.routine { display: flex; align-items: center; gap: .75rem; }
.routine-info { flex: 1; min-width: 0; }
.routine-day { display: flex; align-items: center; gap: .5rem; }
.routine-day .section { margin: 0; }
.routine h3 { margin: .2rem 0 .1rem; }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: .35rem; }
.notes { margin-top: .35rem; font-size: .9rem; }
.play { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border: 0; border-radius: 50%; background: var(--accent); cursor: pointer; }
.play svg { width: 26px; height: 26px; margin-left: 3px; fill: var(--on-accent); }

/* Cuestionario pendiente: algo que está por hacer, con el fondo suave de aviso. */
.card-feedback { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--warning-soft); border-color: var(--warning); color: var(--text) !important; }
.card-feedback span { font-weight: 700; white-space: nowrap; }
.card-feedback div div { font-size: .9rem; }

/* ---------- Feedback semanal ---------- */
.question h3 { margin-bottom: .2rem; }
.question textarea, .question .number-answer, .question .options { margin-top: .6rem; }
.question.missing { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.number-answer { display: flex; align-items: center; gap: .6rem; }
.number-answer input { max-width: 9rem; }
.options { display: flex; flex-wrap: wrap; gap: .45rem; }
.option { flex: 1 1 auto; min-width: 3rem; padding: .7rem .8rem; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.options.scale { display: grid; }
.options.scale .option { min-width: 0; padding: .75rem 0; }
.option.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ---------- Nutrición ---------- */
.notes-card { white-space: pre-wrap; }
/* Pestañas de las dietas del plan (si tiene más de una): se desliza de lado si no caben. */
.diet-tabs { display: flex; gap: .4rem; margin: 0 0 .5rem; overflow-x: auto; scrollbar-width: none; }
.diet-tabs::-webkit-scrollbar { display: none; }
.diet-tabs button { display: inline-flex; flex: none; align-items: center; gap: .4rem; padding: .5rem .9rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.diet-tabs button.active { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.today-tag { padding: .05rem .4rem; border-radius: 999px; background: var(--success-soft); color: var(--text); font-size: .7rem; font-weight: 700; }
.diet-days { margin: 0 0 .75rem; font-size: .85rem; }
.day-totals .stats { margin-bottom: 0; }
.day-totals .stats > div { padding: .65rem .25rem; }
.meal-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin: 1rem 0 .4rem; }
.meal-head .section { margin: 0; }
.meal-head b { color: var(--secondary-strong); font-size: .9rem; }
.meal-macros { padding: .6rem 0; border-top: 1px solid var(--border); font-size: .85rem; }
.meal { padding: .25rem .9rem; }
.meal-item { display: flex; align-items: center; gap: .75rem; padding: .7rem 0; border-top: 1px solid var(--border); }
.meal > :first-child, .meal > :first-child > summary { border-top: 0; }
.meal-item.recipe { display: block; padding: 0; }
.meal-item.recipe summary { display: flex; align-items: center; gap: .75rem; padding: .7rem 0; list-style: none; cursor: pointer; }
.meal-item.recipe summary::-webkit-details-marker { display: none; }
.meal-item-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.meal-item-text b, .meal-item-text > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.meal-item .amount { flex: none; color: var(--secondary-strong); white-space: nowrap; }
.chevron { flex: none; color: var(--text-muted); font-size: 1.4rem; transition: transform .15s; }
.meal-item.recipe[open] .chevron { transform: rotate(90deg); }
.recipe-body { margin: 0 0 .75rem; padding: .25rem .75rem; border-radius: 10px; background: var(--bg); }
.ingredient { display: flex; align-items: center; gap: .65rem; padding: .45rem 0; }
.ingredient + .ingredient { border-top: 1px solid var(--border); }
.ingredient b { flex: none; white-space: nowrap; }
.instructions p { margin-top: 0; white-space: pre-wrap; }
.instructions .section { margin-top: .6rem; }
/* Las fotos de Open Food Facts suelen venir sobre blanco: el hueco es blanco en todas las paletas. */
.nutrition-photo { display: inline-flex; align-items: center; justify-content: center; flex: none; line-height: 1; border: 1px solid var(--border); border-radius: 10px; background: #fff; object-fit: contain; }
.nutrition-photo.empty { background: var(--bg); font-size: 1.2rem; }

/* Incidencias */
.ticket h3 { margin: .45rem 0 0; overflow-wrap: anywhere; }
.ticket-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ticket-status { padding: .1rem .55rem; border-radius: 999px; color: var(--text); font-size: .75rem; font-weight: 700; }
.ticket-status.open { background: var(--accent-soft); }
.ticket-status.review { background: var(--warning-soft); }
.ticket-status.resolved { background: var(--success-soft); }
.ticket-status.discarded { background: var(--surface-2); }
.ticket-text { margin: .4rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ticket-reply { margin-top: .75rem; padding: .6rem .75rem; border-radius: 10px; background: var(--bg); }
.ticket-reply .section { margin: 0; }

/* Aviso del admin (ventana centrada) */
.notice-backdrop { position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, .45); }
.notice-dialog { position: fixed; z-index: 301; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(22rem, calc(100% - 2rem)); padding: 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 10px 30px var(--shadow-color); }
.notice-dialog p { white-space: pre-line; line-height: 1.4; }

/* ---------- Entreno en curso ---------- */
.progress-head { padding: .6rem calc(var(--safe-right) + 1rem) 0 calc(var(--safe-left) + 1rem); max-width: 640px; margin: 0 auto; }
.progress-text { display: flex; justify-content: space-between; margin-bottom: .4rem; }
.progress { height: 6px; overflow: hidden; border-radius: 3px; background: var(--surface-2); }
.progress div { height: 100%; background: var(--accent); transition: width .2s; }
.workout-page { padding-bottom: calc(var(--safe-bottom) + 10rem); }
.exercise-name { margin: .1rem 0 .2rem; font-size: 1.45rem; }

.sets-table { width: 100%; margin-top: .75rem; border-collapse: separate; border-spacing: 0 3px; table-layout: fixed; }
.sets-table th { padding: .3rem .1rem; color: var(--text-muted); font-size: .72rem; font-weight: 600; text-align: center; }
.sets-table th:nth-child(1) { width: 2.1rem; }
.sets-table th:nth-child(3) { width: 4.3rem; }
.sets-table th:nth-child(4) { width: 3.4rem; }
.sets-table th:nth-child(5) { width: 3rem; }
.sets-table th:nth-child(6) { width: 2.8rem; }
.sets-table td { padding: .2rem .1rem; text-align: center; vertical-align: middle; }
.sets-table .left { text-align: left; }
.sets-table input { padding: .55rem .15rem; text-align: center; }
.set-number { font-weight: 700; }
.previous { font-size: .75rem; overflow-wrap: anywhere; }
.sets-table tr.done td { background: var(--success-soft); }
.sets-table tr.done td:first-child { border-radius: 8px 0 0 8px; }
.sets-table tr.done td:last-child { border-radius: 0 8px 8px 0; }
.check { width: 2.5rem; height: 2.5rem; border: 2px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: transparent; font-size: 1.15rem; font-weight: 700; cursor: pointer; }
.check.on { background: var(--success); border-color: var(--success); color: var(--surface); }

/* Pauta del entrenador para un ejercicio (intensificador, top sets, back off…), en la tarjeta del ejercicio. */
.coach-note { margin-top: .5rem; padding: .5rem .7rem; border-radius: 10px; background: var(--secondary-soft); font-size: .9rem; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Bloque de notas de cada ejercicio, al pie de su tarjeta. */
.exercise-notes { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.exercise-notes .section { margin-top: 0; }
.last-note { margin: .4rem 0 0; font-size: .85rem; white-space: pre-wrap; overflow-wrap: anywhere; }

.workout-bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding-bottom: var(--safe-bottom); background: var(--bg); border-top: 1px solid var(--border); }
.rest-bar { display: flex; align-items: center; gap: .5rem; padding: .6rem calc(var(--safe-right) + 1rem) .6rem calc(var(--safe-left) + 1rem); background: var(--accent); color: var(--on-accent); }
.rest-bar b { flex: 1; font-size: 1.15rem; }
.rest-bar button { padding: .5rem .8rem; border: 0; border-radius: 8px; background: var(--on-accent); color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }
.step-nav { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; max-width: 640px; margin: 0 auto; padding: .6rem calc(var(--safe-right) + 1rem) .6rem calc(var(--safe-left) + 1rem); }

/* ---------- Historial ---------- */
.month-nav { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; text-align: center; }
.month-nav .btn { width: 3rem; padding: .6rem 0; font-size: 1.2rem; }
.history-head { display: block; color: inherit; text-decoration: none; }
.history-head .section { margin: 0; }
.history-head h3 { margin: .15rem 0; }
.history-detail summary { margin-top: .6rem; color: var(--secondary-strong); font-size: .9rem; font-weight: 600; list-style: none; cursor: pointer; }
.history-detail summary::-webkit-details-marker { display: none; }
.history-detail summary::after { content: " ▾"; }
.history-detail[open] summary::after { content: " ▴"; }
.session-exercise { margin: .75rem 0; }
.session-exercise:first-child { margin-top: 0; }
.session-exercise:last-child { margin-bottom: 0; }
.session-exercise-head { display: flex; justify-content: space-between; gap: .75rem; margin-bottom: .2rem; }
.session-exercise-head a { color: inherit; text-decoration: none; }
.exercise-note { margin-top: .2rem; font-size: .9rem; white-space: pre-wrap; overflow-wrap: anywhere; }

.stats { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: .5rem; margin: .75rem 0; }
.stats > div { padding: .65rem .5rem; border-radius: 10px; background: var(--bg); text-align: center; }
.stats > .card { margin: 0; background: var(--surface); }
.stats b { display: block; font-size: 1.1rem; }
.stats span { color: var(--text-muted); font-size: .75rem; }

/* ---------- Ejercicio ---------- */
.video { display: block; width: 100%; aspect-ratio: 16 / 9; margin-bottom: .25rem; border: 0; border-radius: 14px; background: #000; }
.video + .btn { margin: .5rem 0 .75rem; }

/* ---------- Carga y errores ---------- */
.splash { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: var(--bg); color: var(--text); }
.splash img { border-radius: 22px; }
.loading-progress-text::after { content: var(--blazor-load-percentage-text, "Cargando"); }
#blazor-error-ui { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; display: none; padding: .75rem 1.25rem calc(var(--safe-bottom) + .75rem); background: var(--warning-soft); color: var(--text); box-shadow: 0 -1px 2px var(--shadow-color); }
#blazor-error-ui .dismiss { position: absolute; top: .6rem; right: .9rem; cursor: pointer; }

/* ---------- Chat con el entrenador ---------- */
/* Los mensajes van en la página; la caja de escribir, fija encima de la barra de pestañas. */
.chat-page { display: flex; flex-direction: column; gap: .35rem; padding-bottom: calc(var(--safe-bottom) + 10rem) !important; }
.chat-day { align-self: center; margin: .6rem 0 .3rem; }
.chat-day span { padding: .15rem .65rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted); font-size: .78rem; font-weight: 600; }
.chat-msg { max-width: 80%; padding: .5rem .75rem .35rem; border-radius: 16px; }
.chat-msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.35; }
.chat-msg.theirs { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.chat-msg.mine { align-self: flex-end; background: var(--accent-soft); border-bottom-right-radius: 4px; }
.chat-time { display: block; margin-top: .15rem; color: var(--text-muted); font-size: .72rem; text-align: right; }
.chat-compose { position: fixed; left: 0; right: 0; bottom: calc(var(--safe-bottom) + 4.1rem); z-index: 90;
    padding: .5rem calc(var(--safe-right) + .75rem) .5rem calc(var(--safe-left) + .75rem); background: var(--bg); border-top: 1px solid var(--border); }
.chat-compose-row { display: flex; gap: .5rem; align-items: flex-end; max-width: 640px; margin: 0 auto; }
.chat-compose textarea { flex: 1; min-height: 2.6rem; max-height: 8rem; margin: 0; padding: .6rem .85rem; border-radius: 1.3rem; background: var(--surface); resize: none; field-sizing: content; }
.chat-send { display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); cursor: pointer; }
.chat-send:disabled { opacity: .45; cursor: default; }
.chat-send svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chat-error { max-width: 640px; margin: 0 auto .5rem; }
/* Lista de conversaciones (solo el equipo: entrenadores y admins eligen con quién hablar). */
.chat-search { margin-bottom: .75rem; }
.chat-contact { color: var(--text); text-decoration: none; }
.chat-contact-head, .chat-contact-preview { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.chat-contact-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-role { flex: none; padding: .05rem .5rem; border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: .72rem; font-weight: 600; }
.chat-when { flex: none; margin-left: auto; font-size: .8rem; }
.chat-contact-preview { margin-top: .2rem; }
.chat-contact-preview .muted { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-unread { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--error); color: var(--surface); font-size: .72rem; font-weight: 700; line-height: 20px; text-align: center; }

/* ---------- Medidas ---------- */
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; margin-bottom: .9rem; padding: .25rem; border-radius: 12px; background: var(--surface-2); }
.segmented.two { grid-template-columns: repeat(2, 1fr); }
.segmented button { padding: .55rem; border: 0; border-radius: 9px; background: none; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.segmented button.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px var(--shadow-color); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.card-head h3 { margin: 0; }
.info-btn { display: inline-grid; place-items: center; flex: none; width: 1.6rem; height: 1.6rem; padding: 0; border: 1.5px solid var(--accent); border-radius: 50%; background: none; color: var(--accent); font: italic 700 .9rem Georgia, serif; cursor: pointer; }
.info-btn.open { background: var(--accent); color: var(--on-accent); }
.guide { margin: .6rem 0; padding: .65rem .8rem; border-radius: 10px; background: var(--accent-soft); color: var(--text); font-size: .92rem; }
.guide p { margin: .2rem 0 0; white-space: pre-line; line-height: 1.4; }
.guide p:first-child { margin-top: 0; }
/* minmax(0, …): las dos mitades iguales aunque la fecha pida más ancho que el peso */
.form-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .75rem; }
.ok-text { margin: .6rem 0 0; color: var(--success); font-weight: 600; font-size: .9rem; }
.list-card { padding: .25rem 1rem; }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem 0; }
.list-row + .list-row { border-top: 1px solid var(--border); }
.change { margin-left: .4rem; padding: .05rem .4rem; border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: .78rem; font-weight: 600; white-space: nowrap; }
.change.down { background: var(--success-soft); }
.change.up { background: var(--accent-soft); }
.icon-btn { flex: none; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%; background: none; color: var(--text-muted); font-size: 1rem; cursor: pointer; }
.measure-row { display: grid; grid-template-columns: 1fr auto 6.5rem auto; align-items: center; gap: .5rem; margin-top: .55rem; }
.measure-row label { margin: 0; }
.measure-row input { padding: .55rem .6rem; text-align: right; }
.measure-row .unit { color: var(--text-muted); font-size: .85rem; }
.measure-history summary { display: flex; justify-content: space-between; gap: .5rem; cursor: pointer; list-style: none; }
.measure-history summary::-webkit-details-marker { display: none; }
.measure-history[open] summary { margin-bottom: .5rem; }
.weight-chart { display: block; width: 100%; height: auto; }
.weight-chart text { font-size: 11px; fill: var(--text-muted); }
.weight-chart .grid { stroke: var(--border); }
.weight-chart .line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.weight-chart .dot { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.photo-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: .75rem; }
.photo-slot { text-align: center; }
.photo-slot-label { margin-bottom: .3rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; color: var(--secondary-strong); }
.photo-slot img, .photo-thumbs img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; background: var(--surface-2); }
.photo-empty { display: grid; place-content: center; aspect-ratio: 3 / 4; border: 1.5px dashed var(--border-strong); border-radius: 10px; color: var(--text-muted); font-size: .85rem; }
.photo-empty.small { font-size: .8rem; }
.photo-add { margin: 0; color: var(--secondary-strong); cursor: pointer; }
.photo-add span:first-of-type { font-size: 1.6rem; line-height: 1; }
.photo-add input, .link-btn input { display: none; }
.photo-actions { display: flex; justify-content: center; gap: .75rem; margin-top: .3rem; }
.link-btn { display: inline; margin: 0; padding: 0; border: 0; background: none; color: var(--secondary-strong); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.link-btn.danger { color: var(--error); }

/* Foto de perfil (Avatar.razor): sin foto, la inicial en un círculo con el color secundario. */
.avatar { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: none; box-sizing: border-box; border: 2px solid var(--secondary); border-radius: 50%; object-fit: cover; background: var(--surface-2); color: var(--text); font-size: 1rem; font-weight: 700; }
.avatar-lg { width: 5rem; height: 5rem; font-size: 2rem; }
.account-head { display: flex; align-items: center; gap: 1rem; }
.account-head h3 { margin: 0 0 .15rem; }
.avatar-editor { display: flex; flex-direction: column; align-items: center; flex: none; }
.chat-with { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.photo-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; margin-top: .6rem; }

/* «Hoy te toca pesarte» en Mis entrenos */
.card-reminder { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-color: var(--accent); }
.card-reminder span { color: var(--secondary-strong); font-weight: 700; white-space: nowrap; }

/* ---------- Mi cuenta: colores ---------- */
.palettes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.palette { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; font-size: .92rem; font-weight: 600; text-align: left; cursor: pointer; }
.palette.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.palette.on::after { content: "✓"; margin-left: auto; }
/* Muestra de cada paleta: lleva su propio data-palette / data-theme, así enseña sus colores y no los de la elegida. */
.swatch { display: inline-flex; flex: none; overflow: hidden; width: 2.4rem; height: 1.6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.swatch i { flex: 1; }
.swatch i:nth-child(1) { background: var(--surface); }
.swatch i:nth-child(2) { background: var(--brand-bright); }
.swatch i:nth-child(3) { background: var(--brand-deep); }
.theme-mode { margin: .75rem 0 0; }
.language-picker { margin: 0; }
.login .language-picker { align-self: center; width: 220px; margin-bottom: 1.5rem; }

/* ---------- Entreno sin empezar (rutina/{id}): tocando la tarjeta en Mis entrenos ---------- */
a.routine-info { color: inherit; text-decoration: none; }
.routine-link { display: inline-block; margin-top: .45rem; color: var(--secondary-strong); font-size: .85rem; font-weight: 700; }
.routine-page { padding-bottom: calc(var(--safe-bottom) + 6rem); }
.routine-head { margin-bottom: .9rem; }
.routine-head .section { margin: 0; }
.routine-head h2 { margin: .15rem 0 .1rem; }
.plan-exercise { display: flex; align-items: flex-start; gap: .75rem; }
.plan-number { display: grid; place-items: center; flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--surface-2); font-size: .9rem; font-weight: 700; }
.plan-info { flex: 1; min-width: 0; }
.plan-info h3 { margin-bottom: .1rem; }
.plan-target { margin: .3rem 0 .1rem; font-weight: 600; }
.plan-exercise .chevron { align-self: center; }
.step-nav.single { grid-template-columns: 1fr; }