/**
 * Estilos del módulo Eventos Iglesia.
 * Prefijo de clases: .scm-evt-*
 * Colores y layout calcados de scm-srv.css (módulo Servicios) — duplicados con
 * namespace propio para evitar acoplamiento.
 */

/* ── Wrap y encabezado ────────────────────────────────── */
.scm-evt-wrap {
    padding: 16px;
    max-width: 1100px;
    margin: 0 auto;

    /* ── Calendario (vistas Lista y Mes) ──────────────────────────────
       La familia --cal-* es la MISMA que declara scm-srv.css sobre
       .scm-srv-wrap, con los mismos valores: los dos calendarios son ya
       el mismo componente y duplicar diecisiete tokens solo garantizaría
       que se separen con el tiempo. Se declara aquí, sobre el contenedor
       de Eventos, porque una variable no cruza de un árbol a otro; el
       puente oscuro vive en 00-tokens.css, que es donde el sistema
       centraliza el tema (G-17).

       Los valores claros son los literales que este archivo ya tenía
       escritos a mano —y que resultan ser, hex a hex, los mismos que los
       de Servidores—, así que el tema claro no se mueve por tokenizar.
       Siguen siendo literales y no `var(--scm-ui-*)` por la razón que
       explica scm-srv.css: los tonos no coinciden exactamente con los del
       sistema (--cal-line es #e2e8f0 y --scm-ui-line es #E3E8F0).       */
    --cal-surface:      #fff;
    --cal-surface-2:    #f8fafc;
    --cal-line:         #e2e8f0;
    --cal-text:         #0f172a;
    --cal-text-2:       #475569;
    --cal-text-3:       #64748b;
    --cal-text-4:       #94a3b8;
    --cal-grid-bg:      #F2F3F5;
    --cal-tabs-bg:      #f1f5f9;
    --cal-accent:       #2563eb;
    --cal-accent-fg:    #2563eb;
    --cal-accent-soft:  #eff6ff;
    --cal-accent-line:  #bfdbfe;
    --cal-shadow-sm:    rgba(15,23,42,0.06);
    --cal-shadow-xs:    rgba(15,23,42,0.04);

    /* ── Evento destacado y marcador de favorito ──────────────────────
       Aquí vivían `--cal-feat-*` (el riel y el velo azules de la tarjeta
       destacada) y `--cal-fav-*` (el violeta fijo de la estrella). Se
       retiran porque se quedaron sin un solo consumidor: destacado y
       favorito ya NO son un color propio. Cada evento recibe el suyo por
       posición dentro del mes —`--evt-*`, más abajo— y el destacado se
       distingue por INTENSIDAD sobre ese mismo tono: etiqueta "Destacado"
       con la estrella, borde teñido, velo y riel interior. Un morado fijo
       obligaba a que todos los destacados de un mes se vieran iguales
       entre sí y distintos del resto de su propio mes.                 */

    /* ── Chip de la hora ──────────────────────────────────────────────
       Superficie neutra propia: tiene que verse igual sobre una tarjeta
       normal y sobre una destacada.                                    */
    --cal-chip-bg:      #f8fafc;
    --cal-chip-fg:      #475569;
    --cal-chip-line:    #e2e8f0;
}

/* Contenedor de vista del sistema (§1.9), el mismo que ya usan el panel de
   gestión y el calendario de Servidores: 1240px, centrado, con el aire
   lateral aprobado. Sustituye al 1100px con padding 16 que tenía esta vista.
   El embed del home NO lo recibe: lo desactiva `.is-embed`, que suma (0,2,0)
   y va después. */
/* v9.6.1 · SIN `background`. El contenedor servía
   `background: var(--scm-ui-page)` y era el fondo general azulado que se veía
   en `?scm_view=eventos_iglesia`. Se retira la declaración, no se sustituye
   por blanco ni por transparente: la vista hereda el fondo del entorno, igual
   que el resto de pantallas ya correctas. Ancho, centrado, relleno,
   `min-height` y `box-sizing` se conservan intactos, y el token
   `--scm-ui-page` sigue declarado en P-00 para quien lo consuma.

   `.scm-evt-wrap--manage` —el panel administrativo de Eventos— NO se toca:
   es otra vista y hoy se ve correctamente. */
/* v9.12.3 · El marco exterior lo sirve el shell UNA sola vez
   (.scm-content-inner en scm-layout.css); dentro del shell, además,
   `.scm-layout-wrap .scm-evt-wrap--cal` neutraliza el 1100px/16px del
   contenedor base de arriba. La copia local del §1.9 se retiró. */
/* Panel de gestión (evt_tab=manage: list, detalle y seguimiento).
   Contenedor de vista del sistema (COMPONENTS.md §1.9): ancho único de
   1240px, centrado, con el aire lateral aprobado y `box-sizing` explícito.
   Sustituye al 1450px fluido anterior — el documento no admite excepciones
   de ancho: cuando un contenido no cabe se desplaza, se trunca o se
   envuelve, nunca se ensancha el contenedor. Tampoco lleva `width: 100%`:
   con `max-width` + `margin-inline` ya se comporta como corresponde.
   La familia, la tinta y el fondo llegan del scope `.scm-ui` que el marcado
   añade en las tres vistas de este panel.
   El calendario público sigue con el .scm-evt-wrap de arriba, sin tocar. */
/* v9.12.3 · Igual que `--cal`: el marco exterior lo sirve el shell y este
   panel HEREDA el fondo del entorno (.scm-layout-wrap, --scm-bg) en vez de
   pintar otra página encima — el `background: var(--scm-ui-page)` que traía
   era el último contenedor que lo hacía. `[hidden]` de abajo NO se toca. */
/* `hidden` tiene que seguir ocultando. El navegador lo sirve con
   `display: none` desde su hoja de usuario-agente, así que CUALQUIER regla de
   autor que declare `display` —`.scm-ui-btn` es inline-flex, `.scm-ui-empty`
   es flex— le gana y el elemento reaparece. Aquí se restituye con (0,2,0),
   por encima de la clase suelta de un patrón y sin un solo !important.
   Cubre el estado vacío por filtro, el botón "Quitar" del banner y las filas
   que el filtro esconde. */
.scm-evt-wrap--manage [hidden] { display: none; }

/* Embed en home: sin padding extra ni max-width (lo provee el layout del home).
   También anula el alto mínimo y el fondo de página del §1.9: dentro del home
   el calendario es un bloque más, no la vista entera. */
.scm-evt-wrap.is-embed {
    padding: 0;
    max-width: none;
    margin-top: 24px;
    min-height: 0;
    background: transparent;
}

/* Botón "Ver todos los eventos" (solo embed home) */
.scm-evt-view-all-wrap {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}
/* Botón legacy, mismo caso que .scm-evt-btn-admin: P-05 lo sustituye y la
   regla se acota con :not(.scm-ui-btn) para que el `color !important` de aquí
   no pise la tinta del patrón en la instancia ya migrada. Se conserva por si
   otra vista sirve este marcado sin las clases del patrón. */
.scm-evt-view-all-btn:not(.scm-ui-btn) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: #fff;
    color: #2563eb !important;
    border: 1px solid #2563eb;
    border-radius: 8px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.scm-evt-view-all-btn:not(.scm-ui-btn):hover {
    background: #2563eb;
    color: #fff !important;
}
.scm-evt-view-all-btn:not(.scm-ui-btn) .material-icons-round { font-size: 18px; }
.scm-evt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
/* v9.12.11 · Solo caja: la tipografía del título principal la sirve P-07 por
   la clase central `scm-ui-pagehead__title`, que estos cuatro `h2` ya llevan. */
.scm-evt-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
/* El icono pasa de glifo suelto a teja: misma familia, mismo glifo y mismo
   azul de acento, con la caja fija que el shell ya le da a los iconos de la
   topbar (v9.12.9) para que la ligadura de Material Icons no nazca del ancho
   de la PALABRA `event` mientras la fuente carga. */
.scm-evt-title-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    overflow: hidden;
    border-radius: var(--scm-ui-r-md);
    background: linear-gradient(135deg, #2A90FF 0%, #0065C9 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(42,144,255,0.30);
}
.scm-evt-title-ic .material-icons-round {
    font-size: 20px;
    line-height: 1;
    color: inherit;
}
/* Botón legacy del módulo. P-05 lo sustituye (p05-buttons.css lo declara
   expresamente entre las bases que reemplaza), pero el CALENDARIO —fuera de
   esta ronda— sigue consumiéndolo, así que la regla se conserva y se acota
   con :not(.scm-ui-btn): las instancias ya migradas del panel de gestión la
   dejan de recibir y el calendario no se entera. Es la misma técnica que
   `:not(.scm-ui-search)` de Servidores. Sin el acotado, el `color:#fff
   !important` de aquí pisaría la tinta del patrón. */
.scm-evt-btn-admin:not(.scm-ui-btn) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #2563eb;
    color: #fff !important;
    padding: 8px 14px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s;
    border: none;
    cursor: pointer;
}
.scm-evt-btn-admin:not(.scm-ui-btn):hover { background: #1d4ed8; color: #fff; }
.scm-evt-btn-admin:not(.scm-ui-btn) .material-icons-round { font-size: 18px; }

/* ── Tabs (Lista / Mes) ─────────────────────────────────
   No son P-08: el calendario aprobado usa su propio grupo de píldoras
   (`.cal-tabs` / `.cal-tab` en scm-srv.css) y esta vista ya lo tenía escrito
   con los mismos valores. Solo se tokeniza, que es lo que le faltaba para
   responder al tema. */
.scm-evt-cal-tabs {
    display: inline-flex; gap: 4px;
    background: var(--cal-tabs-bg); padding: 4px; border-radius: 10px;
    margin-bottom: 16px;
}
/* La tinta de la pestaña apagada es --scm-ui-text-2 y no --cal-text-3, que es
   lo que usa el calendario aprobado: medido sobre el fondo del grupo,
   #64748b se queda en 4.34:1 en claro y 4.09:1 en oscuro, por debajo del 4.5
   que pide un texto de este tamaño. Con el gris secundario del sistema sube a
   5.4:1 y 7.6:1. Es la misma corrección que llevan el contador de sección y
   las cabeceras de día más abajo; queda anotada como deuda del calendario de
   Servidores, que no se toca en esta ronda. */
.scm-evt-cal-tab {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 7px 14px; border-radius: 8px;
    font-size: 16px; font-weight: var(--scm-ui-fw-med); color: var(--scm-ui-text-2);
    text-decoration: none;
    /* Propiedades explícitas y no el atajo `transition: 0.15s`, que es
       `all`: cualquier reflujo —el intercambio de la tipografía, la clase de
       tema— se animaba en vez de aplicarse de golpe. Misma corrección que la
       v9.12.9 hizo en la topbar. */
    transition: color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.scm-evt-cal-tab .material-icons-round { font-size: 16px; }
.scm-evt-cal-tab.is-active { background: var(--cal-surface); color: var(--cal-accent-fg); box-shadow: 0 1px 2px var(--cal-shadow-sm); }
.scm-evt-cal-tab:hover { color: var(--cal-accent-fg); }

/* El estado vacío consume P-11; aquí solo queda el alto, que es el mismo que
   el calendario aprobado le da con `.cal-empty`. */
.scm-evt-empty { padding: 40px 20px; }

/* ── Color automático por evento ───────────────────────────────────────
   El PHP no elige una clase de color ni escribe un hex suelto: pone en el
   `style` del elemento la identidad de ESE evento —`--evt-rgb`, `--evt-deep`
   y `--evt-lift`, servidas por SCM_Eventos_Frontend::color_vars()— y esta
   hoja deriva de ahí el relleno, el degradado, la tinta, el fondo suave y la
   línea. Nada de esto se guarda en la base de datos: el color se calcula en
   cada render a partir de la posición del evento dentro de su mes.

   Las derivadas se declaran SOBRE EL ELEMENTO y no sobre `.scm-evt-wrap`
   porque `var()` se resuelve donde se declara: en el contenedor, `--evt-rgb`
   no existe todavía y `--evt-fill` nacería inválida.

   Cada `var()` lleva el azul de la paleta como reserva: si un evento llegara
   sin color —no debería—, se ve como se veía antes y no como una tarjeta
   rota.

   El RELLENO no cambia con el tema: lleva texto blanco encima y los
   dieciséis tonos están medidos para pasar 4.6:1 en los dos. La TINTA sí,
   porque se apoya en la superficie de la tarjeta: en claro es el color y en
   oscuro su versión aclarada, que es la misma identidad con otra
   luminosidad.

   El 0.10 y el 0.12 de `--evt-soft` NO son decorativos, son el número con
   el que se calculó la paleta: la tinta de un evento se lee SOBRE el velo
   de ese mismo evento —en la tarjeta destacada y en el chip del mes—, y un
   velo más denso se come el contraste que la tinta necesita. Subirlos
   obliga a recalcular los dieciséis tonos. */
.scm-evt-list-card,
.scm-evt-next,
.scm-evt-wrap .scm-evt-month-chip {
    --evt-fill: rgb(var(--evt-rgb, 26,92,234));
    --evt-grad: linear-gradient(150deg, rgb(var(--evt-rgb, 26,92,234)) 0%, var(--evt-deep, #0A40B2) 100%);
    --evt-ink:  rgb(var(--evt-rgb, 26,92,234));
    --evt-soft: rgba(var(--evt-rgb, 26,92,234), 0.10);
    --evt-veil: rgba(var(--evt-rgb, 26,92,234), 0.04);
    --evt-line: rgba(var(--evt-rgb, 26,92,234), 0.30);
}
/* ÚNICO bloque `.scm-dark` de esta hoja, y va acotado a los tres elementos
   que llevan color propio. La nota del final del archivo decía que aquí no
   hacía falta ninguno porque todo estaba escrito con tokens del sistema, y
   sigue siendo cierto para todo lo demás; el color automático es la
   excepción inevitable: sus valores llegan en el `style` de cada elemento,
   así que el puente de 00-tokens.css —que reasigna variables sobre
   `.scm-evt-wrap`— no puede alcanzarlos. */
.scm-dark .scm-evt-list-card,
.scm-dark .scm-evt-next,
.scm-dark .scm-evt-wrap .scm-evt-month-chip {
    --evt-ink:  var(--evt-lift, #799DEC);
    --evt-soft: rgba(var(--evt-rgb, 26,92,234), 0.12);
    --evt-veil: rgba(var(--evt-rgb, 26,92,234), 0.05);
    --evt-line: rgba(var(--evt-rgb, 26,92,234), 0.46);
}

/* ── Entrada ───────────────────────────────────────────────────────────
   Solo `opacity` y `transform`. Ninguna de las dos participa en el cálculo
   del layout, así que la lista no se recoloca mientras entra y no hay
   reflujo que pueda desplazar la fecha o la hora. No es una transición
   —menos aún `transition: all`—: es una animación de una sola pasada.

   La escalera la sirve `--evt-i` desde el PHP, una por tarjeta, y se corta
   en la décima para que el último evento de un mes largo no espere dos
   segundos a aparecer. */
@keyframes scm-evt-entra {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.scm-evt-next,
.scm-evt-list-section,
.scm-evt-list-cards > .scm-evt-list-card {
    animation: scm-evt-entra 0.42s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.scm-evt-list-cards > .scm-evt-list-card {
    animation-delay: calc(min(var(--evt-i, 0), 9) * 45ms);
}
@media (prefers-reduced-motion: reduce) {
    .scm-evt-next,
    .scm-evt-list-section,
    .scm-evt-list-cards > .scm-evt-list-card {
        animation: none;
    }
}

/* ── Franja del próximo evento ─────────────────────────────────────────
   Una sola, encima de la lista, y con el MISMO color que ese evento tiene
   abajo: la franja no elige un tono aparte, hereda el que le tocó al evento
   dentro de su mes. Un destacado no se vuelve morado por serlo; se refuerza
   con la estrella, el rótulo y el filo interior. */
.scm-evt-next {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 0 0 18px;
    padding: 13px 16px;
    border-radius: var(--scm-ui-r-lg);
    background: var(--evt-grad);
    color: #fff;
    position: relative;
    overflow: hidden;
}
/* Brillo de esquina, decorativo. Translúcido a propósito: la misma
   declaración sirve en claro y en oscuro porque debajo va el relleno del
   evento, no una superficie del tema. */
.scm-evt-next::before {
    content: "";
    position: absolute;
    top: -30px;
    right: -20px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.18), rgba(255,255,255,0) 70%);
    pointer-events: none;
}
/* La teja aclara el relleno un 16% y no un 20%: el glifo que va dentro es
   blanco, así que cada punto de blanco en la caja se lo come al glifo. Al 16%
   el peor tono de la paleta se queda en 3.66:1, por encima del 3:1 que pide
   un elemento gráfico. */
.scm-evt-next-ic {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    overflow: hidden;
    border-radius: var(--scm-ui-r-md);
    background: rgba(255,255,255,0.16);
}
.scm-evt-next-ic .material-icons-round { font-size: 19px; line-height: 1; }
.scm-evt-next-tx { position: relative; flex: 1 1 auto; min-width: 0; }
/* Sin `opacity` para separar el rótulo del título: el blanco sobre el
   relleno está medido justo por encima de 4.5:1 y bajarlo al 85% —como hacía
   la referencia— lo dejaba por debajo. La jerarquía la hacen el tamaño, la
   caja alta y el interletrado. */
.scm-evt-next-label {
    display: block;
    font-size: var(--scm-ui-fs-badge, 12px);
    font-weight: var(--scm-ui-fw-title);
    letter-spacing: 0.09em;
    line-height: 1.2;
    text-transform: uppercase;
}
.scm-evt-next-title {
    display: block;
    margin-top: 3px;
    font-size: var(--scm-ui-fs-row);
    font-weight: var(--scm-ui-fw-title);
    letter-spacing: var(--scm-ui-lsp-row);
    line-height: 1.3;
}
.scm-evt-next-pill {
    position: relative;
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 5px 11px;
    /* La píldora OSCURECE el relleno en lugar de aclararlo. Es TEXTO, no un
       gráfico: con el blanco al 22% que usaba la referencia, el blanco de
       "En 3 días" encima se quedaba en 3.26:1 sobre los tonos más oscuros de
       la paleta. Oscureciendo, el contraste solo puede subir —el peor caso
       sube a 6.81:1— y la píldora sigue leyéndose como una pieza aparte. */
    background: rgba(0,0,0,0.20);
    font-size: var(--scm-ui-fs-badge, 12px);
    font-weight: var(--scm-ui-fw-strong);
    white-space: nowrap;
}
.scm-evt-next.is-featured { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.32); }

/* ── Vista LISTA ──────────────────────────────────────── */
.scm-evt-list-section { margin-bottom: 22px; }
/* Separador de mes: nombre y año, cuántos eventos hay y la línea que llega
   hasta el borde. La línea es `::after` y no un elemento nuevo en el
   marcado: es decoración pura y no tiene nada que anunciar. */
.scm-evt-list-section-head {
    display: flex; align-items: center;
    gap: 10px;
    padding: 0 2px;
    margin-bottom: 6px;
}
.scm-evt-list-section-head::after {
    content: "";
    flex: 1 1 auto;
    min-width: 16px;
    height: 1px;
    background: var(--cal-line);
}
.scm-evt-list-section-title {
    margin: 0; font-size: var(--scm-ui-fs-badge, 12px); font-weight: var(--scm-ui-fw-strong);
    color: var(--scm-ui-text); text-transform: uppercase; letter-spacing: 0.6px;
    flex: 0 0 auto;
}
/* El contador pasa de texto suelto a píldora. Toma el par informativo del
   sistema —tinta y fondo azules—, que es un par ya medido, y NO el color
   automático: cuenta eventos del mes, no es uno de ellos. */
.scm-evt-list-section-count {
    flex: 0 0 auto;
    font-size: var(--scm-ui-fs-badge, 12px); font-weight: var(--scm-ui-fw-strong);
    color: var(--cal-accent-fg);
    background: var(--cal-accent-soft);
    border-radius: 999px;
    padding: 3px 10px;
}

/* La cronología. `gap: 0` a propósito: el aire entre eventos lo pone el
   relleno vertical de cada tarjeta, y así el hilo que las une no se corta
   entre una y otra. */
.scm-evt-list-cards { display: flex; flex-direction: column; gap: 0; }

/* Sin `cursor: pointer`: la tarjeta no abre nada —no hay manejador que la
   escuche—, igual que la del calendario aprobado, que tampoco lo lleva. */
.scm-evt-list-card {
    display: flex; align-items: flex-start; gap: 14px;
    position: relative;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 8px 0;
    /* Propiedades explícitas: el atajo `transition: 0.15s` que había aquí es
       `transition: all`. */
    transition: transform 0.15s;
}
.scm-evt-list-card:hover { transform: translateX(3px); }

/* El hilo vertical que conecta las fechas. Va por tramos —uno por tarjeta—
   y no como una sola línea del contenedor: así el primer y el último tramo
   se recortan al centro exacto de su bloque de fecha por muy alta que sea la
   tarjeta (un título de tres líneas, una descripción abierta), y con un solo
   evento los dos recortes se cruzan y el hilo desaparece, que es lo que
   corresponde cuando no hay nada que conectar.

   Acotado a `.scm-evt-list-cards >`: el panel de detalle del día, en la
   vista Mes, sirve el mismo marcado de tarjeta y ahí no hay cronología. */
.scm-evt-list-cards > .scm-evt-list-card::before {
    content: "";
    position: absolute;
    left: 30px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--cal-line);
    pointer-events: none;
}
.scm-evt-list-cards > .scm-evt-list-card:first-child::before { top: 39px; }
.scm-evt-list-cards > .scm-evt-list-card:last-child::before  { bottom: calc(100% - 39px); }

/* Bloque de fecha. Pasa de columna con borde a caja de color: es lo que
   lleva la identidad del evento, y por eso va encima del hilo (`z-index`) y
   no debajo. El blanco de las tres líneas está medido contra el relleno. */
.scm-evt-list-date {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    padding-right: 0;
    border-right: 0;
    border-radius: 16px;
    background: var(--evt-grad);
    color: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    position: relative;
    z-index: 1;
    box-shadow: 0 3px 10px var(--cal-shadow-sm);
}
.scm-evt-list-day {
    font-size: 20px; font-weight: var(--scm-ui-fw-title); color: #fff;
    line-height: 1; font-variant-numeric: tabular-nums;
}
.scm-evt-list-month {
    font-size: var(--scm-ui-fs-badge, 12px); color: #fff; font-weight: var(--scm-ui-fw-strong);
    text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.1; margin-top: 3px;
}
.scm-evt-list-weekday {
    font-size: var(--scm-ui-fs-badge, 12px); color: #fff; font-weight: var(--scm-ui-fw-med);
    text-transform: uppercase; line-height: 1.1; margin-top: 0;
}

/* El cuerpo es ahora la tarjeta: el borde, el fondo y el radio que antes
   llevaba la fila entera se mudan aquí, para que la fecha quede fuera y
   sobre el hilo. */
.scm-evt-list-detail {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; gap: 4px; justify-content: center;
    background: var(--cal-surface-2);
    border: 1px solid var(--cal-line);
    border-radius: 14px;
    padding: 11px 13px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.scm-evt-list-card:hover .scm-evt-list-detail {
    border-color: var(--evt-line);
    box-shadow: 0 1px 2px var(--cal-shadow-xs);
}
/* Destacado. Recibe el color que le toca dentro de su mes —no un morado
   fijo— y se separa del resto por INTENSIDAD: el velo del propio color, el
   borde teñido y un riel interior de 3px. El riel va como `box-shadow:
   inset` y no como `border-left`, por lo mismo que ya hacía el velo azul
   anterior: así la tarjeta destacada mide exactamente lo mismo que una
   normal y el contenido no se desplaza. */
.scm-evt-list-card.is-featured .scm-evt-list-detail {
    border-color: var(--evt-line);
    /* DOS capas y no un solo degradado que acabe en `--cal-surface-2`: el
       velo es translúcido, así que en un degradado de una sola capa lo que
       se ve por debajo es el fondo de la PÁGINA —la tarjeta es
       transparente—, no la superficie de la tarjeta, y el contraste medido
       de la tinta dejaba de corresponderse con lo que se ve. Con la
       superficie opaca debajo, el resultado es exactamente velo sobre
       `--cal-surface-2`, que es contra lo que está calculada la paleta. */
    background:
        linear-gradient(115deg, var(--evt-soft) 0%, var(--evt-veil) 55%, rgba(0,0,0,0) 100%),
        var(--cal-surface-2);
    box-shadow: inset 3px 0 0 0 var(--evt-fill);
}
.scm-evt-list-card.is-featured:hover .scm-evt-list-detail {
    box-shadow: inset 3px 0 0 0 var(--evt-fill), 0 1px 2px var(--cal-shadow-xs);
}

/* Composición de la primera línea. Es una REJILLA de dos columnas y no un
   flex con `flex-wrap`, que es lo que era: con envoltura, la hora se colocaba
   al lado del título cuando el título era corto y bajaba a la línea siguiente
   cuando era largo, así que cambiaba de sitio tarjeta a tarjeta y la lista se
   leía desordenada.

   Con la rejilla, la columna de la hora es `auto` —su ancho lo fija el chip,
   que tiene un mínimo común— y la del título es `minmax(0, 1fr)`: el título
   envuelve dentro de su columna y no empuja a la hora. Como todas las
   tarjetas miden lo mismo, esa columna cae en la MISMA x en todas.

   Nada de posición absoluta: con un título de cinco líneas la rejilla crece y
   la hora sigue en su sitio, arriba a la derecha (`align-items: start`). */
.scm-evt-list-detail-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: var(--scm-ui-sp-3);
    row-gap: var(--scm-ui-sp-2);
}
/* El título del evento es lo que identifica la fila: toma el rol de nombre de
   la escala de P-00 (15px / 700 / -0.015em).

   `flex-wrap` y `align-items: center`: el que acompaña al título ya no es un
   marcador de 22px sino la etiqueta "Destacado", que es una píldora con
   texto. Con envoltura, un título largo baja de línea entero en vez de
   empujar la etiqueta fuera de la columna. */
.scm-evt-list-title-text {
    font-size: var(--scm-ui-fs-row); color: var(--cal-text); font-weight: var(--scm-ui-fw-strong);
    letter-spacing: var(--scm-ui-lsp-row); line-height: 1.3;
    display: inline-flex; align-items: center; flex-wrap: wrap; gap: 7px;
    min-width: 0;
}
/* La hora conserva la geometría de P-03 —alto de 26, radio 8, 12px/600— y
   reasigna sus dos variables para vestirse de superficie neutra en vez del
   azul informativo. Tres motivos, y el último es el que manda:

   · Sobre la tarjeta destacada, el chip azul se fundía con el velo de la
     tarjeta y dejaba de leerse como una etiqueta aparte.
   · Con el color automático del evento ya presente en la fecha, en el borde
     y en "Más detalles", un cuarto color en la hora no distingue nada.
   · La hora tiene que verse IGUAL en un evento normal y en uno destacado, y
     en el azul y en el verde: lo único que distingue a un destacado es el
     fondo de su tarjeta y su etiqueta. Una superficie opaca propia lo
     garantiza.

   El borde de 1px es una variación local declarada: P-03 no lleva borde, pero
   sin él un chip de superficie neutra sobre una tarjeta blanca no tiene
   contorno. Va acotado a este chip.

   El ancho mínimo es lo que ordena la columna: todas las etiquetas miden lo
   mismo, tomado del formato más largo que produce `$format_time_12h`
   ("12:30 pm", ocho caracteres), y el contenido va centrado con números
   tabulares para que las cifras no bailen entre tarjetas.

   Va con el contenedor delante —(0,2,0)— y no con la clase suelta: P-03 se
   declara sus dos variables a sí mismo en `.scm-ui-badge`, que es (0,1,0)
   igual que este selector, y la biblioteca se encola DESPUÉS de la hoja del
   módulo. A igual especificidad gana el orden, así que sin el scope el badge
   se quedaba con su gris neutro (2.31:1) y esta regla no pintaba nada. */
.scm-evt-wrap .scm-evt-list-time-chip {
    --scm-ui-badge-bg: var(--cal-chip-bg);
    --scm-ui-badge-fg: var(--cal-chip-fg);
    gap: 4px;
    min-width: 112px;
    border: 1px solid var(--cal-chip-line);
    justify-content: center;
    justify-self: end;
    font-variant-numeric: tabular-nums;
}
.scm-evt-list-time-chip .material-icons-round { font-size: 14px; line-height: 1; }
.scm-evt-list-desc {
    font-size: var(--scm-ui-fs-badge, 12px); color: var(--cal-text-2); font-style: italic;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Etiqueta "Destacado". Sustituye a la estrella suelta violeta: aquélla era
   un marcador que había que saber interpretar, y esto lo dice con todas las
   letras. Lleva la estrella dentro, así que el marcador no se pierde.

   Se pinta con el relleno del PROPIO evento y no con un violeta fijo, que es
   el cambio de fondo de esta ronda: "destacado" ya no es un color, es una
   etiqueta. El blanco encima está medido contra los dieciséis tonos.

   12px y no los 10 de la referencia: es el mínimo del sistema para un badge
   y aquí no hay motivo para pedir una excepción —la píldora va en una fila
   de 15px, no en una celda de 40. */
.scm-evt-feat-tag {
    display: inline-flex; align-items: center; gap: 4px;
    flex: 0 0 auto;
    padding: 2px 9px 2px 7px;
    border-radius: 999px;
    background: var(--evt-fill);
    color: #fff;
    font-size: var(--scm-ui-fs-badge, 12px);
    font-weight: var(--scm-ui-fw-strong);
    line-height: 18px;
    white-space: nowrap;
}
.scm-evt-feat-tag .material-icons-round { font-size: 13px; line-height: 1; }

/* ── Vista MES ────────────────────────────────────────── */
.scm-evt-month-nav {
    display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
    justify-content: center;
}
/* `flex: 0 0 auto` para que la flecha no encoja: a 320px el título del mes se
   comía los dos botones y quedaban en 35px de ancho, por debajo del área
   táctil. Quien se ajusta ahora es el título. */
.scm-evt-month-nav-btn {
    width: 32px; height: 32px;
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--cal-line); border-radius: 8px;
    background: var(--cal-surface); color: var(--cal-text-2);
    text-decoration: none;
}
.scm-evt-month-nav-btn:hover { background: var(--cal-surface-2); }
.scm-evt-month-nav-title { font-size: var(--scm-ui-fs-section); color: var(--cal-text); text-transform: capitalize; min-width: 0; text-align: center; }

/* minmax(0, 1fr) y no 1fr, por lo mismo que el calendario aprobado: el mínimo
   automático de una columna de grid es el ancho de su contenido, y los chips
   van en nowrap. Con títulos largos la rejilla se dimensionaba por el título y
   se salía de la pantalla en móvil. Con mínimo cero manda la columna y el
   título se corta con puntos suspensivos. */
.scm-evt-month-grid {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    background: var(--cal-grid-bg); padding: 12px; border-radius: 14px; border: 1px solid var(--cal-line);
}
/* Misma corrección de contraste: sobre el plano de la rejilla, --cal-text-4
   medía 2.31:1. */
.scm-evt-month-weekday {
    text-align: center; font-size: var(--scm-ui-fs-badge, 12px); font-weight: var(--scm-ui-fw-strong);
    color: var(--scm-ui-text-2); padding: 6px 0;
    text-transform: uppercase; letter-spacing: 0.4px;
}
.scm-evt-month-cell {
    min-height: 78px; padding: 6px;
    border-radius: 8px; background: var(--cal-surface-2);
    display: flex; flex-direction: column; gap: 4px;
    position: relative;
    min-width: 0;
    overflow: hidden;
}
.scm-evt-month-cell.is-empty { background: transparent; }
.scm-evt-month-cell.is-today { background: var(--cal-accent-soft); outline: 2px solid var(--cal-accent); }
.scm-evt-month-cell.has-items { cursor: pointer; }
.scm-evt-month-cell.has-items:hover { background: var(--cal-accent-soft); }
.scm-evt-month-day-num {
    font-size: 12px; font-weight: var(--scm-ui-fw-strong); color: var(--cal-text);
    align-self: flex-end;
}
.scm-evt-month-chips { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* El chip consume P-03, que es inline-flex y centra su contenido. Al truncar,
   un contenedor flex recorta por las dos puntas y se come el principio del
   título. Como su único contenido es texto, se sirve en bloque: el corte
   ocurre al final y aparecen los puntos suspensivos. Alto, radio y tipografía
   siguen siendo los del patrón. Es la misma corrección que lleva el chip del
   calendario aprobado.

   Las dos variables de P-03 se reasignan al color automático del evento, que
   es el MISMO que ese evento tiene en la Lista y en el Dashboard: la celda
   del mes y la fila de la lista hablan del mismo evento, así que no pueden
   hablar en colores distintos. `.scm-ui-badge--info` es (0,1,0) y este
   selector (0,2,0), así que gana sin recurrir a `!important`. */
.scm-evt-wrap .scm-evt-month-chip {
    --scm-ui-badge-bg: var(--evt-soft);
    --scm-ui-badge-fg: var(--evt-ink);
    display: block;
    line-height: 20px;
    text-align: center;
}
.scm-evt-month-chip {
    font-size: var(--scm-ui-fs-badge, 12px); font-weight: var(--scm-ui-fw-med);
    padding: 0 5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
}
/* Destacado en la vista Mes. Aquí no cabe una etiqueta con la palabra
   "Destacado" —la celda mide unos 40px y se comería el título—, así que el
   contraste lo hace el propio chip: relleno SÓLIDO del color del evento con
   el título en blanco, contra el fondo suave de ese mismo color que lleva un
   evento normal. Mismo tono en los dos casos, distinta intensidad, que es la
   regla de esta ronda: destacado no es un color, es un grado. */
.scm-evt-wrap .scm-evt-month-chip.is-featured {
    background: var(--evt-grad);
    color: #fff;
}
.scm-evt-month-chip-more {
    font-size: var(--scm-ui-fs-badge, 12px); color: var(--cal-text-3); font-weight: var(--scm-ui-fw-med);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.scm-evt-month-detail {
    margin-top: 16px;
    padding: 14px;
    background: var(--cal-surface);
    border: 1px solid var(--cal-line); border-radius: 12px;
}
.scm-evt-month-detail-title {
    margin: 0 0 12px; font-size: 14px; font-weight: var(--scm-ui-fw-strong); color: var(--scm-ui-text);
    text-transform: capitalize;
}
.scm-evt-month-detail-list { display: flex; flex-direction: column; gap: 8px; }

/* ── "Más detalles" expandible ─────────────────────────── */
.scm-evt-more-btn {
    display: inline-flex; align-items: center; gap: 4px;
    background: none; border: none;
    color: var(--cal-accent-fg); cursor: pointer;
    font-size: var(--scm-ui-fs-body); padding: 4px 0;
    font-weight: var(--scm-ui-fw-med);
    align-self: flex-start;
}
/* Dentro de una tarjeta, el enlace y el filo de la descripción toman el
   color automático de ESE evento; fuera de ella siguen con el acento del
   calendario. La apertura y el cierre no se tocan: mismo botón, mismo
   `aria-expanded`, mismo `hidden` y mismo manejador. */
.scm-evt-list-card .scm-evt-more-btn { color: var(--evt-ink); }
.scm-evt-list-card .scm-evt-detail-desc { border-left-color: var(--evt-ink); }
.scm-evt-more-btn[aria-expanded="true"] .material-icons-round { transform: rotate(180deg); }
.scm-evt-more-btn .material-icons-round { font-size: 16px; transition: transform 0.2s; }
/* La superficie sube de --cal-surface-2 a --cal-surface: el cuerpo de la
   tarjeta ES ahora --cal-surface-2, y una caja del mismo tono encima no se
   distinguía del fondo que la contiene. */
.scm-evt-detail-desc {
    margin-top: 6px;
    padding: 8px 10px;
    background: var(--cal-surface);
    border-left: 3px solid var(--cal-accent);
    border-radius: 4px;
    color: var(--cal-text-2);
    font-size: var(--scm-ui-fs-body);
    line-height: 1.5;
    white-space: pre-wrap;
}

/* ── Panel admin ──────────────────────────────────────── */

/* Pestañas del panel (Lista de eventos / Importar Excel): P-08, opción C
   —la de por defecto— con `--scm-ui-tabs-n: 2` desde la vista. La opción A
   queda descartada por especificación: está autorizada únicamente para
   módulos de 6 o más pestañas. `.scm-evt-tabs` y `.scm-evt-tab` se quedan
   en el marcado como clases funcionales y sin una sola regla: toda la forma
   la sirve p08-tabs.css. */

/* Card de sección. La composición de las cards sigue pendiente en
   COMPONENTS.md §13.1, así que aquí NO se rediseña ninguna: solo dejan de
   escribir sus colores a mano y toman superficie, línea, radio y sombra del
   sistema, que es lo que les faltaba para responder al tema. */
.scm-evt-card {
    background: var(--scm-ui-surface);
    border: 1px solid var(--scm-ui-line);
    border-radius: var(--scm-ui-r-lg);
    box-shadow: var(--scm-ui-sh-card);
    padding: var(--scm-ui-sp-5);
    margin-bottom: var(--scm-ui-sp-5);
}
/* Título de sección de P-00: 16px / 700 / -0.02em. El color se declara con
   el scope delante porque un `h3` desnudo de una hoja ajena (0,0,1) gana
   siempre a un color heredado del contenedor (COMPONENTS.md §7.3). */
.scm-evt-card h3 {
    margin: 0 0 var(--scm-ui-sp-3);
    font-size: var(--scm-ui-fs-section);
    font-weight: var(--scm-ui-fw-strong);
    letter-spacing: var(--scm-ui-lsp-section);
}
.scm-ui .scm-evt-card h3 { color: var(--scm-ui-text); }

/* Aviso en página: componente todavía sin patrón (COMPONENTS.md §13.2), así
   que no se rediseña. Solo se repuntan sus literales a tokens —era lo que le
   impedía tener modo oscuro— y se ajusta a la escala tipográfica. */
.scm-evt-hint {
    background: var(--scm-ui-surface-2);
    border-left: 3px solid var(--scm-ui-blue-500);
    padding: 10px 14px;
    border-radius: var(--scm-ui-r-sm);
    font-size: var(--scm-ui-fs-meta);
    color: var(--scm-ui-text-2);
    margin: var(--scm-ui-sp-3) 0;
}
.scm-evt-hint ul, .scm-evt-hint li { margin: 0; }
.scm-evt-hint code {
    background: var(--scm-ui-info-bg); color: var(--scm-ui-info-fg);
    padding: 2px 6px; border-radius: var(--scm-ui-r-sm);
    font-size: var(--scm-ui-fs-badge);
}
.scm-evt-hint--tight { margin-top: 6px; }

/* Botón legacy del módulo, mismo caso que .scm-evt-btn-admin. Aquí el
   acotado es imprescindible: además del calendario, lo consumen los filtros
   de "Última conexión" del Panel de Control
   (core/helpers/leader-activity-list.php), que NO está migrado. Con
   :not(.scm-ui-btn):not(.scm-ui-act) esos consumidores conservan exactamente
   su apariencia actual. */
.scm-evt-btn-secondary:not(.scm-ui-btn):not(.scm-ui-act) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    color: #0f172a !important;
    border: 1px solid #e2e8f0;
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    cursor: pointer;
}
.scm-evt-btn-secondary:not(.scm-ui-btn):not(.scm-ui-act):hover:not(:disabled) { background: #e2e8f0; }
.scm-evt-btn-secondary:not(.scm-ui-btn):not(.scm-ui-act):disabled { opacity: 0.5; cursor: not-allowed; }
.scm-evt-btn-secondary:not(.scm-ui-btn):not(.scm-ui-act) .material-icons-round { font-size: 16px; }

#scm-evt-import-form {
    display: flex; align-items: center; gap: 10px;
    margin-top: var(--scm-ui-sp-3); flex-wrap: wrap;
}
/* El <input type="file"> no tiene patrón propio: recibe los valores del
   campo de §8.1 —borde, radio, superficie y tinta del sistema— y el alto de
   control, que es lo que le da su área táctil. El botón interior lo sigue
   dibujando el navegador. */
.scm-evt-wrap--manage #scm-evt-file {
    display: flex;
    align-items: center;
    min-height: var(--scm-ui-h-control);
    padding: 0 12px;
    border: 1px solid var(--scm-ui-line);
    border-radius: var(--scm-ui-r-sm);
    background: var(--scm-ui-surface);
    font-size: var(--scm-ui-fs-meta);
    color: var(--scm-ui-text-2);
    max-width: 100%;
    box-sizing: border-box;
}

/* La tabla de la lista consume P-04 (p04-table.css): cabecera, celdas,
   divisores, hover de fila y última fila sin línea salen del patrón. Aquí
   solo queda lo que P-04 no cubre y la transformación a tarjetas en móvil,
   que es composición propia de esta vista y NO se rediseña en esta ronda.

   El envoltorio de tarjeta que P-04 pone en `.scm-ui-table-wrap` ya lo
   aporta aquí `.scm-evt-card`, que es la card de sección de esta vista y
   toma del sistema superficie, línea, radio 16 y sombra. Montar además el
   envoltorio del patrón dejaría una tarjeta dentro de otra, así que
   `.scm-evt-tablewrap` se queda solo con el desplazamiento —el mismo valor
   que sirve `--scroll`—, que es la salida que P-04 §4.4 declara para cuando
   el ancho no alcanza. */
.scm-evt-tablewrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* El tema pinta una cuadrícula completa con `table, th, td { border: … }`.
   Es un selector de elemento (0,0,1), así que P-04 —que solo declara la
   línea inferior— no llega a apagar los otros tres lados. Se apagan aquí,
   acotado al panel de gestión y sin un solo !important. */
.scm-evt-wrap--manage .scm-ui-table,
.scm-evt-wrap--manage .scm-ui-table th,
.scm-evt-wrap--manage .scm-ui-table td {
    border-left: 0;
    border-right: 0;
    border-top: 0;
}
.scm-evt-wrap--manage .scm-ui-table { border-bottom: 0; }

/* Aire entre la cabecera de la sección y la tabla — el mismo de siempre. */
.scm-evt-table { margin-top: 8px; }

/* Cabecera sin fondo: decisión local declarada de esta vista, anterior a la
   migración y conservada a propósito. La tabla vive DENTRO de una card con
   20px de padding, así que la banda gris de P-04 —pensada para una tabla que
   llena su envoltorio de borde a borde— quedaría flotando como un rectángulo
   suelto. Todo lo demás de la cabecera (12px/700, versalita, tracking .1em,
   tinta y divisor) lo sirve P-04. */
.scm-evt-wrap--manage .scm-evt-table :where(th) { background: transparent; }

/* Fecha en azul y hora en verde: es la lectura por color que ya tenía la
   vista y no se rediseña. Solo cambian de origen —de los tokens legacy
   --scm-pa-* a los semánticos del sistema, que valen lo mismo en claro y
   traen su equivalencia oscura—. Se siguen seleccionando por posición para
   no tocar el PHP de las celdas. */
.scm-evt-table td:nth-child(1) {
    font-weight: var(--scm-ui-fw-med);
    color: var(--scm-ui-info-fg);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.scm-evt-table td:nth-child(2) {
    font-weight: var(--scm-ui-fw-med);
    color: var(--scm-ui-ok-fg);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* El título de la fila es el dato que la identifica: rol "Nombre de
   persona" de P-00, que P-04 sirve con .scm-ui-table__name. Aquí solo se
   permite que envuelva —es la única columna elástica— en vez de truncar. */
.scm-evt-table td:nth-child(3) {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* La estrella se centra bajo su cabecera. */
.scm-evt-table th:nth-child(4),
.scm-evt-table td.evt-col-dest { text-align: center; }

/* Cabecera de la columna Acción alineada a la izquierda: la de P-04 va a la
   derecha y la retícula de acciones empieza a la izquierda de su celda, así
   que el rótulo quedaba lejos de sus botones. Misma excepción local
   declarada que en el log de SMS (COMPONENTS.md §4.5), acotada a esta tabla
   y sin modificar P-04. */
.scm-evt-table th.scm-ui-table__actions,
.scm-evt-table td.scm-ui-table__actions { text-align: left; }

/* ── Estrella de destacado ───────────────────────────────────────────────
   Consume P-02, como el resto de acciones de la fila: caja de 52 × 42, radio
   8, borde y fondo neutros del §7.1, y el objetivo táctil de 44px que el
   patrón resuelve con su zona transparente. Antes era un solo-ícono de P-05
   en variante `--ghost`, es decir sin caja ni borde, que es justo lo que el
   §7.1 no admite: el contenedor siempre conserva su fondo neutro y su borde.

   Va sin etiqueta a propósito: es el único control de su columna, la cabecera
   "DESTACADO" ya la nombra y añadir texto sería añadir información. El nombre
   accesible lo da su `aria-label`, como pide `ICONS` §13.

   Los dos estados se sirven con selector compuesto sobre la clase que conmuta
   el JavaScript, nunca reasignándola (COMPONENTS.md §15.4). Solo cambia
   `--scm-act-icon`, la variable de acento del §7.3: la caja se queda neutra
   en los dos estados, que es la regla —el color del glifo no pinta el fondo—.
   Apagada usa el gris del componente; encendida, el acento VIOLETA del §7.1
   (#6B5DD3 en claro, #B6AAF5 en oscuro). Ha pasado por tres colores y el
   motivo del último es el que vale: el marcador de favorito del calendario es
   violeta (v8.71.1), así que este —que es el interruptor de ese mismo hecho—
   tiene que serlo también. "Favorito" no puede tener un color en una pantalla
   y otro en la otra.

   Aquí la caja se queda NEUTRA aunque en el calendario el marcador vaya con
   relleno violeta sólido: esto es un control y le aplica el §7.1 —el color
   llega al glifo y no al fondo—; aquello es un indicador que no se pulsa. Se
   distinguen además por el propio glifo, que el manejador cambia entre
   `star_border` y `star`.

   Ni la lógica, ni el AJAX, ni `is_featured`, ni los filtros, ni la caja, ni
   el área táctil cambian: solo el valor de esa variable. */
.scm-ui-act.scm-evt-star-btn { --scm-act-icon: var(--scm-ui-act-accent-gray); }
.scm-ui-act.scm-evt-star-btn:hover,
.scm-ui-act.scm-evt-star-btn.is-on { --scm-act-icon: var(--scm-ui-act-accent-violet); }

/* La celda está centrada con `text-align`, que no alcanza a una caja de
   bloque: el centrado de la acción se hace con márgenes automáticos. */
.scm-evt-table td.evt-col-dest .scm-ui-act { margin-inline: auto; }

/* Avisos de resultado. "Mensaje o aviso en página" sigue sin patrón
   (COMPONENTS.md §13.2): no se rediseña, solo pasa a los tokens semánticos
   —que es lo que le faltaba para responder al tema— y a la escala. */
.scm-evt-msg {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: var(--scm-ui-r-sm);
    font-size: var(--scm-ui-fs-meta);
    overflow-wrap: break-word;
}
.scm-evt-msg-ok { background: var(--scm-ui-ok-bg); color: var(--scm-ui-ok-fg); }
.scm-evt-msg-error { background: var(--scm-ui-danger-bg); color: var(--scm-ui-danger-fg); }
.scm-evt-msg-errors {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--scm-ui-warn-bg);
    border-radius: var(--scm-ui-r-sm);
    color: var(--scm-ui-warn-fg);
    font-size: var(--scm-ui-fs-meta);
}
.scm-evt-msg-errors ul { margin: 6px 0 0 18px; }
.scm-evt-msg--head { margin-top: 0; margin-bottom: var(--scm-ui-sp-3); }

/* ── Lista admin: header con botón Nuevo + row actions ── */
.scm-evt-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--scm-ui-sp-3);
    flex-wrap: wrap;
    gap: 10px;
}
.scm-evt-list-header h3, .scm-evt-list-header h4 { margin: 0; }
/* Título de sección de segundo nivel dentro del modal de inscripciones. */
.scm-evt-wrap--manage .scm-evt-insc-fields h4,
.scm-evt-wrap--manage .scm-evt-insc-appearance h4 {
    margin: 0 0 var(--scm-ui-sp-3);
    font-size: var(--scm-ui-fs-section);
    font-weight: var(--scm-ui-fw-strong);
    letter-spacing: var(--scm-ui-lsp-section);
    color: var(--scm-ui-text);
}
.scm-evt-wrap--manage .scm-evt-list-header h4 { margin: 0; }
.scm-evt-row-actions {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
/* Los tamaños compactos de este grupo los servían reglas propias; hoy los
   sirven P-02 (acción compacta) y el botón solo-ícono de P-05, según lo que
   monta cada vista. Se acotan a las instancias sin migrar para no pisar los
   patrones. */
.scm-evt-row-actions .scm-evt-btn-secondary:not(.scm-ui-btn):not(.scm-ui-act) {
    padding: 6px 10px;
    font-size: 12px;
}

/* ══════════════════════════════════════════════════════════════════════
   BOTONERA DE LA LISTA — AHORA ES P-02

   `.evt-abtn` reproducía a mano la acción compacta con ícono: 52×42, glifo
   Material de 16px, etiqueta de 9px, gap 2 interno y 5 entre botones, radio
   8. Es exactamente P-02 (docs/ui/ICONS), así que se retira y se consume el
   patrón: `.scm-ui-act` para la caja y `.scm-ui-act-group` para el grupo.

   Los tres tonos también coinciden con la variante semántica pintada del
   §7.2 hasta el hex —los tokens legacy --scm-pa-blue/green/red-sf/-bd valen
   rgba(37,99,235,.10)/.38, rgba(15,157,110,.10)/.40 y rgba(220,53,69,.09)/.38,
   los mismos de la paleta aprobada—, así que el tema claro no se mueve y el
   oscuro pasa a la equivalencia global del §7.4. El reparto de color no se
   rediseña: los botones que ya venían pintados siguen pintados y los que
   venían neutros siguen neutros.

   `.evt-acciones`, `.evt-abtn` y `.evt-atxt` se quedan en el marcado como
   clases funcionales, sin una sola regla: toda la forma la sirve
   p02-action-button.css.
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   MÓVIL — LA FILA SE VUELVE TARJETA

   Composición propia de esta vista y NO se rediseña en esta ronda: cada
   evento sigue siendo UNA sola tarjeta con borde, con los mismos datos, las
   mismas acciones y los mismos íconos. Dentro no hay más cajas: fecha y
   hora son texto plano en una línea de metadatos, el título es la línea
   principal y la estrella va anclada arriba a la derecha.

   Lo único que cambia es de dónde salen los valores: borde, radio, aire y
   tipografía pasan a los tokens del sistema, y la botonera se comporta como
   manda ICONS §9 en móvil —misma caja de 52×42, una sola fila y carril
   desplazable cuando no cabe, nunca wrap ni dos columnas—.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .scm-evt-tablewrap { overflow-x: visible; }

    .scm-evt-table { display: block; width: 100%; }

    /* Las cabeceras se pierden al apilar: cada dato ya se lee por sí solo. */
    .scm-evt-table thead { display: none; }

    /* tbody como columna: el gap es la separación entre tarjetas. */
    .scm-evt-table tbody {
        display: flex;
        flex-direction: column;
        gap: var(--scm-ui-sp-3);
        width: 100%;
    }

    .scm-evt-table tr {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 3px 6px;
        border: 1px solid var(--scm-ui-line);
        border-radius: var(--scm-ui-r-lg);
        /* Hueco derecho para la estrella: su caja de P-02 mide 52px y se
           ancla a 10px del borde, así que el contenido se aparta 72px. */
        padding: 14px 72px 14px 14px;
        box-sizing: border-box;
        min-width: 0;
    }

    .scm-evt-table tbody tr:hover { background: transparent; }

    /* Sin fondos, sin bordes y sin padding: nada de cajas dentro de la
       tarjeta. El divisor de escritorio también se apaga aquí, que era la
       "línea de fondo" que parecía unir un evento con el siguiente. */
    .scm-evt-table td {
        display: block;
        border: 0;
        background: none;
        padding: 0;
    }

    /* Fecha y hora: texto plano, misma línea, en tono secundario.
       El tamaño es el del rol "Texto secundario" de P-00 —13.5px / 500—, que
       es el mismo que la celda ya tiene en escritorio. Antes esta línea bajaba
       a `--scm-ui-fs-badge`: los 12px son el mínimo del sistema y el tamaño
       del BADGE, no el de un texto secundario, así que el dato se leía más
       pequeño en el móvil que en el escritorio sin motivo. */
    .scm-evt-table td:nth-child(1),
    .scm-evt-table td:nth-child(2) {
        order: 1;
        flex: 0 0 auto;
        font-size: var(--scm-ui-fs-meta);
        font-weight: var(--scm-ui-fw-soft);
        color: var(--scm-ui-text-2);
    }

    /* Separador "·" entre fecha y hora, sin tocar el PHP. */
    .scm-evt-table td:nth-child(2)::before {
        content: "·";
        margin-right: 6px;
    }

    /* Título: la línea principal de la tarjeta, a ancho completo. Tamaño,
       peso, tracking y tinta los sirve el rol "Nombre de persona" de P-04
       (.scm-ui-table__name); aquí solo se le permite envolver. */
    .scm-evt-table td:nth-child(3) {
        order: 2;
        flex: 1 0 100%;
        min-width: 0;
        margin-top: 3px;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Destacado: fuera del flujo, arriba a la derecha de la tarjeta. */
    .scm-evt-table td.evt-col-dest {
        position: absolute;
        top: 10px;
        right: 10px;
        text-align: initial;
    }

    /* Botonera: última línea, a ancho completo. `min-width: 0` es lo que
       permite que el carril de P-02 desplace en vez de estirar la tarjeta.

       El margen negativo recupera el hueco que la tarjeta reserva a la
       estrella. Esa reserva son 72px de relleno derecho, pero la estrella está
       anclada ARRIBA a la derecha y solo ocupa las dos primeras líneas: a la
       altura de la botonera no hay nada que esquivar. Sin esto el carril
       arranca 58px más estrecho de lo que puede, y en una pantalla de 320px
       eso es un botón entero de los cinco que deja de verse sin deslizar.
       No cambia la caja de P-02 —siguen siendo 52 × 42px— ni el número de
       acciones: solo deja de desperdiciar ancho. */
    .scm-evt-table td.evt-col-acc {
        order: 3;
        flex: 1 0 100%;
        min-width: 0;
        margin-top: var(--scm-ui-sp-3);
        margin-right: -58px;
    }
}

/* Un solo bloque .scm-dark propio, el del color automático por evento, y va
   arriba junto a las derivadas que corrige. Todo lo demás de esta hoja está
   escrito con tokens del sistema, que ya traen su equivalencia oscura en
   00-tokens.css (G-17), y duplicarlo aquí sería pintar dos veces. La
   excepción es inevitable: el tono de cada evento llega en el `style` del
   elemento, así que el puente de 00-tokens.css —que reasigna variables sobre
   `.scm-evt-wrap`— no lo alcanza. */

/* ══════════════════════════════════════════════════════════════════════
   ACCIONES DE FILA EN LAS TABLAS DE DETALLE / SEGUIMIENTO — AHORA P-02

   Este bloque reproducía a mano, solo en escritorio, la caja de 52×42 con
   el ícono arriba y la etiqueta de 9px debajo. Es P-02, así que se retira y
   la vista consume el patrón: `.scm-ui-act` en el botón y
   `.scm-ui-act-group` en el grupo. Con eso la caja es idéntica en escritorio
   y en móvil —como exige ICONS §4— en vez de cambiar de forma al cruzar los
   768px, y el ancho del grupo lo fijan sus acciones reales.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Campos de formulario ───────────────────────────────────────────────
   La COMPOSICIÓN del formulario sigue pendiente (COMPONENTS.md §13.1); el
   CAMPO sí está especificado (§8.1) y es lo que se aplica aquí, con los
   mismos valores de la implementación de referencia: etiqueta 13px/500,
   control de 10px 12px, borde de línea, radio 8, superficie y tinta del
   sistema, y foco con contorno de 2px del azul de marca.               */
.scm-evt-form-row {
    margin-bottom: 14px;
}
.scm-evt-form-row label {
    display: block;
    font-weight: var(--scm-ui-fw-soft);
    font-size: 13px;
    color: var(--scm-ui-text-2);
    margin-bottom: 6px;
}
.scm-evt-form-row input[type="text"],
.scm-evt-form-row input[type="date"],
.scm-evt-form-row input[type="time"],
.scm-evt-form-row textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--scm-ui-line);
    border-radius: var(--scm-ui-r-sm);
    background: var(--scm-ui-surface);
    color: var(--scm-ui-text);
    font-family: inherit;
    font-size: var(--scm-ui-fs-body);
    box-sizing: border-box;
}
.scm-evt-wrap--manage input[type="text"]:focus,
.scm-evt-wrap--manage input[type="search"]:focus,
.scm-evt-wrap--manage input[type="date"]:focus,
.scm-evt-wrap--manage input[type="time"]:focus,
.scm-evt-wrap--manage textarea:focus,
.scm-evt-wrap--manage select:focus {
    outline: 2px solid var(--scm-ui-blue-500);
    outline-offset: -1px;
    border-color: var(--scm-ui-blue-500);
}
.scm-evt-form-row textarea { resize: vertical; }

/* Fecha y hora en tres desplegables, la misma composición que `.scm-bd-reg`
   usa en el formulario de registro: una sola fila que se reparte el ancho.
   `min-width: 0` es lo que les permite encogerse dentro del flex en vez de
   desbordar la columna. El campo en sí no se declara aquí: lo sirve
   `.scm-evt-wrap--manage select`, que ya es el campo de §8.1, y su alto
   táctil de 44px en móvil lo da el bloque anti-zoom del final del archivo. */
.scm-evt-dsel {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--scm-ui-sp-2);
    align-items: center;
}
.scm-evt-dsel select {
    flex: 1 1 0;
    min-width: 0;
}
/* Reparto desigual, con el mismo criterio que el precedente de `.scm-bd-edit`
   en el modal de persona (80 / 120 / 90px): el mes pide más ancho que el día
   y el año porque su etiqueta es una palabra, no un número. */
.scm-evt-dsel .scm-evt-d-m { flex-grow: 1.5; }
.scm-evt-dsel .scm-evt-d-y { flex-grow: 1.125; }
.scm-evt-dsel .scm-evt-t-p { flex-grow: 1.4; }

.scm-evt-form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--scm-ui-sp-3);
}
.scm-evt-form-row--gap { margin-top: 14px; }
.scm-evt-required { color: var(--scm-ui-danger-fg); font-weight: var(--scm-ui-fw-strong); }
.scm-evt-optional { color: var(--scm-ui-text-3); font-weight: var(--scm-ui-fw-soft); font-size: var(--scm-ui-fs-badge); }

/* 480px es uno de los cinco breakpoints del sistema; el 540 anterior no lo
   era (COMPONENTS.md §1.6). */
@media (max-width: 480px) {
    .scm-evt-form-row-2 { grid-template-columns: 1fr; }
}

/* ── Modales ────────────────────────────────────────────────────────────
   La composición de estos modales —cierre anclado en la esquina, título y
   subtítulo en el cuerpo, pie de acciones— es la que ya tenían y NO se
   rediseña. Lo que cambia son los valores: superficie, radio de card (16),
   sombra y opacidad del velo de la implementación de referencia
   (COMPONENTS.md §7.2), y la tipografía de la escala de P-00.
   El ancho máximo se conserva (600 / 640px): estos paneles llevan un
   formulario de dos columnas y una lista de campos, así que bajarlos a los
   480px de la referencia sería recomponerlos, no adaptarlos.            */
.scm-evt-modal[hidden] { display: none !important; }
.scm-evt-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.scm-evt-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,0.6);
}
.scm-evt-modal-content {
    position: relative;
    background: var(--scm-ui-surface);
    border-radius: var(--scm-ui-r-lg);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--scm-ui-sp-6);
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
/* El botón de cerrar consume el solo-ícono de P-05 en su variante --ghost,
   que es la que la referencia reserva para cerrar. Aquí solo queda su
   posición, que es composición de este modal. */
.scm-evt-modal-close.scm-ui-iconbtn {
    position: absolute;
    top: 12px;
    right: 12px;
}
/* El de la barra de acciones es un botón normal y no debe posicionarse. */
.scm-evt-modal-actions .scm-evt-modal-close { position: static; }
.scm-evt-modal-title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: var(--scm-ui-fw-med);
    padding-right: 44px; /* no pasa por debajo del botón de cerrar */
}
/* Un h3 desnudo de una hoja ajena (0,0,1) gana siempre a un color heredado
   del contenedor, así que el título se declara con el scope delante — la
   regla obligatoria de COMPONENTS.md §7.3. */
.scm-ui .scm-evt-modal-title { color: var(--scm-ui-text); }
.scm-evt-modal-sub {
    margin: 0 0 var(--scm-ui-sp-4);
    color: var(--scm-ui-text-2);
    font-size: var(--scm-ui-fs-meta);
}
.scm-evt-reminder-block {
    margin: 14px 0;
    padding: var(--scm-ui-sp-3);
    background: var(--scm-ui-surface-2);
    border-radius: var(--scm-ui-r-sm);
}
.scm-evt-reminder-head {
    display: flex;
    align-items: center;
    gap: var(--scm-ui-sp-3);
    margin-bottom: var(--scm-ui-sp-2);
    color: var(--scm-ui-text);
    cursor: pointer;
}
.scm-evt-reminder-block textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--scm-ui-line);
    border-radius: var(--scm-ui-r-sm);
    background: var(--scm-ui-surface);
    color: var(--scm-ui-text);
    font-family: inherit;
    font-size: var(--scm-ui-fs-meta);
    resize: vertical;
    box-sizing: border-box;
}
.scm-evt-modal-actions {
    margin-top: var(--scm-ui-sp-4);
    display: flex;
    justify-content: flex-end;
    gap: var(--scm-ui-sp-2);
    flex-wrap: wrap;
}
.scm-evt-modal-result { margin-top: 10px; }

/* ── Responsive ───────────────────────────────────────── */
/* Área táctil de los controles del calendario. `--scm-ui-h-control` vale 44px
   por debajo de 768, así que los tres llegan al mínimo sin escribir el número
   a mano. El calendario aprobado deja su flecha de mes en 32px; aquí sube,
   igual que subió el ítem del paginador en la v8.64.0, porque la regla de área
   táctil del sistema manda sobre la medida heredada. No toca a Servidores. */
@media (max-width: 768px) {
    .scm-evt-cal-tab { min-height: var(--scm-ui-h-control); }
    .scm-evt-month-nav-btn {
        width: var(--scm-ui-h-control);
        height: var(--scm-ui-h-control);
    }
    .scm-evt-more-btn { min-height: var(--scm-ui-h-control); }

    /* En móvil la hora baja SIEMPRE a una segunda línea, y siempre a la misma
       altura del texto: una sola columna en la rejilla y el chip alineado al
       inicio. Antes dependía de la envoltura, así que un título corto la
       dejaba al lado y uno largo la mandaba abajo. */
    .scm-evt-list-detail-row { grid-template-columns: minmax(0, 1fr); }
    .scm-evt-wrap .scm-evt-list-time-chip { justify-self: start; }

    /* La franja pasa a rejilla de dos columnas: el icono manda la primera y
       el texto la segunda, y la píldora baja a una segunda fila alineada con
       el texto. Con `flex-wrap` la píldora se quedaba comprimiendo el título
       en pantallas estrechas o se salía de la caja; con la rejilla, la
       columna del texto es `minmax(0, 1fr)` y nunca desborda. */
    .scm-evt-next {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        row-gap: 9px;
    }
    .scm-evt-next-pill { grid-column: 2; justify-self: start; }
}

@media (max-width: 640px) {
    /* EXCEPCIÓN LOCAL, la misma que declara el calendario aprobado y por el
       mismo motivo: el chip del mes se queda en 11px en móvil. No es una
       excepción del sistema —P-00 mantiene su mínimo de 12px— pero una celda
       de ~40px no admite un título a 12px, y a 11px con el padding reducido
       entran cuatro o cinco caracteres antes de los puntos suspensivos.
       A diferencia de Servidores, aquí NO se oculta el segundo chip: el
       contador "+N más" de esta vista solo cuenta a partir del tercer evento,
       así que esconderlo dejaría un evento sin representar y sin contar. */
    .scm-evt-wrap .scm-evt-month-chip {
        font-size: 11px;
        line-height: 15px;
        height: auto;
        padding: 1px 3px;
        border-radius: 3px;
    }
    .scm-evt-month-chips { gap: 1px; }
    .scm-evt-month-cell { min-height: 56px; padding: 3px 2px; }
    /* El número del día se queda en los 12px del sistema, como en el
       calendario aprobado: bajaba a 11px sin necesidad —es un número de una o
       dos cifras y cabe—, y esa sí habría sido una excepción sin motivo. */
    .scm-evt-month-nav-title { font-size: 15px; }
    /* El bloque de fecha baja de 62 a 54 y el número de 20 a 18: las tres
       líneas se quedan en los 12px del sistema, que es lo que hace falta
       recalcular es el hilo —su centro pasa de 30 a 26— y los dos recortes
       de los extremos, que apuntan al centro del primer y del último bloque
       (8px de relleno + 27 de media caja). */
    .scm-evt-list-date { width: 54px; height: 54px; border-radius: 14px; }
    .scm-evt-list-day { font-size: 18px; }
    .scm-evt-list-cards > .scm-evt-list-card::before { left: 26px; }
    .scm-evt-list-cards > .scm-evt-list-card:first-child::before { top: 35px; }
    .scm-evt-list-cards > .scm-evt-list-card:last-child::before  { bottom: calc(100% - 35px); }
    .scm-evt-list-card { gap: 11px; }
    .scm-evt-wrap .scm-evt-month-chip-more { font-size: 11px; }
}

/* ── Inscripciones (panel admin, F1) ─────────────────────────── */
.scm-evt-insc-content { max-width: 640px; }

/* "Inscrip." activo: el botón de la fila es P-02 en su variante semántica
   verde, así que el tono ya lo sirve el patrón —igual que antes lo servía
   `.evt-abtn--verde`, con los mismos hex, sin depender de `is-on`—. La regla
   propia se retira por quedarse sin consumidores; `is-on` sigue conmutándose
   desde el JavaScript exactamente igual. */

.scm-evt-insc-toggles {
    display: flex; gap: var(--scm-ui-sp-6); flex-wrap: wrap;
    margin: 14px 0;
}
/* Interruptores: los sirve P-10 (p10-toggle.css) desde el <span
   .scm-ui-toggle> que envuelve al input. `.scm-evt-toggle` se queda con la
   fila —control + etiqueta— y `.scm-evt-toggle-track` / `-thumb` como clases
   funcionales sin reglas propias: carril, pomo, transición y foco los sirve
   el patrón. */
.scm-evt-toggle {
    display: inline-flex; align-items: center; gap: 10px;
    cursor: pointer; font-size: var(--scm-ui-fs-body); color: var(--scm-ui-text);
}
.scm-evt-toggle-label { font-weight: var(--scm-ui-fw-med); }

/* ── Tarjeta de opción del modal de inscripciones ────────────────────────
   UNA definición, dos consumidores: "¿Cómo participarán los niños?" y
   "Estado del formulario". Por eso el alcance es `.scm-evt-insc-content`
   —el contenido del modal, que envuelve a los dos— y no un bloque concreto.

   La tarjeta NO se dibuja aquí: la sirve P-09 entera —`.scm-ui-rows` pone la
   card con su borde, su radio y su sombra, y `.scm-ui-row` las tres columnas
   (chip · identidad · control), el hover, la tipografía y el corte móvil—.
   Este bloque solo añade lo que P-09 no tiene, porque no es una lista sino
   una elección: el estado seleccionado, el chip del ícono y el check.

   El control real es un radio nativo oculto con la MISMA técnica de P-10
   (tamaño cero y `opacity`, jamás `display:none`), así que conserva el
   recorrido con flechas, el foco y el estado deshabilitado. Va dentro del
   `<label>`, de modo que toda la tarjeta es zona de clic sin JavaScript.

   Todo sale de tokens: el modo oscuro entra solo. Se acota con tres clases
   para ganarle a `.scm-evt-form-row label` sin recurrir a `!important`. */
.scm-evt-insc-content .scm-evt-optcards { margin-top: 2px; }

.scm-evt-insc-content .scm-evt-optcards .scm-evt-optcard {
    display: block;
    position: relative;
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    cursor: pointer;
}

.scm-evt-insc-content .scm-evt-optcard__in {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0;
}

/* Un `<label>` solo admite contenido de frase, así que la identidad va en
   `<span>`: se blockifican para que P-09 recupere su margen y su recorte. */
.scm-evt-insc-content .scm-evt-optcards .scm-ui-row__name,
.scm-evt-insc-content .scm-evt-optcards .scm-ui-row__meta { display: block; }
.scm-evt-insc-content .scm-evt-optcards .scm-ui-row__meta { white-space: normal; }

/* Chip del ícono, dentro de la columna de 44px que P-09 ya reserva. Misma
   caja y mismos tonos que los demás chips de ícono del sistema. */
.scm-evt-insc-content .scm-evt-optcard__ic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--scm-ui-r-md);
    background: var(--scm-ui-blue-50);
    color: var(--scm-ui-blue-600);
}
.scm-evt-insc-content .scm-evt-optcard__ic svg { width: 18px; height: 18px; }

/* Indicador de selección: círculo vacío mientras no lo esté. */
.scm-evt-insc-content .scm-evt-optcard__chk {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--scm-ui-line-strong);
    border-radius: 999px;
    background: var(--scm-ui-surface);
    color: transparent;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.scm-evt-insc-content .scm-evt-optcard__in:checked ~ .scm-ui-row {
    background: var(--scm-ui-blue-50);
}
.scm-evt-insc-content .scm-evt-optcard__in:checked ~ .scm-ui-row .scm-evt-optcard__ic {
    background: var(--scm-ui-blue-500);
    color: var(--scm-ui-pager-cur-fg);
}
.scm-evt-insc-content .scm-evt-optcard__in:checked ~ .scm-ui-row .scm-evt-optcard__chk {
    border-color: var(--scm-ui-blue-500);
    background: var(--scm-ui-blue-500);
    color: var(--scm-ui-pager-cur-fg);
}

/* Foco por teclado: el contorno del sistema, hacia dentro porque la card de
   P-09 recorta con `overflow: hidden`. */
.scm-evt-insc-content .scm-evt-optcard__in:focus-visible ~ .scm-ui-row {
    outline: 2px solid var(--scm-ui-blue-500);
    outline-offset: -2px;
}

/* Bloqueado: el evento ya tiene inscripciones. */
.scm-evt-insc-content .scm-evt-optcard__in:disabled ~ .scm-ui-row { opacity: .55; }
.scm-evt-insc-content .scm-evt-optcards.is-locked .scm-evt-optcard { cursor: not-allowed; }

.scm-evt-insc-linkrow { display: flex; gap: var(--scm-ui-sp-2); align-items: center; flex-wrap: wrap; }
.scm-evt-insc-linkrow input { flex: 1 1 180px; min-width: 0; }
.scm-evt-insc-url {
    font-size: var(--scm-ui-fs-meta); color: var(--scm-ui-blue-600); margin: 6px 0 0;
    word-break: break-all;
}
/* Confirmación de "Copiar enlace": el mismo par de tokens del botón
   --success-outline de P-05, servido por sus propias variables para no
   redefinir el patrón. Dos clases (0,2,0) para no depender del orden. */
.scm-ui-btn.scm-evt-copy-link-btn.is-on {
    --scm-ui-btn-bg: var(--scm-ui-ok-bg);
    --scm-ui-btn-line: var(--scm-ui-ok-line);
    --scm-ui-btn-fg: var(--scm-ui-ok-fg);
    --scm-ui-btn-chip-bg: var(--scm-ui-ok-bg);
    --scm-ui-btn-chip-line: var(--scm-ui-ok-line);
    --scm-ui-btn-chip-fg: var(--scm-ui-ok-fg);
}
/* La variante legacy de esta confirmación se retira: sus dos únicos
   consumidores —el modal de inscripciones y la cabecera del detalle— son ya
   botones de P-05, así que la regla se quedaba sin nadie. Con ella se va el
   `!important` que traía. */

.scm-evt-insc-fields { margin-top: 18px; border-top: 1px solid var(--scm-ui-line); padding-top: 14px; }
.scm-evt-insc-appearance { margin-top: 18px; }
.scm-evt-insc-fields-list { margin: 10px 0; display: flex; flex-direction: column; gap: var(--scm-ui-sp-2); }
.scm-evt-insc-field-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--scm-ui-surface-2); border: 1px solid var(--scm-ui-line);
    border-radius: var(--scm-ui-r-sm); padding: 10px var(--scm-ui-sp-3);
}
.scm-evt-insc-field-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scm-evt-insc-field-info strong {
    font-size: var(--scm-ui-fs-row);
    font-weight: var(--scm-ui-fw-person-name);
    letter-spacing: var(--scm-ui-lsp-row);
    line-height: var(--scm-ui-lh-name);
    color: var(--scm-ui-text);
}
.scm-evt-insc-field-info span { font-size: var(--scm-ui-fs-meta); font-weight: var(--scm-ui-fw-soft); color: var(--scm-ui-text-3); }

.scm-evt-insc-field-form {
    background: var(--scm-ui-surface-2); border: 1px dashed var(--scm-ui-line-strong);
    border-radius: var(--scm-ui-r-sm); padding: 14px; margin-top: 10px;
}
.scm-evt-wrap--manage select {
    width: 100%; padding: 10px 12px; border: 1px solid var(--scm-ui-line);
    border-radius: var(--scm-ui-r-sm); font-family: inherit;
    font-size: var(--scm-ui-fs-body); background: var(--scm-ui-surface);
    color: var(--scm-ui-text); box-sizing: border-box;
}
.scm-evt-insc-required label { font-size: var(--scm-ui-fs-body); display: flex; align-items: center; gap: var(--scm-ui-sp-2); }

/* Apariencia del formulario público: selector de color + su interruptor.
   El layout venía en un `style` inline; aquí no cambia, solo deja de estar
   en el marcado (regla 3 de COMPONENTS.md §0). */
.scm-evt-insc-colorrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.scm-evt-insc-colorrow input[type="color"] {
    width: 44px; height: 32px; padding: 2px; cursor: pointer;
    border: 1px solid var(--scm-ui-line); border-radius: var(--scm-ui-r-sm);
    background: var(--scm-ui-surface); box-sizing: border-box;
}
.scm-evt-insc-colorrow .scm-evt-insc-colorlbl {
    display: inline-flex; align-items: center; gap: var(--scm-ui-sp-2);
    margin-bottom: 0; font-weight: var(--scm-ui-fw-soft); cursor: pointer;
}
.scm-evt-banner-preview { margin-bottom: var(--scm-ui-sp-2); }
.scm-evt-banner-preview img {
    max-width: 220px; max-height: 110px;
    border-radius: var(--scm-ui-r-sm); display: block;
}

/* ── Detalle del evento (panel admin, F5 — mockup Pantalla C) ──
   El subtítulo consume `.scm-ui-pagehead__sub` y el grupo de acciones
   `.scm-ui-pagehead__actions` (P-07). `.scm-evtd-sub` y `.scm-evtd-actions`
   se quedan como clases funcionales, sin reglas propias. */

.scm-evtd-totals {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 12px; margin: 18px 0 22px;
}
@media (max-width: 640px) { .scm-evtd-totals { grid-template-columns: repeat(2, 1fr); } }
/* ── Tarjetas de resumen del detalle ─────────────────────────────────────
   Composición aprobada: chip de ícono arriba a la izquierda con su color
   semántico, indicador de flecha arriba a la derecha, y debajo la cifra y el
   título. Se conserva el tamaño COMPACTO de esta vista: no se copian ni el
   `min-height` ni el padding de las tarjetas grandes del sistema.

   La superficie, la línea, el radio de card y la sombra pasan a los tokens.
   Es lo que le faltaba a este bloque para responder al tema: escribía
   `background: #fff` a mano y en oscuro era una losa blanca. */
.scm-evtd-tcard {
    background: var(--scm-ui-surface);
    border: 1px solid var(--scm-ui-line);
    border-radius: var(--scm-ui-r-lg);
    box-shadow: var(--scm-ui-sh-card);
    padding: var(--scm-ui-sp-4);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
/* Primera línea: el chip del ícono, alineado al inicio. */
.scm-evtd-tcard__top {
    display: flex;
    align-items: center;
    gap: var(--scm-ui-sp-2);
    margin-bottom: 10px;
}
/* Chip del ícono: la caja de 38 × 38 con radio 10 que el sistema ya usa para
   el ícono de una tarjeta (P-08). El fondo suave y la tinta los pone cada
   tono semántico más abajo. */
.scm-evtd-tcard__ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 10px;
}
.scm-evtd-tcard__ic .material-icons-round { font-size: 19px; line-height: 1; }
/* La cifra conserva su tamaño y su color semántico: es el dato de la
   tarjeta y no se rediseña. */
.scm-evtd-tcard .n {
    font-size: 28px;
    font-weight: var(--scm-ui-fw-title);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.scm-evtd-tcard .l {
    font-size: var(--scm-ui-fs-meta);
    font-weight: var(--scm-ui-fw-strong);
    line-height: 1.3;
    color: var(--scm-ui-text);
    margin-top: 5px;
}
/* Los cuatro tonos: mismo reparto semántico de siempre —verde asisten, rojo
   no asisten, azul nuevos, violeta cuidado de niños—, ahora desde tokens con
   equivalencia oscura. El violeta no está en P-00; se toma el de la familia
   legacy `--scm-pa-*`, que vale el mismo #6B5DD3 en claro y sí cambia con el
   tema. */
.scm-evtd-tcard.g .n  { color: var(--scm-ui-ok-fg); }
.scm-evtd-tcard.g .scm-evtd-tcard__ic { background: var(--scm-ui-ok-bg); color: var(--scm-ui-ok-fg); }
.scm-evtd-tcard.r .n  { color: var(--scm-ui-danger-fg); }
.scm-evtd-tcard.r .scm-evtd-tcard__ic { background: var(--scm-ui-danger-bg); color: var(--scm-ui-danger-fg); }
.scm-evtd-tcard.b .n  { color: var(--scm-ui-info-fg); }
.scm-evtd-tcard.b .scm-evtd-tcard__ic { background: var(--scm-ui-info-bg); color: var(--scm-ui-info-fg); }
.scm-evtd-tcard.p .n  { color: var(--scm-pa-purple); }
.scm-evtd-tcard.p .scm-evtd-tcard__ic { background: var(--scm-pa-purple-sf); color: var(--scm-pa-purple); }

/* La COMPOSICIÓN del bloque de filtros sigue pendiente (COMPONENTS.md
   §13.1): no se recompone. Lo que sí se aplica es de qué están hechas sus
   piezas —el campo de §8.1 para el buscador y P-05 para los botones—. */
.scm-evtd-toolbar { display: flex; gap: 9px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }

/* El buscador y los filtros los comparte "Última conexión" del Panel de
   Control (core/helpers/leader-activity-list.php), que NO está migrado: la
   regla base se queda como está y la versión migrada se sirve desde el
   contenedor del panel de gestión (0,2,0), así que esa vista conserva
   exactamente su apariencia actual. */
.scm-evtd-search {
    flex: 1; min-width: 180px; background: #f4f7fb;
    border: 1px solid rgba(24,61,101,.16); border-radius: 10px;
    padding: 10px 13px; font-size: 13.5px; font-family: inherit; outline: none;
}
.scm-evtd-filter.is-active:not(.scm-ui-btn) { background: #2563eb; color: #fff !important; border-color: #2563eb; }

/* Buscador migrado: campo de §8.1, con el mismo reparto de la barra. El
   ícono 🔍 sigue viviendo en el placeholder, tal como estaba: el encargo
   prohíbe añadir, quitar o sustituir íconos. */
.scm-evt-wrap--manage .scm-evtd-search {
    flex: 1 1 180px; min-width: 180px;
    padding: 10px 12px;
    border: 1px solid var(--scm-ui-line);
    border-radius: var(--scm-ui-r-sm);
    background: var(--scm-ui-surface);
    color: var(--scm-ui-text);
    font-family: inherit;
    font-size: var(--scm-ui-fs-body);
    box-sizing: border-box;
    height: var(--scm-ui-h-control);
}
.scm-evt-wrap--manage .scm-evtd-search::placeholder { color: var(--scm-ui-text-3); }

/* Filtro seleccionado. El relleno azul sólido que traía es, por regla del
   sistema, lenguaje de ACCIÓN; un filtro activo es un ESTADO y le
   corresponde el relleno suave (COMPONENTS.md §3.3 y §9.1). Se sirve por las
   variables de P-05 y con dos clases (0,2,0) para no depender del orden. */
.scm-ui-btn.scm-evtd-filter.is-active {
    --scm-ui-btn-bg: var(--scm-ui-blue-50);
    --scm-ui-btn-line: var(--scm-ui-blue-100);
    --scm-ui-btn-fg: var(--scm-ui-blue-600);
}
.scm-ui-btn.scm-evtd-filter.is-active:hover { --scm-ui-btn-bg: var(--scm-ui-blue-50); }

/* Los botones de esta barra y los "Cancelar / Cerrar / Volver" de los
   modales y los estados vacíos no llevan chip de ícono, y el padding de
   P-05 reserva 6px a la izquierda para él. Se corrige con la propia
   variable del patrón —no se toca P-05— para que la etiqueta quede
   centrada. No se les añade ícono: el encargo prohíbe alterar el juego de
   íconos de la vista. */
.scm-evtd-toolbar > .scm-ui-btn,
.scm-evt-wrap--manage .scm-ui-btn.scm-evt-modal-cancel,
.scm-evt-wrap--manage .scm-ui-empty__action > .scm-ui-btn { --scm-ui-btn-pad: 0 18px; }

.scm-evtd-tablewrap { overflow-x: auto; }
/* Misma limpieza de cuadrícula que .scm-evt-table: fuera la caja externa y
   los bordes verticales del tema, se queda solo el divisor por fila.
   Acotado con :not(.scm-ui-table) porque la tabla de "Última conexión" del
   Panel de Control comparte esta familia y no está migrada: sin el acotado,
   estas reglas (0,1,1) le ganarían a P-04 (0,1,0) en las tablas migradas. */
.scm-evtd-table:not(.scm-ui-table) {
    width: 100%; border-collapse: collapse; background: #fff;
    border-left: 0; border-right: 0; border-top: 0; border-bottom: 0;
    border-radius: 12px; overflow: hidden;
}
.scm-evtd-table:not(.scm-ui-table) th {
    font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
    color: #9aa7b6; text-align: left; padding: 12px 14px;
    background: #f7f9fc;
    border-left: 0; border-right: 0; border-top: 0;
    border-bottom: 1px solid rgba(24,61,101,.10);
}
.scm-evtd-table th.c, .scm-evtd-table td.c { text-align: center; }
.scm-evtd-table:not(.scm-ui-table) td {
    padding: 13px 14px; font-size: 13.5px;
    border-left: 0; border-right: 0; border-top: 0;
    border-bottom: 1px solid rgba(24,61,101,.10);
}
.scm-evtd-table:not(.scm-ui-table) tr:last-child td { border-bottom: none; }

/* Celda de persona: avatar de P-01 + rol "Nombre de persona" de P-04.
   Los cuatro degradados propios del módulo se retiran —P-01 prohíbe que un
   módulo tenga su propia paleta de avatares: el tono se calcula desde el
   nombre con scm_ui_avatar_idx() para que la misma persona salga del mismo
   color en todo el sistema—. `.av` y `.aN` se quedan como clases
   funcionales, sin reglas. */
.scm-evtd-table .pn { display: flex; align-items: center; gap: 11px; min-width: 0; }
.scm-evtd-table .pnm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Etiquetas de estado: P-03. Los tres tonos que ya tenía la vista se
   conservan y solo cambian de origen —verde a --ok, ámbar a --warn, azul a
   --info, rojo a --danger—, así que dejan de ser píldoras de 20px y toman la
   forma única del sistema. */
.scm-evtd-table .kids-y {
    color: var(--scm-pa-purple);
    font-weight: var(--scm-ui-fw-strong);
    font-size: var(--scm-ui-fs-meta);
}
/* `.muted` aparece en la tabla y en la lista de grupos cercanos; acotado al
   panel de gestión para no alcanzar a ninguna otra vista. */
.scm-evt-wrap--manage .muted { color: var(--scm-ui-text-3); }

/* Simetría de columna (COMPONENTS.md §5.2): todas las etiquetas de una
   misma columna miden lo mismo, tomando la más larga del diccionario de
   esa vista. No se toca P-03: alto, radio, tipografía y color son suyos. */
.scm-evtd-table td.c .scm-ui-badge { min-width: 62px; }
.scm-evtd-table .type-pill.scm-ui-badge { min-width: 88px; }

/* Reparto de la tabla del detalle en móvil.
   La columna de persona lleva el rol "Nombre de persona", que va en `nowrap`,
   así que un nombre largo se lleva 375px de los 999 y las dos columnas de
   texto —niños y respuestas— se quedaban en 99 y 127px: el contenido caía en
   tres y cuatro líneas de dos palabras. No es un problema de tipografía sino
   de reparto.

   Se resuelve como manda P-04 §4.4 —antes de comprimir el contenido, se
   desplaza—: un piso de ancho para la tabla y un mínimo para las dos columnas
   que se estaban quedando sin sitio. El desplazamiento lateral lo sigue
   haciendo `.scm-ui-table-wrap--scroll`, que ya estaba puesto, y la página no
   desborda. No se toca ni el marcado ni el número de columnas. */
@media (max-width: 768px) {
    .scm-evtd .scm-evtd-tablewrap .scm-evtd-table { min-width: 760px; }
    .scm-evtd .scm-evtd-tablewrap .scm-evtd-table td.evt-col-kids,
    .scm-evtd .scm-evtd-tablewrap .scm-evtd-table th.evt-col-kids { min-width: 150px; }
    .scm-evtd .scm-evtd-tablewrap .scm-evtd-resp { min-width: 170px; }
}

.scm-evtd-leader { color: var(--scm-ui-text-2); }
.scm-evtd-resp { color: var(--scm-ui-text-2); font-size: var(--scm-ui-fs-meta); max-width: 260px; }
/* El estado vacío por filtro consume P-11; `.scm-evtd-empty` se queda como
   clase funcional —el JS la localiza por id— y sin reglas propias. */

/* ── Seguimiento de inscritos por líder (por evento) ──
   Reutiliza la tabla y los avatares del detalle (.scm-evtd-table) y agrega
   chips de avance, badge de finalizado y scroll horizontal táctil en móvil.
   Los chips, las píldoras y el badge pasan a P-03: misma lectura semántica
   —verde "hecho", ámbar "pendiente", gris "sin nada que hacer"— con la forma
   única del sistema. `.scm-evtsg-chip`, `-pill` y `-finished-badge` se
   quedan como clases funcionales; de ellas solo sobrevive lo que P-03 no
   cubre. */
.scm-evtsg-intro { font-size: var(--scm-ui-fs-meta); color: var(--scm-ui-text-2); margin: 0 0 14px; }
.scm-evtsg-tablewrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
.scm-evtsg-tablewrap .scm-evtd-table { min-width: 560px; }

/* Simetría de las etiquetas de avance (COMPONENTS.md §5.2): todas las de un
   mismo grupo se ven del mismo ancho, tomado de la etiqueta más larga del
   diccionario de estas vistas. Con el ancho del texto, "Faltan 7" (94px) se
   leía más pequeño que "Inscritos 5" (105px) y "Inscrito" (86px) más pequeño
   que "Pendiente" (108px), aunque los dos pares fuesen el mismo componente.
   Alcanza a los chips del resumen, a los de la columna Seguimiento y a las
   píldoras de "¿Inscrito al evento?", que son la misma familia de estado.
   No se toca P-03: alto, padding, tipografía, interlineado, radio y color
   siguen siendo los del patrón; solo se fija el piso de ancho. */
.scm-evtsg .scm-ui-badge,
.scm-evtsg .scm-evtd-table td.c .scm-ui-badge { min-width: 116px; }
.scm-evtsg-chip { margin: 2px 4px 2px 0; }
.scm-evtsg-finished-badge { margin-left: var(--scm-ui-sp-2); }

.scm-evtsg-summary {
    display: flex; align-items: center; gap: var(--scm-ui-sp-2); flex-wrap: wrap;
    margin: 0 0 14px;
}
.scm-evtsg-count { font-size: var(--scm-ui-fs-body); font-weight: var(--scm-ui-fw-strong); color: var(--scm-ui-text); }

/* Nota de histórico: es un aviso en página, componente todavía sin patrón
   (COMPONENTS.md §13.2). No se rediseña; solo pasa a los tokens de
   advertencia, que es lo que le faltaba para responder al tema. */
.scm-evtsg-histnote {
    background: var(--scm-ui-warn-bg); border: 1px solid var(--scm-ui-warn-line);
    color: var(--scm-ui-warn-fg); border-radius: var(--scm-ui-r-md); padding: var(--scm-ui-sp-3) 14px;
    font-size: var(--scm-ui-fs-meta); margin-bottom: 14px;
    overflow-wrap: break-word;
}

/* ── Asignar líder desde el detalle (v1.1) ── */
.scm-evtd-nearby-title {
    font-size: var(--scm-ui-fs-badge); font-weight: var(--scm-ui-fw-strong);
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--scm-ui-text-3); margin: 14px 0 var(--scm-ui-sp-2);
}
.scm-evtd-nearby-list { display: flex; flex-direction: column; gap: 7px; font-size: var(--scm-ui-fs-meta); color: var(--scm-ui-text-2); }
.scm-evtd-nearby-item {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    background: var(--scm-ui-surface-2); border: 1px solid var(--scm-ui-line);
    border-radius: var(--scm-ui-r-sm); padding: 10px var(--scm-ui-sp-3); cursor: pointer;
    font-family: inherit; text-align: left; width: 100%;
    transition: background .15s ease, border-color .15s ease;
}
.scm-evtd-nearby-item:hover { border-color: var(--scm-ui-blue-500); }
.scm-evtd-nearby-item:focus-visible { outline: 2px solid var(--scm-ui-blue-500); outline-offset: 2px; }
/* Seleccionado: relleno suave, que es el lenguaje del sistema para un
   estado. Conserva el verde que ya tenía la vista. */
.scm-evtd-nearby-item.is-sel { border-color: var(--scm-ui-ok-line); background: var(--scm-ui-ok-bg); }
/* Nombre y meta del grupo: los sirven los roles de P-09 por doble clase. */
.scm-evtd-nearby-item .gn { min-width: 0; max-width: 100%; }
/* El <select> lo sirve el campo de §8.1 desde `.scm-evt-wrap--manage select`;
   `.scm-evtd-leader-select` se queda como clase funcional. */

/* ── Modal de clasificación del registrado ──────────────────────────────
   Composición nueva, cero valores nuevos: espaciado, radios, líneas y
   tipografía salen de los tokens del sistema, así que el bloque oscuro de
   00-tokens.css los sirve sin que esta hoja declare un solo hexadecimal.
   El <select> y su alto táctil los sirve `.scm-evt-wrap--manage select`. */
.scm-evtd-cf-choice { display: flex; flex-direction: column; gap: var(--scm-ui-sp-2); }
/* Etiqueta del grupo de radios. Es un <span>, no un <label>, porque no apunta
   a un solo control; se le declara color con el scope delante para que no lo
   gane un selector de elemento ajeno —la regla de COMPONENTS.md §7.3 que ya
   costó los títulos invisibles en oscuro. */
.scm-ui .scm-evtd-cf-legend {
    display: block;
    font-weight: var(--scm-ui-fw-soft);
    font-size: 13px;
    color: var(--scm-ui-text-2);
    margin-bottom: 6px;
}
.scm-evtd-cf-radio {
    display: flex; align-items: flex-start; gap: var(--scm-ui-sp-3);
    padding: 10px var(--scm-ui-sp-3);
    border: 1px solid var(--scm-ui-line);
    border-radius: var(--scm-ui-r-sm);
    background: var(--scm-ui-surface);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.scm-evtd-cf-radio:hover { border-color: var(--scm-ui-blue-500); }
/* Elegido: relleno suave, el mismo lenguaje de estado que .is-sel de arriba. */
.scm-evtd-cf-radio:has(input:checked) {
    border-color: var(--scm-ui-blue-500);
    background: var(--scm-ui-surface-2);
}
.scm-evtd-cf-radio:focus-within { outline: 2px solid var(--scm-ui-blue-500); outline-offset: 2px; }
/* El radio es nativo a propósito (como los checkbox del resto del sistema);
   solo se le da el área táctil y el color de marca del acento. */
.scm-evtd-cf-radio input[type="radio"] {
    width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 auto;
    accent-color: var(--scm-ui-blue-500);
}
.scm-evtd-cf-radio span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scm-ui .scm-evtd-cf-radio strong {
    font-size: var(--scm-ui-fs-body);
    font-weight: var(--scm-ui-fw-med);
    color: var(--scm-ui-text);
}
.scm-ui .scm-evtd-cf-radio small {
    font-size: var(--scm-ui-fs-meta);
    color: var(--scm-ui-text-2);
    overflow-wrap: break-word;
}
/* Aviso de la inscripción abierta: mismo tono de nota que el subtítulo. */
.scm-evtd-cf-note { margin-top: var(--scm-ui-sp-3); }
.scm-evtd-cf-error { margin-top: var(--scm-ui-sp-3); }
/* Deshabilitado: los selects bloqueados cuando hay inscripción abierta tienen
   que LEERSE como bloqueados, también sobre el panel oscuro. */
.scm-evt-wrap--manage select:disabled {
    background: var(--scm-ui-surface-2);
    color: var(--scm-ui-text-3);
    cursor: not-allowed;
}

/* ══════════════════════════════════════════════════════════════════════
   MÓVIL — REGLAS TÉCNICAS DEL SISTEMA

   Este bloque va AL FINAL del archivo a propósito (COMPONENTS.md §8.2):
   puesto arriba pierde el desempate de orden frente a reglas del propio
   módulo que fijan tamaños menores, y el zoom de iOS vuelve.

   1 · Todo campo de escritura a 16px. Por debajo, iOS hace zoom al enfocar
       y descuadra la vista entera.
   2 · El <select> necesita las tres declaraciones: con solo el tamaño de
       fuente iOS le añade su propio alto y el control queda descuadrado.
   3 · Área táctil de 44px en los controles interactivos. Los botones ya la
       reciben por --scm-ui-h-control; aquí se cubren los que no son botones
       del patrón.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .scm-evt-wrap--manage input[type="text"],
  .scm-evt-wrap--manage input[type="search"],
  .scm-evt-wrap--manage input[type="number"],
  .scm-evt-wrap--manage input[type="tel"],
  .scm-evt-wrap--manage input[type="date"],
  .scm-evt-wrap--manage input[type="time"],
  .scm-evt-wrap--manage input[type="file"],
  .scm-evt-wrap--manage textarea,
  .scm-evt-wrap--manage select { font-size: 16px; }

  .scm-evt-wrap--manage select {
    height: var(--scm-ui-h-control);
    padding-top: 0;
    padding-bottom: 0;
  }

  .scm-evt-wrap--manage input[type="text"],
  .scm-evt-wrap--manage input[type="search"],
  .scm-evt-wrap--manage input[type="date"],
  .scm-evt-wrap--manage input[type="time"] {
    min-height: var(--scm-ui-h-control);
  }

  /* El selector de color es un control táctil como cualquier otro. */
  .scm-evt-insc-colorrow input[type="color"] {
    width: 56px;
    height: var(--scm-ui-h-control);
  }

}

/* ── Rótulo de edad del modal de clasificación (v9.2.0) ──────────────────
   Solo lectura: no es un campo, así que NO reutiliza `.scm-evt-form-row` —
   esa clase la comparten `manage-view.php` y `seguimiento-view.php` y no se
   toca aquí—. Pero sí toma su MISMA separación inferior de 14px (:961), para
   que la franja y las filas del formulario respiren igual.

   Los cinco colores salen de la familia `--cal-*` que este archivo ya declara
   sobre `.scm-evt-wrap` (:29-35), dentro del cual vive el modal. Coinciden hex
   a hex con los literales de la especificación y además traen el tema oscuro
   resuelto por el puente de `00-tokens.css` (:470-475), que un hex escrito a
   mano se perdería. Sin un solo `!important`, y sin `font-family`: hereda. */
.scm-evtd-cf-age {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    padding: 11px 14px;
    border-radius: 8px;
    background: var(--cal-surface-2);
    border: 1px solid var(--cal-line);
}
.scm-evtd-cf-age-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--cal-text-3);
}
.scm-evtd-cf-age-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--cal-text);
    font-variant-numeric: tabular-nums;
}
/* Sin edad el dato deja de ser una cifra: baja a texto secundario y suelta la
   cifra tabular, que sobre una frase no pinta nada. */
.scm-evtd-cf-age--empty .scm-evtd-cf-age-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--cal-text-4);
    font-variant-numeric: normal;
}

/* ═══════════════════════════════════════════════════════════════════════
   CALENDARIO PÚBLICO — cuerpo de la página y subvista "Compartir"

   Bloque ADITIVO: todos los selectores de aquí abajo son nuevos y ninguno
   alcanza un elemento que la vista privada ya pinte. `body.scm-evt-pubcal-body`
   solo existe en el documento público (mismo patrón que `body.srv-pubcal-body`
   en scm-srv.css) y `.scm-evt-pubcal-*` solo dentro del modal de compartir.
   El calendario —tarjetas, colores, rejilla, franja de próximo evento— no
   recibe ni una regla nueva: se ve igual porque es el mismo marcado y las
   mismas hojas, no porque aquí se repita nada.
   ═══════════════════════════════════════════════════════════════════════ */

/* Página pública. Sin margen de cuerpo, para que el alto que la página mide y
   manda al marco sea el alto REAL del contenido: si el cuerpo aportara margen,
   el iframe quedaría corto y aparecería su barra propia —el doble scroll—.
   Sin `background`: la vista hereda el fondo de quien la enmarca, igual que
   hace dentro del shell (v9.6.1). */
body.scm-evt-pubcal-body {
    margin: 0;
    overflow-x: hidden;
}

/* ── Subvista "Compartir calendario" ────────────────────────────────── */
.scm-evt-pubcal-content { max-width: 640px; }

.scm-evt-pubcal-add {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.scm-evt-pubcal-add input[type="text"] { flex: 1 1 200px; min-width: 0; }

.scm-evt-pubcal-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.scm-evt-pubcal-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px 6px 12px;
    border: 1px solid var(--scm-ui-line);
    border-radius: var(--scm-ui-r-sm, 8px);
    background: var(--scm-ui-surface-2);
    font-size: 13px;
}
.scm-evt-pubcal-item code {
    overflow-wrap: anywhere;
    background: none;
    padding: 0;
}
.scm-evt-pubcal-item.is-empty {
    color: var(--scm-ui-text-3);
    justify-content: flex-start;
}

.scm-evt-pubcal-preview {
    border: 1px solid var(--scm-ui-line);
    border-radius: var(--scm-ui-r-sm, 8px);
    overflow: hidden;
    background: var(--scm-ui-surface-2);
}
.scm-evt-pubcal-preview iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
}

.scm-evt-modal-result.is-ok    { color: var(--scm-ui-ok-fg, #12805c); }
.scm-evt-modal-result.is-error { color: var(--scm-ui-danger-fg, #b42318); }