/*
* CestaHub — custom.css
* Estilos globais (extraidos dos inline da Fase 2 CSP). Carregado via
* nas bases para permitir remover 'unsafe-inline' de style-src.
*/
/* ===========================================================================
* TEMA — tokens semanticos do modo "liquid glass". A troca vive so aqui
* (`html.dark` reescreve os tokens); o HTML usa utilities semanticas, sem `dark:`.
*
* CRITICO: tokens sao TRIPLETS DE CANAIS "R G B" (nunca HEX) — o tailwind-config
* os consome como `rgb(var(--c-card) / )`; um HEX aqui mata a classe em
* silencio. Paleta dark = "deep slate"; brand indigo preservado.
* =========================================================================== */
:root {
/* Superficies */
--c-canvas: 248 250 252; /* slate-50 — fundo da pagina (claro) */
--c-card: 255 255 255; /* white — cartoes/superficies */
--c-card-muted: 248 250 252; /* slate-50 — superficie rebaixada */
/* Texto (forte -> sutil) */
--c-content-strong: 15 23 42; /* slate-900 — titulos */
--c-content: 51 65 85; /* slate-700 — corpo */
--c-content-muted: 100 116 139; /* slate-500 — secundario */
--c-content-subtle: 148 163 184; /* slate-400 — placeholder/legenda */
/* Linhas */
--c-hairline: 226 232 240; /* slate-200 — bordas/divisores */
color-scheme: light;
}
html.dark {
/* Superficies — deep slate */
--c-canvas: 10 14 26; /* navy-slate profundo (mais escuro que slate-950) */
--c-card: 15 23 42; /* slate-900 — cartoes/superficies */
--c-card-muted: 2 6 23; /* slate-950 — superficie rebaixada */
/* Texto */
--c-content-strong: 241 245 249; /* slate-100 — titulos */
--c-content: 203 213 225; /* slate-300 — corpo */
--c-content-muted: 148 163 184; /* slate-400 — secundario */
--c-content-subtle: 100 116 139; /* slate-500 — placeholder/legenda */
/* Linhas */
--c-hairline: 51 65 85; /* slate-700 — bordas/divisores */
color-scheme: dark;
}
/*
* ANTI-FLASH (lado CSS): pinta o fundo com a cor de canvas do tema antes de o
* Tailwind CDN processar as utilities. Cobre claro e escuro porque --c-canvas
* troca em `html.dark` (aplicado sincrono pelo theme-init.js) — sem flash branco.
*/
html {
background-color: rgb(var(--c-canvas));
}
/*
* Transicao suave ao trocar de tema. Anima APENAS color/background/border
* (baratas); NUNCA blur/backdrop-filter (caros, travariam). 200ms.
*/
body,
.glass,
.glass-elevated,
.glass-hairline {
transition-property: color, background-color, border-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 200ms;
}
/* Acessibilidade: quem pede menos movimento nao recebe a animacao de tema. */
@media (prefers-reduced-motion: reduce) {
body,
.glass,
.glass-elevated,
.glass-hairline {
transition: none;
}
}
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* HTMX indicator helpers */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-flex; }
.htmx-request.htmx-indicator { display: inline-flex; }
/* Scrollbar hidden for sidebar */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* Rolagem horizontal com momentum no iOS antigo (a faixa de abas do modal
* social nunca quebra: rola na horizontal em telas estreitas). Navegadores
* atuais já fazem momentum por padrão; mantido para WebKit legado. */
.touch-scroll-x {
-webkit-overflow-scrolling: touch;
}
/* Smooth transitions for all interactive elements */
a, button, input, select, textarea {
transition-property: color, background-color, border-color, box-shadow, opacity, transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
/* Form field error states — applied via .field-error wrapper in _form_field.html */
.field-error input,
.field-error select,
.field-error textarea {
border-color: #fca5a5 !important; /* error-300 */
background-color: rgba(254, 242, 242, 0.5) !important; /* error-50/50 */
}
.field-error input:focus,
.field-error select:focus,
.field-error textarea:focus {
border-color: #f87171 !important; /* error-400 */
--tw-ring-color: rgb(239 68 68 / 0.15) !important; /* error-500/15 */
}
/*
* input[type=date] no iOS Safari ignora width/max-width com appearance nativo
* e estoura containers estreitos (campos "enormes" no PWA). appearance:none faz
* o input respeitar o box; o seletor nativo ainda abre ao toque.
*/
input[type="date"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
min-width: 0;
max-width: 100%;
}
input[type="date"]::-webkit-date-and-time-value {
text-align: left;
margin: 0;
}
/* Mantem o icone do calendario clicavel no desktop (Chrome/Edge), que
appearance:none poderia ofuscar. */
input[type="date"]::-webkit-calendar-picker-indicator {
opacity: 1;
cursor: pointer;
}
/* ===========================================================================
* MODAL DINAMICO (#modal-host carregado via HTMX) — scroll-lock + entrada.
*
* .modal-scroll-locked: trava o overflow do elemento que de fato rola o fundo
* (o container interno .overflow-y-auto, NAO o body) enquanto o modal-host esta
* aberto. O modal.js compensa a largura da scrollbar via padding-right inline
* para evitar "layout shift" ao sumir a barra.
* =========================================================================== */
.modal-scroll-locked {
overflow: hidden !important;
overscroll-behavior: contain;
}
/*
* ENTRADA do painel: bottom-sheet sobe de baixo no mobile (slide-up) e vira um
* card que faz scale+fade no desktop (sm+). Uma classe so (.modal-panel-enter)
* troca de keyframe pelo breakpoint, evitando conflito de variantes animate-*
* do Tailwind no mesmo elemento. O backdrop entra com fade suave.
*/
@keyframes cestahubSheetUp {
from { opacity: 0; transform: translateY(100%); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes cestahubModalIn {
from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: scale(1); }
}
@keyframes cestahubBackdropIn {
from { opacity: 0; }
to { opacity: 1; }
}
.modal-backdrop-enter {
animation: cestahubBackdropIn 0.2s ease-out;
}
.modal-panel-enter {
animation: cestahubSheetUp 0.32s cubic-bezier(0.32, 0.72, 0, 1);
will-change: transform;
}
@media (min-width: 640px) {
.modal-panel-enter {
animation: cestahubModalIn 0.2s ease-out;
}
}
/*
* "Grabber" do bottom-sheet (a barrinha de arraste no topo): so faz sentido no
* mobile, onde o painel cola na base. Escondido a partir de sm (vira card).
*/
.modal-grabber {
width: 2.25rem;
height: 0.3125rem;
border-radius: 9999px;
background-color: rgb(var(--c-hairline));
}
@media (min-width: 640px) {
.modal-grabber { display: none; }
}
/*
* Acessibilidade: quem pede menos movimento NAO recebe transform/opacity
* animados — o painel e o backdrop aparecem direto, sem slide nem scale.
*/
@media (prefers-reduced-motion: reduce) {
.modal-panel-enter,
.modal-backdrop-enter {
animation: none;
}
}
/* ===========================================================================
* REVELACAO do card "Responsavel pela Coleta" (family_form.html — S3b).
*
* Tecnica grid-template-rows 0fr->1fr: e o unico jeito CSS de animar "altura
* automatica" suavemente (height:auto nao e animavel). O wrapper
* [data-collector-collapsible] e um grid de UMA linha cuja fracao vai de 0fr
* (fechado) a 1fr (aberto); o filho direto precisa de min-height:0 +
* overflow:hidden para a linha poder encolher e o conteudo nao vazar.
*
* O estado vem do atributo ``data-open`` (servidor no 1o paint; depois o
* collector-reveal.js alterna no change do checkbox is_incapable). Anima
* tambem opacity para um fade leve junto da altura. A margem (mt-6) fica no
* proprio wrapper e colapsa com a do card seguinte quando fechado (sem gap
* fantasma).
* =========================================================================== */
[data-collector-collapsible] {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition: grid-template-rows 280ms ease, opacity 280ms ease;
}
[data-collector-collapsible][data-open="true"] {
grid-template-rows: 1fr;
opacity: 1;
}
/* Filho direto: deixa a linha do grid encolher a 0 sem cortar/vazar conteudo. */
[data-collector-collapsible] > * {
min-height: 0;
overflow: hidden;
}
/* Acessibilidade: quem pede menos movimento troca o estado instantaneamente. */
@media (prefers-reduced-motion: reduce) {
[data-collector-collapsible] {
transition: none;
}
}
/* ===========================================================================
* REVELACAO em 2 NIVEIS da deficiencia POR LINHA de membro (_member_row.html —
* S3c). CSP-safe: CSS puro, sem JS, sem inline. Cada [data-member-row] e um
* escopo independente — o `:has()` so reage aos campos DAQUELA linha, entao
* varias linhas nao se interferem.
*
* MECANISMO display:none/revert (e nao grid-rows 0fr->1fr). Motivo: o nivel 1
* ([data-disability-types]) e um