/* EvoLift Admin — estilos base (sin framework CSS) */

/* ---------- 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 la barra superior y se recuerdan en el navegador (app.js). 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);
}

/* Series semanales por músculo (el cuerpo de la ficha del cliente): los mismos en todas las paletas, porque blanco, verde,
   naranja y rojo son lo que se lee de un vistazo. El número va siempre al lado, así que no dependen solo del color. */
:root {
    --sets-low: #FFFFFF;
    --sets-ok: #2E9E58;
    --sets-high: #F28A1E;
    --sets-max: #D7392E;
}

/* 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));
    --surface-3: color-mix(in srgb, var(--surface-2) 70%, var(--border));
    --link-underline: color-mix(in srgb, var(--text) 40%, transparent);
    /* Fondo de las zonas (.zone): algo más oscuro que la página, para que las tarjetas de dentro destaquen. */
    --zone: color-mix(in srgb, var(--bg) 91%, var(--text));
    --shadow: 0 10px 30px var(--shadow-color);
    --radius: 14px;
    font-family: Montserrat, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    color: var(--text);
    background: var(--bg);
}

/* En oscuro la página es casi negra y las tarjetas, grafito: la zona va entre las dos. */
[data-theme="dark"] { --zone: color-mix(in srgb, var(--bg) 60%, var(--surface)); }

/* 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");
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); }
h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 1rem; }
h1:focus { outline: none; }
h2 { font-size: 1.15rem; font-weight: 600; margin: 1.5rem 0 .75rem; }
a { color: var(--text); text-decoration-color: var(--link-underline); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---------- Layout ---------- */
.shell { min-height: 100vh; }

/* Barra superior: logo y secciones a la izquierda, usuario y cerrar sesión a la derecha. */
.topbar { position: sticky; top: 0; z-index: 100; background: var(--surface); color: var(--text); border-bottom: 1px solid var(--border); }
.topbar-inner { display: flex; align-items: center; gap: 1rem; max-width: 1560px; margin: 0 auto; padding: .6rem 1rem; }
.topbar .brand { display: inline-flex; align-items: center; font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; color: var(--text); text-decoration: none; white-space: nowrap; }
/* La «E» del icono (BrandMark.razor): sus tres franjas, del color del texto y de los dos de la marca; «Lift», del de la marca. */
.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 .brand span, .login h1 span { color: var(--brand); }
.topnav { display: flex; gap: .25rem; }
.topnav a { display: inline-flex; align-items: center; gap: .4rem; color: var(--text-muted); font-weight: 500; text-decoration: none; padding: .45rem .8rem; border-radius: 10px; white-space: nowrap; }
/* Iconos (NavIcon.razor): trazo del color del texto, así siguen a la paleta y al modo. */
.nav-icon { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.topnav a:hover { background: var(--bg); color: var(--text); }
.topnav a.active { background: var(--accent); color: var(--on-accent); }
.topbar .account { display: flex; align-items: center; gap: .75rem; margin-left: auto; }
.user-badge { display: inline-flex; align-items: center; gap: .45rem; padding: .2rem .6rem .2rem .2rem; border-radius: 999px; background: var(--bg); color: var(--text); font-size: .9rem; font-weight: 600; white-space: nowrap; max-width: 200px; }
.user-badge .name { overflow: hidden; text-overflow: ellipsis; }
.user-badge .caret { flex: none; color: var(--text); font-size: .75rem; transition: transform .15s; }

/* 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: 1.6rem; height: 1.6rem; flex: none; box-sizing: border-box; border: 2px solid var(--secondary); border-radius: 50%; object-fit: cover; background: var(--surface); color: var(--text); font-size: .8rem; font-weight: 700; }
.avatar-md { width: 2.5rem; height: 2.5rem; font-size: 1.05rem; }
.avatar-lg { width: 4.5rem; height: 4.5rem; font-size: 1.7rem; }
.avatar-editor { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.avatar-pick { position: relative; display: block; overflow: hidden; border-radius: 50%; cursor: pointer; }
.avatar-pick input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.avatar-pick-hint { position: absolute; inset: auto 0 0; padding: .2rem 0 .35rem; background: rgb(0 0 0 / .55); color: #fff; font-size: .7rem; font-weight: 600; text-align: center; opacity: 0; transition: opacity .15s; }
.avatar-pick:hover .avatar-pick-hint, .avatar-pick:focus-within .avatar-pick-hint { opacity: 1; }
.avatar-editor .btn-sm { padding: .15rem .5rem; font-size: .8rem; }
.account-head { display: flex; align-items: center; gap: 1rem; }
.account-head h1, .account-head h2 { margin-bottom: .2rem; }
.user-link { display: inline-flex; align-items: center; gap: .45rem; vertical-align: middle; }

/* Menú del usuario (details): el badge lo abre; dentro, sus datos, «Mi cuenta» y cerrar sesión. */
.user-menu { position: relative; }
.user-menu > summary { list-style: none; cursor: pointer; user-select: none; }
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary:hover, .user-menu[open] > summary { background: var(--surface-2); }
.user-menu[open] .caret { transform: rotate(180deg); }
.user-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 120; width: 270px; max-width: calc(100vw - 2rem); padding: .4rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.user-menu-head { display: flex; align-items: center; gap: .7rem; padding: .6rem .6rem .4rem; }
.user-menu-who { display: flex; flex-direction: column; min-width: 0; }
.user-menu-who b, .user-menu-who .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-role { margin: 0 .6rem .5rem; padding-bottom: .6rem; border-bottom: 1px solid var(--border); }
.user-menu-item { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .6rem; border: 0; border-radius: 6px; background: none; font: inherit; color: var(--text); text-align: left; text-decoration: none; cursor: pointer; }
.user-menu-item:hover { background: var(--surface-2); }
.user-menu form { margin: 0; }
/* Rojo sobre --surface; al pasar el ratón, fondo de error suave con texto normal (el rojo sobre --surface-2 no llega a 4.5:1). */
.user-menu-item.logout { color: var(--error); }
.user-menu-item.logout:hover { background: var(--error-soft); color: var(--text); }
/* Paleta y modo claro / oscuro (los cambia app.js: evoLift.setPalette y evoLift.toggleTheme). */
.topbar select.palette-select, .topbar select.language-select { width: auto; padding: .3rem .5rem; font-size: .85rem; }
.empty-layout-language { position: absolute; top: 1rem; right: 1rem; }
.empty-layout-language select { width: auto; padding: .3rem .5rem; font-size: .85rem; }
.theme-toggle { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: transparent; color: var(--text-muted); font-size: 1rem; cursor: pointer; }
.theme-toggle:hover { background: var(--bg); color: var(--text); }
.theme-toggle .sun, [data-theme="light"] .theme-toggle .moon { display: none; }
[data-theme="light"] .theme-toggle .sun { display: inline; }

.content { padding: 2rem; max-width: 1100px; width: 100%; margin: 0 auto; }

@media (min-width: 1561px) {
    /* Pantallas grandes: todas las secciones caben en una fila (son 9, con icono), con el selector de paleta y el nombre del usuario. */
    .topnav a { padding: .45rem .6rem; }
}

@media (max-width: 1560px) {
    /* Portátiles pequeños, tablet y móvil: logo y menú del usuario arriba; las secciones en una segunda fila que se desplaza en horizontal. */
    .topbar-inner { flex-wrap: wrap; gap: .5rem 1rem; }
    .topnav { order: 3; width: 100%; overflow-x: auto; }
}

@media (max-width: 900px) {
    .content { padding: 1rem; }
}

@media (max-width: 600px) {
    /* Móvil: si paleta, modo y usuario no caben junto al logo, bajan de línea; el nombre se recorta antes. */
    .topbar .account { flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
    .user-badge { max-width: 150px; }
}

/* ---------- Componentes ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem; }
/* Zona: agrupa una sección (título, tablas y tarjetas) sobre un fondo más contrastado que la página. */
.zone { background: var(--zone); border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); padding: 1.25rem; margin-bottom: 1.5rem; }
.zone > h2:first-child, .zone > .section-toolbar:first-child { margin-top: 0; }
.zone > :last-child { margin-bottom: 0; }
@media (max-width: 900px) {
    .zone { padding: .85rem; border-radius: var(--radius); }
}
.toolbar { display: flex; gap: .75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 1rem; }
/* Barra solo con botones (las secciones no repiten su nombre como título: ya lo dice el menú): a la derecha. */
.toolbar-actions { justify-content: flex-end; }
.toolbar h1 { margin: 0; }
.section-toolbar { margin: 1.5rem 0 .75rem; }
.section-toolbar h2 { margin: 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; }
.stat b { display: block; font-size: 1.8rem; }
.stat span { color: var(--text-muted); font-size: .9rem; }
.muted { color: var(--text-muted); font-size: .9rem; }
.badge { display: inline-block; padding: .1rem .5rem; border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: .8rem; font-weight: 600; }
.badge-off { background: var(--error-soft); color: var(--text); }
tr.inactive td { color: var(--text-muted); }
/* Interruptor (checkbox con aspecto de toggle) */
.switch { position: relative; display: inline-block; width: 38px; height: 22px; margin: 0; vertical-align: middle; cursor: pointer; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); transition: background .15s; pointer-events: none; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-muted); box-shadow: 0 1px 2px var(--shadow-color); transition: transform .15s; }
.switch input:checked + span { background: var(--accent); box-shadow: none; }
.switch input:checked + span::after { background: var(--on-accent); }
.switch input:checked + span::after { transform: translateX(16px); }
.switch input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.switch:has(input:disabled) { cursor: not-allowed; opacity: .5; }
.empty { text-align: center; color: var(--text-muted); padding: 2rem; }
.alert { padding: .75rem 1rem; border-radius: 10px; margin-bottom: 1rem; color: var(--text); border: 1px solid var(--border); }
.alert-error { background: var(--error-soft); border-color: var(--error); }
/* El error nunca solo con color: siempre con su icono. */
.alert-error::before, .blazor-error-boundary::before { content: "⚠ "; }
.alert-ok { background: var(--success-soft); border-color: var(--success); }
.alert-off { background: var(--surface-2); }

/* ---------- Tablas ---------- */
table { width: 100%; border-collapse: collapse; background: var(--surface); }
th, td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { font-size: .8rem; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
tr:last-child td { border-bottom: none; }
.table-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; margin-bottom: 1rem; }
td.num, th.num { text-align: right; white-space: nowrap; }
td.center, th.center { text-align: center; white-space: nowrap; }
td.center input { text-align: center; }

/* Filas que se reordenan arrastrando su asa */
.drag-handle { display: inline-flex; vertical-align: middle; padding: .3rem; margin-right: 1.5rem; color: var(--text-muted); cursor: grab; user-select: none; border-radius: 6px; }
.drag-handle svg { pointer-events: none; }
.drag-handle:hover { background: var(--surface-2); color: var(--text); }
.drag-handle:active { cursor: grabbing; }
tr.dragging td, .card.dragging { background: var(--surface-2); }
td.actions { white-space: nowrap; text-align: right; }
td.actions .btn + .btn { margin-left: .75rem; }
td a:not(.btn) { font-weight: 600; }

/* Plantillas generales / personales */
.tag { display: inline-block; margin-left: .4rem; padding: .05rem .45rem; border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: .72rem; font-weight: 600; vertical-align: middle; }
.tag-personal { background: var(--secondary-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--secondary); }
.alert-personal { background: var(--secondary-soft); border-color: var(--secondary); }

/* Desplegable propio (siempre se abre hacia abajo, con buscador) */
.picker { position: relative; }
.picker-toggle { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 10px; font: inherit; color: var(--text); background: var(--bg); text-align: left; cursor: pointer; }
.picker-toggle:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.picker-caret { color: var(--text-muted); }
.picker-backdrop { position: fixed; inset: 0; z-index: 40; }
.picker-panel { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: .5rem; }
.picker-list { max-height: 320px; overflow-y: auto; margin-top: .5rem; }
.picker-group { padding: .5rem .5rem .25rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; color: var(--secondary-strong); }
.picker-item { display: block; width: 100%; padding: .45rem .75rem; border: 0; border-radius: 6px; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.picker-item:hover { background: var(--surface-2); }
.picker-item.selected { background: var(--accent); color: var(--on-accent); }
.picker-empty { padding: .75rem; color: var(--text-muted); }

/* Desplegable flotante bajo un botón (lo coloca app.js: evoLift.anchor) */
.popover-backdrop { position: fixed; inset: 0; z-index: 190; }
.popover { position: fixed; z-index: 200; visibility: hidden; width: 280px; max-height: 300px; overflow-y: auto; padding: .35rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); outline: none; }
.popover-row { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem .7rem; border-radius: 6px; color: var(--text); text-decoration: none; white-space: nowrap; }
.popover-row:hover { background: var(--surface-2); }

/* Reproductor de YouTube (16:9) */
.video-embed { display: block; width: 100%; max-width: 568px; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); background: var(--bg); object-fit: contain; }

/* Vídeo del ejercicio: vista previa con su botón debajo, y las dos formas de añadirlo a la misma altura */
.video-preview { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; margin-bottom: .5rem; }
.file-pick { display: flex; align-items: center; gap: .75rem; margin: 0; min-height: 2.6rem; padding: .3rem .7rem .3rem .3rem; border: 1px dashed var(--border); border-radius: 10px; background: var(--bg); font-weight: 400; cursor: pointer; }
.file-pick:hover { border-color: var(--text-muted); background: var(--surface-2); }
.file-pick input[type=file] { display: none; }
.file-pick .btn { flex: none; white-space: nowrap; }
.file-pick .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-pick.busy { cursor: progress; border-style: solid; }
.input-action { display: flex; gap: .5rem; }
.input-action input { flex: 1; min-width: 0; }
.input-action .btn { flex: none; }

/* ---------- Grupos desplegables (ejercicios por grupo muscular) ---------- */
.group { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: .75rem; overflow: hidden; }
.group > summary { display: flex; align-items: center; gap: .5rem; padding: .8rem 1rem; font-weight: 600; cursor: pointer; list-style: none; user-select: none; background: var(--surface-2); }
.group > summary::-webkit-details-marker { display: none; }
.group > summary::before { content: "▸"; color: var(--text); transition: transform .15s; }
.group[open] > summary::before { transform: rotate(90deg); }
.group > summary:hover { background: var(--surface-3); }
.group .count { color: var(--text); font-weight: 400; font-size: .9rem; }
.group table { border-top: 1px solid var(--border); table-layout: fixed; }
.group col.col-name { width: 50%; }
.group col.col-video { width: 30%; }
.group col.col-actions { width: 20%; }
.group td:first-child { overflow-wrap: anywhere; }
@media (max-width: 760px) {
    .group col.col-name { width: auto; }
    .group col.col-video { width: 72px; }
    .group col.col-actions { width: 84px; }
}
.group tr:last-child td { border-bottom: none; }

/* Bloques de entrenos: el mismo desplegable, con «Editar» a la derecha y sus entrenos dentro. */
.block > summary .block-edit { margin-left: auto; font-weight: 600; }
.block-notes { margin: 0; padding: .75rem 1rem; border-top: 1px solid var(--border); white-space: pre-wrap; }
.block col.col-order { width: 3rem; }
.block col.col-name { width: auto; }
.block col.col-count { width: 7rem; }
@media (max-width: 760px) {
    .block col.col-count { width: 5.5rem; }
}

/* ---------- Formularios ---------- */
label { display: block; font-weight: 600; font-size: .9rem; margin: .75rem 0 .3rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=date], input[type=time], input[type=search], select, textarea {
    width: 100%; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 10px; font: inherit; color: var(--text); background: var(--bg);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
textarea { min-height: 80px; resize: vertical; }
input.small { width: 5rem; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1rem; }
/* Cuatro campos cortos en una sola línea (kcal y macros); en el móvil, dos y dos. */
.row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 600px) { .row-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form-actions { display: flex; gap: .75rem; margin-top: 1.25rem; flex-wrap: wrap; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; gap: .35rem; padding: .55rem 1rem; border-radius: 10px; border: 1px solid transparent; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; background: var(--accent); color: var(--on-accent); }
.btn:hover { background: var(--accent-hover); }
.btn:active { background: var(--accent-pressed); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-secondary { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn-secondary:hover, .btn-secondary:active { background: var(--surface-3); }
.btn-ghost { background: transparent; color: var(--text-muted); border-color: var(--border); }
.btn-ghost:hover, .btn-ghost:active { background: var(--surface-2); color: var(--text); }
/* Fondo --surface: en Hueso y burdeos claro el rojo sobre --bg se queda en 4.4:1. */
.btn-danger { background: var(--surface); color: var(--error); border-color: var(--error); }
.btn-danger:hover, .btn-danger:active { background: var(--error-soft); color: var(--text); }
.btn-sm { padding: .3rem .6rem; font-size: .85rem; }
.btn-icon { padding: .3rem .55rem; }

/* ---------- Login ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.login .card { width: 100%; max-width: 400px; padding: 1.75rem; }
/* El logotipo como en la marca: la «E» encima de «EvoLift» y el lema debajo, en mayúsculas espaciadas. */
.login-brand { display: flex; flex-direction: column; align-items: center; margin-bottom: 1.25rem; text-align: center; }
.login-brand .brand-mark { width: 64px; height: 64px; margin: 0; }
.login-brand h1 { margin: .1rem 0 0; font-size: 2.1rem; letter-spacing: -.02em; }
.tagline { margin: .35rem 0 0; color: var(--text-muted); font-size: .68rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; }

/* ---------- Sesiones ---------- */
details.session { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: .5rem; }
details.session summary { padding: .75rem 1rem; cursor: pointer; display: flex; gap: 1rem; flex-wrap: wrap; align-items: baseline; }
details.session .body { padding: 0 1rem 1rem; }
/* Papelera a la derecha de la fila (y su confirmación), sin desplegarla. */
details.session .session-delete { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; align-self: center; cursor: default; }
details.session .session-delete svg { display: block; }
.pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: .75rem 0 0; }
.sets { display: flex; flex-wrap: wrap; gap: .35rem; margin: .25rem 0 .75rem; }
.sets span { background: var(--bg); border-radius: 6px; padding: .15rem .5rem; font-size: .9rem; }
/* Lo que apuntó el cliente en ese ejercicio durante el entreno. */
.exercise-note { margin: -.35rem 0 .75rem; color: var(--text-muted); font-size: .9rem; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Feedback ---------- */
.question-card { padding-top: 1rem; }
.question-head { display: flex; align-items: center; gap: .75rem; }
.question-number { display: inline-grid; place-items: center; flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--surface-2); color: var(--text); font-weight: 700; }
input.question-text { font-weight: 600; }
.question-tools { display: flex; align-items: center; gap: .35rem; flex: none; }
.question-tools .drag-handle { margin-right: .25rem; }
label.checkbox { display: inline-flex; align-items: center; gap: .45rem; font-weight: 500; cursor: pointer; }
label.checkbox input { width: auto; margin: 0; }
.question-preview { margin-top: .5rem; font-size: .85rem; }
.badge-ok { background: var(--success-soft); color: var(--text); }
.ok-text { color: var(--success); font-weight: 600; }
dl.answers { display: grid; grid-template-columns: minmax(180px, 1fr) 2fr; gap: .45rem 1.25rem; margin: .25rem 0 0; }
dl.answers dt { color: var(--text-muted); }
dl.answers dd { margin: 0; font-weight: 600; white-space: pre-wrap; }
@media (max-width: 760px) {
    .question-head { flex-wrap: wrap; }
    dl.answers { grid-template-columns: 1fr; }
    dl.answers dd { margin-bottom: .4rem; }
}

/* ---------- Nutrición ---------- */
.subtabs { display: flex; gap: .25rem; margin: -.25rem 0 1.25rem; border-bottom: 1px solid var(--border); }
.subtabs > a { padding: .55rem 1rem; color: var(--text-muted); font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subtabs > a.active { color: var(--text); border-bottom-color: var(--accent); }
.subtabs-actions { margin-left: auto; align-self: center; padding-bottom: .4rem; }
.food-search-bar { display: flex; gap: .5rem; }
.food-search-bar input { flex: 1; min-width: 0; }
.food-search-bar .btn { flex: none; }
.food-search-section { margin: 1rem 0 .4rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; color: var(--secondary-strong); }
.food-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .5rem; }
.food-result { display: flex; align-items: center; gap: .65rem; padding: .5rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.food-result:hover { border-color: var(--text-muted); background: var(--surface-2); }
.food-result:disabled { opacity: .6; cursor: progress; }
.food-result-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.food-result-text b, .food-cell b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.food-result-kcal { flex: none; color: var(--text); font-weight: 700; font-size: .9rem; }
.food-photo { display: inline-grid; place-items: center; flex: none; border-radius: 10px; object-fit: contain; background: var(--surface-2); border: 1px solid var(--border); }
.food-photo-empty { background: var(--bg); font-size: 1.2rem; }
.food-cell { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.food-cell > span { display: flex; flex-direction: column; min-width: 0; }
/* «Personalizar» (o «Editar» si ya es personal) a la derecha de la receta en el plan del usuario. */
.food-cell .recipe-personalize { flex: none; margin-left: auto; }
a.food-link { color: inherit; text-decoration: none; }
a.food-link:hover b { text-decoration: underline; }
.photo-upload { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.photo-upload-actions { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; min-width: 0; }
.attribution { font-size: .78rem; margin-top: .6rem; }
.meal-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.meal-name { flex: 1; margin: 0; font-size: 1.05rem; }
/* Columnas de ancho fijo y cifras del mismo ancho: al cambiar los gramos la tabla no se estira ni se encoge. */
.meal-items { margin-bottom: .75rem; border: 1px solid var(--border); border-radius: 10px; table-layout: fixed; }
.meal-items td { padding: .45rem .6rem; }
.meal-items th:nth-child(2) { width: 10rem; }
.meal-items th:nth-child(3) { width: 4.5rem; }
.meal-items th:nth-child(4), .meal-items th:nth-child(5), .meal-items th:nth-child(6) { width: 4rem; }
.meal-items th:nth-child(7) { width: 3.5rem; }
.meal-items td:first-child { overflow: hidden; }
.meal-items td.num, .macro-totals b, .meal-head .muted { font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
    .meal-items th:nth-child(2) { width: 6.5rem; }
    .meal-items th:nth-child(3), .meal-items th:nth-child(4), .meal-items th:nth-child(5), .meal-items th:nth-child(6) { width: 3.2rem; }
    .meal-items th:nth-child(7) { width: 2.8rem; }
    .meal-items td { padding: .4rem .3rem; }
}
.macro-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .75rem; margin-bottom: .75rem; }
.macro-totals > div { padding: .7rem; border-radius: 10px; background: var(--bg); text-align: center; }
.macro-totals b { display: block; font-size: 1.5rem; }
.macro-totals span { color: var(--text-muted); font-size: .82rem; }
.macro-totals.target { margin-top: 1rem; }
.warn-text { color: var(--warning); font-weight: 600; }
h3.subsection { margin: 1.25rem 0 .6rem; font-size: 1.05rem; }
select.portions { width: auto; padding: .4rem .5rem; }
.amount-input { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.amount-input span { min-width: 4.5rem; text-align: left; }
select.amount-unit { width: auto; min-width: 4.5rem; padding: .3rem .4rem; }
.meal-card .btn-sm + .btn-sm { margin-left: .4rem; }
/* Conjuntos de comidas del plan (uno por tipo de día): si no caben, las pestañas siguen en otra línea. */
.subtabs.meal-sets { margin: 0 0 1rem; flex-wrap: wrap; }
.subtabs.meal-sets > button, .subtabs.meal-sets .subtabs-actions { white-space: nowrap; }
.meal-set-actions { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }

/* ---------- Plantilla ---------- */
.ex-row td input { margin: 0; }
/* Ancho fijo: el selector Fijas/Rango queda en la misma columna con o sin la segunda casilla. */
.reps-cell { display: inline-flex; align-items: center; gap: .35rem; width: 14.5rem; }
.reps-cell select.reps-mode { width: auto; padding: .45rem .5rem; }
.reps-cell input.small { width: 4.2rem; }
/* Tabla de ejercicios del entreno: su página es más ancha que las demás, para que quepan las series desplegadas. */
.content:has(.ex-table) { max-width: 1440px; }
.ex-table th, .ex-table td { padding: .6rem .5rem; }
.ex-table th:first-child, .ex-table td:first-child { padding-left: .75rem; }
.ex-table input.small { width: 4.4rem; }
/* Lo que ocupe (con rango, más), pero con el ancho de un rango como mínimo: la columna no cambia al pasar de fijas a rango. */
.ex-table .reps-cell { width: max-content; min-width: 14rem; }
.ex-table .reps-cell > * { flex: none; }
.ex-table .reps-cell input.small { width: 3.6rem; }
/* El botón con el objetivo de cada serie («8–10 / 10–12 / 12–15 · RIR 2») que despliega la fila de debajo. */
.sets-toggle { display: inline-flex; align-items: center; justify-content: space-between; gap: .5rem; min-width: 14rem; max-width: 30rem; padding: .45rem .65rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); font: inherit; font-size: .9rem; text-align: left; cursor: pointer; }
.sets-toggle:hover, .sets-toggle[aria-expanded="true"] { border-color: var(--text-muted); }
.sets-toggle > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Fila de debajo del ejercicio (series por separado y pauta): pegada a la suya, sin raya entre las dos. */
.ex-row.has-detail td { border-bottom: 0; }
.ex-detail td { padding-top: 0; }
.set-targets { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .6rem; padding: .6rem .75rem; border-radius: 10px; background: var(--surface-2); width: max-content; max-width: 100%; }
.set-target { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.set-target-label { width: 4rem; font-weight: 600; font-size: .9rem; }.inline-label { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: .9rem; }
.ex-notes label { margin-top: 0; }
.ex-notes textarea { min-height: 0; max-width: 46rem; }
/* «+ Pauta» bajo el nombre del ejercicio: discreto, como un enlace. */
.link-btn { margin-top: .2rem; padding: 0; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: .82rem; text-decoration: underline; text-decoration-color: var(--link-underline); cursor: pointer; }
.link-btn:hover { color: var(--text); }
video { max-width: 100%; border-radius: 10px; background: var(--bg); }

/* ---------- Ideas ---------- */
.subtabs > button { padding: .55rem 1rem; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; font: inherit; color: var(--text-muted); font-weight: 600; cursor: pointer; }
.subtabs > button.active { color: var(--text); border-bottom-color: var(--accent); }
.subtabs .count { margin-left: .2rem; font-weight: 400; font-size: .85rem; }
/* Pestañas de la ficha del usuario: en el móvil no caben todas y se deslizan de lado. La raya de abajo va como sombra
   para que el subrayado de la activa no se salga de la tira que se desliza. */
.subtabs.user-tabs { overflow-x: auto; scrollbar-width: none; border-bottom: 0; box-shadow: inset 0 -1px var(--border); }
.subtabs.user-tabs > button { flex: none; white-space: nowrap; margin-bottom: 0; }
.idea-head { display: flex; align-items: center; gap: .6rem; }
.idea-head h3 { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.idea-meta { margin-top: .25rem; }
.idea-details { margin: .75rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.idea-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .9rem; }
select.idea-status { width: auto; padding: .3rem .5rem; font-size: .85rem; }
.idea-edit { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; }
.idea-comments { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--border); }
.idea-comment { margin-bottom: .75rem; }
.idea-comment p { margin: .2rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.idea-comments textarea { min-height: 60px; margin-bottom: .5rem; }
.link-button { margin-left: .4rem; padding: 0; border: 0; background: none; font: inherit; color: var(--text-muted); text-decoration: underline; cursor: pointer; }
.link-button:hover { color: var(--error); }
.status-new { background: var(--surface-2); color: var(--text); }
.status-planned { background: var(--secondary-soft); color: var(--text); }
.status-progress { background: var(--warning-soft); color: var(--text); }
.status-discarded { background: transparent; color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border); }

/* ---------- Errores Blazor ---------- */
#blazor-error-ui { background: var(--warning-soft); color: var(--text); bottom: 0; box-shadow: 0 -1px 2px var(--shadow-color); display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
.blazor-error-boundary { background: var(--error-soft); border: 1px solid var(--error); padding: 1rem; color: var(--text); }
.blazor-error-boundary::after { content: "Ha ocurrido un error."; }
.validation-message { color: var(--error); font-size: .85rem; }

/* ---------- Avisos flotantes (snackbar: Services/Toasts.cs → app.js) ----------
   Arriba a la derecha, bajo la barra superior (app.js pone el top). Texto en --text sobre --surface;
   el tipo se ve por el icono y la franja de color, no solo por el color. */
.toasts { position: fixed; right: 1rem; top: 4.5rem; z-index: 1050; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; width: min(380px, calc(100vw - 2rem)); pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: .6rem; width: 100%; padding: .75rem .6rem .75rem .9rem; border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: var(--shadow); font-size: .92rem; pointer-events: auto; animation: toast-in .2s ease-out; transition: opacity .2s, transform .2s; }
.toast.leaving { opacity: 0; transform: translateX(1rem); }
.toast-ok { border-left-color: var(--success); }
.toast-error { border-left-color: var(--error); }
.toast-icon { flex: none; font-weight: 700; line-height: 1.35; }
.toast-ok .toast-icon { color: var(--success); }
.toast-error .toast-icon { color: var(--error); }
.toast-text { flex: 1; min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
.toast-close { flex: none; margin: -.2rem 0 -.2rem .2rem; padding: .15rem .4rem; border: 0; border-radius: 6px; background: none; color: var(--text-muted); font: inherit; font-size: .85rem; cursor: pointer; }
.toast-close:hover { background: var(--surface-2); color: var(--text); }
/* Solo desliza (sin partir de opacidad 0): si el navegador congela la animación (pestaña en segundo plano), el aviso se sigue viendo. */
@keyframes toast-in { from { transform: translateX(1rem); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; transition: none; } }

/* ---------- Aviso para todos (p. ej. antes de actualizar el servidor) ---------- */
.notice-bar { background: var(--warning-soft); color: var(--text); border-bottom: 1px solid var(--warning); }
.notice-bar-inner { max-width: 1100px; margin: 0 auto; padding: .6rem 2rem; font-size: .95rem; }
@media (max-width: 900px) { .notice-bar-inner { padding: .6rem 1rem; } }
.notice-admin { border-color: var(--warning); }
.notice-admin-head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.notice-admin-head h2 { margin: 0; }
.notice-admin-text { white-space: pre-line; margin: .75rem 0 .25rem; }
.notice-admin .form-actions { align-items: flex-end; }
label.inline { margin: 0; font-weight: 500; }
label.inline select { width: auto; margin-left: .4rem; }

/* ---------- Chat (cliente ↔ entrenador) ---------- */
/* Entrenador: lista de clientes a la izquierda y conversación a la derecha. En el móvil, una cosa u otra. */
.chat-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1rem; align-items: start; }
.chat-list { padding: .75rem; max-height: calc(100vh - 7rem); overflow-y: auto; }
.chat-list input[type=search] { margin-bottom: .5rem; }
.chat-contact { display: block; padding: .6rem .65rem; border-radius: 10px; color: inherit; text-decoration: none; }
.chat-contact:hover { background: var(--bg); }
.chat-contact.active { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
.chat-contact-head, .chat-contact-preview { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.chat-contact-head .muted { font-size: .8rem; flex: none; }
.chat-contact-name { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; }
.chat-contact-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-contact-preview .muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
.chat-unread { flex: none; min-width: 1.3rem; padding: 0 .35rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: .75rem; font-weight: 700; line-height: 1.3rem; text-align: center; }
.chat-header { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.chat-header h1 { flex: 1; margin: 0; font-size: 1.3rem; }
.chat-back { display: none; font-size: 1.8rem; line-height: 1; text-decoration: none; color: var(--text); }

.chat-thread { display: flex; flex-direction: column; padding: 0; }
.chat-messages { display: flex; flex-direction: column; gap: .35rem; height: calc(100vh - 17rem); min-height: 280px; overflow-y: auto; padding: 1rem; }
.chat-messages .empty { margin: auto; max-width: 28rem; }
.chat-day { align-self: center; margin: .6rem 0 .3rem; }
.chat-day span { padding: .15rem .65rem; border-radius: 999px; background: var(--bg); color: var(--text-muted); font-size: .8rem; font-weight: 600; }
.chat-msg { max-width: min(75%, 34rem); padding: .5rem .75rem .35rem; border-radius: 14px; }
.chat-msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg.theirs { align-self: flex-start; background: var(--bg); border-bottom-left-radius: 4px; }
.chat-msg.mine { align-self: flex-end; background: var(--surface-2); border-bottom-right-radius: 4px; }
/* Sobre --surface-2 el gris no llega a 4.5:1 en modo claro: ahí el texto secundario va en --text. */
.chat-contact.active .muted, .chat-msg.mine .chat-time { color: var(--text); }
.chat-time { display: block; margin-top: .15rem; color: var(--text-muted); font-size: .75rem; text-align: right; }
.chat-compose { display: flex; gap: .6rem; align-items: flex-end; padding: .75rem; border-top: 1px solid var(--border); }
.chat-compose textarea { flex: 1; min-height: 0; margin: 0; resize: none; }

@media (max-width: 760px) {
    .chat-layout { grid-template-columns: minmax(0, 1fr); }
    .chat-layout.show-thread .chat-list, .chat-layout.show-list .chat-main { display: none; }
    .chat-list { max-height: none; }
    .chat-back { display: inline; }
    .chat-messages { height: calc(100vh - 19rem); }
}

/* Menú: conversaciones con mensajes sin leer junto a «Chat» (ChatBadge.razor). */
.topnav .nav-count { display: inline-block; min-width: 1.2rem; margin-left: .3rem; padding: 0 .3rem; border-radius: 999px; background: var(--error); color: var(--surface); font-size: .72rem; font-weight: 700; line-height: 1.2rem; text-align: center; }

/* ---------- Medidas (ficha del cliente) ---------- */
.weekday-picker { display: flex; gap: .35rem; flex-wrap: wrap; }
.weekday-picker button { width: 2.4rem; height: 2.4rem; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); font: inherit; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.weekday-picker button.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
/* Grupos musculares de un ejercicio: se marcan uno o varios (el primero, «principal»). */
.group-picker { display: flex; gap: .4rem; flex-wrap: wrap; }
.group-picker button { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .8rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font: inherit; font-size: .9rem; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.group-picker button.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.group-main { padding: 0 .4rem; border-radius: 999px; background: rgb(0 0 0 / .18); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.also-groups { margin-left: .4rem; font-size: .8rem; }
.big-number { font-size: 1.4rem; }
.change { margin-left: .5rem; padding: .05rem .45rem; border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: .85rem; font-weight: 600; white-space: nowrap; }
td .change { margin-left: 0; }
.change.down { background: var(--secondary-soft); box-shadow: inset 0 0 0 1px var(--secondary); }
.change.up { background: var(--warning-soft); }
.weight-chart { display: block; width: 100%; max-width: 760px; 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; }
/* Con la media semanal, los pesajes de cada día pasan a segundo plano y la media es la línea que se lee. */
.weight-chart .line.daily { stroke: var(--text-muted); stroke-width: 1.2; opacity: .55; }
.weight-chart .dot.daily { fill: var(--text-muted); stroke: none; opacity: .55; }
.weight-chart .line.average { stroke: var(--accent); stroke-width: 3; }
.weight-chart .dot.average { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; }
.chart-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: .35rem; color: var(--text-muted); font-size: .85rem; }
.chart-legend > span { display: inline-flex; align-items: center; gap: .4rem; }
.legend-line { display: inline-block; width: 1.4rem; height: 0; border-top: 3px solid var(--accent); }
.legend-line.daily { border-top: 1.5px solid var(--text-muted); opacity: .7; }
/* Bloques plegables de la pestaña Medidas (Peso, Perímetros, Fotos): el resumen va en la cabecera. */
.measure-block > summary .summary-info { margin-left: auto; color: var(--text-muted); font-weight: 400; font-size: .9rem; text-align: right; }
.measure-body { padding: 1rem; border-top: 1px solid var(--border); }
.measure-body > :last-child { margin-bottom: 0; }
.measure-subtitle { margin: 1.25rem 0 .5rem; font-size: .95rem; }
.photo-compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.photo-pose .section-label { font-size: .8rem; font-weight: 700; text-transform: uppercase; color: var(--secondary-strong); margin-bottom: .35rem; }
.photo-pair { display: flex; gap: .5rem; }
.photo-pair figure { flex: 1; min-width: 0; margin: 0; text-align: center; }
.photo-pair img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; background: var(--bg); }
.photo-missing { display: grid; place-items: center; aspect-ratio: 3 / 4; border: 1px dashed var(--border); border-radius: 10px; color: var(--text-muted); font-size: .85rem; }
.photo-pair figcaption { margin-top: .25rem; font-size: .8rem; }
@media (max-width: 760px) { .photo-compare { grid-template-columns: minmax(0, 1fr); } }
/* Resumen / Configuración dentro de la pestaña Medidas. */
.subtabs.measure-tabs { margin: 0 0 1rem; }
/* Configuración: indicaciones (las ve en la app con el ⓘ) y qué perímetros se le piden. */
.guide-editor textarea { min-height: 0; }
.guide-editor .link-btn { margin-top: .1rem; }
.zone-table { max-width: 46rem; }
.zone-table td { vertical-align: middle; }
.zone-table tr.off td:first-child { color: var(--text-muted); }
.zone-table tr.has-detail td { border-bottom: 0; }
.zone-table tr.zone-guide td { padding-top: 0; }
.zone-table .guide-editor label { margin-top: 0; }
.check-label { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-weight: 600; cursor: pointer; }
.check-label input { width: auto; margin: 0; }
select.sides-select { width: auto; min-width: 11rem; margin: 0; padding: .4rem .5rem; }

/* ---------- Estado del servidor (solo admin) ---------- */
.server-refresh { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.server-problems { margin: .35rem 0 0; padding-left: 1.2rem; }
.meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.meter-card { display: flex; flex-direction: column; gap: .5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; }
.meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.meter-head span { color: var(--text-muted); font-size: .9rem; }
.meter-head b { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.meter { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .4s; }
.meter.warn span { background: var(--warning); }
.meter.high span { background: var(--error); }
dl.server-facts { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.25rem; margin: 0 0 1rem; }
dl.server-facts dt { color: var(--text-muted); }
dl.server-facts dd { margin: 0; overflow-wrap: anywhere; }
td.nowrap { white-space: nowrap; }
td.server-image { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; color: var(--text-muted); }

/* ---------- Calendario del Centro de Control (Users/ClientCalendar.razor) ----------
   Lo hecho, con el fondo suave de su tipo; lo que toca y aún no se ha hecho, con borde discontinuo. */
.cal-toolbar { margin-top: 0; }
.cal-controls { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; width: 100%; justify-content: space-between; }
select.cal-filter, select.cal-user { width: auto; }
select.cal-user { max-width: 16rem; }
/* Mi calendario / Calendario de un usuario: dos botones pegados, el activo resaltado. */
.view-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.view-switch button { padding: .45rem .8rem; border: 0; background: var(--surface); color: var(--text-muted); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.view-switch button + button { border-left: 1px solid var(--border); }
.view-switch button.active { background: var(--accent); color: var(--on-accent); }
.cal-nav { display: flex; align-items: center; gap: .35rem; }
.cal-month { min-width: 9.5rem; text-align: center; text-transform: capitalize; }
.calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; }
.cal-weekday { padding: .15rem; color: var(--text-muted); font-size: .8rem; font-weight: 600; text-align: center; }
.cal-day { display: flex; flex-direction: column; align-items: stretch; gap: .2rem; min-width: 0; min-height: 6.4rem; padding: .35rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); }
.cal-day { cursor: pointer; }
.cal-day:hover { border-color: var(--text-muted); }
.cal-day.other { background: transparent; color: var(--text-muted); }
.cal-num { align-self: flex-start; min-width: 1.6rem; padding: 0 .35rem; border: 0; border-radius: 999px; background: none; color: inherit; font: inherit; font-size: .85rem; font-weight: 700; line-height: 1.6rem; text-align: center; }
button.cal-num { cursor: pointer; }
button.cal-num:hover { background: var(--surface-2); }
.cal-day.today .cal-num { background: var(--accent); color: var(--on-accent); }
.cal-chip { display: flex; align-items: center; gap: .3rem; min-width: 0; padding: .05rem .4rem; border: 1px solid transparent; border-radius: 6px; color: var(--text); font: inherit; font-size: .78rem; text-align: left; }
button.cal-chip { width: 100%; cursor: pointer; }
button.cal-chip:hover { border-color: var(--text-muted); }
.cal-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip .nav-icon { width: .95em; height: .95em; }
.cal-chip.workout { background: var(--success-soft); }
.cal-chip.feedback { background: var(--warning-soft); }
.cal-chip.weight { background: var(--secondary-soft); }
.cal-chip.payment { background: var(--surface-2); }
.cal-chip.expiry { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--warning); }
.cal-chip.planned { background: transparent; border: 1px dashed var(--text-muted); }
/* Pago que ya tocaba y no se ha cobrado. */
.cal-chip.overdue { background: var(--error-soft); border-color: var(--error); }
.cal-chip.event { background: color-mix(in srgb, var(--accent) 20%, var(--surface)); box-shadow: inset 3px 0 0 var(--accent); }
.cal-more { align-self: flex-start; padding: 0 .2rem; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: .75rem; cursor: pointer; }
.cal-more:hover { color: var(--text); text-decoration: underline; }
.cal-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: .75rem 0 0; color: var(--text-muted); font-size: .82rem; }
.cal-legend > span { display: inline-flex; align-items: center; gap: .4rem; }
.cal-items { margin: 0; padding: 0; list-style: none; }
.cal-item { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-top: 1px solid var(--border); }
.cal-item:first-child { border-top: 0; }
.cal-item > .nav-icon { color: var(--text-muted); }
.cal-item-text { flex: 1; min-width: 0; }
.cal-item-info { flex: none; max-width: 50%; color: var(--text-muted); font-size: .9rem; text-align: right; }

/* Desplegable sobre el día con quiénes son (un .popover: lo coloca app.js). Su día queda marcado mientras está abierto. */
.cal-day.open { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-popover { display: flex; flex-direction: column; width: 330px; max-height: 380px; padding: .7rem .85rem; overflow: hidden; }
.cal-pop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; }
.cal-pop-head h3 { margin: .2rem 0 0; font-size: 1rem; }
.cal-pop-close { flex: none; width: 1.9rem; height: 1.9rem; border: 0; border-radius: 50%; background: none; color: var(--text-muted); font: inherit; cursor: pointer; }
.cal-pop-close:hover { background: var(--surface-2); color: var(--text); }
.cal-popover input[type=search] { margin-bottom: .5rem; }
.cal-pop-body { overflow-y: auto; }
.cal-pop-group { display: flex; align-items: center; gap: .5rem; margin: .8rem 0 .1rem; color: var(--secondary-strong); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.cal-pop-group:first-child { margin-top: 0; }
.cal-popover .cal-item { padding: .4rem 0; font-size: .92rem; }
.cal-item-notes { display: block; color: var(--text-muted); font-size: .85rem; white-space: pre-line; }
.cal-pop-foot { display: flex; justify-content: flex-end; margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--border); }
.cal-event-form label:first-child { margin-top: 0; }
.cal-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.cal-event-form .form-actions { align-items: center; margin-top: .9rem; }
.cal-event-form .cal-delete { margin-left: auto; }
.cal-confirm { font-weight: 600; font-size: .9rem; }
/* Estrecho: en cada día solo los iconos y cuántos hay. */
@media (max-width: 760px) {
    .cal-day { min-height: 4.2rem; padding: .25rem; }
    .cal-chip { padding: .05rem .25rem; font-size: .72rem; }
    .cal-chip-word { display: none; }
    .cal-month { min-width: 0; }
}

/* ---------- Series semanales por grupo muscular (Users/WeeklySetsMap.razor) ----------
   Un desplegable de la pestaña Entrenos: el cuerpo de delante y de detrás, y al lado la lista con las series de cada grupo. */
.lvl-0 { --lvl: var(--sets-low); }
.lvl-1 { --lvl: var(--sets-ok); }
.lvl-2 { --lvl: var(--sets-high); }
.lvl-3 { --lvl: var(--sets-max); }
.weekly-sets-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 20rem); gap: 1.25rem; align-items: start; padding: 1rem; border-top: 1px solid var(--border); }
.body-maps { display: flex; justify-content: center; gap: 1rem; }
.body-maps figure { flex: 1; max-width: 220px; margin: 0; text-align: center; }
.body-maps svg { display: block; width: 100%; height: auto; }
.body-maps figcaption { margin-top: .25rem; color: var(--text-muted); font-size: .85rem; font-weight: 600; }
.body-maps polygon { stroke-width: .8; stroke-linejoin: round; }
.body-maps .part { fill: var(--surface-3); stroke: var(--border); }
.body-maps .muscle { fill: var(--lvl); stroke: var(--text-muted); }
.body-maps .muscle:hover { stroke: var(--text); stroke-width: 1.6; }
.sets-list { margin: 0; padding: 0; list-style: none; }
.sets-list li { display: flex; align-items: center; gap: .55rem; padding: .4rem 0; border-top: 1px solid var(--border); }
.sets-list li:first-child { border-top: 0; }
.sets-list b { margin-left: auto; font-variant-numeric: tabular-nums; }
.swatch { flex: none; display: inline-block; width: .9rem; height: .9rem; border: 1px solid var(--text-muted); border-radius: 3px; background: var(--lvl); }
.sets-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding: 0 1rem; color: var(--text-muted); font-size: .85rem; }
.sets-legend > span { display: inline-flex; align-items: center; gap: .4rem; }
.sets-note { margin: .6rem 0 0; padding: 0 1rem 1rem; }
@media (max-width: 760px) {
    .weekly-sets-body { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Suscripciones (Centro de Control → Contabilidad, y en la cabecera de la ficha) ---------- */
.subscription-line { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .4rem; }
.subscription-line label { margin: 0; font-size: .9rem; }
.subscription-line select { width: auto; max-width: 100%; margin: 0; padding: .3rem .5rem; font-size: .9rem; }
.plans-table td { vertical-align: top; }
.plan-description { max-width: 34rem; margin-top: .15rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.plans-table tr.plan-edit td { padding-top: 0; }
.plan-form { margin-bottom: 1rem; }