/*
 A escala --ac-acento-* tem fonte única em resources/css/area-candidato/app-tw.css
 (herança de cor do cliente sobrescreve essas variáveis por lá) — não redeclare
 hex aqui.
*/
:root {
    --gray-200: #E5E7EB;

    --ac-esmeralda-50: #ecfff8;
    --ac-esmeralda-100: #cafbe5;
    --ac-esmeralda-500: #00BC7D;
    --ac-esmeralda-600: #009966;
    --ac-esmeralda-700: #007A55;

    --ac-verde-100: #dcfce7;
    --ac-verde-200: #b9f8cf;
    --ac-verde-300: #7bf1a8;
    --ac-verde-400: #05df72;
    --ac-verde-500: #22AD5C;
    --ac-verde-600: #00A63E;
    --ac-verde-700: #008236;
    --ac-verde-800: #016630;
    --ac-verde-900: #0d542b;

    --gray-900: #101828;
    --ac-vermelho-100: #ffe2e2;
    --ac-vermelho-200: #ffc9c9;
    --ac-vermelho-300: #ffa2a2;
    --ac-vermelho-400: #ff6467;
    --ac-vermelho-500: #fb2c36;
    --ac-vermelho-600: #e7000b;
    --ac-vermelho-700: #c10007;
    --ac-vermelho-800: #9f0712;
    --ac-vermelho-900: #82181a;
    --ac-laranja-100: #ffedd4;
    --ac-laranja-200: #ffd6a8;
    --ac-laranja-300: #ffb86a;
    --ac-laranja-400: #ff8904;
    --ac-laranja-500: #ff6900;
    --ac-laranja-600: #f54a00;
    --ac-laranja-700: #ca3500;
    --ac-laranja-800: #9f2d00;
    --ac-laranja-900: #7e2a0c;
}
/* styles.css */

[x-cloak] { display: none !important; }

/* Sobrescrevendo a fonte sans padrão */
body {
    font-family: 'Public Sans', sans-serif;
    font-size: 14px;
    line-height: 24px;
}

h1, h2, h3, h4 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.bg-acento-50 {
    background-color: var(--ac-acento-50);
}

.bg-acento-100 {
    background-color: var(--ac-acento-100);
}

.bg-acento-200 {
    background-color: var(--ac-acento-200);
}

.bg-acento-300 {
    background-color: var(--ac-acento-300);
}

.bg-acento-500 {
    background-color: var(--ac-acento-500);
}

.bg-acento-600 {
    background-color: var(--ac-acento-600);
}

.text-acento-500 {
    color: var(--ac-acento-500);
}

.text-acento-600 {
    color: var(--ac-acento-600);
}

.text-acento-700 {
    color: var(--ac-acento-700);
}

.border-acento-500 {
    border-color: var(--ac-acento-500);
}

.bg-esmeralda-50 {
    background-color: var(--ac-esmeralda-50);
}

.bg-esmeralda-100 {
    background-color: var(--ac-esmeralda-100);
}

.bg-esmeralda-500 {
    background-color: var(--ac-esmeralda-500);
}

.border-verde {
    border-color: var(--ac-verde-500);
}

.bg-verde {
    background-color: var(--ac-verde-500);
}

.text-esmeralda-500 {
    color: var(--ac-esmeralda-500);
}

.text-verde {
    color: var(--ac-verde-500);
}

.border-esmeralda-500 {
    border-color: var(--ac-esmeralda-500);
}

.radio-candidato {
    appearance: none;
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    margin-right: 0.5rem;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
}

.radio-candidato:checked {
    border-color: var(--ac-acento-500);
    background-color: white;
    box-shadow: inset 0 0 0 3px var(--ac-acento-500);
}

.checkbox-candidato {
    margin-top: 0.25rem;
    appearance: none;
    -webkit-appearance: none;
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid #ccc;
    border-radius: 0.25rem;
    cursor: pointer;
    margin-right: 0.5rem;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
}

.checkbox-candidato:checked {
    border-color: var(--ac-acento-500);
    background-color: var(--ac-acento-500);
    position: relative;
}

.checkbox-candidato:checked::after {
    content: '';
    position: absolute;
    left: 0.3rem;
    top: 0.1rem;
    width: 0.3rem;
    height: 0.6rem;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.btn-candidato {
    background-color: var(--ac-acento-500);
    color: white;
    padding: 0.625rem 1rem;
    min-height: var(--ac-altura-btn);
    border-radius: 0.50rem;
    font-weight: 500 !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-candidato:hover {
    background-color: var(--ac-acento-600);
    color: white;
}

.btn-candidato:active {
    background-color: var(--ac-acento-700);
    color: white;
}

.btn-candidato-danger {
    background-color: var(--ac-vermelho-500);
    color: white;
    padding: 0.5rem 1rem;
    min-height: var(--ac-altura-btn);
    border-radius: 0.5rem;
    font-weight: 500 !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

btn-candidato-danger:hover {
    background-color: var(--ac-vermelho-600);
    color: white;
}

btn-candidato-danger:active {
    background-color: var(--ac-vermelho-700);
    color: white;
}

.btn-candidato-success {
    background-color: var(--ac-verde-500);
    color: white;
    padding: 0.7rem 1rem;
    min-height: var(--ac-altura-btn);
    border-radius: 0.5rem;
    font-weight: 500 !important;
    cursor: pointer;
    transition: all 300ms ease-out;
}

.btn-candidato-success:hover {
    background-color: var(--ac-verde-600);
    color: white;
}

.btn-candidato-success:active {
    background-color: var(--ac-verde-500);
    color: white;
    border: 1px solid var(--ac-verde-600)
}

.a-candidato-success {
    background-color: var(--ac-verde-500);
    color: white;
    border-radius: 0.25rem;
    font-weight: 500 !important;
    cursor: pointer;
    transition: all 300ms ease-out;
}

.a-candidato-success:hover {
    background-color: var(--ac-esmeralda-600);
    color: white;
}

.a-candidato-success:active {
    background-color: var(--ac-esmeralda-700);
    color: white;
    border: 1px solid var(--ac-verde-600)
}

.btn-candidato-acento {
    background-color: white;
    color: var(--ac-acento-500);
    border: 1px solid var(--ac-acento-500);
    padding: 0.5rem 1rem;
    min-height: var(--ac-altura-btn-sec);
    border-radius: 0.5rem;
    font-weight: 500 !important;
    cursor: pointer;
    transition: all 300ms ease-out;
}

.btn-candidato-acento:hover {
    background-color: var(--ac-acento-200);
    color: var(--ac-acento-500);
}

.btn-candidato-acento:active {
    background-color: var(--ac-acento-300);
    color: var(--ac-acento-500);
    border: 1px solid var(--ac-acento-500)
}

.a-candidato-acento {
    background-color: white;
    color: var(--ac-acento-500);
    border: 1px solid var(--ac-acento-500);
    border-radius: 0.25rem;
    font-weight: 500 !important;
    cursor: pointer;
    transition: all 300ms ease-out;
}

.a-candidato-acento:hover {
    background-color: var(--ac-acento-200);
    color: var(--ac-acento-500);
}

.a-candidato-acento:active {
    background-color: var(--ac-acento-300);
    color: var(--ac-acento-500);
    border: 1px solid var(--ac-acento-500)
}

.a-candidato {
    background-color: var(--ac-acento-500);
    color: white;
    padding: 1px 7px 1px 7px;
    border: 1px solid var(--ac-acento-500);
    border-radius: 0.25rem;
    font-weight: 500 !important;
    cursor: pointer;
    transition: all 300ms ease-out;
}

.a-candidato-acento:hover {
    background-color: var(--ac-acento-500);
    color: white
}

.a-candidato-acento:active {
    background-color: var(--ac-acento-300);
    color: var(--ac-acento-500);
    border: 1px solid var(--ac-acento-500)
}

.btn-disabled {
    background-color: #e5e7eb !important; /* gray-200 */
    color: #9ca3af !important; /* gray-400 */
    border: none !important;
    cursor: not-allowed;
    pointer-events: none;
}

.input-candidato {
    border: 1px solid var(--ac-borda-campo);
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    min-height: var(--ac-altura-campo);
    width: 100%;
    transition: border-color 0.2s ease;
}

.input-candidato:user-invalid {
    border-color: var(--ac-vermelho-500);
}

.select-candidato:user-invalid {
    border-color: var(--ac-vermelho-500);
}

.checkbox-candidato:user-invalid {
    border-color: var(--ac-vermelho-500);
}

.input-candidato:read-only {
    border: 1px solid oklch(92.8% 0.006 264.531);
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background-color: oklch(92.8% 0.006 264.531);
    width: 100%;
    transition: border-color 0.2s ease;
}

.input-candidato::placeholder {
    color: #DFE4EA;
}

.select-candidato {
    border: 1px solid var(--ac-borda-campo);
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    min-height: var(--ac-altura-campo);
    width: 100%;
    transition: border-color 0.2s ease;
}

.select-candidato:disabled {
    border: 1px solid oklch(92.8% 0.006 264.531);
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background-color: oklch(92.8% 0.006 264.531);
    width: 100%;
    transition: border-color 0.2s ease;
}

.select-candidato::placeholder {
    color: #DFE4EA;
}

.label-candidato {
    font-weight: 700 !important;
    color: var(--gray-900) !important;
    /*margin-bottom: 0.3rem;*/
    /*margin-top: 0.2rem;*/
}

.label-required::after {
    content: ' *';
    color: red;
}

.link-candidato a {
    color: var(--ac-acento-500);
    text-decoration: none;
    font-weight: 500;
}

.link-candidato-sublinhado a {
    color: var(--ac-acento-500);
    text-decoration: underline;
    font-weight: 500;
}

.input-candidato-arquivo {
    position: relative;
    display: block;
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #DFE4EA;
    border-radius: 0.25rem;
    background-color: white;
    color: #4B5563;
    font-size: 0.875rem;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.input-candidato-arquivo:hover {
    border-color: var(--ac-acento-500);
}

.input-candidato-arquivo:focus {
    border-color: var(--ac-acento-500);
    box-shadow: 0 0 0 1px var(--ac-acento-500);
}

.input-candidato-arquivo::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.25rem 0.75rem;
    border: none;
    border-radius: 0.25rem;
    background-color: var(--ac-acento-500);
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.input-candidato-arquivo::file-selector-button:hover {
    background-color: var(--ac-acento-600);
}

.select-candidato {
    border: 1px solid var(--ac-borda-campo);
    padding: 0.7rem 0.75rem;
    border-radius: 0.5rem;
    min-height: var(--ac-altura-campo);
    width: 100%;
    transition: border-color 0.2s ease;
    background-color: white;
    cursor: pointer;
}

.select-candidato:hover {
    border-color: var(--ac-acento-500);
}

.select-candidato:focus {
    border-color: var(--ac-acento-500);
    box-shadow: 0 0 0 1px var(--ac-acento-500);
}

body.modal-open {
    overflow: hidden;
    height: 100vh; /* Opcional: evita scroll por altura */
}

/*
 Compat: apps/AreaCandidato/Services/{Cadastro,Inscricao}Service.php geram
 esses nomes de classe em array PHP (fora do escopo desta entrega) e são
 consumidos pelo stepper de cadastro/inscrição. Mantidos como alias das
 variáveis renomeadas até um follow-up atualizar os dois Services.
*/
.text-cyan-proseleta-500 { color: var(--ac-acento-500); }
.bg-cyan-proseleta-500 { background-color: var(--ac-acento-500); }
.border-cyan-proseleta-500 { border-color: var(--ac-acento-500); }
.text-emerald-proseleta-500 { color: var(--ac-esmeralda-500); }
.bg-emerald-proseleta-500 { background-color: var(--ac-esmeralda-500); }
.border-emerald-proseleta-500 { border-color: var(--ac-esmeralda-500); }
.text-proseleta-green { color: var(--ac-verde-500); }
.bg-proseleta-green { background-color: var(--ac-verde-500); }
.border-proseleta-green { border-color: var(--ac-verde-500); }

/* No toque, todo botão respeita o alvo mínimo de 44px (o secundário fica 42px só no desktop) */
@media (max-width: 1023px) {
    .btn-candidato,
    .btn-candidato-danger,
    .btn-candidato-success,
    .btn-candidato-acento {
        min-height: var(--ac-altura-btn);
    }
}