@import "variables.css";

body {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    background-color: #f3f4f6;
    overflow-x: hidden;
}

.backgroundDefaultRed {
    background-color: var(--bg-red);
}

.highlight {
    color: var(--bg-red);
    font-family: Arial, Sans-Serif;
    font-weight: bold;
    display: flex;
    align-items: center;
}

    .highlight:not(:empty)::before {
        content: url('../Images/warning.png');
        margin-right: 8px;
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

/* --- ActionButton --- */
.actionButton {
    background-color: #ae2109;
    color: #fff;
    border-color: transparent;
    padding: 8px 16px;
}

    .actionButton:hover {
        cursor: pointer;
        filter: brightness(85%);
    }

    .actionButton:disabled {
        background-color: var(--bg-disabled-red);
        cursor: not-allowed;
    }
        /* Garante que o efeito hover não se aplique ao botão desativado */
        .actionButton:disabled:hover {
            filter: none;
        }


/* --- secondaryButton --- */
.secondaryButton {
    background-color: #ae2109;
    color: #fff;
    border-color: transparent;
    padding: 8px 16px;
}

    .secondaryButton:hover {
        cursor: pointer;
        filter: brightness(85%);
    }

    .secondaryButton:disabled {
        background-color: var(--bg-disabled-red);
        cursor: not-allowed;
    }

        .secondaryButton:disabled:hover {
            filter: none;
        }


/* --- outlinedActionButton --- */
.outlinedActionButton {
    background-color: #fff;
    color: #ae2109;
    border: 1px solid #ae2109;
    padding: 8px 16px;
}

    .outlinedActionButton:hover {
        cursor: pointer;
        filter: brightness(97%);
    }

    .outlinedActionButton:disabled {
        color: #9ca3af;
        border-color: #9ca3af;
        cursor: not-allowed;
    }

        .outlinedActionButton:disabled:hover {
            filter: none;
        }



.inputField {
    width: 100%;
    border: 1px solid rgba(107, 114, 128, 0.3);
    font-size: 1rem;
    padding: .25rem .5rem;
    transition: border-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
}

    .inputField:focus {
        outline: none;
        border: 2px solid #6B7280;
      box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.2), 0 0 6px rgba(107, 114, 128, 0.1);
    }
    .inputField.input-error {
        border: 1px solid #EF4444; /* vermelho-500 */
    }

        .inputField.input-error:focus {
            /*border-color: #EF4444;*/ /* vermelho-500 */
            box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2), 0 0 8px rgba(239, 68, 68, 0.1);
        }
.input-error {
    border: 1px solid #EF4444; /* vermelho-500 */
}


.labelField {
    font-size: 1rem;
    font-weight: 600;
    color: #323232;
    width: 100%;
}
.labelFieldLight {
    font-size: 1rem;
    font-weight: 400;
    color: #323232;
    width: 100%;
}

.labelTitle {
    font-size: 1.5rem;
    font-weight: 700;
    color: #323232;
    width: 100%;
    text-align: center;
}

.containerField {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.whiteBox {
    display: flex;
    padding: 1rem; /* 16px */
    gap: 0.75rem; /* 12px */
    background-color: #ffffff;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.hyperlinkButton {
    background-color: transparent;
    border: none;
    padding: 0;
    color: #2563eb;
    text-decoration: underline;
    cursor: pointer;
}

    .hyperlinkButton:hover {
        color: #1e40af;
    }

.c-loader {
    animation: is-rotating 1s infinite;
    border: 6px solid #e5e5e5;
    border-radius: 50%;
    border-top-color: var(--bg-red);
    height: 50px;
    width: 50px;
    margin: 3rem auto;
    display: flex;
    justify-content: center;
    align-items: center;
    animation-delay: 0.2s;
}

@keyframes is-rotating {
    to {
        transform: rotate(1turn);
    }
}