body {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    margin: 0;
    color: #222;
    background: #fff;
}

/* Estructura general del panel: una franja superior fija con el logo, y
   debajo un menú lateral en árbol de navegación (escondible hacia la
   izquierda) + columna de contenido a la derecha. */
.topbar {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    height: 56px;
    padding: 0 1.1rem;
    /* Mismo morado que el encabezado de las columnas de las grillas
       (table th). */
    background: #5B3F86;
    position: sticky;
    top: 0;
    z-index: 10;
    /* Mismo tipo de borde + sombra suave que usan los campos de formulario
       (ver "input, select, textarea" más abajo), para que la franja
       superior no quede como un bloque de color plano sino con el mismo
       efecto "de borde" del resto del panel. */
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.btn-toggle-sidebar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    flex: none;
}

.btn-toggle-sidebar:hover {
    background: rgba(255, 255, 255, 0.15);
}

.btn-toggle-sidebar svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.topbar-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* Marcador de posición: la palabra "LOGO" en blanco sobre el morado de la
   topbar, hasta que se defina el logo definitivo. */
.topbar-logo-texto {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #fff;
}

.app-shell {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - 56px);
}

.sidebar {
    flex: none;
    width: 230px;
    /* El azul queda solo en la franja superior (.topbar) -- el menú lateral
       usa un fondo neutro, con el azul de la marca solo como color de
       acento (hover, ítem activo, texto). */
    background: #fff;
    border-right: 1px solid #e2e4ee;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 0;
    overflow: hidden;
    white-space: nowrap;
    transition: width 0.18s ease, padding 0.18s ease;
}

/* Escondido hacia la izquierda (no fijo): el árbol completo se puede
   colapsar con el botón de la franja superior; el contenido de la derecha
   se estira para ocupar el espacio que deja libre. Se usa width: 0 en vez
   de transform, así .app-content reacomoda su ancho con el mismo flujo
   normal del flexbox. */
.sidebar.sidebar-oculto {
    width: 0;
    padding-left: 0;
    padding-right: 0;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

/* El enlace normal (Talleres, Comunidad) y el "summary" del grupo
   desplegable (Catálogos) comparten look: mismo padding, tamaño y peso de
   letra, para que el árbol se vea como una sola lista pareja. */
.sidebar-link,
.sidebar-grupo summary {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 1.25rem;
    color: #3d4258;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

/* Quita la flechita por defecto de <summary> en Chrome/Edge -- se dibuja
   una propia con ::after más abajo, así se puede rotar prolijamente al
   abrir/cerrar el grupo. */
.sidebar-grupo summary::-webkit-details-marker {
    display: none;
}

.sidebar-link svg,
.sidebar-grupo summary svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

.sidebar-link:hover,
.sidebar-grupo summary:hover {
    background: #eef1ff;
    color: var(--color-marca-azul);
}

.sidebar-link.activo {
    background: #e4e9ff;
    color: var(--color-marca-azul);
}

.sidebar-grupo[open] > summary {
    color: var(--color-marca-azul);
}

.sidebar-grupo summary::after {
    content: "";
    margin-left: auto;
    width: 0.4rem;
    height: 0.4rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s;
    flex: none;
}

.sidebar-grupo[open] > summary::after {
    transform: rotate(-135deg);
}

.sidebar-subitems {
    display: flex;
    flex-direction: column;
}

.sidebar-sublink {
    padding: 0.5rem 1.25rem 0.5rem 3.05rem;
    color: #656b82;
    text-decoration: none;
    font-size: 0.87rem;
}

.sidebar-sublink:hover {
    background: #eef1ff;
    color: var(--color-marca-azul);
}

.sidebar-sublink.activo {
    background: #e4e9ff;
    color: var(--color-marca-azul);
    font-weight: 600;
}

/* Columna de contenido a la derecha del menú lateral: min-width: 0 es
   necesario para que los contenedores con scroll horizontal propio de
   adentro (ej. .tabla-participantes-scroll) puedan angostarse -- sin esto,
   un flex item no se encoge más allá del ancho de su contenido y el scroll
   interno deja de servir de nada. */
.app-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

main {
    width: 100%;
    max-width: 960px;
    margin: 1.25rem auto;
    padding: 0 1.5rem;
    box-sizing: border-box;
}

/* Pantallas de administración: usan bastante más ancho que el formulario
   público de inscripción (que se deja tal cual, angosto y centrado, porque
   así está bien para alguien llenándolo desde el celular). Se activa
   agregando ViewData["MainClass"] = "main-ancho" en la página .cshtml.
   El tope de 1400px se quedaba corto en pantallas anchas -- la grilla de
   Participantes (con columna fija + scroll horizontal propio) tenía mucho
   menos espacio visible del que el monitor realmente ofrece. Ahora usa casi
   todo el ancho de la ventana (deja 2rem de margen a cada lado) hasta un
   tope bien alto, que en la práctica casi nunca se alcanza. */
main.main-ancho {
    max-width: calc(100% - 4rem);
}

/* Grilla de campos de formulario: reparte los .form-group en columnas en
   vez de apilarlos uno debajo del otro en todo el ancho. Cada campo ocupa
   como mínimo 240px y se van acomodando solos según el ancho disponible
   (auto-fit) -- en una pantalla ancha caben 3-4 columnas, en el celular
   queda en 1. Se activa envolviendo los .form-group en un
   <div class="form-grid">...</div>; no afecta a los formularios que no
   usan esa clase (como Inscripción). */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0 1.5rem;
}

/* Dentro de un .form-grid, un campo que necesita todo el ancho (textareas,
   checkboxes, el resumen de validación) se marca con esta clase para que
   ocupe la fila completa en vez de una sola columna. */
.form-grid .campo-ancho {
    grid-column: 1 / -1;
}

/* Ficha de detalle de un participante (Admin/Talleres → Participantes →
   Ver detalle): igual idea que .form-grid, pero de solo lectura -- cada
   campo es una etiqueta chica arriba y el valor abajo, en vez de un
   label + input. */
.detalle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem 1.5rem;
    margin-bottom: 1.5rem;
}

.detalle-grid .campo-ancho {
    grid-column: 1 / -1;
}

.detalle-campo span {
    display: block;
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 0.15rem;
}

.detalle-campo strong {
    font-weight: 600;
    white-space: pre-line;
}

footer {
    text-align: center;
    padding: 1.5rem;
    color: #888;
    font-size: 0.85rem;
}

/* Título de cada pantalla (ej. "Comunidad", "Administración de Talleres"):
   sin esta regla, el navegador usa su tamaño y margen por defecto para
   <h1> (bastante grandes -- letra ~2rem más ~0.67em de margen arriba y
   abajo), que dejaban mucho espacio vacío justo arriba de cada pantalla,
   en todas las ventanas del sistema. Letra más chica y margen bien
   reducido, para que el título quede pegado al contenido. */
h1 {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.form-group {
    margin-bottom: 1rem;
}

label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

input, select, textarea {
    width: 100%;
    padding: 0.5rem;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Los <select>/<input> editables de la grilla de Participantes (Estatus,
   Pago, Categoría, Nro. Factura) no pueden quedar en width: 100% dentro de
   una columna con table-layout: auto: un ancho en porcentaje no cuenta
   para calcular cuánto necesita la columna (la columna terminaba tan
   angosta como el título "Estatus"/"Pago"/etc., y el valor elegido -- más
   largo que el título -- quedaba cortado adentro del propio <select>).
   width: auto deja que cada <select> mida lo que necesite su opción más
   larga (así SÍ cuenta para el ancho de columna), con un mínimo para que
   no quede más angosto que el título de la columna. */
.tabla-participantes select.select-catalogo {
    width: auto;
    min-width: 7rem;
}

.tabla-participantes input.input-catalogo {
    width: auto;
    min-width: 6rem;
}

/* Los campos de fecha usan Flatpickr (ver site-datepicker.js): el selector
   nativo del navegador resalta el día/mes/año en edición con el color de
   "Highlight" del sistema operativo, que no se puede sobreescribir con CSS
   de forma confiable. Flatpickr dibuja su propio calendario y controlamos
   el contraste en flatpickr-overrides.css. Se deja color-scheme como
   respaldo por si el input de fecha se ve alguna vez sin JavaScript. */
input[type="date"] {
    color-scheme: light;
}

/* :not(.btn-icono) es necesario: el botón "Eliminar" de la grilla de
   Talleres también es type="submit" (envía el form de eliminación), y sin
   esta exclusión esta regla le ganaba en especificidad a .btn-icono,
   dejándolo con el padding y el fondo de un botón grande en vez de verse
   como el ícono chico y transparente que debe ser. */
button[type="submit"]:not(.btn-icono) {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.25rem;
    background: var(--color-marca-azul);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
}

/* Ícono dentro de un botón "Filtrar" (o cualquier button[type=submit] que
   lleve un <svg> adentro): mismo estilo de línea que el resto de los
   íconos de la app. */
button[type="submit"]:not(.btn-icono) svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

button[type="submit"]:not(.btn-icono):hover {
    background: #4a72e0;
}

.mensaje-ok {
    padding: 0.75rem 1rem;
    background: #e6f4ea;
    color: #1e7a34;
    border: 1px solid #b7dfc3;
    border-radius: 4px;
}

.mensaje-error {
    padding: 0.75rem 1rem;
    background: #fdecea;
    color: #a32b21;
    border: 1px solid #f5c2bc;
    border-radius: 4px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    /* Borde exterior de toda la grilla, como una planilla de cálculo. */
    border: 1px solid #c9c9d4;
    /* Misma familia tipográfica que una planilla de cálculo (Arial), que es
       la referencia visual que se usó para el estilo de estas grillas. */
    font-family: Arial, Helvetica, sans-serif;
}

table th, table td {
    text-align: left;
    /* Mismo padding que .tabla-participantes, así las filas de todas las
       grillas del sistema quedan de la misma altura (más compacta). */
    padding: 0.15rem 0.6rem;
    /* box-shadow en vez de border: dibuja la línea de la celda "hacia
       adentro" sin sumar ancho extra a la celda. Con las columnas de la
       grilla de Participantes en table-layout: fixed (ancho fijo por
       <colgroup>), un border de verdad resta ese ancho al espacio
       disponible para el contenido y las columnas se ven más angostas de
       lo que quedaron definidas. */
    box-shadow: inset 0 0 0 1px #c9c9d4;
}

table th {
    /* Morado tomado de la captura de Google Sheets que Sonia mandó de
       referencia. */
    background: #5B3F86;
    color: #fff;
    /* Sin negrita y con letra más chica que el resto del texto, para que
       los nombres de columna (incluso los más largos, como "Apellido
       paterno") entren en una sola línea dentro del ancho de columna
       disponible, en vez de partirse en dos. */
    font-weight: 400;
    font-size: 0.8rem;
}

/* Letra más chica para los datos de las grillas (no para el encabezado). */
table td {
    font-size: 0.85rem;
}

/* Encabezados clicables para ordenar CUALQUIER grilla (no solo la de
   Participantes, que ya tenía su propia versión de esta regla): mismo
   color que el texto del encabezado (blanco sobre el morado), sin
   subrayado salvo al pasar el mouse. !important porque el estilo nativo
   del navegador para <a> puede ganarle a una regla normal. */
table th a.header-orden,
table th a.header-orden:link,
table th a.header-orden:visited {
    color: #fff !important;
    text-decoration: none !important;
    cursor: pointer;
}

table th a.header-orden:hover,
table th a.header-orden:active {
    text-decoration: underline !important;
}

/* Sombreado intercalado (zebra striping), como en una planilla de cálculo:
   ayuda a seguir una fila de punta a punta en grillas anchas. */
table tbody tr:nth-child(even) {
    background: #f6f7fb;
}

table form {
    display: inline;
    margin-left: 0.5rem;
}

/* Grilla de Participantes: las primeras 4 columnas (Gafete, Nombres,
   Apellido paterno, Apellido materno) quedan fijas al hacer scroll
   horizontal; el resto de las columnas se desplaza dentro del contenedor
   con barra de scroll. */
/* IMPORTANTE: overflow-x: auto SIN overflow-y hace que el navegador
   calcule overflow-y como "auto" también (es una regla del estándar CSS:
   si uno de los dos ejes no es "visible", el otro deja de ser "visible" y
   pasa a "auto"). Eso convertía a este contenedor -- sin querer -- en el
   contenedor de scroll vertical para el position: sticky del encabezado,
   en vez de la página completa, y por eso el encabezado no quedaba fijo
   (su "scroll" ocurría "adentro" de una caja que nunca mostraba barra de
   scroll vertical porque no tenía una altura limitada).
   La solución: hacer que ESTE contenedor sea, a propósito, el que scrollea
   (con una altura máxima) en ambos ejes, y que el encabezado quede sticky
   (top: 0) relativo a él mismo, no a la página. */
.tabla-participantes-scroll {
    overflow: auto;
    max-width: 100%;
    /* Antes era 65vh (relativo al alto de la ventana, así que el número de
       filas visibles cambiaba según la pantalla). Con el padding reducido
       de la grilla, esta altura fija alcanza para mostrar 15 filas de datos
       más el encabezado, sea cual sea el tamaño de la ventana. */
    max-height: 38rem;
    border: 1px solid #c9c9d4;
}

/* table-layout: auto -- cada columna se ajusta sola al ancho de su
   contenido más ancho (el nombre de la columna o el valor más largo),
   lo más angosta posible. El "left" de las columnas con position: sticky
   ya no se calcula acá con valores fijos en rem: como ahora el ancho de
   cada columna puede cambiar según los datos, ese "left" se recalcula por
   JavaScript (ver el <script> al final de la página) después de que la
   tabla se dibuja. */
.tabla-participantes {
    table-layout: auto;
}

/* Filas compactas: mismo padding reducido que el resto de las tablas de la
   app (regla "table th, table td" más arriba), sin llegar a apretarlas
   tanto como para perder la separación visual tipo planilla de cálculo. */
.tabla-participantes th,
.tabla-participantes td {
    padding: 0.15rem 0.6rem;
}

/* Los DATOS de esta grilla nunca se parten en dos líneas (ej. una fecha
   "17-09-2026" quedando "17-09-" / "2026" agranda la fila sin necesidad);
   si un valor no cabe, se trunca con "..." (con el ancho completo
   disponible al pasar el mouse via title=). */
.tabla-participantes td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Los ENCABEZADOS tampoco se parten en líneas: con table-layout: auto, la
   columna se agranda sola hasta el ancho que necesite el encabezado (o el
   dato más largo, lo que sea mayor), así que partirlo en dos líneas ya no
   hace falta para que quepa. */
.tabla-participantes th {
    white-space: nowrap;
    overflow: visible;
    /* Centrado verticalmente, igual que las columnas fijas
       (Nombres/Apellido paterno/Apellido materno). */
    vertical-align: middle;
    /* Encabezado pegado (sticky) al hacer scroll DENTRO de
       .tabla-participantes-scroll (que ahora es el que scrollea, con una
       altura máxima -- ver esa regla más arriba). top: 0 porque es
       relativo a ESE contenedor, no a la página ni a la franja azul de
       arriba. Necesita fondo sólido propio (ver background más abajo)
       para no dejar ver las filas pasando por detrás. */
    position: sticky;
    top: 0;
    z-index: 2;
    background: #5B3F86;
    color: #fff;
}

/* Encabezados clicables para ordenar la grilla de Participantes: mismo
   color que el texto del encabezado (blanco sobre el morado), sin subrayado
   salvo al pasar el mouse, para que se note que son interactivos sin perder
   el aspecto de encabezado normal. !important porque el estilo nativo del
   navegador para <a> (azul, subrayado, y distinto para :link/:visited) puede
   ganarle a una regla normal según el navegador. */
.tabla-participantes th a.header-orden,
.tabla-participantes th a.header-orden:link,
.tabla-participantes th a.header-orden:visited {
    color: #fff !important;
    text-decoration: none !important;
    cursor: pointer;
}

.tabla-participantes th a.header-orden:hover,
.tabla-participantes th a.header-orden:active {
    text-decoration: underline !important;
}

.tabla-participantes th.col-fija,
.tabla-participantes td.col-fija {
    position: sticky;
    background: #fff;
    z-index: 1;
}

/* Las columnas fijas necesitan un fondo sólido propio (para tapar lo que
   pasa por detrás al hacer scroll), así que el sombreado intercalado se
   repite acá aparte para que la fila se vea de un solo color de punta a
   punta, en vez de blanco en las columnas fijas y gris en el resto. */
.tabla-participantes tbody tr:nth-child(even) td.col-fija {
    background: #f6f7fb;
}

.tabla-participantes th.col-fija {
    background: #5B3F86;
    color: #fff;
    /* Estas 5 celdas son "esquina": quedan pegadas arriba (top, como el
       resto del encabezado) Y a la izquierda (left, calculado por
       JavaScript) al mismo tiempo, así que necesitan quedar por encima de
       todo lo demás -- tanto de las columnas fijas normales (que solo son
       sticky a la izquierda) como del resto del encabezado (que solo es
       sticky arriba). */
    z-index: 3;
    vertical-align: middle;
}

/* Columnas numéricas de una grilla (ej. "Edad"): alineadas a la derecha,
   como en una planilla de cálculo, tanto el encabezado como el dato. */
.celda-numero {
    text-align: right;
}

/* "Gafete Impreso" lleva el checkbox de "seleccionar todos" debajo, así que
   se ve mejor centrado; Nombres/Apellido paterno/Apellido materno son
   columnas de texto como cualquier otra, así que van alineadas a la
   izquierda igual que sus datos. */
.tabla-participantes th.col-fija-1 {
    text-align: center;
}

.tabla-participantes th.col-fija-2,
.tabla-participantes th.col-fija-3,
.tabla-participantes th.col-fija-4,
.tabla-participantes th.col-fija-5 {
    text-align: left;
}

/* Los datos sí se truncan con "..." si no caben (ver el atributo title=
   agregado en el .cshtml para poder ver el valor completo al pasar el
   mouse). */
.tabla-participantes td.col-fija {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* El "left" de cada columna fija ya no es un valor fijo en rem: como el
   ancho de columna ahora depende del contenido (table-layout: auto), el
   "left" real de cada una se calcula y se aplica por JavaScript (ver el
   <script> al final de Index.cshtml) apenas se dibuja la tabla. Acá solo
   queda un valor inicial en 0 para que no "salten" de una posición grande
   a otra antes de que corra el script.  */
.tabla-participantes .col-fija-1,
.tabla-participantes .col-fija-2,
.tabla-participantes .col-fija-3,
.tabla-participantes .col-fija-4,
.tabla-participantes .col-fija-5 {
    left: 0;
}

.tabla-participantes .col-fija-5 {
    /* Esta columna necesita DOS box-shadow a la vez: el cuadriculado normal
       de la celda (el mismo inset que usa el resto de la grilla) y la línea
       divisoria que separa visualmente las columnas fijas del resto de la
       grilla al hacer scroll horizontal. Un solo box-shadow reemplaza al
       otro en vez de sumarse, así que van juntos, separados por coma. */
    box-shadow: inset 0 0 0 1px #c9c9d4, 2px 0 4px rgba(0, 0, 0, 0.08);
}

.menu-catalogos {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.menu-catalogos li {
    margin-bottom: 0.5rem;
}

.menu-catalogos a {
    text-decoration: none;
    font-weight: 600;
    color: #1b1b1b;
}

/* Resalta en Admin/Talleres/Participantes la fila del taller cuya grilla
   de inscritos está desplegada abajo. */
.fila-seleccionada {
    background: #eef4ff;
}

/* Colores de marca Be Great, los mismos que usa el formulario público de
   inscripción (Pages/Inscripcion/Index.cshtml), reutilizados acá para que
   los botones de acción del panel de administración combinen con el
   formulario. */
:root {
    --color-marca-rosado: #F71465;
    --color-marca-azul: #6E93FB;
}

/* Botón grande (ej. "+ Nuevo taller"). Misma letra (sin negrita, mismo
   tamaño) que el botón "Filtrar" -- ver button[type=submit] más arriba --
   para que ambos se vean como parte de la misma familia de botones. */
.btn-primario {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background-color: var(--color-marca-azul);
    color: #fff;
    padding: 0.5rem 1.1rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 400;
    font-size: 1rem;
    border: none;
    cursor: pointer;
}

.btn-primario svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

.btn-primario:hover {
    background-color: #4a72e0;
}

/* Botones de "Acciones" con ícono + texto (a diferencia de .btn-icono, que
   es solo el ícono cuadrado y se usa donde no hay espacio para una
   etiqueta, como la grilla compacta de Participantes). Se usan en grillas
   con más aire, como la de Talleres. */
.btn-accion {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.btn-accion svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

.btn-accion.btn-icono-azul {
    background: rgba(110, 147, 251, 0.15);
}

.btn-accion.btn-icono-rojo {
    background: rgba(247, 20, 101, 0.12);
}

.btn-accion[disabled] {
    background: #ececec;
    color: #b3b3b3;
    cursor: not-allowed;
}

/* Columna "Acciones" de las grillas: botones-icono en vez de enlaces de
   texto. Azul para las acciones normales (ver/editar), rosado para
   eliminar por ser una acción destructiva. */
.acciones-grilla {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.btn-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    background: transparent;
    text-decoration: none;
    flex: none;
    padding: 0;
}

/* Los paths de estos íconos (persona, lápiz, basurero, teléfono, ojo) están
   dibujados como íconos de línea (estilo "feather"): pensados para
   dibujarse con contorno (stroke), no rellenos. Rellenarlos con
   fill: currentColor (como estaba antes) hace que dos formas que se
   superponen -- ej. el círculo "pupila" del ícono de ojo, o el rectángulo
   de la tapa del basurero -- se fusionen en un bloque sólido sin ningún
   detalle interior, y a este tamaño chico terminan viéndose como cuadrados
   de color sin forma reconocible. Con stroke en vez de fill se ven como
   íconos de línea limpios y consistentes entre sí. */
.btn-icono svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.btn-icono-azul {
    color: var(--color-marca-azul);
}

.btn-icono-azul:hover {
    color: #4a72e0;
}

.btn-icono-rojo {
    color: var(--color-marca-rosado);
}

.btn-icono-rojo:hover {
    color: #d10f56;
}

.btn-icono[disabled] {
    color: #c2c2c2;
    cursor: not-allowed;
}

/* Icono de "Llamada": verde si quedó "Ok", azul si "Se reagenda", rosado
   si "No contesta", y gris mientras no se ha registrado ninguna. */
.btn-icono-verde {
    color: #1e7a34;
}

.btn-icono-verde:hover {
    color: #155a26;
}

.btn-icono-gris {
    color: #9a9aa4;
}

.btn-icono-gris:hover {
    color: #6c6c76;
}

/* Modal de registro de llamada (Admin/Talleres): <dialog> nativo, sin
   librerías. El ::backdrop es el fondo oscuro detrás del cuadro. */
.modal-llamada {
    border: none;
    border-radius: 12px;
    padding: 1.5rem;
    max-width: 420px;
    width: calc(100% - 2rem);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.modal-llamada::backdrop {
    background: rgba(20, 20, 30, 0.45);
}

.modal-llamada h2 {
    margin: 0 0 1rem;
    font-size: 1.1rem;
}

/* Campo "Staff llamada": lista de búsqueda con resultados que se despliegan
   debajo del campo de texto, dentro del modal (ver site-datepicker.js /
   Index.cshtml para el mismo tipo de ajuste con el calendario dentro de un
   <dialog> -- acá no hace falta "static" de Flatpickr porque el dropdown es
   un <div> propio, no algo que otra librería reubique). */
.campo-busqueda {
    position: relative;
}

.lista-busqueda {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 5;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-top: 0.2rem;
    max-height: 12rem;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.lista-busqueda-item {
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    font-size: 0.9rem;
}

.lista-busqueda-item:hover {
    background: #f0f0f0;
}

.lista-busqueda-vacio {
    padding: 0.4rem 0.6rem;
    color: #888;
    font-size: 0.9rem;
}

.modal-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1rem;
}

.modal-acciones button[type="button"] {
    background: transparent;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0.5rem 1.25rem;
    cursor: pointer;
}

/* Barra de filtro de una grilla: los controles (botón Filtrar / enlace
   Limpiar filtro) van alineados a la derecha, sin un título "Filtrar"
   encima. */
.barra-filtro {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

/* Columna de rango de fechas de la grilla de talleres: al pasar el mouse
   (title=...) se ve el detalle día por día, igual que en el formulario de
   inscripción. */
.rango-fechas {
    cursor: help;
    border-bottom: 1px dashed #999;
}

/* Más aire entre la grilla de Talleres y el título de la grilla de
   Participantes que se despliega debajo. */
.titulo-participantes {
    margin-top: 2.5rem;
}

/* Título "Administración de talleres": más chico que un <h1> normal. */
.titulo-chico {
    font-size: 1.4rem;
    font-weight: 400;
    margin-left: 0.75rem;
}

/* "Talleres" pegado a su grilla, más chico y sin negrita. */
.titulo-grilla-talleres {
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 0.25rem;
}

.titulo-grilla-talleres + table {
    margin-top: 0;
}

/* Bloque de filtro + grilla de Talleres, contraíble: al elegir un taller
   (grilla de Participantes visible más abajo, que necesita todo el
   espacio posible), este bloque arranca cerrado y deja el resumen
   "Talleres" como único encabezado -- clicable para reabrirlo. */
.bloque-colapsable-resumen {
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    padding: 0.4rem 0;
    color: var(--color-marca-azul);
}

.bloque-colapsable-resumen::-webkit-details-marker {
    display: none;
}

.bloque-colapsable-resumen::before {
    content: "▸";
    display: inline-block;
    margin-right: 0.4rem;
    transition: transform 0.15s;
}

.bloque-colapsable[open] > .bloque-colapsable-resumen::before {
    transform: rotate(90deg);
}

.bloque-colapsable[open] > .bloque-colapsable-resumen {
    margin-bottom: 0.5rem;
}

/* Aire entre el título/resumen de arriba y el bloque de filtro que viene
   debajo (en cualquier grilla del sistema que use esta clase -- Talleres,
   Participantes, Comunidad, etc.), y un marco fino alrededor de todo el
   bloque -- campos de filtro y los botones Filtrar/Limpiar filtro/Cerrar --
   para que se lea como una sola unidad. Antes era 3rem: con el <h1> ahora
   más chico (ver regla "h1" más arriba) ese aire quedaba excesivo. */
.bloque-filtro-superior {
    margin-top: 1.25rem;
    border: 1px solid #d9d4c9;
    border-radius: 8px;
    padding: 1.25rem 1.25rem 1rem;
}

.bloque-filtro-superior + h2 {
    margin-top: 0.5rem;
}

.alinear-derecha {
    text-align: right;
}

/* Pestañas de la vista "Registro" de un taller (Pages/Admin/Talleres/
   Registro.cshtml) -- pestaña "Todos" + hasta 4 tramos alfabéticos de
   Apellido Paterno, armados dinámicamente según la cantidad de
   participantes de cada taller. */
.registro-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 1.5rem 0 0 0;
    border-bottom: 2px solid #e5e1d6;
}

.registro-tab-btn {
    appearance: none;
    background: #f4f2ec;
    border: none;
    border-radius: 8px 8px 0 0;
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #6b6b6b;
    cursor: pointer;
}

.registro-tab-btn:hover {
    background: #ece8dc;
}

.registro-tab-btn.activa {
    background: var(--color-marca-azul);
    color: #fff;
}

.registro-tab-panel {
    display: none;
    padding-top: 1.25rem;
}

.registro-tab-panel.activa {
    display: block;
}

/* Tarjeta de sección (Admin/Talleres → Editar): enmarca cada bloque
   (datos, staff, fechas) en su propio recuadro blanco con borde y sombra
   suave, para que no se vean todos pegados uno tras otro. */
.tarjeta-seccion {
    background: #fff;
    border: 1px solid #e0dce8;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(40, 20, 80, 0.06);
    padding: 1rem 1.25rem 1.25rem;
    margin-bottom: 1.5rem;
}

.tarjeta-seccion > h2,
.tarjeta-seccion > form > h2 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #5B3F86;
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #ece8f2;
}

/* "Agregar ..." dentro de una tarjeta: sub-bloque con fondo suave, aparte
   de la tabla de arriba. */
.subbloque-agregar {
    margin-top: 1.25rem;
    padding: 0.75rem 1rem 1rem;
    background: #f7f5fa;
    border: 1px dashed #d4cde2;
    border-radius: 8px;
}

.subbloque-agregar h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

/* Columna "Se entrega gafete" de la pantalla Registro: vacía, para marcar
   a mano cuando se entrega el gafete. */
.col-entrega-gafete {
    width: 10rem;
    min-width: 10rem;
    text-align: center;
}

/* Confirmación breve al guardar al instante un select/input de la grilla
   de Participantes (Estatus, Pago, Categoría, N° factura). */
.guardado-ok {
    outline: 2px solid #1e7a34;
    background-color: #e6f4ea;
    transition: background-color 0.3s;
}


/* ---- Icono de "Llamada" con mas enfasis (grilla de Participantes) ----
   Fondo de color lleno + icono blanco, para que el estado se vea de lejos:
   verde = Ok, azul = Reagendada, amarillo = No contesta,
   rojo con una "X" encima = No asistira. Gris sin relleno = sin registrar. */
.btn-llamada {
    position: relative;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.btn-llamada svg {
    stroke-width: 2.4;
}

.btn-llamada:hover {
    filter: brightness(0.92);
}

.llamada-ok {
    background: #1e9a3a;
}

.llamada-reagendada {
    background: #2f6bff;
}

.llamada-nocontesta {
    background: #ffc400;
    color: #3a2a00;
}

.llamada-noasistira {
    background: #d90000;
    box-shadow: 0 0 0 2px #ffd0d0, 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Marca "X" blanca sobre circulo rojo, en la esquina del icono. */
.llamada-noasistira::after {
    content: "\2715";
    position: absolute;
    top: -7px;
    right: -7px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    color: #d90000;
    border: 2px solid #d90000;
    font-size: 9px;
    font-weight: 900;
    line-height: 11px;
    text-align: center;
}