/* Estilos mínimos. Bootstrap 5 (CDN) faz o grosso do trabalho responsivo.
   Mobile-first: a maioria acessa pelo celular. Mantenha simples. */

:root {
  --cras-primary: #0d6efd;
}

/* Responsividade: evita rolagem horizontal e o auto-zoom de texto do iOS
   (causa do "não renderizou 100%, ficou maior" no iPhone). */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  background-color: #f5f7fb;
}

/* Respiro lateral consistente em telas pequenas */
@media (max-width: 575.98px) {
  .container { padding-left: 1rem; padding-right: 1rem; }
}

/* ---- Header colorido ---- */
.app-header {
  background: linear-gradient(135deg, #0d6efd, #0aa2c0);
  color: #fff;
  border-radius: .85rem;
  padding: 1.75rem 1.25rem;
  box-shadow: 0 .4rem 1.2rem rgba(13, 110, 253, .2);
}
.app-header h1 { margin-bottom: .25rem; font-weight: 700; }
.app-header p { margin-bottom: 0; color: rgba(255, 255, 255, .85); }

/* ---- Cards grandes e clicáveis na tela inicial pública ---- */
.opcao-card {
  cursor: pointer;
  border: none;
  color: #fff;
  transition: transform .15s ease, box-shadow .15s ease;
}
.opcao-card .text-muted,
.opcao-card .text-muted.small { color: rgba(255, 255, 255, .85) !important; }
.opcao-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 .6rem 1.6rem rgba(0, 0, 0, .22);
}
.opcao-card:active { transform: translateY(0); }

/* Cores distintas por departamento */
.opcao-cadastro { background: linear-gradient(135deg, #0aa2c0, #0d6efd); }
.opcao-cras     { background: linear-gradient(135deg, #198754, #20c997); }

/* ---- Botões de voltar/recomeçar com cor ---- */
.btn-voltar {
  color: var(--cras-primary);
  font-weight: 600;
  text-decoration: none;
}
.btn-voltar:hover { color: #0a58ca; text-decoration: underline; }

/* Indicador de carregamento HTMX */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-block; }