@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');



:root {
    --primary: #ff9e2d;
    --primary-dark: #374151;

    --text-color: #333;
    --light-text: #fff;

    --background: #F5F7FB;
    --white: #FFFFFF;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    --radius: 12px;
    --primary-color: #ff9e2d;
    --secondary-color: #020202;
    --light-bg: #f8f9fa;
    --dark-bg: #2c3e50;
    --input-bg: #f7f9fc;
    --gaussian-bg-dark: rgba(0, 0, 0, 0.7);

    --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    --box-shadow-inputs: 0 0 0 3px rgba(255, 153, 0, 0.2);
    --transition: all 0.3s ease;
    --light-gray: #f5f5f5;
    --medium-gray: #e0e0e0;
    --dark-gray: #888;
    --success-color: #4CAF50;
    --warning-color: #FFC107;
    --danger-color: #F44336;

    --font-default: 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;

    --border-color: #c9d2e1;
    --border-color-card: #E5E7EB;
    --border-radius: 12px;
    --border-gray: #e0e0e0;

    --radial-gradient: radial-gradient(900px 500px at 110% -10%, #ffe8cc 0%, transparent 60%), var(--light-bg);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
html {
    height: 100%;

    scroll-behavior: smooth;

}

body {
    font-family: var(--font-default);
    margin: 0;
    padding: 0;
    background-color: var(--fundo-escuro);
    height: 100%;
    font-size: 16px;
    /* 1rem = 16px */
}

/*Classe úteis*********************************/

.hide {
    display: none;
}

.show {
    display: block;
}

.mensagem-erro-forms {
    color: var(--danger-color);
    margin-top: 5px;
    text-align: center;
    font-size: 0.85rem;
}

.divider-line {
    height: 1px;
    background-color: var(--border-gray);
    margin: 20px 0;
}

.card {
    background-color: var(--white);
    border-radius: 12px;
    padding: 30px;
    box-shadow: var(--box-shadow);
    border: 1px solid var(--border-color-card);
}

/**
* Sem dependencia de estar dentro da tag form, em ordem o 
* ------ form-group -> text-input -> form-label
* produzem o efeito de label flutuante. Importante que a tag label
* tenha um apontamento de 'for' para o id do campo input a qual se 
* relaciona. Ex: <label for="id_do_input">
*/
.form-group {
    position: relative;
    margin: 8px 0 14px
}

.text-input {
    width: 100%;
    padding: 12px 15px;
    padding-top: 21px;
    height: 52px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s;
    border-radius: 6px;
    background-color: var(--input-bg);
    font-size: 1em;
    color: var(--text-color);
    box-sizing: border-box;

}

.text-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.form-label {
    position: absolute;
    left: 14px;
    top: 14px;
    color: var(--text-color);
    pointer-events: none;
    transition: transform .18s ease, color .18s ease, top .18s ease, font-size .18s ease;
}

.text-input:focus+.form-label,
.text-input:not(:placeholder-shown)+.form-label {
    top: 3px;
    font-size: 9px;
    color: var(--text);
}

/* Estilo para o campo de input em foco */

.text-input:focus {
    outline: none;
    /* Remove a borda de foco padrão do navegador */
    border-color: var(--primary);
    /* Usa a variável CSS, com uma cor padrão de fallback */
    box-shadow: var(--box-shadow-inputs)
        /* Sombra suave para destacar o foco */
}

.form-model {
    float: left;
    font-size: 11px;
    color: var(--dark-gray);
    margin-left: 5px;
    margin-top: 0px;

}

.divider-inputs {
    height: 1px;
    background-color: transparent;
    margin: 0;
}

.divider-inputs-with-model {
    height: 1px;
    background-color: transparent;
    margin: 15px 0;
}


.btn {
    display: block;
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-primary {
    background-color: var(--primary);
    color: white;
}


.btn-primary:hover {
    background-color: var(--primary);
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color: #cccccc;
    color: #666666;
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-primary:disabled:hover,
.btn-primary.disabled:hover {
    background-color: #cccccc;
}


/* Estilos para elementos select baseados nos inputs existentes */
.form-select {
    width: 100%;
    padding: 12px 40px 12px 15px;
    /* Padding extra à direita para o ícone da seta */
    height: 52px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s;
    border-radius: 6px;
    background-color: var(--input-bg);
    font-size: 1em;
    color: var(--text-color);
    box-sizing: border-box;

    /* Customização da seta */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    /* Posiciona a seta longe da borda */
    background-size: 16px;
    cursor: pointer;
}

.form-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--box-shadow-inputs);
}

.form-select:hover {
    border-color: var(--primary);
}

/* Estilo para options */
.form-select option {
    padding: 8px 15px;
    background-color: var(--white);
    color: var(--text-color);
}

.form-select option:hover {
    background-color: var(--input-bg);
}


@keyframes dots {

    0%,
    20% {
        content: '';
    }

    40% {
        content: '.';
    }

    60% {
        content: '..';
    }

    80%,
    100% {
        content: '...';
    }
}




/* Toast Notifications */

.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    min-width: 300px;
    max-width: 400px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 16px;
    border-left: 4px solid #22c55e;
    /* Cor padrão success */
    transform: translateX(400px);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 50000;
}

.toast.show {
    transform: translateX(0);
    opacity: 1;
}

.toast-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.toast-icon {
    font-size: 18px;
    line-height: 1;
    margin-top: 2px;
    width: 20px;
    text-align: center;
}

.toast-message {
    flex: 1;
    color: #1f2937;
    font-size: 14px;
    line-height: 1.4;
}

/* Cores por tipo */
.toast.success {
    border-left-color: #22c55e;
}

.toast.success .toast-icon {
    color: #22c55e;
}

.toast.warning {
    border-left-color: #eab308;
}

.toast.warning .toast-icon {
    color: #eab308;
}

.toast.error {
    border-left-color: #ef4444;
}

.toast.error .toast-icon {
    color: #ef4444;
}

.toast.info {
    border-left-color: #3b82f6;
}

.toast.info .toast-icon {
    color: #3b82f6;
}

@keyframes shake {
    20% {
        transform: translateX(-6px)
    }

    40% {
        transform: translateX(6px)
    }

    60% {
        transform: translateX(-4px)
    }

    80% {
        transform: translateX(4px)
    }
}



/* Estilos para Radio Buttons personalizados */
.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.radio-option {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.3s ease;
    background-color: var(--white);
    min-width: fit-content;
}

.radio-option:hover {
    border-color: var(--primary);
    background-color: var(--input-bg);
}

.radio-option:has(.radio-input:checked) {
    border-color: var(--primary);
    background-color: var(--primary);
    color: white;
}

.radio-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    margin-right: 8px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: var(--white);
    flex-shrink: 0;
}

.radio-input:checked {
    border-color: white;
    background-color: white;
}

.radio-input:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--primary);
}

.radio-option:has(.radio-input:checked) .radio-input::after {
    background-color: var(--primary);
}

.radio-label {
    font-size: 14px;
    font-weight: 500;
    user-select: none;
    line-height: 1.2;
}

.radio-option:has(.radio-input:checked) .radio-label {
    color: white;
}

/* Estilos para inputs datetime-local com calendário abrindo para cima */
input[type="datetime-local"] {
    width: 100%;
    padding: 12px 15px;
    height: 52px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s;
    background-color: var(--input-bg);
    color: var(--text-color);
    box-sizing: border-box;
    cursor: pointer;

    /* Força o calendário a abrir para cima */
    position: relative;
    z-index: 1000;
}

input[type="datetime-local"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--box-shadow-inputs);
}

input[type="datetime-local"]:hover {
    border-color: var(--primary);
}

/* Customização do ícone do calendário */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3e%3c/rect%3e%3cline x1='16' y1='2' x2='16' y2='6'%3e%3c/line%3e%3cline x1='8' y1='2' x2='8' y2='6'%3e%3c/line%3e%3cline x1='3' y1='10' x2='21' y2='10'%3e%3c/line%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin-right: 5px;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    background-color: var(--input-bg);
    border-radius: 4px;
}

/* Força o dropdown do calendário a aparecer acima do input */
input[type="datetime-local"]::-webkit-datetime-edit {
    padding: 0;
}

/* Estilo para quando o calendário está aberto */
input[type="datetime-local"]:focus::-webkit-calendar-picker-indicator {
    background-color: var(--primary);
    border-radius: 4px;
}

/* CSS específico para forçar o calendário para cima usando transform */
.datetime-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

.datetime-container input[type="datetime-local"] {
    transform-origin: bottom;
}

/* Hack para forçar o calendário para cima em navegadores WebKit */
@supports (-webkit-appearance: none) {
    input[type="datetime-local"] {
        direction: rtl;
        text-align: left;
    }

    input[type="datetime-local"]::-webkit-datetime-edit {
        direction: ltr;
    }
}

/* Estilos para Checkboxes personalizados */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--white);
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

input[type="checkbox"]:hover {
    border-color: var(--primary);
    background-color: var(--input-bg);
}

input[type="checkbox"]:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 6px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

input[type="checkbox"]:focus {
    outline: none;
    box-shadow: var(--box-shadow-inputs);
}

/* Estilo para labels de checkbox */
label:has(input[type="checkbox"]) {
    cursor: pointer;
    user-select: none;
}

label:has(input[type="checkbox"]) span {
    cursor: pointer;
}

/* 
=== CUSTOMIZAÇÃO DE CORES DO DATETIME-LOCAL ===

Para customizar as cores de seleção do datetime-local, você pode modificar as seguintes propriedades:

1. COR DA BORDA E FOCO:
   - Altere var(--primary-color) e var(--primary) nas variáveis CSS do topo do arquivo
   - Essas variáveis controlam a cor da borda quando o campo está em foco

2. COR DO ÍCONE DO CALENDÁRIO:
   - Modifique o stroke='%23666' na linha do background-image do ::-webkit-calendar-picker-indicator
   - %23666 = #666 (cinza). Para laranja use %23ff6b35 ou %23f97316

3. COR DE FUNDO DO ÍCONE NO HOVER:
   - Altere background-color: var(--input-bg) no ::-webkit-calendar-picker-indicator:hover

4. COR DE FUNDO DO ÍCONE NO FOCUS:
   - Altere background-color: var(--primary) no :focus::-webkit-calendar-picker-indicator

5. CORES DO CALENDÁRIO INTERNO (limitado):
   - As cores internas do calendário são controladas pelo navegador
   - Alguns navegadores respeitam accent-color: var(--primary) no input

Exemplo de customização completa:
*/

input[type="datetime-local"] {
    /* Adicione esta linha para tentar influenciar as cores internas */
    accent-color: var(--primary);
}

/* Versão com ícone laranja personalizado */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f97316' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3e%3c/rect%3e%3cline x1='16' y1='2' x2='16' y2='6'%3e%3c/line%3e%3cline x1='8' y1='2' x2='8' y2='6'%3e%3c/line%3e%3cline x1='3' y1='10' x2='21' y2='10'%3e%3c/line%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin-right: 5px;
}

/* 
CÓDIGOS DE COR ÚTEIS PARA URL ENCODING:
- Laranja: %23f97316 ou %23ff6b35
- Azul: %232563eb
- Verde: %2316a34a
- Vermelho: %23dc2626
- Cinza: %23666666
- Preto: %23000000
*/



/**
 * Modal Dialog
 */
/* Suas classes originais */
.modal-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--gaussian-bg-dark);
    backdrop-filter: blur(5px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    z-index: 10000;
    animation: fadeInModal 0.15s ease-out;
}

.modal-card-universal {
    background-color: var(--light-text);
    border-radius: var(--border-radius);
    padding: 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    width: 500px;
    max-width: 600px;
    margin: 0 auto;
    overflow: hidden;
    animation: slideInModal 0.15s ease-out;
    transform: scale(1);
}

/* Novas classes para a estrutura interna da modal */
.modal-header-universal {
    padding: 20px 24px 0;
    margin-bottom: 16px;
}

.modal-header-universal h3 {
    margin: 0;
    color: var(--dark-text);
    font-size: 1.25rem;
    font-weight: 600;
}

.modal-body-universal {
    padding: 0 24px 20px;
}

.modal-body-universal p {
    margin: 0;
    color: var(--text-color);
    line-height: 1.5;
}

.modal-footer-universal {
    padding: 20px 24px;
    background-color: var(--bg-light);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.btn-cancel,
.btn-confirm {
    padding: 10px 20px;
    border: none;
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel {
    background-color: transparent;
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.btn-cancel:hover {
    background-color: var(--bg-hover);
}

.btn-confirm {
    background-color: var(--primary-color, #007bff);
    color: white;
}

.btn-confirm:hover {
    background-color: var(--primary-dark, #0056b3);
    transform: translateY(-1px);
}

/* Animações */
@keyframes fadeInModal {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideInModal {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes fadeOutModal {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes slideOutModal {
    from {
        transform: scale(1);
        opacity: 1;
    }

    to {
        transform: scale(0.9);
        opacity: 0;
    }
}

/** Menu expansivel****************************************************/
.menu-expansivel-container {
    display: flex;
    align-items: center;
    border-radius: 0px;
    padding: 0px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    gap: 4px;
    width: fit-content;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.menu-expansivel-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    flex-shrink: 0;
}

.menu-expansivel-item:hover {
    width: 130px;
}

.menu-expansivel-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    margin-right: 0px;
}

.menu-expansivel-text {
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease 0.1s;
    margin-left: -10px;
    font-size: 13px;
}

.menu-expansivel-item:hover .menu-expansivel-text {
    opacity: 1;
}

.notification-menu-expansivel {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.menu-item-expansivel-disabled {
    opacity: 0.5 !important;
    cursor: default !important;
    pointer-events: none;
}

.menu-item-expansivel-disabled:hover {
    width: 50px !important;
    background-color: transparent !important;
}

/* Cores dos itens */
.hover\:bg-emerald-500\/20:hover {
    background-color: rgba(16, 185, 129, 0.2);
}

.hover\:bg-yellow-500\/20:hover {
    background-color: rgba(245, 158, 11, 0.2);
}

.hover\:bg-gray-500\/20:hover {
    background-color: rgba(107, 114, 128, 0.2);
}

.hover\:bg-blue-500\/20:hover {
    background-color: rgba(59, 130, 246, 0.2);
}

.text-emerald-500 {
    color: #10b981;
}

.text-yellow-500 {
    color: #f59e0b;
}

.text-gray-400 {
    color: #9ca3af;
}

.text-blue-500 {
    color: #3b82f6;
}

/* RESPONSIVIDADE */
/* Telas médias (tablets) */
@media (max-width: 1024px) {
    .menu-expansivel-item {
        width: 45px;
        height: 45px;
    }

    .menu-expansivel-icon {
        width: 45px;
        height: 45px;
        font-size: 16px;
    }

    .menu-expansivel-item:hover {
        width: 100px;
    }

    .menu-expansivel-text {
        font-size: 12px;
    }
}

/* Telas pequenas (celulares grandes) */
@media (max-width: 768px) {
    .menu-expansivel-container {
        gap: 6px;
    }

    .menu-expansivel-item {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .menu-expansivel-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .menu-expansivel-item:hover {
        width: 110px;
    }

    .menu-expansivel-text {
        font-size: 12px;
    }
}

/* Telas muito pequenas (celulares) */
@media (max-width: 480px) {
    .menu-expansivel-container {
        gap: 4px;
    }

    .menu-expansivel-item {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    .menu-expansivel-icon {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .menu-expansivel-item:hover {
        width: 100px;
    }

    .menu-expansivel-text {
        font-size: 11px;
    }
}

/* Telas extremamente pequenas */
@media (max-width: 360px) {
    .menu-expansivel-container {
        gap: 3px;
    }

    .menu-expansivel-item {
        width: 32px;
        height: 32px;
        border-radius: 6px;
    }

    .menu-expansivel-icon {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .menu-expansivel-item:hover {
        width: 90px;
    }

    .menu-expansivel-text {
        font-size: 10px;
    }
}

.dot-flash {
    animation: dot-flash 2.5s infinite
}

@keyframes dot-flash {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }

}

/* Cores de Texto - Tailwind CSS */
.text-gray-50 {
    color: #f9fafb;
}

.text-gray-100 {
    color: #f3f4f6;
}

.text-gray-200 {
    color: #e5e7eb;
}

.text-gray-300 {
    color: #d1d5db;
}

.text-gray-400 {
    color: #9ca3af;
}

.text-gray-500 {
    color: #6b7280;
}

.text-gray-600 {
    color: #4b5563;
}

.text-gray-700 {
    color: #374151;
}

.text-gray-800 {
    color: #1f2937;
}

.text-gray-900 {
    color: #111827;
}

.text-gray-950 {
    color: #030712;
}

.text-red-50 {
    color: #fef2f2;
}

.text-red-100 {
    color: #fee2e2;
}

.text-red-200 {
    color: #fecaca;
}

.text-red-300 {
    color: #fca5a5;
}

.text-red-400 {
    color: #f87171;
}

.text-red-500 {
    color: #ef4444;
}

.text-red-600 {
    color: #dc2626;
}

.text-red-700 {
    color: #b91c1c;
}

.text-red-800 {
    color: #991b1b;
}

.text-red-900 {
    color: #7f1d1d;
}

.text-red-950 {
    color: #450a0a;
}

.text-orange-50 {
    color: #fff7ed;
}

.text-orange-100 {
    color: #ffedd5;
}

.text-orange-200 {
    color: #fed7aa;
}

.text-orange-300 {
    color: #fdba74;
}

.text-orange-400 {
    color: #fb923c;
}

.text-orange-500 {
    color: #f97316;
}

.text-orange-600 {
    color: #ea580c;
}

.text-orange-700 {
    color: #c2410c;
}

.text-orange-800 {
    color: #9a3412;
}

.text-orange-900 {
    color: #7c2d12;
}

.text-orange-950 {
    color: #431407;
}

.text-yellow-50 {
    color: #fefce8;
}

.text-yellow-100 {
    color: #fef9c3;
}

.text-yellow-200 {
    color: #fef08a;
}

.text-yellow-300 {
    color: #fde047;
}

.text-yellow-400 {
    color: #facc15;
}

.text-yellow-500 {
    color: #eab308;
}

.text-yellow-600 {
    color: #ca8a04;
}

.text-yellow-700 {
    color: #a16207;
}

.text-yellow-800 {
    color: #854d0e;
}

.text-yellow-900 {
    color: #713f12;
}

.text-yellow-950 {
    color: #422006;
}

.text-green-50 {
    color: #f0fdf4;
}

.text-green-100 {
    color: #dcfce7;
}

.text-green-200 {
    color: #bbf7d0;
}

.text-green-300 {
    color: #86efac;
}

.text-green-400 {
    color: #4ade80;
}

.text-green-500 {
    color: #22c55e;
}

.text-green-600 {
    color: #16a34a;
}

.text-green-700 {
    color: #15803d;
}

.text-green-800 {
    color: #166534;
}

.text-green-900 {
    color: #14532d;
}

.text-green-950 {
    color: #052e16;
}

.text-blue-50 {
    color: #eff6ff;
}

.text-blue-100 {
    color: #dbeafe;
}

.text-blue-200 {
    color: #bfdbfe;
}

.text-blue-300 {
    color: #93c5fd;
}

.text-blue-400 {
    color: #60a5fa;
}

.text-blue-500 {
    color: #3b82f6;
}

.text-blue-600 {
    color: #2563eb;
}

.text-blue-700 {
    color: #1d4ed8;
}

.text-blue-800 {
    color: #1e40af;
}

.text-blue-900 {
    color: #1e3a8a;
}

.text-blue-950 {
    color: #172554;
}

.text-indigo-50 {
    color: #eef2ff;
}

.text-indigo-100 {
    color: #e0e7ff;
}

.text-indigo-200 {
    color: #c7d2fe;
}

.text-indigo-300 {
    color: #a5b4fc;
}

.text-indigo-400 {
    color: #818cf8;
}

.text-indigo-500 {
    color: #6366f1;
}

.text-indigo-600 {
    color: #4f46e5;
}

.text-indigo-700 {
    color: #4338ca;
}

.text-indigo-800 {
    color: #3730a3;
}

.text-indigo-900 {
    color: #312e81;
}

.text-indigo-950 {
    color: #1e1b4b;
}

.text-purple-50 {
    color: #faf5ff;
}

.text-purple-100 {
    color: #f3e8ff;
}

.text-purple-200 {
    color: #e9d5ff;
}

.text-purple-300 {
    color: #d8b4fe;
}

.text-purple-400 {
    color: #c084fc;
}

.text-purple-500 {
    color: #a855f7;
}

.text-purple-600 {
    color: #9333ea;
}

.text-purple-700 {
    color: #7c3aed;
}

.text-purple-800 {
    color: #6b21a8;
}

.text-purple-900 {
    color: #581c87;
}

.text-purple-950 {
    color: #3b0764;
}

.text-pink-50 {
    color: #fdf2f8;
}

.text-pink-100 {
    color: #fce7f3;
}

.text-pink-200 {
    color: #fbcfe8;
}

.text-pink-300 {
    color: #f9a8d4;
}

.text-pink-400 {
    color: #f472b6;
}

.text-pink-500 {
    color: #ec4899;
}

.text-pink-600 {
    color: #db2777;
}

.text-pink-700 {
    color: #be185d;
}

.text-pink-800 {
    color: #9d174d;
}

.text-pink-900 {
    color: #831843;
}

.text-pink-950 {
    color: #500724;
}

.text-slate-50 {
    color: #f8fafc;
}

.text-slate-100 {
    color: #f1f5f9;
}

.text-slate-200 {
    color: #e2e8f0;
}

.text-slate-300 {
    color: #cbd5e1;
}

.text-slate-400 {
    color: #94a3b8;
}

.text-slate-500 {
    color: #64748b;
}

.text-slate-600 {
    color: #475569;
}

.text-slate-700 {
    color: #334155;
}

.text-slate-800 {
    color: #1e293b;
}

.text-slate-900 {
    color: #0f172a;
}

.text-slate-950 {
    color: #020617;
}

.text-zinc-50 {
    color: #fafafa;
}

.text-zinc-100 {
    color: #f4f4f5;
}

.text-zinc-200 {
    color: #e4e4e7;
}

.text-zinc-300 {
    color: #d4d4d8;
}

.text-zinc-400 {
    color: #a1a1aa;
}

.text-zinc-500 {
    color: #71717a;
}

.text-zinc-600 {
    color: #52525b;
}

.text-zinc-700 {
    color: #3f3f46;
}

.text-zinc-800 {
    color: #27272a;
}

.text-zinc-900 {
    color: #18181b;
}

.text-zinc-950 {
    color: #09090b;
}

.text-neutral-50 {
    color: #fafafa;
}

.text-neutral-100 {
    color: #f5f5f5;
}

.text-neutral-200 {
    color: #e5e5e5;
}

.text-neutral-300 {
    color: #d4d4d4;
}

.text-neutral-400 {
    color: #a3a3a3;
}

.text-neutral-500 {
    color: #737373;
}

.text-neutral-600 {
    color: #525252;
}

.text-neutral-700 {
    color: #404040;
}

.text-neutral-800 {
    color: #262626;
}

.text-neutral-900 {
    color: #171717;
}

.text-neutral-950 {
    color: #0a0a0a;
}

.text-stone-50 {
    color: #fafaf9;
}

.text-stone-100 {
    color: #f5f5f4;
}

.text-stone-200 {
    color: #e7e5e4;
}

.text-stone-300 {
    color: #d6d3d1;
}

.text-stone-400 {
    color: #a8a29e;
}

.text-stone-500 {
    color: #78716c;
}

.text-stone-600 {
    color: #57534e;
}

.text-stone-700 {
    color: #44403c;
}

.text-stone-800 {
    color: #292524;
}

.text-stone-900 {
    color: #1c1917;
}

.text-stone-950 {
    color: #0c0a09;
}

.text-amber-50 {
    color: #fffbeb;
}

.text-amber-100 {
    color: #fef3c7;
}

.text-amber-200 {
    color: #fde68a;
}

.text-amber-300 {
    color: #fcd34d;
}

.text-amber-400 {
    color: #fbbf24;
}

.text-amber-500 {
    color: #f59e0b;
}

.text-amber-600 {
    color: #d97706;
}

.text-amber-700 {
    color: #b45309;
}

.text-amber-800 {
    color: #92400e;
}

.text-amber-900 {
    color: #78350f;
}

.text-amber-950 {
    color: #451a03;
}

.text-lime-50 {
    color: #f7fee7;
}

.text-lime-100 {
    color: #ecfccb;
}

.text-lime-200 {
    color: #d9f99d;
}

.text-lime-300 {
    color: #bef264;
}

.text-lime-400 {
    color: #a3e635;
}

.text-lime-500 {
    color: #84cc16;
}

.text-lime-600 {
    color: #65a30d;
}

.text-lime-700 {
    color: #4d7c0f;
}

.text-lime-800 {
    color: #3f6212;
}

.text-lime-900 {
    color: #365314;
}

.text-lime-950 {
    color: #1a2e05;
}

.text-emerald-50 {
    color: #ecfdf5;
}

.text-emerald-100 {
    color: #d1fae5;
}

.text-emerald-200 {
    color: #a7f3d0;
}

.text-emerald-300 {
    color: #6ee7b7;
}

.text-emerald-400 {
    color: #34d399;
}

.text-emerald-500 {
    color: #10b981;
}

.text-emerald-600 {
    color: #059669;
}

.text-emerald-700 {
    color: #047857;
}

.text-emerald-800 {
    color: #065f46;
}

.text-emerald-900 {
    color: #064e3b;
}

.text-emerald-950 {
    color: #022c22;
}

.text-teal-50 {
    color: #f0fdfa;
}

.text-teal-100 {
    color: #ccfbf1;
}

.text-teal-200 {
    color: #99f6e4;
}

.text-teal-300 {
    color: #5eead4;
}

.text-teal-400 {
    color: #2dd4bf;
}

.text-teal-500 {
    color: #14b8a6;
}

.text-teal-600 {
    color: #0d9488;
}

.text-teal-700 {
    color: #0f766e;
}

.text-teal-800 {
    color: #115e59;
}

.text-teal-900 {
    color: #134e4a;
}

.text-teal-950 {
    color: #042f2e;
}

.text-cyan-50 {
    color: #ecfeff;
}

.text-cyan-100 {
    color: #cffafe;
}

.text-cyan-200 {
    color: #a5f3fc;
}

.text-cyan-300 {
    color: #67e8f9;
}

.text-cyan-400 {
    color: #22d3ee;
}

.text-cyan-500 {
    color: #06b6d4;
}

.text-cyan-600 {
    color: #0891b2;
}

.text-cyan-700 {
    color: #0e7490;
}

.text-cyan-800 {
    color: #155e75;
}

.text-cyan-900 {
    color: #164e63;
}

.text-cyan-950 {
    color: #083344;
}

.text-sky-50 {
    color: #f0f9ff;
}

.text-sky-100 {
    color: #e0f2fe;
}

.text-sky-200 {
    color: #bae6fd;
}

.text-sky-300 {
    color: #7dd3fc;
}

.text-sky-400 {
    color: #38bdf8;
}

.text-sky-500 {
    color: #0ea5e9;
}

.text-sky-600 {
    color: #0284c7;
}

.text-sky-700 {
    color: #0369a1;
}

.text-sky-800 {
    color: #075985;
}

.text-sky-900 {
    color: #0c4a6e;
}

.text-sky-950 {
    color: #082f49;
}

.text-violet-50 {
    color: #f5f3ff;
}

.text-violet-100 {
    color: #ede9fe;
}

.text-violet-200 {
    color: #ddd6fe;
}

.text-violet-300 {
    color: #c4b5fd;
}

.text-violet-400 {
    color: #a78bfa;
}

.text-violet-500 {
    color: #8b5cf6;
}

.text-violet-600 {
    color: #7c3aed;
}

.text-violet-700 {
    color: #6d28d9;
}

.text-violet-800 {
    color: #5b21b6;
}

.text-violet-900 {
    color: #4c1d95;
}

.text-violet-950 {
    color: #2e1065;
}

.text-fuchsia-50 {
    color: #fdf4ff;
}

.text-fuchsia-100 {
    color: #fae8ff;
}

.text-fuchsia-200 {
    color: #f5d0fe;
}

.text-fuchsia-300 {
    color: #f0abfc;
}

.text-fuchsia-400 {
    color: #e879f9;
}

.text-fuchsia-500 {
    color: #d946ef;
}

.text-fuchsia-600 {
    color: #c026d3;
}

.text-fuchsia-700 {
    color: #a21caf;
}

.text-fuchsia-800 {
    color: #86198f;
}

.text-fuchsia-900 {
    color: #701a75;
}

.text-fuchsia-950 {
    color: #4a044e;
}

.text-rose-50 {
    color: #fff1f2;
}

.text-rose-100 {
    color: #ffe4e6;
}

.text-rose-200 {
    color: #fecdd3;
}

.text-rose-300 {
    color: #fda4af;
}

.text-rose-400 {
    color: #fb7185;
}

.text-rose-500 {
    color: #f43f5e;
}

.text-rose-600 {
    color: #e11d48;
}

.text-rose-700 {
    color: #be123c;
}

.text-rose-800 {
    color: #9f1239;
}

.text-rose-900 {
    color: #881337;
}

.text-rose-950 {
    color: #4c0519;
}

/* Cores especiais */
.text-black {
    color: #000000;
}

.text-white {
    color: #ffffff;
}

.text-transparent {
    color: transparent;
}

.text-current {
    color: currentColor;
}





/* Garantir que nada fique acima */
/*body>*:not(#alertPage) {
    position: relative;
    z-index: auto;
}*/

/* Se tiver modais ou outros elementos com z-index alto */
.modal,
.dialog,
.popover,
.dropdown,
.tooltip {
    z-index: 9998 !important;
    /* Um abaixo do alerta */
}

/* Initial Loading Overlay (Splash Screen) */
#initial-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.6s;
}

.loader-content {
    text-align: center;
    animation: loaderFadeIn 0.8s ease-out;
}

.loader-logo {
    font-family: 'Outfit', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.loader-logo i {
    color: var(--primary);
    filter: drop-shadow(0 4px 6px rgba(255, 158, 44, 0.2));
}

.loader-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #f1f5f9;
    border-top: 4px solid var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 16px;
}

.loader-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    letter-spacing: 0.02em;
}

.loader-status {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 8px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@keyframes loaderFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

#initial-loader.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.exam-roman-statement {
    margin-left: 30px;
    margin-bottom: 16px;
    margin-top: 16px;
}

.exam-roman-statement .exam-roman-marker::after {
    content: " ";
}


.modal-card-universal.is-processing { position: relative; min-height: 280px; }
.modal-card-universal.is-processing .modal-header-universal,
.modal-card-universal.is-processing .modal-footer-universal { visibility: hidden; }
.confirmation-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 28px 24px;
    text-align: center;
    color: #142033;
    cursor: progress;
    outline: none;
}
.confirmation-loading strong { font-size: 20px; line-height: 1.3; }
.confirmation-loading p { margin: 0; min-height: 42px; color: #475569; font-size: 14px; line-height: 1.5; }
.confirmation-loading small { color: #667085; font-size: 12px; line-height: 1.5; }
.confirmation-loading-spinner {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: 4px solid #ffedd5;
    border-top-color: #ed7d24;
    border-radius: 50%;
    animation: confirmation-loading-spin .9s linear infinite;
}
.confirmation-processing-error { margin-top: 16px; color: #b45309; font-size: 14px; }
@keyframes confirmation-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .confirmation-loading-spinner { animation-duration: 2s; }
}