/* ==========================================================================
   Flora · overrides para Resonum (mejoras-ui)
   ==========================================================================
   Estos overrides parchean componentes Flora compartidos sin tocar el
   bundle minificado. Se cargan DESPUÉS de flora.min.css.
   ========================================================================== */

/* Selects: forzar paleta clara para que el dropdown nativo del OS sea
   legible aunque el sistema esté en tema oscuro. */
select.fl-campo-entrada,
.fl-tabla-pie-tamano-select,
.fl-tabla-filtro-fila select {
    color-scheme: light;
}
select.fl-campo-entrada option,
.fl-tabla-pie-tamano-select option,
.fl-tabla-filtro-fila select option {
    background: #ffffff;
    color: #1A2E22;
}
select.fl-campo-entrada option:checked,
.fl-tabla-pie-tamano-select option:checked,
.fl-tabla-filtro-fila select option:checked {
    background: #f0e9d5;
    color: #1A2E22;
    font-weight: var(--fl-peso-medio);
}

/* Toolbar de tabla: hueco para el botón Exportar inyectado por
   <x-flora::tabla-datos conExportar> (si Flora ya lo tiene, este selector
   es redundante pero no hace daño). */
.fl-tabla-toolbar-exportar {
    display: inline-flex;
    align-items: center;
    margin-left: var(--fl-sp-2);
}

/* Toast: soporte para acciones inline en el toast (botones a la par del
   mensaje). El JS de mejoras-ui los inyecta. */
.fl-toast-acciones {
    display: flex;
    gap: var(--fl-sp-2);
    margin-top: var(--fl-sp-2);
    flex-wrap: wrap;
}
.fl-toast-accion {
    padding: var(--fl-sp-1) var(--fl-sp-3);
    border-radius: var(--fl-r-sm, 4px);
    font-size: var(--fl-texto-xs);
    font-weight: var(--fl-peso-bold);
    cursor: pointer;
    border: 1px solid transparent;
    transition: background var(--fl-t-rapido), border-color var(--fl-t-rapido);
    font-family: inherit;
    line-height: 1.3;
}
.fl-toast-accion--primario {
    background: var(--fl-acento);
    color: var(--fl-acento-texto-sobre, #fff);
}
.fl-toast-accion--primario:hover {
    background: color-mix(in srgb, var(--fl-acento) 88%, black);
}
.fl-toast-accion--fantasma {
    background: transparent;
    color: var(--fl-texto-suave);
    border-color: var(--fl-borde);
}
.fl-toast-accion--fantasma:hover {
    background: var(--fl-superficie-hover);
    color: var(--fl-texto-fuerte);
}

/* Modal: dos correcciones para que los modales altos no choquen con el navbar.
   1) El fondo centra el modal en TODA la ventana, sin tener en cuenta el
      navbar sticky (56px). Reservamos ese alto arriba para que el modal quede
      centrado en el área DEBAJO del navbar y nunca se le superponga.
   2) Topeamos el alto del modal descontando el navbar, así nunca llega hasta
      arriba; si el contenido no entra, scrollea internamente.
   3) El cuerpo usa justify-content:center con overflow-y:auto, que con
      contenido más alto que la pantalla recorta la parte de arriba y no deja
      scrollear hasta ella (bug clásico de flexbox). Lo alineamos arriba. */
.fl-modal-fondo {
    align-items: center;
    padding-top: calc(56px + var(--fl-sp-3));
}
.fl-modal {
    max-height: calc(100dvh - 56px - var(--fl-sp-6));
}
.fl-modal-cuerpo {
    justify-content: flex-start;
}

/* Mobile: además del navbar superior, está el bottom-nav fijo (~4.5rem). En
   pantallas chicas levantamos el "piso" del modal para que sus botones no
   queden tapados por el bottom-nav, y achicamos su alto para que entre. */
@media (max-width: 768px) {
    .fl-modal-fondo {
        padding-top: var(--fl-sp-3);
        padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
    }
    .fl-modal {
        max-height: calc(100dvh - 5rem - var(--fl-sp-5));
    }
}

/* Celda expandible (ver más / ver menos): el <details> alterna los textos y, al
   abrirse, oculta el preview truncado (queda solo el texto completo). */
.rs-expandible .rs-exp-menos { display: none; }
.rs-expandible[open] .rs-exp-mas { display: none; }
.rs-expandible[open] .rs-exp-preview { display: none; }
.rs-expandible[open] .rs-exp-menos { display: inline; }

/* Acordeón: el header es un gradiente petrol oscuro, pero los iconos vienen
   casi-transparentes (88%/75% de blanco) y se ven apagados. Blanco pleno —
   forzamos también el stroke del <svg> (los iconos son lucide, stroke-based). */
.fl-acordeon-header .fl-icono,
.fl-acordeon-header .fl-icono svg,
.fl-acordeon-chevron,
.fl-acordeon-chevron svg {
    color: #fff !important;
    stroke: #fff !important;
}

/* Grilla de voces del coro: hasta 4 columnas ocupando TODO el ancho; en mobile
   baja a 2 para que los selects no queden ahogados. */
.coro-voces-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}
@media (max-width: 640px) {
    .coro-voces-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Select: la flechita (::after) y el botón X de limpiar quedaban casi pegados
   (12px vs 32px desde la derecha). Separamos: la X más a la izquierda y más
   espacio a la derecha del texto para que no se monten. */
.fl-select-trigger {
    padding-right: 3.5rem;
}
.fl-select-limpiar {
    right: 2.4rem !important;
}

/* Pie de tabla duplicado (arriba + abajo).
   Flora trae estilos para --arriba (border-bottom + radius arriba); aquí
   espejamos para --abajo (border-top + radius abajo). El JS de sincronización
   está en mejoras-ui/js/flora-tabla-pie-doble.js. */
.fl-tabla-pie--abajo {
    border-top: 1px solid var(--fl-borde-sutil);
    border-bottom: 0;
    border-bottom-left-radius: var(--fl-r-md);
    border-bottom-right-radius: var(--fl-r-md);
}