/* ============================================================================
   Hub Insight — Modal (Layer: components)
   ----------------------------------------------------------------------------
   Refatora .modal-overlay / .modal-content para responsividade real:
   • max-height usa dvh (não vh) — resolve jump da barra de endereço no iOS
   • max-width fluido — encolhe em mobile
   • padding via tokens — escala no clamp definido
   • margin de segurança em viewports muito pequenos
   ============================================================================ */

.modal-content {
    /* Largura: 92% do viewport até teto de 720px */
    max-width: var(--ds-modal-max-w);
    /* Altura: limite dinâmico que respeita address bar do mobile */
    max-height: var(--ds-modal-max-h);
    /* Padding fluido (16px em mobile → 24px em desktop) */
    padding: var(--ds-space-5);
    /* Radius via token (alias para --radius-md existente) */
    border-radius: var(--ds-radius-md);
    /* Em telas pequenas, garante que sobre folga lateral */
    margin-inline: var(--ds-space-3);
}

.modal-header {
    margin-bottom: var(--ds-space-5);
}

.modal-title {
    font-size: var(--ds-text-xl);
}

.modal-form-group {
    margin-bottom: var(--ds-space-4);
}

.modal-label {
    font-size: var(--ds-text-sm);
    margin-bottom: var(--ds-space-3);
}

.modal-input {
    padding: var(--ds-space-4);
    border-radius: var(--ds-radius-sm);
    font-size: var(--ds-text-base);
}

.modal-actions {
    gap: var(--ds-space-4);
    margin-top: var(--ds-space-5);
    /* Em mobile, empilha botões para evitar overflow horizontal */
    flex-wrap: wrap;
}

.modal-btn {
    padding: var(--ds-space-4) var(--ds-space-6);
    border-radius: var(--ds-radius-sm);
    font-size: var(--ds-text-base);
}

/* Em telas muito pequenas (<480px), botões ocupam linha inteira */
@media (max-width: 479.98px) {
    .modal-actions {
        flex-direction: column-reverse; /* primário fica em cima */
    }
    .modal-btn {
        width: 100%;
    }
}