/*
 * Retoques del editor de bloques del panel.
 *
 * Se hace con un CSS suelto y no con un tema de Filament a propósito: un tema
 * arrastra Tailwind, Vite y un `npm run build` a un proyecto que hoy no tiene
 * ni un solo archivo de frontend. Para una veintena de reglas sobre clases que
 * Filament ya expone (`fi-fo-builder-item`, `fi-fo-builder-item-header`), el
 * precio de esa cadena de build no compensa.
 *
 * Se apoya en las variables de Filament (`--gray-*`, `--radius-xl`,
 * `--spacing`) en lugar de en colores literales, para que el panel siga
 * respondiendo al color primario y al modo oscuro sin duplicar la paleta.
 *
 * Todo cuelga de `.fi-fo-builder`: solo afecta al editor de bloques, no a
 * cualquier otro campo del panel.
 */

/*
 * Más aire entre bloques. Con el margen por defecto y todos contraídos, la
 * lista se lee como un bloque único de filas en vez de como piezas
 * independientes de la página.
 */
.fi-fo-builder .fi-fo-builder-items > * + * {
    margin-top: calc(var(--spacing) * 6);
}

/*
 * Sombra y borde más marcados que los de serie: es lo que separa visualmente
 * una tarjeta de la siguiente sobre el fondo gris del panel.
 */
.fi-fo-builder .fi-fo-builder-item {
    box-shadow:
        0 1px 2px 0 color-mix(in oklab, var(--gray-950) 6%, transparent),
        0 6px 16px -6px color-mix(in oklab, var(--gray-950) 18%, transparent);
    --tw-ring-color: color-mix(in oklab, var(--gray-950) 10%, transparent);
}

/*
 * La cabecera con fondo propio hace de asa visible: se distingue de un vistazo
 * dónde acaba un bloque y empieza el siguiente, sobre todo con la lista
 * contraída, que es el estado por defecto.
 */
.fi-fo-builder .fi-fo-builder-item-header {
    background-color: var(--gray-50);
    border-start-start-radius: var(--radius-xl);
    border-start-end-radius: var(--radius-xl);
}

/*
 * Contraído, la cabecera ES la tarjeta entera: se redondean también las
 * esquinas de abajo para que no quede un canto recto colgando.
 */
.fi-fo-builder .fi-fo-builder-item.fi-collapsed .fi-fo-builder-item-header {
    border-end-start-radius: var(--radius-xl);
    border-end-end-radius: var(--radius-xl);
}

/*
 * Abierto, una línea separa la cabecera del contenido editable.
 */
.fi-fo-builder .fi-fo-builder-item:not(.fi-collapsed) .fi-fo-builder-item-header {
    border-bottom: 1px solid color-mix(in oklab, var(--gray-950) 8%, transparent);
}

/*
 * El nombre del tipo de bloque, con algo más de peso: contraído es lo único
 * que identifica la fila.
 */
.fi-fo-builder .fi-fo-builder-item-header-label {
    font-weight: 600;
}

:where(.dark, .dark *) .fi-fo-builder .fi-fo-builder-item {
    box-shadow:
        0 1px 2px 0 color-mix(in oklab, black 40%, transparent),
        0 6px 16px -6px color-mix(in oklab, black 50%, transparent);
    --tw-ring-color: color-mix(in oklab, var(--gray-50) 12%, transparent);
}

:where(.dark, .dark *) .fi-fo-builder .fi-fo-builder-item-header {
    background-color: color-mix(in oklab, var(--gray-50) 4%, transparent);
}

:where(.dark, .dark *) .fi-fo-builder .fi-fo-builder-item:not(.fi-collapsed) .fi-fo-builder-item-header {
    border-bottom-color: color-mix(in oklab, var(--gray-50) 10%, transparent);
}