/*
 * ClubPro — formularios, campos, modales y notificaciones (Filament v5).
 *
 * Intención: el coordinador de la comisión llena la planilla de la comisión desde la PC de la oficina.
 * Misma familia que la app "La lista de la pichanga":
 *  - Cada sección de un formulario es un PASO NUMERADO de la lista: numeral condensado (Archivo 800 al 72 %)
 *    en un cuadro marino de 32 px, contado por formulario con un contador CSS.
 *  - Campos rellenos azulados de 46 px, radio 12, sin borde en reposo; al escribir se vuelven hoja blanca con
 *    borde verde y anillo. Iconos, prefijos y chevrones en verde tinta.
 *  - Etiquetas 13.5 px / 700 en texto principal; asterisco verde. Ayudas 12.5 px secundarias.
 *  - Barra de acciones del formulario fija abajo, como el pie fijo de la app.
 *
 * Tokens propios con prefijo --fo- (no se tocan los de base.css).
 */

:root {
    --fo-campo: var(--gray-100); /* #eef1f8: relleno azulado */
    --fo-campo-hover: color-mix(in oklab, var(--gray-100) 70%, var(--gray-200));
    --fo-campo-quieto: color-mix(in oklab, var(--gray-100) 50%, #fff);
    --fo-borde: var(--gray-300); /* #c3cae0 */
    --fo-borde-hover: var(--gray-300);
    --fo-foco: var(--primary-600);
    --fo-anillo: color-mix(in oklab, var(--primary-600) 15%, transparent);
    --fo-error: var(--danger-600);
    --fo-error-fondo: color-mix(in oklab, var(--danger-50) 70%, #fff);
    --fo-anillo-error: color-mix(in oklab, var(--danger-600) 15%, transparent);
    --fo-texto: var(--gray-950);
    --fo-etiqueta: #0e1430;
    --fo-ayuda: var(--gray-500);
    --fo-placeholder: color-mix(in oklab, var(--gray-400) 35%, var(--gray-500));
    --fo-tinta: var(--primary-700); /* iconos, prefijos y chevrones */
    --fo-hoja: #fff;
    --fo-hoja-2: var(--gray-50);
    --fo-cabecera: color-mix(in oklab, var(--gray-50) 70%, #fff);
    --fo-linea: var(--cp-line, rgb(10 16 51 / 0.07));
    --fo-icono-fondo: var(--primary-50);
    --fo-icono: var(--primary-600);
    --fo-marino: #0a1033;
    --fo-sobre-marino: #f3f5ff;
    --fo-sobre-marino-2: #aab3dd;
    --fo-velo: rgb(10 16 51 / 0.52);
    --fo-ease: var(--cp-ease, cubic-bezier(0.23, 1, 0.32, 1));
    --fo-chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%231a40b4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    --fo-ico-fecha: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231a40b4' stroke-width='1.8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5'/%3E%3C/svg%3E");
    --fo-ico-hora: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231a40b4' stroke-width='1.8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3C/svg%3E");
}

.dark {
    --fo-campo: var(--gray-800); /* #161d45 */
    --fo-campo-hover: color-mix(in oklab, var(--gray-800) 80%, var(--gray-700));
    --fo-campo-quieto: color-mix(in oklab, var(--gray-900) 70%, var(--gray-800));
    --fo-borde: color-mix(in oklab, var(--gray-700) 60%, var(--gray-500));
    --fo-borde-hover: color-mix(in oklab, var(--gray-700) 60%, var(--gray-500));
    --fo-foco: var(--primary-400);
    --fo-anillo: color-mix(in oklab, var(--primary-500) 28%, transparent);
    --fo-error: var(--danger-400);
    --fo-error-fondo: color-mix(in oklab, var(--gray-800) 82%, var(--danger-500));
    --fo-anillo-error: color-mix(in oklab, var(--danger-400) 24%, transparent);
    --fo-texto: #eef0fb;
    --fo-etiqueta: #eef0fb;
    --fo-ayuda: var(--gray-400);
    --fo-placeholder: color-mix(in oklab, var(--gray-400) 85%, var(--gray-500));
    --fo-tinta: var(--primary-300);
    --fo-hoja: var(--gray-900);
    --fo-hoja-2: color-mix(in oklab, var(--gray-900) 60%, var(--gray-800));
    --fo-cabecera: color-mix(in oklab, var(--gray-900) 75%, var(--gray-800));
    --fo-linea: var(--cp-line, rgb(255 255 255 / 0.06));
    --fo-icono-fondo: rgb(16 185 129 / 0.18);
    --fo-icono: var(--primary-300);
    --fo-velo: rgb(3 5 20 / 0.74);
    --fo-chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2393b0fa' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    --fo-ico-fecha: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2393b0fa' stroke-width='1.8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5'/%3E%3C/svg%3E");
    --fo-ico-hora: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2393b0fa' stroke-width='1.8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3C/svg%3E");
}

/* ======================================================================
 * Secciones: pasos numerados de la lista
 * ====================================================================== */
.fi-body .fi-sc-form .fi-section:not(.fi-section-not-contained):not(.fi-aside) {
    border-radius: 16px;
    background-color: var(--fo-hoja);
    box-shadow: var(--cp-card-shadow);
}

.fi-body .fi-sc-form .fi-section.fi-aside:not(.fi-section-not-contained) > .fi-section-content-ctn {
    border-radius: 16px;
    background-color: var(--fo-hoja);
    box-shadow: var(--cp-card-shadow);
}

.fi-body .fi-sc-form .fi-section:not(.fi-section-not-contained):not(.fi-aside) > .fi-section-header {
    padding: 16px 24px;
    align-items: center;
    gap: 14px;
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    background-color: var(--fo-cabecera);
}

.fi-body .fi-sc-form .fi-section:not(.fi-section-not-contained):not(.fi-aside).fi-collapsed > .fi-section-header {
    border-radius: 16px;
}

.fi-body .fi-sc-form .fi-section:not(.fi-section-not-contained):not(.fi-aside).fi-section-has-header:not(.fi-collapsed) > .fi-section-content-ctn {
    border-top: 1px solid var(--fo-linea);
}

.fi-body .fi-sc-form .fi-section:not(.fi-section-not-contained):not(.fi-divided) > .fi-section-content-ctn > .fi-section-content {
    padding: 24px;
}

.fi-body .fi-sc-form .fi-section:not(.fi-section-not-contained) > .fi-section-content-ctn > .fi-section-footer {
    padding: 14px 24px;
    border-top-color: var(--fo-linea);
}

/* El numeral: contador por formulario (página o modal) */
.fi-sc-form,
.fi-modal-window .fi-modal-content {
    counter-reset: fo-paso;
}

.fi-body :is(.fi-sc-form, .fi-modal-window) .fi-section:not(.fi-section-not-contained):not(.fi-aside) > .fi-section-header::before {
    counter-increment: fo-paso;
    content: counter(fo-paso);
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background-color: var(--fo-marino);
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    font-weight: 800;
    font-stretch: 72%;
    font-variation-settings: 'wdth' 72;
    font-variant-numeric: tabular-nums;
    padding-bottom: 1px;
}

.dark .fi-body :is(.fi-sc-form, .fi-modal-window) .fi-section:not(.fi-section-not-contained):not(.fi-aside) > .fi-section-header::before,
.dark :is(.fi-sc-form, .fi-modal-window) .fi-section:not(.fi-section-not-contained):not(.fi-aside) > .fi-section-header::before {
    background-color: var(--gray-700);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
}

/* El icono de la sección pasa a la derecha, tenue */
.fi-body :is(.fi-sc-form, .fi-modal-window) .fi-section > .fi-section-header > .fi-icon {
    order: 5;
    width: 20px;
    height: 20px;
    margin: 0;
    align-self: center;
    color: var(--gray-400);
}

.dark .fi-body :is(.fi-sc-form, .fi-modal-window) .fi-section > .fi-section-header > .fi-icon {
    color: var(--gray-500);
}

.fi-body :is(.fi-sc-form, .fi-modal-window) .fi-section > .fi-section-header > .fi-section-collapse-btn {
    order: 6;
}

.fi-body :is(.fi-sc-form, .fi-modal-window) .fi-section-header-text-ctn {
    gap: 2px;
}

.fi-body :is(.fi-sc-form, .fi-modal-window) .fi-section-header-heading {
    font-size: 1.0625rem;
    line-height: 1.25;
    font-weight: 800;
    font-stretch: 90%;
    font-variation-settings: 'wdth' 90;
    letter-spacing: -0.01em;
    color: var(--fo-texto);
    text-wrap: balance;
}

.fi-body :is(.fi-sc-form, .fi-modal-window) .fi-section-header-description {
    font-size: 0.84375rem;
    line-height: 1.4;
    color: var(--fo-ayuda);
    text-wrap: pretty;
}

/* Colapsables: chevrón claro, gira con suavidad */
.fi-body .fi-sc-form .fi-section.fi-collapsible > .fi-section-header {
    transition: background-color 120ms var(--fo-ease);
}

.fi-body .fi-sc-form .fi-section.fi-collapsible > .fi-section-header:hover {
    background-color: var(--fo-hoja-2);
}

.fi-body .fi-sc-form .fi-section > .fi-section-header > .fi-section-collapse-btn {
    color: var(--fo-tinta);
    transition: transform 200ms var(--fo-ease), color 120ms var(--fo-ease);
}

/* Secciones no contenidas (dentro de otra hoja) */
.fi-body .fi-sc-form .fi-section.fi-section-not-contained > .fi-section-header .fi-section-header-heading {
    font-size: 0.9375rem;
}

/* Dentro de un modal, repeater o builder: sin hoja propia, solo el paso y la regla (nada de tarjetas en tarjetas) */
.fi-body .fi-modal-window .fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-body .fi-fo-repeater-item .fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-body .fi-fo-builder-item .fi-section:not(.fi-section-not-contained):not(.fi-aside) {
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding-top: 20px;
    border-top: 1px solid var(--fo-linea);
}

.fi-body .fi-modal-window .fi-section:not(.fi-section-not-contained):not(.fi-aside) > .fi-section-header,
.fi-body .fi-fo-repeater-item .fi-section:not(.fi-section-not-contained):not(.fi-aside) > .fi-section-header,
.fi-body .fi-fo-builder-item .fi-section:not(.fi-section-not-contained):not(.fi-aside) > .fi-section-header {
    padding: 0 0 18px;
    gap: 14px;
    align-items: center;
    border-bottom: 0;
    border-radius: 0;
    background: transparent;
}

.fi-body .fi-modal-window .fi-section:not(.fi-section-not-contained):not(.fi-aside).fi-section-has-header:not(.fi-collapsed) > .fi-section-content-ctn,
.fi-body .fi-fo-repeater-item .fi-section:not(.fi-section-not-contained):not(.fi-aside).fi-section-has-header:not(.fi-collapsed) > .fi-section-content-ctn,
.fi-body .fi-fo-builder-item .fi-section:not(.fi-section-not-contained):not(.fi-aside).fi-section-has-header:not(.fi-collapsed) > .fi-section-content-ctn {
    border-top: 0;
}

.fi-body .fi-modal-window .fi-section:not(.fi-section-not-contained):not(.fi-divided) > .fi-section-content-ctn > .fi-section-content,
.fi-body .fi-fo-repeater-item .fi-section:not(.fi-section-not-contained):not(.fi-divided) > .fi-section-content-ctn > .fi-section-content,
.fi-body .fi-fo-builder-item .fi-section:not(.fi-section-not-contained):not(.fi-divided) > .fi-section-content-ctn > .fi-section-content {
    padding: 0 0 4px;
}

/* Fieldset */
.fi-fieldset {
    border-color: var(--fo-borde);
    border-radius: 12px;
}

.fi-fieldset > legend {
    font-size: 0.84375rem;
    font-weight: 700;
    color: var(--fo-etiqueta);
}

/* ======================================================================
 * Campo: etiqueta, ayuda, error
 * ====================================================================== */
.fi-fo-field {
    row-gap: 8px;
}

.fi-fo-field .fi-fo-field-label-content {
    font-size: 0.84375rem;
    line-height: 1.35;
    font-weight: 700;
    color: var(--fo-etiqueta);
}

.fi-fo-field .fi-fo-field-label-content .fi-fo-field-label-required-mark {
    margin-inline-start: 3px;
    font-size: 0.875rem;
    font-weight: 800;
    vertical-align: baseline;
    top: 0;
    color: var(--primary-600);
}

.dark .fi-fo-field .fi-fo-field-label-content .fi-fo-field-label-required-mark {
    color: var(--primary-400);
}

.fi-fo-field [id$='-helper-text'] .fi-sc-text,
.fi-fo-field-content-col > .fi-sc .fi-sc-text {
    font-size: 0.78125rem;
    line-height: 1.45;
    color: var(--fo-ayuda);
    text-wrap: pretty;
}

.fi-fo-field .fi-fo-field-wrp-error-message,
.fi-fo-file-upload .fi-fo-file-upload-error-message {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.8125rem;
    line-height: 1.4;
    font-weight: 650;
    color: var(--danger-700);
    text-wrap: pretty;
}

.dark .fi-fo-field .fi-fo-field-wrp-error-message,
.dark .fi-fo-file-upload .fi-fo-file-upload-error-message {
    color: var(--danger-400);
}

.fi-fo-field .fi-fo-field-wrp-error-message::before {
    content: '!';
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    border-radius: 50%;
    background-color: currentColor;
    font-size: 0.6875rem;
    font-weight: 800;
    line-height: 1;
    color: var(--danger-600);
    -webkit-text-fill-color: #fff;
}

.dark .fi-fo-field .fi-fo-field-wrp-error-message::before {
    color: var(--danger-500);
}

/* ======================================================================
 * Control: campo relleno azulado de 46 px
 * ====================================================================== */
.fi-input-wrp {
    min-height: 46px;
    border-radius: 12px;
    background-color: var(--fo-campo);
    box-shadow: inset 0 0 0 1.5px transparent;
    transition:
        box-shadow 140ms var(--fo-ease),
        background-color 140ms var(--fo-ease);
}

.fi-input-wrp:not(.fi-disabled):not(.fi-invalid):hover {
    box-shadow: inset 0 0 0 1.5px var(--fo-borde-hover);
}

.fi-input-wrp:not(.fi-disabled):not(:has(.fi-ac-action:focus)):focus-within {
    background-color: var(--fo-hoja);
    box-shadow:
        inset 0 0 0 1.5px var(--fo-foco),
        0 0 0 4px var(--fo-anillo);
}

/* Error: fondo rojo muy suave + borde rojo */
.fi-input-wrp.fi-invalid,
.fi-input-wrp.fi-invalid:hover {
    background-color: var(--fo-error-fondo);
    box-shadow: inset 0 0 0 1.5px var(--fo-error);
}

.fi-input-wrp.fi-invalid:not(.fi-disabled):focus-within {
    background-color: var(--fo-hoja);
    box-shadow:
        inset 0 0 0 1.5px var(--fo-error),
        0 0 0 4px var(--fo-anillo-error);
}

/* Deshabilitado: tono lavado, borde punteado de regla, cursor quieto */
.fi-input-wrp.fi-disabled {
    background-color: var(--fo-campo-quieto);
    box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--fo-borde) 45%, transparent);
    cursor: not-allowed;
}

.fi-input-wrp.fi-disabled :is(input, select, textarea, button) {
    cursor: not-allowed;
}

/* Solo lectura (no el disparador del datepicker, que es readonly por diseño): "impreso" en la hoja */
.fi-input-wrp:not(.fi-disabled):has(> .fi-input-wrp-content-ctn > input.fi-input[readonly]),
.fi-input-wrp:not(.fi-disabled):has(textarea[readonly]) {
    background-color: transparent;
    box-shadow: inset 0 0 0 1.5px var(--fo-linea);
}

.fi-input-wrp:has(> .fi-input-wrp-content-ctn > input.fi-input[readonly]) input.fi-input,
.fi-input-wrp textarea[readonly] {
    color: var(--gray-600);
}

.dark .fi-input-wrp:has(> .fi-input-wrp-content-ctn > input.fi-input[readonly]) input.fi-input,
.dark .fi-input-wrp textarea[readonly] {
    color: var(--gray-300);
}

/* Texto dentro del control: 15 px / 500 en 46 px */
.fi-input-wrp input.fi-input,
.fi-input-wrp select.fi-select-input,
.fi-select-input .fi-select-input-btn,
.fi-fo-date-time-picker .fi-fo-date-time-picker-display-text-input,
.fi-fo-textarea textarea {
    font-size: 0.9375rem;
    line-height: 1.5rem;
    font-weight: 500;
    color: var(--fo-texto);
}

.fi-input-wrp input.fi-input,
.fi-fo-date-time-picker .fi-fo-date-time-picker-display-text-input {
    padding-block: 11px;
    padding-inline: 14px;
}

.fi-input-wrp select.fi-select-input {
    padding-block: 11px;
    padding-inline-start: 14px;
    padding-inline-end: 40px;
    background-image: var(--fo-chevron);
    background-position: right 0.75rem center;
    background-size: 1.25em 1.25em;
}

.fi-select-input .fi-select-input-btn {
    min-height: 46px;
    padding-block: 11px;
    padding-inline-start: 14px;
    background-image: var(--fo-chevron);
    background-position: right 0.75rem center;
    background-size: 1.25em 1.25em;
    border-radius: 12px;
}

.fi-select-input div[x-ref='select'] {
    min-height: 46px;
}

.fi-select-input .fi-select-input-value-remove-btn {
    inset-inline-end: 2.25rem;
    color: var(--fo-tinta);
    opacity: 0.7;
}

.fi-select-input .fi-select-input-ctn-multiple .fi-select-input-value-ctn {
    min-height: 46px;
    padding-block: 9px;
    padding-inline-start: 10px;
}

.fi-fo-textarea textarea {
    padding: 12px 14px;
    line-height: 1.5;
}

.fi-fo-textarea:not(.fi-autosizable) textarea {
    min-height: 96px;
}

/* Placeholder con contraste suficiente */
.fi-input-wrp input.fi-input::placeholder,
.fi-fo-textarea textarea::placeholder,
.fi-fo-date-time-picker .fi-fo-date-time-picker-display-text-input::placeholder {
    color: var(--fo-placeholder);
    -webkit-text-fill-color: var(--fo-placeholder);
    font-weight: 400;
    opacity: 1;
}

.fi-select-input .fi-select-input-placeholder {
    color: var(--fo-placeholder);
    font-weight: 400;
}

/* Select nativo sin valor: el texto "Seleccione una opción" se lee como placeholder */
.fi-input-wrp select.fi-select-input:has(option[value='']:checked) {
    color: var(--fo-placeholder);
    font-weight: 400;
}

.fi-input-wrp select.fi-select-input option {
    color: var(--fo-texto);
}

/* Fechas y horas nativas: icono en verde tinta */
.dark .fi-input-wrp input.fi-input {
    color-scheme: dark;
}

.fi-input-wrp input.fi-input::-webkit-calendar-picker-indicator {
    width: 18px;
    height: 18px;
    padding: 2px;
    border-radius: 6px;
    cursor: pointer;
    color: transparent;
    opacity: 1;
    background: var(--fo-ico-fecha) center / 18px no-repeat;
}

.fi-input-wrp input[type='time'].fi-input::-webkit-calendar-picker-indicator {
    background-image: var(--fo-ico-hora);
}

.fi-input-wrp input.fi-input::-webkit-calendar-picker-indicator:hover {
    background-color: var(--fo-icono-fondo);
}

.fi-input-wrp input:is([type='date'], [type='time'], [type='datetime-local'], [type='number']).fi-input {
    font-variant-numeric: tabular-nums;
}

/* Prefijos y sufijos integrados en el mismo control (S/, iconos) en verde tinta */
.fi-input-wrp .fi-input-wrp-prefix:not(.fi-inline) {
    border-inline-end: 0;
    padding-inline-start: 14px;
    padding-inline-end: 0;
}

.fi-input-wrp .fi-input-wrp-suffix:not(.fi-inline) {
    border-inline-start: 0;
    padding-inline-start: 0;
    padding-inline-end: 14px;
}

.fi-input-wrp .fi-input-wrp-prefix:not(.fi-inline) + .fi-input-wrp-content-ctn input.fi-input {
    padding-inline-start: 8px;
}

.fi-input-wrp .fi-input-wrp-label {
    font-size: 0.9375rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    color: var(--fo-tinta);
}

.fi-input-wrp .fi-input-wrp-prefix > .fi-icon,
.fi-input-wrp .fi-input-wrp-suffix > .fi-icon {
    color: var(--fo-tinta);
}

/* ======================================================================
 * Select con búsqueda: desplegable y chips
 * ====================================================================== */
.fi-select-input .fi-dropdown-panel,
.fi-fo-builder .fi-dropdown-panel {
    margin-top: 4px;
    padding: 4px;
    border-radius: 12px;
    background-color: var(--fo-hoja);
    box-shadow:
        0 0 0 1px var(--fo-borde),
        0 10px 28px -10px rgb(10 16 51 / 0.22),
        0 2px 6px -2px rgb(10 16 51 / 0.08);
}

.dark .fi-select-input .fi-dropdown-panel,
.dark .fi-fo-builder .fi-dropdown-panel {
    background-color: color-mix(in oklab, var(--gray-900) 70%, var(--gray-800));
    box-shadow:
        0 0 0 1px rgb(255 255 255 / 0.1),
        0 16px 32px -12px rgb(0 0 0 / 0.6);
}

.fi-select-input .fi-select-input-options-ctn,
.fi-select-input .fi-select-input-option-group {
    border: 0;
}

.fi-select-input .fi-select-input-options-ctn > * + *,
.fi-select-input .fi-select-input-option-group > * + * {
    border-top-width: 0;
}

.fi-select-input .fi-dropdown-list {
    padding: 0;
    gap: 1px;
}

.fi-select-input .fi-dropdown-list-item {
    min-height: 36px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 0.9375rem;
    color: var(--fo-texto);
}

.fi-select-input .fi-dropdown-list-item:not(.fi-disabled):is(:hover, :focus-visible) {
    background-color: var(--fo-campo);
}

.fi-select-input .fi-dropdown-list-item.fi-selected {
    background-color: var(--fo-icono-fondo);
    color: var(--primary-700);
    font-weight: 650;
}

.dark .fi-select-input .fi-dropdown-list-item.fi-selected {
    color: var(--primary-200);
}

.fi-select-input .fi-select-input-search-ctn {
    margin: -4px -4px 4px;
    padding: 6px;
    border-bottom: 1px solid var(--fo-linea);
    background-color: inherit;
    border-radius: 12px 12px 0 0;
}

.fi-select-input .fi-select-input-search-ctn input.fi-input {
    border-radius: 8px;
    background-color: var(--fo-campo);
    padding-block: 7px;
    font-size: 0.875rem;
}

.fi-select-input .fi-select-input-option-group .fi-dropdown-header {
    padding: 8px 10px 4px;
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--fo-ayuda);
}

.fi-select-input .fi-select-input-message {
    font-size: 0.875rem;
    color: var(--fo-ayuda);
}

/* Chips del multiselect: radio 6 px, verde suave */
.fi-select-input .fi-select-input-value-badges-ctn {
    gap: 6px;
}

.fi-select-input .fi-select-input-value-badges-ctn .fi-badge {
    min-height: 26px;
    padding-inline: 8px 4px;
    border-radius: 6px;
    background-color: var(--fo-icono-fondo);
    color: var(--primary-700);
    box-shadow: none;
    font-size: 0.8125rem;
    font-weight: 650;
}

.dark .fi-select-input .fi-select-input-value-badges-ctn .fi-badge {
    color: var(--primary-200);
}

.fi-select-input .fi-select-input-value-badges-ctn .fi-badge .fi-badge-delete-btn {
    border-radius: 4px;
    opacity: 0.75;
}

.fi-select-input .fi-select-input-value-badges-ctn .fi-badge .fi-badge-delete-btn:hover {
    opacity: 1;
}

/* ======================================================================
 * Datepicker de Filament: desplegable con el estilo del sistema
 * ====================================================================== */
.fi-fo-date-time-picker .fi-fo-date-time-picker-panel {
    margin-top: 6px;
    padding: 14px;
    border-radius: 14px;
    background-color: var(--fo-hoja);
    box-shadow:
        0 0 0 1px var(--fo-borde),
        0 14px 32px -12px rgb(10 16 51 / 0.24),
        0 2px 6px -2px rgb(10 16 51 / 0.08);
}

.dark .fi-fo-date-time-picker .fi-fo-date-time-picker-panel {
    background-color: color-mix(in oklab, var(--gray-900) 70%, var(--gray-800));
    box-shadow:
        0 0 0 1px rgb(255 255 255 / 0.1),
        0 18px 36px -12px rgb(0 0 0 / 0.6);
}

.fi-fo-date-time-picker .fi-fo-date-time-picker-month-select {
    font-size: 0.9375rem;
    font-weight: 750;
    font-stretch: 90%;
    text-transform: capitalize;
    color: var(--fo-texto);
    background-color: transparent;
}

.fi-fo-date-time-picker .fi-fo-date-time-picker-year-input {
    font-size: 0.9375rem;
    font-weight: 800;
    font-stretch: 72%;
    font-variant-numeric: tabular-nums;
    color: var(--fo-texto);
}

.fi-fo-date-time-picker .fi-fo-date-time-picker-calendar-header-day {
    font-size: 0.75rem;
    font-weight: 650;
    text-transform: capitalize;
    color: var(--fo-ayuda);
}

.fi-fo-date-time-picker .fi-fo-date-time-picker-calendar-day {
    min-width: 34px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    line-height: 2.25rem;
    transition: background-color 100ms var(--fo-ease);
}

.fi-fo-date-time-picker .fi-fo-date-time-picker-calendar-day:not(.fi-disabled):is(:hover, :focus-visible) {
    background-color: var(--fo-campo);
}

.fi-fo-date-time-picker .fi-fo-date-time-picker-calendar-day.fi-fo-date-time-picker-calendar-day-today:not(.fi-selected) {
    font-weight: 800;
    color: var(--primary-700);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary-600) 35%, transparent);
}

.dark .fi-fo-date-time-picker .fi-fo-date-time-picker-calendar-day.fi-fo-date-time-picker-calendar-day-today:not(.fi-selected) {
    color: var(--primary-300);
}

.fi-fo-date-time-picker .fi-fo-date-time-picker-calendar-day.fi-selected,
.fi-fo-date-time-picker .fi-fo-date-time-picker-calendar-day.fi-selected:is(:hover, :focus-visible) {
    background-color: var(--primary-600);
    color: #fff;
    font-weight: 750;
}

.dark .fi-fo-date-time-picker .fi-fo-date-time-picker-calendar-day.fi-selected {
    background-color: var(--primary-500);
    color: #052e22;
}

.fi-fo-date-time-picker .fi-fo-date-time-picker-time-inputs {
    padding-top: 10px;
    border-top: 1px solid var(--fo-linea);
}

.fi-fo-date-time-picker .fi-fo-date-time-picker-time-inputs input {
    height: 34px;
    border-radius: 8px;
    background-color: var(--fo-campo);
    font-size: 1rem;
    font-weight: 800;
    font-stretch: 72%;
    font-variant-numeric: tabular-nums;
    color: var(--fo-texto);
}

/* ======================================================================
 * Toggle, checkbox y radio
 * ====================================================================== */
.fi-toggle {
    width: 44px;
    height: 24px;
    background-color: var(--gray-300);
    transition: background-color 160ms var(--fo-ease), box-shadow 120ms var(--fo-ease);
}

.dark .fi-toggle {
    background-color: var(--gray-700);
}

.fi-toggle:not(.fi-toggle-on):hover {
    background-color: color-mix(in oklab, var(--gray-300) 60%, var(--gray-400));
}

.fi-toggle.fi-toggle-on,
.fi-toggle.fi-toggle-on.fi-color {
    background-color: var(--primary-600);
}

.dark .fi-toggle.fi-toggle-on,
.dark .fi-toggle.fi-toggle-on.fi-color {
    background-color: var(--primary-600); /* el pulgar blanco no contrasta sobre 500 */
}

.fi-toggle > :first-child {
    box-shadow: 0 1px 3px rgb(10 16 51 / 0.25), 0 1px 1px rgb(10 16 51 / 0.08);
    transition: transform 180ms var(--fo-ease);
}

.fi-toggle:focus-visible {
    box-shadow: 0 0 0 4px var(--fo-anillo);
    --tw-ring-shadow: 0 0 #0000;
    --tw-ring-offset-shadow: 0 0 #0000;
}

.fi-fo-field-label:has(> .fi-toggle) {
    align-items: center;
    gap: 12px;
}

.fi-fo-field input[type='checkbox'].fi-checkbox-input,
.fi-fo-field input[type='radio'].fi-radio-input,
.fi-modal input[type='checkbox'].fi-checkbox-input {
    width: 20px;
    height: 20px;
    background-color: var(--fo-hoja);
    background-size: 100% 100%;
    box-shadow: inset 0 0 0 1.5px var(--fo-borde);
    transition: background-color 100ms var(--fo-ease), box-shadow 100ms var(--fo-ease);
}

.fi-fo-field input[type='checkbox'].fi-checkbox-input,
.fi-modal input[type='checkbox'].fi-checkbox-input {
    border-radius: 6px;
}

.fi-fo-field input[type='checkbox'].fi-checkbox-input:hover:not(:checked):not(:disabled),
.fi-fo-field input[type='radio'].fi-radio-input:hover:not(:checked):not(:disabled) {
    box-shadow: inset 0 0 0 1.5px var(--fo-foco);
}

.fi-fo-field input[type='checkbox'].fi-checkbox-input:is(:checked, :indeterminate),
.fi-fo-field input[type='radio'].fi-radio-input:checked,
.fi-modal input[type='checkbox'].fi-checkbox-input:is(:checked, :indeterminate) {
    background-color: var(--primary-600);
    box-shadow: none;
}

.dark .fi-fo-field input[type='checkbox'].fi-checkbox-input:is(:checked, :indeterminate),
.dark .fi-fo-field input[type='radio'].fi-radio-input:checked,
.dark .fi-modal input[type='checkbox'].fi-checkbox-input:is(:checked, :indeterminate) {
    background-color: var(--primary-600); /* la marca blanca no contrasta sobre 500 */
}

.fi-fo-field input[type='checkbox'].fi-checkbox-input:focus-visible,
.fi-fo-field input[type='radio'].fi-radio-input:focus-visible,
.fi-modal input[type='checkbox'].fi-checkbox-input:focus-visible {
    box-shadow:
        inset 0 0 0 1.5px var(--fo-foco),
        0 0 0 4px var(--fo-anillo);
}

.fi-fo-field input[type='checkbox'].fi-checkbox-input:disabled,
.fi-fo-field input[type='radio'].fi-radio-input:disabled {
    background-color: var(--fo-campo-quieto);
    opacity: 0.7;
}

.fi-fo-field input[type='checkbox'].fi-checkbox-input.fi-invalid,
.fi-fo-field input[type='radio'].fi-radio-input.fi-invalid {
    box-shadow: inset 0 0 0 1.5px var(--fo-error);
}

.fi-fo-checkbox-list-option-label,
.fi-fo-radio-label-text {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--fo-texto);
}

.fi-fo-checkbox-list-option-description,
.fi-fo-radio-label-description {
    font-size: 0.8125rem;
    color: var(--fo-ayuda);
    text-wrap: pretty;
}

/* ======================================================================
 * Subida de archivos: zona punteada amable
 * ====================================================================== */
.fi-fo-file-upload .filepond--root {
    border-radius: 12px;
    background-color: var(--fo-campo);
    box-shadow: none;
    outline: 1.5px dashed var(--gray-300);
    outline-offset: -1.5px;
    transition: outline-color 120ms var(--fo-ease), background-color 120ms var(--fo-ease);
}

.dark .fi-fo-file-upload .filepond--root {
    outline-color: var(--fo-borde-hover);
}

.fi-fo-file-upload .filepond--root:hover,
.fi-fo-file-upload .filepond--root[data-hopper-state='drag-over'] {
    outline-color: var(--primary-400);
    background-color: color-mix(in oklab, var(--fo-campo) 82%, var(--primary-200));
}

.dark .fi-fo-file-upload .filepond--root:hover,
.dark .fi-fo-file-upload .filepond--root[data-hopper-state='drag-over'] {
    background-color: color-mix(in oklab, var(--fo-campo) 85%, var(--primary-500));
}

.fi-fo-file-upload .filepond--root:focus-within {
    outline: 1.5px solid var(--fo-foco);
    box-shadow: 0 0 0 3px var(--fo-anillo);
}

.fi-fo-field:has(.fi-fo-field-wrp-error-message) .fi-fo-file-upload .filepond--root {
    outline-color: var(--fo-error);
}

.fi-fo-file-upload .filepond--root[data-disabled='disabled'] {
    background-color: var(--fo-campo-quieto);
    outline-color: var(--fo-borde);
}

.fi-fo-file-upload .filepond--drop-label {
    min-height: 76px;
}

.fi-fo-file-upload .filepond--drop-label label {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--gray-600) !important; /* Filament lo fija con !important */
}

.dark .fi-fo-file-upload .filepond--drop-label label {
    color: var(--gray-300) !important;
}

.fi-fo-file-upload .filepond--label-action {
    font-weight: 700;
    color: var(--primary-700);
    text-decoration: underline;
    text-decoration-color: color-mix(in oklab, currentColor 35%, transparent);
    text-underline-offset: 3px;
}

.dark .fi-fo-file-upload .filepond--label-action {
    color: var(--primary-300);
}

.fi-fo-file-upload .filepond--item-panel {
    border-radius: 10px;
}

/* ======================================================================
 * Repeater, builder, key-value: cada ítem es un bloque con cabecera
 * ====================================================================== */
.fi-fo-repeater .fi-fo-repeater-item,
.fi-fo-builder .fi-fo-builder-item {
    border-radius: 12px;
    background-color: var(--fo-hoja);
    box-shadow: inset 0 0 0 1px var(--fo-borde);
    overflow: clip;
}

.fi-fo-repeater .fi-fo-repeater-item-header,
.fi-fo-builder .fi-fo-builder-item-header {
    min-height: 44px;
    padding: 8px 12px 8px 14px;
    background-color: var(--fo-hoja-2);
}

.fi-fo-repeater .fi-fo-repeater-item-header-label,
.fi-fo-builder .fi-fo-builder-item-header-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--fo-texto);
}

.fi-fo-repeater .fi-fo-repeater-item-has-header > .fi-fo-repeater-item-content,
.fi-fo-builder .fi-fo-builder-item-has-header > .fi-fo-builder-item-content {
    border-top: 1px solid var(--fo-linea);
}

.fi-fo-repeater .fi-fo-repeater-item-content,
.fi-fo-builder .fi-fo-builder-item-content:not(.fi-fo-builder-item-content-has-preview) {
    padding: 16px;
}

.fi-fo-repeater .fi-fo-repeater-items,
.fi-fo-simple-repeater .fi-fo-simple-repeater-items {
    gap: 12px;
}

.fi-fo-repeater .fi-fo-repeater-add,
.fi-fo-builder .fi-fo-builder-add,
.fi-fo-simple-repeater .fi-fo-simple-repeater-add {
    justify-content: flex-start;
}

.fi-fo-table-repeater > table {
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px var(--fo-borde);
}

.fi-fo-table-repeater > table > thead > tr > th {
    font-size: 0.8125rem;
    font-weight: 650;
    color: var(--fo-etiqueta);
    background-color: var(--fo-hoja-2);
}

.fi-fo-key-value .fi-fo-key-value-table > thead > tr > th {
    font-size: 0.8125rem;
    font-weight: 650;
    color: var(--fo-etiqueta);
    background-color: var(--fo-hoja-2);
}

.fi-fo-key-value .fi-fo-key-value-table > tbody > tr > td .fi-input {
    font-family: inherit;
    font-size: 0.875rem;
}

.fi-fo-key-value .fi-fo-key-value-table,
.fi-fo-key-value .fi-fo-key-value-table > tbody,
.fi-fo-key-value .fi-fo-key-value-table > tbody > tr {
    border-color: var(--fo-linea);
}

/* ======================================================================
 * Editor enriquecido (comunicados)
 * ====================================================================== */
.fi-fo-rich-editor .fi-fo-rich-editor-toolbar {
    padding: 6px 8px;
    border-bottom-color: var(--fo-borde);
    background-color: transparent;
}

.fi-fo-rich-editor .fi-fo-rich-editor-tool {
    border-radius: 7px;
    color: var(--gray-600);
}

.dark .fi-fo-rich-editor .fi-fo-rich-editor-tool {
    color: var(--gray-300);
}

.fi-fo-rich-editor .fi-fo-rich-editor-tool.fi-active {
    background-color: var(--fo-icono-fondo);
    color: var(--primary-700);
}

.dark .fi-fo-rich-editor .fi-fo-rich-editor-tool.fi-active {
    color: var(--primary-200);
}

.fi-fo-rich-editor .fi-fo-rich-editor-content {
    min-height: 160px;
    padding: 12px 16px;
    font-size: 0.9375rem;
}

/* ======================================================================
 * Tabs y wizard
 * ====================================================================== */
.fi-sc-tabs.fi-contained,
.fi-sc-wizard.fi-contained,
.fi-sc-wizard:not(.fi-contained) .fi-sc-wizard-header {
    border-radius: 14px;
    background-color: var(--fo-hoja);
    box-shadow: var(--cp-card-shadow);
}

.fi-sc-tabs .fi-tabs.fi-contained {
    padding: 8px 12px;
    border-bottom-color: var(--fo-linea);
}

.fi-sc-tabs .fi-tabs-item {
    min-height: 36px;
    padding: 7px 12px;
    border-radius: 8px;
}

.fi-sc-tabs .fi-tabs-item .fi-tabs-item-label {
    font-size: 0.875rem;
    font-weight: 600;
}

.fi-sc-tabs .fi-tabs-item.fi-active {
    background-color: var(--fo-icono-fondo);
}

.fi-sc-tabs .fi-tabs-item.fi-active .fi-tabs-item-label {
    font-weight: 750;
    color: var(--primary-700);
}

.dark .fi-sc-tabs .fi-tabs-item.fi-active .fi-tabs-item-label,
.dark .fi-sc-tabs .fi-tabs-item.fi-active > .fi-icon {
    color: var(--primary-200);
}

.fi-sc-tabs.fi-contained .fi-sc-tabs-tab.fi-active {
    padding: 24px;
}

/* Wizard: pasos con numeral condensado — la firma de la lista */
.fi-sc-wizard .fi-sc-wizard-header {
    border-bottom-color: var(--fo-linea);
}

.fi-sc-wizard .fi-sc-wizard-header-step-btn {
    gap: 12px;
    padding: 14px 22px;
}

.fi-sc-wizard .fi-sc-wizard-header-step-btn .fi-sc-wizard-header-step-icon-ctn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border-width: 1.5px;
}

.fi-sc-wizard .fi-sc-wizard-header-step-btn .fi-sc-wizard-header-step-number {
    font-size: 1.25rem;
    line-height: 1;
    font-weight: 800;
    font-stretch: 72%;
    font-variation-settings: 'wdth' 72;
    font-variant-numeric: tabular-nums;
}

.fi-sc-wizard .fi-sc-wizard-header-step-btn .fi-sc-wizard-header-step-label {
    font-size: 0.875rem;
    font-weight: 700;
}

.fi-sc-wizard .fi-sc-wizard-header-step-btn .fi-sc-wizard-header-step-description {
    font-size: 0.8125rem;
    color: var(--fo-ayuda);
}

.fi-sc-wizard .fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-icon-ctn {
    background-color: var(--fo-icono-fondo);
}

.fi-sc-wizard .fi-sc-wizard-header-step:not(.fi-active):not(.fi-completed) .fi-sc-wizard-header-step-icon-ctn {
    border-color: var(--fo-borde-hover);
}

.fi-sc-wizard .fi-sc-wizard-header-step-separator {
    color: var(--fo-linea);
}

.fi-sc-wizard.fi-contained .fi-sc-wizard-step.fi-active {
    padding: 24px;
}

.fi-sc-wizard.fi-contained .fi-sc-wizard-footer {
    padding: 0 24px 24px;
}

/* ======================================================================
 * Modales y slide-overs
 * ====================================================================== */
.fi-modal > .fi-modal-close-overlay {
    background-color: var(--fo-velo);
}

.fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window {
    border-radius: 16px;
}

.fi-modal > .fi-modal-window-ctn > .fi-modal-window {
    background-color: var(--fo-hoja);
    box-shadow:
        0 0 0 1px rgb(10 16 51 / 0.06),
        0 24px 56px -16px rgb(10 16 51 / 0.35),
        0 4px 12px -4px rgb(10 16 51 / 0.1);
}

.dark .fi-modal > .fi-modal-window-ctn > .fi-modal-window {
    box-shadow:
        0 0 0 1px rgb(255 255 255 / 0.1),
        0 24px 56px -16px rgb(0 0 0 / 0.7);
}

.fi-modal > .fi-modal-window-ctn > .fi-modal-window .fi-modal-heading {
    font-size: 1.125rem;
    line-height: 1.25;
    font-weight: 800;
    font-stretch: 88%;
    font-variation-settings: 'wdth' 88;
    letter-spacing: -0.015em;
    color: var(--fo-texto);
    text-wrap: balance;
}

.fi-modal > .fi-modal-window-ctn > .fi-modal-window .fi-modal-description {
    margin-top: 6px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--fo-ayuda);
    text-wrap: pretty;
}

.fi-modal > .fi-modal-window-ctn > .fi-modal-window .fi-modal-close-btn {
    color: var(--gray-500);
}

/* Cabecera fija y pie fijo: regla tono línea */
.fi-modal.fi-modal-has-sticky-header > .fi-modal-window-ctn > .fi-modal-window > .fi-modal-header,
.fi-modal.fi-modal-has-sticky-footer > .fi-modal-window-ctn > .fi-modal-window > .fi-modal-footer {
    background-color: var(--fo-hoja);
    border-color: var(--fo-linea);
}

/* Pie con acciones alineadas: banda tenue, acciones a la derecha, la principal al final */
.fi-modal:not(.fi-modal-has-sticky-footer) > .fi-modal-window-ctn > .fi-modal-window.fi-modal-window-has-content .fi-modal-footer:is(.fi-align-start, .fi-align-left) {
    padding-top: 16px;
    padding-bottom: 16px;
    border-top: 1px solid var(--fo-linea);
    background-color: var(--fo-hoja-2);
    border-end-start-radius: inherit;
    border-end-end-radius: inherit;
}

.fi-modal > .fi-modal-window-ctn > .fi-modal-window.fi-modal-window-has-content .fi-modal-footer:is(.fi-align-start, .fi-align-left) .fi-modal-footer-actions {
    flex-direction: row-reverse;
    justify-content: flex-start;
    gap: 10px;
}

.fi-modal > .fi-modal-window-ctn > .fi-modal-window.fi-modal-window-has-content .fi-modal-footer:is(.fi-align-start, .fi-align-left) .fi-modal-footer-actions > :first-child {
    margin-inline-start: 0;
}

.fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window .fi-modal-footer:is(.fi-align-start, .fi-align-left) {
    border-end-start-radius: 16px;
    border-end-end-radius: 16px;
}

/* Slide-over: cabecera con regla, pie pegado abajo */
.fi-modal.fi-modal-slide-over > .fi-modal-window-ctn > .fi-modal-window > .fi-modal-header {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--fo-linea);
}

.fi-modal.fi-modal-slide-over > .fi-modal-window-ctn > .fi-modal-window .fi-modal-content {
    padding-top: 20px;
}

/* Icono de modal de confirmación */
.fi-modal-window .fi-modal-icon-bg {
    border-radius: 12px;
}

/* ======================================================================
 * Notificaciones (toasts): marino como en la app
 * ====================================================================== */
.fi-no-notification:not(.fi-inline),
.fi-no-notification:not(.fi-inline).fi-color {
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background-color: var(--fo-marino);
    box-shadow:
        0 0 0 1px rgb(255 255 255 / 0.06),
        0 18px 40px -14px rgb(10 16 51 / 0.55),
        0 4px 10px -4px rgb(10 16 51 / 0.2);
}

.dark .fi-no-notification:not(.fi-inline),
.dark .fi-no-notification:not(.fi-inline).fi-color {
    background-color: #141c4d;
    box-shadow:
        0 0 0 1px rgb(255 255 255 / 0.12),
        0 18px 40px -14px rgb(0 0 0 / 0.7);
}

.fi-no-notification:not(.fi-inline) .fi-no-notification-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--fo-sobre-marino);
}

.fi-no-notification:not(.fi-inline) .fi-no-notification-body,
.fi-no-notification:not(.fi-inline).fi-color .fi-no-notification-body,
.fi-no-notification:not(.fi-inline) .fi-no-notification-date {
    font-size: 0.875rem;
    color: var(--fo-sobre-marino-2);
}

.fi-no-notification:not(.fi-inline) .fi-no-notification-icon {
    color: var(--fo-sobre-marino-2);
}

.fi-no-notification:not(.fi-inline) .fi-no-notification-icon.fi-color {
    color: var(--color-400);
}

.fi-no-notification:not(.fi-inline) .fi-no-notification-close-btn {
    color: var(--fo-sobre-marino-2);
}

.fi-no-notification:not(.fi-inline) .fi-no-notification-close-btn:hover {
    color: var(--fo-sobre-marino);
}

.fi-no-notification:not(.fi-inline) .fi-no-notification-actions .fi-link {
    color: #6ee7b7;
}

/* ======================================================================
 * Barra de acciones del formulario (Crear / Crear y crear otro / Cancelar):
 * fija abajo como el pie de la app. Se fija la columna de la rejilla (no el bloque interno), porque
 * sticky solo se pega dentro de su contenedor: la rejilla del formulario lo abarca entero.
 * ====================================================================== */
.fi-body .fi-sc-form > .fi-grid:has(> .fi-grid-col > .fi-sc-component > .fi-sc-actions) {
    position: sticky;
    bottom: 12px;
    z-index: 15;
    margin-top: 4px;
    padding: 12px 16px;
    border-radius: 16px;
    background-color: var(--fo-hoja);
    box-shadow:
        0 0 0 1px rgb(10 16 51 / 0.07),
        0 -2px 10px -4px rgb(10 16 51 / 0.08),
        0 14px 32px -12px rgb(10 16 51 / 0.28);
}

.dark .fi-body .fi-sc-form > .fi-grid:has(> .fi-grid-col > .fi-sc-component > .fi-sc-actions) {
    background-color: color-mix(in oklab, var(--gray-900) 70%, var(--gray-800));
    box-shadow:
        0 0 0 1px rgb(255 255 255 / 0.1),
        0 16px 36px -12px rgb(0 0 0 / 0.7);
}

.fi-body .fi-sc-form .fi-sc-actions > .fi-ac {
    gap: 10px;
}

/* ======================================================================
 * Movimiento reducido
 * ====================================================================== */
@media (prefers-reduced-motion: reduce) {
    .fi-input-wrp,
    .fi-toggle,
    .fi-toggle > :first-child,
    .fi-section > .fi-section-header,
    .fi-section > .fi-section-header > .fi-section-collapse-btn,
    .fi-fo-file-upload .filepond--root,
    .fi-fo-date-time-picker .fi-fo-date-time-picker-calendar-day,
    .fi-fo-field input.fi-checkbox-input,
    .fi-fo-field input.fi-radio-input {
        transition: none;
    }

    .fi-modal > .fi-modal-window-ctn > .fi-modal-window.fi-transition-enter-start,
    .fi-modal > .fi-modal-window-ctn > .fi-modal-window.fi-transition-leave-end {
        --tw-scale-x: 100%;
        --tw-scale-y: 100%;
        scale: none;
        translate: none;
    }

    .fi-no .fi-no-notification.fi-transition-enter-start,
    .fi-no .fi-no-notification.fi-transition-leave-end {
        translate: none;
        scale: none;
    }
}