/* =========================================
   ESTRUTURA PRINCIPAL
   ========================================= */
body {
    background-color: #f2f2f2;
    font-family: 'Arial', sans-serif;
    color: #0f1111;
    padding: 20px;
}

.container-principal {
    max-width: 1000px;
    margin: 0 auto;
}

/* =========================================
   SEÇÃO: BARRA DE PROGRESSO (ESTILO KDP)
   ========================================= */
.kdp-progress-section {
    margin-bottom: 20px;
}

.kdp-progress-bar {
    display: flex;
    gap: 5px;
    background-color: #e9eded;
    padding: 10px 10px 0 10px;
}

.kdp-tab {
    flex: 1;
    background-color: #f3f3f3;
    padding: 15px 20px;
    cursor: default;
    border-bottom: 3px solid transparent;
}

/* Aba Ativa */
.kdp-tab.active {
    background-color: #ffffff;
    border-bottom: 3px solid #d56a00; /* Linha laranja KDP */
}

/* Títulos das abas */
.kdp-tab-title {
    font-size: 16px;
    font-weight: 700;
    color: #0f1111;
    margin-bottom: 5px;
}

.kdp-tab:not(.active) .kdp-tab-title {
    color: #565959;
    font-weight: 600;
}

/* Status (Em andamento / Não iniciado) */
.kdp-tab-status {
    font-size: 13px;
    color: #007185;
    display: flex;
    align-items: center;
    gap: 5px;
}

.kdp-tab-status i {
    font-size: 14px;
}

/* =========================================
   SEÇÃO: FORMULÁRIOS (CAIXA BRANCA)
   ========================================= */
.kdp-form-section {
    margin-bottom: 20px;
}

.kdp-box {
    background-color: #ffffff;
    border: 1px solid #d5d9d9;
    border-radius: 2px;
    padding: 0 60px;
}

.kdp-row {
    display: flex;
    padding: 25px 0;
    /* Se houver mais itens na mesma caixa depois, a gente adiciona uma borda inferior aqui */
}

.kdp-label-col {
    width: 250px; /* Largura fixa para manter tudo alinhado */
    flex-shrink: 0;
}

.kdp-label-col h3 {
    font-size: 16px;
    font-weight: 700;
    color: #444;
    margin: 0;
}

.kdp-input-col {
    flex: 1;
}

/* Textos de Ajuda e Links Azuis */
.kdp-help-text {
    font-size: 13px;
    color: #0f1111;
    margin-top: 0;
    margin-bottom: 15px;
    line-height: 1.5;
}

.kdp-help-text a {
    color: #007185;
    text-decoration: none;
}

.kdp-help-text a:hover {
    text-decoration: underline;
    color: #c45500;
}

/* Estilo do Dropdown (Select) */
.kdp-select {
    width: 100%;
    max-width: 300px; /* Para não ocupar a tela toda, igual na imagem */
    padding: 8px 10px;
    border: 1px solid #888c8c;
    border-radius: 3px;
    background-color: #f3f3f3; /* Fundo levemente cinza do KDP */
    font-size: 14px;
    color: #0f1111;
    outline: none;
    box-shadow: 0 1px 2px rgba(15,17,17,.15) inset;
    cursor: pointer;
}

.kdp-select:focus {
    border-color: #007185;
    box-shadow: 0 0 0 3px rgba(0,113,133,.3) inset;
}

/* =========================================
   INPUTS DE TEXTO E ETIQUETAS (LABELS)
   ========================================= */
.kdp-input-group {
    margin-bottom: 20px;
}

.kdp-input-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #0f1111;
    margin-bottom: 5px;
}

/* O texto "(Opcional)" fica com a fonte normal e mais clara */
.kdp-optional-text {
    font-weight: 400;
    color: #565959;
}

/* Estilo da caixa de digitação (Input) */
.kdp-text-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #888c8c;
    border-radius: 7px;
    background-color: #ffffff;
    font-size: 14px;
    color: #0f1111;
    outline: none;
    box-shadow: 0 1px 2px rgba(15,17,17,.15) inset;
    transition: all 0.2s ease;
}

/* Efeito ao clicar no Input (Azul KDP) */
.kdp-text-input:focus {
    border-color: #007185;
    box-shadow: 0 0 0 3px rgba(0,113,133,.3) inset;
}

/* =========================================
   BOTÕES SECUNDÁRIOS (KDP STYLE)
   ========================================= */
.kdp-btn-secondary {
    background-color: #ffffff;
    border: 1px solid #d5d9d9;
    border-radius: 12px; /* Deixa o formato de pílula bem redondinho */
    box-shadow: 0 2px 5px 0 rgba(213,217,217,.5);
    color: #0f1111;
    cursor: pointer;
    font-size: 14px; /* Fonte um pouco maior */
    padding: 11.5px 24px; /* Aumenta a altura e a largura do botão */
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    font-family: inherit;
}

/* Efeito ao passar o mouse */
.kdp-btn-secondary:hover {
    background-color: #f7fafa;
    box-shadow: 0 2px 5px 0 rgba(213,217,217,.8);
}

/* =========================================
   ALINHAMENTO EXATO (AUTOR E COLABORADORES)
   ========================================= */
.kdp-inline-inputs {
    display: flex;
    gap: 8px; /* Espaço um pouco menor para garantir que tudo caiba */
    align-items: center;
    flex-wrap: nowrap; 
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px;
}

/* Usando porcentagens para garantir que NUNCA vazem da caixa branca */
.kdp-w-role   { width: 15%; min-width: 65px; } /* Select */
.kdp-w-prefix { width: 10%; min-width: 55px; } /* Dr., Prof. */
.kdp-w-name   { width: 22%; min-width: 80px; } /* Nome e Sobrenome */
.kdp-w-middle { width: 13%; min-width: 60px; } /* N. do meio */
.kdp-w-suffix { width: 10%; min-width: 55px; } /* Jr., etc. */

.kdp-inline-inputs .kdp-input {
    height: 34px; 
    padding: 6px 8px;
    box-sizing: border-box;
    border-radius: 6px; /* AUMENTE ESTE NÚMERO SE QUISER AINDA MAIS REDONDO */
    border: 1px solid #888c8c; /* Mantém a borda cinza */
}

.kdp-inline-inputs .kdp-select {
    height: 34px;
    padding: 6px;
    background-color: #f3f3f3;
    border-radius: 6px; /* MESMO NÚMERO AQUI */
    border: 1px solid #888c8c;
}

.kdp-btn-remove {
    height: 34px;
    padding: 0 12px;
    flex-shrink: 0; /* O botão de remover mantém o tamanho original */
}

/* =========================================
   EDITOR DE TEXTO (DESCRIÇÃO)
   ========================================= */
.kdp-editor-wrapper {
    border: 1px solid #a6a6a6; /* Borda um pouco mais escura que o normal */
    border-radius: 2px;
    background: #ffffff;
    margin-bottom: 5px;
    display: flex;
    flex-direction: column;
    resize: vertical; /* Permite esticar a caixa toda para baixo */
    overflow: hidden;
    min-height: 250px; /* Altura inicial da caixa */
}

/* Barra de ferramentas superior */
.kdp-editor-toolbar {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    border-bottom: 1px solid #e7e7e7;
    background-color: #fafafa;
    gap: 5px;
}

/* Botões da barra de ferramentas */
.kdp-toolbar-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    padding: 6px 10px;
    color: #333;
    font-size: 13px;
    display: flex;
    align-items: center;
    transition: 0.2s;
}

.kdp-toolbar-btn:hover {
    background-color: #e9eded;
    border-color: #d5d9d9;
}

/* Linha separadora vertical */
.kdp-toolbar-divider {
    width: 1px;
    height: 18px;
    background-color: #d5d9d9;
    margin: 0 5px;
}

/* A área de texto em si */
.kdp-editor-textarea {
    flex: 1; /* Preenche todo o espaço entre a toolbar e a statusbar */
    width: 100%;
    border: none;
    padding: 15px;
    font-size: 14px;
    font-family: Arial, sans-serif;
    color: #0f1111;
    resize: none; /* Desativa o resize padrão do textarea, pois a wrapper já faz isso */
    outline: none;
    box-sizing: border-box;
}

/* Barra cinza na parte de baixo do editor */
.kdp-editor-statusbar {
    height: 22px;
    background-color: #f2f2f2;
    border-top: 1px solid #e7e7e7;
    flex-shrink: 0;
}

/* =========================================
   CONTADOR DE CARACTERES
   ========================================= */
.kdp-char-counter {
    text-align: right;
    color: #0f1111;
    line-height: 1.2;
}

.kdp-char-counter strong {
    font-size: 18px;
    font-weight: 700;
}

.kdp-char-counter span {
    font-size: 12px;
}

/* =========================================
   BOTÕES DE RÁDIO (RADIO BUTTONS)
   ========================================= */
.kdp-radio-group {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Espaçamento vertical entre as opções */
}

.kdp-radio-label {
    display: flex;
    align-items: flex-start;
    gap: 8px; /* Espaço entre a bolinha e o texto */
    font-size: 14px;
    color: #0f1111;
    cursor: pointer;
    line-height: 1.4;
}

.kdp-radio-label input[type="radio"] {
    margin-top: 3px; /* Alinha a bolinha com a primeira linha de texto */
    width: 15px;
    height: 15px;
    cursor: pointer;
}

/* =========================================
   TÍTULOS INTERNOS E COLUNAS LADO A LADO
   ========================================= */
.kdp-sub-heading {
    font-size: 14px;
    font-weight: 700;
    color: #0f1111;
    margin-bottom: 5px;
}

.kdp-flex-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap; /* Se a tela for pequena, quebra para baixo */
}

.kdp-half-width {
    flex: 1; /* Divide o espaço igualmente */
    max-width: 250px; /* Impede que os selects fiquem gigantes */
}

/* Select mais arredondado e alto (específico para a área de Idade) */
.kdp-rounded-select {
    border-radius: 8px !important;
    height: 36px !important;
    border-color: #888c8c;
    box-shadow: 0 1px 2px rgba(15,17,17,.15) inset;
}

/* =========================================
   CAIXA DE AVISO (ALERTA KDP)
   ========================================= */
.kdp-alert-info {
    display: flex;
    gap: 15px;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #008296; /* Cor do contorno (Teal) */
    border-left: 6px solid #008296; /* Borda grossa na esquerda */
    border-radius: 4px;
    padding: 14px 18px;
    margin-top: 20px;
    color: #0f1111;
    font-size: 13px;
    line-height: 1.5;
}

.kdp-alert-info i {
    color: #008296;
    font-size: 20px;
}

/* Quando os campos são desativados, eles ficam mais transparentes */
.kdp-select:disabled {
    background-color: #e9eded;
    color: #888;
    cursor: not-allowed;
}

/* =========================================
   CAIXA DE ERRO (ALERTA VERMELHO KDP)
   ========================================= */
.kdp-alert-error {
    display: flex;
    gap: 15px;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #c40000; /* Contorno vermelho escuro */
    border-left: 6px solid #c40000; /* Borda grossa de destaque na esquerda */
    border-radius: 4px;
    padding: 14px 18px;
    color: #0f1111;
    font-size: 13px;
    line-height: 1.5;
}

.kdp-alert-error i {
    color: #c40000;
    font-size: 20px;
}

/* =========================================
   CHECKBOXES (CAIXAS DE SELEÇÃO MULTIPLA)
   ========================================= */
.kdp-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kdp-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px; /* Espaço entre o quadradinho e o texto */
    font-size: 13px;
    color: #0f1111;
    cursor: pointer;
    line-height: 1.4;
}

.kdp-checkbox-label input[type="checkbox"] {
    margin-top: 2px; /* Alinha o quadradinho com a primeira linha do texto */
    width: 14px;
    height: 14px;
    cursor: pointer;
}

/* Estilo para quando o botão estiver bloqueado (disabled) pelo JavaScript */
.kdp-btn-secondary:disabled {
    background-color: #f3f3f3;
    color: #888c8c;
    border-color: #d5d9d9;
    box-shadow: none;
    cursor: not-allowed;
}

/* =========================================
   GRADE DE PALAVRAS-CHAVE (CORRIGIDA)
   ========================================= */
.kdp-keywords-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Duas colunas iguais */
    gap: 10px 15px; /* Espaço entre as caixas */
    width: 100%; /* Ocupa toda a largura da coluna da direita */
    max-width: 700px; /* Limita para não ficar largo demais em telas grandes */
    box-sizing: border-box;
}

/* Garante que os inputs não passem do limite da grade */
.kdp-keywords-grid .kdp-text-input {
    width: 100%; 
    box-sizing: border-box; /* Fundamental para a borda não empurrar a caixa pra fora */
    height: 32px; /* Altura padrão KDP */
}

/* Ajuste para o item 7 não esticar se você não quiser */
.kdp-keywords-grid input:last-child {
    grid-column: 1 / 2; /* Mantém na primeira coluna, igual ao print */
}

/* =========================================
   SEÇÕES 13 E 14: DATAS E CAIXAS DE SELEÇÃO
   ========================================= */

/* 1. CAIXA DE AVISO AZULADA (NÃO QUALIFICADO) */
.kdp-alert-info {
    display: flex;
    gap: 15px;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #008296; /* Borda fina Azul/Teal */
    border-left: 6px solid #008296; /* Borda grossa na esquerda */
    border-radius: 4px;
    padding: 14px 18px;
    color: #0f1111;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 20px;
}

.kdp-alert-info i {
    color: #008296;
    font-size: 20px;
}

.kdp-alert-info strong {
    font-size: 14px;
    font-weight: 700;
}

/* 2. GRUPO DE OPÇÕES (A caixa principal arredondada) */
.kdp-radio-card-group {
    border: 1px solid #d5d9d9;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 3. CADA OPÇÃO (Fundo cinza por padrão = Inativo) */
.kdp-radio-card {
    display: flex;
    padding: 14px 18px;
    background-color: #f7fafa; /* Cinza clarinho */
    border-bottom: 1px solid #d5d9d9; /* Linha divisória entre as opções */
    cursor: pointer;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
}

/* Remove a linha divisória da última opção para não ficar dupla */
.kdp-radio-card:last-child {
    border-bottom: none;
}

/* 4. OPÇÃO SELECIONADA (Fundo Branco = Ativo) */
.kdp-radio-card.active {
    background-color: #ffffff;
}

/* 5. OPÇÃO BLOQUEADA (Agendar lançamento) */
.kdp-radio-card.disabled {
    background-color: #f7fafa;
    cursor: not-allowed;
}

.kdp-radio-card.disabled .kdp-radio-card-content strong {
    color: #565959; /* Texto do título mais apagado */
    font-weight: 400;
}

/* 6. BOLINHA DE SELEÇÃO (Radio Button) */
.kdp-radio-card input[type="radio"] {
    margin-top: 3px; /* Alinha com a primeira linha do título */
    cursor: pointer;
    width: 15px;
    height: 15px;
}

.kdp-radio-card.disabled input[type="radio"] {
    cursor: not-allowed;
}

/* 7. CONTEÚDO DE TEXTO DA OPÇÃO */
.kdp-radio-card-content {
    flex: 1;
}

.kdp-radio-card-content strong {
    font-size: 14px;
    color: #0f1111;
    font-weight: 700;
    display: block; /* Garante que ocupe uma linha própria */
}

/* 8. CONTEÚDO EXPANDIDO (Textos da data anterior) */
.kdp-expanded-content {
    margin-top: 8px;
}

.kdp-expanded-content p {
    font-size: 13px;
    color: #0f1111;
    line-height: 1.4;
    margin-bottom: 12px;
}

/* 9. CAMPO DE DIGITAÇÃO DA DATA + ÍCONE DE CALENDÁRIO */
.kdp-date-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kdp-date-input-row .kdp-text-input {
    width: 200px;
    height: 32px;
    padding: 5px 10px;
    border: 1px solid #888c8c;
    border-radius: 3px;
    font-size: 13px;
    outline: none;
    box-shadow: 0 1px 2px rgba(15,17,17,.15) inset;
}

.kdp-date-input-row .kdp-text-input:focus {
    border-color: #007185;
    box-shadow: 0 0 0 3px rgba(0,113,133,.3) inset;
}

.kdp-date-input-row i {
    color: #007185;
    font-size: 18px;
    cursor: pointer;
}

/* =========================================
   RODAPÉ DE AÇÕES (FINAL DA PÁGINA)
   ========================================= */
.kdp-footer-actions {
    display: flex;
    justify-content: flex-end; /* Alinha tudo à direita */
    align-items: flex-start;
    gap: 15px;
    padding: 40px 0 60px 0;
    margin-top: 20px;
    border-top: 1px solid #d5d9d9;
}

/* Container para o botão principal e o texto de "Próxima etapa" */
.kdp-primary-group {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza o texto embaixo do botão */
    gap: 8px;
}

/* Botão Amarelo (Estilo Novo KDP) */
.kdp-btn-primary {
    background-color: #FFD814;
    border: 1px solid #FCD200;
    border-radius: 12px; /* Formato pílula */
    color: #0f1111;
    cursor: pointer;
    font-size: 14px;
    padding: 10px 30px;
    box-shadow: 0 2px 5px 0 rgba(213,217,217,.5);
    transition: background-color 0.2s;
    width: auto;
}

.kdp-btn-primary:hover {
    background-color: #F7CA00;
}

/* Texto informativo embaixo do botão */
.kdp-next-step-label {
    font-size: 13px;
    color: #565959;
    font-weight: 400;
}

/* Garantindo que o secundário siga o mesmo formato pílula */
.kdp-btn-secondary {
    border-radius: 12px !important;
    padding: 10px 25px !important;
}

.kdp-datepicker {
    position: absolute;
    background: #ffffff;
    border: 1px solid #a6a6a6;
    border-radius: 3px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    font-family: Arial, sans-serif;
    z-index: 9999;
    width: 230px;
    margin-top: 4px;
}
.kdp-datepicker-header {
    background: linear-gradient(to bottom, #fbc665, #f59b22);
    border-bottom: 1px solid #c97e1c;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    font-weight: 700;
    font-size: 14px;
    border-radius: 2px 2px 0 0;
}
.kdp-datepicker-header button {
    background: transparent;
    border: none;
    color: #ffffff;
    cursor: pointer;
    font-size: 16px;
    opacity: 0.8;
}
.kdp-datepicker-header button:hover { opacity: 1; }
.kdp-datepicker-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    text-align: center;
    background: #ffffff;
}
.kdp-datepicker-grid th { font-weight: 700; padding: 6px 0; color: #333333; font-size: 12px; }
.kdp-datepicker-grid td { border: 1px solid #e7e7e7; padding: 5px; cursor: pointer; color: #007185; }
.kdp-datepicker-grid td:hover:not(.disabled) { background: #f0f7f8; }
.kdp-datepicker-grid td.disabled, .kdp-datepicker-grid td.other-month { color: #a6a6a6; cursor: default; background: #fcfcfc; }
.kdp-datepicker-grid td.today { background: #fffcee; border: 1px solid #eeb933; font-weight: 700; }

/* =========================================
   BOTÕES DE INTERRUPTOR (TOGGLE SWITCH)
   ========================================= */

/* Caixa em volta do texto e do botão */
.kdp-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border: 1px solid #d5d9d9;
    border-radius: 8px;
    background-color: #fafafa;
}

/* O tamanho do botão inteiro */
.kdp-toggle-switch {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 30px;
    flex-shrink: 0; /* Impede o botão de espremer */
}

/* Esconde o checkbox feio original do navegador */
.kdp-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* O fundo do botão (Começa Cinza Escuro) */
.kdp-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #888c8c; /* Cinza de fundo quando desligado */
    transition: 0.3s;
    border-radius: 4px; /* Deixa o fundo com aspecto mais quadrado */
}

/* O "Cubo" de dentro (Sempre Cinza Claro) */
.kdp-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: #f3f3f3; /* Cubo cinza claro */
    transition: 0.3s;
    border-radius: 4px; /* Formato de cubo */
    box-shadow: 0 1px 3px rgba(0,0,0,0.3); /* Dá uma sombrinha de relevo */
}

/* ===== ESTADOS QUANDO ESTÁ ATIVADO (CHECKED) ===== */

/* Fundo fica Verde quando ativado */
.kdp-toggle-switch input:checked + .kdp-slider {
    background-color: #128937; /* Verde KDP/Amazon */
}

/* Cubo desliza para a direita quando ativado */
.kdp-toggle-switch input:checked + .kdp-slider:before {
    transform: translateX(26px);
}

/* =========================================
   TABELA DE PREÇOS (KDP)
   ========================================= */
.kdp-pricing-table-wrapper {
    width: 100%;
    overflow-x: auto;
    margin-top: 20px;
    border: 1px solid #d5d9d9;
    border-radius: 4px;
}

.kdp-pricing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    text-align: left;
}

.kdp-pricing-table th {
    background-color: #f7fafa;
    border-bottom: 1px solid #d5d9d9;
    padding: 12px 15px;
    font-weight: 700;
    color: #565959;
    white-space: nowrap;
}

.kdp-pricing-table td {
    border-bottom: 1px solid #d5d9d9;
    padding: 15px;
    vertical-align: top;
    color: #0f1111;
}

.kdp-pricing-table tr:last-child td {
    border-bottom: none;
}

.kdp-price-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.kdp-price-input {
    width: 90px;
    padding: 6px 8px;
    border: 1px solid #888c8c;
    border-radius: 3px;
    text-align: right;
    font-size: 14px;
}

.kdp-price-input:focus {
    border-color: #007185;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,113,133,0.2);
}

.kdp-price-subtext {
    font-size: 11px;
    color: #565959;
    line-height: 1.4;
}

/* Estilo base das Abas */
.kdp-tab {
    flex: 1;
    background-color: #ffffff;
    border: 1px solid #d5d9d9;
    padding: 15px 20px;
    cursor: default;
    position: relative;
}

.kdp-tab-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.kdp-tab-content strong {
    color: #0f1111;
    font-size: 15px;
}

/* Linha Laranja da Aba Ativa */
.kdp-tab.active {
    border-bottom: 4px solid #e77600; /* Laranja Amazon */
}

/* Cores dos Status */
.status-concluida { color: #008a00; font-size: 13px; font-weight: bold; }
.status-andamento { color: #007185; font-size: 13px; font-weight: bold; }
.status-espera    { color: #565959; font-size: 13px; font-weight: bold; }

/* Ajuste do ícone de info (o "i" azul) */
.fa-circle-info { color: #007185; }
.fa-circle-check { color: #008a00; }

/* ===================================================================
   ESTILOS DO MODAL DE CATEGORIAS
   =================================================================== */
.kdp-modal {
    position: fixed;
    z-index: 1000; /* Fica acima de tudo */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Fundo escuro transparente */
    display: flex;
    align-items: center;
    justify-content: center;
}

.kdp-modal-content {
    background-color: #fff;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    max-height: 85vh; /* Altura máxima da tela (evita quebrar) */
    display: flex;
    flex-direction: column; /* Permite dividir em cabeçalho, corpo e rodapé */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.kdp-modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kdp-modal-close {
    font-size: 28px;
    cursor: pointer;
    color: #555;
    line-height: 1;
}

.kdp-modal-close:hover {
    color: #000;
}

.kdp-modal-body {
    padding: 20px;
    overflow-y: auto; /* AQUI FICA A ROLAGEM! */
    flex-grow: 1;
}

.kdp-category-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kdp-category-item {
    cursor: pointer;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    transition: background-color 0.2s;
}

.kdp-category-item:hover {
    background-color: #f7f7f7;
}

.kdp-modal-footer {
    padding: 15px 20px;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: flex-end; /* ALINHA O BOTÃO NA INFERIOR DIREITA */
    background-color: #fbfbfb;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}