/* === FONTES === */
@font-face {
  font-family: 'LT Energy';
  src: url('/static/css/LT-Energy-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'LT Energy';
  src: url('fonts/LT-Energy-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'LT Energy Narrow';
  src: url('/static/css/LT-Energy-Narrow-Bold-Semi-Italic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

/* === CORES === */
:root {
  --primary: #1B1B39;
  --accent: #2E5BFF;
  --bg: #F4F5FB;
  --text-light: #C5CAE9;
  --card-bg: #FFFFFF;
  --shadow: rgba(27, 27, 57, 0.15);
}

/* === BASE === */
body {
  font-family: 'LT Energy', Arial, sans-serif;
  background: linear-gradient(165deg, #F4F5FB 0%, #E8EAF6 100%);
  color: var(--primary);
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* === CABEÇALHO === */
header {
  background: var(--primary);
  color: #fff;
  text-align: center;
  padding: 16px 0;
  font-family: 'LT Energy Narrow', sans-serif;
  font-size: 22px;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 16px rgba(27, 27, 57, 0.4);
  z-index: 10;
}

/* === CONTEÚDO === */
main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 10px 12px 80px;
}

.wrap {
  width: 100%;
  max-width: 980px;
  background: var(--card-bg);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 8px 24px var(--shadow);
}

/* === CARDS E GRID === */
.grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}
@media (max-width: 820px) {
  .grid { grid-template-columns: 1fr; }
}

.card {
  background: #FAFAFE;
  border: 1px solid #E4E6F0;
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 0.2s ease;
}
.card:hover {
  box-shadow: 0 4px 10px rgba(27,27,57,0.12);
}

/* === RÓTULOS === */
.label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--primary);
  font-family: 'LT Energy', sans-serif;
}

/* === CAMPOS === */
select, input {
  font-family: 'LT Energy', sans-serif;
  font-size: 100%;
  padding: 1% 1px;
  border: 1px solid #D8DAE0;
  border-radius: 8px;
  outline: none;
  transition: all 0.2s ease;
}
select:focus, input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(46, 91, 255, 0.2);
}
input.currency {
  text-align: right;
}

/* === BOTÕES === */
button {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  cursor: pointer;
  font-family: 'LT Energy Narrow', sans-serif;
  font-weight: bold;
  font-style: italic;
  font-size: 15px;
  transition: all 0.25s ease;
  box-shadow: 0 3px 8px rgba(46,91,255,0.25);
}
button:hover {
  background: #1B1B39;
  box-shadow: 0 4px 10px rgba(27,27,57,0.3);
}

/* === AJUDA E MENSAGENS === */
.hint {
  font-size: 12px;
  color: #555;
  margin-top: 4px;
}

.error-msg {
  color: #c0392b;
  font-size: 12px;
  font-style: italic;
  margin-top: 4px;
}

/* === JSON === */
.json-preview {
  background: #1B1B39;
  color: #E8EAF6;
  font-family: 'Courier New', monospace;
  padding: 12px;
  border-radius: 8px;
  font-size: 13px;
  overflow-x: auto;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
}

/* === RODAPÉ === */
footer {
  background: var(--primary);
  color: var(--text-light);
  text-align: center;
  padding: 14px 0;
  font-size: 13px;
  font-family: 'LT Energy', sans-serif;
  border-top: 2px solid var(--accent);
  box-shadow: 0 -4px 12px rgba(27, 27, 57, 0.3);
}

/* === RESPONSIVIDADE === */
@media (max-width: 600px) {
  main { padding: 70px 10px; }
  .wrap { padding: 18px; }
}


.action-right {
  display: flex;
  justify-content: center;  /* centraliza o botão */
  margin-top: 16px;         /* espaço abaixo do select */
}

.action-right button {
  background-color: var(--accent); /* azul */
  color: #fff;
  padding: 10px 22px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-family: 'LT Energy Narrow', sans-serif;
  font-weight: bold;
  font-style: italic;
  font-size: 15px;
  box-shadow: 0 3px 8px rgba(46,91,255,0.25);
  transition: all 0.25s ease;
}

.action-right button:hover {
  background-color: #1B1B39; /* escurece no hover */
  box-shadow: 0 4px 10px rgba(27,27,57,0.3);
}

.month-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 12px 10px;
  margin-top: 10px;
}

.month-table td {
  width: 50%;
}

.month-wrapper {
  position: relative;
}

.month-tag {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: #666;
  pointer-events: none;
}

.month-input {
  width: 70%;
  padding-left: 70px; /* espaço para o mês dentro da caixa */
  height: 20px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
  font-size: 14px;
  transition: border 0.2s, box-shadow 0.2s;
}

.month-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(45, 109, 255, 0.2);
  outline: none;
}

.campo-erro {
    border: 2px solid red !important;
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5) !important;
}


/* Estado base - FECHADO */
.rateio-container {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding: 0 12px; /* SEM padding vertical quando fechado */
  
  /* Estilos */
  background: #fbfcfe;
  border: 1px solid #dce3f5;
  border-radius: 8px;
  margin-top: 8px;
  
  /* Animação */
  transition: all 0.45s ease;
}

/* Estado ativo - ABERTO */
.rateio-container.active {
  opacity: 1;
  max-height: 420px; /* Altura suficiente para o conteúdo */
  padding: 10px 12px; /* COM padding vertical quando aberto */
}

/* === NOVAS REGRAS PARA O LAYOUT DOS RESULTADOS === */

/* Define o grid de 3 colunas para os resultados */
.results-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Três colunas de tamanho igual */
  gap: 16px; /* Espaçamento entre os cards */
  margin-top: 14px;
}

/* Define o grid de 2 colunas (caso o Fator-R não se aplique) */
.results-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 14px;
}

/* Faz os resultados empilharem em telas menores (celular) */
@media (max-width: 820px) {
  .results-grid-3,
  .results-grid-2 {
    grid-template-columns: 1fr; /* Uma coluna só */
  }
}

/* === NOVO ESTILO PARA O BOTÃO "MOSTRAR IMPOSTOS" === */

/* Estilo mais discreto para o botão de rateio */
.btn-rateio {
  background: none;              /* Remove o fundo azul */
  color: var(--accent);          /* Usa a cor de destaque (azul) para o texto */
  border: none;                  /* Remove a borda */
  box-shadow: none;              /* Remove a sombra */
  padding: 8px 0;                /* Remove preenchimento lateral, ajusta vertical */
  margin-top: 10px;
  font-family: 'LT Energy', sans-serif; /* Fonte normal, não a "Narrow Italic" */
  font-weight: 600;
  font-style: normal;            /* Remove o itálico */
  font-size: 13px;               /* Fonte menor */
  text-align: left;              /* Alinha o texto à esquerda */
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Efeito ao passar o mouse */
.btn-rateio:hover {
  background: none;              /* Mantém sem fundo */
  box-shadow: none;              /* Mantém sem sombra */
  color: var(--primary);         /* Escurece o texto */
  text-decoration: underline;    /* Adiciona sublinhado para parecer um link */
}

.results-grid-3 .card div[style*="font-weight:600"],
.results-grid-2 .card div[style*="font-weight:600"] {
  font-size: 15px; 
}

/* 2. Deixa os detalhes menores (13px) */
/* (Ex: "IRPJ: R$ 387,50..." e "Pró-labore (Base...): R$ 2.800,00") */
.rateio-container.active div,
#prolaboreCardContent div {
  font-size: 13px;
}

/* ====== CAMPO COM % ====== */
.percent-wrapper {
  position: relative;
  width: 100%;
}

.percent-wrapper input {
  width: 100%;
  font-family: 'LT Energy', sans-serif;
  font-size: 14px;
  text-align: right;
  padding: 8px 32px 8px 10px; /* mesmo padding dos outros + espaço p/ símbolo % */
  border: 1px solid #D8DAE0;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: var(--input-shadow, 0 1px 2px rgba(0,0,0,0.05));
  transition: all 0.2s ease;
  height: auto; /* deixa igual aos outros campos */
}

.percent-wrapper input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(46, 91, 255, 0.2);
}

.percent-wrapper::after {
  content: "%";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #555;
  font-size: 14px;
  pointer-events: none;
}

#iss-container {
  display: none;
}

#iss-container {
  display: none;
}

.percent-wrapper {
  position: relative;
  width: 100%;
}

.percent-wrapper input {
  width: 100%;
  height: 42px; /* igual ao select */
  font-family: 'LT Energy', sans-serif;
  font-size: 14px;
  text-align: right;
  padding: 0 32px 0 10px; /* mesmo padding, espaço à direita p/ o símbolo */
  border: 1px solid #D8DAE0;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: var(--input-shadow, 0 1px 2px rgba(0,0,0,0.05));
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.percent-wrapper input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(46, 91, 255, 0.2);
}

.percent-wrapper::after {
  content: "%";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #555;
  font-size: 14px;
  pointer-events: none;
}

.currency-wrapper {
  position: relative;
}

.currency-symbol {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  font-size: 14px;
  pointer-events: none;
}

.currency-input {
  width: 90%;
  padding-left: 42px !important;
  height: 25px;
  border: 1px solid #D8DAE0;
  border-radius: 8px;
  font-family: 'LT Energy', sans-serif;
  font-size: 14px;
}

/* --- Estilos para o layout de colunas (Grid) --- */

.grid-2-cols {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Duas colunas de largura igual */
    gap: 15px; /* Espaço entre as colunas */
    margin-bottom: 15px;
}

.grid-3-cols {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr; /* Ajuste as proporções das colunas (Desc, Tipo, Valor) */
    gap: 10px;
}

/* Garante que o input de descrição ocupe as 3 colunas e a seleção/valor fiquem lado a lado */
.grid-3-cols input[id^='desc'] {
    grid-column: 1 / span 3;
    margin-bottom: -5px; /* Ajusta o espaço abaixo da descrição */
}

/* Estilo para garantir que o contêiner do custo dinâmico não tenha padding excessivo */
.custo-item {
    display: block !important;
    margin-top: 8px;
    padding: 10px; /* Reduz o padding interno do custo */
}

/* Media Query para responsividade (opcional, mas recomendado) */
@media (max-width: 600px) {
    .grid-2-cols, .grid-3-cols {
        grid-template-columns: 1fr; /* Em telas menores, volta para uma coluna */
    }
    /* No grid de 3 colunas, força a seleção e o valor a ocuparem a linha toda em telas pequenas */
    .grid-3-cols select, .grid-3-cols #wrapper_val {
        grid-column: auto !important;
    }
}

/* === RODAPÉ (ATUALIZADO) === */
footer {
  background: var(--primary);     /* Mantém o fundo escuro padrão */
  color: var(--text-light);       /* Texto claro */
  border-top: 2px solid var(--accent); /* Borda azul no topo */
  box-shadow: 0 -4px 12px rgba(27, 27, 57, 0.3);
  
  /* Layout Flexbox para separar esquerda/direita */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;             /* Padding lateral maior */
  margin-top: auto;               /* Garante empurrão para o fim se necessário */
  font-family: 'LT Energy', sans-serif;
  font-size: 13px;
}

/* Lado Esquerdo: Texto + LinkedIn */
.footer-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-link {
  color: var(--text-light);
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
  text-decoration: none;
}

.footer-link:hover {
  color: #fff;
  transform: scale(1.1);
}

.linkedin-icon {
  stroke: var(--accent); /* Usa o azul do tema no ícone */
}
.footer-link:hover .linkedin-icon {
  stroke: #fff; /* Fica branco ao passar o mouse */
}

/* Lado Direito: Botão Report */
.footer-right {
  display: flex;
  align-items: center;
}

.btn-report {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05); /* Fundo translúcido sutil */
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-light);
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  font-size: 12px;
  transition: all 0.2s ease;
}

.btn-report:hover {
  background: var(--accent); /* Fica azul ao passar o mouse */
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(46, 91, 255, 0.3);
}

/* Responsividade do Rodapé */
@media (max-width: 600px) {
  footer {
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    text-align: center;
  }
  .footer-left {
    flex-direction: column;
    gap: 8px;
  }
}

/* === TOOLTIPS (AJUDA VISUAL) === */
.info-tooltip {
  position: relative;
  display: inline-flex;
  margin-left: 8px; /* Espaço entre o texto e a ? */
  cursor: help;
  color: #999; /* Cor discreta padrão */
  vertical-align: middle;
  transition: color 0.2s ease;
}

.info-tooltip:hover {
  color: var(--accent); /* Fica azul ao passar o mouse */
}

/* O Balão de Texto */
.info-tooltip::after {
  content: attr(data-text); /* Pega o texto do HTML */
  visibility: hidden;
  opacity: 0;
  
  /* Tamanho e Layout */
  width: 240px;
  background-color: var(--primary); /* Usa o azul escuro do tema */
  color: #fff;
  text-align: center;
  border-radius: 8px;
  padding: 10px 12px;
  font-family: 'LT Energy', sans-serif;
  font-size: 12px;
  line-height: 1.4;
  font-weight: normal;
  
  /* Posicionamento */
  position: absolute;
  z-index: 100;
  bottom: 135%; /* Fica acima do ícone */
  left: 50%;
  transform: translateX(-50%) translateY(10px); /* Começa um pouco mais baixo p/ animação */
  
  /* Sombra suave */
  box-shadow: 0 4px 12px rgba(27, 27, 57, 0.25);
  pointer-events: none; /* Evita que o mouse trave no balão */
  
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* A Seta (Triângulo) abaixo do balão */
.info-tooltip::before {
  content: "";
  position: absolute;
  visibility: hidden;
  opacity: 0;
  top: -5px; 
  left: 50%;
  margin-left: -6px;
  
  /* Desenha o triângulo via bordas */
  border-width: 6px;
  border-style: solid;
  border-color: var(--primary) transparent transparent transparent;
  
  transition: all 0.3s ease;
  transform: translateY(10px);
}

/* Estado Ativo (Hover) */
.info-tooltip:hover::after,
.info-tooltip:hover::before {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0); /* Animação de subida */
}

.info-tooltip:hover::before {
  transform: translateY(0); /* Ajuste específico da seta */
}

/* Ajuste para mobile: evita que o tooltip saia da tela se estiver muito na borda */
@media (max-width: 480px) {
  .info-tooltip::after {
    width: 200px;
    left: -80px; /* Desloca um pouco para a esquerda */
    transform: translateX(0) translateY(10px);
  }
  .info-tooltip:hover::after {
    transform: translateX(0) translateY(0);
  }
  .info-tooltip::before {
    left: 8px; /* Ajusta a seta */
    margin-left: 0;
  }
}









/* =========================================
   ESTILOS DO HOLERITE E IMPRESSÃO (LIMPO)
   ========================================= */

/* =========================================
   ESTILOS DO HOLERITE PROFISSIONAL
   ========================================= */

/* --- Visualização (Preview) --- */
.holerite-preview {
  background: #fff;
  padding: 0; /* Padding controlado internamente */
  font-family: 'Courier New', Courier, monospace; /* Fonte clássica de documento fiscal */
  font-size: 12px;
  max-width: 800px;
  margin: 20px auto;
  display: none;
  color: #000;
  
  /* Borda Externa Grossa */
  border: 2px solid #000;
  box-sizing: border-box;
}

/* Área interna com padding */
.hol-content {
    padding: 20px;
}

/* --- Cabeçalho --- */
.hol-header {
  border-bottom: 2px solid #000;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.hol-header-top {
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start;
}

.hol-header-bottom {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}

/* --- Tabela de Itens --- */
.hol-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-size: 11px;
}

.hol-table th {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  background-color: #f0f0f0;
  font-weight: bold;
  text-transform: uppercase;
  padding: 5px;
  text-align: left;
}

.hol-table td {
  padding: 4px 5px;
  border-bottom: 1px dotted #ccc; /* Linha pontilhada sutil entre itens */
}
/* Remove bordas laterais para visual mais limpo */
.hol-table th:first-child, .hol-table td:first-child { padding-left: 5px; }
.hol-table th:last-child, .hol-table td:last-child { padding-right: 5px; }

/* --- Rodapé e Totais --- */
.hol-footer {
  border-top: 2px solid #000;
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.box-bases {
    border: 1px solid #000;
    padding: 5px;
    font-size: 10px;
    width: 60%;
}

.box-totais {
    width: 35%;
    font-size: 11px;
}

.linha-total {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.box-liquido {
    background: #e6e6e6;
    border: 1px solid #000;
    padding: 8px;
    margin-top: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}

/* Assinatura */
.area-assinatura {
    margin-top: 40px;
    text-align: center;
    font-size: 10px;
}
.linha-assinatura {
    border-top: 1px solid #000;
    width: 60%;
    margin: 0 auto 5px auto;
}

/* --- Impressão --- */
@media print {
  body * { visibility: hidden; }
  
  /* Esconde interfaces */
  header, footer, #print-controls, .action-right, .card, #input-area, .wrap > h1 {
    display: none !important;
  }

  /* Modo Padrão */
  body.print-mode-padrao #holerite-area, 
  body.print-mode-padrao #holerite-area * {
    visibility: visible;
  }
  body.print-mode-padrao #holerite-area {
    position: absolute; left: 0; top: 0; width: 100%; 
    display: block !important; border: 2px solid #000; margin: 0;
  }

  /* Modo 2 Vias */
  body.print-mode-duplo #holerite-2vias-container,
  body.print-mode-duplo #holerite-2vias-container * {
    visibility: visible;
  }
  body.print-mode-duplo #holerite-2vias-container {
    position: absolute; left: 0; top: 0; width: 100%; display: block !important;
  }
  
  body.print-mode-duplo .holerite-preview {
    border: 1px solid #000; /* Borda um pouco mais fina para 2 vias */
    margin-bottom: 20px; 
    font-size: 10px; /* Fonte levemente menor para caber */
    page-break-inside: avoid;
  }
  
  /* Ajuste padding na impressão */
  .hol-content { padding: 15px; }
}