/*
 * SDB — Reporte de Erros
 * Frontend fallback layer for SDB Design System v4.2.2.
 * The plugin consumes DS classes in markup and keeps only scoped fallback rules here.
 */

#sbr-floating-btn,
.sbr-floating-btn {
    --sbr-floating-size: var(--sdb-floating-action-size, 56px);
    --sbr-floating-offset: var(--sdb-floating-action-offset, 24px);

    position: fixed;
    right: max(20px, env(safe-area-inset-right));
    bottom: calc(var(--sbr-floating-offset) + env(safe-area-inset-bottom));
    z-index: var(--sdb-floating-action-z-index, 9990);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sdb-space-sm, 0.75rem);
    min-width: var(--sbr-floating-size);
    min-height: var(--sbr-floating-size);
    max-width: 220px;
    padding: 0 var(--sdb-space-md, 1.25rem);
    border: 1px solid var(--sdb-color-outline-variant, var(--sdb-color-border, #eef3f8));
    border-radius: var(--sdb-shape-pill, var(--sdb-radius-pill, 999px));
    background: var(--sdb-color-surface-lowest, var(--sdb-color-surface, #fff));
    color: var(--sdb-color-on-surface-muted, var(--sdb-color-text, #6b7785));
    box-shadow: var(--sdb-elevation-2, var(--sdb-shadow-element, 0 10px 24px rgba(31, 42, 54, 0.08)));
    font-family: var(--sdb-font-body, inherit);
    font-size: var(--sdb-type-label-md-size, 0.875rem);
    font-weight: var(--sdb-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
        transform var(--sdb-motion-duration-base, 180ms) var(--sdb-motion-easing-standard, ease),
        background-color var(--sdb-motion-duration-base, 180ms) var(--sdb-motion-easing-standard, ease),
        color var(--sdb-motion-duration-base, 180ms) var(--sdb-motion-easing-standard, ease),
        right var(--sdb-motion-duration-base, 180ms) var(--sdb-motion-easing-standard, ease);
    box-sizing: border-box;
}

#sbr-floating-btn:hover,
.sbr-floating-btn:hover {
    background: var(--sdb-state-hover-bg, rgba(0, 88, 183, 0.06));
    color: var(--sdb-color-primary, #0058b7);
    transform: translateY(-2px);
}

#sbr-floating-btn:focus-visible,
.sbr-floating-btn:focus-visible {
    outline: none;
    box-shadow:
        var(--sdb-state-focus-ring, 0 0 0 3px rgba(0, 155, 216, 0.22)),
        var(--sdb-elevation-2, 0 10px 24px rgba(31, 42, 54, 0.08));
}

#sbr-floating-btn svg,
.sbr-floating-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

#sbr-floating-btn.sbr-scrolled,
.sbr-floating-btn.sbr-scrolled {
    right: max(80px, env(safe-area-inset-right));
    width: var(--sbr-floating-size);
    height: var(--sbr-floating-size);
    padding: 0;
    border-radius: 50%;
    gap: 0;
}

#sbr-floating-btn.sbr-scrolled .sbr-text,
.sbr-floating-btn.sbr-scrolled .sbr-text {
    display: none;
}

.sbr-hidden,
[hidden].sbr-modal-backdrop {
    display: none !important;
}

#sbr-modal-overlay,
.sbr-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--sdb-modal-z-index, 10000);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100%;
    padding: var(--sdb-space-md, 1.25rem);
    background: var(--sdb-modal-backdrop-bg, rgba(17, 24, 39, 0.56));
    backdrop-filter: blur(2px);
    box-sizing: border-box;
}

#sbr-modal,
.sbr-modal {
    --sbr-modal-padding: var(--sdb-modal-padding, clamp(16px, 2.4vw, 24px));

    width: min(100%, var(--sdb-modal-width-md, 640px));
    max-width: 560px;
    max-height: min(90vh, 720px);
    overflow: auto;
    border-radius: var(--sdb-shape-lg, var(--sdb-radius-lg, 20px));
    background: var(--sdb-color-surface-lowest, var(--sdb-color-surface, #fff));
    color: var(--sdb-color-on-surface-muted, var(--sdb-color-text, #6b7785));
    box-shadow: var(--sdb-elevation-4, var(--sdb-modal-shadow, 0 24px 60px rgba(31, 42, 54, 0.18)));
    animation: sbr-modal-in var(--sdb-motion-duration-enter, 180ms) var(--sdb-motion-easing-standard, ease);
}

@keyframes sbr-modal-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sbr-modal-content,
.sdb-modal__content.sbr-modal-content {
    display: block;
}

.sbr-header,
.sdb-modal__header.sbr-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sdb-space-sm, 0.75rem);
    padding: var(--sbr-modal-padding) var(--sbr-modal-padding) 0;
    border: 0;
    background: transparent;
}

.sbr-header--clean,
.sdb-modal__header.sbr-header--clean {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.sbr-header h3,
.sdb-modal__title {
    margin: 0;
    color: var(--sdb-color-on-surface, var(--sdb-color-title, #364048));
    font-family: var(--sdb-font-heading, inherit);
    font-size: clamp(1.45rem, 2.1vw, 1.9rem);
    font-weight: var(--sdb-font-weight-bold, 700);
    line-height: 1.2;
}

#sbr-close-btn,
.sbr-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: -4px -4px 0 0;
    padding: 0;
    border: 1px solid var(--sdb-color-outline-variant, var(--sdb-color-border, #eef3f8));
    border-radius: var(--sdb-shape-pill, var(--sdb-radius-pill, 999px));
    background: var(--sdb-color-surface-lowest, var(--sdb-color-surface, #fff));
    color: var(--sdb-color-muted, #8e9aa7);
    cursor: pointer;
    box-shadow: none;
    transition:
        background-color var(--sdb-motion-duration-base, 180ms) var(--sdb-motion-easing-standard, ease),
        border-color var(--sdb-motion-duration-base, 180ms) var(--sdb-motion-easing-standard, ease),
        color var(--sdb-motion-duration-base, 180ms) var(--sdb-motion-easing-standard, ease),
        transform var(--sdb-motion-duration-fast, 120ms) var(--sdb-motion-easing-standard, ease);
}

#sbr-close-btn:hover,
.sbr-close-btn:hover {
    background: var(--sdb-state-hover-bg, rgba(0, 88, 183, 0.06));
    border-color: var(--sdb-color-primary, #0058b7);
    color: var(--sdb-color-primary, #0058b7);
}

#sbr-close-btn:focus-visible,
.sbr-close-btn:focus-visible {
    outline: none;
    box-shadow: var(--sdb-state-focus-ring, 0 0 0 3px rgba(0, 155, 216, 0.22));
}

#sbr-close-btn svg,
.sbr-close-btn svg {
    width: 20px;
    height: 20px;
}

.sbr-body,
.sdb-modal__body.sbr-body {
    padding: calc(var(--sbr-modal-padding) * 0.75) var(--sbr-modal-padding) var(--sbr-modal-padding);
}

.sbr-desc {
    margin: 0 0 var(--sdb-space-sm, 0.75rem);
    color: var(--sdb-color-on-surface-muted, var(--sdb-color-text, #6b7785));
    font-size: var(--sdb-type-body-sm-size, 0.925rem);
    line-height: 1.5;
}

#sbr-form,
.sbr-form {
    display: grid;
    gap: var(--sdb-form-field-gap, 1rem);
}

.sbr-field,
.sdb-field.sbr-field {
    display: grid;
    gap: 0.45rem;
}

#sbr-form label,
.sbr-form .sdb-field__label {
    color: var(--sdb-color-on-surface, var(--sdb-color-title, #364048));
    font-size: var(--sdb-type-label-md-size, 0.875rem);
    font-weight: var(--sdb-font-weight-semibold, 600);
    line-height: 1.35;
}

#sbr-form input[type="url"],
#sbr-form textarea,
.sbr-form .sdb-field__control {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--sdb-comp-field-border, var(--sdb-field-border, var(--sdb-color-outline, #d6e0ea)));
    border-radius: var(--sdb-shape-md, var(--sdb-radius-md, 12px));
    background: var(--sdb-comp-field-bg, var(--sdb-field-bg, var(--sdb-color-surface-lowest, #fff)));
    color: var(--sdb-color-on-surface-muted, var(--sdb-color-text, #6b7785));
    font-family: var(--sdb-font-body, inherit);
    font-size: var(--sdb-type-body-sm-size, 0.925rem);
    line-height: 1.45;
    box-sizing: border-box;
}

#sbr-form input[readonly] {
    background: var(--sdb-color-surface-low, var(--sdb-color-background, #f5f8fb));
    color: var(--sdb-color-muted, #8e9aa7);
}

#sbr-form textarea,
.sbr-form textarea.sdb-field__control {
    min-height: 104px;
    resize: vertical;
}

#sbr-form input[type="url"]:focus,
#sbr-form textarea:focus,
.sbr-form .sdb-field__control:focus-visible {
    border-color: var(--sdb-field-focus-border, var(--sdb-color-primary, #0058b7));
    outline: none;
    box-shadow: var(--sdb-state-focus-ring, 0 0 0 3px rgba(0, 155, 216, 0.22));
}

.sbr-field-message,
.sdb-field-message.sbr-field-message {
    margin: 0;
    color: var(--sdb-color-muted, #8e9aa7);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.sbr-verification,
.sdb-verification-block.sbr-verification {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 65px;
    padding: 4px 0;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: thin;
}

.sbr-verification .cf-turnstile {
    min-width: 300px;
    max-width: 100%;
}

#sbr-response-msg,
.sbr-status-message {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--sdb-shape-md, var(--sdb-radius-md, 12px));
    font-size: var(--sdb-type-body-sm-size, 0.925rem);
    line-height: 1.4;
    text-align: center;
}

#sbr-response-msg.sbr-success,
.sbr-status-message.sbr-success {
    border: 1px solid var(--sdb-state-success-border, var(--sdb-color-success, #2f8f4e));
    background: var(--sdb-sem-color-feedback-success-bg, var(--sdb-color-success-bg, #e9f6ee));
    color: var(--sdb-color-success-text, #1e5f34);
}

#sbr-response-msg.sbr-error,
.sbr-status-message.sbr-error {
    border: 1px solid var(--sdb-state-error-border, var(--sdb-color-error, #c53030));
    background: var(--sdb-sem-color-feedback-error-bg, var(--sdb-color-error-bg, #fdecec));
    color: var(--sdb-color-error-text, #7f1d1d);
}

.sbr-actions,
.sdb-modal__actions.sbr-actions {
    display: flex;
    justify-content: stretch;
}

#sbr-submit-btn,
.sbr-submit-btn {
    width: 100%;
    min-height: 44px;
    padding: 10px 18px;
    border: 0;
    border-radius: var(--sdb-shape-md, var(--sdb-radius-md, 12px));
    background: var(--sdb-sem-color-action-primary-bg, var(--sdb-color-primary, #0058b7));
    color: var(--sdb-sem-color-action-primary-text, var(--sdb-color-on-primary, #fff));
    font-family: var(--sdb-font-body, inherit);
    font-size: var(--sdb-type-body-md-size, 1rem);
    font-weight: var(--sdb-font-weight-semibold, 600);
    line-height: 1.2;
    cursor: pointer;
    transition:
        background-color var(--sdb-motion-duration-base, 180ms) var(--sdb-motion-easing-standard, ease),
        opacity var(--sdb-motion-duration-fast, 120ms) var(--sdb-motion-easing-standard, ease);
}

#sbr-submit-btn:hover,
.sbr-submit-btn:hover {
    background: var(--sdb-color-secondary, #009bd8);
}

#sbr-submit-btn:focus-visible,
.sbr-submit-btn:focus-visible {
    outline: none;
    box-shadow: var(--sdb-state-focus-ring, 0 0 0 3px rgba(0, 155, 216, 0.22));
}

#sbr-submit-btn:disabled,
.sbr-submit-btn:disabled {
    opacity: var(--sdb-state-disabled-opacity, 0.56);
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    #sbr-floating-btn,
    .sbr-floating-btn,
    #sbr-modal,
    .sbr-modal,
    #sbr-close-btn,
    .sbr-close-btn,
    #sbr-submit-btn,
    .sbr-submit-btn {
        animation: none;
        transition: none;
    }
}

@media (max-width: 600px) {
    #sbr-floating-btn,
    .sbr-floating-btn {
        right: max(16px, env(safe-area-inset-right)) !important;
        bottom: calc(20px + env(safe-area-inset-bottom)) !important;
        width: var(--sbr-floating-size) !important;
        height: var(--sbr-floating-size) !important;
        padding: 0 !important;
        border-radius: 50% !important;
        gap: 0 !important;
    }

    #sbr-floating-btn .sbr-text,
    .sbr-floating-btn .sbr-text {
        display: none !important;
    }

    #sbr-floating-btn.sbr-scrolled,
    .sbr-floating-btn.sbr-scrolled {
        right: max(74px, env(safe-area-inset-right)) !important;
    }

    #sbr-modal-overlay,
    .sbr-modal-backdrop {
        align-items: flex-end;
        padding: 12px;
    }

    #sbr-modal,
    .sbr-modal {
        --sbr-modal-padding: 20px;

        width: 100%;
        max-height: calc(100vh - 24px - env(safe-area-inset-bottom));
    }
}

@media (max-width: 380px) {
    #sbr-modal,
    .sbr-modal {
        --sbr-modal-padding: 14px;
    }
}