/* ═══════════════════════════════════════════════════════════════════════════
   sh-missing.css — os utilitarios que o build congelado NAO tinha
   ───────────────────────────────────────────────────────────────────────────
   `tailwind.min.css` era um build purgado, congelado em 02/06/2026. Purgado
   significa que so entrou nele o que estava em uso naquele dia. Toda classe
   utilitaria escrita DEPOIS nunca chegou a existir: nao dava erro, nao
   aparecia no console, simplesmente nao estilizava.

   Sao 107 classes, 312 usos. Aqui elas ganham o efeito que sempre foi a
   intencao. O grupo mais gritante e o responsivo: o build so tem as media
   queries das classes de grid que estavam em uso em 02/06/2026 (`md:grid-cols-2`,
   `lg:col-span-4`, `xl:grid-cols-4`... — essas foram extraidas e estao em
   sh-utilities.css). As outras 19 `sm:`/`md:`/`lg:`, 150 usos, nunca rodaram —
   inclusive `md:text-base` e `lg:text-lg`, que sozinhas somam 60 usos.
   O layout de tablet e desktop grande so agora comeca a existir de fato.

   ATENCAO: este e o unico dos tres arquivos que MUDA a aparencia — de
   proposito. `sh-base.css` e `sh-utilities.css` sao copia fiel do build.

   O QUE NAO ESTA AQUI: variantes `hover:`, spacing `.5` e cores com
   opacidade em sua maioria JA existiam no build e foram extraidas para
   `sh-utilities.css`. So entra aqui o que faltava de verdade.

   ORDEM: carrega depois de sh-utilities.css (as variantes responsivas tem a
   mesma especificidade das utilitarias base e precisam vir depois para
   vencer) e antes de style.css (os componentes do projeto seguem vencendo).

   Escala do Tailwind: .5=0.125rem · 1.5=0.375rem · 2.5=0.625rem · 4=1rem.
   Breakpoints: sm=640px · md=768px · lg=1024px · xl=1280px.

   Na Fase 2 estas classes viram `sh-*` no markup e este arquivo desaparece.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* O build define `primary` como #243444 — que NAO e o --primary do projeto
     (azul #1B4FD8). Mantido o valor do build para nao mudar aparencia.
     `primary-container` era o par de hover desse token e se perdeu junto com
     a config do Tailwind; reposto como um tom mais escuro do mesmo #243444,
     que e como ele aparece em uso: sempre no hover de um elemento primario. */
  --sh-primary: #243444;
  --sh-primary-container: #1a2733;
}

/* ───────────────────────────────────────────────────────────────────────────
   1. BREAKPOINTS — o buraco maior
   19 classes, 150 usos. O build tem media query so para as classes de grid
   que estavam em uso em 02/06/2026; as demais escritas depois eram no-op.
   Estas aqui vao DEPOIS das do sh-utilities.css de proposito: mesma
   especificidade, e as duas listas nao se sobrepoem.
   ─────────────────────────────────────────────────────────────────────────── */

@media (min-width: 640px) {
  .sm\:block    { display: block; }
  .sm\:max-w-md { max-width: 28rem; }
}

@media (min-width: 768px) {
  .md\:block       { display: block; }
  .md\:inline      { display: inline; }
  .md\:hidden      { display: none; }
  .md\:flex-row    { flex-direction: row; }
  .md\:flex-nowrap { flex-wrap: nowrap; }
  .md\:items-end       { align-items: flex-end; }
  .md\:justify-between { justify-content: space-between; }
  .md\:gap-x-2     { -moz-column-gap: 0.5rem; column-gap: 0.5rem; }
  .md\:px-1\.5     { padding-left: 0.375rem; padding-right: 0.375rem; }
  .md\:text-base   { font-size: 1rem; line-height: 1.5rem; }
  .md\:col-span-1  { grid-column: span 1 / span 1; }
  .md\:col-span-2  { grid-column: span 2 / span 2; }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lg\:p-6     { padding: 1.5rem; }
  .lg\:gap-8   { gap: 2rem; }
  .lg\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
  .lg\:space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; }
}

/* ───────────────────────────────────────────────────────────────────────────
   2. SPACING DE MEIO PASSO QUE FALTAVA
   A maior parte da escala `.5` estava no build; estas sete nao.
   `4.5` nao existe no Tailwind padrao — 1.125rem (18px) mantem a escala.
   ─────────────────────────────────────────────────────────────────────────── */

.pb-1\.5    { padding-bottom: 0.375rem; }
.gap-x-1\.5 { -moz-column-gap: 0.375rem; column-gap: 0.375rem; }
.gap-y-1    { row-gap: 0.25rem; }
.gap-y-1\.5 { row-gap: 0.375rem; }
.h-4\.5     { height: 1.125rem; }
.w-4\.5     { width: 1.125rem; }

/* space-y-* espaca irmaos, nao o proprio elemento — mesma forma do Tailwind */
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.125rem; }
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.375rem; }

/* ───────────────────────────────────────────────────────────────────────────
   3. COR COM OPACIDADE
   As demais ja existiam no build; estas onze nao.
   ─────────────────────────────────────────────────────────────────────────── */

.bg-white\/5       { background-color: rgba(255, 255, 255, .05); }
.bg-black\/90      { background-color: rgba(0, 0, 0, .90); }
.bg-slate-50\/40   { background-color: rgba(248, 250, 252, .40); }
.bg-indigo-200\/50 { background-color: rgba(199, 210, 254, .50); }
.bg-red-50\/50     { background-color: rgba(254, 242, 242, .50); }
.bg-red-600\/20    { background-color: rgba(220, 38, 38, .20); }
.bg-primary\/20    { background-color: rgba(36, 52, 68, .20); }
.border-red-200\/80  { border-color: rgba(254, 202, 202, .80); }
.text-white\/95      { color: rgba(255, 255, 255, .95); }
.text-indigo-600\/70 { color: rgba(79, 70, 229, .70); }
.w-1\/2 { width: 50%; }

/* ───────────────────────────────────────────────────────────────────────────
   4. TEMA ESCURO
   O projeto NAO usa a convencao `.dark` nem `prefers-color-scheme`: usa
   `[data-theme="navy"]` e `[data-theme="graphite"]` (style.css:132 e :144).
   As 7 classes `dark:*` do codigo apontavam para um seletor inexistente aqui.
   ─────────────────────────────────────────────────────────────────────────── */

[data-theme="navy"] .dark\:bg-slate-700,
[data-theme="graphite"] .dark\:bg-slate-700         { background-color: #334155; }
[data-theme="navy"] .dark\:bg-slate-900,
[data-theme="graphite"] .dark\:bg-slate-900         { background-color: #0f172a; }
[data-theme="navy"] .dark\:bg-slate-800\/80,
[data-theme="graphite"] .dark\:bg-slate-800\/80     { background-color: rgba(30, 41, 59, .80); }
[data-theme="navy"] .dark\:border-slate-700\/50,
[data-theme="graphite"] .dark\:border-slate-700\/50 { border-color: rgba(51, 65, 85, .50); }
[data-theme="navy"] .dark\:text-slate-200,
[data-theme="graphite"] .dark\:text-slate-200       { color: #e2e8f0; }
[data-theme="navy"] .dark\:text-indigo-300,
[data-theme="graphite"] .dark\:text-indigo-300      { color: #a5b4fc; }
[data-theme="navy"] .dark\:text-emerald-400,
[data-theme="graphite"] .dark\:text-emerald-400     { color: #34d399; }

/* ───────────────────────────────────────────────────────────────────────────
   5. ESTADOS QUE FALTAVAM
   ─────────────────────────────────────────────────────────────────────────── */

.hover\:bg-indigo-100:hover      { background-color: #e0e7ff; }
.hover\:bg-black\/60:hover       { background-color: rgba(0, 0, 0, .60); }
.hover\:border-emerald-600:hover { border-color: #059669; }
.hover\:text-primary-container:hover { color: var(--sh-primary-container); }
.hover\:brightness-95:hover { filter: brightness(.95); }
.hover\:scale-102:hover     { transform: scale(1.02); }  /* fora da escala padrao */
.empty\:hidden:empty        { display: none; }

/* ring: o build usa o mecanismo --tw-ring-*, inicializado em sh-base.css.
   Mantido igual para nao divergir de .ring-1 / .ring-primary/30, que vieram
   extraidos para sh-utilities.css. */
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-primary               { --tw-ring-color: var(--sh-primary); }
.focus\:ring-primary:focus  { --tw-ring-color: var(--sh-primary); }

/* ───────────────────────────────────────────────────────────────────────────
   6. PSEUDO-ELEMENTO E GRUPO
   O bloco `after:*` monta a bolinha do toggle switch. Sem estas regras o
   interruptor renderiza sem o pino que desliza.
   ─────────────────────────────────────────────────────────────────────────── */

.after\:absolute::after        { content: var(--tw-content, ""); position: absolute; }
.after\:h-4::after             { content: var(--tw-content, ""); height: 1rem; }
.after\:w-4::after             { content: var(--tw-content, ""); width: 1rem; }
.after\:rounded-full::after    { content: var(--tw-content, ""); border-radius: 9999px; }
.after\:border-gray-300::after { content: var(--tw-content, ""); border-color: #d1d5db; }
.after\:bg-white::after        { content: var(--tw-content, ""); background-color: #fff; }
.after\:transition-all::after {
  content: var(--tw-content, "");
  transition-property: all;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .15s;
}

/* `.peer` nao tem estilo proprio: e so o marcador que o seletor irmao usa */
.peer:checked ~ .peer-checked\:bg-primary { background-color: var(--sh-primary); }
.group:hover .group-hover\:text-primary   { color: var(--sh-primary); }

details[open] .group-open\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(180deg)
             skew(var(--tw-skew-x)) skewY(var(--tw-skew-y))
             scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* ───────────────────────────────────────────────────────────────────────────
   7. AVULSAS
   ─────────────────────────────────────────────────────────────────────────── */

/* dimensoes */
.h-2      { height: 0.5rem; }
.w-2      { width: 0.5rem; }
.w-36     { width: 9rem; }
.h-screen { height: 100vh; }
.min-h-0  { min-height: 0; }
.mt-10    { margin-top: 2.5rem; }
.py-5     { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.mx-auto  { margin-left: auto; margin-right: auto; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-full { max-width: 100%; }
.max-w-\[400px\] { max-width: 400px; }
.max-h-48 { max-height: 12rem; }
.max-h-60 { max-height: 15rem; }

/* cores */
.bg-slate-600        { background-color: #475569; }
.bg-blue-500         { background-color: #3b82f6; }
.border-slate-700    { border-color: #334155; }
.border-red-700      { border-color: #b91c1c; }
.border-t-purple-500 { border-top-color: #a855f7; }
.border-4            { border-width: 4px; }
.text-blue-500       { color: #3b82f6; }
.text-amber-300      { color: #fcd34d; }
.text-indigo-800     { color: #3730a3; }

/* tokens do tema do projeto usados com nome no formato Tailwind */
.text-text   { color: var(--text); }
.text-danger { color: var(--danger); }

/* tipografia */
.text-2xl     { font-size: 1.5rem; line-height: 2rem; }
.font-sans    { font-family: Manrope, ui-sans-serif, system-ui, sans-serif; }
.font-normal  { font-weight: 400; }
.antialiased  { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.tabular-nums { font-variant-numeric: tabular-nums; }

/* comportamento */
.flex-shrink-0  { flex-shrink: 0; }
.list-none      { list-style-type: none; }
.object-contain { -o-object-fit: contain; object-fit: contain; }
.resize-none    { resize: none; }
.select-all     { -webkit-user-select: all; -moz-user-select: all; user-select: all; }
.cursor-zoom-in { cursor: zoom-in; }
.drop-shadow-sm { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .05)); }

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .15s;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .15s;
}

@keyframes sh-pulse {
  50% { opacity: .5; }
}
.animate-pulse { animation: sh-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }

/* acessibilidade: esconde visualmente mas mantem para leitor de tela */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}