/* =============================================================================
   RESONUM · CORRECCIONES DE LEGIBILIDAD Y SPACING
   Overrides puntuales sobre tema-resonum.css para resolver contrastes pobres
   y espacios rotos detectados en producción. NO redefine la paleta — solo
   parchea casos puntuales del tema y del CSS de Flora.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1) ICONOS DENTRO DE BOTONES — preservar currentColor
   -----------------------------------------------------------------------------
   tema-resonum.css fuerza `.fl-tarjeta svg, .fl-tabla svg { color: petrol-700 }`,
   lo que oscurece los íconos de los botones (acento/primario/peligro) hasta
   volverlos invisibles sobre sus fondos oscuros o corales. Reaplicamos
   currentColor cuando el SVG está dentro de un botón o de una celda con
   fondo coloreado.
   --------------------------------------------------------------------------- */
.fl-tarjeta .fl-boton svg,
.fl-tarjeta .fl-boton .fl-icono,
.fl-tarjeta .boton svg,
.fl-tarjeta .boton .fl-icono,
.fl-tarjeta .boton2 svg,
.fl-tarjeta .boton2 .fl-icono,
.fl-tabla   .fl-boton svg,
.fl-tabla   .fl-boton .fl-icono,
.fl-tabla-datos .fl-boton svg,
.fl-tabla-datos .fl-boton .fl-icono,
.fl-tarjeta .fl-badge svg,
.fl-tarjeta .fl-badge .fl-icono,
.fl-tabla   .fl-badge svg,
.fl-tabla   .fl-badge .fl-icono,
.fl-tabla-datos .fl-badge svg,
.fl-tabla-datos .fl-badge .fl-icono {
    color: currentColor !important;
}

/* Hover de botones-anchor: el tema base define `a:hover { color: coral-700 }`,
   lo que hace que los `<a class="fl-boton ...">` cambien su texto/ícono a coral
   en hover. Sobre fondos petrol oscuros (primario) o corales (acento) eso se
   pierde con el fondo. Mantenemos el color original del botón en hover. */
a.fl-boton:hover,
a.fl-boton:hover .fl-icono,
a.fl-boton:hover svg,
a.boton:hover,
a.boton:hover .fl-icono,
a.boton:hover svg {
    color: inherit;
}
a.fl-boton--primario,
a.fl-boton--primario:hover,
a.fl-boton--acento,
a.fl-boton--acento:hover,
a.fl-boton--peligro,
a.fl-boton--peligro:hover,
a.fl-boton--destaque,
a.fl-boton--destaque:hover {
    color: var(--rs-marfil-50) !important;
}
a.fl-boton--primario:hover svg,
a.fl-boton--primario:hover .fl-icono,
a.fl-boton--acento:hover svg,
a.fl-boton--acento:hover .fl-icono,
a.fl-boton--peligro:hover svg,
a.fl-boton--peligro:hover .fl-icono,
a.fl-boton--destaque:hover svg,
a.fl-boton--destaque:hover .fl-icono {
    color: var(--rs-marfil-50) !important;
}
a.fl-boton--secundario,
a.fl-boton--secundario:hover {
    color: var(--rs-petrol-800) !important;
}
a.fl-boton--secundario:hover svg,
a.fl-boton--secundario:hover .fl-icono {
    color: var(--rs-petrol-800) !important;
}
/* Botón legacy `.boton` (siempre fondo acento + texto blanco) */
a.boton,
a.boton:hover,
.boton:hover,
.boton:hover svg,
.boton:hover .fl-icono {
    color: #fff !important;
}

/* Botón legacy `.boton` (fondo acento petrol + texto blanco): forzar el ícono
   también en blanco para que no se pierda con su fondo. Caso típico: botón
   de copiar link en /miembro/difusion. */
.boton,
.boton svg,
.boton .fl-icono,
.boton2,
.boton2 svg,
.boton2 .fl-icono {
    color: #fff !important;
}
.boton svg,
.boton .fl-icono,
.boton2 svg,
.boton2 .fl-icono {
    stroke: currentColor;
}

/* Íconos en headers de tarjeta con fondo coloreado custom (ej. tarjetas
   "Mi agenda personal", "Mi perfil"): respetar el color heredado del
   contenedor inline. */
.fl-tarjeta [style*="color:var(--rs-marfil"] svg,
.fl-tarjeta [style*="color: var(--rs-marfil"] svg,
.fl-tarjeta [style*="color:#fff"] svg,
.fl-tarjeta [style*="color: #fff"] svg {
    color: inherit !important;
}

/* Botones primarios/acento/peligro siempre con ícono del color del texto del
   botón, incluso fuera de tarjetas/tablas. */
.fl-boton--primario svg,
.fl-boton--primario .fl-icono,
.fl-boton--acento svg,
.fl-boton--acento .fl-icono,
.fl-boton--peligro svg,
.fl-boton--peligro .fl-icono,
.fl-boton--destaque svg,
.fl-boton--destaque .fl-icono {
    color: var(--rs-marfil-50) !important;
}

/* -----------------------------------------------------------------------------
   2) BREADCRUMBS — contraste reforzado sobre fondo marfil
   --------------------------------------------------------------------------- */
.fl-breadcrumb,
.fl-breadcrumb-item {
    color: var(--rs-petrol-700);
}
.fl-breadcrumb-enlace {
    color: var(--rs-petrol-800) !important;
    font-weight: 600;
}
.fl-breadcrumb-enlace:hover {
    color: var(--rs-coral-700) !important;
    background: color-mix(in srgb, var(--rs-coral-500) 10%, transparent);
}
.fl-breadcrumb-actual,
.fl-breadcrumb [aria-current="page"] {
    color: var(--rs-petrol-900);
    font-weight: 700;
}
.fl-breadcrumb-separador {
    color: var(--rs-coral-500);
}
.fl-breadcrumb-enlace .fl-icono,
.fl-breadcrumb-actual .fl-icono {
    color: inherit !important;
}

/* -----------------------------------------------------------------------------
   3) FILTROS DE TABLA — botón select y panel del popup
   --------------------------------------------------------------------------- */
.fl-tabla-filtro-select {
    background: var(--rs-marfil-50);
    border: 1px solid var(--rs-petrol-300);
    color: var(--rs-petrol-900);
    font-weight: 600;
}
.fl-tabla-filtro-select:hover {
    background: var(--rs-marfil-100);
    border-color: var(--rs-petrol-500);
    color: var(--rs-petrol-900);
}
.fl-tabla-filtro-select::after {
    opacity: 0.85;
    color: var(--rs-petrol-700);
}
.fl-tabla-filtro-select[data-fl-filtro-activo="true"] {
    background: var(--rs-coral-100);
    border-color: var(--rs-coral-500);
    color: var(--rs-coral-800);
}
.fl-tabla-filtro-panel {
    background: var(--rs-marfil-50);
    border: 1px solid var(--rs-petrol-300);
    color: var(--rs-tinta-900);
}
.fl-tabla-filtro-busqueda-input {
    color: var(--rs-tinta-900);
}
.fl-tabla-filtro-busqueda-input::placeholder {
    color: var(--rs-tinta-400);
}
.fl-tabla-filtro-opcion {
    color: var(--rs-tinta-900);
}
.fl-tabla-filtro-opcion:hover {
    background: var(--rs-marfil-100);
    color: var(--rs-petrol-900);
}
.fl-tabla-filtro-opcion-conteo {
    color: var(--rs-tinta-500);
}
.fl-tabla-filtro-busqueda .fl-icono {
    color: var(--rs-petrol-600);
}
.fl-tabla-filtro-pie-accion {
    color: var(--rs-petrol-700);
}
.fl-tabla-filtro-pie-accion--peligro {
    color: var(--rs-coral-700);
}

/* Buscador global de tabla — input y placeholder visibles */
[data-fl-tabla-buscar],
input[data-fl-tabla-buscar] {
    background: var(--rs-marfil-50);
    border: 1px solid var(--rs-petrol-300);
    color: var(--rs-tinta-900);
}
[data-fl-tabla-buscar]::placeholder {
    color: var(--rs-tinta-400);
}

/* -----------------------------------------------------------------------------
   4) BADGES — más definidos para que se lean como badges
   --------------------------------------------------------------------------- */
.fl-badge {
    background: var(--rs-marfil-200);
    color: var(--rs-petrol-900);
    border: 1px solid var(--rs-petrol-200);
    font-weight: 600;
}
.fl-badge--info {
    background: var(--rs-petrol-100);
    border-color: var(--rs-petrol-300);
    color: var(--rs-petrol-900);
}
.fl-badge--info.fl-badge--solido,
.fl-badge[data-solido="true"].fl-badge--info {
    background: var(--rs-petrol-700);
    color: var(--rs-marfil-50);
    border-color: var(--rs-petrol-800);
}
.fl-badge--exito {
    background: var(--rs-exito-suave);
    color: #1F5A40;
    border-color: #B7DACA;
}
.fl-badge--exito.fl-badge--solido {
    background: var(--rs-exito);
    color: var(--rs-marfil-50);
    border-color: #256C4D;
}
.fl-badge--error {
    background: var(--rs-coral-100);
    color: var(--rs-coral-800);
    border-color: var(--rs-coral-300);
}
.fl-badge--adv,
.fl-badge--alerta {
    background: var(--rs-adv-suave);
    color: #6E4612;
    border-color: #E5CFA1;
}
.fl-badge--acento {
    background: var(--rs-coral-100);
    color: var(--rs-coral-800);
    border-color: var(--rs-coral-400);
}

/* -----------------------------------------------------------------------------
   5) ASISTENCIA — pills presente/ausente/justificado
   -----------------------------------------------------------------------------
   coros.css usa --c-exito-fondo etc., variables que no existen en la build
   actual de Flora → las pills quedan sin color. Mapeamos a Flora.
   --------------------------------------------------------------------------- */
.asistencia-estado-pill.pill-solo.pill-presente,
.asistencia-estado input:checked + .asistencia-estado-pill.pill-presente {
    background: var(--rs-exito-suave);
    color: #1F5A40;
    border-color: var(--rs-exito);
}
.asistencia-estado-pill.pill-solo.pill-ausente,
.asistencia-estado input:checked + .asistencia-estado-pill.pill-ausente {
    background: var(--rs-coral-100);
    color: var(--rs-coral-800);
    border-color: var(--rs-coral-600);
}
.asistencia-estado-pill.pill-solo.pill-justificado,
.asistencia-estado input:checked + .asistencia-estado-pill.pill-justificado {
    background: var(--rs-adv-suave);
    color: #6E4612;
    border-color: var(--rs-adv);
}
.asistencia-estado-pill {
    background: var(--rs-marfil-100);
    color: var(--rs-tinta-700);
    border-color: var(--rs-petrol-200);
}

/* Estadísticas (3 contadores) en la vista de ver planilla:
   tarjeta vacía + alerta interior se veía mal. Le damos identidad de stat card. */
.asistencia-ver-contadores,
[data-rs-asistencia-stats] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .875rem;
}
@media (max-width: 768px) {
    .asistencia-ver-contadores,
    [data-rs-asistencia-stats] {
        grid-template-columns: 1fr;
    }
}

.fl-tarjeta .alerta.exito,
.fl-tarjeta .alerta.error,
.fl-tarjeta .alerta.advertencia {
    margin: 0;
    padding: .9rem 1.1rem;
    border-radius: var(--rs-radio-sm);
    font-size: 1.05rem;
    text-align: center;
    border-left: 4px solid currentColor;
    background: transparent;
}
.fl-tarjeta .alerta.exito       { color: #1F5A40;            background: var(--rs-exito-suave); border-left-color: var(--rs-exito); }
.fl-tarjeta .alerta.error       { color: var(--rs-coral-800); background: var(--rs-coral-100); border-left-color: var(--rs-coral-600); }
.fl-tarjeta .alerta.advertencia { color: #6E4612;             background: var(--rs-adv-suave); border-left-color: var(--rs-adv); }
.fl-tarjeta .alerta strong { font-family: var(--rs-fuente-display); font-size: 1.5rem; margin-right: .25rem; }
.centrar-texto { text-align: center; }

/* -----------------------------------------------------------------------------
   6) VISOR DE ARCHIVOS — cabecera y cruz cerrar visibles
   --------------------------------------------------------------------------- */
.visor-modal-cabecera {
    background: var(--rs-petrol-50);
    border-bottom: 1px solid var(--rs-petrol-300);
}
.visor-modal-titulo {
    color: var(--rs-petrol-900);
}
.visor-modal-boton {
    background: var(--rs-marfil-50);
    border: 1px solid var(--rs-petrol-400);
    color: var(--rs-petrol-800);
}
.visor-modal-boton:hover {
    background: var(--rs-petrol-100);
    border-color: var(--rs-petrol-700);
    color: var(--rs-petrol-900);
}
.visor-modal-boton[data-visor-cerrar] {
    background: var(--rs-coral-500);
    border-color: var(--rs-coral-700);
    color: var(--rs-marfil-50);
}
.visor-modal-boton[data-visor-cerrar]:hover {
    background: var(--rs-coral-700);
    color: var(--rs-marfil-50);
}
.visor-modal-boton svg { color: currentColor !important; }

/* -----------------------------------------------------------------------------
   7) AGENDA — días sábado/domingo y números legibles
   --------------------------------------------------------------------------- */
.fl-calendario-dias-semana {
    background: var(--rs-petrol-800);
}
.fl-calendario-dia-semana {
    color: var(--rs-marfil-50);
    background: transparent;
    border-right-color: color-mix(in srgb, var(--rs-marfil-50) 25%, transparent);
}
.fl-calendario-dia {
    background: var(--rs-marfil-50);
    border-right-color: var(--rs-petrol-200);
    border-bottom-color: var(--rs-petrol-200);
}
.fl-calendario-dia-numero {
    color: var(--rs-petrol-900);
    font-weight: 600;
}
.fl-calendario-dia--otro-mes {
    background: var(--rs-marfil-200);
}
.fl-calendario-dia--otro-mes .fl-calendario-dia-numero {
    color: var(--rs-tinta-400);
}
.fl-calendario-dia--finde {
    background: var(--rs-petrol-50);
}
.fl-calendario-dia--otro-mes.fl-calendario-dia--finde {
    background: var(--rs-marfil-200);
}
.fl-calendario-dia--hoy .fl-calendario-dia-numero {
    background: var(--rs-coral-500);
    color: var(--rs-marfil-50);
}
.fl-calendario-evento {
    color: var(--rs-tinta-900);
    font-weight: 500;
}
.fl-calendario-evento-hora { color: var(--rs-tinta-500); }

/* Header de los meses (nombre del mes) bien visible */
.fl-calendario-cabecera-titulo,
.fl-calendario-titulo {
    color: var(--rs-petrol-900);
    font-family: var(--rs-fuente-display);
    font-weight: 700;
}

/* -----------------------------------------------------------------------------
   8) FORMULARIOS — separación entre .form-grupo apilados
   -----------------------------------------------------------------------------
   compat.css setea `.form-grupo { margin-bottom: 0 }` y no hay gap entre
   form-grupos hermanos dentro de una tarjeta → labels pegadas al input
   anterior (caso: descripción del concierto).
   --------------------------------------------------------------------------- */
.form-grupo + .form-grupo,
.form-grupo + .coro-ensayo-fila,
.form-grupo + .coro-fila-2,
.coro-ensayo-fila + .form-grupo,
.coro-fila-2 + .form-grupo,
.coro-ensayo-fila + .coro-ensayo-fila,
.coro-fila-2 + .coro-fila-2,
.coro-ensayo-fila + .coro-fila-2,
.coro-fila-2 + .coro-ensayo-fila {
    margin-top: var(--fl-sp-4, 1rem);
}
.coro-ensayo-fila .form-grupo + .form-grupo,
.coro-fila-2 .form-grupo + .form-grupo,
.fl-grilla .form-grupo + .form-grupo {
    margin-top: 0;
}

/* Las alertas (x-flora::alerta) y bloques info dentro de una tarjeta o
   formulario deben tener aire respecto del campo previo. */
.fl-tarjeta-cuerpo .form-grupo + .fl-alerta,
.fl-tarjeta-cuerpo .coro-ensayo-fila + .fl-alerta,
.fl-tarjeta-cuerpo .coro-fila-2 + .fl-alerta,
.fl-tarjeta-cuerpo .fl-campo + .fl-alerta,
.fl-tarjeta-cuerpo .fl-grilla + .fl-alerta,
form .form-grupo + .fl-alerta,
form .coro-ensayo-fila + .fl-alerta,
form .coro-fila-2 + .fl-alerta,
form .fl-campo + .fl-alerta {
    margin-top: var(--fl-sp-4, 1rem);
}

/* Mismo problema con x-flora::campo: por defecto .fl-campo no tiene
   margin entre hermanos apilados → label del segundo queda pegado al
   input del primero. Reservamos el espacio salvo cuando están dentro
   de una grilla (que ya maneja el gap).
   Cubrimos también las transiciones campo↔grilla y grilla↔grilla
   apiladas dentro de un formulario. */
.fl-campo + .fl-campo,
.fl-campo + .fl-grilla,
.fl-grilla + .fl-campo,
.fl-grilla + .fl-grilla {
    margin-top: var(--fl-sp-4, 1rem);
}
.fl-grilla .fl-campo + .fl-campo,
.fl-grilla--2 .fl-campo + .fl-campo,
.fl-grilla--3 .fl-campo + .fl-campo,
.fl-grilla--4 .fl-campo + .fl-campo {
    margin-top: 0;
}
/* Separación entre el bloque de título de sección y el primer form-grupo */
.coro-seccion-titulo + .form-grupo,
.coro-seccion-titulo + .coro-ensayo-fila,
.coro-seccion-titulo + .coro-fila-2 {
    margin-top: var(--fl-sp-3, 0.75rem);
}

/* -----------------------------------------------------------------------------
   9) DIFUSIÓN — caja "ideas para usar" y botones acciones
   --------------------------------------------------------------------------- */
.difusion-tips {
    background: var(--rs-petrol-50);
    border: 1px dashed var(--rs-petrol-400);
    color: var(--rs-tinta-900);
}
.difusion-tips h4 {
    color: var(--rs-petrol-900);
    font-family: var(--rs-fuente-display);
}
.difusion-tips ul,
.difusion-tips ul li {
    color: var(--rs-tinta-700);
}
.difusion-qr-caption { color: var(--rs-tinta-500); }
.difusion-acciones .fl-boton svg,
.difusion-acciones .fl-boton .fl-icono {
    color: currentColor !important;
}

/* -----------------------------------------------------------------------------
   10) NUBE DE ARCHIVOS — nombres y breadcrumbs del explorador
   --------------------------------------------------------------------------- */
.fl-explorador-item,
.fl-explorador-item-nombre,
.fl-explorador-item-texto {
    color: var(--rs-tinta-900);
}
.fl-explorador-item:hover {
    background: var(--rs-marfil-100);
}
.fl-explorador-item-info,
.fl-explorador-item-meta {
    color: var(--rs-tinta-500);
}
.fl-explorador-ruta a,
.fl-explorador-ruta-segmento {
    color: var(--rs-petrol-800);
    font-weight: 600;
}
.fl-explorador-ruta-separador {
    color: var(--rs-coral-500);
}

/* -----------------------------------------------------------------------------
   11) FINANZAS · COBROS — botones de acciones visibles
   -----------------------------------------------------------------------------
   Algunos botones dentro de la tabla y junto a "Generar cuota del mes" se
   pierden por íconos en color oscuro sobre fondo oscuro o por dropdown sin
   estilo de botón. Aseguramos contraste explícito.
   --------------------------------------------------------------------------- */
.fl-header-pagina-acciones .fl-boton--secundario,
.fl-header-pagina-acciones .fl-boton[data-fl-dropdown] {
    background: var(--rs-marfil-50);
    border: 1.5px solid var(--rs-petrol-700);
    color: var(--rs-petrol-800);
}
.fl-header-pagina-acciones .fl-boton--secundario svg,
.fl-header-pagina-acciones .fl-boton[data-fl-dropdown] svg,
.fl-header-pagina-acciones .fl-boton--secundario .fl-icono,
.fl-header-pagina-acciones .fl-boton[data-fl-dropdown] .fl-icono {
    color: currentColor !important;
}

/* Botón "Ver pagos" (primario) dentro de la tabla de cobros — icono claro */
.fl-tabla-acciones-fila .fl-boton--primario svg,
.fl-tabla-acciones-fila .fl-boton--primario .fl-icono {
    color: var(--rs-marfil-50) !important;
}

/* Botón legacy `.rn-btn` (usado en /profile y otros forms viejos): el SVG
   debe heredar currentColor del texto (no el petrol del override de tarjeta),
   y el texto no debe cambiar de color en hover/focus. */
.rn-btn svg,
.rn-btn .fl-icono,
.rn-btn:hover svg,
.rn-btn:hover .fl-icono,
.rn-btn:focus svg,
.rn-btn:focus .fl-icono {
    color: currentColor !important;
    stroke: currentColor !important;
}
.rn-btn-primario,
.rn-btn-primario:hover,
.rn-btn-primario:focus,
.rn-btn-primario:active,
.rn-btn-primario:visited {
    color: #fff !important;
}

/* Botones primario/acento/peligro dentro de la fila de acciones de tabla:
   forzar texto marfil para que se lea sobre los fondos petrol/coral.
   Caso: "Asignarme rol" en /coros/seleccion no se leía. */
.fl-tabla-acciones-fila .fl-boton--primario,
.fl-tabla-acciones-fila .fl-boton--primario:hover,
.fl-tabla-acciones-fila .fl-boton--acento,
.fl-tabla-acciones-fila .fl-boton--acento:hover,
.fl-tabla-acciones-fila .fl-boton--peligro,
.fl-tabla-acciones-fila .fl-boton--peligro:hover {
    color: var(--rs-marfil-50) !important;
}
.fl-tabla-acciones-fila .fl-boton--primario .fl-boton-contenido,
.fl-tabla-acciones-fila .fl-boton--acento .fl-boton-contenido,
.fl-tabla-acciones-fila .fl-boton--peligro .fl-boton-contenido,
.fl-tabla-acciones-fila .fl-boton--acento svg,
.fl-tabla-acciones-fila .fl-boton--acento .fl-icono,
.fl-tabla-acciones-fila .fl-boton--peligro svg,
.fl-tabla-acciones-fila .fl-boton--peligro .fl-icono {
    color: inherit !important;
}

/* Iconos en botones fantasma (solo-icono trash, etc.) — siempre legibles */
.fl-tabla-acciones-fila .fl-boton--fantasma svg,
.fl-tabla-acciones-fila .fl-boton--fantasma .fl-icono {
    color: var(--rs-petrol-700) !important;
}
.fl-tabla-acciones-fila .fl-boton--fantasma:hover svg,
.fl-tabla-acciones-fila .fl-boton--fantasma:hover .fl-icono {
    color: var(--rs-coral-700) !important;
}

/* -----------------------------------------------------------------------------
   12) CONCIERTO — bloque visibilidad (público/privado)
   --------------------------------------------------------------------------- */
.rs-concierto-visibilidad {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--fl-sp-3, .75rem);
    margin-top: .25rem;
}
.rs-concierto-visibilidad label {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .85rem 1rem;
    border: 1.5px solid var(--rs-petrol-200);
    border-radius: var(--rs-radio-sm);
    background: var(--rs-marfil-50);
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.rs-concierto-visibilidad label:hover {
    border-color: var(--rs-petrol-500);
    background: var(--rs-petrol-50);
}
.rs-concierto-visibilidad input[type="radio"] {
    margin-top: 3px;
    accent-color: var(--rs-coral-500);
}
.rs-concierto-visibilidad input[type="radio"]:checked + .rs-concierto-visibilidad-texto {
    color: var(--rs-petrol-900);
}
.rs-concierto-visibilidad label:has(input[type="radio"]:checked) {
    border-color: var(--rs-coral-500);
    background: var(--rs-coral-50);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rs-coral-500) 18%, transparent);
}
.rs-concierto-visibilidad-titulo {
    display: block;
    font-weight: 700;
    color: var(--rs-petrol-900);
    margin-bottom: .15rem;
}
.rs-concierto-visibilidad-desc {
    display: block;
    font-size: .8rem;
    color: var(--rs-tinta-500);
}

/* -----------------------------------------------------------------------------
   13) PERFORMANCE EN MOBILE
   -----------------------------------------------------------------------------
   El fondo animado (.rs-aro) usa mask-image + filter:blur + mix-blend-mode
   sobre 20 figuras al mismo tiempo, lo que en mobile causa stuttering y
   layout/paint costosos. En pantallas chicas dejamos solo unas pocas figuras
   estáticas y desactivamos blur/blend que son los efectos más caros.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .rs-aro {
        filter: none !important;
        mix-blend-mode: normal !important;
        animation: none !important;
    }
    /* Mantener solo las figuras de fondo más grandes; ocultar el resto */
    .rs-aro--3, .rs-aro--5, .rs-aro--6, .rs-aro--7, .rs-aro--8, .rs-aro--9,
    .rs-aro--10, .rs-aro--11, .rs-aro--12, .rs-aro--13, .rs-aro--14,
    .rs-aro--15, .rs-aro--16, .rs-aro--17, .rs-aro--18, .rs-aro--19, .rs-aro--20 {
        display: none !important;
    }
    .rs-fondo::before { display: none !important; }
}

/* Reducir también para usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
    .rs-aro {
        animation: none !important;
        filter: none !important;
    }
}

/* -----------------------------------------------------------------------------
   14) FORMS DENTRO DE COBROS — ocultar el spinner por defecto en submits AJAX
   -----------------------------------------------------------------------------
   Marcar como `data-no-spinner` los forms que sabemos que abren modales,
   no en CSS. Esta sección queda como nota: implementado en spinner-resonum.js.
   --------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   15) FINANZAS · TABS — fondo "glass" para legibilidad sobre fondo animado
   -----------------------------------------------------------------------------
   coros.css usa `background: var(--color-superficie)` (variable legacy que en
   Resonum queda translúcida o no resuelta), dejando los tabs "Movimientos" y
   "Cobros a coreutas" semitransparentes sobre el fondo animado de figuras.
   Aplicamos el mismo patrón glass que usan las tarjetas de coros en
   /coros/seleccion para que se lean siempre claros.
   --------------------------------------------------------------------------- */
.finanzas-tab {
    background: color-mix(in srgb, var(--rs-marfil-50) 55%, transparent);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1.5px solid color-mix(in srgb, var(--rs-petrol-300) 40%, transparent);
    color: var(--rs-tinta-900);
}
.finanzas-tab:hover {
    background: color-mix(in srgb, var(--rs-marfil-50) 70%, transparent);
    border-color: color-mix(in srgb, var(--rs-petrol-500) 70%, transparent);
}
.finanzas-tab-activo,
.finanzas-tab.finanzas-tab-activo:hover {
    background: color-mix(in srgb, var(--rs-marfil-50) 72%, transparent);
    border-color: color-mix(in srgb, var(--rs-coral-500) 75%, transparent);
    border-left: 4px solid var(--rs-coral-500);
    box-shadow: var(--rs-sombra-media);
}
.finanzas-tab-texto strong { color: var(--rs-petrol-900); }
.finanzas-tab-texto small  { color: var(--rs-tinta-500); }

/* -----------------------------------------------------------------------------
   16) BOTONES — texto SIEMPRE blanco/marfil en variantes con fondo coloreado
   -----------------------------------------------------------------------------
   tema-resonum.css define `a { color: coral-600 }` y `a:hover { color: coral-700 }`
   como regla general. Cuando un botón se renderiza como <a> (porque tiene href),
   ese hover global le pinta el texto coral aunque el fondo del botón sea oscuro,
   y se pierde la legibilidad ("Ver pagos", "Asignarme rol", etc.).
   Forzamos el color marfil en TODOS los estados (default/hover/focus/active) y
   tanto para <a> como para <button>, incluyendo el span de contenido y los íconos.
   --------------------------------------------------------------------------- */
.fl-boton--primario,
.fl-boton--primario:hover,
.fl-boton--primario:focus,
.fl-boton--primario:active,
.fl-boton--primario:visited,
.fl-boton--acento,
.fl-boton--acento:hover,
.fl-boton--acento:focus,
.fl-boton--acento:active,
.fl-boton--acento:visited,
.fl-boton--peligro,
.fl-boton--peligro:hover,
.fl-boton--peligro:focus,
.fl-boton--peligro:active,
.fl-boton--peligro:visited,
.fl-boton--destaque,
.fl-boton--destaque:hover,
.fl-boton--destaque:focus,
.fl-boton--destaque:active,
.fl-boton--destaque:visited {
    color: var(--rs-marfil-50) !important;
}
.fl-boton--primario .fl-boton-contenido,
.fl-boton--acento .fl-boton-contenido,
.fl-boton--peligro .fl-boton-contenido,
.fl-boton--destaque .fl-boton-contenido,
.fl-boton--primario svg,
.fl-boton--primario .fl-icono,
.fl-boton--acento svg,
.fl-boton--acento .fl-icono,
.fl-boton--peligro svg,
.fl-boton--peligro .fl-icono,
.fl-boton--destaque svg,
.fl-boton--destaque .fl-icono {
    color: var(--rs-marfil-50) !important;
}

/* Fantasma: el hover global coral se pierde sobre fondos del tema (figuras
   animadas con coral). Mantenemos texto/ícono petrol y solo coloreamos el
   fondo en hover para indicar interactividad. */
.fl-boton--fantasma,
.fl-boton--fantasma:hover,
.fl-boton--fantasma:focus,
.fl-boton--fantasma:active {
    color: var(--rs-petrol-800) !important;
}
.fl-boton--fantasma:hover {
    background: color-mix(in srgb, var(--rs-petrol-100) 70%, transparent);
}
.fl-boton--fantasma svg,
.fl-boton--fantasma .fl-icono {
    color: var(--rs-petrol-700) !important;
}

/* Secundario: el hover de a.fl-boton--secundario tampoco debe caer en coral. */
.fl-boton--secundario,
.fl-boton--secundario:hover,
.fl-boton--secundario:focus,
.fl-boton--secundario:active,
.fl-boton--secundario:visited {
    color: var(--rs-petrol-800) !important;
}
.fl-boton--secundario svg,
.fl-boton--secundario .fl-icono {
    color: var(--rs-petrol-700) !important;
}

/* -----------------------------------------------------------------------------
   17) ESTADO VACÍO — círculo del ícono limpio y legible
   -----------------------------------------------------------------------------
   Flora mete el ícono dentro de un círculo de 64px con
   `background: var(--fl-superficie-muda)` y `color: var(--fl-texto-tenue)`,
   variables que en el tema Resonum quedan grises turbias y hacen que íconos
   con varios paths (receipt, music, etc.) parezcan amontonados sobre el disco.
   Le damos identidad Concert Hall: disco marfil con borde petrol punteado y
   trazo petrol bien contrastado.
   --------------------------------------------------------------------------- */
.fl-vacio-icono {
    background: var(--rs-marfil-100);
    color: var(--rs-petrol-600);
    border: 2px dashed color-mix(in srgb, var(--rs-petrol-400) 70%, transparent);
    width: 72px;
    height: 72px;
    box-shadow: none;
}
/* tema-resonum.css también estiliza el span interno `.fl-vacio .fl-icono`
   con el mismo círculo pentagrama, generando un "doble fondo". Lo
   neutralizamos para que solo el wrapper externo sea el contenedor
   visible y el SVG quede centrado limpio adentro. */
.fl-vacio .fl-icono,
.fl-vacio-icono .fl-icono {
    width: auto;
    height: auto;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.fl-vacio-icono .fl-icono svg,
.fl-vacio-icono svg,
.fl-vacio .fl-icono svg {
    width: 30px;
    height: 30px;
    color: var(--rs-petrol-700) !important;
    stroke-width: 1.75;
}

/* -----------------------------------------------------------------------------
   18) BADGES — emparejar verticalmente ícono + texto
   -----------------------------------------------------------------------------
   Flora aplica `position:relative; top:-1px` al `.fl-badge-texto` para
   centrarlo ópticamente en la píldora, pero no al ícono. Resultado: el ícono
   queda 1px abajo del texto y se ve descentrado (badge "Propietario" en
   /coros). Igualamos el desplazamiento del ícono y le subimos un poco el
   tamaño para que se lea limpio.
   --------------------------------------------------------------------------- */
.fl-badge .fl-icono {
    position: relative;
    top: 0;
    width: 12px;
    height: 12px;
}
.fl-badge--lg .fl-icono {
    width: 14px;
    height: 14px;
}
/* Texto del badge: Flora aplica `top:-1px` para centrarlo ópticamente, pero
   con la tipografía Resonum (Iowan/Palatino + Segoe UI) queda corrido. Le
   damos centrado neto via padding simétrico y line-height controlado, y
   anulamos el offset. */
.fl-badge {
    padding-top: 3px;
    padding-bottom: 3px;
    line-height: 1.1;
    align-items: center;
}
.fl-badge-texto {
    top: 0 !important;
    line-height: 1.1;
    display: inline-flex;
    align-items: center;
}

/* -----------------------------------------------------------------------------
   19) ALERTAS — separación con el contenido siguiente
   -----------------------------------------------------------------------------
   `.fl-alerta` no tiene margin-bottom por default → cuando el partial
   `coros.partials.alertas` se renderiza, la alerta queda pegada al grid de
   abajo (botones Mi agenda/Mi perfil, selección de rol post-crear coro,
   etc.). Una separación estándar resuelve todos los casos.
   --------------------------------------------------------------------------- */
.fl-alerta {
    margin-bottom: 1rem;
}
/* Alertas dentro de tarjetas o que ya traen margen propio inline → respetar */
.fl-alerta[style*="margin-bottom"],
.fl-tarjeta > .fl-alerta:last-child {
    margin-bottom: 0;
}
.fl-vacio-titulo {
    color: var(--rs-petrol-900);
    font-family: var(--rs-fuente-display);
}
.fl-vacio-descripcion {
    color: var(--rs-tinta-500);
}
/* Variantes semánticas: que mantengan su color pero con la nueva identidad */
.fl-vacio--error .fl-vacio-icono {
    background: var(--rs-coral-100);
    border-color: var(--rs-coral-400);
}
.fl-vacio--error .fl-vacio-icono .fl-icono,
.fl-vacio--error .fl-vacio-icono svg {
    color: var(--rs-coral-700) !important;
}
.fl-vacio--exito .fl-vacio-icono {
    background: var(--rs-exito-suave);
    border-color: color-mix(in srgb, var(--rs-exito) 55%, transparent);
}
.fl-vacio--exito .fl-vacio-icono .fl-icono,
.fl-vacio--exito .fl-vacio-icono svg {
    color: #1F5A40 !important;
}

/* -----------------------------------------------------------------------------
   20) BOTÓN FANTASMA DENTRO DEL NAVBAR — fondo oscuro requiere texto claro
   -----------------------------------------------------------------------------
   El override global (sección "Fantasma") fuerza color petrol-800 al texto e
   ícono, pero el navbar elevado tiene fondo petrol oscuro: el "Cerrar sesión"
   quedaba ilegible. Acá restituimos el contraste solo cuando el botón vive
   dentro del navbar.
   --------------------------------------------------------------------------- */
.fl-navbar .fl-boton--fantasma,
.fl-navbar .fl-boton--fantasma:hover,
.fl-navbar .fl-boton--fantasma:focus,
.fl-navbar .fl-boton--fantasma:active,
.coros-header .fl-boton--fantasma,
.coros-header .fl-boton--fantasma:hover,
.coros-header .fl-boton--fantasma:focus,
.coros-header .fl-boton--fantasma:active {
    color: var(--rs-marfil-50) !important;
}
.fl-navbar .fl-boton--fantasma svg,
.fl-navbar .fl-boton--fantasma .fl-icono,
.coros-header .fl-boton--fantasma svg,
.coros-header .fl-boton--fantasma .fl-icono {
    color: var(--rs-marfil-50) !important;
}
.fl-navbar .fl-boton--fantasma:hover,
.coros-header .fl-boton--fantasma:hover {
    background: color-mix(in srgb, var(--rs-marfil-50) 18%, transparent) !important;
}

/* -----------------------------------------------------------------------------
   21) NAVBAR — puntito coral del item activo: subirlo para separarlo del texto
   --------------------------------------------------------------------------- */
.navbar-nav-item--activo::before,
.fl-navbar-nav-item--activo::before,
.flora-navbar-nav-item--activo::before {
    top: 0 !important;
}

/* -----------------------------------------------------------------------------
   21.a) BOTÓN VOLVER — fondo glassmorphism sutil
   -----------------------------------------------------------------------------
   Por defecto era 100% transparente y se perdía sobre el fondo del tema.
   Le damos un fondo marfil semitransparente con blur para que tenga
   presencia visual sin tapar el contenido detrás.
   --------------------------------------------------------------------------- */
.fl-volver {
    background: color-mix(in srgb, var(--rs-marfil-50) 65%, transparent) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid color-mix(in srgb, var(--rs-petrol-300) 40%, transparent) !important;
    border-radius: var(--rs-radio-sm, 6px);
    transition: background 180ms ease, border-color 180ms ease, transform 120ms ease;
}
.fl-volver:hover,
.fl-volver:focus-visible,
.fl-volver:active {
    background: color-mix(in srgb, var(--rs-marfil-50) 85%, transparent) !important;
    border-color: var(--rs-coral-500) !important;
    /* Mantener el translateY(-5px) base que tiene .fl-volver para evitar
       que parezca caer; solo agregamos -4px en X. */
    transform: translate(-4px, -5px) !important;
}

/* -----------------------------------------------------------------------------
   21.b) HEADER DE PÁGINA — separación respecto al navbar
   -----------------------------------------------------------------------------
   El breadcrumb + título del header-pagina quedaban pegados al navbar
   superior. Le damos un pequeño margen superior consistente en todas las
   páginas. La nube de archivos suma un margen adicional desde su vista.
   --------------------------------------------------------------------------- */
.fl-header-pagina {
    margin-top: 0;
}

/* -----------------------------------------------------------------------------
   22) VISOR DE ARCHIVOS — ocultar botón descarga cuando se previsualiza un PDF
   -----------------------------------------------------------------------------
   El visor PDF nativo del navegador (Chrome/Edge) ya ofrece su propio botón
   de descarga, así que escondemos el del header de Flora para no duplicar.
   Usamos :has() para que sea 100% CSS, sin depender del timing del JS.
   --------------------------------------------------------------------------- */
.fl-visor-fondo:has(.fl-visor-pdf) [data-fl-visor-descargar],
.fl-visor-fondo:has(iframe.fl-visor-pdf) [data-fl-visor-descargar] {
    display: none !important;
}

/* -----------------------------------------------------------------------------
   14) VISOR · flechas prev/next ocultas
   -----------------------------------------------------------------------------
   La navegación entre archivos del visor no termina de funcionar bien.
   Hasta resolverlo, escondemos las flechas para no mostrar UI rota.
   --------------------------------------------------------------------------- */
.fl-visor-nav,
[data-fl-visor-prev],
[data-fl-visor-next] {
    display: none !important;
}

/* -----------------------------------------------------------------------------
   15) FONDO · sacar Figura 10 (tresillo de corcheas, 3 pelotitas)
   -----------------------------------------------------------------------------
   No transmite "Resonum" — parece tres globos pegados con una rayita.
   Lo escondemos en todos lados, sin importar el wrapper del fondo.
   --------------------------------------------------------------------------- */
.rs-aro--10 {
    display: none !important;
}

/* -----------------------------------------------------------------------------
   16) MIGAS DE PAN · más respiro respecto del navbar
   -----------------------------------------------------------------------------
   El padding-top del contenedor general quedó compacto para no desperdiciar
   pantalla, pero las migas + botón Volver del header de página quedaron
   muy pegadas al navbar. Le damos margen propio sin tocar el resto.
   --------------------------------------------------------------------------- */
.fl-header-pagina-fila-superior {
    margin-top: var(--fl-sp-4, 1rem);
}

/* -----------------------------------------------------------------------------
   17) NUBE DE ARCHIVOS · header más pegado al navbar
   -----------------------------------------------------------------------------
   En las páginas de nube (`.fl-nube-pagina` envuelve el header-pagina) no
   necesitamos tanto aire: ya hay barra de cuota arriba y mucha info por
   resolver. Le sacamos el margen de migas y hacemos que la cuota apile
   centrada bajo el título a un breakpoint mayor (más rápido).
   --------------------------------------------------------------------------- */
.fl-nube-pagina .fl-header-pagina-fila-superior {
    margin-top: var(--fl-sp-4, 1rem);
}

/* Cuota: siempre debajo del título y a ancho completo, en cualquier
   tamaño de pantalla. Mantiene su background original (la pildorita
   oscura) pero estirada de borde a borde. */
.fl-nube-pagina .fl-header-pagina-acciones {
    position: static;
    transform: none;
    width: 100%;
    justify-content: stretch;
    margin-top: var(--fl-sp-2, .5rem);
}
.fl-nube-pagina .fl-explorador-cuota {
    display: flex;
    width: 100%;
    max-width: none;
}
.fl-nube-pagina .fl-explorador-cuota-detalles {
    flex: 1;
}

/* Quitar el separador inferior (línea petrol + pentagrama decorativo) del
   header-pagina SOLO cuando estamos en la nube. También acercamos el
   listado de archivos a la cuota: el margen global de 2rem queda muy grande
   en este contexto. */
.fl-nube-pagina .fl-header-pagina {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: var(--fl-sp-3, .75rem);
}
.fl-nube-pagina .fl-header-pagina::after {
    display: none;
}


/* =============================================================================
   OVERRIDES MOBILE (≤ 768px)
   Bloque dedicado a arreglos visuales específicos del viewport mobile.
   Las reglas globales del tema asumen pantallas grandes y dejaban tres cosas
   rotas: grids de la landing que NO se apilaban, la nube de archivos con
   altura fija que dejaba un área de scroll muy chica, y el botón flotante
   "volver arriba" superpuesto sobre la navbar inferior de Flora.
   ============================================================================= */
@media (max-width: 768px) {

    /* (a) GRIDS QUE APILAN A 1 COLUMNA EN MOBILE.
       Cubrimos dos casos:
         · clases conocidas (fl-grilla, rs-hero-grid, rs-contacto-grid);
         · grids inline con grid-template-columns "1fr 1fr" o "repeat(2..)",
           que es el patrón típico de "dos columnas" usado en muchas vistas
           (difusión, formularios largos, etc.).
       Flora no define grid-template-columns para fl-grilla--N: solo el
       contenedor base con repeat(12, 1fr). En desktop las tarjetas tienen
       ancho natural alto y entran 3 por fila; en mobile el browser las
       comprime a 2 por fila y se ve mal. Forzamos 1 columna. */
    .fl-grilla,
    .fl-grilla--2,
    .fl-grilla--3,
    .fl-grilla--4,
    .rs-hero-grid,
    .rs-contacto-grid,
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:repeat(2"],
    [style*="grid-template-columns: repeat(2"],
    [style*="grid-template-columns:repeat(3"],
    [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
    }

    /* En el hero la columna visual (tarjeta de logo + onda) puede ocultarse
       en mobile para ganar foco en el copy. Si querés mantenerla visible,
       sacá la regla — pero queda más limpio sin ella. */
    .rs-hero-grid > div:last-child {
        display: none;
    }

    /* (b) NUBE DE ARCHIVOS · en mobile, deshacer el layout full-height del
       body. El esquema original "body height:100vh; overflow:hidden + scroll
       interno en el explorador" dejaba al usuario con un slot chico para
       ver archivos. Liberamos el body para que scrollee natural y solo
       ampliamos el alto mínimo del cuerpo de la tarjeta. Importante: NO
       pisamos el display de .fl-explorador (Flora lo necesita en grid) ni
       el flex de .fl-explorador-principal — pisar esos rompía el render
       de los items y la grilla aparecía como vacía. */
    body:has(.fl-nube-full) {
        height: auto;
        overflow: visible;
        display: block;
    }
    body:has(.fl-nube-full) .flora-main,
    body:has(.fl-nube-full) .fl-contenedor {
        height: auto;
        overflow: visible;
        flex: none;
        display: block;
    }
    .fl-nube-full {
        flex: none;
    }
    .fl-nube-full .fl-tarjeta {
        flex: none;
        overflow: visible;
    }
    .fl-nube-full .fl-tarjeta > .fl-tarjeta-cuerpo {
        flex: none;
        min-height: 100vh; /* área grande para el listado en mobile */
    }
    /* El cuerpo del explorador deja de scrollear internamente: el listado
       se renderiza en flujo y la página scrollea normal. Sin tocar display. */
    .fl-nube-full .fl-explorador-cuerpo {
        overflow: visible;
    }

    /* (c) BOTÓN FLOTANTE "VOLVER ARRIBA" · se superponía sobre la navbar
       inferior de Flora (que en mobile flota abajo). Lo elevamos lo
       suficiente para que quede por encima del navbar sin perder el
       costado derecho de la pantalla. */
    .es-volver-arriba {
        bottom: calc(var(--fl-sp-5, 1.25rem) + 72px);
    }

    /* (d) LANDING HEADER · en mobile apilamos vertical y centrado:
       primero la marca (logo + Resonum + bajada), debajo los dos
       botones (Iniciar sesión + Registrarme), todo al medio. */
    .rs-landing-header .rs-landing-header-fila {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .65rem;
        padding-top: .65rem;
        padding-bottom: .65rem;
    }
    .rs-landing-header .rs-landing-marca {
        justify-content: center;
        text-align: center;
    }
    .rs-landing-header .rs-landing-marca > div {
        text-align: left;
    }
    .rs-landing-header .rs-landing-nav {
        justify-content: center;
    }

    /* (e) HERO de la landing · el header crece en alto cuando apilamos
       marca + botones, así que el padding-top inicial (5rem) ya no
       alcanza y el contenido del hero queda tapado. Empujamos más. */
    .rs-landing-hero {
        padding-top: 8.5rem;
    }
}