/* =========================================
   COMPONENTE: FORMULÁRIOS (formulario.css)
   Responsável por TODOS os estilos de campo
   do sistema — funciona em qualquer contexto:
   página normal, modal, card, etc.
   ========================================= */

.form-padrao {
    background: var(--branco);
    padding: 32px;
    /* border-radius: 16px; */
    /* box-shadow: 0 4px 15px rgba(0,0,0,0.08); */
    /* max-width: 900px; */
    /* margin: 20px auto; */
}

/* O Django gera parágrafos (<p>) via {{ form.as_p }} */
.form-padrao p {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
    gap: 8px;
}

/* =========================================
   LABELS
   ========================================= */
.form-padrao p label {
    font-weight: 600;
    color: var(--cinza-6);
    font-size: 0.95rem;
}

/* =========================================
   INPUTS, SELECTS E TEXTAREAS
   ========================================= */
.form-padrao input:not([type="checkbox"]):not([type="radio"]),
.form-padrao select,
.form-padrao textarea,
.form-control {
    /* width: 100%; */
    /* padding: 12px 14px; */
    border: 1px solid var(--cinza-2);
    border-radius: 0px;
    /* background-color: var(--cinza-0); */
    font-family: var(--font-family);
    font-size: 1rem;
    color: var(--text-color);
    transition: all 0.2s ease;
}

.form-padrao input:not([type="checkbox"]):not([type="radio"]):focus,
.form-padrao select:focus,
.form-padrao textarea:focus,
.form-control:focus {
    border-color: var(--verde-medio);
    background-color: var(--branco);
    outline: none;
    /* box-shadow: 0 0 0 4px var(--verde-claro-hover); */
}

/* Área de texto */
textarea.form-control,
.form-padrao textarea {
    min-height: 120px;
    resize: vertical;
}

.select2-container .select2-search--inline .select2-search__field {
    min-height: auto; 
}
/* =========================================
   CHECKBOX E RADIO — Componente Global
   Funciona igual em qualquer contexto:
   modal, página normal, card, etc.
   A classe .form-padrao no <form> é tudo
   que você precisa.
   ========================================= */

/* O <p> gerado pelo Django que contém checkbox/radio
   vira um container estilizado igual aos outros inputs */
.form-padrao p:has(input[type="checkbox"]),
.form-padrao p:has(input[type="radio"]) {
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 12px 14px;
    background-color: var(--cinza-0);
    border: 1px solid var(--cinza-2);
    border-radius: 0px;
    margin-bottom: 14px;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.form-padrao p:has(input[type="checkbox"]):hover,
.form-padrao p:has(input[type="radio"]):hover {
    border-color: var(--verde-medio);
}

/* Estado marcado: container com destaque verde */
.form-padrao p:has(input[type="checkbox"]:checked),
.form-padrao p:has(input[type="radio"]:checked) {
    border-color: var(--verde-medio);
    background-color: #f0faf4;
}

/* O input em si: zeramos o visual nativo do browser
   e construímos do zero com nossas variáveis */
.form-padrao p > input[type="checkbox"],
.form-padrao p > input[type="radio"],
.form-padrao p label > input[type="checkbox"],
.form-padrao p label > input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px;
    padding: 0 !important;
    margin: 0 12px 0 0;
    border: 2px solid var(--cinza-3);
    border-radius: 5px;
    background-color: var(--branco);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

/* Radio é redondo */
.form-padrao p > input[type="radio"],
.form-padrao p label > input[type="radio"] {
    border-radius: 50% !important;
}

/* Marcado: fundo e borda verdes */
.form-padrao p > input[type="checkbox"]:checked,
.form-padrao p > input[type="radio"]:checked,
.form-padrao p label > input[type="checkbox"]:checked,
.form-padrao p label > input[type="radio"]:checked {
    background-color: var(--verde-medio);
    border-color: var(--verde-medio);
}

/* Ícone ✓ do checkbox */
.form-padrao p > input[type="checkbox"]:checked::after,
.form-padrao p label > input[type="checkbox"]:checked::after {
    content: '';
    display: block;
    width: 5px;
    height: 10px;
    border: 2px solid var(--branco);
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translate(1px, -1px);
    margin: 2px auto 0;
}

/* Ponto interno do radio */
.form-padrao p > input[type="radio"]:checked::after,
.form-padrao p label > input[type="radio"]:checked::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--branco);
    margin: 4px auto;
}

/* Label ao lado do checkbox/radio:
   perde o display:block herdado para não quebrar o layout */
.form-padrao p:has(input[type="checkbox"]) label,
.form-padrao p:has(input[type="radio"]) label {
    display: inline;
    cursor: pointer;
    margin-bottom: 0;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--cinza-6);
    user-select: none;
    flex: 1;
}

.form-padrao .file-input-container-form-control
{
    display: flex;
    flex-direction: column;
    border: 1px solid var(--cinza-2);
    border-radius: 0px;
    padding: 12px;
}

.form-padrao .file-input-container-form-control .file-current
{
    display: inline-flex !important;
    flex-direction: row !important;
    margin-bottom: 4px;
}

.form-padrao .file-input-container-form-control .file-clear-wrapper .form-check-input:checked{
    background-color: var(--verde-medio);
    border-color: var(--verde-medio);
}


.form-padrao .file-input-container-form-control .file-input-wrapper
{
    margin-top: 4px;
}

/* =========================================
   MENSAGENS DINÂMICAS DO FORMULÁRIO
   (Obrigatório, Limite de caracteres, Ajuda e Erros)
   ========================================= */

/* Texto de "(*obrigatório)" ao lado do label */
.obrigatorio-text {
    color: var(--vermelho-escuro);
    font-size: 0.85rem;
    font-weight: 400;
    margin-left: 6px;
}

/* Texto de "(máx: 250 caracteres)" ao lado do label */
.limite-text {
    color: var(--cinza-4);
    font-size: 0.85rem;
    font-weight: 400;
    margin-left: 6px;
}

/* Texto de ajuda padrão do Django (help_text) abaixo do input */
.help-text {
    display: block;
    color: var(--cinza-5);
    font-size: 0.85rem;
    margin-top: 4px;
    margin-bottom: 8px;
}

/* Mensagens de erro de validação do Django (ex: Campo em branco) */
.error-text {
    display: block;
    color: var(--vermelho-escuro);
    font-size: 0.85rem;
    font-weight: 700;
    margin-top: 4px;
    margin-bottom: 8px;
}


.form-padrao p:has(.custom-checkbox-para-help-text-quebrar-linha) {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .5rem;
}

.form-padrao p:has(.custom-checkbox-para-help-text-quebrar-linha) .help-text {
    grid-column: 1 / -1;
}