/* ─────────────────────────────────────────────────────────
   PORTTO DESIGN SYSTEM
   Estética padronizada do subprojeto psicossocial
   Origem: Pg7 Cronograma de Implementação
   ───────────────────────────────────────────────────────── */

:root {
  /* Cores principais Portto */
  --portto-azul: #1B3A5C;
  --portto-azul-esc: #122844;
  --portto-azul-claro: #3a5a7e;
  --portto-azul-mais-claro: #5f7ea0;

  /* Tons de cinza neutros */
  --portto-cinza-900: #1f2937;
  --portto-cinza-700: #374151;
  --portto-cinza-500: #6b7280;
  --portto-cinza-300: #d1d5db;
  --portto-cinza-100: #f3f4f6;
  --portto-cinza-50: #f9fafb;

  /* Borda e backgrounds */
  --portto-borda: #e5e7eb;
  --portto-bg: #ffffff;
  --portto-bg-page: #f7f8fa;

  /* Cores de fase (cronograma) */
  --portto-fase1: #1e40af;
  --portto-fase2: #6d28d9;
  --portto-fase3: #047857;
  --portto-fase4: #c2410c;
  --portto-fase5: #b91c1c;

  /* Cores de classificação (badges de risco) */
  --portto-grave: #991b1b;
  --portto-alto: #c2410c;
  --portto-moderado: #a16207;
  --portto-baixo: #4d7c0f;

  /* Cores de alerta/info */
  --portto-alerta: #b91c1c;
  --portto-alerta-bg: #fef2f2;
  --portto-alerta-borda: #fecaca;
  --portto-aviso: #d97706;
  --portto-aviso-bg: #fffbeb;
  --portto-info: #1e40af;

  /* Sombras */
  --portto-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  --portto-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --portto-shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.3);

  /* Sombreamento de blocos (Pg6 v3 hierarquia) */
  --portto-bloco-entenda-bg: #f5f8fc;
  --portto-bloco-entenda-borda: #dde6f2;
  --portto-bloco-setores-bg: #fbfaf7;
  --portto-bloco-setores-borda: #e8e3da;
  --portto-bloco-medidas-bg: #f5faf7;
  --portto-bloco-medidas-borda: #d8e8df;
  --portto-bloco-livre-bg: #faf7f5;
  --portto-bloco-livre-borda: #e8dfd8;

  /* Tipografia */
  --portto-font: 'Inter', 'Segoe UI', Roboto, system-ui, sans-serif;
  --portto-font-mono: 'Consolas', 'Monaco', monospace;

  /* Tamanhos */
  --portto-radius: 6px;
  --portto-radius-card: 8px;
  --portto-radius-pill: 20px;
}

/* ─────────────────────────────────────────────────────────
   RESET BÁSICO
   ───────────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: var(--portto-font);
  background: var(--portto-bg-page);
  color: var(--portto-cinza-900);
  font-size: 14px;
  line-height: 1.55;
}

/* ─────────────────────────────────────────────────────────
   HEADER (cabeçalho sticky azul com logo)
   ───────────────────────────────────────────────────────── */
.portto-header {
  background: var(--portto-azul);
  padding: 14px 24px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.portto-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.portto-header-logo {
  height: 38px;
  background: #fff;
  padding: 4px 8px;
  border-radius: 4px;
}
.portto-header-text h1 {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.portto-header-text .subtitle {
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 2px;
}

/* ─────────────────────────────────────────────────────────
   PROGRESS BAR (Pg4 e Pg6)
   ───────────────────────────────────────────────────────── */
.portto-progress-bar {
  background: var(--portto-cinza-300);
  height: 3px;
  position: sticky;
  z-index: 99;
}
.portto-progress-fill {
  background: var(--portto-azul);
  height: 100%;
  width: 0%;
  transition: width 0.4s ease;
}
.portto-progress-info {
  background: var(--portto-bg);
  border-bottom: 1px solid var(--portto-borda);
  padding: 6px 24px;
  text-align: center;
  font-size: 11px;
  color: var(--portto-cinza-500);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ─────────────────────────────────────────────────────────
   HERO (banner de boas-vindas)
   ───────────────────────────────────────────────────────── */
.portto-hero {
  background: linear-gradient(135deg, var(--portto-azul-esc), var(--portto-azul));
  color: #fff;
  padding: 48px 24px;
}
.portto-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.portto-hero .portto-selo {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--portto-radius-pill);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
  margin-bottom: 16px;
}
.portto-hero h1 {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 14px;
  letter-spacing: -0.5px;
}
.portto-hero p {
  font-size: 15px;
  opacity: 0.88;
  max-width: 760px;
  line-height: 1.6;
}

/* ─────────────────────────────────────────────────────────
   CONTAINER (área de conteúdo principal)
   ───────────────────────────────────────────────────────── */
.portto-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}

/* ─────────────────────────────────────────────────────────
   CARDS
   ───────────────────────────────────────────────────────── */
.portto-card {
  background: var(--portto-bg);
  border: 1px solid var(--portto-borda);
  border-radius: var(--portto-radius-card);
  padding: 24px 28px;
  margin-bottom: 18px;
  box-shadow: var(--portto-shadow-card);
}
.portto-card h2 {
  font-size: 18px;
  color: var(--portto-azul-esc);
  font-weight: 700;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--portto-cinza-100);
}
.portto-card h3 {
  font-size: 14px;
  color: var(--portto-azul);
  font-weight: 700;
  margin-top: 18px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.portto-card p {
  color: var(--portto-cinza-700);
  margin-bottom: 12px;
}

/* ─────────────────────────────────────────────────────────
   TABS (abas de navegação)
   ───────────────────────────────────────────────────────── */
.portto-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 26px;
  border-bottom: 2px solid var(--portto-borda);
  overflow-x: auto;
}
.portto-tab {
  padding: 12px 18px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--portto-cinza-500);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: all 0.15s;
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
  font-family: inherit;
}
.portto-tab:hover { color: var(--portto-azul); }
.portto-tab.ativa {
  color: var(--portto-azul);
  border-bottom-color: var(--portto-azul);
}

.portto-secao { display: none; }
.portto-secao.ativa { display: block; }

/* ─────────────────────────────────────────────────────────
   BADGES (classificação de risco)
   ───────────────────────────────────────────────────────── */
.portto-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid currentColor;
}
.portto-badge-grave    { color: var(--portto-grave);    background: rgba(153, 27, 27, 0.06); }
.portto-badge-alto     { color: var(--portto-alto);     background: rgba(194, 65, 12, 0.06); }
.portto-badge-moderado { color: var(--portto-moderado); background: rgba(161, 98, 7, 0.06); }
.portto-badge-baixo    { color: var(--portto-baixo);    background: rgba(77, 124, 15, 0.06); }
.portto-badge-dim {
  background: var(--portto-cinza-100);
  color: var(--portto-cinza-700);
  border: 1px solid var(--portto-borda);
  padding: 4px 10px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ─────────────────────────────────────────────────────────
   BOTÕES
   ───────────────────────────────────────────────────────── */
.portto-btn {
  background: var(--portto-azul);
  color: #fff;
  border: none;
  padding: 11px 26px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
}
.portto-btn:hover { background: var(--portto-azul-claro); }
.portto-btn:disabled {
  background: var(--portto-cinza-300);
  color: var(--portto-cinza-500);
  cursor: not-allowed;
}

.portto-btn-secundario {
  background: var(--portto-bg);
  color: var(--portto-azul);
  border: 1px solid var(--portto-borda);
  padding: 10px 22px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.portto-btn-secundario:hover {
  background: var(--portto-cinza-50);
  border-color: var(--portto-azul);
}

.portto-btn-nav {
  background: var(--portto-bg);
  color: var(--portto-azul);
  border: 1px solid var(--portto-borda);
  padding: 10px 22px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.portto-btn-nav.proximo {
  background: var(--portto-azul);
  color: #fff;
}
.portto-btn-nav:disabled {
  background: var(--portto-cinza-100);
  color: var(--portto-cinza-500);
  border-color: var(--portto-borda);
  cursor: not-allowed;
}

/* ─────────────────────────────────────────────────────────
   FORMS
   ───────────────────────────────────────────────────────── */
.portto-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--portto-cinza-700);
  font-weight: 600;
  margin-bottom: 5px;
}
.portto-input,
.portto-textarea,
.portto-select {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--portto-borda);
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  background: var(--portto-bg);
  color: var(--portto-cinza-900);
}
.portto-input:focus,
.portto-textarea:focus,
.portto-select:focus {
  outline: none;
  border-color: var(--portto-azul);
}
.portto-textarea {
  resize: vertical;
  min-height: 80px;
}

/* ─────────────────────────────────────────────────────────
   ALERTAS E REGRAS DESTACADAS
   ───────────────────────────────────────────────────────── */
.portto-alerta {
  background: var(--portto-alerta-bg);
  border-left: 3px solid var(--portto-alerta);
  padding: 11px 14px;
  border-radius: 4px;
  margin-bottom: 14px;
  font-size: 13px;
  color: #7f1d1d;
  line-height: 1.55;
}
.portto-alerta strong { color: #7f1d1d; }

.portto-regra-ouro {
  background: var(--portto-aviso-bg);
  border-left: 3px solid var(--portto-aviso);
  padding: 10px 14px;
  border-radius: 4px;
  margin: 8px 0;
  font-size: 13px;
  color: #78350f;
  line-height: 1.55;
}

.portto-info-azul {
  background: var(--portto-bloco-entenda-bg);
  border: 1px solid var(--portto-bloco-entenda-borda);
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--portto-cinza-700);
  line-height: 1.55;
}

/* ─────────────────────────────────────────────────────────
   MODAL OVERLAY
   ───────────────────────────────────────────────────────── */
.portto-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  z-index: 9999;
  align-items: flex-start;
  justify-content: center;
  padding: 30px 16px;
  overflow-y: auto;
}
.portto-modal-overlay.aberto { display: flex; }
.portto-modal {
  background: var(--portto-bg);
  border-radius: var(--portto-radius-card);
  max-width: 720px;
  width: 100%;
  box-shadow: var(--portto-shadow-modal);
  overflow: hidden;
}
.portto-modal-header {
  background: var(--portto-azul);
  color: #fff;
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.portto-modal-header h2 { font-size: 16px; font-weight: 700; }
.portto-modal-header .subtitulo {
  font-size: 11px;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  margin-bottom: 4px;
}
.portto-modal-fechar {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
}
.portto-modal-body {
  padding: 22px 24px;
  max-height: calc(85vh - 80px);
  overflow-y: auto;
}

/* ─────────────────────────────────────────────────────────
   FOOTER (rodapé azul-escuro com contato)
   ───────────────────────────────────────────────────────── */
.portto-footer {
  margin-top: 30px;
  padding: 22px 24px;
  background: var(--portto-azul-esc);
  color: #fff;
  border-radius: var(--portto-radius-card);
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}
.portto-footer .portto-footer-texto {
  flex: 1;
  min-width: 260px;
  font-size: 13px;
  line-height: 1.6;
}
.portto-footer strong {
  display: block;
  font-size: 15px;
  margin-bottom: 5px;
}
.portto-footer .portto-footer-contato {
  font-size: 13px;
  opacity: 0.95;
  padding-left: 24px;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  line-height: 1.85;
}
.portto-footer .portto-footer-contato a {
  color: #fff;
  text-decoration: none;
  opacity: 0.95;
}
.portto-footer .portto-footer-contato a:hover {
  opacity: 1;
  text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────
   SPINNER (carregando)
   ───────────────────────────────────────────────────────── */
.portto-spinner {
  border: 3px solid var(--portto-cinza-300);
  border-top-color: var(--portto-azul);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  animation: portto-spin 0.8s linear infinite;
  margin: 0 auto 14px;
}
@keyframes portto-spin {
  to { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────────────────
   RESPONSIVO
   ───────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .portto-hero h1 { font-size: 22px; }
  .portto-card { padding: 20px 18px; }
  .portto-footer .portto-footer-contato {
    padding-left: 0;
    border-left: none;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
  }
}

/* ─────────────────────────────────────────────────────────
   UTILIDADES RESPONSIVAS DO ADMIN (mobile em campo)
   .resp-2col-side = conteúdo + coluna lateral fixa (colapsa em 1 col no celular)
   ───────────────────────────────────────────────────────── */
.resp-2col-side { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 768px) {
  .resp-2col-side { grid-template-columns: 1fr; }
}