/* ===========================================================================
 * cpg-admin.css — la «estética estrella» en el INTERIOR de las páginas de admin
 * (Recibos, Cuotas, Documentos, Fichajes, Preaviso, Grupos…).
 *
 * Se carga en todo el portal (vía portal_sidebar_styles), pero TODO va scopeado
 * bajo .rol-administrador, así que SOLO afecta al panel de administración. Cada
 * página trae su <style> propio con clases sueltas (.cards/.c/.pill/table/…);
 * aquí las homogeneizamos sin tocar cada página: .rol-administrador .x tiene MÁS
 * especificidad que el .x en línea, así que gana sin depender del orden de carga.
 *
 * NO cambia comportamiento ni estructura: solo aire, tipografía, esquinas,
 * sombras teñidas de morado y coherencia con el resto del portal.
 * Reversible: quitar el <link> de _sidebar_portal.php.
 * =========================================================================== */

/* ---- Cabecera de página ---- */
.rol-administrador .pagehdr{ margin-bottom:22px; }
.rol-administrador .pagehdr h1{ font-family:'Poppins','Inter',sans-serif; font-weight:600; letter-spacing:-.01em; }
.rol-administrador .pagehdr .lnk,
.rol-administrador a.lnk{
  background:#fff; border:1px solid #e6dcf0; color:#481650; border-radius:10px;
  padding:7px 12px; font-weight:600; box-shadow:0 1px 2px rgba(58,21,70,.05);
  transition:box-shadow .16s ease, transform .16s ease, background .16s ease;
}
.rol-administrador .pagehdr .lnk:hover,
.rol-administrador a.lnk:hover{ background:#faf6fc; box-shadow:0 4px 12px rgba(58,21,70,.10); transform:translateY(-1px); }

/* ---- Tarjetas KPI: de caja plana a tarjeta con profundidad + acento por estado ---- */
.rol-administrador .cards{ gap:14px; margin-bottom:18px; }
.rol-administrador .c{
  position:relative; overflow:hidden; background:#fff;
  border:1px solid var(--pg-bd,#e2e3ec); border-radius:15px; padding:17px 16px 15px;
  box-shadow:0 1px 2px rgba(58,21,70,.05), 0 10px 26px rgba(58,21,70,.08);
  transition:box-shadow .18s ease, transform .18s ease;
}
.rol-administrador .c:hover{ transform:translateY(-2px); box-shadow:0 4px 10px rgba(58,21,70,.10), 0 18px 40px rgba(58,21,70,.13); }
.rol-administrador .c::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; background:linear-gradient(90deg,#662371,#331038); }
.rol-administrador .c.pend::before{ background:linear-gradient(90deg,#e0a53a,#b9791a); }
.rol-administrador .c.ko::before{ background:linear-gradient(90deg,#e05a5a,#b4232a); }
.rol-administrador .c b{ font-family:'Poppins','Inter',sans-serif; font-weight:600; font-size:26px; line-height:1.05; }
.rol-administrador .c span{ color:var(--mut,#6b7280); }

/* ---- Filtros / selects ---- */
.rol-administrador .filtros select,
.rol-administrador select{
  border:1px solid #d9d2e2; border-radius:10px; padding:8px 11px; background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.rol-administrador .filtros select:focus,
.rol-administrador select:focus{ outline:none; border-color:#A878B5; box-shadow:0 0 0 3px rgba(168,120,181,.22); }

/* ---- Tablas ---- */
.rol-administrador table{
  border:1px solid var(--pg-bd,#e2e3ec); border-radius:15px; overflow:hidden;
  box-shadow:0 1px 2px rgba(58,21,70,.05), 0 10px 26px rgba(58,21,70,.07);
}
.rol-administrador thead th{ background:linear-gradient(#f4ecfa,#efe4f6); color:#5a2470; letter-spacing:.03em; }
.rol-administrador tbody tr:hover td{ background:#faf6fc; }

/* ---- Píldoras de estado ---- */
.rol-administrador .pill{ border-radius:999px; font-weight:700; }

/* ---- Botón principal (morado): con presencia de marca ---- */
.rol-administrador button.pay,
.rol-administrador .pay{
  box-shadow:0 4px 12px rgba(72,22,80,.26);
  transition:box-shadow .16s ease, transform .16s ease;
}
.rol-administrador button.pay:hover,
.rol-administrador .pay:hover{ box-shadow:0 7px 18px rgba(72,22,80,.34); transform:translateY(-1px); }

/* ---- Avisos ---- */
.rol-administrador .aviso{ border-radius:12px; box-shadow:0 1px 2px rgba(58,21,70,.05); }

/* ================================================================
 * AMPLIACIÓN (tanda -cm) — el resto de pantallas de admin, que usan
 * otro vocabulario de clases (calcado entre sí):
 *  · .pg-head/.card/.btn/.msg/.vacio  → Acceso de familias, Coordinadores,
 *    Comunicados, Equipación (campañas e items), Calendario y eventos.
 *  · .fh-*                            → Registro de jornada (fichajes).
 *  · .tarjeta/.grupo                  → Asistencia % (estadísticas).
 * Mismo criterio: solo profundidad, esquinas y foco; ni colores propios
 * ni maquetas se tocan.
 * ================================================================ */

/* ---- Tarjetas contenedoras: sombra teñida (mantienen su radio/padding) ---- */
.rol-administrador .card,
.rol-administrador .fh-card,
.rol-administrador .tarjeta,
.rol-administrador .grupo{
  box-shadow:0 1px 2px rgba(58,21,70,.05), 0 8px 22px rgba(58,21,70,.07);
  border-radius:15px;
}
.rol-administrador .vacio{ border-radius:15px; }

/* ---- Botones .btn (blancos, primary, rojo, verde) y secundarios de Cuotas ---- */
.rol-administrador .btn,
.rol-administrador button.sec{
  border-radius:10px;
  transition:box-shadow .16s ease, transform .16s ease, background .16s ease;
}
.rol-administrador .btn:hover,
.rol-administrador button.sec:hover{
  box-shadow:0 4px 12px rgba(58,21,70,.12);
  transform:translateY(-1px);
}
.rol-administrador .btn.primary{ box-shadow:0 4px 12px rgba(72,22,80,.26); }
.rol-administrador .btn.primary:hover{ box-shadow:0 7px 18px rgba(72,22,80,.34); }

/* ---- Avisos .msg / .fh-msg: como los .aviso ---- */
.rol-administrador .msg,
.rol-administrador .fh-msg{
  border-radius:12px;
  box-shadow:0 1px 2px rgba(58,21,70,.05);
}

/* ---- Campos de texto (buscadores, formularios): foco lila de marca ---- */
.rol-administrador input[type="text"]:focus,
.rol-administrador input[type="email"]:focus,
.rol-administrador input[type="search"]:focus,
.rol-administrador input[type="date"]:focus,
.rol-administrador input[type="month"]:focus,
.rol-administrador input[type="number"]:focus,
.rol-administrador textarea:focus{
  outline:none;
  border-color:#A878B5;
  box-shadow:0 0 0 3px rgba(168,120,181,.22);
}

/* ================================================================
 * AMPLIACIÓN (tanda -co) — ENTRENADOR y MONITOR: sus páginas con barra
 * (Bajas, Asistencia %) usan el mismo vocabulario (.card/.pg-head/.pill/
 * .vacio/.tarjeta/.grupo). Mismas reglas, mismo criterio.
 * ================================================================ */
.rol-entrenador .card,  .rol-monitor .card,
.rol-entrenador .tarjeta,.rol-monitor .tarjeta,
.rol-entrenador .grupo, .rol-monitor .grupo{
  box-shadow:0 1px 2px rgba(58,21,70,.05), 0 8px 22px rgba(58,21,70,.07);
  border-radius:15px;
}
.rol-entrenador .vacio, .rol-monitor .vacio{ border-radius:15px; }
.rol-entrenador table,  .rol-monitor table{
  border:1px solid var(--pg-bd,#e2e3ec); border-radius:15px; overflow:hidden;
  box-shadow:0 1px 2px rgba(58,21,70,.05), 0 10px 26px rgba(58,21,70,.07);
}
.rol-entrenador thead th, .rol-monitor thead th{
  background:linear-gradient(#f4ecfa,#efe4f6); color:#5a2470; letter-spacing:.03em;
}
.rol-entrenador tbody tr:hover td, .rol-monitor tbody tr:hover td{ background:#faf6fc; }
.rol-entrenador input[type="text"]:focus,  .rol-monitor input[type="text"]:focus,
.rol-entrenador input[type="date"]:focus,  .rol-monitor input[type="date"]:focus,
.rol-entrenador input[type="month"]:focus, .rol-monitor input[type="month"]:focus,
.rol-entrenador select:focus,              .rol-monitor select:focus,
.rol-entrenador textarea:focus,            .rol-monitor textarea:focus{
  outline:none; border-color:#A878B5; box-shadow:0 0 0 3px rgba(168,120,181,.22);
}

/* ================================================================
 * COLOR POR ÁREA (tanda -cy) — David 26-07: «bandas de color en todas las
 * secciones, pero que se diferencien».
 *
 * La banda es SIEMPRE la misma pieza (mismo degradado, mismo título en Poppins
 * blanco, misma cola anclada abajo). Lo único que cambia es el tinte, para
 * que de un vistazo sepas en qué área estás:
 *
 *   Administración  berenjena     (el de siempre, no se toca)
 *   Coordinación    ciruela apagada — administración con las manos atadas:
 *                                     mismo tono, menos peso
 *   Entrenador      índigo        — el perfil técnico
 *   Monitor         rojo vino     — elegido por David
 *   Familias        verde bosque  — elegido por David
 *
 * Los tres tonos de cada área comparten claridad y saturación con los del
 * morado original: son la misma banda girada de color, no cinco diseños.
 *
 * ⚠️ El verde y el rojo ya significan «correcto» y «fallo» en el portal
 * (recibos pagados, recobros). David los pidió igualmente para familias y
 * monitor, así que van PROFUNDOS —bosque y vino, no semáforo ni alarma—:
 * a tamaño de banda leen como identidad de área, no como aviso. NO aclararlos
 * ni subirles la saturación, que es lo que los convertiría en un estado.
 * ================================================================ */
.cpg-cabecera, .portal-shell{
  /* 28-07-2026 (-dv) — girada del tono 284 al 292, el del morado del manual.
     Se construyó en su día a partir del morado viejo y al cambiar la marca se
     quedó tirando a rojo mientras el resto del portal tira a azul.
     Los escalones de claridad NO se tocan (45 / 29 / 18): son los mismos que
     los de familias, entrenador, monitor y coordinación, así que las cinco
     bandas siguen siendo la misma pieza cambiada de color, no cinco diseños. */
  --cab-1:hsl(292 48% 45%); --cab-2:hsl(292 58% 29%); --cab-3:hsl(292 61% 18%);  /* administración */
}
.rol-familia,    .cpg-area-familia{
  --cab-1:hsl(156 42% 38%); --cab-2:hsl(156 52% 24%); --cab-3:hsl(156 55% 14%);   /* verde bosque */
}
.rol-entrenador, .cpg-area-entrenador{
  --cab-1:hsl(232 41% 45%); --cab-2:hsl(232 52% 29%); --cab-3:hsl(232 54% 18%);
}
.rol-monitor,    .cpg-area-monitor{
  --cab-1:hsl(357 46% 44%); --cab-2:hsl(357 56% 29%); --cab-3:hsl(357 58% 17%);   /* rojo vino */
}
.cpg-area-coordinacion{
  --cab-1:hsl(292 24% 43%); --cab-2:hsl(292 27% 28%); --cab-3:hsl(292 30% 17%);
}

/* ================================================================
 * CABECERAS CON FONDO DE COLOR (tanda -cu) — David 26-07: que TODAS las
 * pantallas de administración lleven la cabecera del «Inicio».
 * Cubre las páginas PHP (.pagehdr / .pg-head / .fh-head) y las del programa
 * de React (.cpg-cabecera, que marca cpg-cabeceras.js).
 * La «Cola» va anclada ABAJO y sangrando, como manda la norma.
 * ================================================================ */
.rol-administrador .pagehdr,
.rol-administrador .pg-head,
.rol-administrador .fh-head,
.rol-entrenador .pg-head,
.rol-monitor .pg-head,
.rol-familia .pg-head,
.cpg-cabecera{
  position:relative; overflow:hidden;
  background:radial-gradient(130% 150% at 88% -30%, var(--cab-1) 0%, var(--cab-2) 42%, var(--cab-3) 100%);
  color:#fff;
  border-radius:20px;
  padding:24px 28px;
  margin:0 0 24px;
  box-shadow:0 12px 34px rgba(58,21,70,.28);
}
/* La cola, como marca de agua anclada al borde inferior (nunca arriba). */
.rol-administrador .pagehdr::after,
.rol-administrador .pg-head::after,
.rol-administrador .fh-head::after,
.rol-entrenador .pg-head::after,
.rol-monitor .pg-head::after,
.rol-familia .pg-head::after,
.cpg-cabecera::after{
  content:""; position:absolute; right:-24px; bottom:-26px;
  width:300px; height:132px;
  /* 28-07 (-dy) — vuelve la cola DE COLOR, por decisión de David. Se probó la
     versión blanca (tanda -dw) y se descarta: se recupera exactamente el
     tratamiento de siempre, con el aclarado «screen» sobre el fondo oscuro. */
  background:url('/assets/cola.png') right bottom / contain no-repeat;
  opacity:.22; mix-blend-mode:screen; pointer-events:none;
}
@media(max-width:640px){
  .rol-administrador .pagehdr::after,
  .rol-administrador .pg-head::after,
  .rol-administrador .fh-head::after,
  .rol-entrenador .pg-head::after,
  .rol-monitor .pg-head::after,
  .rol-familia .pg-head::after,
  .cpg-cabecera::after{ display:none; }
  .rol-administrador .pagehdr,
  .rol-administrador .pg-head,
  .rol-administrador .fh-head,
  .rol-entrenador .pg-head,
  .rol-monitor .pg-head,
  .rol-familia .pg-head,
  .cpg-cabecera{ padding:20px 20px; border-radius:16px; }
}
/* Títulos y subtítulos dentro de la cabecera */
.rol-administrador .pagehdr h1,
.rol-administrador .pg-head h1,
.rol-administrador .fh-head h1,
.rol-entrenador .pg-head h1,
.rol-monitor .pg-head h1,
.rol-familia .pg-head h1,
.cpg-cabecera h1{
  font-family:'Poppins','Inter',sans-serif; font-weight:600; letter-spacing:-.01em;
  color:#fff; font-size:27px; line-height:1.15; margin:0; position:relative;
}
.rol-administrador .pg-head p,
.rol-administrador .fh-head .fh-sub,
.rol-entrenador .pg-head p,
.rol-monitor .pg-head p,
.rol-familia .pg-head p,
.cpg-cabecera p{
  color:rgba(255,255,255,.76); margin:8px 0 0; position:relative; max-width:70ch;
}
.cpg-cabecera h1 svg,
.rol-administrador .pg-head h1 svg,
.rol-entrenador .pg-head h1 svg,
.rol-monitor .pg-head h1 svg,
.rol-familia .pg-head h1 svg{
  /* 28-07-2026 (-dv) — era lila pálido, de cuando TODAS las bandas eran
     moradas. Sobre el verde de familias y el vino de monitor no pintaba nada.
     Blanco al 72 %: acompaña al título sin competir, y vale para las cinco. */
  color:rgba(255,255,255,.72);
}
/* Los enlaces-pastilla de la cabecera (Planes, Cuotas…), sobre morado */
.rol-administrador .pagehdr .lnk,
.rol-administrador .pagehdr a.lnk{
  position:relative;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
  color:#fff; box-shadow:none;
}
.rol-administrador .pagehdr .lnk:hover,
.rol-administrador .pagehdr a.lnk:hover{
  background:rgba(255,255,255,.24); box-shadow:none;
}
/* Los .pagehdr son flex en línea: que el título ocupe su renglón */
.rol-administrador .pagehdr{ align-items:center; }

/* ================================================================
 * CABECERAS, 2ª pasada (tanda -cv) — en la mayoría de las pantallas del
 * programa de React el título comparte fila con los botones de acción
 * (Nuevo deportista, Exportar, Filtros…). Ahora la banda morada ocupa esa
 * fila entera, así que esos controles quedan DENTRO del morado: se visten
 * de pastilla clara, igual que los .lnk de Recibos, para que se lean.
 * ================================================================ */
.cpg-cabecera button:not([class*="destructive"]),
.cpg-cabecera a{
  position:relative;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.24);
  color:#fff;
  box-shadow:none;
}
.cpg-cabecera button:not([class*="destructive"]):hover,
.cpg-cabecera a:hover{ background:rgba(255,255,255,.26); }
.cpg-cabecera button:focus-visible,
.cpg-cabecera a:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.45);
}
.cpg-cabecera button svg, .cpg-cabecera a svg{ color:currentColor; }
/* La acción principal sigue mandando: blanca maciza sobre el morado. */
.cpg-cabecera button[class*="bg-primary"],
.cpg-cabecera a[class*="bg-primary"]{
  background:#fff; border-color:#fff; color:#331038;
}
.cpg-cabecera button[class*="bg-primary"]:hover,
.cpg-cabecera a[class*="bg-primary"]:hover{ background:#f2e7f7; }

/* Buscadores y selectores que viven en la fila de cabecera */
.cpg-cabecera input, .cpg-cabecera select, .cpg-cabecera textarea{
  position:relative;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.24);
  color:#fff;
}
.cpg-cabecera input::placeholder{ color:rgba(255,255,255,.62); }
.cpg-cabecera select option{ color:#1f2430; background:#fff; }
.cpg-cabecera input:focus, .cpg-cabecera select:focus, .cpg-cabecera textarea:focus{
  outline:none;
  border-color:rgba(255,255,255,.55);
  box-shadow:0 0 0 3px rgba(255,255,255,.20);
}

/* Textos apagados del programa (subtítulos, contadores) sobre el morado */
.cpg-cabecera .text-muted-foreground{ color:rgba(255,255,255,.76); }

/* Lo mismo en las páginas PHP de familia: «Mis solicitudes» lleva el botón
   «+ Nueva solicitud de plaza» dentro de la banda. */
.rol-familia .pg-head .btn,
.rol-familia .pg-head a.btn{
  position:relative;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.24);
  color:#fff;
  box-shadow:none;
}
.rol-familia .pg-head .btn:hover,
.rol-familia .pg-head a.btn:hover{ background:rgba(255,255,255,.26); }

@media (prefers-reduced-motion: reduce){
  .rol-administrador .c,
  .rol-administrador .pagehdr .lnk,
  .rol-administrador a.lnk,
  .rol-administrador .pay,
  .rol-administrador .btn,
  .rol-administrador button.sec{ transition:none; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * ECONOMÍA — el remate del barrido (tanda -gt, 31-07-2026)
 *
 * Las 3 pantallas de Economía (Recibos, Cuotas y planes, Cuotas por
 * deportista) se aparcaron cuando el barrido general (-cn). Al retomarlas,
 * casi todo ya les llegaba solo: banda berenjena (.pagehdr), tarjetas KPI
 * con franja (.c), sombra teñida en .card/.grupo, y la tipografía la
 * impone cpg-tema con !important. Esto es lo que faltaba de verdad:
 *
 *   · las PESTAÑAS de Recibos (.pest) seguían con el dibujo viejo de
 *     carpeta (borde inferior + solapa): pasan a pastillas, la activa en
 *     morado macizo como los botones de la casa;
 *   · varias cajas con sombra gris o sin ella: sombra teñida de marca.
 *
 * Todo scopeado a .rol-administrador: fuera del admin es inerte.
 * ═══════════════════════════════════════════════════════════════════════ */

.rol-administrador .pest{ border-bottom:0; gap:8px; padding-bottom:2px; }
.rol-administrador .pest a{
  border:1px solid #e1d0e4; border-radius:999px; top:0; background:#fff;
  padding:8px 15px;
}
.rol-administrador .pest a:hover{ background:#f6f2f7; color:#481650; }
.rol-administrador .pest a.on{
  background:#481650; color:#fff; border-color:#481650;
  box-shadow:0 6px 16px rgba(72,22,80,.25);
}

/* Cajas de las tres pantallas que iban con sombra gris o a pelo. Solo
 * sombra y radio: ni padding ni márgenes, para no mover la maquetación. */
.rol-administrador .lat,
.rol-administrador .faltan,
.rol-administrador .box,
.rol-administrador .bloque{
  box-shadow:0 1px 2px rgba(58,21,70,.05), 0 4px 14px rgba(58,21,70,.05);
  border-radius:13px;
}
.rol-administrador .cajon{ border-radius:11px; }

/* ── Inscripciones (admin) · el bloque «Desde / Hasta» se salía de la tarjeta ──
 * Tanda -ie · 3 de agosto de 2026.
 *
 * POR QUÉ
 * Dos <input type="date"> nativos piden 312 px que NO se pueden encoger
 * (152 px cada uno más el hueco de 8). El programa mete los dos en un bloque
 * marcado `lg:col-span-2`, y ese ensanchado SOLO entra a partir de 1024 px de
 * ventana. Por debajo, el bloque cae en una sola columna más estrecha que 312
 * y el campo «Hasta» se sale por la derecha, cortado.
 *
 * Medido en banco de pruebas contra el CSS real del programa:
 *   · ventana 1000 px (Safari a media pantalla) → se salía 100 px
 *   · móvil                                     → se salía 36 px, y además
 *                                                 aparecía barra de desplazamiento
 *   · ventana de 1024 px en adelante            → cabía; NO se toca
 *
 * El programa no se recompila (fuente congelado), así que se arregla aquí.
 * El selector es el de ese bloque, que aparece UNA sola vez en todo el
 * programa, y ninguna página PHP usa esas clases: no puede afectar a nada más.
 */

/* Tablet y ventana partida (768–1023 px): que ocupe la fila entera. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .grid.md\:grid-cols-3 > .flex.gap-2.items-end.lg\:col-span-2 {
    grid-column: 1 / -1;
  }
}

/* Móvil (menos de 768 px): la rejilla ya es de una sola columna, no hay fila
   que ganar. Se apila «Desde» encima de «Hasta». */
@media (max-width: 767.98px) {
  .flex.gap-2.items-end.lg\:col-span-2 {
    flex-wrap: wrap;
  }
  .flex.gap-2.items-end.lg\:col-span-2 > * {
    flex: 1 1 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOS PANELES QUE NO CABEN EN LA PANTALLA (tanda -jn, 05-08-2026)

   QUÉ PASABA
   El panel de una solicitud de plaza salía cortado por arriba y por abajo y no
   se podía deslizar: los botones del final («Enviar email de admisión»,
   «Reenviar enlace») quedaban fuera de la pantalla y no había forma de
   llegar a ellos.

   POR QUÉ
   Es un diálogo de Radix con las clases que trae shadcn de fábrica:

       fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg
       translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 …

   Ahí no hay ni `max-height` ni `overflow`. Un panel más alto que la ventana
   se sale por los dos lados a la vez —está centrado— y como no tiene zona
   deslizable propia, la rueda del ratón no mueve nada. No estaba bloqueado:
   es que no tenía dónde deslizar.

   POR QUÉ SE ARREGLA AQUÍ Y NO EN EL PROGRAMA
   El bundle de React no se recompila. Esto es CSS y no toca ni un nodo del
   árbol, así que no puede romper el menú (que es lo que pasó en la -ip).

   ⚠️ Se apunta a DOS selectores a propósito:
     · `[role="dialog"][data-state="open"]` — lo que Radix pone de verdad en
       el nodo, y lo que seguiría valiendo si mañana cambian las clases;
     · la combinación de clases de Tailwind — por si algún diálogo no llevara
       el `role` (los hay a medio hacer).
   Con uno solo bastaría hoy; con los dos aguanta un cambio de cualquiera.

   ⚠️ Al tocar este fichero hay que SUBIR EL `?v=` en index.html.
   ═══════════════════════════════════════════════════════════════════════════ */

[role="dialog"][data-state="open"],
div.fixed.left-\[50\%\].top-\[50\%\].z-50 {
  /* Se deja un dedo de margen arriba y abajo para que se vea que hay panel y
     no parezca que la página entera se ha vuelto otra cosa. */
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  /* Que la rueda no siga arrastrando la página de detrás al llegar al final. */
  overscroll-behavior: contain;
}

/* `dvh` es la altura de verdad en el móvil (descuenta la barra del navegador,
   que aparece y desaparece). Va DESPUÉS para que gane donde exista, y los
   navegadores que no la entiendan se quedan con la línea de arriba. */
@supports (height: 100dvh) {
  [role="dialog"][data-state="open"],
  div.fixed.left-\[50\%\].top-\[50\%\].z-50 {
    max-height: calc(100dvh - 2.5rem);
  }
}