/*==============================
 *  FLOOXTOOL FLOT FORM SYSTEM CSS
 * ==============================*/

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;600;700;800;900&display=swap');


#ffAgendaModal,
#ffAgendaModal * {
    font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ── Modal backdrop: hidden → visible ── */
#ffAgendaModal {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#ffAgendaModal.ff-active {
    opacity: 1;
    visibility: visible;
}

/* ── Panel: slide desde la derecha ── */
#ffAgendaModalContent {
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
}

#ffAgendaModal.ff-active #ffAgendaModalContent {
    transform: translateX(0);
}

/* ── Mobile: slide desde abajo ── */
@media (max-width: 767px) {
    #ffAgendaModal {
        align-items: flex-end !important;
        justify-content: center !important;
    }

    #ffAgendaModalContent {
        max-width: 100% !important;
        height: auto !important;
        max-height: calc(100dvh - 80px);
        border-radius: 1.25rem 1.25rem 0 0;
        box-shadow: 0 -15px 30px rgba(0, 0, 0, 0.4) !important;
        transform: translateY(100%);
    }

    #ffAgendaModal.ff-active #ffAgendaModalContent {
        transform: translateY(0);
    }
}

/* ── Trigger: texto vertical (Tailwind no tiene writing-mode) ── */
.ff-trigger-text {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
}

/* ── Campo con error ── */
.ff-has-error {
    border-color: var(--color-two) !important;
    box-shadow: 0 0 0 3px rgba(158, 20, 40, 0.12) !important;
}

/* ── Mensaje de error inline ── */
.ff-field-error {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-two);
    animation: ff-shake 0.25s ease;
}

@keyframes ff-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(4px);
    }
}

/* ── Status del formulario ── */
.ff-form-message {
    display: none;
    margin-top: .5rem;
    padding: .6rem 1rem;
    border-radius: .6rem;
    text-align: center;
    font-size: .9rem;
    font-weight: 600;
}

.ff-msg-sending {
    display: block;
    color: var(--color-one);
    background: var(--color-background);
}

.ff-msg-success {
    display: block;
    color: var(--color-success);
    background: var(--color-background);
}

.ff-msg-error {
    display: block;
    color: var(--color-warning);
    background: var(--color-background);
}

/* ── Scroll lock ── */
body.ff-panel-open {
    overflow: hidden;
}