/* ============================================================================
   public/css/leitura.css
   ----------------------------------------------------------------------------
   Estilos da página de Leituras (leitura.html).
   Complementa base.css + theme-dark.css + Bootstrap 5.

   Inclui:
     • Cartões de "detalhe" usados no modal de visualização da leitura.
     • Caixa de consumo destacada (usada em alguns sítios pelo JS).
     • Dark mode dos cartões.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1. CAIXA DE CONSUMO (destaque visual de leitura calculada)
   --------------------------------------------------------------------------- */

/* Faixa em gradiente azul claro, usada quando queremos destacar o consumo
   calculado no topo de um modal/cartão. */
.consumo-box {
  background: linear-gradient(135deg, #f3f9fd, #ffffff);
  border: 1px solid #e2f1fb;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 6px 0 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

/* Rótulo (texto pequeno em maiúsculas). */
.consumo-box .label {
  font-size: 11px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
}

/* Valor grande em azul escuro. */
.consumo-box .val {
  font-size: 22px;
  font-weight: 800;
  color: #1d4ed8;
  line-height: 1.1;
}


/* ---------------------------------------------------------------------------
   2. CARTÕES DE DETALHE (usados no modal "Detalhes da leitura")
   --------------------------------------------------------------------------- */

/* Cartão base: ícone à esquerda + rótulo + valor à direita. */
.detalhe-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  transition: background 0.12s, transform 0.12s;
}

/* Hover: realce subtil. */
.detalhe-card:hover {
  background: #f3f9fd;
  transform: translateY(-1px);
}

/* Quadrado decorativo do ícone (gradiente ciano→azul). */
.detalhe-card .detalhe-icone {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #19c0d6, #2691d1);
  color: #ffffff;
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* Conteúdo (texto à direita do ícone). */
.detalhe-card .detalhe-conteudo {
  flex: 1;
  min-width: 0;
}

/* Rótulo do campo (texto pequeno em maiúsculas). */
.detalhe-card .detalhe-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: #334155;
}

/* Valor padrão (negrito). */
.detalhe-card .detalhe-valor {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  word-break: break-word;
}

/* Variante "grande" — usado no cartão de destaque (Consumo). */
.detalhe-card .detalhe-valor.grande {
  font-size: 1.6rem;
  font-weight: 800;
  color: #125f96;
  line-height: 1.1;
}

/* Cartão "destaque" — fundo azul claro para sublinhar o consumo. */
.detalhe-card.destaque {
  background: linear-gradient(135deg, #f3f9fd, #ffffff);
  border-color: #e2f1fb;
}


/* ---------------------------------------------------------------------------
   3. TABELA DO MODAL DE LOTE — pequenos ajustes de densidade
   --------------------------------------------------------------------------- */

/* Inputs dentro da tabela do lote ficam mais compactos para caber tudo. */
#loteTabela .form-control {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}


/* ---------------------------------------------------------------------------
   4. DARK MODE
   --------------------------------------------------------------------------- */

html[data-theme="dark"] .detalhe-card {
  background: #0f172a;
  border-color: rgba(255, 255, 255, 0.10);
}
html[data-theme="dark"] .detalhe-card:hover { background: #1e293b; }

html[data-theme="dark"] .detalhe-card .detalhe-label  { color: #cbd5e1; }
html[data-theme="dark"] .detalhe-card .detalhe-valor  { color: #f8fafc; }
html[data-theme="dark"] .detalhe-card .detalhe-valor.grande { color: #7dd3fc; }

html[data-theme="dark"] .detalhe-card.destaque {
  background: linear-gradient(135deg, #0a3a5e, #131c33);
  border-color: rgba(125, 211, 252, 0.20);
}