/* ====== PALETA DE CORES ====== */
:root {
  --azul-principal: #0066ff;  /* azul vibrante */
  --azul-hover: #0047b3;      /* azul escuro profissional */
  --azul-claro: #e6f0ff;      /* fundo leve */
  --cinza-fundo: #f5f7fa;     /* fundo da página */
  --texto-escuro: #222;       /* texto principal */
}
* {
  box-sizing: border-box;
}

body {
  background: var(--cinza-fundo);
 /* background: #f0f1f2;
    background: #f6f5f2;
  background: #f9f8f6;*/
  font-family: Arial, sans-serif;
  
  padding: 47px 0px 0px 0px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  
  /* veio do p{...} 
  color: #444;*/
  color: var(--texto-escuro);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.2px;
  font-weight: 400;
  margin-left: 0px;
  margin-right: 0px;
}

/* Containers principais */
.containers {
  /*background: #f3f2ef;*/
  /*background: #f5f4f2;
  background: #eeeae4;*/
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 900px;
  padding: 5px 10px 10px 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.container {
  background: #fff;
  /*flex: 1 1 300px;*/
  /*flex: 1 1 200px;*/
  /*justify-content: space-between; /* distribui topo e base */
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  max-width: 420px;
  padding: 20px;
  border-radius: 8px;
  /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);*/
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

h1, h2 {
  /*border-bottom: 2px solid #4DA3FF; /* linha azul moderna */
  /*position: relative;*/
  /*padding: 6px 12px;*/
  margin-top: 0px;/**/
  border: 0.5px solid rgba(0, 0, 0, 0.1); /* Borda super fina e sutil */
  box-shadow: 0 1px 3px rgba(0,0,0,0.03); /* sombra opcional */
  transition: box-shadow 0.3s ease;
  /*border-radius: 6px;*/
  border-radius: 8px;
  text-align: center;
  text-transform: capitalize;
  /* background: #fdfdfd; quase branco, mantém leveza 
  background: #f9f9f9;
  color: #333;*/
  background: var(--azul-claro);
  color: var(--azul-principal);
}

h1 {
  font-size: 20px;
}

h2 {
  font-size: 18px;
}

/* Destacar ao focar ou interagir */
h1:hover, h2:hover {
  box-shadow: 0 2px 5px rgba(0,0,0,0.06);
  cursor: pointer;
}

hr {
  border: none;
  box-shadow: none;
  font-weight: bold;
  border-top: 1px solid rgba(0, 0, 0, 0.1); /* Linha sutil */
  margin: 20px;
  width: 100%;
  max-width: 100%;
  height: 1px;
  background-color: transparent;
}

p {
  color: #444;
  line-height: 1.6;
  margin: 10px 0;
  letter-spacing: 0.2px;
  font-size: 15px;
  font-weight: 400;
  padding-left: 6px;
  /*border-left: 3px solid #c0c0c0 /*#007BFF;*/
  border-radius: 8px;
  background: #f9f9f9;
}

label {
  display: block;
  margin-top: 10px;
  margin-bottom: 0px;
  color: #555;
}

select,
textarea,
input[type="date"],
input[type="text"],
input[type="number"] {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 8px;
	margin-bottom: 2px;
	color: #444;
	height: auto;
}

fieldset{
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 8px;
}

input::placeholder {
  color: transparent;
}

input.destacado {
  background-color: #e6f4ff; /* azul muito claro e neutro */
}

/* Botões */
button,
.langsel-btn {
  margin-top: 20px;
  width: 100%;/*
  background-color: #007BFF;
  color: white;*/
  background: linear-gradient(135deg, var(--azul-principal), #005ce6);
  border: none;
  color: #fff;
  padding: 12px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;/*
  transition: background 0.3s ease, transform 0.2s ease;*/
}

button:hover,
.langsel-btn:hover {/*
  background-color: #0056b3;*/
  background: var(--azul-hover);/*
  transform: translateY(-2px);*/
}

/* Botão de limpar */
.btn-limpar {/*
  background-color: #d9534f;*/
  background: #e63946;
}
.btn-limpar:hover {
  background: #b71c1c;
}

/* Ícones nos botões */
/* Estilo comum para ícones de botão */
[class^="btn-"]::before {
  margin-right: 6px;
  display: inline-block;
  vertical-align: bottom;
  font-size: .9em; /* ajuste centralizado */
}

/* Ícones específicos */
.btn-adicionar::before { content: "➕"; }
.btn-salvar::before    { content: "💾"; }
.btn-confirmar::before { content: "✅"; }
.btn-limpar::before    { content: "🗑️"; }
.btn-download::before  { content: "⬇️"; }

input.half-width,
button.half-width {
  width: 100% !important;
  display: inline-block;
}

input.quarter-width,
button.quarter-width {
  width: 23% !important;
  display: inline-block;
}

/* Deixe o botão de exclusão pequeno e sem herdar estilo geral */
td.excluir {
  text-align: center;
  width: 30px;
  margin: 0px;
  padding: 0px;
}

td.excluir button {
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  padding: 0;
  margin: 0;
  color: red;
}

.resultado {
  /*margin-top: 20px;*/
  margin-top: 10px;
  margin-bottom: 0px;
  /*padding: 15px;*/
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #e7f3ff;
  border: 1px solid #b3daff;
  border-radius: 8px;
  color: #004085;
  font-weight: bold;
  text-align: center;
}

.erro {
  color: red;
  margin-top: 10px;
  text-align: center;
}

.conteudo {
  flex-grow: 1;
  display: flex;
  align-items: center;     /* Centraliza verticalmente */
  justify-content: center; /* (Opcional) Centraliza horizontalmente */
  text-align: center;      /* Para centralizar texto */
  background: #fff;     /* Apenas para visualização, como no seu exemplo */
}

.langsel-container {
  position: fixed;
  top: 0; /* <-- move para o topo */
  left: 0;
  width: 100%;
  background-color: #fff;
  /*border-bottom: 1px solid #ccc;  era border-top */
  display: flex;
  justify-content: center;
  gap: 2px;
  padding: 4px 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 1001; /* levemente maior que #breadcrumb */
  flex-wrap: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.langsel-btn {
  background: transparent;
  color: #007BFF;
  border: 2px solid #007BFF;
  font-size: 14px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color 0.3s ease, color 0.3s ease;
  padding: 6px 10px;
  gap: 4px;
  height: 42px;
  max-width: 110px; /* <- limita largura */
  margin-top: 1px;
}

/* Hover/focus */
.langsel-btn:hover,
.langsel-btn:focus {
  background-color: #007BFF;
  color: white;
  border-color: #0056b3;
}

/* Nome do idioma visível no desktop */
.langsel-label {
  display: inline;
}

.imagem-transparente {
  background-color: transparent;
  mix-blend-mode: multiply; /* ou 'darken', dependendo do efeito desejado */
}

.row {
  display: flex;
  justify-content: space-between;
  gap: 2px;
  flex-wrap: wrap;
  margin-bottom: 0px;
  align-items: flex-end;
}

.col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0px;
  padding: 10px;
}

.col-destaque {
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
  padding: 8px;
  margin-top: 2px;
}

/* Tabelas */
#tabela-itens thead {/*
  background-color: #007BFF;*/
  color: white;
  background: var(--azul-principal);
}

#tabela-itens thead th {
  padding: 6px;
  text-align: left;
  font-weight: bold;
  /*border-bottom: 1px solid #ccc;*/
}

#tabela-itens {
  border-collapse: collapse;
  border: none;
  width: 100%;
  border-radius: 8px;
  overflow: hidden; /* Garante que o conteúdo interno (como o thead) também respeite os cantos */
  /*border: 1px solid red;*/
}

#tabela-itens td, #tabela-itens th {
	border: none;
	padding: 2px;
	text-align: left;
  /*border: 1px solid red;*/
}

#tabela-itens td.celula-editavel {
  color: var(--azul-principal);
  cursor: pointer;/*
  color: #1e40af;
  font-weight: 500;
  border: 1px solid red;*/
}

#tabela-itens td.celula-editavel:hover {
  background: var(--azul-claro);
  text-decoration: underline;/*
  border: 1px solid red;
  background-color: #e0e7f3;*/
}

#tabela-itens tbody tr:nth-child(even) {
  background-color: #f9f9f9; /* cor para linhas pares */
  /*border: 1px solid red;*/
}

#tabela-itens tbody tr:nth-child(odd) {
  background-color: #f1f1f1; /* cor para linhas ímpares */
  /*border: 1px solid red;*/
}


tr.linha-par {
  background-color: #f9f9f9 !important;; /* cor para linhas pares */
  font-size: 14px;
}

tr.linha-impar {
  background-color: #f1f1f1 !important;; /* cor para linhas ímpares */
  font-size: 14px;
}

.linha-secundaria td {
  /*background: #f9f9f9;
  font-size: 0.85rem;*/
  padding: 4px 10px;
  color: #333;
  border-top: none;
}

span.dado-secundario {
  margin-right: 16px;
  display: inline-block;
  color: #555;
}

.grupo-data {
  background-color: #e0e7f3 !important;
  color: #555;
}

.sub-total-data {
  font-size: 14px;
}

.celula-editavel {
  cursor: pointer;
}

.celula-editavel:hover {
  text-decoration: none;
}

#lista-categorias {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.categoria-item {
  background: #f5f5f5;
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.categoria-item span {
  font-size: 14px;
  line-height: 1;
}

.categoria-item button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin-top: 0px;
}

.categoria-nome {
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none; /* Remove sublinhado */
  color: inherit; /* Mantém a cor natural */
}

.categoria-nome:hover {
  text-decoration: underline dotted; /* Opcional: efeito sutil ao passar o mouse */
}

/* -- Cabeçalho e rodapé -- */

.topo-principal {
  /*position: sticky;*/
  top: 0;
  width: 100%;
  background: #fff;
  z-index: 999;
  padding: 16px 12px;
  text-align: center;
  border-radius: 8px;
  overflow: hidden; /* Garante que conteúdos internos respeitem o arredondamento */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.topo-conteudo h1 {
  margin: 0;
  font-size: 24px;
  color: #007BFF;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.rodape-principal {
  /*position: sticky;
  top: 0;*/
   background: #fff;
   width: 100%;
  z-index: 999;
  padding: 16px 12px;
  text-align: center;
  border-radius: 8px;
  overflow: hidden; /* Garante que conteúdos internos respeitem o arredondamento */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.rodape-conteudo {
  /*font-size: 24px;
  color: #007BFF;
  font-weight: bold;
  letter-spacing: 0.5px;*/
  margin: 0;
}

.subtitulo {
  margin: 4px 0 0;
  font-size: 14px;
  color: #666;
}

.bloco-com-imagem {
  border: 0.5px solid rgba(0, 0, 0, 0.1); /* Borda super fina e sutil */
  display: flex;
  align-items: center;
  gap: 16px;
  background-color: #f9f9f9;
  border-radius: 8px;/*
  padding: 1px 2px;
  margin-bottom: 15px;*/
}

.bloco-com-imagem img.icone-aplicacao {
  width: 33.33%;     /* 1/3 da largura do container */
  height: auto;
  border-radius: 8px;
  object-fit: contain;/*
  margin-right: 0px;*/
  margin: 10px;
}

.bloco-com-imagem p {
  width: 66.66%;     /* 2/3 da largura */
  margin: 0px 0px 0px -20px;
  padding: 10px;
  text-align: left;
  background: none;
}

.icon {
  font-size: 14px;
}

#historico-media:empty {
  margin: 0;
  padding: 0;
  height: 0;
  min-height: 0;
  display: none; /* opcional */
}

/* ------------------------------------------*/
/* ---------------- Android ---------------- */
/* ----------------------------------------- */

/* Em WebView, remove o espaçamento antes ocupado pela barra de botões */
.shift-up {
    margin-top: -50px;
}

/* YouTube Video embedded */
.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 proporção */
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}