/* MAURO 2026-09-29: ajustes gerais de responsividade e legibilidade (celular, tablet e computador).
   Prioridade baixa de proposito: qualquer classe/estilo que a pagina ja tenha continua valendo; so preenche o que faltava.
   Duas versoes: responsivo.css (dentro de @layer base, para o CSS compilado da area do cliente, que usa camadas)
   e responsivo-cdn.css (sem camada, para admin e paginas publicas, que usam o Tailwind pela CDN). */

/* 1) Superficies claras: texto escuro por padrao.
   O corpo da area do cliente usa tema escuro (texto claro); cartoes brancos sem cor de texto
   herdavam letra clara e ficavam ilegiveis (labels, campos, titulos). */
:where(.bg-white, .bg-slate-50, .bg-gray-50, .bg-slate-100, .bg-gray-100, .bg-zinc-50,
       .bg-amber-50, .bg-yellow-50, .bg-orange-50, .bg-blue-50, .bg-sky-50, .bg-indigo-50,
       .bg-emerald-50, .bg-green-50, .bg-red-50, .bg-rose-50, .bg-purple-50, .bg-violet-50,
       [style*="background:#FFF"], [style*="background:#fff"], [style*="background: #FFF"], [style*="background: #fff"],
       [style*="background:white"], [style*="background: white"],
       [style*="background-color:#fff"], [style*="background-color: #fff"],
       [style*="background-color:#FFF"], [style*="background-color: #FFF"]) {
    color: #0f172a;
}

/* 2) Campos de formulario sem borda definida: ganham caixa visivel.
   Varios formularios usavam classes que dependem de um plugin que nao esta no CSS do site,
   e os campos apareciam como texto solto (sem borda, sem fundo). */
html input:where(:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image])):where(:not([class~="border"]):not([class~="border-2"]):not([class~="border-0"]):not([class~="border-b"]):not([class~="border-b-2"]):not([style*="border"])),
html select:where(:not([class~="border"]):not([class~="border-2"]):not([class~="border-0"]):not([class~="border-b"]):not([style*="border"])),
html textarea:where(:not([class~="border"]):not([class~="border-2"]):not([class~="border-0"]):not([class~="border-b"]):not([style*="border"])) {
    border: 1px solid #cbd5e1;
    border-radius: .375rem;
    background-color: #fff;
    color: #0f172a;
    padding: .45rem .6rem;
}
:where(input, select, textarea):focus-visible { outline: 2px solid #3b82f6; outline-offset: 1px; }

/* 3) Tabela larga: rolagem lateral com sombra indicando que tem mais conteudo */
.resp-tab-fora { position: relative; max-width: 100%; }
.resp-tab-rola { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.resp-tab-fora::after, .resp-tab-fora::before {
    content: ""; position: absolute; top: 0; bottom: 0; width: 18px; pointer-events: none;
    opacity: 0; transition: opacity .15s;
}
.resp-tab-fora::after  { right: 0; background: linear-gradient(to left, rgba(15,23,42,.18), rgba(15,23,42,0)); }
.resp-tab-fora::before { left: 0;  background: linear-gradient(to right, rgba(15,23,42,.18), rgba(15,23,42,0)); z-index: 1; }
.resp-tab-fora.resp-mais-dir::after  { opacity: 1; }
.resp-tab-fora.resp-mais-esq::before { opacity: 1; }
.resp-tab-dica { display: none; font-size: 11px; color: #64748b; padding: 2px 4px 4px; }
.resp-tab-dica.resp-mostra { display: block; text-align: right; }

/* 4) Valores em reais nao quebram no meio ("R$" numa linha e o numero na outra) */
.resp-dinheiro { white-space: nowrap; }

/* 5) Grade sem numero de colunas definido (ex.: "grid sm:grid-cols-2"): no celular a coluna automatica
   esticava ate caber a linha mais longa e cortava o lado direito. Agora a coluna nunca passa da largura. */
:where(.grid:not(.grid-flow-col)) { grid-template-columns: minmax(0, 1fr); }

/* 6) Tela baixa com menu lateral fixo (tablet deitado, notebook pequeno): itens do menu mais compactos,
   para o ultimo item nao ficar escondido atras do rodape do menu */
@media (min-width: 1024px) and (max-height: 820px) {
    aside nav a[class*="py-"], aside nav button[class*="py-"] { padding-top: .4rem !important; padding-bottom: .4rem !important; }
}