/* ==========================================================================
   UTILITÁRIOS
   Classes de propósito único que substituem os antigos style="..." das views.

   Convenção dos nomes:
   - Espaçamento em escala de 0.25rem (igual Tailwind): mb-4 = 1rem, mt-6 = 1.5rem,
     p-8 = 2rem. O número é "quantos quartos de rem".
   - Tamanho de fonte pelo valor exato em centésimos de rem: fs-85 = 0.85rem.
   - Ícones pelo tamanho em px: ic-16 = 16x16.
   - Cores pelo nome da variável do tema: txt-secundario = var(--cor-texto-secundario).

   Este arquivo é carregado por último, para que um utilitário sempre vença a
   regra de um componente quando os dois se aplicam ao mesmo elemento.
   ========================================================================== */

/* --- Display --- */
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-inline-flex { display: inline-flex; }
.d-grid { display: grid; }
.d-contents { display: contents; }

/* --- Flexbox --- */
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-1 { flex: 1; min-width: 0; }
.flex-auto { flex: 1 1 auto; }
.flex-shrink-0 { flex-shrink: 0; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.align-stretch { align-items: stretch; }
.align-baseline { align-items: baseline; }
.align-self-center { align-self: center; }
.align-self-start { align-self: flex-start; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-around { justify-content: space-around; }
.centralizado { display: flex; align-items: center; justify-content: center; }
.linha { display: flex; align-items: center; }
.linha-entre { display: flex; align-items: center; justify-content: space-between; }

/* gap-1..4 também estão em base.css, mas lá vêm ANTES de .grid (gap: 1.5rem) e
   perdiam para ele: "grid gap-2" não dava 1rem. Repetidos aqui, depois de tudo. */
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.gap-4 { gap: 2rem; }
.gap-0 { gap: 0; }
.gap-xs { gap: 0.25rem; }
.gap-sm { gap: 0.4rem; }
.gap-md { gap: 0.75rem; }
.gap-lg { gap: 1.25rem; }
.gap-xl { gap: 2.5rem; }

/* --- Grid --- */
.col-span-2 { grid-column: span 2; }
.col-inteira { grid-column: 1 / -1; }

/* --- Margens --- */
.m-0 { margin: 0; }
.m-auto { margin: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

.mt-0 { margin-top: 0; }       .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: 0.25rem; } .mb-1 { margin-bottom: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }  .mb-2 { margin-bottom: 0.5rem; }
.mt-3 { margin-top: 0.75rem; } .mb-3 { margin-bottom: 0.75rem; }
.mt-4 { margin-top: 1rem; }    .mb-4 { margin-bottom: 1rem; }
.mt-5 { margin-top: 1.25rem; } .mb-5 { margin-bottom: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }  .mb-6 { margin-bottom: 1.5rem; }
.mt-7 { margin-top: 1.75rem; } .mb-7 { margin-bottom: 1.75rem; }
.mt-8 { margin-top: 2rem; }    .mb-8 { margin-bottom: 2rem; }
.mt-10 { margin-top: 2.5rem; } .mb-10 { margin-bottom: 2.5rem; }
.mt-12 { margin-top: 3rem; }   .mb-12 { margin-bottom: 3rem; }

.ml-0 { margin-left: 0; }       .mr-0 { margin-right: 0; }
.ml-1 { margin-left: 0.25rem; } .mr-1 { margin-right: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }  .mr-2 { margin-right: 0.5rem; }
.ml-3 { margin-left: 0.75rem; } .mr-3 { margin-right: 0.75rem; }
.ml-4 { margin-left: 1rem; }    .mr-4 { margin-right: 1rem; }

.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }

/* --- Paddings --- */
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.p-10 { padding: 2.5rem; }

.px-0 { padding-left: 0; padding-right: 0; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }

.pt-0 { padding-top: 0; }       .pb-0 { padding-bottom: 0; }
.pt-2 { padding-top: 0.5rem; }  .pb-2 { padding-bottom: 0.5rem; }
.pt-4 { padding-top: 1rem; }    .pb-4 { padding-bottom: 1rem; }
.pt-6 { padding-top: 1.5rem; }  .pb-6 { padding-bottom: 1.5rem; }
.pt-5 { padding-top: 1.25rem; }
.pl-10 { padding-left: 2.5rem; }

/* --- Largura / altura --- */
.w-100 { width: 100%; }
.w-auto { width: auto; }
.h-100 { height: 100%; }
.minw-0 { min-width: 0; }
.minw-20 { min-width: 20px; }
.minw-600 { min-width: 600px; }
.minw-700 { min-width: 700px; }
.minw-800 { min-width: 800px; }
.maxw-320 { max-width: 320px; }
.maxw-400 { max-width: 400px; }
.maxw-420 { max-width: 420px; }
.maxw-480 { max-width: 480px; }
.maxw-500 { max-width: 500px; }
.maxw-520 { max-width: 520px; }
.maxw-560 { max-width: 560px; }
.maxw-600 { max-width: 600px; }
.maxw-640 { max-width: 640px; }
.maxw-700 { max-width: 700px; }
.maxw-800 { max-width: 800px; }
.maxw-900 { max-width: 900px; }
.maxw-1000 { max-width: 1000px; }
/* Larguras fixas de colunas de tabela */
.larg-80 { width: 80px; }
.larg-90 { width: 90px; }
.larg-100 { width: 100px; }
.larg-120 { width: 120px; }
.larg-130 { width: 130px; }
.larg-150 { width: 150px; }
.altura-38 { height: 38px; }
.altura-42 { height: 42px; }
.altura-48 { height: 48px; }

/* --- Tipografia: tamanho --- */
.fs-60 { font-size: 0.6rem; }
.fs-65 { font-size: 0.65rem; }
.fs-70 { font-size: 0.7rem; }
.fs-75 { font-size: 0.75rem; }
.fs-78 { font-size: 0.78rem; }
.fs-80 { font-size: 0.8rem; }
.fs-85 { font-size: 0.85rem; }
.fs-90 { font-size: 0.9rem; }
.fs-95 { font-size: 0.95rem; }
.fs-100 { font-size: 1rem; }
.fs-105 { font-size: 1.05rem; }
.fs-110 { font-size: 1.1rem; }
.fs-115 { font-size: 1.15rem; }
.fs-120 { font-size: 1.2rem; }
.fs-125 { font-size: 1.25rem; }
.fs-150 { font-size: 1.5rem; }
.fs-175 { font-size: 1.75rem; }
.fs-200 { font-size: 2rem; }

/* --- Tipografia: peso, alinhamento, transformação --- */
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-upper { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }
.text-none { text-transform: none; }
.text-nowrap { white-space: nowrap; }
.text-pre { white-space: pre-wrap; }
.text-quebra { word-break: break-word; overflow-wrap: anywhere; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.fonte-mono { font-family: monospace; }
.text-titulo { font-family: var(--fonte-titulo); }
.text-italic { font-style: italic; }
.text-sublinhado { text-decoration: underline; }
.sem-decoracao { text-decoration: none; }
.lh-1 { line-height: 1; }
.lh-13 { line-height: 1.3; }
.lh-15 { line-height: 1.5; }
.ls-05 { letter-spacing: 0.05em; }

/* --- Cores de texto --- */
.txt-base { color: var(--cor-texto); }
.txt-secundario { color: var(--cor-texto-secundario); }
.txt-mutado { color: var(--cor-texto-mutado); }
.txt-primaria { color: var(--cor-primaria); }
.txt-laranja { color: var(--cor-primaria); }
.txt-sucesso { color: var(--cor-sucesso); }
.txt-erro { color: var(--cor-erro); }
.txt-alerta { color: var(--cor-alerta); }
.txt-info { color: var(--cor-info); }
.txt-branco { color: #fff; }
.txt-herdar { color: inherit; }
/* Ícone preenchido (ex: coração do post já curtido) */
.fill-erro { fill: var(--cor-erro); color: var(--cor-erro); }

/* --- Fundos --- */
.bg-fundo { background-color: var(--cor-fundo); }
.bg-painel { background-color: var(--cor-painel); }
.bg-transparente { background: transparent; }
.bg-primaria-suave { background-color: rgba(var(--cor-primaria-rgb), 0.08); }
.bg-laranja-suave { background-color: rgba(var(--cor-primaria-rgb), 0.08); }
.bg-sucesso-suave { background-color: var(--cor-sucesso-fundo); }
.bg-erro-suave { background-color: var(--cor-erro-fundo); }
.bg-alerta-suave { background-color: var(--cor-alerta-fundo); }

/* --- Bordas e raios --- */
.borda { border: 1px solid var(--cor-borda); }
.borda-t { border-top: 1px solid var(--cor-borda); }
.borda-b { border-bottom: 1px solid var(--cor-borda); }
.borda-0 { border: none; }
.borda-tracejada { border: 1px dashed var(--cor-borda); }
.borda-esq-laranja { border-left: 4px solid var(--cor-primaria); }
.borda-esq-primaria { border-left: 4px solid var(--cor-primaria); }
.raio-sm { border-radius: var(--borda-raio-sm); }
.raio-md { border-radius: var(--borda-raio-md); }
.raio-lg { border-radius: var(--borda-raio-lg); }
.raio-pilula { border-radius: 99px; }
.raio-circulo { border-radius: 50%; }

/* --- Posição, overflow, cursor, diversos --- */
.pos-relative { position: relative; }
.pos-absolute { position: absolute; }
.pos-sticky { position: sticky; top: 0; }
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.rolagem-320 { max-height: 320px; overflow-y: auto; }
.rolagem-250 { max-height: 250px; overflow-y: auto; }
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-bloqueado { cursor: not-allowed; }
.opacidade-40 { opacity: 0.4; }
.opacidade-50 { opacity: 0.5; }
.opacidade-70 { opacity: 0.7; }
.opacidade-80 { opacity: 0.8; }
.sem-lista { list-style: none; }
.sem-sombra { box-shadow: none; }
.img-cobrir { object-fit: cover; }
.img-conter { object-fit: contain; }
.tabela-colapsada { border-collapse: collapse; }

/* --- Ícones (Lucide troca o <i> por <svg> e mantém a classe) --- */
.ic-10 { width: 10px; height: 10px; }
.ic-12 { width: 12px; height: 12px; }
.ic-13 { width: 13px; height: 13px; }
.ic-14 { width: 14px; height: 14px; }
.ic-15 { width: 15px; height: 15px; }
.ic-16 { width: 16px; height: 16px; }
.ic-18 { width: 18px; height: 18px; }
.ic-20 { width: 20px; height: 20px; }
.ic-22 { width: 22px; height: 22px; }
.ic-24 { width: 24px; height: 24px; }
.ic-28 { width: 28px; height: 28px; }
.ic-32 { width: 32px; height: 32px; }
.ic-36 { width: 36px; height: 36px; }
.ic-40 { width: 40px; height: 40px; }
.ic-48 { width: 48px; height: 48px; }
.ic-64 { width: 64px; height: 64px; }
.ic-inline { display: inline; vertical-align: middle; }

/* --- Responsivo --- */
@media (max-width: 768px) {
    .col-span-2 { grid-column: auto; }
    .ocultar-mobile { display: none !important; }
    .coluna-mobile { flex-direction: column; align-items: stretch; }
    .w-100-mobile { width: 100%; }
}
@media (min-width: 769px) {
    .ocultar-desktop { display: none !important; }
}