/* ===================================================================
   MODERNIZACIÓN de Concert Hall — global, 100% reversible.
   Rollback: quitar el <link> de este archivo en header.blade.php.
   NO toca la paleta (marfil/petrol/coral tinteados; cero blanco/negro puro).
   Solo moderniza la EJECUCIÓN: fondo liso, tipografía confiada, más aire,
   headers alineados a la izquierda.
   =================================================================== */

/* ── 1) FONDO: sin figuras, con DEGRADÉ tinteado ──────────────────
   Fuera las figuras musicales animadas; en su lugar un degradé suave
   (petrol arriba-izq + coral abajo-der sobre marfil) que le da
   profundidad y "rompe" el liso, sin ruido. Todo tinteado, nada de blanco. */
.rs-fondo { display: none !important; }
body {
    background-color: var(--rs-marfil-100, #F6F0E1) !important;
    /* Degradé crema → crema (mismo marfil, de claro a más oscuro). Exagerado,
       vertical, todo dentro de la familia marfil. Sin naranja/petrol. */
    background-image:
        linear-gradient(to bottom,
            var(--rs-marfil-50, #FBF7EE) 0%,
            var(--rs-marfil-100, #F6F0E1) 55%,
            var(--rs-marfil-200, #EFE6CF) 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}

/* ── 2) TIPOGRAFÍA CONFIADA ──────────────────────────────────────── */
/* Título de página más grande y firme */
.fl-header-pagina-titulo {
    font-size: clamp(1.65rem, 2.6vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -.015em;
}
/* Números de métricas grandes (dashboard moderno) */
.fl-tarjeta-metrica-valor {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.02em;
}
.fl-tarjeta-metrica-etiqueta { font-size: .82rem; }
/* Títulos de tarjeta un poco más presentes */
.fl-tarjeta-titulo { font-size: 1.1rem; font-weight: 700; }

/* ── 3) MÁS AIRE ─────────────────────────────────────────────────── */
.fl-tarjeta-cuerpo { padding: 1.5rem 1.6rem; }
.fl-tarjeta-cabecera { padding: 1.1rem 1.6rem; }
.fl-tarjeta-metrica { padding: 1.35rem 1.4rem; }
/* Filas de tabla más respiradas */
.fl-tabla tbody td { padding-top: .85rem; padding-bottom: .85rem; }
.fl-tabla thead th { padding-top: .7rem; padding-bottom: .7rem; }
/* Un poco más de separación entre grillas/bloques */
.fl-grilla { gap: 1.25rem; }

/* ── 3b) TABLAS: filas más livianas (la cabecera petrol se mantiene) ──
   Separador hairline entre filas + hover sutil. La cabecera de color
   (petrol) se deja como estaba porque al usuario le gusta. */
.fl-tabla tbody td { border-bottom: 1px solid var(--fl-borde-sutil) !important; }
.fl-tabla tbody tr:hover td {
    background: color-mix(in srgb, var(--rs-petrol-500) 5%, transparent);
}

/* ── 4) HEADERS DE PÁGINA A LA IZQUIERDA ─────────────────────────── */
/* align-items:center → el título + subtítulo quedan centrados verticalmente
   respecto del ícono de la sección (antes quedaban pegados arriba). */
.fl-header-pagina-principal { justify-content: flex-start !important; align-items: center !important; }
.fl-header-pagina-texto { align-items: flex-start !important; text-align: left !important; }
.fl-header-pagina-titulo { text-align: left !important; }
/* El subtítulo se centraba con margin-left/right:auto → lo reseteamos a la izq. */
.fl-header-pagina-subtitulo {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
}

/* ── Empty-states dentro de tarjetas: centrados verticalmente ──────
   La tarjeta se estira a la altura de su vecina; el contenido vacío
   se centra en vez de quedar arriba/abajo. */
.fl-tarjeta-cuerpo:has(.fl-vacio) {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ── 6) INPUTS / FORMULARIOS limpios ──────────────────────────────
   Borde fino tinteado en reposo, fondo marfil (no blanco), radio suave y
   foco con anillo petrol sutil. Cubre los dos sistemas (.form-* y Flora). */
.form-input, .form-textarea, .form-select, .fl-campo-entrada, .fl-select-trigger {
    border: 1px solid var(--fl-borde) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    background: var(--rs-marfil-50, #FBF7EE) !important;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease !important;
}
.form-input:focus, .form-textarea:focus, .form-select:focus,
.fl-campo-entrada:focus, .fl-select--abierto .fl-select-trigger {
    border-color: var(--rs-petrol-500, #1F4E5F) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rs-petrol-500) 14%, transparent) !important;
    outline: none !important;
}

/* ── 7) TOOLBARS con un poco más de aire ─────────────────────────── */
.fl-tabla-toolbar, .fl-explorador-toolbar { padding: .7rem .9rem !important; gap: .6rem !important; }

/* ── 8) MICRO-INTERACCIONES (toque premium) ──────────────────────── */
/* Tarjetas-métrica (son links): leve elevación al hover */
.fl-tarjeta-metrica {
    transition: transform .15s ease, box-shadow .18s ease, border-color .15s ease !important;
}
.fl-tarjeta-metrica:hover {
    transform: translateY(-2px);
    box-shadow: var(--fl-sombra-md);
    border-color: var(--rs-petrol-200, #9DBCC7) !important;
}

/* ── 9) CALLOUTS livianos (info-box) ──────────────────────────────
   Antes: bloque sólido oscuro con texto blanco y negro en el borde.
   Ahora: fondo tinte claro de la paleta + texto oscuro legible + acento
   finito a la izquierda. Sin negro. */
.fl-callout,
.fl-callout--info, .fl-callout--exito, .fl-callout--error, .fl-callout--advertencia {
    color: var(--rs-tinta-700, #2A3845) !important;
    --fl-texto: var(--rs-tinta-700, #2A3845);
    --fl-texto-fuerte: var(--rs-tinta-900, #0A1620);
    --fl-texto-suave: var(--rs-tinta-500, #4F5D6A);
    border: 1px solid var(--fl-borde) !important;
    border-left-width: 4px !important;
    border-left-style: solid !important;
}
.fl-callout                { background: var(--rs-petrol-50, #EAF1F4) !important; border-left-color: var(--rs-petrol-500, #1F4E5F) !important; }
.fl-callout--info          { background: var(--rs-petrol-50, #EAF1F4) !important; border-left-color: var(--rs-petrol-500, #1F4E5F) !important; }
.fl-callout--exito         { background: var(--rs-exito-suave, #E3F2EA) !important; border-left-color: var(--rs-exito, #1F5A40) !important; }
.fl-callout--error         { background: var(--rs-coral-100, #FADCD0) !important; border-left-color: var(--rs-coral-600, #B94732) !important; }
.fl-callout--advertencia   { background: var(--rs-adv-suave, #FBF0D8) !important; border-left-color: var(--rs-adv, #B8860B) !important; }

/* ── 10) NAVBAR: subrayado activo en coral (acento de marca) ──────── */
.fl-navbar-nav-item[aria-current="page"]::after,
.fl-navbar-nav-item--activo::after {
    background: var(--rs-coral-500, #D55F44) !important;
    height: 2.5px !important;
}

/* ── 11) ESTADOS VACÍOS con ilustración propia (pentagrama + notas) ── */
.fl-vacio-ilustracion {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 160px; height: 116px; margin-bottom: .25rem;
}
.fl-vacio-deco { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fl-vacio-deco-staff path { stroke: var(--rs-petrol-300, #9DBCC7); stroke-width: 1.5; fill: none; opacity: .45; }
.fl-vacio-deco-nota { opacity: .5; }
.fl-vacio-deco-nota--coral  { fill: var(--rs-coral-400, #E47C5F); }
.fl-vacio-deco-nota--petrol { fill: var(--rs-petrol-400, #3F7384); }
.fl-vacio-ilustracion .fl-vacio-icono {
    position: relative; z-index: 1; margin: 0 !important;
    width: 62px !important; height: 62px !important;
    background: var(--rs-petrol-50, #EAF1F4) !important;
    color: var(--rs-petrol-500, #1F4E5F) !important;
    box-shadow: 0 10px 24px -12px rgba(11, 35, 48, .4);
}
.fl-vacio-ilustracion .fl-vacio-icono svg { width: 28px; height: 28px; }

/* ── 12) TOASTS: superficie marfil + sombra premium + acento marcado ── */
.fl-toast {
    background: var(--rs-marfil-50, #FBF7EE) !important;
    border: 1px solid var(--rs-tinta-200, #C9CFD4) !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 34px -14px rgba(11, 35, 48, .32) !important;
}
.fl-toast--exito       { border-left: 4px solid var(--rs-exito, #1F5A40) !important; }
.fl-toast--error       { border-left: 4px solid var(--rs-coral-600, #B94732) !important; }
.fl-toast--info,
.fl-toast--destaque    { border-left: 4px solid var(--rs-petrol-500, #1F4E5F) !important; }
.fl-toast--advertencia { border-left: 4px solid var(--rs-adv, #B8860B) !important; }

/* ── 13) AVATARES: 6 colores derivados de la paleta (no arcoíris) ──── */
[data-fl-avatar-color="1"] { background: var(--rs-petrol-100, #C9DCE2) !important; color: var(--rs-petrol-700, #11303D) !important; }
[data-fl-avatar-color="2"] { background: var(--rs-coral-100, #FADCD0) !important; color: var(--rs-coral-700, #93372A) !important; }
[data-fl-avatar-color="3"] { background: var(--rs-exito-suave, #E3F2EA) !important; color: #1F5A40 !important; }
[data-fl-avatar-color="4"] { background: var(--rs-adv-suave, #FBF0D8) !important; color: #6E4612 !important; }
[data-fl-avatar-color="5"] { background: var(--rs-petrol-200, #9DBCC7) !important; color: var(--rs-petrol-800, #0B2330) !important; }
[data-fl-avatar-color="6"] { background: var(--rs-coral-200, #F5BCA8) !important; color: var(--rs-coral-800, #6E2A22) !important; }

/* ── 5) Barra expandir/contraer: más finita, flecha chica, hover de COLOR ── */
.flora-toggle-navbar {
    height: 9px !important;
    min-height: 9px !important;
}
.flora-toggle-navbar:hover {
    height: 9px !important;           /* no crece */
    background: var(--rs-coral-600, #B94732) !important;  /* color de la paleta, no negro */
}
.flora-toggle-navbar .fl-icono { width: 9px !important; height: 9px !important; }

/* ── Ícono de sección (header de página): el CUADRADO +20%, ícono interno +10% ── */
.fl-header-pagina-icono { width: 67px; height: 67px; }
.fl-header-pagina-icono .fl-icono,
.fl-header-pagina-icono > svg { transform: scale(1.1); }