/* =============================================================================
   Hyrapp · panel del centro, panel interno, acceso y lector
   Sistema visual v2 del estudio de 64 mesas (UX-Hyrapp, mesa E5 y
   generador-python/lib.py, «UI v2 definitiva»): barra lateral tinta, fondo
   lavanda, cabecera violeta en el inicio y cifras en tarjetas tinta.
   Medidas, radios y tipografías calcados del estudio; los tres colores de
   marca, los del pack V3.2-FINAL (violeta #6548EB, lima #D6F57A, tinta
   #20242B), como decidió el proyecto. Los tonos derivados se recalculan sobre
   ellos. Sora en titulares y cifras; Inter en la interfaz, autoalojadas.
   La web comercial y los textos legales no usan esta hoja.
   ============================================================================= */

@font-face { font-family: Inter; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 700 800; font-display: swap; src: url("../fonts/inter-700.woff") format("woff"); }
@font-face { font-family: Sora; font-style: normal; font-weight: 500 600; font-display: swap; src: url("../fonts/sora-600.woff") format("woff"); }
@font-face { font-family: Sora; font-style: normal; font-weight: 700 800; font-display: swap; src: url("../fonts/sora-700.woff2") format("woff2"); }

:root {
    /* Marca (pack V3.2-FINAL) */
    --violet: #6548eb;
    --vink: #5134d9;          /* violeta para texto y enlaces sobre claro */
    --vink-hover: #3f24c4;
    --tint: #efebff;          /* violeta muy claro: cabeceras de tabla, activos */
    --soft: #c9bdff;
    --lavender: #e8e2ff;
    --lime: #d6f57a;
    --lime-tint: #f4ffd6;
    --lime-ink: #4d6600;
    --ink: #20242b;
    --ink-2: #2c313a;         /* superficies elevadas sobre tinta */
    --ink-line: #3b414c;
    --white: #ffffff;

    /* Interfaz */
    --ground: #f2f0fa;        /* fondo lavanda del panel */
    --line: #e7e8ee;
    --ctrl: #7a8294;          /* borde de controles */
    --muted: #5b6475;
    --body-2: #4b5565;
    --side-text: #c9ceda;     /* texto del menú sobre tinta */
    --soft-text: #a6adbb;     /* texto secundario sobre tinta */
    --row-alt: #fafafd;

    /* Estados (texto / fondo / borde) */
    --ok: #127a3e;   --ok-bg: #e5f6ec;   --ok-line: #b9e3c8;
    --info: #1d5fd1; --info-bg: #e6eefc; --info-line: #bfd2f5;
    --warn: #a84f00; --warn-bg: #fff1e2; --warn-line: #f2cfa8;
    --bad: #c2261d;  --bad-bg: #fdebea;  --bad-line: #f1c3bf;
    --neutral: #5b6475; --neutral-bg: #eef0f4;
    --violet-line: #d6ccff;

    /* Sobre tinta (cifras) */
    --on-ink-ok: var(--lime);
    --on-ink-bad: #ff9a8f;
    --on-ink-warn: #ffb86b;
    --on-ink-neutral: #c9ceda;

    --font-ui: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: Sora, Inter, system-ui, sans-serif;

    --r-ctrl: 10px;
    --r-box: 12px;
    --r-card: 16px;
    --r-hero: 20px;

    --sidebar-w: 248px;
    --focus-ring: 2px solid var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font: 400 14px/20px var(--font-ui);
    color: var(--ink);
    background: var(--ground);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; color: var(--ink); }
h1, h2 { font-family: var(--font-display); }
h1 { font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: 17px; line-height: 24px; font-weight: 600; }
h3 { font-size: 15px; line-height: 21px; font-weight: 700; }
h4 { font-size: 14px; line-height: 20px; font-weight: 600; }
p { margin: 0; }

a { color: var(--vink); }
a:hover { color: var(--vink-hover); }
button, input, select, textarea { font-family: inherit; }
/* Sin el marco gris del navegador (hallazgo C13, 14 de octubre de 2026): un fieldset agrupa, no dibuja. */
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
img, svg { vertical-align: middle; }
svg { flex: none; }
[hidden] { display: none !important; }

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: var(--r-ctrl); background: var(--ink); color: var(--white); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; color: var(--white); }

/* -----------------------------------------------------------------------------
   Utilidades de composición (row, stack, two, grid del estudio)
   ----------------------------------------------------------------------------- */
.muted { color: var(--muted); }
.small { font-size: 12px; line-height: 16px; color: var(--muted); }
.strong { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.num { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.u-center { text-align: center; }
@media (max-width: 960px) { .u-desktop { display: none !important; } }
.u-mt { margin-top: 16px; }
.u-mb { margin-bottom: 16px; }

.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.row--nowrap { flex-wrap: nowrap; }
.row--between { justify-content: space-between; }
.row--top { align-items: flex-start; }
.u-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.stack--tight { gap: 2px; }
.stack--sm { gap: 8px; }
/* Una píldora apilada conserva su tamaño: una columna flexible la estiraba a todo el ancho. */
.stack > .pill { align-self: flex-start; }

.two { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.two > * { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.two__main { flex: 2 1 520px; }
.two__side { flex: 1 1 320px; }
/* Proporciones de cada mesa: H2 (3 1 640 / 1 1 300), H5 (3 1 600 / 1 1 300), H6 (3 1 560 / 1 1 320) */
.two--640 > .two__main { flex: 3 1 640px; }
.two--640 > .two__side { flex: 1 1 300px; }
.two--600 > .two__main { flex: 3 1 600px; }
.two--600 > .two__side { flex: 1 1 300px; }
.two--560 > .two__main { flex: 3 1 560px; }
/* T1 y T2: 3 1 600–620 / 2 1 340 */
.two--620 > .two__main { flex: 3 1 620px; }
.two--620 > .two__side { flex: 2 1 340px; }
/* Una columna lateral sin nada dentro no ocupa sitio: la principal se queda
   con todo el ancho. */
.two > .two__side:not(:has(> *)), .two > .two__main:not(:has(> *)) { display: none; }
/* La columna lateral es para contenido (resumen, cifras, «Hoy en la sede»).
   Los formularios de crear y editar no van aquí: se abren en una ventana
   (x-modal, al final de esta hoja). */

/* Rejilla auto-fit del estudio; el mínimo de cada columna va por modificador
   (sin estilos en línea). */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid--90 { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 12px; }
.grid--120 { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.grid--160 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.grid--190 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grid--200 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid--220 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid--240 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--260 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--320 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--gap-12 { gap: 12px; }
.grid-2 { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.grid-2 > :first-child { flex: 2 1 520px; min-width: 0; }
.grid-2 > :last-child { flex: 1 1 320px; min-width: 0; }
.span-2 { grid-column: 1 / -1; }

/* -----------------------------------------------------------------------------
   Armazón: barra lateral tinta + columna principal
   ----------------------------------------------------------------------------- */
.app { display: flex; min-height: 100vh; background: var(--ground); }
.app__main { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; }

.sidebar {
    flex: 0 0 var(--sidebar-w); width: var(--sidebar-w);
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    background: var(--ink); padding: 22px 14px;
    display: flex; flex-direction: column; gap: 18px;
    scrollbar-width: thin; scrollbar-color: var(--ink-line) transparent;
}
.sidebar__brand { display: block; padding: 4px 8px; }
.sidebar__brand img { display: block; height: 30px; width: auto; }

.center-pick { position: relative; }
.center-pick > summary { list-style: none; }
.center-pick > summary::-webkit-details-marker { display: none; }
.center-card {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px 12px; min-height: 52px;
    border: 1px solid var(--ink-line); border-radius: var(--r-box);
    background: var(--ink-2); color: var(--white); text-align: left;
}
summary.center-card { cursor: pointer; }
.center-card > svg:first-child { color: var(--lime); }
.center-card__text { flex: 1; min-width: 0; }
.center-card__name { display: block; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--white); overflow-wrap: anywhere; }
.center-card__sub { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--soft-text); margin-top: 2px; }
.center-card__chevron { color: var(--soft-text); }
.center-pick[open] .center-card__chevron { transform: rotate(180deg); }
.center-menu {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
    background: var(--ink-2); border: 1px solid var(--ink-line); border-radius: var(--r-box);
    padding: 6px; display: grid; gap: 2px; box-shadow: 0 12px 32px rgb(0 0 0 / 35%);
}
.center-menu form { margin: 0; }
.center-menu button {
    width: 100%; display: flex; align-items: center; gap: 10px; min-height: 40px;
    padding: 8px 10px; border: 0; border-radius: 8px; background: transparent;
    color: var(--side-text); font-size: 14px; font-weight: 500; text-align: left; cursor: pointer;
}
.center-menu button:hover { background: var(--ink); color: var(--white); }
.center-menu button[aria-current="true"] { color: var(--white); font-weight: 600; }
/* Colores de sede (SEDE_COL del estudio), por número de sede (CenterColors) */
.sede--1 { --sede-bg: #6548eb; --sede-fg: #ffffff; --sede-border: #6548eb; }
.sede--2 { --sede-bg: #d6f57a; --sede-fg: #20242b; --sede-border: #20242b; }
.sede--3 { --sede-bg: #c9bdff; --sede-fg: #20242b; --sede-border: #20242b; }
.sede--4 { --sede-bg: #20242b; --sede-fg: #d6f57a; --sede-border: #20242b; }
.sede--5 { --sede-bg: #ffffff; --sede-fg: #20242b; --sede-border: #20242b; }
.sede--6 { --sede-bg: #e8e2ff; --sede-fg: #5134d9; --sede-border: #20242b; }
.center-dot, .sede-dot {
    width: 8px; height: 8px; border-radius: 3px; flex: none; display: inline-block;
    background: var(--sede-bg, var(--lime)); border: 1px solid var(--sede-border, var(--lime));
}
.sede-dot { width: 10px; height: 10px; }
.sede-badge {
    width: 40px; height: 40px; border-radius: var(--r-box); flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sede-bg, var(--violet)); color: var(--sede-fg, var(--white));
    font: 700 16px/1 var(--font-display);
}
.sede-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
    background: var(--white); color: var(--ink); font-size: 12px; font-weight: 600; white-space: nowrap;
}
.center-menu__check { margin-left: auto; color: var(--lime); }

.side-nav { display: flex; flex-direction: column; gap: 2px; }
/* Título de grupo en la barra lateral de /interno (Ventas, Clientes, Negocio…). */
.side-nav__group { margin: 14px 12px 4px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--soft-text); }
.side-nav__item {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px; min-height: 40px; border-radius: var(--r-ctrl);
    color: var(--side-text); font-size: 14px; font-weight: 500; text-decoration: none;
}
.side-nav__item:hover { color: var(--white); background: var(--ink-2); }
.side-nav__item.is-active { color: var(--white); background: var(--violet); font-weight: 600; }
.side-nav__item.is-active:hover { background: var(--violet); }
.side-nav__badge {
    margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px; background: var(--lime); color: var(--ink);
    font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.side-nav__badge--bad { background: var(--bad); color: var(--white); }
.side-nav__sub {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 12px 7px 26px; min-height: 36px; border-radius: 8px;
    color: var(--soft-text); font-size: 13px; font-weight: 500; text-decoration: none;
}
.side-nav__sub::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: transparent; flex: none; }
.side-nav__sub:hover { color: var(--white); }
.side-nav__sub.is-active { color: var(--white); font-weight: 600; }
.side-nav__sub.is-active::before { background: var(--lime); }
/* Candado de lo que la sede no tiene contratado (Asistente IA). */
.side-nav__lock { margin-left: auto; flex: none; color: var(--soft-text); }
.side-nav__item.is-active .side-nav__lock { color: var(--white); }

.sidebar__foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.assistant-card { padding: 14px; border-radius: var(--r-box); background: var(--ink-2); display: flex; flex-direction: column; gap: 8px; }
.assistant-card__head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--white); }
.assistant-card__head > svg { color: var(--lime); }
.assistant-card__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--lime); margin-left: auto; }
.assistant-card__dot.is-off { background: var(--soft-text); }
.assistant-card p { font-size: 12px; line-height: 17px; color: var(--soft-text); }
.assistant-card a { color: var(--lime); font-size: 13px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; min-height: 28px; }
.sidebar__cfg { border-top: 1px solid var(--ink-line); padding-top: 10px; }

/* Cabecera: buscador, Nuevo, ayuda, avisos y persona. «Volver», el nombre del
   centro y la lupa son del móvil (cabecera de la app del estudio). */
.topbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 28px 0; }
.topbar .topbar__back, .topbar .topbar__title, .topbar .topbar__search { display: none; }
.search { flex: 1 1 280px; max-width: 520px; position: relative; display: flex; align-items: center; margin: 0; }
.search > svg { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.search input {
    width: 100%; min-height: 44px; padding: 10px 64px 10px 40px;
    border: 1px solid var(--ctrl); border-radius: var(--r-box);
    background: var(--white); color: var(--ink); font-size: 14px;
}
.search input::placeholder { color: var(--muted); }
.search kbd {
    position: absolute; right: 10px; font: 12px/16px var(--font-ui); color: var(--muted);
    border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; background: var(--white);
}
.topbar__end { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.sq-btn {
    position: relative; width: 44px; height: 44px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: var(--r-box);
    background: var(--white); color: var(--ink); cursor: pointer; text-decoration: none;
}
.sq-btn:hover { color: var(--ink); border-color: var(--soft); }
.sq-btn__count {
    position: absolute; top: 6px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px; background: var(--violet); color: var(--white);
    font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu__panel {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
    min-width: 260px; max-width: min(360px, 90vw);
    background: var(--white); border: 1px solid var(--line); border-radius: var(--r-box);
    box-shadow: 0 16px 40px rgb(32 36 43 / 14%); padding: 6px; display: grid; gap: 2px;
}
.menu__panel a, .menu__panel button {
    display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 10px;
    border: 0; border-radius: 8px; background: transparent; width: 100%; text-align: left;
    color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer;
}
.menu__panel a:hover, .menu__panel button:hover { background: var(--tint); color: var(--vink); }
.menu__panel a > svg, .menu__panel button > svg { color: var(--vink); }
.menu__panel--wide { min-width: 340px; }
.menu__panel .bubble { width: 36px; height: 36px; }
.menu__panel a.menu__alert { align-items: flex-start; }
.menu[open] > summary.sq-btn, .menu[open] > summary.who .avatar { box-shadow: 0 0 0 3px var(--lavender); }
.menu__title { padding: 8px 10px 4px; font-size: 12px; font-weight: 600; color: var(--muted); overflow-wrap: anywhere; }
.menu__item-text { display: flex; flex-direction: column; min-width: 0; }
.menu__item-text small { font-size: 12px; line-height: 16px; color: var(--muted); font-weight: 400; }
.menu__empty { padding: 10px; font-size: 13px; color: var(--muted); }

.who { display: flex; align-items: center; gap: 10px; min-width: 0; cursor: pointer; }
.who__text { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.who__name { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.who__role { font-size: 12px; line-height: 16px; color: var(--muted); }

/* El contenido usa todo el ancho que deja la barra lateral (sin tope: en
   pantallas grandes, más columnas y tablas más holgadas). */
.main { padding: 24px 28px 32px; display: flex; flex-direction: column; gap: 24px; width: 100%; min-width: 0; }
.main > .alert { margin: 0; }
.main > .more { max-width: 640px; }

/* -----------------------------------------------------------------------------
   Cabeceras de página y de bloque
   ----------------------------------------------------------------------------- */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.page-head > div:first-child { min-width: 0; }
.page-head h1 { font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.01em; }
.page-head p { margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--muted); }
.page-head__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.page-head__title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Contestar una incidencia: con «Nota interna» el cuadro se pone en ámbar y cambian los botones (revisión UX 11, G30). */
.reply-form .when-note { display: none; }
.reply-form:has(input[name="mode"][value="nota"]:checked) .when-note { display: inline-flex; }
.reply-form:has(input[name="mode"][value="nota"]:checked) .when-reply { display: none; }
.reply-form:has(input[name="mode"][value="nota"]:checked) .textarea { background: var(--warn-bg); border-color: var(--warn-line); }

.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.section-head > div:first-child { min-width: 0; }
.section-head p { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--muted); }
.section-head__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.link-arrow {
    display: inline-flex; align-items: center; gap: 6px; min-height: 32px;
    color: var(--vink); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.link-arrow:hover { color: var(--vink-hover); }

/* -----------------------------------------------------------------------------
   Cabecera violeta (inicio) y cifras en tarjetas tinta
   ----------------------------------------------------------------------------- */
.hero {
    position: relative; overflow: hidden; isolation: isolate;
    background: var(--violet); border-radius: var(--r-hero); padding: 28px;
    display: flex; flex-direction: column; gap: 24px; color: var(--white);
}
.hero::before {
    content: ""; position: absolute; top: 0; right: 0; z-index: -1;
    width: 520px; max-width: 60%; height: 100%;
    background: var(--vink); clip-path: polygon(58% 0, 100% 0, 100% 100%, 22% 100%);
}
.hero::after {
    content: ""; position: absolute; top: 0; right: 0; z-index: -1;
    width: 280px; max-width: 40%; height: 150px;
    background: var(--lime); clip-path: polygon(52% 0, 100% 0, 100% 100%);
}
.hero__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.hero__text { min-width: 0; max-width: 680px; }
.hero__kicker { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--white); }
.hero h1 { font-size: 34px; line-height: 42px; font-weight: 700; letter-spacing: -0.01em; color: var(--white); }
.hero__summary { margin-top: 10px; font-size: 17px; line-height: 26px; color: var(--white); }
.hero__controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hero__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
/* Seis fichas que no caben en una fila: tres y tres, no cinco y una suelta. */
@media (min-width: 961px) and (max-width: 1679px) {
    .hero__tiles:has(> .kpi:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.hero-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; min-height: 44px;
    border: 0; border-radius: var(--r-ctrl); background: var(--white); color: var(--ink);
    font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.hero-btn:hover { color: var(--ink); background: var(--tint); }
.hero-btn--dark { background: var(--ink); color: var(--white); }
.hero-btn--dark:hover { background: var(--ink-2); color: var(--white); }

.kpi {
    background: var(--ink); border-radius: var(--r-card); padding: 18px;
    display: flex; flex-direction: column; gap: 6px; min-width: 0; color: var(--white);
}
.kpi__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.kpi__label { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--side-text); }
.kpi__icon {
    width: 34px; height: 34px; border-radius: var(--r-ctrl); flex: none;
    background: var(--ink-2); color: var(--lime);
    display: inline-flex; align-items: center; justify-content: center;
}
.kpi__value { font: 600 28px/34px var(--font-display); letter-spacing: -0.01em; color: var(--white); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi__delta { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--on-ink-neutral); }
.kpi__delta--ok { color: var(--on-ink-ok); }
.kpi__delta--bad { color: var(--on-ink-bad); }
.kpi__delta--warn { color: var(--on-ink-warn); }
.kpi__foot { font-size: 12px; line-height: 16px; color: var(--soft-text); }

/* La «cifra» de siempre (x-stat): misma tarjeta tinta */
.stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.stat { background: var(--ink); border-radius: var(--r-card); padding: 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stat__label { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--side-text); }
.stat__value { font: 600 28px/34px var(--font-display); letter-spacing: -0.01em; color: var(--white); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat__hint { font-size: 12px; line-height: 16px; color: var(--soft-text); }

/* -----------------------------------------------------------------------------
   Tarjetas
   ----------------------------------------------------------------------------- */
.card {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card);
    padding: 20px; display: flex; flex-direction: column; gap: 16px; min-width: 0;
}
.card--pad-sm { padding: 16px; gap: 10px; }
.card--pad-md { padding: 18px; gap: 10px; }
.card--flush { padding: 0; gap: 0; overflow: hidden; }
.card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.card__head > div:first-child { min-width: 0; }
.card__head p { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--muted); }
/* Titular con su píldora de estado pegada (slot «status» de x-card y x-section-head). */
.title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card__foot { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.card--dark { background: var(--ink); border-color: var(--ink); color: var(--white); padding: 22px; }
.card--dark h2, .card--dark h3 { color: var(--white); }
.card--dark .card__head p, .card--dark .muted { color: var(--soft-text); }
/* Un enlace con flecha sobre tinta va en lima: en violeta no se lee. */
.card--dark .link-arrow { color: var(--lime); }
.card--dark .link-arrow:hover { color: var(--white); }

.lime-card {
    background: var(--lime); border-radius: var(--r-card); padding: 22px;
    display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.lime-card__top { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; color: var(--ink); }
.lime-card__icon {
    width: 44px; height: 44px; border-radius: 14px; flex: none;
    background: var(--ink); color: var(--lime);
    display: inline-flex; align-items: center; justify-content: center;
}
.lime-card h2 { font-size: 21px; line-height: 28px; font-weight: 700; }
.lime-card p { font-size: 14px; line-height: 21px; color: #334155; }
.lime-card .btn { align-self: flex-start; }

/* «Requiere tu atención»: tarjetas teñidas por tono */
.attention { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(var(--min, 240px), 1fr)); }
.attention__item {
    background: var(--neutral-bg); border: 1px solid var(--line); border-radius: var(--r-card);
    padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.attention__item--warn { background: var(--warn-bg); border-color: var(--warn-line); }
.attention__item--bad { background: var(--bad-bg); border-color: var(--bad-line); }
.attention__item--info { background: var(--info-bg); border-color: var(--info-line); }
.attention__item--violet { background: var(--tint); border-color: var(--violet-line); }
.attention__item--ok { background: var(--ok-bg); border-color: var(--ok-line); }
.attention__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.attention__icon {
    width: 40px; height: 40px; border-radius: var(--r-box); flex: none;
    background: var(--white); color: var(--neutral);
    display: inline-flex; align-items: center; justify-content: center;
}
.attention__item--warn .attention__icon { color: var(--warn); }
.attention__item--bad .attention__icon { color: var(--bad); }
.attention__item--info .attention__icon { color: var(--info); }
.attention__item--violet .attention__icon { color: var(--vink); }
.attention__item--ok .attention__icon { color: var(--ok); }
.attention__item h3 { font-size: 15px; line-height: 21px; font-weight: 700; }
.attention__item p { font-size: 13px; line-height: 19px; color: var(--body-2); }
.attention__item .link-arrow { margin-top: auto; align-self: flex-start; }
/* En la lista apilada, toda la tarjeta es el enlace: en el móvil un enlace de 32 px es lo único que se podía pulsar. */
.attention--stack .attention__item { position: relative; }
.attention--stack .attention__item .link-arrow::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); }

/* -----------------------------------------------------------------------------
   Botones
   ----------------------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 16px; min-height: 44px; border-radius: var(--r-ctrl);
    border: 1px solid transparent; font: 600 14px/20px var(--font-ui);
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
.btn--primary { background: var(--violet); border-color: var(--violet); color: var(--white); }
.btn--primary:hover { background: var(--vink); border-color: var(--vink); color: var(--white); }
.btn--secondary { background: var(--white); border-color: var(--violet); color: var(--vink); }
.btn--secondary:hover { background: var(--tint); color: var(--vink-hover); }
.btn--lime { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.btn--lime:hover { background: #c8ea5f; color: var(--ink); }
.btn--dark { background: var(--ink); border-color: var(--ink); color: var(--white); }
.btn--dark:hover { background: var(--ink-2); color: var(--white); }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { background: var(--white); border-color: var(--soft); color: var(--ink); }
.btn--danger { background: var(--white); border-color: var(--bad); color: var(--bad); }
.btn--danger:hover { background: var(--bad-bg); color: var(--bad); }
.btn--sm { padding: 7px 12px; min-height: 36px; font-size: 13px; }
.btn--lg { padding: 12px 20px; min-height: 48px; font-size: 15px; }
.btn--block { width: 100%; }
.btn--wrap { white-space: normal; text-align: left; justify-content: flex-start; }
.btn[disabled], .btn.is-loading { opacity: .6; pointer-events: none; }

/* -----------------------------------------------------------------------------
   Píldoras de estado, insignias, avatares y burbujas
   ----------------------------------------------------------------------------- */
.pill, .badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
    border-radius: 999px; font-size: 12px; line-height: 18px; font-weight: 600; white-space: nowrap;
    background: var(--neutral-bg); color: var(--neutral);
}
.pill::before {
    content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: none;
}
.pill--plain::before { display: none; }
.pill--ok, .badge--ok { background: var(--ok-bg); color: var(--ok); }
.pill--info, .badge--info { background: var(--info-bg); color: var(--info); }
.pill--warn, .badge--warn { background: var(--warn-bg); color: var(--warn); }
.pill--bad, .badge--danger, .badge--bad { background: var(--bad-bg); color: var(--bad); }
.pill--violet, .badge--violet { background: var(--tint); color: var(--vink); }
.pill--lime, .badge--lime { background: var(--lime); color: var(--ink); }
.pill--ink, .badge--ink { background: var(--ink); color: var(--white); }

.extra-tag {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; min-height: 32px;
    border-radius: 999px; background: var(--lime); color: var(--ink); font-size: 13px; font-weight: 700;
}

.avatar {
    width: 36px; height: 36px; border-radius: 999px; flex: none;
    background: var(--tint); color: var(--vink);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
}
.avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.avatar--32 { width: 32px; height: 32px; font-size: 11px; }
.avatar--md { width: 40px; height: 40px; font-size: 13px; }
.avatar--44 { width: 44px; height: 44px; font-size: 14px; }
.avatar--lg { width: 56px; height: 56px; font-size: 18px; }
.avatar--xl { width: 64px; height: 64px; font-size: 21px; }
.avatar--ink { background: var(--ink); color: var(--lime); }
.avatar--photo { overflow: hidden; }
.avatar__img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }

.bubble {
    width: 40px; height: 40px; border-radius: var(--r-box); flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--tint); color: var(--vink);
}
.bubble--sm { width: 36px; height: 36px; }
.bubble--xs { width: 34px; height: 34px; }
.bubble--xs svg { width: 18px; height: 18px; }
.bubble--ok { background: var(--ok-bg); color: var(--ok); }
.bubble--warn { background: var(--warn-bg); color: var(--warn); }
.bubble--bad { background: var(--bad-bg); color: var(--bad); }
.bubble--info { background: var(--info-bg); color: var(--info); }
.bubble--lime { background: var(--lime); color: var(--ink); }
.bubble--ink { background: var(--ink); color: var(--white); }
.bubble--neutral { background: var(--neutral-bg); color: var(--neutral); }

/* Barra de 8 px del estudio (x-bar: SVG, sin estilos en línea) */
.bar { display: block; width: 100%; height: 8px; flex: 1 1 auto; min-width: 60px; overflow: visible; }
.bar__track { fill: var(--tint); }
.bar__fill { fill: var(--violet); }
.bar--warn .bar__fill { fill: var(--warn); }
.bar--ok .bar__fill { fill: var(--ok); }
.bar--bad .bar__fill { fill: var(--bad); }
.bar--lime .bar__fill { fill: var(--lime); }
.bar--done .bar__fill { fill: #8e95a5; }
.on-ink .bar__track { fill: var(--ink-2); }
.on-ink .bar__fill { fill: var(--lime); }
progress.progress {
    -webkit-appearance: none; appearance: none; display: block;
    width: 100%; height: 8px; border: 0; border-radius: 999px; background: var(--tint); overflow: hidden;
}
progress.progress::-webkit-progress-bar { background: var(--tint); border-radius: 999px; }
progress.progress::-webkit-progress-value { background: var(--violet); border-radius: 999px; }
progress.progress::-moz-progress-bar { background: var(--violet); border-radius: 999px; }

/* -----------------------------------------------------------------------------
   Controles: segmentado, pestañas, interruptor
   ----------------------------------------------------------------------------- */
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-ctrl); }
.seg > a, .seg > button {
    display: inline-flex; align-items: center; padding: 6px 12px; min-height: 34px;
    border: 0; border-radius: 8px; background: transparent; color: var(--ink);
    font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.seg > [aria-pressed="true"], .seg > [aria-current="page"], .seg > [aria-current="true"] { background: var(--violet); color: var(--white); }
.seg__count { display: inline-block; min-width: 20px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--neutral-bg); color: var(--ink); font-size: 12px; line-height: 18px; text-align: center; }
.seg > [aria-current] .seg__count { background: var(--white); color: var(--vink); }
/* Cabecera de tabla que ordena. */
.th-sort { color: inherit; text-decoration: none; white-space: nowrap; }
.th-sort:hover, .th-sort[aria-current] { color: var(--vink); }
.seg--dark { background: var(--ink); border-color: var(--ink); }
.seg--dark > a, .seg--dark > button { color: var(--white); padding: 6px 14px; }
.seg--dark > [aria-pressed="true"], .seg--dark > [aria-current="page"], .seg--dark > [aria-current="true"] { background: var(--lime); color: var(--ink); }

.tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tabs > a {
    padding: 10px 2px; margin-right: 20px; border-bottom: 2px solid transparent; margin-bottom: -1px;
    color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.tabs > a:hover { color: var(--ink); }
.tabs > a[aria-current="page"], .tabs > a[aria-current="true"] { color: var(--vink); border-bottom-color: var(--violet); }
.tabs__count { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.tabs > a[aria-current] .tabs__count { color: var(--vink); }

/* El submenú de sección de antes, ahora como pestañas */
.chips { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); gap: 0; }
.chips a { padding: 10px 2px; margin-right: 20px; margin-bottom: -1px; border-bottom: 2px solid transparent; text-decoration: none; }
.chips a .badge { background: none; padding: 0; color: var(--muted); font-size: 14px; line-height: 20px; }
.chips a[aria-current="true"] { border-bottom-color: var(--violet); }
.chips a[aria-current="true"] .badge { color: var(--vink); }

.switch { position: relative; width: 42px; height: 24px; flex: none; display: inline-block; }
.switch input { position: absolute; inset: 0; width: 42px; height: 24px; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.switch__track { position: absolute; inset: 0; background: #c9ceda; border-radius: 999px; transition: background-color .15s; }
.switch__knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: var(--white); border-radius: 999px; box-shadow: 0 1px 2px rgb(32 36 43 / 25%); transition: left .15s; }
.switch input:checked ~ .switch__track { background: var(--violet); }
.switch input:checked ~ .switch__knob { left: 20px; }
.switch input:focus-visible ~ .switch__track { outline: var(--focus-ring); outline-offset: 2px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; cursor: pointer; }
.toggle-row__text { min-width: 0; }
.toggle-row__label { display: block; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); }
.toggle-row__hint { display: block; font-size: 12px; line-height: 16px; color: var(--muted); }

/* -----------------------------------------------------------------------------
   Formularios
   ----------------------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.form--page { gap: 24px; }
/* Botones al final de un formulario largo (los mismos que en la cabecera) */
.form-foot { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; align-items: center; }
.form__grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form__section { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.form__section legend { padding: 0; margin-bottom: 4px; font: 600 15px/21px var(--font-display); color: var(--ink); }
.form__row { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form__label { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); }
.form__label .req { color: var(--bad); }
.form__help { font-size: 12px; line-height: 16px; color: var(--muted); }
.form__err { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--bad); }

.input, .select, .textarea {
    width: 100%; min-height: 44px; padding: 10px 12px;
    border: 1px solid var(--ctrl); border-radius: var(--r-ctrl);
    background: var(--white); color: var(--ink); font-size: 14px; line-height: 20px;
}
.select {
    -webkit-appearance: none; appearance: none; padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235B6475' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 10px center; background-size: 18px 18px; background-repeat: no-repeat;
}
select.select[multiple] { background-image: none; padding-right: 12px; }
/* Desactivado: que no parezca que se puede escribir (revisión UX 11, PT10). */
.input:disabled, .select:disabled, .textarea:disabled { background-color: var(--neutral-bg); color: var(--muted); border-color: var(--line); cursor: not-allowed; }
/* Campo de fichero: el botón del navegador, vestido como un botón secundario (PT9). */
.input[type="file"] { padding: 6px 8px; min-height: 44px; color: var(--muted); }
.input[type="file"]::file-selector-button { margin-right: 12px; padding: 6px 14px; border: 1px solid var(--violet); border-radius: var(--r-ctrl); background: var(--white); color: var(--vink); font: inherit; font-weight: 600; cursor: pointer; }
.input[type="file"]::file-selector-button:hover { background: var(--tint); }
.textarea { min-height: 96px; resize: vertical; }
.textarea--short { min-height: 64px; }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 2px solid var(--violet); outline-offset: 0; border-color: var(--violet); }
.form__row--has-error .input, .form__row--has-error .select, .form__row--has-error .textarea { border-color: var(--bad); }
.input--code { font: 600 22px/1 var(--font-display); letter-spacing: .3em; text-align: center; }

.check { display: flex; gap: 10px; align-items: center; min-height: 44px; font-size: 14px; cursor: pointer; }
.checks { display: grid; gap: 0 18px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--violet); flex: none; }

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.toolbar--bottom { align-items: flex-end; }
/* Acciones en grupo, bajo una tabla con casillas */
.toolbar--foot { margin: 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--body-2); }
.toolbar--foot .form__err { margin: 0; flex: 1 1 100%; }
.col-check { width: 36px; }
.col-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--violet); display: block; }
/* Buscador dentro de una página (lupa a la izquierda, sin Ctrl K) */
.search--local { flex: 1 1 260px; max-width: 420px; }
/* Dentro de una columna (una tarjeta, la lista de la bandeja) esos 260 px serían de alto. */
.card > .search--local, .stack > .search--local, .inbox__list > .search--local { flex: 0 0 auto; }
.search--local input { padding-right: 12px; border-color: var(--ctrl); border-radius: var(--r-ctrl); }
/* El de la página Buscar solo hace falta en el móvil (en el escritorio está en la cabecera) */
.search--mobile { display: none; }
@media (max-width: 960px) {
    .search--mobile { display: flex; flex: none; max-width: none; }
    .search--mobile input { min-height: 48px; border-radius: 14px; }
}

/* Persona en una tabla: avatar de 32, nombre y línea gris */
.person { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-width: 0; }
.person__text { display: flex; flex-direction: column; min-width: 0; }
.person__text strong { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.person__text span { font-size: 12px; line-height: 16px; color: var(--muted); }
a.person:hover strong { color: var(--vink); }
.toolbar .input { max-width: 340px; }
.toolbar .select { width: auto; min-width: 180px; max-width: 260px; }
.row-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }
.row-form .select, .row-form .input { width: auto; min-width: 140px; flex: 1 1 140px; }

details > summary { cursor: pointer; }
/* Lista de casillas con buscador (elegir clientes de una novedad). */
.pick-list { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-ctrl); background: var(--white); }
/* Lo plegado al pie de una lista (las facturas anuladas…). */
.fold { margin-top: 12px; }
.fold > .list { margin-top: 8px; }
.summary-link, .membership__actions summary, .receipt-actions summary, .booking-cancel summary, .log summary, .fold > summary {
    cursor: pointer; color: var(--vink); font-size: 13px; font-weight: 600; min-height: 36px; display: inline-flex; align-items: center;
}
.receipt-actions summary, .booking-cancel summary { color: var(--bad); }

/* -----------------------------------------------------------------------------
   Tablas (cabecera violeta clara, como la v2)
   ----------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--white); -webkit-overflow-scrolling: touch; }
.card > .table-wrap { margin: 0; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.table th {
    text-align: left; padding: 11px 14px; font-size: 12px; font-weight: 700; color: var(--vink);
    background: var(--tint); white-space: nowrap;
}
.table td, .table tbody th {
    padding: 12px 14px; border-top: 1px solid var(--line); vertical-align: middle;
    color: var(--ink); background: var(--white); font-weight: 400; text-align: left; overflow-wrap: break-word;
}
/* La celda de cabecera de fila (la primera columna) es un dato, no una cabecera: mismo cuerpo que el resto. */
.table tbody th { font-weight: 400; font-size: 14px; }
.table tbody th:not(.nowrap) { white-space: normal; }
.table td strong, .table th strong { font-weight: 600; }
.table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.table a { font-weight: 600; text-decoration: none; }
.table .num, .table td.num { text-align: right; }
.table tr.is-warn td, .table tr.is-warn th { background: var(--warn-bg); }
.table tr.is-warn .pill--warn { background: var(--white); }
/* Fila que lleva a su ficha o a su editor (data-href, app.js): se pulsa entera */
.table tr[data-href] { cursor: pointer; }
@media (hover: hover) { .table tr[data-href]:hover > td, .table tr[data-href]:hover > th { background: var(--row-alt); } }
.table tr.is-total td, .table tr.is-total th { background: var(--row-alt); font-weight: 700; border-top-width: 2px; }

/* -----------------------------------------------------------------------------
   Listas, vacíos, paginación y descripciones
   ----------------------------------------------------------------------------- */
.list { list-style: none; margin: 0; padding: 0; }
.list > li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.list > li:first-child { border-top: 0; padding-top: 0; }
.list > li:last-child { padding-bottom: 0; }
.list__main { flex: 1; min-width: 0; }
/* El detalle va debajo del título, no pegado a él («…y pruebasLas horas antes…»). */
.list__main > strong + .small, .list__main > .small + .small { display: block; }
/* Una fila que es un enlace: se subraya el título al pasar, no la frase entera. */
a.list__main { text-decoration: none; color: inherit; }
a.list__main > strong { color: var(--vink); }
a.list__main:hover > strong { text-decoration: underline; }
.list__link { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; margin: -8px; padding: 8px; border-radius: var(--r-ctrl); color: inherit; text-decoration: none; }
.list__link:hover { background: var(--tint); }
.list__link:hover strong { color: var(--vink); }

.empty { text-align: center; padding: 32px 20px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.empty h3 { color: var(--ink); font-size: 15px; }
.empty .bubble { margin-bottom: 4px; }

/* Pie de lista (vendor/pagination/hyrapp): recuento a la izquierda y ‹ 1 2 3 › a la derecha,
   separado de la tabla por una raya. En una tarjeta sin margen trae el suyo. */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.card--flush .pager { margin-top: 0; padding: 12px 16px; }
.card__foot > .pager { flex: 1 1 100%; }
.pager__count { margin: 0; font-size: 13px; line-height: 18px; color: var(--muted); }
.pager__nav { display: flex; align-items: center; gap: 6px; }
.pager__btn, .pager__page {
    min-width: 40px; height: 40px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: var(--r-ctrl); background: var(--white);
    color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none;
}
a.pager__btn:hover, a.pager__page:hover { border-color: var(--soft); color: var(--vink); background: var(--tint); }
.pager__page.is-current { background: var(--violet); border-color: var(--violet); color: var(--white); }
.pager__btn.is-disabled { color: var(--soft-text); background: transparent; }
.pager__gap { min-width: 16px; text-align: center; color: var(--muted); }
.pager__where { display: none; font-size: 14px; color: var(--muted); }
@media (max-width: 640px) {
    .pager__count { flex: 1 1 100%; }
    .pager__nav { flex: 1 1 100%; justify-content: space-between; }
    .pager__page, .pager__gap { display: none; }
    .pager__where { display: inline; }
    .pager__btn { min-width: 44px; height: 44px; }
}

.dl { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 8px 20px; margin: 0; }
.dl dt { color: var(--muted); font-size: 13px; }
.dl dd { margin: 0; overflow-wrap: anywhere; min-width: 0; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.steps li { display: flex; gap: 12px; align-items: flex-start; }
.steps .dot { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line); color: var(--muted); font: 700 12px/1 var(--font-display); }
.steps .is-done .dot { background: var(--lime); border-color: var(--lime); color: var(--ink); }
/* «Vas por aquí» y «aquí hay un problema»: un paso no es solo hecho o por hacer. */
.steps .is-current .dot { border-color: var(--violet); color: var(--vink); }
.steps .is-warn .dot { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.steps .is-warn strong { color: var(--warn); }
.steps li > div { min-width: 0; flex: 1; }
.steps .steps__more { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px; }
.steps .steps__more > form { display: contents; }
.steps strong { display: block; }
.steps span { font-size: 13px; color: var(--muted); }
.steps-text { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: var(--body-2); font-size: 14px; }

/* -----------------------------------------------------------------------------
   Inicio (H1): clases de hoy y actividad reciente
   ----------------------------------------------------------------------------- */
.day-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.day-list > li { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--r-box); background: var(--white); }
.day-list > li.is-live { background: var(--tint); }
.day-list__time { width: 52px; flex: none; font: 600 16px/22px var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.day-list__main { flex: 1 1 150px; min-width: 0; }
.day-list__main strong { display: block; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.day-list__main span { display: block; font-size: 12px; line-height: 20px; color: var(--muted); }
.day-list__fill { display: flex; align-items: center; gap: 10px; flex: 1 1 130px; min-width: 120px; }
.day-list__count { width: 44px; flex: none; text-align: right; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.day-list__state { flex: 0 0 auto; min-width: 0; }

.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.feed > li { display: flex; align-items: flex-start; gap: 12px; }
.feed__icon { width: 34px; height: 34px; border-radius: var(--r-box); flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--neutral-bg); color: var(--neutral); }
.feed__main { flex: 1; min-width: 0; }
.feed__main strong { display: block; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.feed__main span { display: block; font-size: 12px; line-height: 20px; color: var(--muted); overflow-wrap: anywhere; }
.feed__time { flex: none; font-size: 12px; line-height: 16px; color: var(--muted); }
/* Un registro largo, agrupado por día: el día encima y solo la hora en cada suceso (revisión UX 12, M27). */
.table__day th { padding-top: 16px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); background: transparent; }
.feed > li.feed__day { display: block; margin-top: 4px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); }
.feed > li.feed__day:first-child { margin-top: 0; }

/* -----------------------------------------------------------------------------
   Horario (H2): colores por tipo de clase, rejilla semanal y panel lateral
   ----------------------------------------------------------------------------- */
.type--1 { --type-bg: #efebff; --type-fg: #5134d9; }
.type--2 { --type-bg: #f3f0ff; --type-fg: #5134d9; }
.type--3 { --type-bg: #e9ecf2; --type-fg: #20242b; }
.type--4 { --type-bg: #e6eefc; --type-fg: #1d5fd1; }
.type--5 { --type-bg: #f2f3f5; --type-fg: #5b6475; }
.type--6 { --type-bg: #f4ffd6; --type-fg: #20242b; }
.type--7 { --type-bg: #fff1e2; --type-fg: #a84f00; }
.type--8 { --type-bg: #e5f6ec; --type-fg: #127a3e; }

/* Espacios y zonas (T1): baldosas de zona */
.zones { display: flex; gap: 10px; flex-wrap: wrap; }
.zone {
    flex: 1 1 180px; display: flex; flex-direction: column; gap: 8px; padding: 16px; min-height: 150px;
    border-radius: 14px; background: var(--tint); border: 1px solid var(--tint); color: var(--ink); text-decoration: none;
}
.zone:hover { border-color: var(--violet); color: var(--ink); }
.zone.is-selected { border: 2px solid var(--violet); padding: 15px; }
.zone__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 15px; }
.zone__cap { font: 700 28px/34px var(--font-display); letter-spacing: -0.01em; }
.zone__note { margin-top: auto; font-size: 12px; line-height: 17px; color: var(--body-2); }
.rules { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 20px; }
.strong--16 { font-size: 16px; }

/* Chip de formato (fchip del estudio, sin punto) */
.fchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; line-height: 18px; font-weight: 700; white-space: nowrap; background: var(--neutral-bg); color: var(--neutral); }
.fchip--grupal { background: #efebff; color: var(--vink); }
.fchip--reducido { background: var(--lime-tint); color: var(--lime-ink); }
.fchip--personal { background: #e9ecf2; color: var(--ink); }

.type-link { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; text-decoration: none; }
.type-link.is-selected, .type-link:hover { color: var(--vink); }
.checks--column { grid-template-columns: 1fr; }

.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.legend > li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); }
.legend__swatch { width: 12px; height: 12px; border-radius: 4px; background: var(--type-bg); border: 1px solid var(--type-fg); flex: none; }

.week-grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Siete días sin desplazarse desde 1280 px de pantalla */
.week-grid { display: grid; grid-template-columns: repeat(7, minmax(118px, 1fr)); gap: 10px; min-width: 886px; }
.week-grid__day { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.week-grid__head { display: flex; justify-content: space-between; align-items: center; gap: 6px; min-height: 22px; padding: 0 2px; font-size: 14px; font-weight: 600; }
.week-grid__day.is-today .week-grid__head > span:first-child { color: var(--vink); }
/* Cuántas clases tiene el día: solo el número, en una píldora */
.week-grid__count {
    flex: none; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--neutral-bg); color: var(--muted); font-size: 12px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums;
}
.week-grid__day.is-today .week-grid__count, .week-grid__count.is-on { background: var(--tint); color: var(--vink); }
.day-pick__item.is-selected .week-grid__count { background: var(--violet); color: var(--white); }
.week-grid__empty { padding: 12px 4px; font-size: 13px; color: var(--muted); }
/* Arrastrar una clase a otro día (semana tipo) */
.slot[draggable="true"] { cursor: grab; }
.slot[draggable="true"]:active { cursor: grabbing; }
.slot.is-dragging { opacity: .45; }
.week-grid__day.is-drop-target { background: var(--tint); border-radius: var(--r-ctrl); box-shadow: 0 0 0 2px var(--violet); }

.slot {
    display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: var(--r-ctrl);
    background: var(--type-bg, var(--tint)); border: 1px solid var(--type-bg, var(--tint));
    color: var(--ink); text-decoration: none; min-width: 0;
}
.slot:hover { border-color: var(--type-fg, var(--violet)); color: var(--ink); }
.slot.is-selected { border: 2px solid var(--violet); padding: 9px; }
.slot__time { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--type-fg, var(--vink)); }
.slot__name { font-size: 13px; line-height: 17px; font-weight: 600; overflow-wrap: anywhere; }
.slot__meta { font-size: 12px; line-height: 16px; color: var(--muted); }
.slot-add {
    display: flex; align-items: center; justify-content: center; min-height: 40px;
    border: 1px dashed var(--ctrl); border-radius: var(--r-ctrl); background: transparent; color: var(--muted);
}
.slot-add:hover { color: var(--vink); border-color: var(--violet); background: var(--white); }

/* Restos del editor lateral que siguen en uso dentro de las ventanas: la
   nota de reglas y la fila de botones del formulario. */
.edit-panel__rules { line-height: 19px; font-size: 13px; }
.edit-panel__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.form--tight { gap: 14px; }
.sq-btn--plain { width: 40px; height: 40px; border-color: transparent; background: transparent; color: var(--muted); }
.sq-btn--plain:hover { background: var(--ground); color: var(--ink); border-color: transparent; }
.btn--text-danger { background: transparent; border-color: transparent; color: var(--bad); padding: 10px 12px; }
.btn--text-danger:hover { background: var(--bad-bg); color: var(--bad); }
/* La salida discreta de un paso opcional («No lo quiero por ahora»): un botón que se lee como texto. */
.btn--text { background: transparent; border-color: transparent; color: var(--muted); padding: 10px 12px; }
.btn--text:hover { background: var(--ground); color: var(--ink); }
.strong--15 { font-size: 15px; }

/* -----------------------------------------------------------------------------
   Cobros (H5): línea de tiempo de la remesa y reglas
   ----------------------------------------------------------------------------- */
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px; }
.timeline > li { flex: 1 1 160px; display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.timeline__dot { width: 32px; height: 32px; border-radius: 999px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--neutral-bg); color: var(--neutral); }
.timeline__dot--ok { background: var(--ok-bg); color: var(--ok); }
.timeline__dot--bad { background: var(--bad-bg); color: var(--bad); }
.timeline__dot--warn { background: var(--warn-bg); color: var(--warn); }
.timeline__dot--info { background: var(--info-bg); color: var(--info); }
.timeline__text { display: flex; flex-direction: column; min-width: 0; }
.timeline__text strong { font-size: 14px; line-height: 20px; font-weight: 600; }
.timeline__text span { font-size: 12px; line-height: 16px; color: var(--muted); }

.rule-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rule-list > li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.rule-list > li > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.rule-list strong { font-size: 14px; line-height: 20px; font-weight: 500; }
.rule-list small { font-size: 12px; line-height: 16px; color: var(--muted); }

/* -----------------------------------------------------------------------------
   Programación (H3): columna de días y contenido
   ----------------------------------------------------------------------------- */
.three { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.three > * { min-width: 0; }
.three__days { flex: 1 1 200px; max-width: 240px; }
.three__main { flex: 3 1 520px; }
.three__side { flex: 1 1 300px; display: flex; flex-direction: column; gap: 20px; }
.day-pick { display: flex; flex-direction: column; gap: 8px; }
.day-pick__item {
    display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--r-box);
    border: 1px solid var(--line); background: var(--white); color: var(--ink); text-decoration: none;
}
.day-pick__item strong { font-size: 14px; }
.day-pick__item:hover { border-color: var(--soft); color: var(--ink); }
.day-pick__item.is-selected { background: var(--tint); border-color: var(--violet); }
.sq-btn.is-disabled { opacity: .4; pointer-events: none; }

/* -----------------------------------------------------------------------------
   Caja tonal (toned_box del estudio): nota con icono, texto y botón opcional
   ----------------------------------------------------------------------------- */
.toned { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: 14px; background: var(--neutral-bg); color: var(--ink); }
.toned__text { display: flex; align-items: flex-start; gap: 12px; flex: 1 1 300px; min-width: 0; }
.toned__text p { font-size: 14px; line-height: 20px; }
.toned--info { background: var(--info-bg); } .toned--info .toned__text > svg { color: var(--info); }
.toned--warn { background: var(--warn-bg); } .toned--warn .toned__text > svg { color: var(--warn); }
.toned--bad { background: var(--bad-bg); } .toned--bad .toned__text > svg { color: var(--bad); }
.toned--ok { background: var(--ok-bg); } .toned--ok .toned__text > svg { color: var(--ok); }
.toned--violet { background: var(--tint); } .toned--violet .toned__text > svg { color: var(--vink); }

/* Tarjeta plegable (<details class="card card--disclosure">) */
.card--disclosure > summary { list-style: none; cursor: pointer; }
.card--disclosure > summary::-webkit-details-marker { display: none; }
.card--disclosure .card__chevron { color: var(--muted); transition: transform .15s; }
.card--disclosure[open] .card__chevron { transform: rotate(180deg); }
.card--disclosure:not([open]) { gap: 0; }
.card--danger > summary h2 { color: var(--bad); }
.card--danger[open] { border-color: var(--bad-line); }

/* Tablero por etapas (H8) */
.board-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.board { display: flex; gap: 14px; align-items: flex-start; min-width: 1160px; }
.board__col { flex: 0 0 280px; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--r-card); background: var(--neutral-bg); }
.board__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--neutral); }
.board__col--violet { background: var(--tint); } .board__col--violet .board__head { color: var(--vink); }
.board__col--info { background: var(--info-bg); } .board__col--info .board__head { color: var(--info); }
.board__col--warn { background: var(--warn-bg); } .board__col--warn .board__head { color: var(--warn); }
.board__col--ok { background: var(--ok-bg); } .board__col--ok .board__head { color: var(--ok); }
.board__card { padding: 12px; gap: 8px; }
.board__name { font-size: 14px; line-height: 20px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.board__empty { font-size: 13px; color: var(--muted); padding: 4px 2px; }
.row--gap-10 { gap: 10px; }

/* -----------------------------------------------------------------------------
   Ficha del socio (H6)
   ----------------------------------------------------------------------------- */
.profile-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.profile-head__who { display: flex; align-items: center; gap: 16px; min-width: 0; }
.profile-head h1 { font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }

.btn--icon { padding: 10px; width: 44px; }
.btn--icon.btn--sm { padding: 7px; width: 36px; }

.mini-stats { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.mini-stats > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mini-stats span:first-child { font-size: 12px; line-height: 16px; color: var(--muted); }
.mini-stats strong { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
/* En columnas iguales: un dato largo se parte dentro de la suya y no se lleva una fila entera. */
.mini-stats--cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 24px; }
.mini-stats--ink span:first-child { color: var(--soft-text); }
.mini-stats--ink strong { color: var(--white); }
/* Una píldora junto a la cifra (un estado al lado del dato) conserva su color: no es la etiqueta de arriba. */
.mini-stats strong > .pill { line-height: 18px; color: var(--neutral); vertical-align: middle; }
.mini-stats strong > .pill--warn { color: var(--warn); }
.mini-stats strong > .pill--bad { color: var(--bad); }
.mini-stats strong > .pill--ok { color: var(--ok); }

.chart { display: flex; align-items: flex-end; gap: 8px; height: 96px; }
.chart__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.chart__bar { display: block; width: 100%; height: 72px; }
.chart__bar rect { fill: var(--lime); }
.chart__col span { font-size: 12px; line-height: 16px; color: var(--soft-text); }

.upcoming { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.upcoming > li { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.upcoming__main { min-width: 0; }
.upcoming__main strong { display: block; font-size: 14px; line-height: 20px; font-weight: 600; }
.upcoming__main strong a { color: var(--ink); text-decoration: none; }
.upcoming__main strong a:hover { color: var(--vink); }
.upcoming__main span { display: block; font-size: 12px; line-height: 20px; color: var(--muted); }

.doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.doc-list > li { display: flex; align-items: center; gap: 10px; }
.doc-list > li > span:nth-of-type(1) { flex: 1; font-size: 14px; min-width: 0; }

.dl--stack { display: flex; flex-direction: column; gap: 10px; }
.dl--stack > div { display: flex; flex-direction: column; gap: 2px; }
.dl--stack dt { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); }
.dl--stack dd { margin: 0; font-size: 14px; line-height: 20px; }

/* Desplegable con formulario dentro de una tarjeta */
.disclosure { border-top: 1px solid var(--line); padding-top: 4px; }
.disclosure > summary {
    list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
    color: var(--vink); font-size: 13px; font-weight: 600; cursor: pointer;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after {
    content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px); margin-left: 4px;
}
.disclosure[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.disclosure > .form { padding-top: 8px; }
.disclosure--danger > summary { color: var(--bad); }
.membership__actions .disclosure, .table .disclosure { border-top: 0; padding-top: 0; }
.table .disclosure > .form { min-width: 220px; }

.row--gap-6 { gap: 6px; }
.row--gap-8 { gap: 8px; }
.u-ok { color: var(--ok); }
.u-bad { color: var(--bad); }
.u-warn { color: var(--warn); }
.u-muted { color: var(--muted); }
.pre-line { white-space: pre-line; }
.u-lime { color: var(--lime); }
.u-vink { color: var(--vink); }

.list > li > .bubble { align-self: flex-start; }

/* -----------------------------------------------------------------------------
   Avisos
   ----------------------------------------------------------------------------- */
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-box); border: 1px solid var(--line); background: var(--white); font-size: 14px; }
.alert > svg { margin-top: 1px; }
.alert--ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.alert--warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.alert--danger { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); }
.alert--info { background: var(--tint); border-color: var(--violet-line); color: var(--ink); }
.alert > div { min-width: 0; }
.alert > div > p + p { margin-top: 6px; }

/* -----------------------------------------------------------------------------
   Piezas de pantallas concretas que ya existían
   ----------------------------------------------------------------------------- */
.tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tag { display: inline-flex; align-items: center; gap: 2px; }
.tag__remove { display: inline; margin: 0; }
.tag__x { border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; min-width: 32px; min-height: 32px; cursor: pointer; border-radius: 8px; }
.tag__x:hover { color: var(--bad); background: var(--bad-bg); }
.note__body { margin: 6px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.member-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

.permissions th[scope="row"] { font-weight: 500; text-align: left; min-width: 220px; }
.permissions__role, .permissions__cell { text-align: center; white-space: nowrap; }
.permissions__check { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 44px; min-height: 44px; cursor: pointer; }
.permissions__check input { width: 18px; height: 18px; accent-color: var(--violet); }
.permissions__dot { color: var(--vink); font-weight: 700; }

.import-preview td { font-size: 13px; white-space: nowrap; }
.import-preview tr.is-error td { background: var(--bad-bg); }
.import-preview tr.is-skip td { color: var(--muted); }
.import-preview .form__err { white-space: normal; min-width: 180px; }

.booking-cancel form { display: grid; gap: 8px; }
.receipt-actions { display: grid; gap: 6px; min-width: 220px; }
.memberships > li { align-items: flex-start; }
.membership__note { margin-top: 6px; font-size: 13px; color: var(--warn); }
.membership__actions { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-start; margin-top: 10px; }
/* Condiciones especiales de una contratación (precio pactado, descuentos…) */
.membership__conds { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.membership__conds li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.membership__conds form { margin: 0; }
button.summary-link { background: none; border: 0; padding: 0; font-family: inherit; }
/* Opción con explicación debajo (radio o casilla de dos líneas) */
.check--top { align-items: flex-start; padding: 8px 0; }
.check--top input { margin-top: 1px; }
.check__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.check input:disabled + .check__text { color: var(--muted); cursor: not-allowed; }
.form__section--tight { gap: 0; }

.attendance { flex-wrap: wrap; }
.attendance .list__main { flex: 1 1 160px; }
.attendance .list__main a { font-weight: 600; text-decoration: none; }
.attendance .u-row { margin-left: auto; }

.hours { display: grid; gap: 10px; }
.hours__row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.hours__day { font-weight: 600; }
.hours__row .form__err { grid-column: 1 / -1; margin: 0; }

.week { display: grid; gap: 12px; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.week__day { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px 12px 8px; min-width: 0; overflow-wrap: break-word; }
.week__day h2 { font-size: 15px; }
.week__date { margin: 2px 0 10px; color: var(--muted); font-size: 13px; }
.week__day.is-today { border-color: var(--violet); box-shadow: 0 0 0 3px rgb(101 72 235 / 14%); }
.week__slot { display: grid; gap: 2px; align-content: center; min-height: 44px; padding: 8px 0; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.week__slot strong { font-size: 13px; line-height: 1.3; }
.week__slot span { font-size: 12px; color: var(--muted); }
.week__slot:hover strong { color: var(--vink); }

.log { list-style: none; margin: 0; padding: 0; }
.log > li { padding: 14px 0; border-top: 1px solid var(--line); min-width: 0; }
.log > li:first-child { border-top: 0; padding-top: 0; }
.log__head { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 13px; }
.log__msg { margin: 8px 0 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; overflow-wrap: anywhere; }
.log details { margin-top: 8px; font-size: 13px; }
.log__trace { margin: 8px 0 0; padding: 12px; background: var(--ground); border-radius: 8px; font-size: 12px; line-height: 1.5; overflow-x: auto; white-space: pre; max-height: 420px; }

.secret { font: 600 18px/1.4 var(--font-display); letter-spacing: .12em; word-break: break-all; background: var(--ground); border: 1px dashed var(--ctrl); border-radius: var(--r-box); padding: 14px; text-align: center; user-select: all; }
.codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; list-style: none; padding: 0; margin: 0; }
.codes li { font: 600 15px/1 var(--font-display); letter-spacing: .08em; background: var(--ground); border-radius: 8px; padding: 10px; text-align: center; }

/* -----------------------------------------------------------------------------
   Acceso: entrar, doble factor, invitaciones
   ----------------------------------------------------------------------------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); background: var(--ground); }
.auth__aside {
    position: relative; overflow: hidden; isolation: isolate; background: var(--violet); color: var(--white);
    padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
}
.auth__aside::before { content: ""; position: absolute; inset: 0 0 0 auto; width: 70%; z-index: -1; background: var(--vink); clip-path: polygon(58% 0, 100% 0, 100% 100%, 22% 100%); }
.auth__aside::after { content: ""; position: absolute; top: 0; right: -1px; width: 45%; height: 200px; z-index: -1; background: var(--lime); clip-path: polygon(52% 0, 100% 0, 100% 100%); }
.auth__aside img { height: 30px; width: auto; align-self: flex-start; }   /* sin esto la columna lo estira y el logo sale centrado */
.auth__claim { font: 700 34px/42px var(--font-display); letter-spacing: -0.01em; max-width: 420px; }
.auth__claim-sub { margin-top: 10px; font-size: 17px; line-height: 26px; max-width: 420px; }
.auth__main { display: grid; place-items: center; padding: 32px 20px; }
.auth__card { width: 100%; max-width: 440px; }
.auth__brand { display: none; justify-content: center; margin-bottom: 20px; }
.auth__card .card { padding: 28px; gap: 16px; }
.auth__card h1 { font-size: 24px; line-height: 32px; }
.auth__links { text-align: center; font-size: 14px; }
.auth__legal { margin-top: 24px; display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; }
.error-page { min-height: 100vh; }
.error-page__brand { display: flex; justify-content: center; margin-bottom: 20px; }
.error-page__card { text-align: center; align-items: center; }
.error-page__card h1 { font-size: 24px; line-height: 32px; }
.empty__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.auth__legal a { color: var(--muted); text-decoration: none; }
.auth__legal a:hover { color: var(--vink); text-decoration: underline; }
/* Pantallas táctiles: los enlaces del acceso («¿Has olvidado la contraseña?» y los legales) ganan zona de toque, hasta
   44 px de alto, sin moverse (QA de la web del 13 de octubre de 2026). */
@media (max-width: 820px), (pointer: coarse) {
    .auth__links a { padding-block: 13px; }
    .auth__legal a { padding-block: 12px; margin-block: -12px; }
}

/* -----------------------------------------------------------------------------
   Lector de la entrada (/lector)
   ----------------------------------------------------------------------------- */
.reader-body { background: var(--ground); }
.reader { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.reader__setup { width: 100%; max-width: 440px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 28px; display: grid; gap: 16px; }
.reader__brand { margin-bottom: 4px; }
.reader__main { width: 100%; max-width: 720px; display: grid; gap: 16px; }
.reader__status { min-height: 320px; display: grid; align-content: center; gap: 8px; padding: 40px 24px; text-align: center; background: var(--white); border: 3px solid var(--line); border-radius: 24px; transition: background-color .2s, border-color .2s; }
.reader__status.is-busy { border-color: var(--violet); }
.reader__status.is-allowed { background: var(--ok-bg); border-color: var(--ok); }
.reader__status.is-denied { background: var(--bad-bg); border-color: var(--bad); }
.reader__avatar { width: 88px; height: 88px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--vink); font: 700 32px/1 var(--font-display); }
.reader__avatar:empty { display: none; }
.reader__title { margin: 0; font: 700 36px/1.15 var(--font-display); }
.reader__name { margin: 0; font-size: 22px; font-weight: 600; }
.reader__name:empty, .reader__session:empty { display: none; }
.reader__reasons { list-style: none; margin: 4px 0 0; padding: 0; font-size: 18px; }
.reader__session { margin: 0; color: var(--muted); }
.reader__input .input { text-align: center; }
.reader__video { width: 100%; max-height: 320px; border-radius: 16px; background: #000; object-fit: cover; }
.reader__tools { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* -----------------------------------------------------------------------------
   Adaptable
   ----------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -----------------------------------------------------------------------------
   Móvil en formato app (hasta 960 px)
   Mismo sistema visual, con las piezas móviles del estudio (app.py, la app del
   socio): cabecera con el nombre del centro y botones redondos de 44 px, barra
   inferior blanca con píldora lila en la pestaña activa, fichas que se
   deslizan, tarjetas de 18 px de radio y filas de lista con burbuja de 38.
   La barra lateral desaparece: su contenido está en la barra inferior (lo que
   más usa cada rol, App\Support\Panel\PanelMenu) y en la hoja «Más».
   ----------------------------------------------------------------------------- */
.tabbar, .subnav { display: none; }

/* Hoja que sube desde abajo (<dialog class="sheet">: «Más») */
.sheet {
    position: fixed; inset: auto 0 0 0; top: auto;
    width: 100%; max-width: none; height: auto; max-height: none;
    margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible;
}
.sheet::backdrop { background: rgb(32 36 43 / 45%); }
.sheet[open]::backdrop { animation: fade-in .2s ease; }
.sheet.is-closing::backdrop { animation: fade-out .22s ease-in forwards; }
.sheet__panel {
    display: flex; flex-direction: column;
    max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px - env(safe-area-inset-top));
    background: var(--ground); border-radius: 24px 24px 0 0;
    box-shadow: 0 -12px 40px rgb(32 36 43 / 22%);
}
.sheet[open] .sheet__panel { animation: sheet-up .32s cubic-bezier(.2, .8, .2, 1); }
.sheet.is-closing .sheet__panel { animation: sheet-down .22s ease-in forwards; }
.sheet__head {
    position: relative; display: flex; align-items: center; gap: 12px; flex: none;
    padding: 24px max(16px, env(safe-area-inset-right)) 10px max(20px, env(safe-area-inset-left));
    touch-action: none;
}
.sheet__grabber { position: absolute; top: 8px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 999px; background: #c9ceda; }
.sheet__head h2 { flex: 1; min-width: 0; font: 700 22px/28px var(--font-display); }
.sheet__head .sq-btn { border-radius: 14px; }
.sheet__body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: 4px max(16px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheet-down { to { transform: translateY(100%); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
/* Con una hoja abierta no se desplaza la página de detrás (solo en <html>:
   si el <body> también lo tuviera, la cabecera fija perdería su sitio). */
html.is-locked { overflow: hidden; }

/* «Más»: persona, grupos de enlaces (list_link de app.py), ayuda y salir */
.more { display: flex; flex-direction: column; gap: 20px; }
.more__user { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--white); border: 1px solid var(--line); border-radius: 18px; }
.more__user-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.more__user-text strong { font: 700 20px/26px var(--font-display); color: var(--ink); overflow-wrap: anywhere; }
.more__user-text span { font-size: 13px; line-height: 18px; color: var(--muted); }
.more__group { display: flex; flex-direction: column; gap: 8px; }
.more__title { margin: 4px 2px 0; font: 700 17px/22px var(--font-display); color: var(--ink); }
.more__list { list-style: none; margin: 0; padding: 0 16px; background: var(--white); border: 1px solid var(--line); border-radius: 18px; }
.more__list > li + li { border-top: 1px solid var(--line); }
.more__list form { margin: 0; }
.more__link {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px; padding: 12px 0;
    border: 0; background: none; color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.more__link .bubble { width: 38px; height: 38px; }
.more__label { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; font-size: 15px; line-height: 20px; font-weight: 600; }
.more__label small { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--muted); }
.more__chevron { color: var(--muted); }
.more__link[aria-current="page"] .more__label { color: var(--vink); }
@media (hover: hover) { .more__link:hover .more__label { color: var(--vink); } }
.more__link:active { opacity: .7; }
.more__link--out .more__label, .more__link--out:hover .more__label { color: var(--bad); }

@media (max-width: 1100px) {
    .week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
    html { scroll-padding-top: 76px; }

    /* Armazón: sin barra lateral; cabecera arriba y barra de pestañas abajo */
    .app { display: block; }
    .sidebar { display: none; }

    .topbar {
        position: sticky; top: 0; z-index: 50; flex-wrap: nowrap; gap: 10px;
        padding: calc(8px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
        background: var(--ground);
    }
    .topbar > .search, .topbar__help, .topbar__who { display: none; }
    .topbar .topbar__back, .topbar .topbar__search { display: inline-flex; }
    .topbar .sq-btn { border-radius: 14px; }
    .topbar .topbar__title { display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; min-width: 0; min-height: 44px; }
    .topbar details.topbar__title { display: block; }
    .topbar__center { display: flex; flex-direction: column; justify-content: center; min-height: 44px; min-width: 0; cursor: pointer; }
    .topbar__name { display: flex; align-items: center; gap: 4px; min-width: 0; font: 700 18px/22px var(--font-display); color: var(--ink); }
    .topbar__name-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .topbar__name > svg { color: var(--muted); transition: transform .15s; }
    .topbar__title[open] .topbar__name > svg { transform: rotate(180deg); }
    .topbar__sub { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .02em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .topbar__end { gap: 8px; flex-wrap: nowrap; flex: none; }
    .topbar__new > summary.btn, .topbar__add { width: 44px; height: 44px; padding: 0; border-radius: 14px; }
    .topbar__new .btn__label, .topbar__add .btn__label {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .menu[open] > summary.sq-btn, .menu[open] > summary.btn { box-shadow: none; }

    /* Menús de la cabecera (Nuevo, avisos, centro): hojas desde abajo */
    .menu[open] > summary::before {
        content: ""; position: fixed; inset: 0; z-index: 60; cursor: default;
        background: rgb(32 36 43 / 45%); animation: fade-in .2s ease;
    }
    .menu__panel {
        position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 61;
        min-width: 0; max-width: none; max-height: 80vh; max-height: min(80dvh, 640px);
        overflow-y: auto; overscroll-behavior: contain;
        padding: 26px max(12px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
        border: 0; border-radius: 24px 24px 0 0; box-shadow: 0 -12px 40px rgb(32 36 43 / 22%);
        animation: sheet-up .28s cubic-bezier(.2, .8, .2, 1);
    }
    .menu__panel::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 999px; background: #c9ceda; }
    .menu__panel--wide { min-width: 0; }
    .menu__panel a, .menu__panel button { min-height: 56px; padding: 10px 12px; border-radius: 12px; font-size: 15px; }
    .menu__panel .bubble { width: 38px; height: 38px; }
    .menu__title { padding: 2px 12px 10px; font: 700 17px/22px var(--font-display); color: var(--ink); }
    .menu__item-text small { font-size: 13px; line-height: 18px; }
    .menu__check { margin-left: auto; color: var(--vink); }
    .menu__panel button[aria-current="true"] { font-weight: 700; }

    /* Barra inferior (tabbar de app.py) */
    .tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: stretch;
        padding: 6px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
        background: var(--white); border-top: 1px solid var(--line);
    }
    .tabbar__item {
        flex: 1 1 0; min-width: 0; min-height: 48px;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        color: var(--muted); font-size: 11px; line-height: 14px; font-weight: 500; text-decoration: none;
        -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    }
    .tabbar__item:hover { color: var(--ink); }
    .tabbar__icon { position: relative; flex: none; width: 48px; height: 30px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; transition: background-color .15s; }
    .tabbar__item.is-active { color: var(--vink); font-weight: 700; }
    .tabbar__item.is-active .tabbar__icon, .tabbar__item:active .tabbar__icon { background: var(--tint); }
    .tabbar__label { max-width: 100%; padding: 0 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.01em; }
    .tabbar__badge {
        position: absolute; top: -3px; left: 27px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
        background: var(--violet); color: var(--white); font-size: 10px; line-height: 18px; font-weight: 700; text-align: center;
        box-shadow: 0 0 0 2px var(--white);
    }
    .tabbar__dot { position: absolute; top: 3px; right: 10px; width: 8px; height: 8px; border-radius: 999px; background: var(--violet); box-shadow: 0 0 0 2px var(--white); }

    .main {
        gap: 20px;
        padding: 16px max(16px, env(safe-area-inset-right)) calc(88px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    }

    /* Apartados de la sección: fichas que se deslizan (chips de app.py) */
    .subnav {
        display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto;
        margin: -4px -16px 0; padding: 4px 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .subnav::-webkit-scrollbar { display: none; }
    .subnav a {
        flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 7px 14px;
        border: 1px solid var(--line); border-radius: 999px; background: var(--white);
        color: var(--ink); font-size: 13px; line-height: 18px; font-weight: 600; text-decoration: none; white-space: nowrap;
    }
    .subnav a[aria-current="page"] { background: var(--tint); border-color: var(--violet); color: var(--vink); }

    /* Contenido */
    .hero__tiles, .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .card { padding: 16px; }
    .card--dark, .lime-card { padding: 18px; }
    .input, .select, .textarea, .search input { font-size: 16px; }   /* iOS no amplía la pantalla al escribir */
    .form__grid, .hours__row { grid-template-columns: 1fr; }
    .hours__day { grid-column: 1 / -1; }
    .span-2 { grid-column: auto; }
    .dl { grid-template-columns: 1fr; gap: 2px 0; }
    .dl dt { margin-top: 10px; }
    .dl > dt:first-child { margin-top: 0; }
    .list > li { flex-wrap: wrap; align-items: flex-start; }
    .attendance .u-row { flex: 1 1 100%; margin-left: 0; }
    .auth { grid-template-columns: 1fr; }
    .auth__aside { display: none; }
    .auth__brand { display: flex; }

    /* Pestañas y segmentados: se deslizan en vez de partirse en líneas */
    .tabs, .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .tabs::-webkit-scrollbar, .chips::-webkit-scrollbar { display: none; }
    .seg { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
    .seg::-webkit-scrollbar { display: none; }
    .seg > a, .seg > button { flex: none; white-space: nowrap; }

    /* Semana tipo y calendario: un día por pantalla, deslizando */
    .week-grid-wrap { margin: 0 -16px; padding: 0 16px 4px; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; }
    .week-grid-wrap::-webkit-scrollbar { display: none; }
    .week-grid { min-width: 0; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(220px, 78%); }
    .week-grid__day { scroll-snap-align: start; }

    /* Tablero de interesados: una columna por pantalla */
    .board-wrap { margin: 0 -16px; padding: 0 16px 4px; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; }
    .board-wrap::-webkit-scrollbar { display: none; }
    .board { min-width: 0; }
    .board__col { flex: 0 0 min(300px, 84%); scroll-snap-align: start; }

    /* Programación: los días en una fila que se desliza (daystrip de app.py) */
    .three__days { max-width: none; flex: 1 1 100%; }
    .day-pick { flex-direction: row; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
    .day-pick::-webkit-scrollbar { display: none; }
    .day-pick__item { flex: 0 0 auto; min-width: 132px; scroll-snap-align: start; }
}

@media (max-width: 640px) {
    .hero { padding: 20px; gap: 20px; }
    .hero h1 { font-size: 26px; line-height: 32px; }
    .hero__summary { font-size: 15px; line-height: 22px; }
    .hero::before { max-width: 45%; }
    .hero::after { width: 110px; height: 70px; }
    .hero-btn { flex: 1 1 auto; justify-content: center; }

    /* Cifras de dos en dos: también las filas de x-kpi de cualquier pantalla (salían de una en una,
       400 px de cifras antes del contenido); si son impares, la última ocupa la fila entera. */
    .hero__tiles, .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .grid:has(> .kpi) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .grid:has(> .kpi) > .kpi:last-child:nth-child(odd),
    .hero__tiles > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .kpi, .stat { padding: 14px; gap: 4px; }
    .kpi__label, .stat__label { font-size: 12px; line-height: 16px; }
    .kpi__icon { width: 30px; height: 30px; }
    .kpi__value, .stat__value { font-size: 22px; line-height: 28px; }
    .kpi__delta { align-items: flex-start; font-size: 12px; line-height: 16px; }

    .page-head { align-items: flex-start; gap: 12px; }
    .page-head h1, .profile-head h1 { font-size: 24px; line-height: 32px; }
    .page-head__actions { width: 100%; }
    .page-head__actions > .btn { flex: 1 1 auto; padding-left: 12px; padding-right: 12px; }
    .page-head__actions > .btn--icon { flex: none; width: 44px; padding: 10px; }
    /* Con el botón «⋯» al lado, los demás van sin icono para caber en una fila */
    .page-head__actions:has(> .btn--icon) > .btn:not(.btn--icon) > svg { display: none; }
    .search kbd { display: none; }
    .search input { padding-right: 12px; }
    .week { grid-template-columns: 1fr; }
    .toolbar .input, .toolbar .select { min-width: 0; flex: 1 1 100%; max-width: none; width: 100%; }
    .toolbar > .btn { flex: 1 1 auto; }

    /* «Requiere tu atención»: tarjetas que se deslizan */
    .attention {
        grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px;
        overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px;
        margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none;
    }
    .attention::-webkit-scrollbar { display: none; }
    .attention:has(> :only-child) { grid-auto-columns: 100%; }
    .attention > * { scroll-snap-align: start; }
    /* Lo que hay que resolver (Formas de cobro › «Te falta») no se esconde detrás de un deslizamiento: una debajo de otra. */
    .attention--stack { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); overflow-x: visible; scroll-snap-type: none; margin: 0; padding: 0; }

    /* Clases del día: hora, clase y botón arriba; ocupación y estado debajo */
    .day-list > li {
        display: grid; gap: 6px 12px; padding: 12px;
        grid-template-columns: 48px minmax(0, 1fr) auto;
        grid-template-areas: "time main btn" ". fill fill" ". state state";
    }
    .day-list__time { grid-area: time; width: auto; }
    .day-list__main { grid-area: main; }
    .day-list__fill { grid-area: fill; min-width: 0; }
    .day-list__state { grid-area: state; }
    .day-list > li > .btn { grid-area: btn; align-self: start; }

    /* Tablas: cada fila, una tarjeta (app.js copia el título de cada
       columna en data-label). La primera celda hace de título. */
    .table-wrap:has(> .table--stack) { overflow: visible; }
    .table--stack, .table--stack tbody, .table--stack tfoot { display: block; }
    .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .table--stack tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; padding: 14px 16px; border-top: 1px solid var(--line); }
    .table--stack tbody > tr:first-child { border-top: 0; }
    .table--stack tr.is-continued { border-top: 0; padding-top: 0; }
    /* white-space: el título de la fila (th) hereda «nowrap» de las cabeceras
       y, si es largo, se salía de la pantalla (matriz de permisos). */
    .table--stack td, .table--stack tbody th, .table--stack tfoot th { display: block; padding: 0; border: 0; background: none; min-width: 0; white-space: normal; }
    .table--stack tr > :first-child:not(.is-plain), .table--stack tr > .is-wide, .table--stack td:has(form, details, .btn) { grid-column: 1 / -1; }
    .table--stack tr > .is-title { order: -1; grid-column: 1 / -1; }
    .table--stack [data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); }
    .table--stack td:empty { display: none; }
    .table--stack .num, .table--stack td.num { text-align: left; }
    .table--stack .nowrap { white-space: normal; }
    .table--stack tr.is-warn { background: var(--warn-bg); }
    .table--stack tr.is-total { background: var(--row-alt); }
}

/* ─── Tanda 1: actividad (espacios, tipos, horario, reservas, agenda) ─── */

/* Espacios: cabecera de sala que abre su editor */
.space-head { color: var(--ink); text-decoration: none; }
.space-head:hover strong { color: var(--vink); }

/* Disciplinas en píldora (mesa T2) */
.dchips { display: flex; flex-wrap: wrap; gap: 8px; }
.dchip {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
    background: var(--tint); border: 1px solid var(--tint); color: var(--ink);
    font-size: 13px; line-height: 18px; font-weight: 600; text-decoration: none;
}
.dchip:hover, .dchip.is-selected { border-color: var(--violet); color: var(--vink); }
.dchip--off { opacity: .55; }

/* Selector de color del tipo y de icono de la disciplina */
.tone-picks { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tone-pick { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.tone-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tone-pick__auto, .tone-pick__icon, .tone-pick .legend__swatch--lg {
    display: inline-flex; align-items: center; justify-content: center; min-height: 32px;
    border-radius: 10px; border: 2px solid transparent;
}
.tone-pick__auto { padding: 4px 10px; font-size: 12px; font-weight: 600; background: var(--ground); color: var(--body-2); }
.tone-pick__icon { width: 36px; height: 36px; background: var(--ground); color: var(--ink); }
.legend__swatch--lg { width: 32px; height: 32px; border-radius: 10px; }
.tone-pick input:checked + span { border-color: var(--violet); }
.tone-pick input:focus-visible + span { outline: 2px solid var(--violet); outline-offset: 2px; }
.input--qty { width: 84px; flex: none; text-align: right; }

/* Imagen del evento (x-event-image, SQL 45): miniaturas 3:2 que se eligen como radios. */
.img-picks { display: flex; flex-direction: column; gap: 10px; }
.img-picks__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.img-picks__head { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); }
.img-picks .disclosure .img-picks__grid { margin-top: 10px; }
.img-pick { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 44px; cursor: pointer; }
.img-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.img-pick__box {
    display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; overflow: hidden;
    border-radius: var(--r-box); border: 2px solid var(--line); background: var(--ground); color: var(--muted);
}
.img-pick__box img { width: 100%; height: 100%; object-fit: cover; }
.img-pick__box--empty { border-style: dashed; border-color: var(--ctrl); }
.img-pick__title { font-size: 12px; line-height: 16px; color: var(--body-2); }
.img-pick:hover .img-pick__box { border-color: var(--soft); }
.img-pick input:checked + .img-pick__box { border-color: var(--violet); box-shadow: 0 0 0 2px var(--violet); }
.img-pick input:checked ~ .img-pick__title { color: var(--ink); font-weight: 600; }
.img-pick input:focus-visible + .img-pick__box { outline: var(--focus-ring); outline-offset: 3px; }

/* La imagen del evento en su ficha. */
.event-cover { margin: 0; display: flex; flex-direction: column; gap: 6px; }
/* Con tope de ancho y sin tope de alto: a todo el ancho y 240 px de alto la foto quedaba en 5:1 y cortaba las caras. */
.event-cover img { display: block; width: 100%; height: auto; max-width: 640px; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 35%; border-radius: var(--r-card); background: var(--ground); }

/* Choques del horario */
.clash-list { margin: 6px 0 4px; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.slot--clash { border-color: var(--warn); }
.slot__warn { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--warn); }
.fchip--clash { background: var(--warn-bg); color: var(--warn); }

/* Vista por espacios (mesa T3) */
.table-wrap--plain { border: 0; border-radius: 0; }
.zgrid th, .zgrid td { vertical-align: top; min-width: 170px; }
.zgrid .zgrid__hour { min-width: 64px; width: 64px; font-weight: 600; color: var(--muted); }
.zgrid__zone { display: block; font-weight: 700; color: var(--ink); }
.zsession {
    display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; margin-bottom: 6px; border-radius: 10px;
    background: var(--type-bg, var(--tint)); border: 1px solid var(--type-bg, var(--tint)); color: var(--ink); text-decoration: none;
}
.zsession:hover { border-color: var(--type-fg, var(--violet)); color: var(--ink); }
.zsession--clash { border-color: var(--warn); }
.occ-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.occ-list > li { display: grid; grid-template-columns: minmax(120px, 220px) minmax(60px, 1fr) 56px; gap: 12px; align-items: center; font-size: 14px; }
.occ-list strong { text-align: right; }

/* Agenda (mesa T4): citas, grupos y huecos libres */
.slot--personal { --type-bg: #e9ecf2; --type-fg: #20242b; }
.slot--group { --type-bg: var(--lime-tint); --type-fg: var(--lime-ink); }
.slot--free { background: transparent; border: 1px dashed var(--soft); color: var(--muted); }
.slot--free:hover { border-color: var(--violet); color: var(--vink); }
.slot--free .slot__time { color: var(--muted); }

/* Listas con varias acciones por fila (añadir a la clase) y colas de espera */
.list > li.list__wrap { flex-wrap: wrap; }
.list > li.list__wrap > .row-form { flex: 0 1 auto; }
.queue { margin: 6px 0 0; padding-left: 20px; font-size: 13px; line-height: 19px; color: var(--body-2); }

/* ─── Tanda 2: programación (constructor por bloques), resultados y marcas ─── */
.wblocks { display: flex; flex-direction: column; gap: 12px; }
.wblock { border: 1px solid var(--line); border-radius: var(--r-box); padding: 12px; margin: 0; display: flex; flex-direction: column; gap: 8px; background: var(--white); min-width: 0; }
.wblock:focus-within { border-color: var(--soft); }
.wblock__head { display: grid; grid-template-columns: 32px minmax(0, 1fr) 140px 72px auto; gap: 8px; align-items: center; }
.wblock__letter { width: 32px; height: 32px; border-radius: 10px; background: var(--tint); color: var(--vink); display: inline-flex; align-items: center; justify-content: center; font: 700 15px/1 var(--font-display); }
.wblock__title { font-weight: 600; }
.wblock__items { display: flex; flex-direction: column; gap: 6px; padding-left: 40px; }
.wblock__add { align-self: flex-start; margin-left: 40px; }
.witem { display: flex; flex-direction: column; gap: 4px; padding: 6px 0; border-top: 1px dashed var(--line); }
.witem:first-child { border-top: 0; }
.witem__row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.witem__tools { display: inline-flex; gap: 2px; }
.sq-btn--sm { width: 32px; height: 32px; }
.witem__more > summary { cursor: pointer; font-size: 12px; color: var(--muted); list-style: none; }
.witem__more > summary::-webkit-details-marker { display: none; }
.witem__more[open] > summary { color: var(--vink); }
.witem__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; margin-top: 6px; }
.witem__levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 6px; }
.witem__grid label, .witem__levels label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.lib-list > li { padding: 8px 0; }
.wsummary { padding: 8px 0; border-top: 1px solid var(--line); }
.wsummary:first-of-type { border-top: 0; }
.wsummary__items { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.results__pos { width: 28px; flex: none; font: 700 16px/1 var(--font-display); color: var(--vink); text-align: center; }
.select--sm { width: auto; min-width: 90px; flex: 0 1 auto; }
.list--pad > li { padding-left: 20px; padding-right: 20px; }
.list--pad > li:first-child { padding-top: 14px; }
.list--pad > li:last-child { padding-bottom: 14px; }

@media (max-width: 960px) {
    .wblock__head { grid-template-columns: 32px minmax(0, 1fr) auto; }
    .wblock__format, .wblock__min { grid-column: 2 / -1; }
    .wblock__items { padding-left: 0; }
    .wblock__add { margin-left: 0; }
    .witem__row { grid-template-columns: minmax(0, 1fr) auto; }
    .witem__text { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 960px) {
    .occ-list > li { grid-template-columns: minmax(0, 1fr) 56px; }
    .occ-list > li > .bar { grid-column: 1 / -1; grid-row: 2; }
}

/* -----------------------------------------------------------------------------
   Tanda 4: firma, documentos, salud, familia y altas en línea. La firma y el
   texto del documento los usa también la página pública del centro.
   ----------------------------------------------------------------------------- */
.doc-text {
    white-space: pre-line; overflow-wrap: anywhere; font-size: 14px; line-height: 22px; color: var(--body-2);
    max-height: 62vh; overflow-y: auto; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--row-alt);
}
.sigpad { display: flex; flex-direction: column; gap: 6px; }
.sigpad__canvas { display: block; width: 100%; height: 180px; border: 1.5px dashed var(--ctrl); border-radius: var(--r-box); background: var(--white); touch-action: none; cursor: crosshair; }
.sigpad.is-signed .sigpad__canvas { border-style: solid; border-color: var(--violet); }
.sigpad__canvas:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.sigpad__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

.yesno { gap: 8px; }
.yesno > legend { font: 600 14px/20px var(--font-ui); color: var(--ink); margin-bottom: 6px; }
.seg--yesno { display: inline-flex; }
.seg__opt { position: relative; display: inline-flex; }
.seg__opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.seg__opt span { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; min-height: 36px; padding: 6px 14px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--body-2); }
.seg__opt input:checked + span { background: var(--violet); color: var(--white); }
.seg__opt input:focus-visible + span { outline: var(--focus-ring); outline-offset: 2px; }

.answers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.answers > li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.answers > li:first-child { border-top: 0; }

.people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.people__row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.people__row:first-child { border-top: 0; }
.people__main { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.people__row > .disclosure { flex-basis: 100%; }

.link-btn { background: none; border: 0; padding: 0; min-height: 36px; font: inherit; font-size: 13px; font-weight: 600; color: var(--vink); cursor: pointer; }
.link-btn:hover { color: var(--vink-hover); text-decoration: underline; }
.textarea--doc { min-height: 360px; font-size: 13px; line-height: 20px; }
.vars { grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin-top: 8px; font-size: 13px; }
.vars code { font-size: 12px; color: var(--vink); }

.qr-box { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--white); }
.qr-box > svg { width: 140px; height: 140px; flex: none; }   /* solo el QR: los iconos de sus botones, no */
.qr-box__url { font-size: 12px; line-height: 16px; overflow-wrap: anywhere; color: var(--body-2); }

/* -----------------------------------------------------------------------------
   Tanda 5: cierre de mes
   ----------------------------------------------------------------------------- */
.u-mt-xs { margin-top: 6px; }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.checklist > li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.checklist > li:first-child { border-top: 0; }
.checklist > li > svg { color: var(--warn); }
.checklist > li.is-done > svg { color: var(--ok); }
.checklist > li > strong { font-family: var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* -----------------------------------------------------------------------------
   Tanda 6: marca de la app
   ----------------------------------------------------------------------------- */
.color-pick { display: flex; align-items: center; gap: 10px; }
.color-pick input[type="color"] { width: 48px; height: 40px; padding: 2px; border: 1px solid var(--line); border-radius: var(--r-input, 10px); background: var(--white); cursor: pointer; }
.color-pick code { font-size: 13px; color: var(--body-2); }
.contrast { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.contrast[data-tone="ok"] { color: var(--ok); }
.contrast[data-tone="warn"] { color: var(--warn); }
.contrast[data-tone="bad"] { color: var(--bad); }
.brand-preview { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 auto; }
/* Icono y logo de la app propia (Marca de la app y la ficha del cliente en /interno). */
.brand-icon { display: block; width: 56px; height: 56px; object-fit: contain; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.brand-icon--wide { width: auto; max-width: 160px; }
.brand-swatch { display: block; flex: none; border-radius: 10px; }

/* -----------------------------------------------------------------------------
   Tanda 7: bandeja (mesa H4) — lista, hilo y ficha al lado
   ----------------------------------------------------------------------------- */
.inbox { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.inbox__list { flex: 1 1 300px; max-width: 380px; min-width: 0; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.inbox__thread { flex: 3 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.inbox__side { flex: 1 1 280px; max-width: 340px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.inbox__back { display: none; }
.inbox__list .search--local { max-width: none; }

.filter-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.filter-pills > a { padding: 5px 12px; min-height: 32px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-size: 13px; font-weight: 500; text-decoration: none; }
.filter-pills > a[aria-pressed="true"] { background: var(--tint); border-color: var(--violet-line); color: var(--vink); font-weight: 600; }

.conv-list { display: flex; flex-direction: column; gap: 2px; }
.conv { display: flex; gap: 12px; padding: 12px; border-radius: var(--r-box); text-decoration: none; color: var(--ink); background: transparent; }
.conv:hover { background: var(--row-alt); }
.conv[aria-current="true"] { background: var(--tint); }
.conv[aria-current="true"] .avatar { background: var(--white); }
.conv__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.conv__top { display: flex; justify-content: space-between; gap: 8px; }
.conv__name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv__time { font-size: 12px; line-height: 16px; color: var(--muted); white-space: nowrap; }
.conv__preview { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv__meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12px; line-height: 16px; font-weight: 600; }

.thread-head { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; min-width: 0; }
.thread-head__who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.thread { display: flex; flex-direction: column; gap: 14px; padding: 16px; background: #f6f5fb; border-radius: var(--r-box); max-height: 62vh; overflow-y: auto; }
.thread__day { align-self: center; font-size: 12px; line-height: 16px; color: var(--muted); font-weight: 600; }
.thread__event { align-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-size: 12px; font-weight: 600; }
.thread__empty { align-self: center; }
.msg { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 78%; }
.msg--out { align-items: flex-end; align-self: flex-end; }
.msg__bubble { padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: var(--white); border: 1px solid var(--line); font-size: 14px; line-height: 20px; white-space: pre-line; overflow-wrap: anywhere; }
.msg--out .msg__bubble { border-radius: 14px 14px 4px 14px; background: var(--tint); border-color: transparent; }
.msg--failed .msg__bubble { background: var(--bad-bg); }
.msg--draft { width: 78%; }
.msg--draft form { width: 100%; }
.msg--draft .msg__bubble { width: 100%; border: 1.5px dashed var(--violet-line); background: var(--white); font: inherit; }
.msg__tag { display: block; font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--vink); margin-bottom: 2px; }
.msg__meta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; color: var(--muted); }
.msg--assistant .msg__meta { color: var(--vink); font-weight: 600; }
.msg--failed .msg__meta { color: var(--bad); }
.composer { display: flex; gap: 8px; align-items: flex-end; }
.composer .textarea { flex: 1; min-width: 0; min-height: 0; resize: vertical; }
.composer-wrap { display: flex; flex-direction: column; gap: 10px; }

.side-dl { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.side-dl > div { display: flex; flex-direction: column; gap: 2px; }
.side-dl dt { font-size: 12px; color: var(--muted); font-weight: 600; }
.side-dl dd { margin: 0; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }

/* -----------------------------------------------------------------------------
   Tanda 8: asistente (mesa H9)
   ----------------------------------------------------------------------------- */
.level-list { display: flex; flex-direction: column; gap: 8px; }
.level-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--white); cursor: pointer; }
.level-card input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--violet); flex: none; }
.level-card.is-selected, .level-card:has(input:checked) { border-color: var(--violet); background: var(--tint); }
.level-card.is-disabled { cursor: not-allowed; opacity: .7; }
.level-card__text { flex: 1; min-width: 0; }
.level-card__head { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.level-card__sub { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.check-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.check-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; min-height: 36px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; }
.check-pill input { width: 16px; height: 16px; margin: 0; accent-color: var(--lime); }
.check-pill:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--white); }
.check-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; cursor: pointer; }
.check-row input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--violet); flex: none; }
.check-row > span { display: flex; flex-direction: column; gap: 2px; }
.thread--short { max-height: 420px; }
.select--auto { width: auto; }
.pre-line { white-space: pre-line; }

/* Analítica (B1 y B2): mapa de ocupación por día y hora y barras por mes. */
.heat { width: 100%; min-width: 420px; border-collapse: separate; border-spacing: 4px; font-size: 13px; }
.heat th { font-weight: 600; color: var(--muted); font-size: 12px; text-align: center; padding: 4px; white-space: nowrap; }
.heat tbody th { text-align: left; }
.heat td { text-align: center; padding: 10px 4px; border-radius: 8px; font-weight: 600; min-width: 52px; }
.heat--low { background: var(--bad-bg); color: var(--bad); }
.heat--mid { background: var(--warn-bg); color: var(--warn); }
.heat--high { background: var(--ok-bg); color: var(--ok); }
.heat--none { background: var(--row-alt); color: var(--muted); }
.heat-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--muted); }
.heat-legend li { display: inline-flex; align-items: center; gap: 6px; }
.heat-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid var(--line); }
.funnel { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.funnel--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.funnel__step { border: 1px solid var(--line); border-radius: var(--r-box); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.funnel__value { font-family: Sora, Inter, system-ui, sans-serif; font-size: 24px; line-height: 32px; font-weight: 600; color: var(--ink); }
.funnel__label { font-size: 13px; color: var(--muted); }
/* Una cifra que lleva a lo que cuenta (14 de octubre de 2026: Resumen y Cifras, hallazgos N3 y C16). */
a.funnel__step { color: inherit; text-decoration: none; transition: border-color .15s, background-color .15s; }
a.funnel__step:hover { border-color: var(--violet); background: var(--tint); }
a.funnel__step:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.month-bars { display: flex; align-items: flex-end; gap: 12px; height: 140px; }
.month-bars__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.month-bars__svg { display: block; width: 100%; height: 112px; }
.month-bars__svg rect { fill: var(--violet); }
.month-bars__svg rect.month-bars__alt { fill: var(--lime); }
.month-bars__col span { font-size: 12px; line-height: 16px; color: var(--muted); }

/* Mostrador (G3): fichas de producto que añaden al ticket y líneas del ticket. */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.product-tile { width: 100%; min-height: 96px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--white); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.product-tile:hover, .product-tile:focus-visible { border-color: var(--violet); background: var(--tint); }
.product-tile:disabled { opacity: .5; cursor: not-allowed; }
.product-tile__cat { font-size: 12px; color: var(--muted); }
.product-tile__name { font-weight: 600; font-size: 14px; line-height: 20px; }
.product-tile__price { font-family: Sora, Inter, system-ui, sans-serif; font-weight: 600; }
.ticket-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.ticket-line:last-child { border-bottom: 0; }
.ticket-line__qty { display: inline-flex; align-items: center; gap: 4px; }
.ticket-total { display: flex; justify-content: space-between; align-items: baseline; font-family: Sora, Inter, system-ui, sans-serif; font-size: 22px; font-weight: 600; }
.pay-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }

/* Modo TV (H10): pantalla tinta de la sala, letras para leer de lejos. */
body.tv { background: var(--ink); color: var(--white); }
.tv-screen { min-height: 100vh; padding: 24px 32px; box-sizing: border-box; display: flex; flex-direction: column; gap: 20px; }
.tv-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--soft-text); font-size: 18px; }
.tv-head__brand { display: inline-flex; align-items: center; gap: 12px; color: var(--white); font-weight: 600; }
.tv-exit { color: var(--soft-text); font-size: 14px; }
.tv-head__session { color: var(--white); font-size: 20px; }
.tv-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tv-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); gap: 28px; flex: 1; }
.tv-title { margin: 0; font-family: Sora, Inter, system-ui, sans-serif; font-size: clamp(28px, 3.4vw, 52px); line-height: 1.1; color: var(--white); }
.tv-timer { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 24px; padding: 16px 0; }
.tv-timer__clock { font-family: Sora, Inter, system-ui, sans-serif; font-size: clamp(72px, 12vw, 180px); line-height: 1; font-weight: 600; color: var(--lime); font-variant-numeric: tabular-nums; }
.tv-timer.is-rest .tv-timer__clock { color: var(--soft-text); }
.tv-timer.is-done .tv-timer__clock { color: var(--white); }
.tv-timer__round { font-size: clamp(20px, 2vw, 30px); color: var(--white); }
.tv-timer__controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: 100%; opacity: .85; }
.tv-timer.is-running .tv-timer__controls { opacity: .35; }
.tv-timer__field { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--soft-text); }
.tv-timer__field .input { width: 84px; }
.tv-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.tv-block { background: var(--ink-2); border: 1px solid var(--ink-line); border-radius: 16px; padding: 18px 20px; }
.tv-block h2 { margin: 0 0 10px; font-size: clamp(18px, 1.6vw, 26px); color: var(--white); }
.tv-block__letter { display: inline-flex; align-items: center; justify-content: center; width: 1.6em; height: 1.6em; border-radius: 8px; background: var(--lime); color: var(--ink); margin-right: 6px; }
.tv-block ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: clamp(16px, 1.4vw, 24px); }
.tv-block li span { color: var(--soft-text); margin-left: 6px; }
.tv-block__note, .tv-empty, .tv-more { color: var(--soft-text); font-size: 16px; }
.tv-side { display: flex; flex-direction: column; gap: 24px; }
.tv-side h2 { margin: 0 0 10px; font-size: 20px; color: var(--white); }
.tv-people { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 16px; font-size: 18px; line-height: 30px; }
.tv-board { margin: 0; padding: 0 0 0 1.4em; font-size: 18px; line-height: 30px; }
.tv-board li span { color: var(--white); }
.tv-board li small { color: var(--soft-text); margin-left: 6px; }
.tv-board li strong { float: right; color: var(--lime); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
    .tv-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .inbox__list, .inbox__side { max-width: none; }
    .inbox--open .inbox__list { display: none; }
    .inbox--open .inbox__back { display: block; }
    .inbox:not(.inbox--open) .inbox__thread { display: none; }
    .msg { max-width: 90%; }
}

/* -----------------------------------------------------------------------------
   Ventana emergente de crear y editar (<dialog class="modal">, x-modal)
   Decisión del promotor del 8 de octubre de 2026: los formularios no ocupan
   una columna al lado de la lista; se abren encima, y la lista se queda con
   todo el ancho. Tarjeta blanca del sistema (radio 20, sombra tinta) centrada
   sobre el mismo fondo oscuro que la hoja «Más». Solo se desplaza el cuerpo:
   la cabecera y los botones del formulario se quedan a la vista.
   ----------------------------------------------------------------------------- */
.modal {
    position: fixed; inset: 0; margin: auto;
    width: calc(100% - 32px); max-width: 600px; height: fit-content; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
    padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible;
}
.modal:not([open]) { display: none; }
.modal--sm { max-width: 460px; }
.modal--lg { max-width: 820px; }
.modal--xl { max-width: 1080px; }
.modal::backdrop { background: rgb(32 36 43 / 45%); }
.modal[open]::backdrop { animation: fade-in .18s ease; }
/* Sin JavaScript no hay fondo del navegador: lo hace la sombra. */
.modal:not(:modal) { z-index: 90; }
.modal:not(:modal) .modal__panel { box-shadow: 0 0 0 100vmax rgb(32 36 43 / 45%), 0 24px 60px rgb(32 36 43 / 28%); }
.modal__panel {
    display: flex; flex-direction: column; min-height: 0;
    max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
    background: var(--white); border-radius: var(--r-hero); box-shadow: 0 24px 60px rgb(32 36 43 / 28%);
}
.modal[open] .modal__panel { animation: modal-in .2s cubic-bezier(.2, .8, .2, 1); }
.modal__head {
    flex: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
    padding: 18px 14px 14px 24px; border-bottom: 1px solid var(--line);
}
.modal__head h2 { font-size: 20px; line-height: 26px; overflow-wrap: anywhere; }
.modal__head > div { min-width: 0; padding-top: 6px; }
.modal__body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    display: flex; flex-direction: column; gap: 16px; padding: 20px 24px 24px;
}
.modal__body > .alert { flex: none; }
/* Los botones del formulario, pegados abajo mientras se baja por él. */
.modal__body .edit-panel__actions, .modal__body .form-foot {
    position: sticky; bottom: -24px; z-index: 2;
    margin: 4px -24px -24px; padding: 14px 24px;
    background: var(--white); border-top: 1px solid var(--line); border-radius: 0 0 var(--r-hero) var(--r-hero);
    justify-content: flex-end;
}
/* Un formulario que no es el último de la ventana (la ficha de una persona
   y, debajo, sus tarifas): sus botones se pegan mientras se ve y, al pasar
   de largo, se quedan donde acaba, como pie de ese bloque. */
.modal__body .form:not(:last-child) > .edit-panel__actions { margin-bottom: 0; border-radius: 0; }
/* Un botón que envía algo va dentro de su propio formulario: en el pie se comporta como los demás
   (si no, en el móvil no se estiraba y quedaba suelto a un lado). */
.modal__body .edit-panel__actions > form { display: contents; }
/* Botones dentro de una columna de la ventana: van en su sitio, sin pegarse
   (la franja a todo el ancho se saldría de la columna). */
.modal__cols .edit-panel__actions { position: static; margin: 4px 0 0; padding: 0; border: 0; border-radius: 0; background: transparent; justify-content: flex-start; }
/* En las ventanas anchas, los campos en dos o tres columnas. */
.modal--lg .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modal--xl .form__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* El mismo canal que .form__grid (16 px): apilados en una ventana, casan. */
.modal__cols { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.modal__cols > * { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.modal__section { display: flex; flex-direction: column; gap: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
/* La primera no lleva raya: ni cuando es el primer hijo ni cuando va justo
   detrás de los campos ocultos del formulario (@csrf, @method). */
.modal__section:first-child, .modal__body input[type="hidden"] + .modal__section { padding-top: 0; border-top: 0; }
/* En dos columnas, cada sección empieza arriba de su columna (PT2). */
.modal__cols > .modal__section { padding-top: 0; border-top: 0; }
.modal__section > h3 { font-size: 15px; line-height: 20px; }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.985); } }
/* Con la ventana abierta la página no se desplaza; si tenía barra, se guarda
   su hueco para que el contenido de detrás no dé un salto. */
html.is-locked.has-gutter { scrollbar-gutter: stable; }

@media (max-width: 960px) {
    /* En el móvil, a pantalla completa y desde abajo, como una hoja de la app. */
    .modal, .modal--sm, .modal--lg, .modal--xl {
        inset: auto 0 0 0; margin: 0; width: 100%; max-width: none; max-height: none;
    }
    .modal__panel {
        max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px - env(safe-area-inset-top));
        border-radius: 24px 24px 0 0; box-shadow: 0 -12px 40px rgb(32 36 43 / 22%);
    }
    .modal[open] .modal__panel { animation: sheet-up .3s cubic-bezier(.2, .8, .2, 1); }
    .modal__head { padding: 18px 10px 12px max(18px, env(safe-area-inset-left)); }
    .modal__body { padding: 16px max(16px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
    .modal__body .edit-panel__actions, .modal__body .form-foot {
        bottom: calc(-20px - env(safe-area-inset-bottom)); margin: 4px -16px calc(-20px - env(safe-area-inset-bottom)); padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        border-radius: 0;
    }
    .modal__body .edit-panel__actions > .btn, .modal__body .edit-panel__actions > form > .btn, .modal__body .form-foot > .btn { flex: 1 1 auto; justify-content: center; }
    .modal--lg .form__grid, .modal--xl .form__grid, .modal__cols { grid-template-columns: minmax(0, 1fr); }
}

/* ───────────────────────────────────────────────────────────────────────────
   Área comercial de /interno (10 de octubre de 2026): leads, ficha, agenda
   y sus ajustes. Todo lo demás son componentes y clases que ya había: aquí
   solo va lo que el prototipo (UX-Hyrapp/10-Prototipo-comercial) añadía.
   ─────────────────────────────────────────────────────────────────────────── */

/* Lista de leads: casilla y acción estrechas; avatar pequeño del responsable. */
.table--leads .col-check { width: 36px; padding-right: 0; }
.table--leads tbody th { min-width: 250px; }
.table--leads td:nth-of-type(2) { min-width: 150px; }
.table--leads .col-action { width: 1%; white-space: nowrap; text-align: right; }
.toolbar--filters .input { flex: 1 1 220px; max-width: none; }
.toolbar--filters .select { min-width: 0; flex: 0 1 auto; }
.person--sm { gap: 8px; }
.person--sm .person__text span { font-size: 14px; color: var(--ink); }

/* Etiqueta de un lead: más discreta que una píldora de estado. */
.tag-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font: inherit; font-size: 12px; line-height: 18px; font-weight: 500; color: var(--body-2); white-space: nowrap; text-decoration: none; }
button.tag-chip { cursor: pointer; }
a.tag-chip:hover, button.tag-chip:hover { border-color: var(--violet); color: var(--vink); }
.tag-chip i { width: 8px; height: 8px; border-radius: 999px; display: inline-block; background: var(--neutral); }
.tag-chip i.t-info { background: var(--info); } .tag-chip i.t-ink { background: var(--ink); } .tag-chip i.t-lime { background: #a6cf2a; }
.tag-chip i.t-violet { background: var(--violet); } .tag-chip i.t-ok { background: var(--ok); } .tag-chip i.t-bad { background: var(--bad); } .tag-chip i.t-warn { background: var(--warn); }
.tag-chip.is-off { opacity: .55; text-decoration: line-through; }
.tag-check { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: 13px; cursor: pointer; }
.tag-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--violet); }
.tag-check:has(input:checked) { border-color: var(--violet-line); background: var(--tint); }

.seg--wrap { flex-wrap: wrap; align-self: flex-start; }
.only-mobile { display: none; }

/* Aviso de «hay novedades» de la lista y el tablero, y barra de acciones en grupo. */
.pulse-bar[hidden], .bulk-bar[hidden] { display: none; }

/* Tablero de leads: las cinco columnas se reparten el ancho (sin scroll horizontal). */
.board--fit { min-width: 0; }
.board--fit .board__col { flex: 1 1 0; min-width: 0; }
.board__sum { font-size: 12px; font-weight: 600; color: var(--muted); }
.board__card[draggable="true"] { cursor: grab; }
.board__card.is-dragging { opacity: .45; }
.board__col.is-over { box-shadow: 0 0 0 2px var(--violet); }
.board__drop { display: flex; gap: 14px; }
.board__drop > div { flex: 1 1 0; min-width: 0; padding: 14px 16px; border: 1.5px dashed var(--soft); border-radius: var(--r-card); color: var(--muted); font-size: 14px; display: flex; align-items: center; gap: 10px; }
.board__drop > div.is-over { border-color: var(--violet); background: var(--tint); color: var(--vink); }
.board__more { font-size: 13px; padding: 4px 2px; }
/* «Mover a…» en cada tarjeta y los cierres siempre a mano, pegados abajo mientras se baja por
   una columna larga (hallazgo C5, 14 de octubre de 2026). */
.board__menu { margin-left: auto; flex: none; }
.board__drop { position: sticky; bottom: 0; z-index: 3; padding: 10px 0; background: var(--ground); }

/* Ficha del lead: conversación y datos, dos columnas. */
.lead { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.lead__main { flex: 3 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.lead__side { flex: 1 1 300px; max-width: 360px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.lead .thread { max-height: none; }
.msg__auto summary { cursor: pointer; font-size: 13px; color: var(--ink-2, inherit); }
.msg__auto[open] summary { margin-bottom: 4px; }
.side-dl form { margin: 0; }
.side-dl .select { width: 100%; max-width: none; }

/* Hilo: nota interna, correo y llamada dentro de la conversación. */
.msg--note { align-self: center; align-items: stretch; max-width: 86%; width: 86%; }
.msg--note .msg__bubble { background: var(--warn-bg); border-color: transparent; border-radius: 14px; }
.msg--email .msg__bubble { border-radius: 14px; }
.msg--email.msg--out .msg__bubble { border-radius: 14px; }
.msg__subject { display: block; font-weight: 600; margin-bottom: 4px; }
.msg__bubble a { overflow-wrap: anywhere; }
.thread__more { align-self: center; font-size: 13px; }

/* Compositor: canal por el que se escribe, respuestas rápidas y cortesía de 30 s. */
.quick { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.quick > span { font-size: 12px; color: var(--muted); font-weight: 600; }
.filter-pills > button { padding: 5px 12px; min-height: 32px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.filter-pills > button:hover { border-color: var(--violet); color: var(--vink); }
.filter-pills > button[aria-pressed="true"] { background: var(--tint); border-color: var(--violet-line); color: var(--vink); font-weight: 600; }
.courtesy { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; font-weight: 600; color: var(--vink); }
.courtesy form { margin: 0; display: inline-flex; }
.msg--pending .msg__bubble { border: 1.5px dashed var(--violet-line); background: var(--white); }
.msg--pending form.msg__edit { width: 100%; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.msg--pending form.msg__edit .textarea { width: 100%; min-width: min(420px, 70vw); }
.msg__edit[hidden] { display: none; }

/* Elegir hueco: días en fila y horas en rejilla (ventana «Agendar demo»). */
.daypick { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.daypick > a, .daypick > button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border: 1px solid var(--line); border-radius: var(--r-box); text-decoration: none; color: var(--ink); background: var(--white); font: inherit; cursor: pointer; }
.daypick > a strong, .daypick > button strong { font-family: Sora, Inter, system-ui, sans-serif; font-size: 20px; line-height: 26px; }
.daypick > a span, .daypick > button span { font-size: 12px; color: var(--muted); }
.daypick > [aria-current="true"], .daypick > [aria-pressed="true"] { border-color: var(--violet); background: var(--tint); box-shadow: 0 0 0 1px var(--violet); }
.daypick > .is-off { background: var(--neutral-bg); color: var(--muted); }
.hourpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.hourpick > a, .hourpick > button { padding: 9px 8px; text-align: center; border: 1px solid var(--line); border-radius: var(--r-ctrl); text-decoration: none; color: var(--ink); background: var(--white); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.hourpick > [aria-current="true"], .hourpick > [aria-pressed="true"] { border-color: var(--violet); background: var(--violet); color: var(--white); }
.slot-empty { font-size: 14px; color: var(--muted); padding: 10px 2px; }

/* Agenda del equipo: una columna por día, con ocupados de Google en gris. */
.slot--busy { --type-bg: var(--neutral-bg); --type-fg: var(--neutral); background: var(--neutral-bg); border-color: transparent; color: var(--muted); }
.slot--demo { --type-bg: var(--tint); --type-fg: var(--vink); }
.slot--busy .slot__time, .slot--busy .slot__name { color: var(--neutral); font-weight: 600; }
div.slot { cursor: default; }
.week-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); min-width: 0; }
.week-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); min-width: 0; }
.legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; flex: none; }
.legend__demo { background: var(--soft); }
.legend__busy { background: #d5d9e2; }
.legend__free { border: 1px dashed var(--soft); }
.legend__call { background: #cfd4de; }

/* Horario de demos de una persona: un día por fila, con sus tramos. */
.schedule { display: grid; grid-template-columns: 110px repeat(2, minmax(0, 1fr)); gap: 8px 12px; align-items: center; }
.schedule__range { display: flex; align-items: center; gap: 6px; }
.schedule__range .input { min-width: 0; }

/* Bloque «formulario recibido» en la ficha. */
.intake { border: 1px solid var(--line); border-radius: var(--r-box); padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.intake__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 20px; }

/* Ajustes › Conexión con Meta: el dato que hay que copiar en la consola de Meta. */
.copy-field { display: flex; gap: 8px; align-items: center; }
.copy-field code { flex: 1 1 auto; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-ctrl); background: var(--row-alt); font-size: 13px; overflow-wrap: anywhere; }

@media (max-width: 960px) {
    .only-mobile { display: flex; margin-top: 8px; }
    /* Pestañas de la ficha y de la lista: en dos líneas antes que cortadas. */
    .tabs.tabs--wrap { flex-wrap: wrap; overflow: visible; white-space: normal; row-gap: 0; }
    .tabs.tabs--wrap a { margin-right: 16px; }
    .profile-head > .row { width: 100%; }
    .profile-head > .row > .btn, .profile-head > .row > form { flex: 1 1 auto; }
    .profile-head > .row > form > .btn { width: 100%; justify-content: center; }
    .lead__side { max-width: none; }
    /* Ficha del lead en el móvil: la próxima acción, lo primero tras las pestañas, antes de la
       conversación (hallazgo C12). La columna se deshace y su primera tarjeta sube. */
    .lead { flex-direction: column; align-items: stretch; }
    .lead__main { flex: none; }
    .lead__side { display: contents; }
    .lead__side > :first-child { order: -1; }
    /* Tablero de leads en el móvil: una columna debajo de otra, sin deslizar de lado, con el
       índice de etapas arriba (hallazgo C5, 14 de octubre de 2026). */
    .board-wrap--stack { overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; }
    .board-wrap--stack .board--fit { flex-direction: column; align-items: stretch; }
    .board-wrap--stack .board--fit .board__col { flex: none; width: 100%; scroll-margin-top: 72px; }
    .board__drop { flex-direction: column; }
    /* Agenda de demos en el móvil: un día debajo de otro (la rejilla general del
       panel se desliza de lado, y aquí no va dentro de .week-grid-wrap). */
    .week-grid--5, .week-grid--6 { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-auto-columns: auto; gap: 16px; }
    .msg--note { width: 100%; max-width: 100%; }
    .schedule { grid-template-columns: minmax(0, 1fr); }
}

/* -----------------------------------------------------------------------------
   El móvil, al detalle (revisión UX 12, 15 de octubre de 2026:
   Producto-Hyrapp/02-Auditoria/ux-ui-2026-10-09/12-movil-interno-revision.md).
   ----------------------------------------------------------------------------- */

/* M22 · Nada de una ventana se encoge: el cuerpo ya se desplaza (una tabla quedaba en una raya de 3 px). */
.modal__body > * { flex-shrink: 0; }

/* M11 · Los contadores de las pestañas, en píldora, como los del segmentado. */
.tabs__count { display: inline-block; min-width: 20px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--neutral-bg); color: var(--ink); font-size: 12px; line-height: 18px; font-weight: 600; text-align: center; }
.tabs > a[aria-current] .tabs__count { background: var(--tint); color: var(--vink); }

/* M15 · Un aviso dentro del pie pegado de una ventana (el total vivo de la propuesta) ocupa su fila. */
.edit-panel__actions > .alert { flex: 1 1 100%; margin: 0; padding: 8px 12px; }

/* M17 · Un correo automático, plegado en el hilo del lead. */
.msg__more > summary { margin-top: 6px; color: var(--vink); font-weight: 600; cursor: pointer; }
.msg__bubble:has(.msg__more[open]) .msg__preview { display: none; }

/* M16 · «Más días» solo hace falta en el móvil. */
.daypick__more { display: none; grid-column: 1 / -1; justify-content: center; align-items: center; min-height: 44px; border: 1px dashed var(--line); border-radius: var(--r-ctrl); background: var(--white); color: var(--vink); font: inherit; font-weight: 600; cursor: pointer; }

/* M14 · «Unir los dos leads»: el botón dice cuál se queda, según la opción elegida. */
.merge-otro { display: none; }
form:has(input[name="prevalece"][value="otro"]:checked) .merge-este { display: none; }
form:has(input[name="prevalece"][value="otro"]:checked) .merge-otro { display: inline; }

/* M8 · Acciones de una tarjeta de atención («Llamar»), por encima del enlace que cubre la tarjeta en la lista. */
.attention__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* M1 · En pantalla táctil, lo que se toca mide 44 px (40 los botones pequeños), como pide el anexo E y cumple la web. */
@media (max-width: 960px), (pointer: coarse) {
    .seg > a, .seg > button, .seg__opt span,
    .filter-pills > a, .filter-pills > button,
    .tabs > a, .chips a, .link-arrow,
    .hourpick > a, .hourpick > button { min-height: 44px; }
    .tabs > a, .chips a { display: inline-flex; align-items: center; }
    .btn--sm { min-height: 40px; }
    .btn--icon.btn--sm { width: 40px; }
    a.tag-chip, button.tag-chip { min-height: 36px; padding: 6px 12px; }
    /* Un enlace dentro de una frase («Asignar», «Reasignar», «Cambiar») gana zona de toque sin mover el texto. */
    .small a, .person__text a, .dl dd a, .side-dl a, .muted a { padding-block: 12px; }

    /* M10 · El tablero no se arrastra con el dedo: sin zonas de soltar («⋯ › Mover a…» va en cada tarjeta). */
    .board__drop { display: none; }
}

@media (max-width: 960px) {
    /* M19 · En la Agenda del móvil, la leyenda y cómo se agenda, al pie. */
    .agenda-help { order: 1; }

    /* M7 · La insignia de la barra de abajo, sin tapar el icono. */
    .tabbar__badge { top: -6px; left: 32px; }

    /* M26 · Un pie de ventana con tres botones deja «Cancelar» (lo hace la X de arriba): dos botones, una fila. */
    .modal__body .edit-panel__actions:has(> :nth-child(3)) > [data-modal-dismiss] { display: none; }

    /* M34 · Un formulario de página guarda sin bajar al final: su pie, pegado encima de la barra de abajo. */
    .form-foot:not(.modal__body .form-foot) {
        position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 5;
        margin-inline: -4px; padding: 10px 4px; background: var(--ground);
    }

    /* M16 · Elegir día en «Agendar demo»: cuatro por fila, más bajos y ocho días con «Más días» (interno-ventas.js). */
    .daypick { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .daypick:not(.is-open) > .is-extra { display: none; }
    .daypick:not(.is-open) > .daypick__more { display: flex; }
    .daypick > a, .daypick > button { padding: 6px 2px; }
    .daypick > a strong, .daypick > button strong { font-size: 18px; line-height: 22px; }

    /* M31 · El campo de fichero no enseña el texto del navegador cortado; el nombre elegido va en la ayuda (app.js). */
    .input[type="file"] { color: transparent; }
}

@media (max-width: 640px) {
    /* M30 · Un aviso o un suceso: la hora (o la acción) debajo del texto, no en una columna a la derecha. */
    .feed > li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; }
    .feed__icon { grid-row: 1 / span 2; }
    .feed__main { grid-column: 2; }
    .feed__time, .feed > li > :last-child:not(.feed__main):not(.feed__icon) { grid-column: 2; justify-self: start; }

    /* M27 · Cifras: el título arriba y los números en una fila. Registros: una línea por suceso. */
    .table--stack.table--compact tr { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 10px; padding: 12px 14px; }
    .table--stack.table--log tr { display: flex; flex-wrap: wrap; gap: 2px 8px; padding: 10px 14px; }
    .table--stack.table--log [data-label]::before { display: none; }
    .table--stack.table--log td { display: inline; }

    /* M29 · Los botones de contestar, a todo el ancho. */
    .reply-form .row > .btn, .reply-form .form-foot > .btn { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* =============================================================================
   Pasar lista y ficha de la sesión (20 de octubre)
   Pasar lista (panel/sessions/roll): una fila corta por persona y «Asiste» o
   «No asiste» de un toque; el contador va pegado arriba (en el móvil, abajo,
   encima de la barra, donde llega el pulgar). La ficha: una sola lista con
   filtros (data-ver) y la lista de espera debajo de su separador.
   ============================================================================= */
/* La clase destacada de «Pasar lista»: la que está en curso o la siguiente. */
.roll-next {
    display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; padding: 18px 20px;
    border-radius: var(--r-card); background: var(--violet); color: var(--white); text-decoration: none;
}
.roll-next:hover { background: var(--vink); }
.roll-next:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.roll-next__time { font: 600 28px/32px var(--font-display); font-variant-numeric: tabular-nums; }
.roll-next__main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; }
.roll-next__kicker { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--lime); }
.roll-next__main strong { font: 600 18px/24px var(--font-display); overflow-wrap: anywhere; }
.roll-next__main > span:last-child { font-size: 13px; line-height: 18px; color: var(--lavender); }
.roll-next__go { flex: none; }

.roll { display: flex; flex-direction: column; gap: 12px; }
.roll-bar {
    position: sticky; top: 12px; z-index: 6; display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap;
    padding: 12px 16px; border-radius: var(--r-card); background: var(--ink); color: var(--white);
    box-shadow: 0 10px 28px rgb(32 36 43 / 16%);
}
.roll-bar__text { display: flex; flex-direction: column; flex: 1 1 200px; min-width: 0; }
.roll-bar__count { font: 600 18px/24px var(--font-display); font-variant-numeric: tabular-nums; }
.roll-bar__detail { font-size: 13px; line-height: 18px; color: var(--side-text); font-variant-numeric: tabular-nums; }
.roll-bar__progress { flex: 1 1 160px; max-width: 320px; }
progress.roll-bar__progress, progress.roll-bar__progress::-webkit-progress-bar { background: var(--ink-line); }
progress.roll-bar__progress::-webkit-progress-value { background: var(--lime); }
progress.roll-bar__progress::-moz-progress-bar { background: var(--lime); }
.roll-bar__all { margin: 0; }
.roll-bar__error { flex: 1 1 100%; margin: 0; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--on-ink-bad); }

.roll > .roll__search { flex: none; width: 100%; max-width: 420px; }
.roll__list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); overflow: hidden; }
.roll__row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--line); box-shadow: inset 3px 0 0 transparent; transition: background-color .12s; }
.roll__row:first-child { border-top: 0; }
.roll__row[data-estado="asistida"] { background: var(--ok-bg); box-shadow: inset 3px 0 0 var(--ok); }
.roll__row[data-estado="no_presentado"] { background: var(--bad-bg); box-shadow: inset 3px 0 0 var(--bad); }
.roll__who { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.roll__name { font-size: 15px; line-height: 20px; font-weight: 600; overflow-wrap: anywhere; }
.roll__tags, .attendees__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.roll__tags .pill, .attendees__meta .pill { padding: 1px 8px; font-size: 11px; line-height: 16px; }
.roll__info { font-size: 12px; line-height: 16px; color: var(--muted); }
.roll__btns { display: flex; gap: 6px; flex: none; }
.roll__btns > form { margin: 0; }
.roll__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 14px;
    border: 1px solid var(--line); border-radius: var(--r-ctrl); background: var(--white); color: var(--ink);
    font: 600 13px/18px var(--font-ui); cursor: pointer; transition: background-color .12s, border-color .12s, color .12s;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.roll__btn:hover:not(:disabled) { border-color: var(--ctrl); }
.roll__btn:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.roll__btn--ok > svg { color: var(--ok); }
.roll__btn--bad > svg { color: var(--bad); }
.roll__btn--ok[aria-pressed="true"] { background: var(--ok); border-color: var(--ok); color: var(--white); }
.roll__btn--bad[aria-pressed="true"] { background: var(--bad); border-color: var(--bad); color: var(--white); }
.roll__btn[aria-pressed="true"] > svg { color: currentColor; }
.roll__btn:disabled { cursor: not-allowed; opacity: .4; }
.roll__row[data-busy] .roll__btn { cursor: progress; }
.roll__hint { margin: 0; }
.roll-wait__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; }
.roll-wait__list > li { display: flex; align-items: center; gap: 10px; min-height: 32px; overflow-wrap: anywhere; }
.roll-wait__pos, .attendees__pos {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px;
    border-radius: 999px; background: var(--tint); color: var(--vink); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Ficha de la sesión: la lista y sus filtros. */
.attendees { gap: 12px; }
.attendees > .seg { align-self: flex-start; }
.attendees__list { list-style: none; margin: 0; padding: 0; }
.attendees__row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.attendees__list > .attendees__row:first-child { border-top: 0; }
.attendees__who { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.attendees__name { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
a.attendees__name:hover { color: var(--vink); }
.attendees__meta { font-size: 12px; line-height: 16px; color: var(--muted); }
.attendees__state, .attendees__menu { flex: none; }
.attendees__sep { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 10px 12px; border-radius: var(--r-box); background: var(--tint); color: var(--vink); font-weight: 600; }
.attendees__sep-note { flex: 1 1 100%; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--body-2); }
.attendees__empty { display: none; margin: 0; padding: 8px 0; color: var(--muted); }
.attendees[data-ver="reservas"] [data-kinds]:not([data-kinds~="reserva"]),
.attendees[data-ver="pruebas"] [data-kinds]:not([data-kinds~="prueba"]),
.attendees[data-ver="espera"] [data-kinds]:not([data-kinds~="espera"]) { display: none; }
.attendees[data-ver="reservas"] .attendees__empty[data-only="reservas"],
.attendees[data-ver="pruebas"] .attendees__empty[data-only="pruebas"],
.attendees[data-ver="espera"] .attendees__empty[data-only="espera"] { display: block; }
.attendees__spot { display: flex; align-items: center; gap: 8px; padding: 4px 6px 8px; }
.attendees__spot .select { flex: 1 1 auto; min-width: 0; }
.menu__panel .attendees__spot .btn { flex: none; width: auto; justify-content: center; border: 1px solid var(--violet); background: var(--white); color: var(--vink); }
.menu__panel .menu__danger, .menu__panel .menu__danger > svg { color: var(--bad); }

@media (max-width: 960px) {
    /* El contador, abajo y pegado encima de la barra de pestañas. */
    .roll-bar { order: 1; top: auto; bottom: calc(76px + env(safe-area-inset-bottom)); gap: 8px 12px; padding: 10px 14px; }
    .roll__hint { order: 2; }
    .roll-bar__progress { flex: 1 1 100%; max-width: none; order: -1; height: 6px; }
    .attendees__menu > summary { width: 44px; min-height: 44px; }
    /* El nombre lleva a la ficha del socio: 44 px de toque sin mover nada. */
    a.attendees__name { padding: 12px 0; margin: -12px 0; }
}

@media (max-width: 640px) {
    .roll-next__go { flex: 1 1 100%; justify-content: center; }
    /* Solo el icono: el nombre gana sitio y el botón sigue con su texto para lectores de pantalla. */
    .roll__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .roll__btn { width: 52px; padding: 0; }
    .roll__row { padding: 8px 10px; }
    .roll-bar__all, .roll-bar__all .btn { flex: 1 1 100%; width: 100%; justify-content: center; }
    .attendees__row { gap: 10px; align-items: flex-start; }
    .attendees__row > .avatar, .attendees__row > .attendees__pos { margin-top: 2px; }
    .attendees__state { align-self: center; }
    /* Los cuatro filtros a la vista, en dos filas, sin tira que se desliza. */
    .attendees > .seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; overflow: visible; }
    .attendees > .seg > a { justify-content: space-between; white-space: normal; }
}

/* Revisión UX 14 (20 de octubre, noche): Pasar lista, la ficha de la sesión,
   la IA sin contratar y las novedades de Hyrapp. */
/* Lo que va a la vista en el escritorio y en «⋯» en el móvil (L6, E17). */
@media (min-width: 961px) { .is-narrow-only { display: none !important; } }
@media (max-width: 960px) { .is-wide-only { display: none !important; } }

/* L1: lo que ha costado no venir y «Perdonar» (zona de toque con relleno, sin mover nada). */
.roll__cost { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--bad); }
.roll__cost[hidden], .roll__waive[hidden], .roll-bar__done[hidden] { display: none; }
.roll__waive { margin: 0; }
.roll__waive .link-btn { min-height: 0; padding: 14px 0; margin: -14px 0; font-size: 12px; line-height: 16px; }
.roll__rule { margin: 0; }
/* L7: con todos marcados, «Lista pasada» y adónde ir. */
.roll-bar__done { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* L12: el estado del índice en una columna fija, para que las barras empiecen a la misma altura. */
.day-list--roll .day-list__state { flex: 0 0 220px; }

/* F2: en el móvil, una línea de resumen en lugar de las tarjetas. */
.session-summary { display: none; margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
/* F4: con «Lista de espera» elegido, el separador deja solo su nota; su número, en píldora blanca. */
.attendees[data-ver="espera"] .attendees__sep > :not(.attendees__sep-note) { display: none; }
.attendees__sep .seg__count { background: var(--white); color: var(--vink); }
/* F6: el buscador de la lista. */
.attendees > .attendees__search { width: 100%; max-width: 420px; }
.attendees > .attendees__search[hidden] { display: none; }
/* F7: en el escritorio, el «⋯» de cada fila sin borde hasta pasar por encima. */
@media (min-width: 961px) {
    .attendees__menu:not([open]) > summary.btn--ghost:not(:hover):not(:focus-visible) { border-color: transparent; }
}

/* E17: el bloque «Dónde» y, al lado, la imagen del evento en pequeño. */
.event-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; }
.event-head__img { margin: 0; display: flex; align-items: center; gap: 12px; max-width: 440px; }
.event-head__img img, .event-head__none { flex: none; width: 160px; height: 90px; border-radius: var(--r-box); object-fit: cover; background: var(--neutral-bg); }
.event-head__none { display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.event-head__img figcaption a { display: inline-block; padding: 14px 0; margin: -14px 0; font-weight: 600; color: var(--vink); }
/* E12: «Ver en el mapa» con 44 px de toque, sin mover el texto. */
.event-place .event-place__map { display: inline-block; padding: 14px 0; margin: -10px 0; }

/* I1: la tarjeta de lo que se buscaba, marcada y, en el móvil, primero. */
.card.is-sought { border-color: var(--violet); box-shadow: 0 0 0 1px var(--violet); }
@media (max-width: 960px) { .ai-offer > .is-sought { order: -1; } }
/* D5: sin IA contratada, el enlace discreto del propietario donde iba el botón. */
.ai-teaser { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; }
.ai-teaser:hover { color: var(--vink); }
.ai-teaser:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* I4: varias novedades de Hyrapp, en una sola franja que se despliega. */
.notice-group > summary { list-style: none; cursor: pointer; align-items: center; min-height: 44px; }
.notice-group > summary::-webkit-details-marker { display: none; }
.notice-group > summary > span { flex: 1 1 auto; min-width: 0; }
.notice-group__more { margin-left: 8px; font-weight: 600; color: var(--vink); }
.notice-group[open] .notice-group__more { display: none; }
.notice-group__chevron { flex: none; transition: transform .15s; }
.notice-group[open] .notice-group__chevron { transform: rotate(180deg); }
.notice-group__list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

.roll-bar__all-short { display: none; }

@media (max-width: 960px) {
    /* L6: el contador junto a «Todos (n)», con la barra fina arriba: unos 70 px en lugar de 125. */
    .roll-bar__text { flex: 1 1 0; }
    .roll-bar__count { font-size: 15px; line-height: 20px; }
    .roll-bar__detail { font-size: 12px; line-height: 16px; }
    .roll-bar__all, .roll-bar__all .btn { flex: none; width: auto; }
    .roll-bar__all-long { display: none; }
    .roll-bar__all-short { display: inline; }
}

@media (max-width: 640px) {
    .session-kpis { display: none; }
    .session-summary { display: block; }
    /* F5: el número junto al nombre del filtro y el chevron de «Añadir…» a la derecha del título. */
    .attendees > .seg > a { justify-content: center; gap: 8px; }
    .card--disclosure > summary.card__head { flex-wrap: nowrap; }
    .card--disclosure > summary.card__head > div:first-child { flex: 1 1 auto; }
    .day-list--roll .day-list__state { flex-basis: auto; }
    .event-head__img { max-width: none; }
}

/* ==========================================================================
   Eventos (20 de octubre): Clases › Eventos y su ventana (SQL 46). La fila
   con la miniatura del evento, las sesiones que chocan con la elección de
   sustituir o convivir, el enlace al mapa y el bloque «Dónde» de la ficha.
   ========================================================================== */
.event-row { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-width: 0; }
.event-row__img { flex: none; width: 72px; height: 48px; border-radius: var(--r-ctrl); object-fit: cover; background: var(--neutral-bg); }
.event-row__img--empty { display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.event-row__text { display: flex; flex-direction: column; min-width: 0; }
.event-row__text strong { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.event-row__text span { font-size: 12px; line-height: 16px; color: var(--muted); }
a.event-row:hover strong { color: var(--vink); }
.event-row__map { display: inline-block; padding: 4px 0; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--vink); }

.event-clash { display: flex; flex-direction: column; gap: 10px; }
.event-clash__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--white); }
.event-clash__item { display: flex; gap: 12px; align-items: baseline; padding: 10px 14px; }
.event-clash__item + .event-clash__item { border-top: 1px solid var(--line); }
.event-clash__time { flex: none; font: 600 14px/20px var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.event-clash__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.event-clash__text a { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.event-clash__text a:hover { color: var(--vink); }

.event-form__fixed { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink); }
.event-form__map { margin: 0; }
.event-form__map a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--vink); }

.event-place { display: flex; gap: 12px; align-items: flex-start; }
.event-place__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; line-height: 20px; }
.event-place__text strong { font-weight: 600; color: var(--ink); }
.event-place__text a { padding: 4px 0; font-weight: 600; color: var(--vink); }

/* Revisión UX 14 (20 de octubre, noche): la lista y la ventana de Eventos. */
.event-row__where { display: inline-flex; align-items: flex-start; gap: 6px; min-width: 150px; }
.event-row__where > svg { margin-top: 2px; }
.event-row__where > svg { flex: none; color: var(--vink); }
/* «Ver en el mapa» gana zona de toque de 44 px sin mover el texto (E12). */
.event-row__map { padding: 14px 0; margin: -10px 0; }
.event-row__fill { display: flex; align-items: center; gap: 10px; min-width: 140px; max-width: 220px; }
.event-row__fill .bar { min-width: 60px; }
.table tr.is-cancelled th, .table tr.is-cancelled td { color: var(--muted); }
.table tr.is-cancelled .event-row__img { opacity: .5; }

/* En el móvil, una tarjeta por evento en lugar de la tabla (E16). */
.event-cards { display: none; list-style: none; margin: 0; padding: 0; }
.event-card { display: flex; align-items: center; gap: 4px; padding: 10px 0; }
.event-card + .event-card { border-top: 1px solid var(--line); }
.event-card__main { flex: 1 1 auto; display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 44px; color: inherit; text-decoration: none; }
.event-card__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.event-card__text strong { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.event-card__text span { font-size: 12px; line-height: 16px; color: var(--muted); }
.event-card.is-cancelled .event-card__text strong { color: var(--muted); }
.event-card.is-cancelled .event-row__img { opacity: .5; }
.event-card__menu { flex: none; }
@media (max-width: 960px) {
    .event-table { display: none; }
    .event-cards { display: flex; flex-direction: column; }
}

/* La ventana: lo que choca, debajo de «Dónde», y mientras se comprueba (E2). */
.event-form__check:empty { display: none; }
.event-form__check.is-checking { opacity: .55; transition: opacity .15s; }
.event-clash__head { margin: 0; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--muted); }
/* El aviso a los socios, en el pie a la izquierda de los botones (E5). */
.edit-panel__actions > .event-form__notify { flex: 1 1 180px; margin: 0 auto 0 0; min-width: 0; }
.edit-panel__actions > .event-form__notify .switch { order: -1; }
.edit-panel__actions > .event-form__notify.toggle-row { justify-content: flex-start; }
@media (max-width: 960px) {
    .edit-panel__actions > .event-form__notify { flex-basis: 100%; }
}
/* El botón dice qué cancela (E4): si no cabe, parte en dos líneas en lugar de salirse. */
.event-form__submit { white-space: normal; text-align: center; }
/* «Imagen del evento» como título de su sección, igual que «Qué y cuándo» o «Dónde» (E20). */
.img-picks--titled > legend { font-size: 15px; line-height: 21px; font-weight: 700; color: var(--ink); }

/* «Imagen del evento» plegada (E6, P3): la elegida y «Cambiar la imagen». */
.img-picks__fold > summary { list-style: none; cursor: pointer; }
.img-picks__fold > summary::-webkit-details-marker { display: none; }
.img-picks__now { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.img-picks__thumb { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 64px; overflow: hidden; border-radius: var(--r-ctrl); border: 1px solid var(--line); background: var(--neutral-bg); color: var(--muted); }
.img-picks__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Foto de una publicación del muro, en Comunidad (4:5, como en la app). */
.community-thumb { display: block; width: 120px; aspect-ratio: 4 / 5; margin: 6px 0; overflow: hidden; border-radius: var(--r-ctrl); border: 1px solid var(--line); background: var(--neutral-bg); }
.community-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.community-thumb--sm { width: 64px; margin: 0; flex: none; }
.community-thumb--xs { width: 40px; margin: 0; flex: none; }
/* Nuevo comunicado: lo que lleva para la app y la vista previa de su tarjeta en el Inicio (SQL 71). */
.appcard-fields { min-width: 0; }
.appcard-fields__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 20px; align-items: start; }
.appcard { padding: 14px; border-radius: var(--r-box); background: var(--ground); display: flex; flex-direction: column; gap: 8px; }
.appcard__caption { margin: 0; }
.appcard__card { overflow: hidden; border-radius: 18px; border: 1px solid var(--line); background: var(--white); }
.appcard__card--important { background: var(--warn-bg); border-color: var(--warn-line); }
.appcard__img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--neutral-bg); }
.appcard__body { display: flex; flex-direction: column; gap: 4px; padding: 14px; }
.appcard__kicker { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); }
.appcard__card--important .appcard__kicker { color: var(--warn); text-transform: uppercase; letter-spacing: .04em; }
.appcard__title { font-family: var(--font-display); font-size: 16px; line-height: 22px; color: var(--ink); overflow-wrap: anywhere; }
.appcard__text { font-size: 14px; line-height: 20px; color: var(--body-2); white-space: pre-line; overflow-wrap: anywhere; }
.appcard__more { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--vink); }
.appcard__card--important .appcard__more { align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: var(--white); color: var(--warn); border: 1px solid var(--warn-line); }
@media (max-width: 960px) { .appcard-fields { min-width: 0; }
.appcard-fields__grid { grid-template-columns: minmax(0, 1fr); } }
.community-thumb--md { width: 96px; margin: 0; flex: none; }

/* Comunidad del panel (21 de octubre de 2026): el muro en rejilla, la ventana de una publicación,
   las denuncias agrupadas y los retos. */
.search-input { flex: 1 1 260px; }
.list--compact > li { gap: 10px; padding: 8px 0; }
.cwall { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 16px; align-items: start; }
.hide-mobile { display: contents; }
.cfilters { margin-top: 12px; }
.ctoolbar-end { justify-content: flex-end; margin-bottom: 12px; }
/* Las denuncias por revisar, en una línea encima de todo (revisión UX 18, C-14). */
.cstrip > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; width: 100%; }
.cstrip__link { margin-left: auto; font-weight: 600; color: var(--bad); padding: 10px 0; margin-block: -10px; }
.cpost {
    display: flex; flex-direction: column; min-width: 0; overflow: hidden; cursor: pointer;
    border: 1px solid var(--line); border-radius: var(--r-box); background: var(--white);
    transition: border-color .15s, box-shadow .15s;
}
.cpost:hover, .cpost:focus-within { border-color: var(--soft); box-shadow: 0 4px 16px rgba(32, 36, 43, .08); }
.cpost--pinned { border-color: var(--violet-line); }
.cpost--reported { border-color: var(--bad-line); box-shadow: inset 0 3px 0 var(--bad); }
.cpost__head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px; min-width: 0; }
.cpost__who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.cpost__who strong { font-size: 14px; line-height: 20px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpost__who a { color: var(--ink); text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpost__who a:hover { color: var(--vink); text-decoration: underline; }
.cpost__media { position: relative; aspect-ratio: 4 / 5; background: var(--neutral-bg); }
.cpost__flag { position: absolute; top: 10px; left: 10px; z-index: 1; box-shadow: 0 1px 4px rgba(32, 36, 43, .18); }
.cpost__flag--inline { position: static; align-self: flex-start; margin: 0 12px 8px; box-shadow: none; }
.cpost__who .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpost__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cpost__media .cpost__result { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); }
.cpost__result {
    display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px; border-radius: 999px;
    background: var(--ink); color: var(--white); font-size: 12px; line-height: 16px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cpost__result strong { color: var(--lime); font-family: var(--font-display); font-size: 14px; flex: none; }
.cpost__result > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpost__result--inline { align-self: flex-start; max-width: 100%; margin: 0; }
.cpost__result--block { align-self: flex-start; margin: 0 12px 8px; }
.cpost-detail__body .cpost__result--block { margin: 0 0 10px; }
.cpost__text {
    margin: 10px 12px 0; font-size: 14px; line-height: 20px; color: var(--body-2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.cpost__text--big {
    flex: 1 1 auto; margin: 0 12px; padding: 14px; border-radius: var(--r-ctrl); background: var(--tint);
    font-size: 15px; line-height: 22px; color: var(--ink); -webkit-line-clamp: 6; min-height: 96px;
}
.cpost__hidden { margin: 10px 12px 0; padding: 6px 10px; border-radius: var(--r-ctrl); background: var(--warn-bg); color: var(--warn); }
.cpost__foot { display: flex; align-items: center; gap: 14px; margin-top: auto; padding: 12px; }
.cpost__foot > span { display: inline-flex; align-items: center; gap: 4px; }

.cpost-detail { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 20px; align-items: start; }
.cpost-detail:not(:has(.cpost-detail__media)) { grid-template-columns: minmax(0, 1fr); }
.cpost-detail__media { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-box); background: var(--neutral-bg); }
.cpost-detail__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cpost-detail__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cpost-detail__body .cpost__head { padding: 0; }
.cpost-detail__body p { margin: 0; overflow-wrap: anywhere; }
.cpost-detail__report { margin-bottom: 16px; }
.cpost-detail__report .creport__reasons { margin: 4px 0 6px; }
.cpost-detail__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ccomment__actions { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.ccomment--reported .ccomment__main { border-color: var(--bad-line); background: var(--bad-bg); }
.ccomment__flag { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px !important; font-size: 13px; color: var(--bad); }
.cphoto-now { display: flex; align-items: center; gap: 14px; }
.ccomment-reply { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ccomment-reply .textarea { width: 100%; min-height: 64px; }
/* El foco va a la ventana al abrirla: sin el marco cuadrado del navegador (revisión UX 18, C-27). */
.modal:focus, .modal:focus-visible { outline: none; }
.ccomments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ccomment { display: flex; align-items: flex-start; gap: 10px; }
.ccomment__main { flex: 1 1 auto; min-width: 0; padding: 8px 12px; border-radius: var(--r-box); background: var(--row-alt); border: 1px solid var(--line); }
.ccomment__main p { font-size: 14px; line-height: 20px; color: var(--ink); }
.ccomment--hidden .ccomment__main { background: var(--neutral-bg); }
.ccomment--hidden .ccomment__main p { color: var(--muted); text-decoration: line-through; }

.creports { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.creport { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-box); cursor: pointer; }
.creport:hover { border-color: var(--soft); }
.creport__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.creport__quote { margin: 0; padding: 8px 12px; border-left: 3px solid var(--line); color: var(--body-2); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.creport__reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.creport__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.creport__open { margin-left: auto; font-weight: 600; color: var(--vink); padding: 10px 0; }
.creport-inline { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.creport-inline .alert { width: 100%; }

.cchallenge { cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.cchallenge:hover { border-color: var(--soft); }
.cchallenge__name { margin: 4px 0 0; font-family: var(--font-display); font-size: 17px; line-height: 24px; color: var(--ink); }
.cchallenge__name a { color: inherit; text-decoration: none; }
.cchallenge__name a:hover { color: var(--vink); }
.cchallenge__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; }
.rank { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: var(--tint); color: var(--vink); font-weight: 700; font-size: 13px; }

@media (max-width: 960px) {
    .cwall { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
    .cpost__foot { gap: 10px; }
    .cpost__open { display: none; }
    .cpost__head { padding: 10px 10px 8px; }
    .cpost__text--big { -webkit-line-clamp: 4; min-height: 0; }
    .cpost-detail { grid-template-columns: minmax(0, 1fr); }
    .creport { padding: 12px; }
    .creport .community-thumb--md { width: 64px; }
    .hide-mobile { display: none; }
    .cpost-detail__media { max-height: 60vh; aspect-ratio: auto; }
    .cpost-detail__media img { max-height: 60vh; object-fit: contain; background: var(--ink); }
    /* En el móvil, el muro en la primera pantalla: sin las cifras, que se miran en el ordenador (revisión UX 18, C-07). */
    .cstats, .cstrip__more { display: none; }
    .cfilters { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
    .cfilters a { flex: none; }
}
.img-picks__now-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.img-picks__now-title { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.img-picks__change { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--vink); }
.img-picks__change::after {
    content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px); margin-left: 4px;
}
.img-picks__fold[open] .img-picks__change::after { transform: rotate(-135deg) translateY(-1px); }
.img-picks__body { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
/* Horario › Nueva sesión suelta: el enlace a Eventos, con zona de toque de 44 px (E1). */
.event-link { padding: 14px 0; margin: -10px 0; font-weight: 600; color: var(--vink); }

/* =============================================================================
   Roles y permisos (20 de octubre). Equipo › Roles y permisos: la lista de
   roles (.roles) y los permisos de un rol (.perm, .perm-nav, .savebar), del
   prototipo 14 (recorrido 7) con su revisión 15 (GS-70: en el móvil, quién lo
   tiene en su línea y los botones debajo, a todo el ancho).
   ============================================================================= */
.roles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.roles__item { display: grid; grid-template-columns: minmax(160px, 220px) minmax(0, 1fr) minmax(140px, auto) auto; gap: 8px 20px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.roles__item:first-child { border-top: 0; padding-top: 0; }
.roles__item--plain { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.roles__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.roles__name a { color: inherit; text-decoration: none; padding: 11px 0; margin: -11px 0; }
.roles__name a:hover strong { color: var(--vink); }
.roles__name strong { font: 600 15px/22px var(--font-display); color: var(--ink); }
.roles__sum { margin: 0; min-width: 0; }
.roles__who { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
/* Las caras sin montarse: con iniciales anchas («AN», «MS») se cortaban (GS-70). */
.roles__faces { display: inline-flex; gap: 4px; }
.roles__acts { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
@media (max-width: 960px) {
    .roles__item { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .roles__acts { justify-content: flex-start; flex-wrap: wrap; }
    .roles__acts .btn { min-height: 44px; }
    .roles__acts > .btn { flex: 1 1 auto; justify-content: center; }
}

/* Quién tiene un rol, en su página: personas en fila, que con once entrenadores no empujen los permisos. */
.role-holders { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.role-holders > li { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: 14px; color: var(--ink); }
.perm { display: flex; flex-direction: column; margin: 0; padding: 0; }
.perm > li { list-style: none; padding: 12px 0; border-top: 1px solid var(--line); }
.perm > li:first-child { border-top: 0; padding-top: 0; }
.perm > li > .toggle-row { align-items: flex-start; }
.perm__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.perm__text strong { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.perm__text > span { font-size: 13px; line-height: 18px; color: var(--body-2); }
.perm__text .title-row { gap: 8px; }
.perm__also { color: var(--vink); font-weight: 600; }
.perm .switch { margin-top: 2px; }
.perm__fixed { font-size: 13px; line-height: 20px; color: var(--muted); white-space: nowrap; }
.perm__note { margin: 0 0 12px; color: var(--muted); }
.perm-tools { display: flex; flex-direction: column; gap: 12px; }
.perm-tools > .search--local { flex: 0 0 auto; }
.perm-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.perm-nav a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; }
.perm-nav a:hover { border-color: var(--violet); color: var(--vink); }
.perm-nav a span { color: var(--muted); font-weight: 500; }
.perm-form .card { scroll-margin-top: 16px; }
/* Guardar siempre a la vista, pegado abajo (GS-72: es el único «Guardar»). */
.savebar { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: var(--r-card); background: var(--ink); color: var(--white); }
.savebar .small { color: var(--soft-text); }
@media (max-width: 960px) {
    .perm-nav { display: none; }
    .perm .switch { margin-top: 10px; }
    .savebar { bottom: 76px; }
    .savebar .btn { min-height: 44px; }
}

/* =============================================================================
   Gestión de socios (20 de octubre)
   La ficha del socio en el día a día (prototipo UX-Hyrapp/14-Prototipo-gestion-
   socios, con la revisión UX 15): «Su plan» (.plan), el contador de sesiones
   (.qty), la línea de resultado de las ventanas (.result), las reservas y los
   recibos con sus acciones en cada fila (.bk) y «Nueva reserva» (.day-list--book).
   Solo variables y medidas del sistema.
   ============================================================================= */
.plans { display: flex; flex-direction: column; gap: 12px; }
.plan { display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--white); }
.plan--warn { border-color: var(--warn-line); }
.plan--info { border-color: var(--info-line); }
.plan--done { background: var(--row-alt); }
.plan__head { display: flex; align-items: flex-start; gap: 12px; }
.plan__name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.plan__name h3 { font: 600 16px/22px var(--font-display); color: var(--ink); margin: 0; }
.plan__note { margin: 0; font-size: 13px; line-height: 18px; color: var(--body-2); }
.plan__rows { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.plan__row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 16px; align-items: baseline; }
.plan__row dt { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); }
.plan__row dd { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.plan__row dd > .bar { max-width: 420px; }
.plan__left { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.plan__big { font: 700 20px/26px var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.plan__big--warn { color: var(--warn); }
.plan__pay strong { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ink); }
.plan__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.plan__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 12px; border-top: 1px solid var(--line); }
.plan__actions > form { margin: 0; }
.plan__actions .menu__panel { right: auto; left: 0; }
.plans__ended { margin-top: 4px; }
.plans__ended > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 600; color: var(--vink); }
.plans__ended > summary::-webkit-details-marker { display: none; }
.plans__ended[open] > summary { margin-bottom: 8px; }

/* Ventanas: cuántas, el periodo, el motivo y una sola línea de resultado (P3). */
.qty { display: inline-flex; align-items: center; gap: 8px; }
.qty .btn { width: 44px; min-height: 44px; padding: 0; justify-content: center; }
.qty__input { width: 72px; text-align: center; font: 700 20px/28px var(--font-display); font-variant-numeric: tabular-nums; }
.result { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-box); background: var(--tint); }
.result[hidden], .result__text > [hidden] { display: none; }
.result > svg { color: var(--vink); flex: none; margin-top: 2px; }
.result__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.result__text strong { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.result__text span { font-size: 13px; line-height: 18px; color: var(--body-2); }
.result__text span:empty { display: none; }
.choice-list { display: flex; flex-direction: column; gap: 8px; }
.choice-list__group { margin: 6px 0 0; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); }
.choice-list__group:first-child { margin-top: 0; }
a.level-card { color: inherit; text-decoration: none; }
.level-card__sub b { color: var(--ink); font-weight: 600; }
.seg--wrap { flex-wrap: wrap; }
.form__row > [data-show-if][hidden], .form__grid > [data-show-if][hidden], .check-pill[hidden] { display: none; }

/* Reservas y recibos de la ficha: una fila por reserva, con sus acciones (GS-28, P8). */
.bk { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bk > li { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--line); }
.bk > li:first-child { border-top: 0; padding-top: 0; }
.bk__main { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bk__main strong { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.bk__main span { font-size: 12px; line-height: 18px; color: var(--muted); }
.bk__pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bk__amount { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 84px; }
.bk__amount strong { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.bk__acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bk__acts > form { margin: 0; }
.bk > li.is-hl { background: var(--tint); margin: 0 -12px; padding: 12px; border-radius: var(--r-box); border-top-color: transparent; }
.mini-stats--3 { margin-bottom: 12px; }

/* «Nueva reserva»: columnas fijas y alineadas fila a fila, digan lo que digan la
   etiqueta y el botón (petición del promotor, 20 de octubre): hora, sesión, barra
   del mismo ancho, etiqueta y botón a la derecha; la plaza extra, discreta debajo (GS-35). */
.day-list--book > li { display: grid; grid-template-columns: 52px minmax(160px, 1fr) 190px 210px 190px; grid-template-areas: "time main fill state acts"; align-items: center; gap: 6px 16px; }
.day-list--book .day-list__time { grid-area: time; width: auto; }
.day-list--book .day-list__main { grid-area: main; min-width: 0; }
.day-list--book .day-list__fill { grid-area: fill; width: 100%; min-width: 0; }
.day-list--book .day-list__state { grid-area: state; justify-self: end; text-align: right; }
.day-list--book .day-list__acts { grid-area: acts; }
.day-list__acts { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.day-list__acts > form { margin: 0; }
.day-list__acts > form > .btn, .day-list__acts > .btn { width: 100%; justify-content: center; }
.day-list__extra { align-self: center; font-size: 12px; line-height: 16px; padding: 14px 0; margin: -14px 0; }
/* Sin sitio para cinco columnas (portátil estrecho y móvil): la misma alineación en dos líneas. */
@media (max-width: 1279px) {
    .day-list--book > li { grid-template-columns: 48px minmax(0, 1fr) 168px; grid-template-areas: "time main state" ". fill acts"; }
}

@media (max-width: 960px) {
    .plan { padding: 14px; }
    .plan__row { grid-template-columns: 1fr; }
    .plan__big { font-size: 22px; line-height: 28px; }
    .plan__row dd > .bar { max-width: none; }
    /* Las acciones, en una rejilla de dos columnas de botones de 44 px (5.4). */
    .plan__actions { display: grid; grid-template-columns: 1fr 1fr; }
    .plan__actions > .btn, .plan__actions > form > .btn, .plan__actions > .menu > summary { width: 100%; min-height: 44px; justify-content: center; }
    .plan__actions > .menu { width: 100%; }
    /* La cabecera de la ficha: lo que toca primero, reservar y «Más», en una fila. */
    .profile-head__actions { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; }
    .profile-head__actions > .btn, .profile-head__actions > form > .btn { width: 100%; min-height: 44px; justify-content: center; }
    .profile-head__actions > .menu > summary { width: 44px; min-height: 44px; }
    /* Los días, en rejilla y sin deslizar (GS-37). */
    .seg.seg--days, .seg.seg--cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; width: 100%; }
    .seg.seg--cells { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .seg.seg--days > a, .seg.seg--cells > a { justify-content: center; white-space: normal; min-height: 44px; }
    /* El nombre de la sesión en la lista de reservas: 44 px de toque sin mover la línea. */
    .bk__main a { display: inline-block; padding: 14px 0; margin: -14px 0; }
    .seg.seg--wrap { overflow: visible; }
    .seg.seg--wrap .seg__opt { flex: 1 1 100%; }
    .seg.seg--wrap .seg__opt span { width: 100%; justify-content: flex-start; text-align: left; }
    .bk__acts { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
    .bk__acts .btn, .bk__acts > .menu > summary { min-height: 44px; justify-content: center; width: 100%; }
    .bk__acts > .menu { width: 100%; }
    .bk__amount { align-items: flex-start; }
    /* En una sesión llena, el botón va en su columna y no tapa el nombre (GS-36). */
    .day-list--book > li { grid-template-columns: 44px minmax(0, 1fr) 148px; grid-template-areas: "time main state" "fill fill acts"; gap: 8px 12px; }
    .day-list--book .day-list__acts .btn { min-height: 44px; }
}

/* =============================================================================
   Revisión 16 (21 de octubre)
   La gestión de los socios y los roles, ya programados, con la revisión UX 16
   (Producto-Hyrapp/02-Auditoria/ux-ui-2026-10-09/16-gestion-socios-y-roles-
   programado-revision.md). Solo variables y medidas del sistema.
   ============================================================================= */
/* Cambiar de tarifa (t01, F-02): una línea por tarifa. */
.choice-list--compact { gap: 6px; }
.level-card--row { align-items: center; padding: 10px 14px; }
.level-card--row input { margin: 0; }
.level-card--row .level-card__head { justify-content: flex-start; flex-wrap: nowrap; gap: 4px 10px; }
.level-card--row .level-card__head > b:first-child { min-width: 0; }
.level-card--row .level-card__head > :last-child { margin-left: auto; flex: none; }
.level-card--row .level-card__head .small { white-space: nowrap; }
.form__unit { font-weight: 600; color: var(--body-2); }

/* Lo destructivo de un menú, en rojo y con una raya antes (N-04). */
.menu__panel .menu__sep { position: relative; margin-top: 7px; }
.menu__panel .menu__sep::before { content: ""; position: absolute; left: 8px; right: 8px; top: -4px; border-top: 1px solid var(--line); }
.menu__panel > form.menu__sep::before { top: -4px; }

/* Historial del plan: el detalle puede ser largo. */
.feed__main span { overflow-wrap: anywhere; }
/* Nueva reserva (P-07, P-08): cada fila con sus plazas, alineadas por la izquierda, y
   «Plaza extra» al lado de la píldora, sin hacer la fila más alta. */
.day-list--book .day-list__state { justify-self: stretch; display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; text-align: left; }
.day-list--book .day-list__extra { margin: 0; padding: 0; font-size: 13px; line-height: 18px; align-self: center; }
@media (max-width: 960px), (pointer: coarse) {
    .day-list--book .day-list__extra { display: inline-flex; align-items: center; min-height: 44px; }
}
/* Roles y permisos (F-15, F-16, P-23): la barra de guardar solo con cambios; las filas de
   «Nuevo rol» en una línea, con el resumen recortado; la cifra junto al nombre del rol. */
.savebar[hidden] { display: none; }
.level-card__clip { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.level-card--row .level-card__head > .level-card__clip { margin-left: 0; }
.roles__name .title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Congelar (F-05): lo que pagará, una línea por periodo. */
.result__text [data-result-money] { white-space: pre-line; }

@media (max-width: 960px) {
    /* N-02 · En el móvil no se desliza nada a lo ancho (decisión del promotor): pestañas,
       fichas de estado, segmentados y apartados de la sección parten en líneas. */
    .tabs, .chips { flex-wrap: wrap; overflow: visible; row-gap: 0; }
    .tabs > a, .chips a { margin-right: 16px; }
    .seg { flex-wrap: wrap; overflow: visible; }
    .seg > a, .seg > button { flex: 1 1 auto; justify-content: center; white-space: normal; text-align: center; }
    .subnav { flex-wrap: wrap; overflow: visible; margin: -4px 0 0; padding: 4px 0; }

    /* N-03 · El «Más» de la tarjeta del plan y de un recibo, a todo el ancho como las demás hojas. */
    .plan__actions .menu__panel, .bk__acts .menu__panel { left: 0; right: 0; }

    /* P-18 · La tarjeta del plan: la píldora debajo del nombre, y el nombre con todo el ancho. */
    .plan__head { flex-wrap: wrap; }
    .plan__name { flex: 1 1 calc(100% - 56px); }
    .plan__head > .badge { margin-left: 52px; }

    /* F-15 · La barra de guardar en una fila: «5 cambios · Guardar» (Descartar, con el enlace del rol). */
    .savebar { flex-wrap: nowrap; padding: 10px 12px; }
    .savebar .savebar__discard { display: none; }
    /* P-23 · Roles: «Ver y cambiar» a todo el ancho; «Duplicar» o «⋯», al lado. */
    .roles__acts { display: grid; grid-template-columns: minmax(0, 1fr) auto; }

    /* Lista de socios en el móvil, sin casillas (B1, H-10): las acciones en grupo van sobre el filtro. */
    .table--members.table--stack td.col-check, .table--members.table--stack th.col-check { display: none; }

    /* G · La línea de resultado de una ventana, a la vista encima de los botones. */
    .modal__body .form > .result { position: sticky; bottom: 49px; z-index: 1; box-shadow: 0 -8px 16px rgb(255 255 255 / 90%); }
}

/* ─────────── Lista de espera y anulación (20 de octubre) ─────────── */
/* «¿Le haces sitio a alguien? Plaza extra» en la cabecera de una clase llena (P-10). */
.attendees__extra { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: 13px; line-height: 18px; color: var(--body-2); }
/* La plaza ofrecida a la lista (tramo tardío), debajo del separador de la espera. */
.attendees__offer { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 0 4px; }
/* Plaza extra desde la clase: motivo y botón en la fila. */
.extra-form .select { width: auto; min-width: 0; }
/* «Devolver la sesión» en Pasar lista es ya un enlace a su ventana (P-11). */
.link-btn.roll__waive { min-height: 0; padding: 14px 0; margin: -14px 0; font-size: 12px; line-height: 16px; }
/* Sesiones de primera hora en las reglas del formato. */
.early-rule { margin: 0; padding: 0; border: 0; }
.early-rule .grid { align-items: end; }
/* «Dar plaza extra» en el menú de quien espera: el motivo a todo el ancho y el botón debajo. */
.attendees__give { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.attendees__give .select { margin: 0 8px; width: calc(100% - 16px); }

/* ─────────── Lista de socios B1 (21 de octubre) ─────────── */
/* La barra de acciones en grupo: arriba de la tabla y pegada al deslizar (H-02). */
.members-bar { position: sticky; top: 12px; z-index: 6; box-shadow: 0 10px 28px rgb(32 36 43 / 12%); }
.members-bar .toned__text p { margin: 0; }
.members-bar .link-btn { min-height: 0; padding: 12px 0; margin: -12px 0; font-size: 14px; }
/* «17 socios con estos filtros» y, en el móvil, «Acciones con estos 17» al lado. */
.members-result { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.members-result > p { margin: 0; }
.members-result .link-arrow { min-height: 44px; }
/* La hoja «Acciones con estos N» del móvil (L2). */
.bulk-sheet { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-box); overflow: hidden; }
.bulk-sheet > a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; }
.bulk-sheet > a + a { border-top: 1px solid var(--line); }
.bulk-sheet > a > svg { color: var(--vink); flex: none; }
.bulk-sheet > a:hover { background: var(--tint); }
/* Las cuotas que cambian al poner o quitar una etiqueta con descuento (H-03). */
.bulk-changes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; font-size: 14px; line-height: 20px; }
.bulk-changes > li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.bulk-changes > li:last-child { border-bottom: 0; }
.bulk-changes > li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
/* «A quién llega» (el x-bulk-reach del análisis; prototipo 16): a quién sí, a quién no y por qué. */
.reach { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--r-box); overflow: hidden; }
.reach__col { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.reach__col + .reach__col { border-left: 1px solid var(--line); background: var(--row-alt); }
.reach__kicker { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); }
.reach__n { font: 700 24px/30px var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.reach__n small { font: 500 14px/20px var(--font-ui); color: var(--muted); margin-left: 4px; }
.reach__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 18px; color: var(--body-2); }
.reach__list li { display: flex; gap: 8px; justify-content: space-between; }
.reach__list b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
/* «Qué va a pasar», en una lista corta. */
.happens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 20px; color: var(--ink); }
.happens li { display: flex; gap: 10px; align-items: flex-start; }
.happens svg { color: var(--vink); flex: none; margin-top: 1px; }
.happens .happens__warn > svg { color: var(--warn); }
@media (max-width: 960px) {
    .reach { grid-template-columns: 1fr; }
    .reach__col + .reach__col { border-left: 0; border-top: 1px solid var(--line); }
}

/* ─────────── Acciones en grupo A (21 de octubre) ─────────── */
/* Base común de los lotes (L8, SQL 52; prototipo 16). Cuatro franjas, cada una con su significado:
   verde (.undo), hecho y se puede deshacer, con la cuenta atrás; naranja (.undo--pending), deshecho o
   pendiente; violeta (.undo--sent), enviado; azul (.undo--sending), en cola o enviándose. */
.reach__list svg { color: var(--vink); flex: none; }
.reach__list span { display: inline-flex; align-items: center; gap: 6px; }
.reach__link { font-size: 13px; font-weight: 600; padding: 12px 0; margin: -12px 0; }
/* Lo que Meta cobra por los WhatsApp, bajo los canales de «A quién llega» (D-3). */
.reach__cost { display: inline-flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 16px; color: var(--warn); font-weight: 600; }
.reach__cost svg { flex: none; margin-top: 1px; }
/* La franja de después, con «Deshacer» y su cuenta atrás. */
.undo { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 12px 16px; border-radius: var(--r-box); background: var(--ok-bg); border: 1px solid var(--ok-line); }
.undo > svg { color: var(--ok); flex: none; }
.undo__text { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.undo__text strong { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.undo__text span { font-size: 13px; line-height: 18px; color: var(--body-2); }
.undo__acts { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.countdown { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--white); border: 1px solid var(--ok-line); font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.countdown svg { color: var(--ok); }
.countdown[hidden] { display: none; }
.undo--pending { background: var(--warn-bg); border-color: var(--warn-line); }
.undo--pending > svg { color: var(--warn); }
.undo--sent { background: var(--tint); border-color: var(--violet-line); }
.undo--sent > svg { color: var(--vink); }
.undo--sending { background: var(--info-bg); border-color: var(--info-line); }
.undo--sending > svg { color: var(--info); }
.undo--compact { padding: 8px 12px; gap: 10px; flex-wrap: nowrap; }
.undo--compact .undo__text { flex: 1 1 auto; }
.undo--compact .undo__text strong { font-size: 13px; line-height: 18px; }
.undo__link { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-size: 13px; font-weight: 600; color: var(--vink); white-space: nowrap; }
@media (min-width: 961px) { .is-narrow-flex { display: none !important; } }
@media (max-width: 960px) { .is-wide-flex { display: none !important; } }
/* El progreso de un lote en cola. */
.progress { display: flex; flex-direction: column; gap: 6px; min-width: 160px; }
.progress span { font-size: 12px; line-height: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Antes → después. */
.diff { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.diff__old { color: var(--muted); }
.diff svg { color: var(--muted); flex: none; }
.diff__new { color: var(--ink); font-weight: 600; }
/* «Qué se hizo», en una franja de datos encima de la tabla del lote (H-29). */
.lot-meta { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 12px 16px; border-radius: var(--r-box); background: var(--white); border: 1px solid var(--line); font-size: 14px; line-height: 20px; }
.lot-meta div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lot-meta span { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); }
.lot-meta b { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
/* El apunte del historial de un socio que viene de un lote. */
.lot-ref { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--vink); padding: 12px 0; margin: -12px 0; }
/* La doble confirmación de un envío: lo que sale, a quién y por dónde (x-send-confirm). */
.confirm { display: flex; flex-direction: column; gap: 14px; }
.confirm[hidden], [data-send-step][hidden], .confirm__msg[hidden] { display: none; }
.confirm__q { font: 600 18px/24px var(--font-display); color: var(--ink); margin: 0; }
.confirm__q:focus { outline: none; }
.confirm__msg { padding: 14px 16px; border-radius: var(--r-box); background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--violet); display: flex; flex-direction: column; gap: 6px; }
.confirm__msg b { font-size: 15px; line-height: 21px; font-weight: 600; color: var(--ink); }
.confirm__msg p { font-size: 14px; line-height: 20px; color: var(--body-2); margin: 0; overflow-wrap: anywhere; }
.confirm__msg [data-fill] { white-space: pre-line; }
.confirm__msg small { font-size: 12px; line-height: 16px; color: var(--muted); }
.confirm__who { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; line-height: 18px; color: var(--body-2); }
.confirm__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.confirm__fact { padding: 10px 12px; border-radius: var(--r-ctrl); background: var(--ground); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.confirm__fact span { font-size: 12px; line-height: 16px; color: var(--muted); font-weight: 600; }
.confirm__fact b { font-size: 15px; line-height: 21px; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.steps-mini { display: flex; gap: 8px; align-items: center; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); }
.steps-mini b { color: var(--vink); }
/* Una casilla de responsabilidad sin marcar deja el botón apagado (H-01). */
.check-hint { font-size: 12px; line-height: 16px; color: var(--muted); }
.check-hint[hidden] { display: none; }
@media (max-width: 960px) {
    .confirm__facts { grid-template-columns: 1fr 1fr; }
    .progress { min-width: 0; }
}

/* ─────────── Acciones en grupo C (21 de octubre) ─────────── */
/* Dejar de vender una tarifa y compensar un cierre (prototipo 16, recorridos 3 y 6). */
/* Opciones grandes de una ventana, ninguna marcada (H-35); la que no se puede, en gris (D-4). */
.options { display: flex; flex-direction: column; gap: 10px; }
.options .level-card h3 { font-size: 15px; line-height: 21px; font-weight: 600; color: var(--ink); margin: 0; }
.options .level-card p { font-size: 13px; line-height: 19px; color: var(--body-2); margin: 4px 0 0; }
.level-card.is-off { cursor: not-allowed; background: var(--row-alt); border-style: dashed; }
.level-card.is-off h3 { color: var(--muted); }
/* Lo que paga hoy y lo que pagará, agrupado (H-41), y lo de cada tipo de tarifa en un cierre. */
.mini-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 18px; }
.mini-table th, .mini-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.mini-table thead th { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--row-alt); }
.mini-table td.num, .mini-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini-table tr.is-out td { color: var(--muted); }
.scroll-box { max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-box); margin-top: 8px; }
/* Los «⋯» de Tarifas no se cortan con el borde de la tabla (H-40). */
.table-wrap--menus { overflow: visible; }
@media (max-width: 960px) {
    .mini-table th, .mini-table td { padding: 8px 6px; }
    .mini-table td.num, .mini-table th.num { white-space: normal; }
    /* Un importe no se parte («70,00» y «€» en dos líneas). */
    .mini-table td.num.nowrap, .mini-table th.num.nowrap { white-space: nowrap; }
    .options .level-card { min-height: 44px; }
}
/* ─────────── Acciones en grupo D (21 de octubre): cola, firmas, entrenador, grupos guardados y etiquetas ─────────── */
.result--warn { background: var(--warn-bg); }
.result--warn > svg { color: var(--warn); }
.menu__panel hr { border: 0; border-top: 1px solid var(--line); margin: 4px 6px; }
.menu__label { display: block; padding: 8px 10px 4px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); }
.menu__note { display: block; padding: 6px 10px; font-size: 13px; line-height: 18px; color: var(--muted); }
.menu__panel a[aria-current="true"] { background: var(--tint); color: var(--vink); }
.groups-menu > summary { gap: 8px; }
.groups-menu__label { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.groups-menu__panel { right: 0; left: auto; max-height: 70vh; overflow-y: auto; }
.queue-strip { display: contents; }
.tags-table .col-menu { width: 56px; text-align: right; }
.sign-doc { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.sign-doc__lead { margin: 0; font-size: 15px; line-height: 23px; color: var(--body-2); white-space: pre-line; }
.sign-accept { display: flex; flex-direction: column; gap: 12px; border: 0; padding: 0; margin: 0; }
.sign-decline { margin-top: 8px; }
.sign-decline > form { margin-top: 12px; }
@media (max-width: 960px) {
    .groups-menu__label { max-width: 160px; }
    .tags-table .col-menu .sq-btn--sm { width: 44px; height: 44px; }
}

/* =============================================================================
   Acciones en grupo B (21 de octubre de 2026): escribir a un grupo (tanda B3).
   La nota «Es un aviso del servicio», «Programarlo…» plegado y «Lo que se envió»
   del detalle de un envío (prototipo 16, c01, c07 y d07).
   ============================================================================= */
.result--info { background: var(--info-bg); }
.result--info > svg { color: var(--info); }
.result--info a { color: var(--info); font-weight: 600; }
.more-options { border: 1px solid var(--line); border-radius: var(--r-box); padding: 0 14px; }
.more-options > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--vink); }
.more-options[open] { padding-bottom: 14px; }
.sent-quote { padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--violet); border-radius: var(--r-box); display: flex; flex-direction: column; gap: 6px; }
.sent-quote strong { font-size: 15px; line-height: 21px; color: var(--ink); }
.sent-quote p { margin: 0; font-size: 14px; line-height: 20px; color: var(--body-2); overflow-wrap: anywhere; }
.sent-quote small { font-size: 12px; line-height: 16px; color: var(--muted); }
/* La lista de socios con B2 y B3: etiquetas en su columna, canales, filtros activos y la hoja del móvil. */
.table--members .col-tags { width: 1%; min-width: 150px; }
.tag-line { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; }
.pill--tag { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: none; font-size: 11px; padding-left: 7px; padding-right: 7px; }
.tag-more { flex: none; font-size: 11px; line-height: 20px; font-weight: 600; color: var(--muted); padding: 0 6px; border-radius: 999px; background: var(--row-alt); cursor: default; }
.chan { display: inline-flex; align-items: center; gap: 8px; color: var(--vink); }
.chan svg.is-off { color: var(--muted); opacity: .35; }
.chan__offer { width: 8px; height: 8px; border-radius: 999px; background: var(--lime); box-shadow: 0 0 0 1px var(--lime-ink); display: inline-block; }
.chan__offer.is-off { background: transparent; box-shadow: 0 0 0 1px var(--line); }
.legend-inline { display: inline-flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; font-size: 12px; line-height: 16px; color: var(--muted); }
.legend-inline span { display: inline-flex; align-items: center; gap: 4px; }
.legend-inline svg { color: var(--vink); }
.visit--far { color: var(--warn); font-weight: 600; }
.active-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; line-height: 20px; color: var(--body-2); }
.active-filters strong { color: var(--ink); font-weight: 600; }
.active-filters .tag-chip { font-size: 13px; line-height: 20px; padding: 3px 4px 3px 10px; }
.active-filters .tag-chip b { font-weight: 500; color: var(--muted); padding-right: 4px; }
.active-filters .tag__x { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.mobile-row { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; }
.mobile-row .btn { min-height: 44px; flex: 1 1 auto; }
.menu__panel button.is-off, .menu__panel button.is-off:hover { color: var(--muted); background: transparent; cursor: not-allowed; }
.menu__panel button.is-off > svg { color: var(--muted); }
.menu__panel hr { border: 0; border-top: 1px solid var(--line); margin: 4px 6px; }
.bulk-sheet--sub > a > span { display: flex; flex-direction: column; min-width: 0; padding: 8px 0; }
.bulk-sheet--sub small { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--muted); }
@media (max-width: 960px) {
    /* En la tarjeta del móvil, las etiquetas pueden ir a dos líneas. */
    .table--members .col-tags { max-width: none; min-width: 0; width: auto; }
    .tag-line { flex-wrap: wrap; max-width: none; }
    .page-head--lista > div > p { display: none; }
}
/* Impagos con casillas (F-2): en el móvil, sin casillas, como Socios (L2). */
@media (max-width: 960px) {
    .table--bulk.table--stack td.col-check, .table--bulk.table--stack th.col-check { display: none; }
}
/* En el móvil, el título de un envío (Comunicados, Campañas, Comunicaciones de la ficha) se toca entero (44 px). */
@media (max-width: 960px) {
    .table--sends th[scope="row"] > a, .table--sends td .small > a { display: inline-block; padding: 12px 0; }
}

/* ── Entrenamiento T1 y T2 (21 de octubre de 2026; prototipo 17, fuente/proto.css) ─────────────
   La semana por disciplinas (.wk; en el móvil, .wk-alt con la fila de días), la ventana de
   publicar (.publist), las clases del día con su propio entreno (.sesslist) y lo que comparten
   (.vlist, .linkbtn, .quote). */
.weeknav { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.linkbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0; border: 0; background: none; color: var(--vink); font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; }
.linkbtn:hover { color: var(--ink); }
.vlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vlist > li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13px; line-height: 18px; }
.vlist > li > svg { margin-top: 1px; color: var(--ok); }
.vlist > li.is-off > svg { color: var(--ctrl); }
.vlist b { display: block; font-size: 14px; line-height: 20px; font-weight: 600; }
.vlist span { color: var(--muted); }
.quote { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-left: 3px solid var(--soft); background: var(--row-alt); border-radius: 0 var(--r-ctrl) var(--r-ctrl) 0; font-size: 14px; line-height: 20px; }
.tag-check.is-off { color: var(--muted); background: var(--row-alt); cursor: default; padding-left: 12px; }

/* La rejilla: una fila por disciplina y tantas columnas como días con clase. */
.wk { display: grid; gap: 8px; grid-template-columns: minmax(150px, 190px) repeat(5, minmax(0, 1fr)); align-items: stretch; }
.wk--1 { grid-template-columns: minmax(150px, 190px) minmax(0, 1fr); }
.wk--2 { grid-template-columns: minmax(150px, 190px) repeat(2, minmax(0, 1fr)); }
.wk--3 { grid-template-columns: minmax(150px, 190px) repeat(3, minmax(0, 1fr)); }
.wk--4 { grid-template-columns: minmax(150px, 190px) repeat(4, minmax(0, 1fr)); }
.wk--6 { grid-template-columns: minmax(150px, 180px) repeat(6, minmax(0, 1fr)); }
.wk--7 { grid-template-columns: minmax(140px, 170px) repeat(7, minmax(0, 1fr)); }
.wk__corner { align-self: end; padding: 0 0 8px; font-size: 12px; line-height: 16px; color: var(--muted); }
.wk__day { display: flex; align-items: baseline; gap: 6px; padding: 0 2px 6px; border-bottom: 2px solid var(--line); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); }
.wk__day b { font: 600 17px/24px var(--font-display); color: var(--ink); }
.wk__day.is-today { border-bottom-color: var(--violet); color: var(--vink); }
.wk__day.is-today b { color: var(--vink); }
.wk__day.is-past b, .wk__day.is-holiday { color: var(--muted); }
.wk__line { display: flex; flex-direction: column; gap: 4px; padding: 10px 8px 10px 0; min-width: 0; }
.wk__line .small { overflow-wrap: anywhere; }
.wk__name { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/20px var(--font-display); color: var(--ink); text-decoration: none; }
.wk__name:hover { color: var(--vink); }
.wk__swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; background: var(--type-fg, var(--violet)); }
.wk__swatch.type--6 { background: var(--lime); box-shadow: inset 0 0 0 1.5px var(--ink); }
.wk__count { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--body-2); }
.wk__count.is-done { color: var(--ok); }
.wk__sep { grid-column: 1 / -1; height: 1px; background: var(--line); }
.wk__cell { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 104px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--white); color: var(--ink); text-decoration: none; }
.wk__cell > strong { padding-right: 30px; font-size: 13px; line-height: 17px; font-weight: 600; overflow-wrap: normal; hyphens: auto; }
.wk__cell .pill { align-self: flex-start; white-space: nowrap; }
.wk__cell:has(.wk__open):hover { border-color: var(--soft); box-shadow: 0 4px 14px rgb(32 36 43 / 6%); }
.wk__open { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.wk__menu { position: absolute; top: 6px; right: 6px; z-index: 2; }
.wk__menu > summary.sq-btn { width: 30px; height: 30px; }
.wk__menu .menu__panel { right: 0; left: auto; }
.wk__cell--off { border: 0; background: transparent; min-height: 0; align-items: center; justify-content: center; color: var(--ctrl); font-size: 12px; }
.wk__cell--empty { border-style: dashed; border-color: var(--ctrl); background: transparent; align-items: flex-start; justify-content: center; gap: 4px; color: var(--muted); }
a.wk__cell--empty:hover { background: var(--white); border-color: var(--violet); color: var(--vink); }
.wk__cell--empty b { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--vink); }
.wk__cell--empty.is-readonly { justify-content: space-between; }
.wk__cell--holiday { border: 1px dashed var(--line); background: var(--row-alt); align-items: center; justify-content: center; text-align: center; }
.wk__line.is-readonly .wk__name, .wk__cell.is-readonly { opacity: .62; }
.wk__reg { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--vink); }
.wk__reg svg { flex: none; }
.wk__from { margin-top: auto; font-size: 12px; line-height: 16px; color: var(--muted); }
.wk__from.is-exception { color: var(--vink); font-weight: 600; }
@media (max-width: 1320px) {
    .wk { gap: 6px; }
    .wk__cell { padding: 8px; }
}

/* Sin ancho para la rejilla (por debajo de 1.180 px y en el móvil): los días en una fila y, debajo,
   las disciplinas del día elegido. Bajo cada día, un aro si falta algo y un punto si está todo. */
.wk-alt { display: none; }
.wk-alt__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
@media (max-width: 1180px) {
    .wk { display: none; }
    .wk-alt { display: flex; flex-direction: column; gap: 14px; }
}
.dayrow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.dayrow > a, .dayrow > span { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 44px; padding: 8px 0 7px; border-radius: var(--r-ctrl); border: 1px solid var(--line); background: var(--white); color: var(--ink); text-decoration: none; font-size: 11px; line-height: 14px; font-weight: 600; }
.dayrow b { font: 600 16px/20px var(--font-display); }
.dayrow > .is-selected { background: var(--violet); border-color: var(--violet); color: var(--white); }
.dayrow > .is-off { background: transparent; color: var(--ctrl); }
.dayrow__dots { display: inline-flex; gap: 3px; height: 8px; }
.dayrow__dots i { width: 8px; height: 8px; border-radius: 999px; box-sizing: border-box; }
.dayrow__dots i.d-ok { background: var(--ok); }
.dayrow__dots i.d-falta { border: 2px solid var(--muted); }
.dayrow > .is-selected .dayrow__dots i.d-ok { background: var(--lime); }
.dayrow > .is-selected .dayrow__dots i.d-falta { border-color: var(--white); }
.linecard { display: flex; flex-direction: column; gap: 6px; min-height: 44px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--white); color: var(--ink); text-decoration: none; }
.linecard strong { font-size: 15px; line-height: 20px; }
.linecard.is-readonly { opacity: .72; }
.linecard__add { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--vink); }

/* Publicar: una línea por disciplina, con cuándo la ven. */
.publist { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-box); }
.publist__row { display: grid; grid-template-columns: 20px minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 4px 10px; align-items: center; min-height: 44px; padding: 4px 12px; border-top: 1px solid var(--line); font-size: 13px; }
.publist__row:first-child { border-top: 0; }
.publist__row input { width: 16px; height: 16px; accent-color: var(--violet); }
.publist__when { text-align: right; }

/* Las clases de un día: hora, quién y cuántos, y si va con el entreno del día o con el suyo (en violeta: no es un error). */
.sesslist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sesslist > li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 10px; align-items: center; min-height: 56px; padding: 6px 0; border-top: 1px solid var(--line); }
.sesslist > li:first-child { border-top: 0; }
.sesslist > li > b { font: 600 15px/20px var(--font-display); }
.sesslist > li > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; line-height: 18px; }
.sesslist > li > .linkbtn, .sesslist > li > form { grid-column: 2; }
.sesslist > li > .linkbtn, .sesslist > li > form .linkbtn { min-height: 32px; }
.sesslist__who { font-weight: 600; color: var(--ink); }
.sesslist__tag { display: inline-flex; align-items: center; gap: 4px; color: var(--vink); font-weight: 600; text-decoration: none; }
.sesslist > li.is-exception { background: var(--tint); margin: 0 -12px; padding: 6px 12px; border-radius: var(--r-ctrl); }

@media (max-width: 960px) {
    .linkbtn { min-height: 40px; }
    .tag-check { min-height: 44px; }
    .publist__row { grid-template-columns: 20px minmax(0, 1fr); }
    .publist__row > .small { grid-column: 2; text-align: left; }
    .sesslist > li > .linkbtn, .sesslist > li > form .linkbtn { min-height: 44px; }
    a.wk__name { min-height: 44px; }
}

/* Entrenamiento TL · Librería de ejercicios: el filtro «Precaución» en dos columnas, la imagen del centro y las cadenas de progresión. */
.lib-without .menu__panel { left: 0; right: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; width: min(540px, 92vw); max-width: none; padding: 6px 12px 10px; }
.lib-without .menu__title { grid-column: 1 / -1; padding-left: 0; }
.lib-without .check { min-height: 34px; font-size: 13px; line-height: 18px; }
.lib-without[open] > summary { box-shadow: 0 0 0 3px var(--lavender); }
.lib-image { display: block; max-width: 240px; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-ctrl); margin-bottom: 8px; }
.lib-marks { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.lib-chain { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 20px; }
.lib-table .pill + .pill { margin-left: 4px; }
[data-library-results][aria-busy="true"] { opacity: .6; transition: opacity .15s; }
@media (max-width: 960px) {
    .lib-chain a { display: inline-block; padding-block: 10px; }
}
@media (max-width: 960px) {
    /* La fila entera lleva a la ficha; el nombre, además, con su zona de toque de 44 px sin mover el texto. */
    .lib-table th .type-link { display: inline-block; padding-block: 12px; margin-block: -12px; }
}

/* Entrenamiento TN · niveles por disciplina y reservas de estudio (SQL 59). En «Nueva reserva» del móvil, «Pide nivel 2 · no tiene nivel» y «Apuntar sin el requisito» parten línea en su columna estrecha en lugar de salirse. */
.day-list--book .day-list__state .pill { white-space: normal; }
.day-list--book .day-list__acts .btn { white-space: normal; text-align: center; padding-inline: 10px; }

/* ── Entrenamiento T3 (22 de octubre de 2026; prototipo 17, fuente/proto.css) ─────────────────────
   El día de una disciplina en lectura (.dgrid, .daynav, .whead, .wr), el reparto del tiempo (.tbudget), la barra
   de autoguardado (.actbar), el selector de tipos (.typegrid, .typelist), la ventana de un bloque (.exrows,
   .exrow, .stations, .regfoot) y las sugerencias de la librería (.exsuggest). */
.dgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 20px; align-items: start; }
.dgrid > * { min-width: 0; }
.daynav { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.daynav > .dayrow--line { flex: 1 1 360px; max-width: 520px; }
.addblock { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border: 1px dashed var(--ctrl); border-radius: var(--r-box); color: var(--vink); font-size: 14px; font-weight: 600; text-decoration: none; }
.addblock:hover { border-color: var(--violet); background: var(--tint); color: var(--vink); }

/* Cabecera del entreno: título con su lápiz, estado y «…». */
.whead { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.whead__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.whead__title { display: inline-flex; align-items: center; gap: 8px; font: 600 22px/28px var(--font-display); letter-spacing: -0.01em; overflow-wrap: anywhere; min-width: 0; }
.whead__edit { width: 32px; height: 32px; flex: none; }
.whead__goal { font-size: 14px; line-height: 20px; color: var(--body-2); }

/* El entreno en lectura: se lee como en la pizarra. */
.wr { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.wr__block { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 2px 12px; align-items: start; }
.wr__block > .wblock__letter { grid-row: 1 / span 4; }
.wr__block > .regline, .wr__block > .wr__items, .wr__block > .wr__note { grid-column: 2; }
.wr__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 32px; }
.wr__head h3 { font: 600 15px/20px var(--font-display); overflow-wrap: anywhere; }
.wr__head .sq-btn, .wr__more > summary.sq-btn { width: 32px; height: 32px; }
.wr__more .menu__panel { right: 0; left: auto; }
.wr__min { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--body-2); white-space: nowrap; }
.wr__min.is-est { color: var(--muted); font-weight: 500; }
.wr__note { font-size: 13px; line-height: 19px; color: var(--body-2); }
.wr__items { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; }
.wr__items > li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2px 14px; padding: 7px 0; border-top: 1px dashed var(--line); font-size: 14px; line-height: 20px; }
.wr__items > li:first-child { border-top: 0; }
.wr__items > li.is-newst { border-top: 1px solid var(--line); }
.wr__name { font-weight: 600; overflow-wrap: anywhere; }
.wr__rx { color: var(--body-2); overflow-wrap: anywhere; }
.wr__extra { grid-column: 1 / -1; font-size: 12px; line-height: 17px; color: var(--muted); }
.wr__extra--new { color: var(--vink); font-weight: 600; }
.wr__extra--muted { color: var(--muted); }
.wr--lg .wr__items > li { font-size: 15px; line-height: 22px; padding: 9px 0; }
.wr__st { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 5px; background: var(--tint); color: var(--vink); font-size: 11px; font-weight: 700; vertical-align: 1px; }
.wr__st.is-repeat { visibility: hidden; }
.wr__block.is-new { background: var(--lime-tint); border-radius: var(--r-box); padding: 10px; margin: -10px; }
.fmt { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; background: var(--neutral-bg); color: var(--body-2); font-size: 12px; line-height: 18px; font-weight: 600; white-space: nowrap; }
.regline { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px; font-size: 13px; line-height: 18px; color: var(--body-2); }
.regline svg { flex: none; margin-top: 1px; color: var(--vink); }
.regline b { color: var(--ink); font-weight: 600; }
.regline--off { color: var(--muted); }
.regline--off svg { color: var(--ctrl); }
.lvl { display: inline-flex; padding: 0 6px; margin-right: 4px; border-radius: 5px; background: var(--ink); color: var(--lime); font-size: 11px; line-height: 16px; font-weight: 700; }
.lvl--base { background: var(--lime); color: var(--ink); margin-left: 6px; }
.lvl--soft { background: var(--neutral-bg); color: var(--ink); margin-left: 6px; }

/* Reparto del tiempo de la clase: lo que ocupa cada bloque y lo que queda libre. */
.tbudget { display: flex; flex-direction: column; gap: 6px; }
.tbudget__bar { display: block; width: 100%; height: 12px; overflow: visible; }
.tbudget__bar .tb-track { fill: var(--neutral-bg); }
.tbudget__bar .tb-1 { fill: var(--violet); } .tbudget__bar .tb-2 { fill: var(--ink); }
.tbudget__bar .tb-3 { fill: var(--soft); } .tbudget__bar .tb-4 { fill: var(--ctrl); }
.tbudget__bar .tb-5 { fill: var(--vink-hover); } .tbudget__bar .tb-6 { fill: var(--body-2); }
.tbudget__legend { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12px; line-height: 16px; color: var(--muted); }
.tbudget__legend b { color: var(--ink); font-weight: 600; }
.tbudget__legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }
.tbudget__legend i.tb-1 { background: var(--violet); } .tbudget__legend i.tb-2 { background: var(--ink); }
.tbudget__legend i.tb-3 { background: var(--soft); } .tbudget__legend i.tb-4 { background: var(--ctrl); }
.tbudget__legend i.tb-5 { background: var(--vink-hover); } .tbudget__legend i.tb-6 { background: var(--body-2); }
.tbudget__free { margin-left: auto; font-weight: 600; color: var(--ok); }
.tbudget__free.is-over { color: var(--bad); }

/* La barra del entreno, pegada al pie mientras se trabaja: guardado a las… por…, deshacer y seguir. */
.actbar { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 4px -20px -20px; padding: 14px 20px; background: var(--white); border-top: 1px solid var(--line); border-radius: 0 0 var(--r-card) var(--r-card); }
.actbar__group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.actbar__group > form { display: contents; }
.saved { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 0 6px; flex: 1 1 200px; font-size: 13px; line-height: 18px; color: var(--muted); }
.saved svg { color: var(--ok); margin-top: 1px; }
.saved b { color: var(--ink); font-weight: 600; }
.saved span { grid-column: 2; }

/* El selector de tipos, con su buscador y la leyenda arriba (H-09). */
.search--big { position: relative; display: flex; align-items: center; flex: 0 0 auto; max-width: none; }
.search--big > svg { position: absolute; left: 14px; color: var(--muted); }
.search--big input { width: 100%; min-height: 48px; padding-left: 42px; font-size: 16px; }
.typelegend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; line-height: 16px; color: var(--muted); }
.typelegend span { display: inline-flex; align-items: center; gap: 4px; }
.typelegend svg { color: var(--vink); }
.typefrequent { align-items: center; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; }
.chip:hover { border-color: var(--violet); color: var(--vink); }
.typegrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; }
.typegrid h3 { font: 600 13px/18px var(--font-display); color: var(--muted); margin-bottom: 4px; }
.typegrid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.typegrid a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; padding: 4px 8px; margin: 0 -8px; border-radius: var(--r-ctrl); color: var(--ink); font-size: 14px; text-decoration: none; }
.typegrid a b { font-weight: 500; }
.typegrid a svg { color: var(--vink); flex: none; }
.typegrid a:hover { background: var(--tint); color: var(--vink); }
.typeall { margin-top: 4px; }
.typelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.typelist a { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .9fr) 18px; gap: 6px 16px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-box); color: var(--ink); text-decoration: none; font-size: 13px; line-height: 18px; }
.typelist a:hover { border-color: var(--violet); background: var(--tint); color: var(--ink); }
.typelist b { display: block; font-size: 15px; line-height: 20px; }
.typelist__name, .typelist__fields, .typelist__reg { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.typelist a > svg { color: var(--muted); }

/* La ventana de un bloque: los campos en cuatro, las filas con su cantidad, carga y versiones, y lo que se registra fijo al pie. */
.form__grid.form__grid--4, .modal .form__grid.form__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.input.is-est, .input.is-est::placeholder { color: var(--muted); }
.calc { min-height: 44px; display: flex; align-items: center; font-size: 14px; color: var(--body-2); }
.exrows { display: flex; flex-direction: column; gap: 6px; }
.exrows__head, .exrow { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 36px; gap: 8px; align-items: center; }
.exrows--3 .exrows__head, .exrows--3 .exrow { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) 36px; }
.exrows--v .exrows__head, .exrows--v .exrow { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .9fr) 36px; }
.exrows--3.exrows--v .exrows__head, .exrows--3.exrows--v .exrow { grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, .9fr) 36px; }
.exrows--lead .exrows__head, .exrows--lead .exrow { grid-template-columns: 110px minmax(0, 1.3fr) minmax(0, 1fr) 36px; }
.exrows--lead.exrows--3 .exrows__head, .exrows--lead.exrows--3 .exrow { grid-template-columns: 110px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) 36px; }
.exrows__head { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); }
.exrow__ex { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; border-radius: var(--r-ctrl); background: var(--row-alt); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.exrow__ex svg { color: var(--muted); flex: none; }
.exrow__ex--input { padding: 0; background: none; }
.exrow__ex--input .input { font-weight: 600; }
.exrow .input { min-height: 40px; }
.exrow__f { display: flex; flex-direction: column; min-width: 0; position: relative; }
.exrow__lab { display: none; font-size: 12px; font-weight: 600; color: var(--muted); }
.exrow__lead { min-width: 0; }
.legs__rol { align-self: center; font-size: 12px; font-weight: 700; color: var(--vink); }
.exrow__ver > summary { list-style: none; cursor: pointer; display: flex; align-items: center; min-height: 40px; }
.exrow__ver > summary::-webkit-details-marker { display: none; }
.exrow__ver[open] { grid-column: 1 / -1; order: 9; }
.exrow__levels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 10px; margin-top: 4px; border-radius: var(--r-ctrl); background: var(--tint); }
.exrow__levels label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; font-weight: 600; color: var(--muted); }
.exrow__levels .small { grid-column: 1 / -1; }
.vchip { display: inline-flex; align-self: flex-start; padding: 3px 8px; border-radius: 6px; background: var(--tint); color: var(--vink); font-size: 12px; font-weight: 600; }
.exrow__more > summary.sq-btn { width: 36px; height: 36px; }
.exrow__more .menu__panel { right: 0; left: auto; }
.exrows__add { position: relative; display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.exrows__search { position: relative; flex: 1 1 260px; display: flex; }
.exrows__search > .search { flex: 1 1 auto; max-width: none; }
.exrows__station { display: inline-flex; align-items: center; gap: 6px; }
.exrows__paste { flex: 1 1 100%; display: flex; flex-direction: column; gap: 6px; }
.exrows__paste > summary { list-style: none; align-self: flex-start; }
.exrows__paste > summary::-webkit-details-marker { display: none; }
.exrows__paste[open] > .btn { align-self: flex-start; }
.exsuggest { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40; max-height: 280px; overflow-y: auto; list-style: none; margin: 0; padding: 4px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-box); box-shadow: 0 16px 40px rgb(32 36 43 / 14%); }
.exsuggest > li { display: flex; flex-direction: column; gap: 1px; min-height: 40px; padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; line-height: 19px; }
.exsuggest > li > span { font-size: 12px; line-height: 16px; color: var(--muted); }
.exsuggest > li:hover, .exsuggest > li.is-active { background: var(--tint); color: var(--vink); }
.exrow__f > .exsuggest, .exrow__ex > .exsuggest { min-width: 260px; }
.exrow__ex--input { position: relative; }
.regfoot { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding: 10px 12px; border-radius: var(--r-ctrl); background: var(--tint); font-size: 13px; line-height: 18px; color: var(--body-2); }
.regfoot svg { color: var(--vink); flex: none; }
.regfoot b { color: var(--ink); }
.regoff { margin-right: auto; }
.stations { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.station { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-box); }
.station[hidden] { display: none; }
.station h4 { display: flex; align-items: center; font-size: 13px; font-weight: 600; }
.station__rows { display: flex; flex-direction: column; gap: 6px; }
.station .exrow { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) 36px; }
.station--rest { background: var(--row-alt); }
.station--rest .station__rows:empty::after { content: ""; }

@media (max-width: 1180px) {
    .dgrid { grid-template-columns: minmax(0, 1fr); }
    .typegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form__grid.form__grid--4, .modal .form__grid.form__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
    .wr__items > li { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .wr__head .sq-btn, .wr__more > summary.sq-btn { width: 44px; height: 44px; }
    .whead__title { font-size: 20px; line-height: 26px; }
    .whead__edit { width: 44px; height: 44px; }
    .daynav > .seg { width: 100%; }
    /* La barra se pega por encima de la barra inferior de la app, en una fila, con el botón principal ocupando lo que queda. */
    .actbar { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); margin: 4px -16px -16px; padding: 10px 16px; border-radius: 0; box-shadow: 0 -6px 16px rgb(32 36 43 / 6%), 0 16px 0 var(--white); }
    .actbar > .saved { display: none; }
    .actbar__group { flex: 1 1 100%; margin-left: 0; }
    .actbar__group .btn { flex: 1 1 auto; }
    .typegrid { grid-template-columns: minmax(0, 1fr); }
    .typegrid a { min-height: 44px; }
    .typelist a { grid-template-columns: minmax(0, 1fr) 18px; }
    .typelist__fields, .typelist__reg { grid-column: 1; }
    .typelist a > svg { grid-column: 2; grid-row: 1 / span 3; }
    .chip { min-height: 44px; }
    /* Cada fila, una tarjeta con sus campos etiquetados y «…» (H-08). */
    .exrows__head { display: none; }
    .exrow, .exrows--3 .exrow, .exrows--v .exrow, .exrows--3.exrows--v .exrow, .exrows--lead .exrow, .exrows--lead.exrows--3 .exrow, .station .exrow { grid-template-columns: minmax(0, 1fr) 44px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-box); gap: 8px; }
    .exrow > .exrow__ex { grid-column: 1; grid-row: 1; background: none; padding: 0; min-height: 44px; }
    .exrow > .exrow__lead { grid-column: 1 / -1; }
    .exrow > .exrow__more { grid-column: 2; grid-row: 1; }
    .exrow > .exrow__more > summary.sq-btn { width: 44px; height: 44px; }
    .exrow > .exrow__f { grid-column: 1 / -1; }
    .exrow__lab { display: block; }
    .exrow .input { min-height: 44px; }
    .exrow__levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .exrows__search { flex-basis: 100%; }
    .exsuggest > li { min-height: 44px; }
    .regfoot { flex-wrap: wrap; }
}
/* T3, ajustes tras las primeras capturas: lo que se registra y el pie, en dos columnas (el icono no salta de
   línea); las filas de una estación sin el asa y sin partir palabras; la cabecera de filas, solo si hay filas;
   y en el móvil la barra del entreno al final de la tarjeta, sin tapar lo que se lee. */
.regline, .regfoot { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; }
.regfoot { grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; }
.exrow__ver > summary { gap: 8px; }
.exrows:not(:has(.exrow)) > .exrows__head { display: none; }
.station .exrow__ex { padding: 0 8px; overflow-wrap: normal; hyphens: auto; }
.station .exrow__ex > svg { display: none; }
.calc { min-height: 0; }
@media (max-width: 960px) {
    .actbar { position: static; margin: 4px -16px -16px; box-shadow: none; border-radius: 0 0 var(--r-card) var(--r-card); }
    .regfoot { grid-template-columns: 18px minmax(0, 1fr); }
}
.stations { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.wr__block.is-changed > .wblock__letter { background: var(--violet); color: var(--white); }   /* cambiado desde lo publicado (T3) */
.applylist { list-style: none; margin: 0; padding: 0; }   /* «Aplicárselo también…», bloque a bloque (T3, PD-1) */
.applylist > li + li { border-top: 1px solid var(--line); padding-top: 12px; }

/* Entrenamiento TL · revisión UX 20 (22 de octubre de 2026): en el escritorio, una celda sin dato de la librería pinta «—»;
   en el móvil (tarjetas) no sale, ni las familias ni el aparato, que van en la línea pequeña del nombre (PAT-4, LIB-05).
   Lo que distingue a dos que se llaman igual, el vídeo y la imagen del centro junto al nombre, las marcas de precaución
   neutras con su icono (LIB-03, LIB-07, LIB-10), «Ya en la librería» al crear uno (LIB-04) y, en la ventana de filtros
   del escritorio, sin la raya de la sección del móvil que no se ve (LIB-08). */
@media (min-width: 961px) {
    .lib-table td:empty::after { content: "—"; color: var(--muted); }
    .modal__section.is-narrow-only + .modal__section { padding-top: 0; border-top: 0; }
}
@media (max-width: 960px) {
    .lib-table.table--stack .lib-desk { display: none; }
}
.lib-twin { font-weight: 400; color: var(--muted); }
.lib-media { display: inline-flex; vertical-align: -2px; margin-left: 6px; color: var(--vink); }
.lib-mark { gap: 4px; }
.lib-mark > svg { flex: none; }
.lib-similar { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--r-ctrl); background: var(--warn-bg); font-size: 13px; line-height: 18px; }
.lib-similar > p { margin: 0; }
.lib-similar__list { margin: 0; padding-left: 18px; }
.lib-similar .check-row { padding-bottom: 0; }

/* Entrenamiento TM · revisión UX 20 (22 de octubre de 2026): en la ficha, «Antes de Hyrapp» al lado del nombre de la marca
   (FIC-01); en la vista previa del historial, «Qué columna es cada cosa» plegada en una línea cuando el programa se
   reconoce (HIS-07), el buscador encima del desplegable de cada socio (HIS-03) y, en el móvil, el pie pegado solo con
   «Importar» a todo el ancho (HIS-09). */
.mark-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.hist-map { border-top: 0; padding-top: 0; }
.hist-map > .form { padding-top: 12px; }
.list > li.list__wrap > .hist-pick { flex: 0 1 440px; }
.hist-pick > .input { flex: 1 1 160px; }
@media (max-width: 960px) {
    .list > li.list__wrap > .hist-pick { flex: 1 1 100%; }
    .form-foot--one > .btn { flex: 1 1 100%; justify-content: center; }
}
/* TL · revisión UX 20: «De tu centro: CrossFit y box · Hyrox e híbrido · Calistenia…» parte línea en el móvil en lugar de salirse. */
.lib-chip { white-space: normal; max-width: 100%; }
.lib-table .lib-marks { align-items: center; }
.lib-table .lib-marks .pill + .pill { margin-left: 0; }
/* TM · revisión UX 20: la cifra única de la vista previa, del ancho de una tarjeta; en el móvil, el buscador encima de su desplegable. */
.hist-kpi { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (max-width: 960px) {
    .hist-pick > .input, .hist-pick > .select { flex-basis: 100%; }
}
.lib-chip b { white-space: nowrap; }

/* ── Entrenamiento T1 y T2 · revisión UX 20 (22 de octubre de 2026) ──────────────────────────────
   La semana: el pie de cada casilla (clases, «Se ve el…» y la clase con su entreno en violeta, SEM-05, SEM-14,
   CLA-03), títulos de tres líneas como mucho (SEM-12), el día pasado sin entreno en gris (SEM-06) y las disciplinas
   sin clases en una línea (SEM-09). Publicar: una línea por disciplina (SEM-04), una casilla por cambio (PD-2) y, en el
   móvil, los avisos antes de la lista. La ficha de una disciplina: lo que cambia al marcar sus clases (DIS-01) y
   «Archivar la disciplina…» (DIS-08). «Clases sin entreno» con su «⋯» (DIS-07). */
.wk__cell > strong { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wk__from { display: flex; flex-direction: column; gap: 2px; }
.wk__from .is-exception, .linecard .is-exception { color: var(--vink); font-weight: 600; }
.wk__cell--past { border: 1px dashed var(--line); background: var(--row-alt); justify-content: center; gap: 4px; color: var(--muted); }
.wk__idle { margin: 12px 0 0; color: var(--muted); }
.publist__row { grid-template-columns: 20px minmax(0, 1fr); }
.publist--changes > .publist__row { display: flex; align-items: flex-start; padding: 10px 12px; }
.pubwin__tell { display: flex; flex-direction: column; gap: 14px; }
.types-effect { margin: 0; padding: 10px 12px 10px 30px; border-radius: var(--r-ctrl); background: var(--warn-bg); color: var(--warn); }
.linkbtn--danger { color: var(--bad); }
.nowod > li > .menu { margin-left: auto; align-self: center; }
@media (max-width: 960px) {
    .pubwin__tell { order: -1; }
    .page-head details.only-mobile { margin-top: 0; }
}
.sesslist__time { color: inherit; text-decoration: underline; text-decoration-color: var(--soft); text-underline-offset: 3px; }
.sesslist__time:hover { color: var(--vink); }
/* T1 · revisión UX 20 (SEM-11, PD-6): el color de la disciplina se elige con la misma muestra de la semana. El 1 y el 2
   comparten tinta: el 2 va en hueco, para que dos disciplinas no se vean iguales. */
.wk__swatch.type--2 { background: var(--type-bg); box-shadow: inset 0 0 0 2px var(--type-fg); }
.wk__swatch--lg { width: 32px; height: 32px; border-radius: 10px; }
.tone-pick input:checked + .wk__swatch { outline: 2px solid var(--violet); outline-offset: 2px; }
.nowod > li { grid-template-columns: 20px minmax(0, 1fr) auto; }
@media (max-width: 960px) {
    .sesslist__time, .sesslist__tag { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ── Entrenamiento TS · la secuencia de pasos (22 de octubre de 2026; SQL 63) ──────────────────────
   La fila de un paso en la ventana de su bloque (.exrow--step: paso, tiempo o respiraciones, lado y «Más»), los
   muelles en sus colores (.spring--<color>, los de la máquina de la sede), la cabecera de la clase (.classhead), lo
   de cada paso al leerlo (.step-extra), el temporizador por pasos del panel y del Modo TV (.splayer), Configuración ›
   Aparatos (.springs-edit) y las plantillas de Hyrapp (.locked-cat). */
@media (min-width: 961px) {
    .exrows--steps .exrows__head, .exrows--steps .exrow { grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr) minmax(0, .75fr) minmax(0, 1.1fr) 36px; }
}
.step-more__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.step-more__grid .step-more__wide { grid-column: span 2; }
.step-more__grid .step-more__check { grid-column: span 2; flex-direction: row; align-items: center; color: var(--ink); font-weight: 500; }
.step-more__grid > p.small { grid-column: 1 / -1; }
.springs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; vertical-align: middle; }
.springs-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.spring { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 1px 8px 1px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font-size: 12px; line-height: 18px; font-weight: 600; white-space: nowrap; }
.spring::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ctrl); box-shadow: inset 0 0 0 1px rgb(32 36 43 / 18%); }
.spring--sm { min-height: 18px; font-size: 11px; line-height: 14px; padding: 0 6px 0 4px; }
.spring--amarillo::before { background: #f5c518; }
.spring--azul::before { background: #2f6fde; }
.spring--rojo::before { background: #d63b3b; }
.spring--verde::before { background: #2e9e5b; }
.spring--blanco::before { background: #ffffff; }
.spring--negro::before { background: #20242b; }
.spring--gris::before { background: #8a909c; }
.spring--plata::before { background: #c8ccd3; }
.spring--naranja::before { background: #f08a24; }
.spring--morado::before { background: #7b4fd6; }
.spring--rosa::before { background: #ee7fb0; }
.springs--big { gap: 10px; }
.springs--big .spring { min-height: 44px; padding: 4px 16px 4px 10px; font-size: 20px; line-height: 28px; }
.springs--big .spring::before { width: 22px; height: 22px; }
.steps-app h3 .small { font-weight: 400; }
.steps-tagged { display: flex; flex-direction: column; gap: 6px; }
.steps-tagged[hidden] { display: none; }

/* La cabecera de la clase en el día: cuándo la ve el socio, foco, tema y música, en una línea que parte. */
.classhead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--body-2); }
.classhead__show { display: inline-flex; align-items: center; gap: 6px; color: var(--vink); font-weight: 600; }
.classhead .linkbtn { font-size: 13px; }

/* Lo de cada paso al leerlo, bajo su nombre. */
.step-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
.step-extra .lvl { margin-left: 0; }
.step-extra__cue { color: var(--body-2); font-style: italic; }

/* El temporizador por pasos: el paso que va, el reloj, el siguiente y la lista. */
.splayer { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-areas: "now clock" "next next" "controls controls" "list list"; gap: 14px 24px; align-items: center; }
.splayer__now { grid-area: now; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.splayer__where { font-size: 13px; font-weight: 600; color: var(--muted); }
.splayer__name { font: 600 clamp(26px, 3vw, 40px)/1.15 var(--font-display); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.splayer__dose { font-size: 18px; line-height: 26px; color: var(--body-2); }
.splayer__cue { padding: 8px 12px; border-radius: var(--r-ctrl); background: var(--tint); color: var(--vink); font-size: 15px; line-height: 21px; }
.splayer__cue[hidden] { display: none; }
.splayer__clock { grid-area: clock; justify-self: end; font: 600 clamp(64px, 9vw, 132px)/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.splayer.is-manual .splayer__clock { color: var(--muted); }
.splayer.is-change .splayer__clock { color: var(--vink); }
.splayer.is-done .splayer__clock { color: var(--ok); }
.splayer__next { grid-area: next; font-size: 16px; line-height: 22px; color: var(--body-2); }
.splayer__next b { color: var(--ink); }
.splayer__swap { color: var(--vink); font-weight: 600; }
.splayer__controls { grid-area: controls; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.splayer__sound { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.splayer__keys { margin-left: auto; }
.splayer__list { grid-area: list; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.splayer__list > li { border-bottom: 1px dashed var(--line); }
.splayer__jump { display: grid; grid-template-columns: 40px minmax(0, 1.4fr) minmax(0, 1fr) 160px; gap: 4px 12px; align-items: center; width: 100%; min-height: 44px; padding: 6px 4px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.splayer__jump:hover { background: var(--row-alt); }
.splayer__list > li.is-current .splayer__jump { background: var(--tint); color: var(--vink); font-weight: 600; }
.splayer__n { font-size: 12px; font-weight: 700; color: var(--muted); }
.splayer__li-name { overflow-wrap: anywhere; }
.splayer__li-dose { color: var(--body-2); }
.splayer__jump > .springs { justify-self: end; }
@media (max-width: 960px) {
    .splayer { grid-template-columns: minmax(0, 1fr); grid-template-areas: "now" "clock" "next" "controls" "list"; }
    .splayer__clock { justify-self: start; }
    .splayer__keys { display: none; }
    .splayer__controls .btn { flex: 1 1 auto; justify-content: center; }
    .splayer__jump { grid-template-columns: 34px minmax(0, 1fr); }
    .splayer__jump > .splayer__li-dose, .splayer__jump > .springs { grid-column: 2; }
    .step-more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* En la tele: tinta y letras grandes; los muelles en grande. */
.splayer--tv { padding: 18px 20px; border: 1px solid var(--ink-line); border-radius: 16px; background: var(--ink-2); color: var(--white); }
.splayer--tv .splayer__where, .splayer--tv .splayer__next, .splayer--tv .splayer__dose, .splayer--tv .splayer__sound, .splayer--tv .splayer__keys, .splayer--tv .splayer__li-dose { color: var(--soft-text); }
.splayer--tv .splayer__name, .splayer--tv .splayer__next b, .splayer--tv .splayer__jump { color: var(--white); }
.splayer--tv .splayer__name { font-size: clamp(34px, 4.4vw, 72px); }
.splayer--tv .splayer__dose { font-size: clamp(20px, 2vw, 32px); line-height: 1.3; }
.splayer--tv .splayer__clock { color: var(--lime); font-size: clamp(90px, 13vw, 200px); }
.splayer--tv.is-change .splayer__clock, .splayer--tv .splayer__swap { color: var(--lime); }
.splayer--tv .splayer__cue { background: var(--ink); color: var(--lime); font-size: clamp(16px, 1.6vw, 24px); line-height: 1.35; }
.splayer--tv .splayer__list { border-top-color: var(--ink-line); }
.splayer--tv .splayer__list > li { border-bottom-color: var(--ink-line); }
.splayer--tv .splayer__jump:hover { background: var(--ink); }
.splayer--tv .splayer__list > li.is-current .splayer__jump { background: var(--ink); color: var(--lime); }
.splayer--tv .springs--big .spring { min-height: 60px; font-size: clamp(22px, 2.2vw, 34px); background: var(--white); color: var(--ink); }
.splayer--tv .springs--big .spring::before { width: 30px; height: 30px; }
.tv-more-timer > summary { cursor: pointer; color: var(--soft-text); font-size: 14px; min-height: 44px; display: flex; align-items: center; }

/* Configuración › Aparatos: cada muelle, su color y su carga. */
.springs-edit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.springs-edit__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
@media (max-width: 960px) {
    .springs-edit { grid-template-columns: minmax(0, 1fr); }
}

/* Plantillas › De Hyrapp: benchmarks y series fijas. */
.locked-cat__group { font: 600 13px/18px var(--font-display); color: var(--muted); margin: 12px 0 4px; }
.locked-cat { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.locked-cat > li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-box); }
.locked-cat > li, .locked-cat > li:first-child, .locked-cat > li:last-child { padding: 10px 12px; border: 1px solid var(--line); }
.locked-cat > li > .list__main { flex: 1 1 auto; min-width: 0; }
.locked-cat > li > form { display: contents; }

/* ── Entrenamiento T7 · pegar el texto de un día y de la semana (22 de octubre de 2026; SQL 62) ─────────────────
   Prototipo 17, e01, e01m, p01, p02, w01, w02, w02m y w03: el cuadro para pegar, lo leído, lo que pregunta en su
   sitio, la ventana para elegir un ejercicio y la vista previa de la semana, día a día. */
.wtext__area { min-height: 240px; font-size: 15px; line-height: 24px; white-space: pre-wrap; resize: vertical; }
.wtext__area--week { min-height: 300px; }
.wpaste .form__row { margin: 0; }
.wpaste__more { align-items: center; }
.readsum { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-box); background: var(--ok-bg); font-size: 13px; line-height: 19px; }
.readsum > svg { color: var(--ok); flex: none; margin-top: 1px; }
.readsum p { margin: 0; }
.asks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.asks > li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; padding: 12px 14px; border-radius: var(--r-box); background: var(--warn-bg); font-size: 13px; line-height: 19px; }
.asks > li > svg { color: var(--warn); margin-top: 1px; }
.asks > li > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.asks b { font-size: 14px; line-height: 20px; font-weight: 600; overflow-wrap: anywhere; }
.asks span { color: var(--body-2); }
.asks form { display: contents; }
.weekread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.weekread > li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.weekread > li:first-child { border-top: 0; }
.weekread > li > span:not(.pill) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.weekread > li > span:not(.pill) > strong { overflow-wrap: anywhere; }
.weekread > li.is-skip { opacity: .7; }
.weekread .pill { white-space: nowrap; }
.pickex { display: flex; flex-direction: column; margin: 0; padding: 0; border: 0; max-height: 360px; overflow-y: auto; }
.pickex__row { padding: 4px 0; border-top: 1px solid var(--line); }
.pickex__row:first-of-type { border-top: 0; }
.pickex__text { margin-top: 4px; }
@media (max-width: 960px) {
    .wtext__area { min-height: 200px; }
    .wpaste .actbar__group, .wpaste .actbar__group .btn { width: 100%; }
    .weekread > li { grid-template-columns: 52px minmax(0, 1fr); }
    .weekread > li > .pill { grid-column: 2; justify-self: start; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Entrenamiento T3 · revisión UX 21 (22 de octubre de 2026): el día de una disciplina y la ventana de un bloque.
   ───────────────────────────────────────────────────────────────────────────── */
/* El tipo del bloque bajo el título de su ventana, con «Cambiar tipo» (TIP-01, BLQ-01). */
.bw-type { font-size: 13px; line-height: 19px; color: var(--body-2); }
.bw-type .linkbtn { font-size: 13px; }
/* Nombre, nota y minutos al final de la ventana (BLQ-05); el reparto de una pareja, a media fila. */
.form__grid.form__grid--3, .modal .form__grid.form__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form__grid--4 > .form__row--wide { grid-column: span 2; }
/* Lo que no está en la librería, en la fila de la ventana (DIA-07). */
.exrow__ex--input:has(.exrow__miss) { flex-wrap: wrap; row-gap: 2px; }
.exrow__miss { display: block; flex: 1 1 100%; margin-top: 2px; font-size: 12px; font-weight: 500; line-height: 16px; color: var(--muted); }
/* Una estación vacía, en la ventana y en la lectura (DIA-05). */
.station__empty { color: var(--warn); }
.wr__items > li.wr__empty .wr__name, .wr__items > li.wr__empty .wr__rx { color: var(--muted); font-weight: 500; }
/* El nombre de un ejercicio enlazado abre su ficha (DIA-13). */
.wr__ex { color: inherit; text-decoration: none; }
.wr__ex:hover { color: var(--vink); text-decoration: underline; }
/* La cabecera de un bloque abre su ventana (DIA-11): en el escritorio, como antes; el tipo y los minutos van en línea. */
.wr__open { color: inherit; text-decoration: none; }
.wr__open:hover { color: var(--vink); }
.wr__meta { display: contents; }
/* «Aplicárselo también»: solo lo que difiere de cada bloque que choca (APL-04). */
.applydiff { list-style: none; margin: 0; padding: 0 0 0 10px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 19px; color: var(--body-2); }
/* «Deshacer» dentro del aviso de después de quitar un bloque (F-T3-3). */
.alert form { display: inline; margin-left: 6px; }
.alert form .linkbtn { font-size: 14px; }
/* Un botón de verdad en un aviso va en su línea, debajo del texto (la franja de soporte, «Entendido», «Enviarle las
   instrucciones»): en línea agrandaba la línea en la que caía y el icono dejaba de cuadrar con la primera (22 de octubre de 2026). */
.alert > div > form:has(.btn) { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
/* El selector de tipos: «Los de HYROX · Ver todos» junto al buscador y aire bajo «Los que más usas» (TIP-01, TIP-02). */
[data-type-picker] .typeall { margin: -4px 0 0; }
.typefrequent { margin-bottom: 12px; }
/* Plantillas: «De HYROX · Todas» y el buscador (PLA-02). */
.tplbar { align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.tplbar .search { flex: 1 1 220px; max-width: 360px; }
@media (max-width: 960px) {
    /* DIA-11 y PAT-T3-4: la cabecera del bloque en una línea (letra y nombre, que abre la ventana) y debajo, en pequeño,
       el tipo, los minutos y «Cambia»; sin el lápiz: queda solo «…». */
    .wr__head { flex-wrap: wrap; row-gap: 2px; }
    .wr__head h3 { flex: 1 1 0; min-width: 0; }
    .wr__head .wr__pen { display: none; }
    .wr__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 100%; order: 3; font-size: 12px; }
    .wr__meta .wr__min { margin-left: 0; font-size: 12px; }
    /* BLQ-10: «Cantidad» y «Carga» en dos columnas; sin carga, el nombre y la cantidad en una línea. */
    .exrow, .exrows--3 .exrow, .exrows--v .exrow, .exrows--3.exrows--v .exrow, .exrows--lead .exrow, .exrows--lead.exrows--3 .exrow, .station .exrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; }
    .exrow > .exrow__ex { grid-column: 1 / 3; }
    .exrow > .exrow__more { grid-column: 3; grid-row: 1; }
    .exrow > .exrow__f { grid-column: auto; }
    .exrow > .exrow__lead, .exrow > .exrow__ver { grid-column: 1 / -1; }
    .exrows:not(.exrows--3):not(.exrows--lead) .exrow > .exrow__ex, .station .exrow > .exrow__ex { grid-column: 1; }
    .exrows:not(.exrows--3):not(.exrows--lead) .exrow > .exrow__f:not(.exrow__ver), .station .exrow > .exrow__f { grid-column: 2; grid-row: 1; }
    .exrows:not(.exrows--3):not(.exrows--lead) .exrow > .exrow__f:not(.exrow__ver) .exrow__lab, .station .exrow > .exrow__f .exrow__lab { display: none; }
    .form__grid.form__grid--3, .modal .form__grid.form__grid--3 { grid-template-columns: minmax(0, 1fr); }
    .form__grid--4 > .form__row--wide { grid-column: 1 / -1; }
}

/* ── Entrenamiento TS · revisión UX 22 (22 de octubre de 2026, noche) ─────────────────────────────────────────────
   El selector de muelles por colores (.spick), el aparato con sus valores fijos (.seg-field), «Más» en tres grupos y
   la fila del móvil más baja (.step-more__groups, PAS-08 y PAS-10), la cabecera de la clase (.classhead, DIA-TS-03),
   la vista previa del socio (.memberhead), el temporizador con variantes, precauciones y progreso (.splayer, PAP-03,
   PAP-05 y TV-03), Aparatos (APA-02 y APA-03) y el bloque bloqueado (.lk-steps, PLB-04). */
.spick { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.spick__colors { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.spick__colors[hidden] { display: none; }
.spick__one { display: inline-flex; align-items: center; gap: 2px; }
.spick__one:not(.is-on) .spring { opacity: .55; }
.spick__btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1; cursor: pointer; }
@media (pointer: coarse) { .spick__btn { width: 40px; height: 40px; } .checks--chips .check { min-height: 40px; } }
.spick__btn:hover { border-color: var(--violet); color: var(--vink); }
.spick__btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; }
.spick__inherit { color: var(--muted); }
.steps-app .form__grid--4 > .steps-app__springs { grid-column: span 2; }
.steps-app__setup { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 4px; }
.seg-field { display: flex; flex-direction: column; gap: 4px; }
.seg-field[hidden] { display: none; }
.seg-field__label { font-size: 12px; font-weight: 600; color: var(--body-2); }
.seg--sm .seg__opt span { min-width: 0; min-height: 32px; padding: 4px 10px; font-size: 13px; }
.seg--sm .seg__opt:first-child input:checked + span { background: var(--line); color: var(--body-2); }
.step-more__full { grid-column: 1 / -1; }

/* «Más» de un paso: tres grupos (lo de la máquina y la transición; para quien lo necesite; lo que dices). */
.step-more__groups { display: flex; flex-direction: column; gap: 12px; padding: 10px 0 4px; }
.step-more__group { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; align-items: end; padding-top: 10px; border-top: 1px dashed var(--line); }
.step-more__group:first-child { padding-top: 0; border-top: 0; }
.step-more__title { grid-column: 1 / -1; margin: 0; font: 600 12px/16px var(--font-display); color: var(--muted); text-transform: none; }
.step-more__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12px; color: var(--body-2); }
.step-more__field[hidden] { display: none; }
.step-more__lab { font-size: 12px; font-weight: 600; color: var(--body-2); }
.step-more__wide { grid-column: span 2; }
.step-more__inline { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--body-2); }
.step-more__breath { grid-column: 1 / -1; }
.step-more__breath > summary { list-style: none; cursor: pointer; display: inline-flex; min-height: 32px; align-items: center; }
.step-more__breath > summary::-webkit-details-marker { display: none; }
.step-more__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin-top: 6px; }
.step-more .vchip .spring { margin-right: 2px; }
.checks--chips { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.checks--chips .check { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 2px 10px 2px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: 13px; }
.checks--chips .check:has(input:checked) { border-color: var(--violet); background: var(--tint); color: var(--vink); }
@media (max-width: 960px) {
    /* PAS-10: el paso y «…» arriba; «Cuánto» y «Lado» en una fila, con su nombre; «Más», en una línea con su resumen.
       (Más específico que la regla de BLQ-10 de T3, que pone el campo de una fila sin carga junto al nombre.) */
    .exrows.exrows--steps .exrow.exrow--step { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; }
    .exrows.exrows--steps .exrow.exrow--step > .exrow__ex { grid-column: 1 / 3; grid-row: 1; }
    .exrows.exrows--steps .exrow.exrow--step > .exrow__more { grid-column: 3; grid-row: 1; }
    .exrows.exrows--steps .exrow.exrow--step > .exrow__f.exrow__f--qty:not(.exrow__ver) { grid-column: 1; grid-row: 2; }
    .exrows.exrows--steps .exrow.exrow--step > .exrow__f.exrow__f--side:not(.exrow__ver) { grid-column: 2 / 4; grid-row: 2; }
    .exrows.exrows--steps .exrow.exrow--step > .exrow__f:not(.exrow__ver) .exrow__lab { display: block; }
    .exrows.exrows--steps .exrow.exrow--step > .exrow__ver { grid-column: 1 / -1; grid-row: 3; }
    .step-more__group, .step-more__pair { grid-template-columns: minmax(0, 1fr); }
    .step-more__wide { grid-column: auto; }
    .steps-app .form__grid--4 > .steps-app__springs { grid-column: 1 / -1; }
}

/* La cabecera de la clase: los datos en texto normal; cuándo la ve el socio, las precauciones y si es sensible, en insignias. */
a.classhead, div.classhead { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 4px; color: var(--body-2); text-decoration: none; font-size: 13px; line-height: 18px; }
a.classhead:hover .classhead__edit { text-decoration: underline; }
.classhead__data { color: var(--ink); }
.classhead__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.classhead__badges .pill { display: inline-flex; align-items: center; gap: 4px; }
.classhead__note { color: var(--body-2); }
.classhead__edit { font-size: 13px; }

/* La vista previa del socio: su cabecera. */
.memberhead { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 16px; margin: 0; }
.memberhead > div { display: flex; flex-direction: column; gap: 2px; }
.memberhead dt { font-size: 12px; font-weight: 600; color: var(--muted); }
.memberhead dd { margin: 0; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.memberhead__cautions { margin: 0; color: var(--body-2); }
.spick__text { max-width: 280px; }

/* El temporizador: progreso, variantes, precauciones y, en el cambio de muelles, los muelles en el sitio del reloj. */
.splayer { grid-template-areas: "progress progress" "now clock" "next next" "controls controls" "awake awake" "list list"; }
.splayer__progress { grid-area: progress; margin: 0; font-size: 13px; font-weight: 600; color: var(--vink); }
.splayer__awake { grid-area: awake; margin: 0; }
.splayer__awake[hidden], .splayer__variants[hidden], .splayer__cautions[hidden] { display: none; }
.splayer__variants { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 21px; color: var(--body-2); }
.splayer__variants .lvl { margin-left: 0; margin-right: 6px; }
.splayer__cautions { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.splayer.is-change.is-springs .springs--big .spring { min-height: 64px; font-size: clamp(26px, 3vw, 44px); line-height: 1.2; padding: 6px 20px 6px 14px; }
.splayer.is-change.is-springs .springs--big .spring::before { width: 32px; height: 32px; }
.splayer.is-change.is-springs .splayer__clock { font-size: clamp(40px, 5vw, 72px); }
.splayer:fullscreen { overflow-y: auto; padding: 24px 32px; background: var(--white); }
.splayer--tv:fullscreen { background: var(--ink-2); }
.splayer--tv .splayer__progress { color: var(--lime); }
.splayer--tv .splayer__variants { color: var(--soft-text); font-size: clamp(16px, 1.6vw, 24px); line-height: 1.35; }
.splayer--tv .splayer__cautions .pill { background: var(--ink); color: var(--white); }
.splayer--tv.is-change.is-springs .springs--big .spring { min-height: 90px; font-size: clamp(34px, 4.4vw, 72px); }
@media (max-width: 960px) {
    .splayer { grid-template-areas: "progress" "now" "clock" "next" "controls" "awake" "list"; }
}
.tv-more-timer > summary { display: inline-flex; width: auto; padding: 0 14px; border: 1px solid var(--ink-line); border-radius: 999px; }

/* Aparatos: cada color con su carga, sin partirse; una fila por muelle (color, cuántos, lo que pesa). */
.springs--pairs { gap: 4px 12px; }
.springs__pair { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.springs-edit { display: flex; flex-direction: column; gap: 8px; }
.springs-edit__head, .springs-edit__row { display: grid; grid-template-columns: minmax(0, 1.2fr) 90px minmax(0, 1.2fr); gap: 8px; }
.springs-edit__row[hidden] { display: none; }
.springs-edit__head { font-size: 12px; font-weight: 600; color: var(--muted); }
.springs-edit > .linkbtn { align-self: flex-start; }
@media (max-width: 960px) {
    .springs--pairs { flex-direction: column; align-items: flex-start; }
}

/* El bloque de una plantilla bloqueada: «Hasta» tocando la postura; lo de después, atenuado; el cierre, aparte. */
.lk-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.lk-steps > li { border-bottom: 1px dashed var(--line); }
.lk-steps__pick { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; width: 100%; min-height: 44px; padding: 6px 4px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; text-align: left; }
button.lk-steps__pick { cursor: pointer; }
button.lk-steps__pick:hover { background: var(--row-alt); }
button.lk-steps__pick[aria-pressed="true"] { background: var(--tint); color: var(--vink); font-weight: 600; }
.lk-steps__n { font-size: 12px; font-weight: 700; color: var(--muted); }
.lk-steps > li.is-after { opacity: .45; }
.lk-steps--close { border-top: 0; }
.lk-steps--close .lk-steps__pick { color: var(--body-2); }
.lk-steps__close-head { margin: 4px 0 0; }
.lk-release { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 4px; }

/* Entrenamiento T5 · copiar y repetir (22 de octubre de 2026; prototipo 17, k00 a k06 y f01). */
/* La casilla de un día repetido enlazado dice a cuál sigue (k06). */
.wk__from .is-linked, .linecard .is-linked { color: var(--vink); }
/* Los días de las ventanas de copiar y repetir: fichas que parten línea; el selector de otra semana, en una fila. */
.cpdays { flex-wrap: wrap; }
.cpweek { align-items: center; flex-wrap: wrap; margin: 4px 0 0 28px; }
.cpweek .input { width: auto; min-width: 170px; }
/* Ajustar una copia al lado de su original (k03): dos columnas, la copia con el borde violeta. */
.cmpcopy__lead { margin: 0; }
.cmpcopy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.cmpcopy__col { display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-box); min-width: 0; }
.cmpcopy__col--after { border-color: var(--violet); box-shadow: 0 0 0 3px var(--lavender); }
.cmpcopy__col > h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; font-size: 13px; line-height: 18px; color: var(--muted); font-weight: 600; }
@media (max-width: 1180px) {
    .cmpcopy { grid-template-columns: minmax(0, 1fr); }
}

/* ── Entrenamiento T7 · revisión UX 23 (22 de octubre de 2026): las preguntas del texto pegado en su sitio ──────────
   Una pregunta, una fila debajo de lo que pregunta (.ask: lo que pregunta a la izquierda y sus respuestas a la derecha;
   en el móvil, debajo, a media fila), la línea «Pegado · Ver el texto», la franja del lote, la vista previa de la
   semana con sus casillas y su lectura, «Revisar las N preguntas», lo aprendido en la ficha del ejercicio y el cuadro
   del día en el móvil con «Ordenar en bloques» a la vista (PEG-01, PRE-02, PRE-10, SEM-04, SEM-05, ALI-01). */
.ask { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin-top: 4px; padding: 8px 12px; border-radius: var(--r-box); background: var(--warn-bg); font-size: 13px; line-height: 19px; }
.wr__items > li > .ask { grid-column: 1 / -1; }
.wr__block > .ask { grid-column: 2; margin: 2px 0 4px; }
.ask__what { display: flex; gap: 8px; align-items: flex-start; flex: 1 1 260px; min-width: 0; margin: 0; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.ask__what > svg { flex: none; margin-top: 2px; color: var(--warn); }
.ask__do { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ask__do form { display: contents; }
.ask__create { font-size: 13px; }
.pasted { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; color: var(--muted); }
.pasted .linkbtn { font-size: 13px; }
.asksum .toned__text p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.asksum .toned__text .small { flex-basis: 100%; color: var(--body-2); }
.pastestrip__do { align-items: center; }
.pastestrip { position: relative; }
.pastestrip > .toned__text { padding-right: 48px; }
.pastestrip__close { position: absolute; top: 8px; right: 8px; }
.pastestrip .linkbtn, .pubasks .linkbtn { font-size: inherit; }
.pubasks { display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; margin: 0; }
.pubasks > svg { flex: none; margin-top: 2px; }
.weekread__pick { margin: 0; align-self: center; }
.weekread__pick .check__text b { font-weight: 700; }
.weekread__more { margin-top: 4px; }
.weekread__more > summary { cursor: pointer; font-size: 13px; color: var(--vink); font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.weekread__more .wr { margin-top: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-box); }
.weekread__asks { margin: 4px 0 0; padding-left: 18px; }
.review__where { margin: 0; font-size: 14px; line-height: 20px; }
.review__row { margin: -6px 0 0; }
.review__all { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-box); }
.review__all > summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.review__all ul { margin: 8px 0; padding-left: 18px; }
.pickex__row--top { background: var(--tint); border-radius: var(--r-box); padding: 4px 8px; margin-bottom: 4px; border-top: 0; }
.learned { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.learned > li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.learned > li:first-child { border-top: 0; }
.learned > li > span { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.bw-learn { margin: 4px 0 8px; }
.linecard > .pill { align-self: flex-start; }   /* «N preguntas» en la tarjeta del móvil de la semana (SEM-01) */
.wpaste__help { margin-top: 6px; }
.wpaste__help > summary { cursor: pointer; font-size: 13px; color: var(--vink); font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.wpaste .wtext__area--day { min-height: 300px; overflow-y: auto; }
@media (max-width: 960px) {
    .ask__what { flex-basis: 100%; }
    .ask__do { width: 100%; }
    .ask__do .btn { flex: 1 1 auto; min-height: 44px; }   /* a lo que ocupe cada uno: los cortos comparten línea */
    .ask__create { min-height: 44px; display: inline-flex; align-items: center; }
    /* PEG-01: 6 filas que crecen al escribir y, con texto, «Ordenar en bloques» pegado encima de la barra de la app. */
    .wpaste .wtext__area--day { min-height: 156px; }
    .wpaste.has-text .actbar { position: sticky; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); z-index: 3; box-shadow: 0 -6px 16px rgb(32 36 43 / 8%); border-radius: 0; }
    .wpaste .wpaste__saved { display: grid; flex-basis: 100%; }
    .weekread__more .wr { padding: 8px; }
    .pastestrip__do { width: 100%; }
}

/* Entrenamiento T4 · qué se registra en cada bloque y la pizarra por nivel (22 de octubre de 2026; prototipo 17,
   r01, r02, c02 y el pie de e03/e04): las filas de «Qué se registra» (bloque, qué y ranking), las de la ficha de la
   disciplina, «Cambiar» en el pie de la ventana de un bloque (BLQ-02) y la pizarra del panel. */
.logrows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-box); }
.logrow { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 8px 14px; align-items: center; padding: 12px; border-top: 1px solid var(--line); }
.logrow:first-child { border-top: 0; }
.logrow.is-focus { background: var(--tint); box-shadow: inset 3px 0 0 var(--violet); }
.logrow__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.logrow__name b { font-weight: 600; color: var(--ink); }
.logrow__what { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.logrow__rank { min-height: 44px; white-space: nowrap; }
.logrows--line .logrow, .logrows--levels .logrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; }
.logrows--levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.logrows--levels .logrow { grid-template-columns: minmax(0, 1fr) auto; }
.logrows--levels .logrow:nth-child(2) { border-top: 0; }
.logrows--levels .logrow:nth-child(even) { border-left: 1px solid var(--line); }
.logrules__off { margin-right: auto; }
.regfoot__change { margin-left: auto; min-height: 44px; flex: none; }
.logmore { margin-top: 8px; }
.logmore > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--vink); }
.boardbar { flex-wrap: wrap; margin: 4px 0 8px; }
.boardtable { margin-top: 12px; }
.boardtable h3 { font-size: 15px; line-height: 20px; margin: 0 0 6px; }
.boardtable h3 .small { font-weight: 400; }
@media (max-width: 960px) {
    .logrow { grid-template-columns: auto minmax(0, 1fr); }
    .logrow__what, .logrow__rank { grid-column: 1 / -1; }
    .logrows--line .logrow, .logrows--levels .logrow { grid-template-columns: minmax(0, 1fr); }
    .logrows--levels { grid-template-columns: minmax(0, 1fr); }
    .logrows--levels .logrow:nth-child(2) { border-top: 1px solid var(--line); }
    .logrows--levels .logrow:nth-child(even) { border-left: 0; }
    .logrows--levels .logrow__rank { grid-column: auto; }
    .logrules__off { flex-basis: 100%; min-height: 44px; }
}
/* En la comparación, el bloque se abre desde su título (k03): sin el lápiz, que en la columna estrecha bajaba de línea. */
.cmpcopy .wr__pen { display: none; }
.cmpcopy__col--after .wr__open { color: var(--vink); }
@media (max-width: 1180px) {
    .cmpcopy__col--after { order: -1; }   /* en una columna, primero la copia (lo que se cambia) */
}

/* ─────────────────────────────────────────────────────────────────────────────
   Entrenamiento T8 (22 de octubre de 2026): «Mis clases de hoy», «Cómo fue»,
   el apunte del día y el Modo TV bloque a bloque (prototipos 17 t01 a t04 y
   11 t01 a t03, m01 y m02; H-22 y H-23).
   ───────────────────────────────────────────────────────────────────────────── */

/* Modo TV: el bloque que va y el siguiente, junto al reloj (H-23). */
.tv-now { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tv-now__block { margin: 0; font-size: clamp(22px, 2.4vw, 38px); line-height: 1.2; color: var(--white); }
.tv-now__next { margin: 0; font-size: clamp(16px, 1.4vw, 22px); color: var(--soft-text); }
.tv-now .tv-timer__round { margin-top: 4px; }
.tv-awake { color: var(--soft-text); width: 100%; margin: 0; }
/* Las tarjetas a toda la altura de la tele y la del bloque que va, marcada. */
.tv-main { min-height: 0; }
.tv-blocks { flex: 1 1 auto; align-items: stretch; grid-auto-rows: 1fr; }
.tv-block { display: flex; flex-direction: column; min-height: 0; }
.tv-block.is-current { border-color: var(--lime); box-shadow: inset 0 0 0 1px var(--lime); }
.tv-block__pick { display: inline; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tv-block__pick:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; border-radius: 6px; }
/* Las cantidades sin partir: cada trozo entre « · » en una línea («70–75 %», «6 reps»). */
.tv-block li .tv-qty { margin-left: 6px; color: var(--soft-text); }
.tv-block li .tv-qty span { margin-left: 0; }
.tv-nowrap { white-space: nowrap; }
/* La pizarra por nivel: el primero en lista; los demás, sus primeros en una línea. «Hoy se apunta», debajo. */
.tv-board__level { margin: 0 0 4px; color: var(--soft-text); font-size: 15px; font-weight: 600; }
.tv-board__others { margin: 10px 0 0; color: var(--soft-text); font-size: 16px; line-height: 24px; }
.tv-board__others b { color: var(--white); margin-right: 4px; }
.tv-board__others strong { color: var(--lime); font-variant-numeric: tabular-nums; }
.tv-today { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--ink-2); border: 1px solid var(--ink-line); color: var(--white); font-size: 16px; line-height: 24px; }
.tv-today b { color: var(--lime); margin-right: 4px; }
/* En una clase de pasos sin pizarra, el siguiente paso en grande (TS, revisión UX 22). */
.tv-nextstep { padding: 18px 20px; border: 1px solid var(--ink-line); border-radius: 16px; background: var(--ink-2); }
.tv-nextstep__name { margin: 0; font-family: var(--font-display); font-size: clamp(28px, 3vw, 48px); line-height: 1.15; color: var(--white); }
.tv-nextstep__dose { margin: 6px 0 12px; font-size: clamp(18px, 1.6vw, 26px); color: var(--soft-text); }
.tv-nextstep__dose:empty { display: none; }
.tv-nextstep__name.is-last { font-family: var(--font-ui); font-size: clamp(18px, 1.6vw, 26px); color: var(--soft-text); }

/* «Mis clases de hoy» (t01): una tarjeta por clase, la siguiente marcada, y las acciones arriba (H-22). */
.myclasses { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-bottom: 20px; }
.myclass.is-next { border: 1.5px solid var(--violet); }
.myclass__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.myclass__when { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; line-height: 24px; }
.myclass__title { margin: 6px 0 2px; font-weight: 600; font-size: 16px; line-height: 22px; }
.myclass__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.myclass__pending { margin-top: 12px; }
.myclass__why { margin-bottom: 14px; }
.myclass__msg { margin: 0 0 12px; color: var(--body-2); }
.myclass__coach { margin-top: 16px; }
@media (max-width: 960px) {
    .myclasses { grid-template-columns: 1fr; }
    .myclass__actions > .btn { flex: 1 1 calc(50% - 4px); justify-content: center; }
    .myclass__actions > .myclass__wide { flex-basis: 100%; }
}

/* «Cómo fue» (m02): cifras, el esfuerzo en barras, lo que contó quien la dio y los comentarios. */
.cf-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin: 0 0 8px; }
.cf-facts > div { display: flex; flex-direction: column; gap: 2px; }
.cf-facts dt { font-size: 12px; line-height: 16px; color: var(--muted); }
.cf-facts dd { margin: 0; font-size: 15px; line-height: 21px; font-weight: 600; }
.cf-h { margin: 20px 0 8px; font-size: 15px; line-height: 20px; }
.cf-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cf-bars li { display: grid; grid-template-columns: 22px minmax(0, 1fr) 28px; align-items: center; gap: 10px; font-size: 13px; }
.cf-bars li b { text-align: right; font-variant-numeric: tabular-nums; }
.cf-bars .bar { width: 100%; }
.cf-quote { margin: 0 0 10px; padding: 10px 14px; border-left: 3px solid var(--violet-line); border-radius: 0 10px 10px 0; background: var(--row-alt); }
.cf-quote.is-pending { border-left-color: var(--violet); background: var(--tint); }
.cf-quote--note { border-left-color: var(--lime-ink); background: var(--lime-tint); }
.cf-quote p { margin: 0 0 4px; }
.cf-quote footer { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; color: var(--muted); }
.cf-reply { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--line); }
.inline-form { display: inline; }
@media (max-width: 600px) {
    .cf-facts { grid-template-columns: 1fr; }
}

/* El apunte para la próxima vez, en el día de la disciplina. */
.linenote__actions { display: inline-flex; align-items: center; gap: 12px; }

/* ─────────────────────────────────────────────────────────────────────────────
   Entrenamiento TC · el copiloto por semanas y disciplinas (22 de octubre de 2026;
   prototipo 11, i01 a i06, c02, c05 y s02): la pauta del día, pedir un borrador,
   la franja de lo que prepara, «Por revisar», ajustar un bloque, las comprobaciones
   sin IA (TC-1) y la pauta y las fases en la ficha de la disciplina (TC-0).
   ───────────────────────────────────────────────────────────────────────────── */
.daypattern { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 12px; color: var(--body-2); }
.daypattern > svg { color: var(--vink); flex: none; }
.daypattern b { color: var(--ink); }
.copilot-ask { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.copilot-ask__head { display: flex; align-items: flex-start; gap: 10px; }
.copilot-ask__head > svg { color: var(--vink); flex: none; margin-top: 2px; }
.copilot-ask__head > div { display: flex; flex-direction: column; gap: 2px; }
.copilot-ask__foot { justify-content: flex-end; }
.copilot-why .toned__text > div { display: flex; flex-direction: column; gap: 4px; }
.copilot-why p { margin: 0; }
.copilot-why__asks { margin: 0; padding-left: 18px; }
.copilot-review { margin: 0 0 16px; align-items: center; }
.copilot-review form { display: inline-flex; }
.copilot-strip { align-items: center; }
.copilot-strip__body { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; }
.copilot-strip__body p { margin: 0; }
.copilot-strip__bar { display: block; width: 100%; height: 6px; }
.copilot-strip__track { fill: var(--violet-line); }
.copilot-strip__done { fill: var(--violet); }
.copilot-strip form { display: inline-flex; }
.copilot-days { list-style: none; margin: 12px 0 16px; padding: 0; display: flex; flex-direction: column; }
.copilot-days li { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 4px 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.copilot-days li > .small { grid-column: 2; color: var(--muted); }
.copilot-days li.is-off > b { color: var(--muted); font-weight: 600; }
.copilot-knows { margin: 4px 0 12px; }
.copilot-knows summary { cursor: pointer; color: var(--vink); font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
.copilot-knows ul { margin: 6px 0 0; padding-left: 18px; }
.copilot-chips { margin: 0 0 12px; }
.copilot-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 12px; }
.copilot-compare > section { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.copilot-compare > section.is-after { border: 1.5px solid var(--violet); }
.copilot-compare h3 { margin: 0 0 8px; font-size: 14px; line-height: 20px; color: var(--muted); }
.wchecks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.wchecks__item { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; }
.wchecks__item > div { display: flex; flex-direction: column; gap: 2px; }
.wchecks__item span { color: var(--body-2); font-size: 13px; line-height: 18px; }
.wchecks__item--ok > svg { color: var(--ok); }
.wchecks__item--dato > svg { color: var(--info); }
.wchecks__item--aviso > svg { color: var(--warn); }
.wk__cell .wk__pattern { color: var(--muted); }
.wk__cell.is-copilot { border-style: solid; border-color: var(--violet-line); background: var(--tint); }
.wk__cell.is-copilot b { color: var(--vink); }
.linepattern { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 8px 12px; margin: 0 0 16px; }
.linepattern label { font-weight: 600; color: var(--body-2); }
.linephases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 12px; }
@media (max-width: 960px) {
    .copilot-compare { grid-template-columns: 1fr; }
    .linephases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .copilot-days li { grid-template-columns: 1fr; }
    .copilot-days li > .small { grid-column: 1; }
    .copilot-review > form, .copilot-review > form .btn { flex: 1 1 auto; }
}

/* ── Entrenamiento T6 · la plantilla de Excel y su importación (22 de octubre de 2026; SQL 66; prototipo 17, i01 a i06) ── */
.xlsx-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.xlsx-steps .card { margin: 0; }
.xlsx-steps__do { display: flex; flex-wrap: wrap; gap: 10px; }
.xlsx-steps__fixed { margin-top: 4px; }
.xlsx-howto { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.xlsx-howto li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; }
.xlsx-howto li > svg { color: var(--ok); margin-top: 2px; }
.xlsx-howto li:last-child > svg { color: var(--muted); }
.xlsx-howto li span { display: flex; flex-direction: column; gap: 2px; color: var(--body-2); }
.xlsx-howto li strong { color: var(--ink); }
.xlsx-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 132px; padding: 20px 16px; border: 2px dashed var(--ctrl); border-radius: var(--r-box); text-align: center; color: var(--ink); cursor: pointer; }
.xlsx-drop > svg { color: var(--vink); }
.xlsx-drop:hover, .xlsx-drop:focus-within { border-color: var(--violet); background: var(--tint); }
.xlsx-drop.is-picked { border-style: solid; border-color: var(--violet); background: var(--tint); }
.xlsx-drop__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.xlsx-problems, .xlsx-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.xlsx-problems .toned__text p, .xlsx-notes .toned__text p { display: flex; flex-direction: column; gap: 2px; }
.xlsx-problems__do { margin-top: 16px; flex-wrap: wrap; }
.xlsx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.xlsx-item { padding: 14px 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.xlsx-item:first-child { border-top: 0; }
.xlsx-item.is-warn { background: var(--warn-bg); border-radius: var(--r-box); border-top-color: transparent; }
.xlsx-item.is-warn + .xlsx-item { border-top-color: transparent; }
.xlsx-item.is-quiet .xlsx-item__title strong { color: var(--body-2); }
.xlsx-item__head { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 4px 12px; align-items: center; }
.xlsx-item__day { color: var(--body-2); font-weight: 500; }
.xlsx-item__title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.xlsx-item__title strong { overflow-wrap: anywhere; }
.xlsx-item__title .pill { white-space: nowrap; }
.xlsx-item > .small, .xlsx-item > details { margin-left: 144px; }
.xlsx-item__note { color: var(--body-2); }
.xlsx-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.xlsx-side .card { margin: 0; }
.xlsx-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-top: 16px; padding: 14px 20px; background: var(--white); border-radius: var(--r-card); }
.xlsx-foot > p { display: flex; align-items: flex-start; gap: 8px; margin: 0; flex: 1 1 320px; }
.xlsx-foot > p > svg { color: var(--ok); flex: none; margin-top: 2px; }
.xlsx-foot > p > span { display: flex; flex-direction: column; }
.xlsx-foot .form-foot { flex: 0 0 auto; }
@media (max-width: 1180px) {
    .xlsx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .xlsx-steps > .card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
    .xlsx-steps, .xlsx-side { grid-template-columns: 1fr; }
    .xlsx-item__head { grid-template-columns: 1fr; }
    .xlsx-item > .small, .xlsx-item > details { margin-left: 0; }
    .xlsx-steps__do > .btn, .xlsx-problems__do > .btn { flex: 1 1 100%; justify-content: center; }
    /* El pie con «Crear N entrenos» siempre a mano, encima de la barra de abajo (i03m). */
    .xlsx-foot { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 5; padding: 12px 16px; box-shadow: 0 -6px 16px rgb(32 36 43 / 10%); }
    .xlsx-foot > p { display: none; }
    .xlsx-foot .form-foot:not(.modal__body .form-foot) { position: static; flex: 1 1 100%; margin: 0; padding: 0; background: none; }
    .xlsx-foot .form-foot > .btn { flex: 1 1 100%; justify-content: center; }
}

/* ── Entrenamiento T5 · revisión UX 24 (22 de octubre de 2026): copiar y repetir ──────────────────────────────────
   El «…» abierto de una casilla, por encima de los de las casillas de debajo (MEN-01); la franja de lo copiado con
   «Deshacer» y su aspa (DES-01); la línea «Copia de HYROX · Ver al lado» bajo el título (CMP-01); la comparación a
   todo el ancho, con las dos tarjetas de la derecha debajo (CMP-04); la estructura del original y lo que la copia ya
   no tiene, en la columna del bloque (CMP-02); el título de un bloque de la comparación, a 44 px en pantalla táctil
   (CMP-05); y la lista de semanas de «Copiar de otra semana» (SEM-03). */
.wk__menu[open] { z-index: 6; }
.cpstrip__do { align-items: center; flex-wrap: nowrap; }
.cpstrip__close { display: flex; }
.whead__copy { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin: 0; color: var(--muted); }
.whead__copy .linkbtn { font-size: inherit; }
.whead__copy.is-moved { color: var(--vink); font-weight: 600; }   /* PD-T5-2: el original ha cambiado */
.wr__block > .wr__extra { grid-column: 2; margin: 0; }
@media (min-width: 961px) {
    .dgrid--compare { grid-template-columns: minmax(0, 1fr); }
    .dgrid--compare > .stack:last-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
    .dgrid--compare > .stack:last-child > * { margin: 0; min-width: 0; }
}
@media (pointer: coarse) {
    .cmpcopy .wr__open { display: inline-block; padding-block: 12px; margin-block: -12px; }
}
.cpweeks .check.is-off { color: var(--muted); cursor: default; }
.cpweeks__next { margin: 6px 0 0; font-weight: 600; color: var(--body-2); }
@media (max-width: 960px) {
    .cpstrip__do { width: 100%; flex-wrap: wrap; }
    .cpstrip.is-old { display: none; }
}
/* ── Entrenamiento T8 · revisión UX 26 (22 de octubre de 2026): la tele de la sala y «Mis clases de hoy» ───────── */
/* TV8-01 y TV8-10: en la sala, los mandos se esconden solos (is-idle en body.tv, tv.js) y vuelven al tocar. */
.tv-timer__controls { transition: opacity .3s ease; }
body.tv.is-idle .tv-timer__controls,
body.tv.is-idle .tv-awake,
body.tv.is-idle .splayer__sound,
body.tv.is-idle .splayer__keys,
body.tv.is-idle .tv-more-timer > summary,
body.tv.is-idle .tv-exit { opacity: 0; pointer-events: none; }
body.tv.is-idle { cursor: none; }
.tv-adjust { flex-basis: 100%; }
.tv-adjust > summary { cursor: pointer; color: var(--soft-text); font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; }
.tv-adjust__fields { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 4px; }
.tv-timer__field[hidden] { display: none; }
/* TV8-02: el time cap, en lima y en grande. */
.tv-timer.is-timecap .tv-timer__round { color: var(--lime); font-weight: 700; font-size: clamp(28px, 5vh, 56px); letter-spacing: .04em; }
/* TV8-03: la cuenta atrás de antes de empezar, encima del reloj. */
.tv-timer { position: relative; }
.tv-countdown { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: Sora, Inter, system-ui, sans-serif; font-size: clamp(120px, 30vh, 320px); font-weight: 700; color: var(--lime); background: var(--ink); z-index: 2; }
.tv-countdown[hidden] { display: none; }
/* HOY-01: los botones de «Sin publicar», juntos y a la derecha (en el móvil, debajo). */
.myclass__pending-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.myclass__pending-actions form { margin: 0; }
/* CF-02: la marca de cada bloque frente al cap, una línea por bloque y nivel. */
.review-marks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.review-marks li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.review-marks strong { font-variant-numeric: tabular-nums; }

/* ── Entrenamiento TC · revisión UX 27 (22 de octubre de 2026): revisar los borradores del copiloto ─────────────
   «Por revisar» en naranja en la tira de días (TC-01); «Revisar los borradores · 1 de N» sobre el porqué y el pie
   de revisar (F-TC-1); las comprobaciones bajo el porqué en el móvil y primeras a la derecha en escritorio (TC-13);
   y la tabla «Uso» de /copiloto en tarjetas de dos columnas en el móvil, sin partir palabras (TC-28). */
.dayrow__dots i.d-revisar { background: var(--warn); }
.dayrow > .is-selected .dayrow__dots i.d-revisar { background: var(--warn-line); }
.cpreview { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 10px; color: var(--body-2); }
.cpreview > b { color: var(--ink); }
.cpreview__nav { display: inline-flex; gap: 6px; margin-left: auto; }
.cpreview__count { margin-right: auto; color: var(--warn); font-weight: 600; }
.actbar__group form { display: inline-flex; margin: 0; }
.cpchecks-m { display: none; }
.cpuse__total td { background: var(--white); font-weight: 700; }
@media (max-width: 960px) {
    .cpchecks-m { display: block; margin: 0 0 12px; }
    .cpchecks-d { display: none; }
}
@media (max-width: 640px) {
    .table--stack.cpuse tr { grid-template-columns: minmax(0, 1fr) auto; }
    .table--stack.cpuse td { overflow-wrap: normal; word-break: normal; }
    .table--stack.cpuse [data-label]::before { display: none; }
    .table--stack.cpuse .num, .table--stack.cpuse td.num { text-align: right; font-weight: 600; }
    .table--stack.cpuse td:nth-child(3), .table--stack.cpuse td:nth-child(4) { order: 2; color: var(--body-2); }
}/* CF-01: «Cómo fue · 2 comentarios sin ver» en la casilla de un día pasado. */
.wk__from .is-review, .linecard .is-review { color: var(--vink); font-weight: 600; }
/* CF-04: «Contestar» y «Visto» como botones, debajo de cada comentario. */
.cf-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cf-actions form { margin: 0; }
/* HOY-04: la píldora de estado, a la derecha del titular (no en su propia línea). */
.myclass__head { flex-wrap: nowrap; }
.myclass__head .pill { flex: none; margin-top: 2px; }
/* TV8-05: la tarjeta del bloque que va, el doble de ancha y con la letra según la altura de la tele. */
@media (min-width: 961px) {
    body.tv .tv-blocks { display: flex; flex-wrap: wrap; }
    body.tv .tv-block { flex: 1 1 0; min-width: 260px; }
    body.tv .tv-block.is-current { flex-grow: 2; }
    body.tv .tv-block.is-current ul { font-size: clamp(20px, 3.2vh, 40px); line-height: 1.25; }
    body.tv .tv-block.is-current li { line-height: 1.25; }
    body.tv .tv-block.is-current h2 { font-size: clamp(22px, 3vh, 36px); }
}
/* TV8-10: con el siguiente paso en grande en el lateral, sin la línea pequeña bajo el paso. */
body.tv .tv-grid:has(.tv-nextstep) .splayer__next { display: none; }

.wk__checks { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 12px 0 16px; color: var(--muted); }
.wk__checks > svg { color: var(--vink); }

/* Entrenamiento T4 · revisión UX 25 (22 de octubre de 2026): «Qué se registra» con «Apagar» a la izquierda aunque
   vaya detrás en el código (Intro envía «Guardar»), las casillas de los ejercicios con marca (REG-05), lo que no
   se puede cambiar con resultados (REG-01), «En la app» con el violeta del bloque (DIA-01), el pie de la ventana de un
   bloque en una línea en el móvil (PIE-02), la pizarra del equipo (PIZ-02 a PIZ-06) y los resultados de la clase en
   su ficha (SES-01). */
.logrules__off { order: -1; }
.logrow__marks { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
.logrow__marks[hidden], .logrow [data-crit][hidden] { display: none; }
.logrow .form__help.is-locked { color: var(--ink); }
.vlist--reg > li > svg { color: var(--vink); }
.vlist--reg > li.is-off > svg { color: var(--ctrl); }
.boardtable__table .boardtable__pos { width: 64px; }
.boardtable__table .boardtable__mark { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.boardtable__table .pill { margin-left: 6px; }
.boardtable__private { display: inline-flex; vertical-align: -2px; margin-left: 4px; color: var(--muted); }
.sresults__table td { vertical-align: top; }
.sresults__table .sresults__pos { width: 56px; text-align: center; }
.sresults__table td.sresults__pos { font: 700 15px/20px var(--font-display); color: var(--vink); }
.sresults__who { display: block; }
.sresults__cell { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.sresults__reps { display: flex; }
.sresults__reps[hidden] { display: none; }
.sresults .input--qty { width: 88px; }
.sresults .form-foot { margin-top: 12px; }
@media (max-width: 960px) {
    .regfoot { grid-template-columns: 18px minmax(0, 1fr) auto; padding: 6px 10px; }
    .regfoot__explain { display: none; }
    .regfoot__change { min-height: 40px; }
    .sresults .input--qty { width: auto; flex: 1 1 96px; min-width: 0; }
    .sresults__table .select { width: 100%; min-width: 0; }
    .sresults__table td.sresults__pos { width: auto; text-align: left; }
    .sresults__table .sresults__reps .input--qty { width: 96px; flex: none; }
    /* Al final de la lista y sin pegarse: pegado (M34) tapaba las tarjetas de los socios al deslizar. */
    .sresults .form-foot.form-foot--one { position: static; margin: 12px 0 0; padding: 0; background: none; }
}
.copilot-block { margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: var(--tint); color: var(--body-2); }
/* HOY-11: en pantalla táctil, el nombre de un ejercicio (abre su vídeo) gana zona de toque sin mover el texto. */
@media (pointer: coarse) { .wr__ex { padding: 13px 0; } }
/* CF-07: «Contar» al lado de su clase. */
.two__side .list li:has(> .btn) { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.two__side .list strong > a { color: inherit; text-decoration: none; }
.two__side .list strong > a:hover { color: var(--vink); text-decoration: underline; }

/* ── Entrenamiento T6 · revisión UX 28 (22 de octubre de 2026): XLS-08, XLS-14 y PAT-T6-4 ── */
.xlsx-side--one { grid-template-columns: minmax(0, 1fr); }
.xlsx-same { margin-top: 8px; }
.xlsx-same > summary { font-weight: 600; }
.xlsx-item .check { margin-top: 2px; }
.xlsx-item > .check { margin-left: 144px; }
@media (max-width: 960px) {
    .weekread__more > summary { min-height: 44px; display: flex; align-items: center; }
    .xlsx-item > .small, .xlsx-item > details, .xlsx-item > .check { margin-left: 0; }
}

/* ── Entrenamiento · pulido del 22 de octubre de 2026 ─────────────────────────────────────────────────────────────
   La franja de lo pegado o importado lleva el aspa en la fila de sus botones, como .cpstrip de T5 (antes iba encima,
   absoluta, y tapaba el final de «Deshacer la importación»); el reloj de la tele se mide por el ancho del temporizador
   y no de la pantalla (en la vista previa, una ventana, se montaba sobre el texto); y en el catálogo de Hyrapp de
   Plantillas, el nombre va en su línea y el estado y los botones debajo (en una tarjeta montada, con «Ver» y «Usar
   el…», el nombre salía cortado y los botones se salían). */
.pastestrip.cpstrip > .toned__text { padding-right: 0; }
.splayer { container-type: inline-size; }
.splayer--tv .splayer__clock { font-size: clamp(56px, 14cqi, 200px); }
.locked-cat > li { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
.locked-cat > li > .list__main { flex: 1 1 100%; }
.locked-cat > li > .pill { margin-right: auto; }
@media (max-width: 960px) {
    .splayer--tv .splayer__clock { font-size: clamp(56px, 28cqi, 200px); }
}

/* ───────────────────────────────────────────────────────────────────────────
   Preguntas y avisos (22 de octubre de 2026): la ventana de Hyrapp que pinta
   app.js (Hyrapp.ask / Hyrapp.tell) en lugar de confirm() y alert() del
   navegador. Es una .modal--sm: la pregunta de titular, la explicación debajo
   y «Cancelar» y el botón de la acción en el pie.
   ─────────────────────────────────────────────────────────────────────────── */
.modal--ask .modal__body { gap: 8px; padding-top: 24px; }
.ask__title { margin: 0; font: 600 18px/24px var(--font-display); color: var(--ink); overflow-wrap: anywhere; }
.ask__text { margin: 0; font-size: 15px; line-height: 22px; color: var(--muted); overflow-wrap: anywhere; }
.modal--ask .modal__body .edit-panel__actions { margin-top: 16px; }

/* ── Entrenamiento · el copiloto con varias disciplinas a la vez (22 de octubre de 2026, decisión del promotor) ────
   «Preparar la semana con el copiloto» lista las disciplinas que puede escribir quien mira: cada una se marca y, ya
   marcada, enseña sus días (los que faltan, marcados) con su pauta; sin marcar, sus días no se ven ni cuentan. En «Ver
   día a día» de un encargo de varias, cada día dice su disciplina. */
.cpmulti { display: flex; flex-direction: column; gap: 8px; }
.cpmulti__line { margin: 0; padding: 4px 14px; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--white); }
.cpmulti__line:has(.cpmulti__head input:checked) { border-color: var(--violet-line); background: var(--row-alt); }
.cpmulti__line:not(:has(.cpmulti__head input:checked)) .cpmulti__days { display: none; }
.cpmulti__line.is-off .cpmulti__head b { color: var(--muted); }
.cpmulti__head { min-height: 44px; padding: 8px 0; align-items: flex-start; }
.cpmulti__head .check__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cpmulti__head .small { color: var(--muted); }
.cpmulti__days { margin: 0 0 8px; }
.cpmulti__short { margin: 0; }
.weekread--multi > li { grid-template-columns: 112px minmax(0, 1fr) auto; }
.weekread__line { display: block; font-weight: 500; color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 960px) {
    .cpmulti__line { padding: 4px 12px; }
    .weekread--multi > li { grid-template-columns: 88px minmax(0, 1fr); }
}

/* ── Entrenamiento · crear un entreno (prototipo 18, validado el 22 de octubre de 2026; revisión UX 29; SQL 73) ─────
   El día vacío con las formas de empezar al mismo nivel (.start, .ways, .way; CE-1, VAC-01 a VAC-06), el bloque abierto
   en su sitio de la página (.wbk; no .bk, que es la lista de reservas; CE-3 a CE-7), lo que se abre de una fila a todo
   su ancho (.exrow__panel, BLQ-01), lo que se apunta dentro del bloque (.wbk__reg, CE-6), «+ Bloque · de un toque · o
   trae» (.addnext, DIA-01), las pestañas Plantillas y Benchmarks (.explain, .bmcard, .catgroup) y sus ventanas
   (.pick2, .bmpick, .mountnote). Calcado de UX-Hyrapp/18-Prototipo-crear-entreno/fuente/proto.css. */
.start { display: flex; flex-direction: column; gap: 16px; }
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 1600px) { .ways { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.way { display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; gap: 12px; align-items: start; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--white); color: var(--ink); text-decoration: none; }
.way[hidden] { display: none; }
.way:hover { border-color: var(--violet); box-shadow: 0 4px 14px rgb(32 36 43 / 6%); color: var(--ink); }
.way > svg:last-child { align-self: center; color: var(--muted); }
.way__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--tint); color: var(--vink); }
.way__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.way__text b { font: 600 15px/20px var(--font-display); }
.way__text > span { font-size: 13px; line-height: 18px; color: var(--body-2); }
.way__text small { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--vink); }
.way--wide { grid-column: 1 / -1; }
.way--open { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 2px solid var(--violet); }
.way--open:hover { box-shadow: none; }
.way__top { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.way__top .linkbtn { white-space: nowrap; }
.way__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; align-self: stretch; padding-top: 12px; border-top: 1px solid var(--line); }
.start .ai-teaser { align-self: flex-start; }
.wpaste--in { display: flex; flex-direction: column; gap: 10px; }
.wpaste--in .wtext__area--day { min-height: 180px; }
.wpaste__bar { justify-content: space-between; align-items: center; }
.wpaste__bar .form__label { margin: 0; }
.removedline { align-items: center; }
.otherways { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; }
.otherways .chip > svg, .wbk__quick .chip > svg, .addnext .chip > svg, .wbk__bring .chip > svg { margin-right: 4px; color: var(--vink); }

/* El bloque abierto (o el tipo que se elige), en su sitio. */
.bkpila { gap: 14px; }
.wbk { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--white); }
.wbk--open { border: 2px solid var(--violet); box-shadow: 0 6px 20px rgb(101 72 235 / 10%); }
.wbk--pick { border: 2px dashed var(--soft); background: var(--row-alt); }
.wbk__form { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.wbk__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; }
.wbk__title { flex: 1 1 auto; margin: 0; font: 600 16px/22px var(--font-display); }
.wbk__name { flex: 1 1 220px; min-width: 0; }
.wbk__name .input { min-height: 40px; font: 600 16px/22px var(--font-display); }
.wbk__what { margin: -4px 0 0 42px; font-size: 13px; line-height: 18px; color: var(--body-2); }
.wbk__sub { margin: 2px 0 0; font: 600 13px/18px var(--font-display); color: var(--muted); }
.wbk__sub .small { font-family: var(--font-ui); font-weight: 400; }
.wbk__search { max-width: none; }
.wbk__quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; }
.chip--more { border-style: dashed; }
.wbk__more { margin: 0; }
.wbk__add { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding-top: 2px; }
.wbk__searchrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.wbk__searchrow .exrows__search { flex: 1 1 320px; min-width: 0; }
.wbk__searchrow .exrows__paste { flex: 0 0 auto; }
.wbk__searchrow .exrows__paste[open] { flex: 1 1 100%; }
.wbk__add.is-live [data-add-submit] { display: none; }
.wbk__libsearch { max-width: none; }
.wbk__paste { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 12px; border-radius: var(--r-ctrl); background: var(--row-alt); }
.wbk__wide { grid-column: span 2; }
.wbk__more.form__grid { margin-top: 2px; }
.wbk__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.wbk__foot .saved { flex: 1 1 200px; }
.saved.is-bad, .saved.is-bad > svg { color: var(--bad); }
.typesall > summary { cursor: pointer; min-height: 32px; display: inline-flex; align-items: center; }
.typesall[open] > summary { margin-bottom: 8px; }
.wbk--studio .typelist a { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 18px; }
.regico { display: inline-flex; align-items: flex-start; gap: 4px; }
.regico > svg { flex: none; margin-top: 2px; color: var(--vink); }

/* Lo que se apunta, dentro del bloque (CE-6, BLQ-05). */
.wbk__reg { padding: 10px 12px; border-radius: var(--r-ctrl); background: var(--tint); }
.wbk__reg > summary { list-style: none; cursor: pointer; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; }
.wbk__reg > summary::-webkit-details-marker { display: none; }
.wbk__reg[open] { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--violet-line); background: var(--white); }
.wbk__reg[open] .wbk__regchange { display: none; }
.wbk__regbody { display: flex; flex-direction: column; gap: 10px; }
.wbk__regopts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wbk__opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-ctrl); cursor: pointer; }
.wbk__opt.is-on { border-color: var(--violet); background: var(--tint); }
.wbk__opt input { flex: none; margin-top: 3px; accent-color: var(--violet); }
.wbk__opt > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wbk__otras > summary { cursor: pointer; min-height: 32px; display: inline-flex; align-items: center; }
.wbk__otras[open] > summary { margin-bottom: 8px; }
.wbk__regrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
.wbk__regrow > .form__label { flex: 0 0 96px; margin: 0; }

/* Lo que se abre de una fila (Versiones, Más), a todo el ancho y debajo de la suya; el resumen se queda en su celda (BLQ-01). */
.wbk .exrow__ver[open] { grid-column: auto; order: 0; }
.exrow.is-open { border-radius: var(--r-ctrl) var(--r-ctrl) 0 0; background: var(--tint); }
.exrow > .exrow__panel { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; margin: 2px -8px -4px; padding: 12px 14px; border-left: 3px solid var(--violet); border-radius: 0 0 var(--r-ctrl) var(--r-ctrl); background: var(--tint); }
.exrow__panel .exrow__levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
.exrow__panel .step-more__groups { padding: 0; }
.exrow__panelfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0; }
.exrow__panelfoot .btn { margin-left: auto; }
.exrow.is-moving, .wr__block.is-moving { opacity: .55; }
.exrow__ex [data-row-drag] { flex: none; margin-right: 6px; color: var(--muted); cursor: grab; }

/* Un bloque en lectura dentro del día que se escribe: el asa, el benchmark o la serie fija (BEN-07, EST-06). */
.bkr__drag { display: inline-flex; margin-left: -2px; color: var(--muted); cursor: grab; }
.lockline { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 12px; line-height: 17px; font-weight: 600; color: var(--vink); }
.lockline > svg { flex: none; margin-top: 1px; }
.wr__block > .lockline { grid-column: 2; }
.wr__block.bkr.is-locked { padding: 10px 12px; border-radius: var(--r-box); background: var(--tint); }
.addnext { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.addnext .addblock { flex: 0 0 auto; padding: 0 18px; }
.addnext__sep { flex-basis: 100%; height: 0; }
.whead__acts { flex: none; align-items: center; }
.whead__del .sq-btn { width: 40px; height: 40px; }
.sq-btn--danger { color: var(--bad); }
.sq-btn--danger:hover { border-color: var(--bad-line); background: var(--bad-bg); color: var(--bad); }
.sq-btn__hover { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pastline { display: flex; align-items: flex-start; gap: 6px; color: var(--warn); }
.pastline > svg { flex: none; margin-top: 2px; }

/* Plantillas, benchmarks y series fijas, explicados (CE-8 a CE-12). */
.explain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.explain > div { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 10px; align-content: start; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--white); }
.explain__n { grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--ink); color: var(--lime); font: 700 14px/1 var(--font-display); }
.explain b { font: 600 14px/20px var(--font-display); }
.explain > div > span:not(.explain__n) { font-size: 13px; line-height: 18px; color: var(--body-2); }
.explainbox > summary { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 4px; cursor: pointer; font: 600 14px/20px var(--font-display); color: var(--vink); }
.explainbox__which { margin: 10px 0 0; }
.tplhint { margin-top: 12px; }
.table-wrap.tplwrap { overflow: visible; }
.u-nowrap { white-space: nowrap; }
.bmcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bmcard { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--violet-line); border-radius: var(--r-box); background: var(--white); }
.bmcard__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bmcard__head b { font: 600 16px/22px var(--font-display); overflow-wrap: anywhere; }
.bmcard__meta { display: flex; flex-direction: column; margin: 0; font-size: 12px; line-height: 17px; color: var(--muted); }
.bmcard__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; }
.bmcard__acts .menu { margin-left: auto; }
.catgroup { padding: 10px 0; border-top: 1px solid var(--line); }
.catgroup > summary { display: flex; align-items: baseline; gap: 6px; min-height: 44px; list-style: none; cursor: pointer; font: 600 14px/20px var(--font-display); }
.catgroup > summary::-webkit-details-marker { display: none; }
.catgroup > summary .small { font-family: var(--font-ui); font-weight: 400; }
.catgroup > summary > svg { flex: none; align-self: center; color: var(--muted); transform: rotate(-90deg); }
.catgroup[open] > summary > svg { transform: none; }
.catgroup__more { margin-left: auto; color: var(--vink); font-weight: 600; }
.catgroup .locked-cat { margin-top: 4px; }

/* Ventanas: usar o traer una plantilla, copiar otro día, un benchmark y montarlo. */
.pick2 { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; }
.pick2__list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pick2__list .search { max-width: none; }
.pick2__bar { display: flex; flex-wrap: wrap; gap: 8px; }
.pick2__bar .search { flex: 1 1 160px; }
.pick2__filter .select { min-width: 200px; }
.pick2__items { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pick2__items a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-ctrl); color: var(--ink); text-decoration: none; }
.pick2__items .is-on a { border-color: var(--violet); background: var(--tint); }
.pick2__prev { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--row-alt); }
.pick2__where, .pick2__checks { display: flex; flex-direction: column; gap: 8px; }
.pick2__checks { margin-top: 6px; }
.mountnote { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: var(--r-box); background: var(--tint); font-size: 13px; line-height: 19px; }
.mountnote p { margin: 0; }
.mountnote__fixed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.mountnote__fixed div { padding: 8px 10px; border-radius: var(--r-ctrl); background: var(--white); }
.mountnote__fixed dt { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.mountnote__fixed dd { margin: 0; font-weight: 600; }
.bmpick { display: flex; flex-direction: column; gap: 10px; }
.bmpick .search { max-width: none; flex: none; }   /* .search lleva flex-basis 280px: en columna sería su alto */
.bmpick > form { display: flex; flex-direction: column; gap: 8px; }
.bmpick > form > .wbk__sub:not(:first-of-type), .bmpick > .wbk__sub { margin-top: 6px; }
.bmlist { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bmlist label { display: grid; grid-template-columns: 20px minmax(0, 1fr) minmax(0, .8fr); gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-ctrl); cursor: pointer; }
.bmlist .is-on label { border-color: var(--violet); background: var(--tint); }
.bmlist input { accent-color: var(--violet); }
.bmlist label > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.bmlist--plain li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-ctrl); }
.bmlist--plain li[hidden] { display: none; }
.bmlist--plain li > span { display: flex; flex-direction: column; min-width: 0; }

@media (max-width: 1180px) {
    .bmcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
    .ways, .explain, .bmcards, .wbk__regopts, .pick2, .mountnote__fixed { grid-template-columns: minmax(0, 1fr); }
    /* VAC-06: las formas, en filas compactas: icono, nombre y su dato. */
    .way { grid-template-columns: 36px minmax(0, 1fr) 18px; align-items: center; padding: 10px 12px; }
    .way__icon { width: 36px; height: 36px; }
    .way__text > span { display: none; }
    .way--open { padding: 12px; }
    .way--open .way__text > span { display: block; }
    .wbk { padding: 12px; }
    .wbk__what { margin-left: 0; }
    .wbk__name { flex-basis: 100%; order: 3; }
    .wbk__wide { grid-column: auto; }
    /* El pie del bloque, pegado encima de la barra de abajo: «Listo» y «Otro bloque» siempre a mano. */
    .wbk__foot { position: sticky; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); z-index: 3; margin: 0 -12px -12px; padding: 10px 12px; border-radius: 0 0 var(--r-box) var(--r-box); background: var(--white); box-shadow: 0 -6px 16px rgb(32 36 43 / 6%); }
    .wbk__foot .saved { display: none; }
    .wbk__foot .actbar__group { flex: 1 1 100%; }
    .wbk__foot .actbar__group .btn { flex: 1 1 0; }
    .wbk__regrow > .form__label { flex-basis: 100%; }
    /* TIP-07: un tipo, en dos líneas, y la leyenda en una. */
    .wbk .typelist__name > .small, .wbk .typelist__reg { display: none; }
    .wbk .typelegend { flex-wrap: nowrap; }
    /* BLQ-07 y BLQ-03: sin asa en el móvil (se ordena con el «…») y los campos a todo su ancho. */
    .bkr__drag, .exrow__ex [data-row-drag], .addnext > .small { display: none; }
    .wbk .exrow .input, .wbk .exrow .select { width: 100%; }
    .exrow__panel .exrow__levels { grid-template-columns: minmax(0, 1fr); }
    .wbk__quick .chip:not(.chip--more):nth-of-type(n+6) { display: none; }
    .chip { min-height: 44px; }
    .wr__block.bkr.is-locked { padding-left: 8px; }
    /* MOV-01: las pestañas de Programación, sin contador: caben las cuatro. */
    .tabs--prog .tabs__count { display: none; }
    .whead__del { display: none; }
}
.regline__explain { color: var(--muted); }
@media (max-width: 960px) {
    /* El nombre del bloque abre el bloque: 44 px de toque sin mover el texto (revisión UX 12). */
    .wr__open { padding-block: 12px; margin-block: -12px; }
}
/* VAC30-01: sin nada que poner a la derecha (un día sin clases ni comprobaciones), sin columna. */
.dgrid:not(:has(> .stack:last-child > *)) { grid-template-columns: minmax(0, 1fr); }
/* Revisión UX 30 (23 de octubre de 2026), lo que faltaba: */
/* PLT30-06: una página sin nada que poner a la derecha, sin columna. */
.dgrid--solo { grid-template-columns: minmax(0, 1fr); }
/* BLQ30-06: «Aún sin guardar», con el icono en gris hasta que se guarda. */
.saved.is-new svg { color: var(--muted); }
/* BLQ30-04: «Nota y minutos», plegado. */
.wbk__extra > summary .small { margin-left: 4px; font-weight: 400; color: var(--muted); }
/* TRA30-06: «Otra fecha…» junto a la disciplina. */
.pick2__date { display: flex; align-items: center; gap: 6px; }
.pick2__date .input { width: auto; }
/* TRA30-02: «Dónde» al pie de la ventana de benchmark, separado de las listas. */
.bmpick > .pick2__where { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.bmpick .catgroup .bmlist { margin-top: 4px; }
/* EST30-02: la línea del aparato solo en el móvil. */
.steps-app__line { display: none; }
/* Lo que solo va en el móvil (el escritorio usa .u-desktop). */
@media (min-width: 961px) { .u-phone { display: none !important; } }
@media (max-width: 960px) {
    /* TRA30-08: en el móvil, «Dónde» antes de la vista previa. */
    .pick2__prev > form { display: contents; }
    .pick2__prev > .whead { order: -2; }
    .pick2__prev .pick2__where { order: -1; }
    /* DIA30-01: «+ Bloque» a todo el ancho y, debajo, «Traer:» con su rótulo. */
    .addnext .addblock { flex: 1 1 100%; }
    .addnext > .small.addnext__bring { display: inline; }
    /* BLQ30-05: sin el rótulo «Versiones» si el enlace ya lo dice. */
    .exrow__ver:not([data-has-versions]) > summary .exrow__lab { display: none; }
    /* EST30-02: el aparato, en una línea que se abre al tocarla. */
    .steps-app__line { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; list-style: none; cursor: pointer; }
    .steps-app__line::-webkit-details-marker { display: none; }
    .steps-app[open] > .steps-app__line { margin-bottom: 8px; }
    /* PLT30-03: cada plantilla, una tarjeta compacta: el nombre con su «…» y, debajo, lo demás en dos líneas. */
    .tpltable.table--stack tr { grid-template-columns: minmax(0, 1fr) 44px; gap: 4px 12px; }
    .tpltable.table--stack td:not(:first-child):not(.tpl__acts):not(.tpl__m) { display: none; }
    .tpltable.table--stack tr > :first-child { grid-column: 1; }
    .tpltable.table--stack td.tpl__acts { grid-column: 2; grid-row: 1; }
    .tpltable.table--stack td.tpl__m { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; }
    .tpltable.table--stack [data-label]::before { display: none; }
}

/* ---------- Auditoría del 30 de octubre, informe F (UX del centro) ---------- */
/* UC-28: elegir un día o un mes, igual en todas las pantallas. */
.date-nav { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.date-nav__input { width: auto; min-height: 40px; }
/* UC-3: las reglas de recuperación, una línea al pie de Impagos. */
.rules-line { margin: 0; font-size: 13px; line-height: 20px; color: var(--body-2); }
.rules-line a { margin-left: 6px; font-weight: 600; }
.row--end { justify-content: flex-end; }
/* UC-2: un recibo, dos líneas en el móvil: socio e importe; concepto y «Cobrar». */
.table--receipts__acts .row { flex-wrap: nowrap; }
@media (max-width: 960px) {
    .table--stack.table--receipts tr { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 14px; align-items: center; }
    .table--stack.table--receipts [data-label]::before { display: none; }
    .table--stack.table--receipts tr > :first-child { grid-column: 1; grid-row: 1; font-weight: 600; }
    .table--stack.table--receipts .table--receipts__amount { grid-column: 2; grid-row: 1; text-align: right; font-weight: 600; }
    .table--stack.table--receipts .table--receipts__concept { grid-column: 1; grid-row: 2; font-size: 13px; line-height: 18px; color: var(--body-2); }
    .table--stack.table--receipts .table--receipts__due { grid-column: 1; grid-row: 3; font-size: 13px; line-height: 18px; color: var(--body-2); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
    .table--stack.table--receipts td.table--receipts__acts { grid-column: 2; grid-row: 2 / span 2; }
    .table--stack.table--receipts td.table--receipts__acts:empty { display: none; }
}

/* Panel interno, inicio de administración: en el móvil, con muchos avisos, el héroe no se come la primera pantalla (UI-29). */
@media (max-width: 960px) {
    .hero--tiles-desktop .hero__tiles { display: none; }
}
/* UC-12: lo que pagará, en una frase. */
.first-receipt { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px; background: var(--tint); border-radius: var(--r-ctrl); font-size: 14px; line-height: 20px; color: var(--ink); }
.first-receipt[hidden] { display: none; }
.first-receipt svg { flex: none; margin-top: 1px; color: var(--vink); }
.form-foot__opt { display: contents; }
.form-foot__opt[hidden] { display: none; }
/* UC-10: «Para terminar el alta». */
.signup-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.signup-list > li { display: flex; align-items: center; gap: 10px; min-height: 44px; flex-wrap: wrap; border-top: 1px solid var(--line); padding: 6px 0; }
.signup-list > li:first-child { border-top: 0; }
.signup-list .dot { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--white); }
.signup-list .is-done .dot { background: var(--ok, #1f8a4c); border-color: transparent; }
.signup-list__label { flex: 1 1 auto; min-width: 0; font-size: 14px; }
.signup-list .is-done .signup-list__label { color: var(--muted); }
.signup-list .is-done .signup-list__label > strong, .signup-list .is-done .signup-list__label:not(:has(strong)) { text-decoration: line-through; }

/* Guías de Ayuda (F-35): pasos numerados. */
.guide-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; line-height: 1.5; }
/* Mi jornada (informe UX 06, 3.1.3): el estado y dos botones como mucho. */
.my-day { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.my-day__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inline-form { display: inline; }
.bk .my-day__actions { flex: none; }
@media (max-width: 960px) {
    /* Se pulsa de pie y con una mano: a media anchura y altos. */
    .my-day .my-day__actions { width: 100%; }
    .my-day .my-day__actions > form, .my-day .my-day__actions > a { flex: 1 1 0; }
    .my-day .my-day__actions .btn { width: 100%; min-height: 48px; justify-content: center; }
    .table--stack.table--days tr { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; padding: 12px 14px; }
}
/* UC-22: en el móvil, una fila con el apartado y una hoja con los demás. */
.subnav-sheet { display: none; }
@media (max-width: 960px) {
    .subnav-sheet { display: block; }
    .subnav-sheet > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r-ctrl); background: var(--white); font-size: 14px; font-weight: 600; color: var(--vink); list-style: none; cursor: pointer; }
    .subnav-sheet > summary::-webkit-details-marker { display: none; }
    .tabs--sheet { display: none; }
    /* UC-24: los avisos, en lista: de la tira solo se veía el primero. */
    .attention { display: flex; flex-direction: column; overflow: visible; scroll-snap-type: none; padding: 0; margin: 0; }
    .attention > .attention__item { flex: none; width: auto; min-width: 0; max-width: none; }
    /* UC-25: el nombre del centro entero, en dos líneas si hace falta. */
    .topbar__name-text { white-space: normal; overflow: visible; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 15px; line-height: 18px; }
}
/* UC-15: el puesto de recepción. */
.search--big { max-width: none; min-height: 52px; }
.search--big input { font-size: 16px; }
.desk-classes { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.desk-people { list-style: none; margin: 0; padding: 0; }
.desk-people > li { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; min-height: 48px; padding: 6px 0; border-top: 1px solid var(--line); }
.desk-people > li:first-child { border-top: 0; }
.desk-people .person { flex: 1 1 160px; min-width: 0; }
.attention--list { grid-template-columns: 1fr; }
.desk-cash { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
@media (max-width: 960px) { .desk-classes { grid-template-columns: minmax(0, 1fr); } }

/* Quien de Hyrapp está dentro del panel de un centro: siempre a la vista (UI-24). */
.support-strip { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 8px 12px; border-radius: var(--r-card); background: var(--ink); color: #fff; font-size: 13px; line-height: 1.35; }
.support-strip__text { flex: 1; min-width: 0; }
.support-strip form { margin: 0; flex: none; }
.support-strip__exit { min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--lime); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.support-strip__exit:hover { filter: brightness(.95); }
@media (max-width: 960px) {
    .support-strip { top: 56px; }
    .support-strip__exit { min-height: 40px; }
}
.onboarding-hint { display: block; margin-top: 2px; }
/* UC-17: la bandeja, dos columnas con alto de pantalla y scroll propio. */
.inbox__filter { display: flex; flex-direction: column; gap: 8px; }
.inbox__filter .select { width: 100%; max-width: none; }
@media (min-width: 961px) {
    .inbox { flex-wrap: nowrap; align-items: stretch; height: calc(100vh - 220px); min-height: 480px; }
    .inbox__list, .inbox__thread, .inbox__side { max-height: 100%; overflow-y: auto; }
    .inbox__list { overscroll-behavior: contain; }
    .inbox__thread .reply-form { position: sticky; bottom: 0; z-index: 1; background: var(--white); }
}
/* UC-24: en el móvil, nada que deslizar: los días en vertical con su tira fija; el tablero, en vertical. */
.day-jump { display: none; }
@media (max-width: 960px) {
    .week-grid-wrap { margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
    .week-grid { display: flex; flex-direction: column; min-width: 0; }
    .week-grid__day { scroll-margin-top: 110px; }
    .week-grid__empty { padding: 4px; }
    .day-jump { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; position: sticky; top: 64px; z-index: 3; padding: 6px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-ctrl); }
    .day-jump > a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 44px; font-size: 12px; line-height: 16px; color: var(--body-2); border-radius: 8px; text-decoration: none; }
    .day-jump > a strong { font-size: 15px; color: var(--ink); }
    .day-jump > a[aria-current="date"] { background: var(--tint); }
    .day-jump > a[aria-current="date"] strong { color: var(--vink); }
    .board-wrap.board-wrap--stack { overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; }
    .board-wrap--stack .board { flex-direction: column; min-width: 0; }
    .board-wrap--stack .board__col { flex: none; width: 100%; }
    /* Hasta tres por etapa en el móvil; «Ver los N» lleva a la lista. */
    .board-wrap--stack .board__card:nth-of-type(n + 4) { display: none; }
}
/* En Socios, el «…» en la fila del titular (UC-44). */
@media (max-width: 960px) {
    .page-head--lista { position: relative; }
    .page-head--lista .page-head__actions > .menu { position: absolute; top: 0; right: 0; }
}

/* La ficha del cliente: las acciones siempre bajo el nombre (R-26). */
.profile-head--stack { flex-direction: column; align-items: flex-start; }
.profile-head--stack .page-head__actions { justify-content: flex-start; }
/* En pantallas anchas cabe la palabra junto al icono (R-35). */
@media (min-width: 1600px) { .btn--icon-desktop .only-mobile { display: inline; } }
/* Leads: en 1440 px la fila entra entera, con su botón (UI-30). */
.table--leads tbody th { min-width: 200px; }
.table--leads .col-origin { max-width: 120px; }
.col-origin__line { display: block; max-width: 120px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.table--leads .col-last { width: 130px; }
.table--leads .col-last .row { flex-wrap: wrap; }
.btn--icon-desktop { padding-inline: 10px; }
@media (max-width: 960px) {
    .btn--icon-desktop { padding-inline: 14px; }
}

/* Entrar sin app en el lector (I-6). */
.reader__byname { display: grid; gap: 12px; max-width: 440px; margin: 0 auto; width: 100%; }
.reader__results { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
/* UC-45: «Añadir a la clase» se abre con su botón; plegada no se repite al pie. */
#anadir.card--disclosure:not([open]) { display: none; }
/* Revisión de lo aplicado (1 de noviembre de 2026): el puesto, los avisos en una línea y el móvil más corto. */
.attention--list { grid-template-columns: 1fr; gap: 8px; }
.attention--list .attention__item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: center; padding: 12px 16px; }
.attention--list .attention__top { grid-row: 1 / span 2; margin: 0; }
.attention--list .attention__item h3, .attention--list .attention__item p { grid-column: 2; margin: 0; }
.attention--list .attention__item .link-arrow { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
.list__wrap .list__main { flex: 1 1 240px; }
@media (max-width: 960px) {
    .attention .attention__item { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: start; padding: 12px 14px; }
    /* El icono en su columna; la píldora, sobre el titular, y las acciones, debajo: nada se pisa (revisión UX 31, R-2). */
    .attention .attention__top { display: contents; }
    .attention .attention__icon { grid-column: 1; grid-row: 1 / span 4; }
    .attention .attention__top > :not(.attention__icon) { grid-column: 2; justify-self: start; margin: 0 0 2px; }
    .attention .attention__item h3, .attention .attention__item p, .attention .attention__item .link-arrow, .attention .attention__item .attention__actions { grid-column: 2; margin: 0; }
    .attention--list .attention__item .link-arrow { grid-row: auto; }
    .attention--list .attention__icon { grid-row: 1 / span 3; }
    /* Mostrador: dos productos por fila. */
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .list__wrap .row-form { flex: 1 1 100%; }
    .list__wrap .row-form .select { flex: 1 1 auto; width: 100%; max-width: none; }
    /* Impagos: nombre e importe arriba; motivo y botón debajo. */
    .table--stack.table--debts tr { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 14px; }
    .table--stack.table--debts [data-label]::before { display: none; }
    .table--stack.table--debts tr > th[scope="row"] { grid-column: 1; grid-row: 1; }
    .table--stack.table--debts tr > td.num { grid-column: 2; grid-row: 1; text-align: right; }
    .table--stack.table--debts tr > td:nth-last-child(4), .table--stack.table--debts tr > td:nth-last-child(3), .table--stack.table--debts tr > td:nth-last-child(2) { grid-column: 1 / -1; font-size: 13px; line-height: 18px; color: var(--body-2); }
    .table--stack.table--debts tr > td:last-child { grid-column: 1 / -1; }
    .toolbar--filters .select--auto { flex: 1 1 0; min-width: 0; width: auto; }
}
@media (max-width: 640px) {
    /* Las cifras, sin icono ni pie: la lista entra antes. */
    .grid:has(> .kpi) .kpi__icon, .grid:has(> .kpi) .kpi__foot { display: none; }
    .grid:has(> .kpi) .kpi { padding: 10px 12px; }
}
/* El pie pegado de un formulario de página, una banda limpia sobre la barra de abajo. */
@media (max-width: 960px) {
    .form-foot:not(.modal__body .form-foot) { background: var(--white); border-top: 1px solid var(--line); margin-inline: -16px; padding: 10px 16px; }
}
.board__name { display: inline-flex; align-items: center; min-height: 32px; }
@media (max-width: 960px) { .board__name { min-height: 44px; } }
.board__head .seg__count { background: var(--white); }