@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap');

/* --- Reset e Fontes --- */
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Satoshi', sans-serif;
  font-size: 16px;
  background-color: #034FA4 !important; /* Fundo azul geral */
}

/* --- Cores Utilitárias --- */
.color-primary { color: #034FA4 !important; }
.color-secondary { color: #535E63 !important; }
.text-muted { color: #6c757d !important; }

/* --- Inputs Estilo Linha (Para todos os tipos) --- */
.input-linha {
    border: none;
    border-bottom: 1px solid #535E63;
    border-radius: 0;
    padding: 8px 0 4px 0; /* Espaçamento interno */
    background-color: transparent;
    width: 100%;
    outline: none;
    transition: border-color 0.3s;
}

.input-linha:focus {
    box-shadow: none;
    border-bottom: 2px solid #009640; /* Verde ao focar */
}

/* Remove as setinhas de inputs numéricos (Chrome, Safari, Edge, Opera) */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* --- Checkbox/Switch Verde --- */
.form-check-input:checked {
    background-color: #009640;
    border-color: #009640;
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(0, 150, 64, 0.25);
    border-color: #009640;
}

/* --- Layout do Texto do Switch --- */
.label-compacto {
    line-height: 1.1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- Efeitos Visuais --- */
.hover-effect {
    transition: transform 0.2s;
}
.hover-effect:hover {
    transform: scale(1.02);
    cursor: pointer;
}

.programa-ativo{
    min-width: 100%;
    
}

.atual-dados{
    background-color: #B9D4F1 !important;
    color: #0060CC !important;
    border-color: #0060CC !important;
}

.concluido-dados{
    background-color: #CDEDBE !important;
    color: #51C300 !important;
    border-color: #51C300 !important;
}



/* =============================================================
   1. CONTAINER PRINCIPAL
   Controla a largura total e o comportamento do campo na linha.
   ============================================================= */
.select2-container--default {
    width: 100% !important;
}

/* =============================================================
   2. A CAIXA DE SELEÇÃO (O "INPUT" DE LINHA)
   Aqui é onde você define a borda inferior, altura e fundo.
   ============================================================= */
.select2-container--default .select2-selection--multiple {
    display: flex !important;
    flex-wrap: nowrap  !important;
    align-items: center;
    padding: 0;
    margin: 0;
    background-color: transparent; /* Remove o fundo branco */
    border: none;                  /* Remove todas as bordas */
    border-bottom: 1px solid #535E63; /* Aplica apenas a linha inferior */
    border-radius: 0;              /* Remove cantos arredondados */
    min-height: 36.5px;              /* Alinha com a altura dos outros inputs */
    outline: none !important;
    box-shadow: none !important;
    
}

/* Estado quando o campo está focado (clicado) */
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: none !important;
    border-bottom: 2px solid #009640 !important; /* Cor da linha ao focar */
    transition: all 0.2s ease;
    outline: none !important;
    box-shadow: none !important;
}

/* =============================================================
   3. ÁREA DAS TAGS (SELEÇÕES RENDERIZADAS)
   Controla como as tags e o texto se organizam (Flexbox aqui!)
   ============================================================= */
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    flex-wrap: nowrap  !important; /* 'nowrap' se quiser scroll horizontal, 'wrap' para quebrar linha */
    overflow-x: hidden;
    overflow-x: auto;
    padding: 0;
    margin: 0;
    list-style: none;
    gap: 4px;           /* Espaçamento entre as tags */
}

/* =============================================================
   4. AS TAGS SELECIONADAS (CHOICES)
   Estilize o retângulo das opções que o usuário já escolheu.
   ============================================================= */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #B9D4F1;   /* Cor de fundo da tag */
    border: 1px solid #0060CC;   /* Borda da tag */
    border-radius: 4px;       /* Arredondamento da tag */
    margin: 0;
    color: #0060CC;
    
}

/* O botão "X" de remover a tag */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #0060CC;
    margin-right: 5px;
    border: none;
    background: transparent;
}

/* O hover do botão "X" de remover a tag */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background-color: #0060CC;
    color: #B9D4F1; /* Cor ao passar o mouse no X */

}

/* =============================================================
   5. CAMPO DE BUSCA E PLACEHOLDER
   Controla o texto "Selecione..." e a digitação.
   ============================================================= */
.select2-search--inline {
    flex-grow: 1; /* Faz o campo de busca ocupar o espaço restante */
}

.select2-container--default .select2-selection--multiple .select2-search__field {
    text-align: center;  /* Alinhamento do placeholder */
    height: 26px;
    background: transparent !important;
}

/* Tira as bordas quando selecionado */
.select2-container--default.select2-container--open .select2-selection--multiple {
    border: none !important;
    border-bottom: 1px solid #535E63 !important; 
    border-radius: 0 !important; /* Evita que o Select2 tente arredondar os cantos superiores */
}
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-bottom: 2px solid #009640 !important;  /* Selecionado */
}


/* --- Responsividade Específica --- */
@media (max-width: 768px) {
    /* No celular, removemos os cantos arredondados internos para fluir melhor */
    #main-container .rounded-start, 
    #main-container .rounded-end {
        border-radius: 0 !important;
    }
    /* Padding menor no celular */
    .p-responsivo {
        padding: 3rem !important;
    }

    #main-container, .card-formulario { /* Use a classe ou ID da div branca principal */
        width: 95% !important; /* Em vez de 100%, usa 90% para sobrar espaço */
        margin-left: auto !important;
        margin-right: auto !important;
        /*border-radius: 15px !important;   */
    }

   .logo-programa {
        max-height: 150px;
        height: 45px;
        max-width: 100%;
   }
}

@media (min-width: 769px) {    
    .p-responsivo {
        font-size: 0.8rem;
    }

    .recaptcha-responsivo {
        transform: scale(0.85); 
        transform-origin: center;
    }
}

@media (min-width: 1400px) {
    .p-responsivo {
        font-size: 1.05rem;
    }

    .recaptcha-responsivo {
        transform: scale(0.95); 
        transform-origin: center;
    }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 * require_tree .
 * require sigmun-default
 * require custom


*/