, Correçoes na busca da API para ver os ultimos planos

app/views/layouts/application.html.erb

@@ -47,6 +47,82 @@
     ::-webkit-scrollbar { width: 6px; }
     ::-webkit-scrollbar-track { background: #0a0a0a; }
     ::-webkit-scrollbar-thumb { background: #f97316; border-radius: 3px; }
+    /* ── Checkbox do sistema ────────────────────────────────────────────────
+       O checkbox nativo com `accent-color` continua sendo o do sistema
+       operacional: quadrado duro, cantos retos e um azul-acinzentado que aparece
+       no hover e no disabled. No meio de uma tela toda de cantos 12px e laranja
+       #f97316 ele é o único elemento que denuncia "formulário cru".
+
+       Vale por SELETOR DE ELEMENTO, não por classe, de propósito: são ~20
+       checkboxes em 17 telas e o site inteiro precisa ficar igual — inclusive os
+       que forem escritos depois, que não vão lembrar de uma classe nova. Não há
+       nada para aplicar em cada tela; já está aplicado.
+
+       `:not(.sr-only)` protege o OUTRO controle que também é <input
+       type=checkbox>: os interruptores (o padrão `sr-only peer`, em que o
+       checkbox fica invisível e quem desenha é o irmão). Estilizar aqueles faria
+       aparecer uma caixinha em cima do interruptor.
+
+       `min-width/min-height` em vez de `width/height` porque o Tailwind vem de
+       CDN e injeta o `w-4 h-4` de cada tela em ordem imprevisível: `min-*` vence
+       o `width` menor sem depender de quem carregou primeiro, então nenhum
+       checkbox encolhe. */
+    input[type="checkbox"]:not(.sr-only) {
+      -webkit-appearance: none;
+      appearance: none;
+      min-width: 1.25rem;
+      min-height: 1.25rem;
+      flex-shrink: 0;
+      border: 1.5px solid rgba(255, 255, 255, .2);
+      border-radius: .375rem;
+      background-color: #0a0a0a;
+      cursor: pointer;
+      display: inline-grid;
+      place-content: center;
+      vertical-align: middle;
+      transition: background-color .15s ease, border-color .15s ease;
+    }
+    input[type="checkbox"]:not(.sr-only):hover { border-color: #f97316; }
+    /* :focus-visible e não :focus — o anel só aparece na navegação por teclado,
+       não quando o dedo/mouse acabou de marcar. */
+    input[type="checkbox"]:not(.sr-only):focus-visible {
+      outline: 2px solid #f97316;
+      outline-offset: 2px;
+    }
+    input[type="checkbox"]:not(.sr-only):checked,
+    input[type="checkbox"]:not(.sr-only):indeterminate {
+      background-color: #f97316;
+      border-color: #f97316;
+    }
+    /* A marca é clip-path e não imagem: nada para carregar, escala sem borrar e
+       não depende de img-src do CSP. */
+    input[type="checkbox"]:not(.sr-only):checked::before {
+      content: '';
+      width: .75rem;
+      height: .75rem;
+      background-color: #fff;
+      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+    }
+    /* Estado "algumas marcadas" (a seleção em massa das consolidações usa). */
+    input[type="checkbox"]:not(.sr-only):indeterminate::before {
+      content: '';
+      width: .625rem;
+      height: 2px;
+      border-radius: 1px;
+      background-color: #fff;
+    }
+    input[type="checkbox"]:not(.sr-only):disabled {
+      opacity: .4;
+      cursor: not-allowed;
+      border-color: rgba(255, 255, 255, .12);
+    }
+    /* O roxo da tela de Validar é semântico (entrega extraordinária), não
+       decoração — continua roxo, com a mesma forma dos outros. */
+    input[type="checkbox"].accent-purple-500:not(.sr-only):checked {
+      background-color: #9333ea;
+      border-color: #9333ea;
+    }
+
     /* Loading spinner laranja */
     .spinner {
       border: 3px solid #1a1a1a;