@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

:root {
    --gray-200: #E5E7EB;
    --ciano-proseleta-100: #cfecff;
    --ciano-proseleta-200: #B8EAFF;
    --ciano-proseleta-300: #8DC6DE;
    --ciano-proseleta-500: #007CB0;
    --ciano-proseleta-600: #006894;
    --ciano-proseleta-700: #004C6B;

    --emerald-proseleta-500: #00BC7D;
    --emerald-proseleta-600: #009966;
    --emerald-proseleta-700: #007A55;

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

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

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

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

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

.bg-cyan-proseleta-500 {
    background-color: var(--ciano-proseleta-500);
}

.bg-cyan-proseleta-600 {
    background-color: var(--ciano-proseleta-600);
}

.text-cyan-proseleta-500 {
    color: var(--ciano-proseleta-500);
}

.text-cyan-proseleta-600 {
    color: var(--ciano-proseleta-600);
}

.text-cyan-proseleta-700 {
    color: var(--ciano-proseleta-700);
}

.border-cyan-proseleta-500 {
    border-color: var(--ciano-proseleta-500);
}

.bg-emerald-proseleta-500 {
    background-color: var(--emerald-proseleta-500);
}

.border-proseleta-green {
    border-color: var(--green-proseleta-500);
}

.bg-proseleta-green {
    background-color: var(--green-proseleta-500);
}

.text-emerald-proseleta-500 {
    color: var(--emerald-proseleta-500);
}

.text-proseleta-green {
    color: var(--green-proseleta-500);
}

.border-emerald-proseleta-500 {
    border-color: var(--emerald-proseleta-500);
}

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

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

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

.checkbox-proseleta:checked {
    border-color: var(--ciano-proseleta-500);
    background-color: var(--ciano-proseleta-500);
    position: relative;
}

.checkbox-proseleta: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-proseleta {
    background-color: var(--ciano-proseleta-500);
    color: white;
    padding: 1rem 1rem;
    border-radius: 0.50rem;
    font-weight: 500 !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-proseleta:hover {
    background-color: var(--ciano-proseleta-600);
    color: white;
}

.btn-proseleta:active {
    background-color: var(--ciano-proseleta-700);
    color: white;
}

.btn-proseleta-danger {
    background-color: var(--red-proseleta-500);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    font-weight: 500 !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

btn-proseleta-danger:hover {
    background-color: var(--red-proseleta-600);
    color: white;
}

btn-proseleta-danger:active {
    background-color: var(--red-proseleta-700);
    color: white;
}

.btn-proseleta-success {
    background-color: var(--green-proseleta-500);
    color: white;
    padding: 0.7rem 1rem;
    border-radius: 0.25rem;
    font-weight: 500 !important;
    cursor: pointer;
    transition: all 300ms ease-out;
}

.btn-proseleta-success:hover {
    background-color: var(--green-proseleta-600);
    color: white;
}

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

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

.a-proseleta-success:hover {
    background-color: var(--emerald-proseleta-600);
    color: white;
}

.a-proseleta-success:active {
    background-color: var(--emerald-proseleta-700);
    color: white;
    border: 1px solid var(--green-proseleta-600)
}

.btn-proseleta-ciano {
    background-color: white;
    color: var(--ciano-proseleta-500);
    border: 1px solid var(--ciano-proseleta-500);
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    font-weight: 500 !important;
    cursor: pointer;
    transition: all 300ms ease-out;
}

.btn-proseleta-ciano:hover {
    background-color: var(--ciano-proseleta-200);
    color: var(--ciano-proseleta-500);
}

.btn-proseleta-ciano:active {
    background-color: var(--ciano-proseleta-300);
    color: var(--ciano-proseleta-500);
    border: 1px solid var(--ciano-proseleta-500)
}

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

.a-proseleta-ciano:hover {
    background-color: var(--ciano-proseleta-200);
    color: var(--ciano-proseleta-500);
}

.a-proseleta-ciano:active {
    background-color: var(--ciano-proseleta-300);
    color: var(--ciano-proseleta-500);
    border: 1px solid var(--ciano-proseleta-500)
}

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

.a-proseleta-ciano:hover {
    background-color: var(--ciano-proseleta-500);
    color: white
}

.a-proseleta-ciano:active {
    background-color: var(--ciano-proseleta-300);
    color: var(--ciano-proseleta-500);
    border: 1px solid var(--ciano-proseleta-500)
}

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

.input-proseleta {
    border: 1px solid #DFE4EA;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    width: 100%;
    outline: none;
    transition: border-color 0.2s ease;
}

.input-proseleta:user-invalid {
    border-color: var(--red-proseleta-500);
}

.select-proseleta:user-invalid {
    border-color: var(--red-proseleta-500);
}

.checkbox-proseleta:user-invalid {
    border-color: var(--red-proseleta-500);
}

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

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

.select-proseleta {
    border: 1px solid #DFE4EA;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    width: 100%;
    outline: none;
    transition: border-color 0.2s ease;
}

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

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

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

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

.link-proseleta a {
    color: var(--ciano-proseleta-500);
    text-decoration: none;
    font-weight: 500;
}

.link-underline-proseleta a {
    color: var(--ciano-proseleta-500);
    text-decoration: underline;
    font-weight: 500;
}

.input-file-proseleta {
    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-file-proseleta:hover {
    border-color: var(--ciano-proseleta-500);
}

.input-file-proseleta:focus {
    outline: none;
    border-color: var(--ciano-proseleta-500);
    box-shadow: 0 0 0 1px var(--ciano-proseleta-500);
}

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

.input-file-proseleta::file-selector-button:hover {
    background-color: var(--ciano-proseleta-600);
}

.select-proseleta {
    border: 1px solid var(--gray-200);
    padding: 0.7rem 0.75rem;
    border-radius: 0.25rem;
    width: 100%;
    outline: none;
    transition: border-color 0.2s ease;
    background-color: white;
    cursor: pointer;
}

.select-proseleta:hover {
    border-color: var(--ciano-proseleta-500);
}

.select-proseleta:focus {
    outline: none;
    border-color: var(--ciano-proseleta-500);
    box-shadow: 0 0 0 1px var(--ciano-proseleta-500);
}

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