/* ==========================================================================
   KIVION7 — Design System Override para SOFA-2.app
   Transição visual: gray-100/white/blue-600 → navy/#0F172A + gold/#C48A4A
   Mantém cores clínicas (verde/âmbar/laranja/vermelho) e print CSS branco
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* --- Cores núcleo Kivion7 --- */
  --k7-navy: #0F172A;
  --k7-navy-700: #1E293B;
  --k7-navy-600: #28344C;
  --k7-copper: #C48A4A;
  --k7-copper-hover: #D4953A;
  --k7-white: #FFFFFF;
  --k7-slate-300: #CBD5E1;
  --k7-slate-400: #94A3B8;
  --k7-slate-500: #64748B;
  --k7-slate-600: #475569;
}

/* --- FUNDO GLOBAL --- */
body.theme-kivion7 {
  background-color: var(--k7-navy);
  color: #F1F5F9;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* --- LANGUAGE SELECTOR (Tela inicial) --- */
.theme-kivion7 #language-selector .bg-white {
  background-color: var(--k7-navy-700) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.theme-kivion7 #language-selector .text-gray-800,
.theme-kivion7 #language-selector h1 {
  color: #F1F5F9 !important;
}

.theme-kivion7 #language-selector .text-gray-600 {
  color: var(--k7-slate-400) !important;
}

/* Botões de idioma — primário em gold, secundários com borda */
.theme-kivion7 #language-selector .bg-blue-600 {
  background-color: var(--k7-copper) !important;
  color: var(--k7-navy) !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(196, 138, 74, 0.3) !important;
}

.theme-kivion7 #language-selector .bg-blue-600:hover {
  background-color: var(--k7-copper-hover) !important;
  box-shadow: 0 6px 16px rgba(196, 138, 74, 0.4) !important;
}

.theme-kivion7 #language-selector .bg-gray-600 {
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: var(--k7-slate-400) !important;
  font-weight: 500 !important;
}

.theme-kivion7 #language-selector .bg-gray-600:hover {
  border-color: var(--k7-copper) !important;
  color: #F1F5F9 !important;
  background-color: rgba(196, 138, 74, 0.08) !important;
}

/* "Install App" button — ocultar (não interativo) */
.theme-kivion7 .install-btn {
  display: none !important;
}

/* --- CALCULATOR WRAPPER --- */
.theme-kivion7 #calculator-wrapper {
  background-color: var(--k7-navy);
}

/* Botões de ação (Share, Change Language) */
.theme-kivion7 #btn-share,
.theme-kivion7 #btn-change-language {
  font-size: 0.875rem !important;
  padding: 8px 16px !important;
  color: var(--k7-copper) !important;
  background-color: transparent !important;
  border: 1px solid var(--k7-navy-600) !important;
}

.theme-kivion7 #btn-share:hover,
.theme-kivion7 #btn-change-language:hover {
  border-color: var(--k7-copper) !important;
  color: #F1F5F9 !important;
  background-color: rgba(196, 138, 74, 0.08) !important;
}

/* Mobile: botões menores e em linha compacta */
@media (max-width: 640px) {
  .theme-kivion7 #btn-share,
  .theme-kivion7 #btn-change-language {
    font-size: 0.75rem !important;
    padding: 6px 10px !important;
    gap: 4px !important;
  }

  .theme-kivion7 #btn-share svg,
  .theme-kivion7 #btn-change-language svg {
    width: 14px !important;
    height: 14px !important;
  }

  .theme-kivion7 .w-full.mb-2.flex {
    flex-direction: row !important;
    gap: 6px !important;
    align-items: center !important;
  }

  .theme-kivion7 .w-full.mb-2.flex #btn-share,
  .theme-kivion7 .w-full.mb-2.flex #btn-change-language {
    flex: 1 !important;
    min-width: auto !important;
    text-align: center !important;
  }

  .theme-kivion7 .w-full.mb-2.flex span {
    font-size: 0.7rem !important;
  }
}

.theme-kivion7 .text-blue-600 {
  color: var(--k7-copper) !important;
}

.theme-kivion7 .text-blue-600:hover {
  color: var(--k7-copper-hover) !important;
}

.theme-kivion7 .bg-white {
  background-color: transparent !important;
  border: 1px solid var(--k7-navy-600) !important;
  color: var(--k7-slate-400) !important;
}

.theme-kivion7 .bg-white:hover {
  border-color: var(--k7-copper) !important;
  color: #F1F5F9 !important;
}

/* --- HEADER & TÍTULO --- */
.theme-kivion7 header {
  text-align: center !important;
  margin-bottom: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.theme-kivion7 header h1 {
  color: #F1F5F9 !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  font-size: 2.25rem !important;
  line-height: 1.2 !important;
  margin-bottom: 16px !important;
}

@media (max-width: 768px) {
  .theme-kivion7 header h1 {
    font-size: 1.875rem !important;
    margin-bottom: 12px !important;
  }
}

/* Subtitle (Ranzani link) — REDUZIDO */
.theme-kivion7 header .text-gray-600 {
  color: var(--k7-slate-400) !important;
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.theme-kivion7 header p {
  color: var(--k7-slate-400) !important;
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  margin: 12px auto 0 auto !important;
  max-width: 80ch !important;
  text-align: center !important;
}

/* Garantir centralização em AMBOS desktop e mobile */
.theme-kivion7 header p,
.theme-kivion7 header .text-gray-600 {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 768px) {
  .theme-kivion7 header p {
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
  }
}

/* --- PATIENT CODE SECTION --- */
.theme-kivion7 #patient-code-section.bg-blue-50 {
  background-color: rgba(196, 138, 74, 0.08) !important;
  border-color: rgba(196, 138, 74, 0.3) !important;
}

.theme-kivion7 #patient-code-section .text-gray-700 {
  color: #F1F5F9 !important;
}

.theme-kivion7 #patient-code-section .text-gray-600 {
  color: var(--k7-slate-400) !important;
}

.theme-kivion7 #patient-code-section input {
  background-color: rgba(15, 23, 42, 0.8) !important;
  border-color: rgba(196, 138, 74, 0.25) !important;
  color: var(--k7-slate-300) !important;
}

.theme-kivion7 #patient-code-section input:focus {
  border-color: var(--k7-copper) !important;
  box-shadow: 0 0 0 3px rgba(196, 138, 74, 0.1) !important;
}

/* --- GRID LAYOUT: 2 colunas (desktop) / 1 (mobile) --- */
.theme-kivion7 .grid.grid-cols-1 {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}

@media (max-width: 768px) {
  .theme-kivion7 .grid.grid-cols-1 {
    grid-template-columns: 1fr !important;
  }
}

/* --- ORGAN CARDS (6 cards) — COMPACTOS --- */
.theme-kivion7 .bg-white.p-6.rounded-lg {
  background-color: var(--k7-navy-700) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-height: auto !important;
}

/* Ocultar imagens SVGs completamente */
.theme-kivion7 .bg-white.p-6.rounded-lg img {
  display: none !important;
}

/* Títulos dos cards (ex: 🧠 Neurológico) — BRANCO full, COMPACTO --- */
.theme-kivion7 .bg-white.p-6.rounded-lg h3 {
  color: #F1F5F9 !important;
  font-weight: 600 !important;
  margin: 0 !important;
  font-size: 1rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  justify-content: space-between !important;
}

/* Labels genéricos — slate-400 (contraste 4.8:1 ✓) COMPACTOS */
.theme-kivion7 .bg-white.p-6.rounded-lg label,
.theme-kivion7 label.block.text-sm {
  color: var(--k7-slate-400) !important;
  font-weight: 500 !important;
  font-size: 0.8125rem !important;
  margin-bottom: 3px !important;
}

/* Texto genérico em cards — slate-300 */
.theme-kivion7 .text-gray-800 {
  color: #F1F5F9 !important;
}

.theme-kivion7 .text-gray-700 {
  color: var(--k7-slate-400) !important;
}

.theme-kivion7 .text-gray-600 {
  color: var(--k7-slate-500) !important;
}

/* Override mais específico para cards */
.theme-kivion7 .bg-white.p-6 .text-gray-700 {
  color: var(--k7-slate-400) !important;
}

/* Score pts em gold */
.theme-kivion7 .text-blue-600 {
  color: var(--k7-copper) !important;
}

/* Select/Input em cards — COMPACTOS */
.theme-kivion7 .bg-white.p-6.rounded-lg select,
.theme-kivion7 .bg-white.p-6.rounded-lg input[type="text"],
.theme-kivion7 .bg-white.p-6.rounded-lg input[type="number"] {
  background-color: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid rgba(196, 138, 74, 0.3) !important;
  color: var(--k7-slate-300) !important;
  font-size: 0.8125rem !important;
  padding: 5px 8px !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
}

.theme-kivion7 select:hover,
.theme-kivion7 input:hover {
  border-color: rgba(196, 138, 74, 0.5) !important;
  background-color: rgba(15, 23, 42, 0.8) !important;
}

.theme-kivion7 select:focus,
.theme-kivion7 input:focus {
  border-color: var(--k7-copper) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(196, 138, 74, 0.15) !important;
  background-color: rgba(15, 23, 42, 0.9) !important;
}

/* Espaçamento interno dos cards — compacto */
.theme-kivion7 .bg-white.p-6.rounded-lg .space-y-4 {
  gap: 6px !important;
}

.theme-kivion7 .bg-white.p-6.rounded-lg .space-y-4 > * + * {
  margin-top: 6px !important;
}

/* Ocultar badge v3.0 — será substituído por outro mecanismo de versão */
.theme-kivion7 #version-badge-top,
.theme-kivion7 #version-badge-header {
  display: none !important;
}

/* Info button hover */
.theme-kivion7 .hover\:bg-blue-50:hover {
  background-color: rgba(196, 138, 74, 0.1) !important;
}

/* Checkbox — compacto */
.theme-kivion7 .bg-white.p-6.rounded-lg input[type="checkbox"] {
  accent-color: var(--k7-copper) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  background-color: transparent !important;
  width: 16px !important;
  height: 16px !important;
}

.theme-kivion7 .bg-white.p-6.rounded-lg .flex.items-center {
  gap: 6px !important;
}

.theme-kivion7 .bg-white.p-6.rounded-lg label[for*="other_vaso"],
.theme-kivion7 .bg-white.p-6.rounded-lg label[for*="mech_support"] {
  font-size: 0.8rem !important;
  margin: 0 !important;
}

/* --- RESET BUTTON --- */
.theme-kivion7 .bg-gray-600 {
  background-color: var(--k7-navy-600) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #F1F5F9 !important;
}

.theme-kivion7 .bg-gray-600:hover {
  background-color: var(--k7-copper) !important;
  color: var(--k7-navy) !important;
}

/* --- TOTAL SCORE CONTAINER --- */
.theme-kivion7 #total-score-container,
.theme-kivion7 #total-score-container.bg-blue-600 {
  background: linear-gradient(135deg, var(--k7-navy-700) 0%, var(--k7-navy) 100%) !important;
  border: 1px solid rgba(196, 138, 74, 0.4) !important;
  color: #F1F5F9 !important;
  position: relative;
  box-shadow: 0 0 0 1px rgba(196, 138, 74, 0.2), 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

.theme-kivion7 #total-score-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--k7-copper);
  border-radius: 22px 22px 0 0;
}

/* Score number — enorme e branco, com gold accent */
.theme-kivion7 #total-score {
  color: #F1F5F9 !important;
  font-size: 4rem !important;
  font-weight: 800 !important;
  margin: 12px 0 !important;
}

/* Labels no score box — slate-400 */
.theme-kivion7 #total-score-container h2,
.theme-kivion7 #total-score-container .text-lg {
  color: #F1F5F9 !important;
  font-weight: 600 !important;
}

.theme-kivion7 #mortality-text {
  color: var(--k7-slate-300) !important;
  font-weight: 500 !important;
}

.theme-kivion7 #mortality-attribution {
  color: var(--k7-slate-500) !important;
  opacity: 0.9 !important;
}

/* Link Ranzani no header — COPPER (destaque) */
.theme-kivion7 a[href*="jamanetwork"],
.theme-kivion7 a[href*="ranzani"],
.theme-kivion7 a[href*="zenodo"] {
  color: var(--k7-copper) !important;
  text-decoration: underline !important;
  font-weight: 500 !important;
}

.theme-kivion7 a[href*="jamanetwork"]:hover,
.theme-kivion7 a[href*="ranzani"]:hover,
.theme-kivion7 a[href*="zenodo"]:hover {
  color: var(--k7-copper-hover) !important;
}

/* Export PDF button */
.theme-kivion7 #export-pdf-btn {
  color: var(--k7-copper) !important;
}

.theme-kivion7 #export-pdf-btn:hover {
  color: var(--k7-copper-hover) !important;
}

/* Powered by */
.theme-kivion7 #total-score-container .text-xs {
  color: var(--k7-slate-500) !important;
}

/* --- PRÓXIMOS PASSOS SECTION --- */
.theme-kivion7 #next-steps-section .text-gray-900,
.theme-kivion7 #next-steps-section .text-gray-800 {
  color: #F1F5F9 !important;
}

.theme-kivion7 #next-steps-eyebrow {
  color: #fbbf24 !important;
  background-color: rgba(69, 26, 3, 0.6) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}

.theme-kivion7 #next-steps-section .text-gray-500 {
  color: var(--k7-slate-500) !important;
}

.theme-kivion7 #next-steps-section .text-gray-600 {
  color: var(--k7-slate-400) !important;
}

/* ICU Triage cross-link card */
.theme-kivion7 #icu-triage-crosslink.bg-blue-50 {
  background-color: rgba(196, 138, 74, 0.08) !important;
  border-color: rgba(196, 138, 74, 0.3) !important;
}

.theme-kivion7 #icu-triage-crosslink .text-blue-600 {
  color: var(--k7-copper) !important;
}

.theme-kivion7 #icu-triage-crosslink .text-blue-700 {
  color: var(--k7-copper) !important;
  background-color: rgba(196, 138, 74, 0.15) !important;
}

.theme-kivion7 #icu-triage-crosslink .text-gray-700 {
  color: #F1F5F9 !important;
}

.theme-kivion7 #icu-triage-crosslink .text-gray-600 {
  color: var(--k7-slate-400) !important;
}

.theme-kivion7 #icu-triage-crosslink .bg-blue-600 {
  background-color: var(--k7-copper) !important;
  color: var(--k7-navy) !important;
}

.theme-kivion7 #icu-triage-crosslink .bg-blue-600:hover {
  background-color: var(--k7-copper-hover) !important;
}

.theme-kivion7 #icu-triage-crosslink .bg-white {
  background-color: rgba(196, 138, 74, 0.2) !important;
  color: var(--k7-copper) !important;
  border: none !important;
}

/* Tracker CTA card */
.theme-kivion7 #tracker-cta.bg-green-50 {
  background-color: rgba(16, 185, 129, 0.08) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}

.theme-kivion7 #tracker-cta .text-green-600 {
  color: #10b981 !important;
}

.theme-kivion7 #tracker-cta .text-green-700 {
  color: #10b981 !important;
  background-color: rgba(16, 185, 129, 0.15) !important;
}

.theme-kivion7 #tracker-cta .text-gray-700 {
  color: #F1F5F9 !important;
}

.theme-kivion7 #tracker-cta .text-gray-600 {
  color: var(--k7-slate-400) !important;
}

.theme-kivion7 #tracker-cta .bg-green-600 {
  background-color: #10b981 !important;
  color: #fff !important;
}

.theme-kivion7 #tracker-cta .bg-green-600:hover {
  background-color: #059669 !important;
}

.theme-kivion7 #tracker-cta .bg-white {
  background-color: rgba(16, 185, 129, 0.2) !important;
  color: #10b981 !important;
  border: none !important;
}

/* --- MODAIS --- */
.theme-kivion7 .fixed.inset-0 {
  background-color: rgba(0, 0, 0, 0.7) !important;
}

.theme-kivion7 .bg-white.rounded-lg.shadow-lg {
  background-color: var(--k7-navy-700) !important;
  color: #F1F5F9 !important;
}

.theme-kivion7 .bg-white.rounded-lg .text-gray-800 {
  color: #F1F5F9 !important;
}

.theme-kivion7 .bg-white.rounded-lg .text-gray-600 {
  color: var(--k7-slate-400) !important;
}

.theme-kivion7 .bg-white.rounded-lg .text-blue-600 {
  color: var(--k7-copper) !important;
}

.theme-kivion7 .bg-white.rounded-lg a:hover {
  color: var(--k7-copper-hover) !important;
}

/* Botões em modais */
.theme-kivion7 .bg-white.rounded-lg .bg-blue-600 {
  background-color: var(--k7-copper) !important;
  color: var(--k7-navy) !important;
}

.theme-kivion7 .bg-white.rounded-lg .bg-blue-600:hover {
  background-color: var(--k7-copper-hover) !important;
}

.theme-kivion7 .bg-white.rounded-lg .bg-gray-200 {
  background-color: var(--k7-navy-600) !important;
  color: #F1F5F9 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.theme-kivion7 .bg-white.rounded-lg .bg-gray-200:hover {
  border-color: var(--k7-copper) !important;
}

/* --- CONSENT BANNER (já é escuro, afinar para navy) --- */
.theme-kivion7 #consent-banner {
  background-color: var(--k7-navy-700) !important;
  border: 1px solid rgba(196, 138, 74, 0.3) !important;
}

.theme-kivion7 #consent-banner button {
  border-radius: 8px;
}

.theme-kivion7 #consent-banner #consent-accept {
  background-color: var(--k7-copper) !important;
  color: var(--k7-navy) !important;
}

.theme-kivion7 #consent-banner #consent-decline {
  background-color: var(--k7-navy-600) !important;
  color: #F1F5F9 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* --- FOOTER --- */
.theme-kivion7 .text-gray-400 {
  color: var(--k7-slate-500) !important;
}

.theme-kivion7 footer a {
  color: var(--k7-copper) !important;
}

.theme-kivion7 footer a:hover {
  color: var(--k7-copper-hover) !important;
}

/* --- RISK INDICATOR BAR --- */
.theme-kivion7 #risk-indicator {
  background: linear-gradient(90deg,
    #10b981 0%,     /* verde: score 0-2 */
    #eab308 25%,    /* amarelo: score 3-5 */
    #f97316 50%,    /* laranja: score 6-11 */
    #ef4444 100%    /* vermelho: score 12+ */
  ) !important;
}

.theme-kivion7 #risk-marker {
  border-color: #F1F5F9 !important;
  background-color: rgba(241, 245, 249, 0.2) !important;
}

/* --- PRINT CSS (manter branco) --- */
@media print {
  body.theme-kivion7 {
    background-color: #ffffff !important;
    color: #000000 !important;
  }

  .theme-kivion7 .bg-white,
  .theme-kivion7 .bg-blue-600,
  .theme-kivion7 .bg-green-50,
  .theme-kivion7 .bg-blue-50 {
    background-color: #ffffff !important;
    border-color: #000000 !important;
  }

  .theme-kivion7 * {
    background-color: transparent !important;
    color: #000000 !important;
  }
}

/* --- RADIO CARDS (Kivion7 UI Selection List) --- */
.radio-card {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none;
  user-select: none;
  outline: none !important;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.radio-card:active {
  transform: scale(0.99);
}
.gap-3 {
  gap: 0.75rem !important;
}
.theme-kivion7 .radio-card {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background-color: rgba(15, 23, 42, 0.4) !important;
}
.theme-kivion7 .radio-card:hover {
  background-color: rgba(196, 138, 74, 0.1) !important;
  border-color: rgba(196, 138, 74, 0.5) !important;
}
.theme-kivion7 .radio-card.bg-blue-50 {
  background-color: rgba(196, 138, 74, 0.15) !important;
  border-color: var(--k7-copper) !important;
  box-shadow: 0 0 0 1px var(--k7-copper) !important;
}
.theme-kivion7 .radio-card.ring-1,
.theme-kivion7 .radio-card.ring-blue-500 {
  --tw-ring-color: transparent !important;
  box-shadow: 0 0 0 1px var(--k7-copper) !important;
}
.theme-kivion7 .radio-card.bg-blue-50 span {
  color: #F1F5F9 !important;
  font-weight: 600 !important;
}
.theme-kivion7 .radio-indicator {
  border-color: rgba(255, 255, 255, 0.3) !important;
  background-color: transparent !important;
}
.theme-kivion7 .radio-indicator.border-blue-500 {
  border-color: var(--k7-copper) !important;
}
.theme-kivion7 .inner-dot {
  background-color: var(--k7-copper) !important;
}

/* Fix iOS Auto-zoom on inputs */
@media screen and (max-width: 768px) {
  .theme-kivion7 input[type="text"],
  .theme-kivion7 input[type="number"] {
    font-size: 16px !important;
  }
}

/* --- NEXT STEPS DYNAMICS --- */
.theme-kivion7 #icu-triage-crosslink.icu-pulse-glow {
  border-color: var(--k7-copper) !important;
  box-shadow: 0 0 18px rgba(196, 138, 74, 0.45) !important;
  animation: pulseGlow 2s infinite alternate;
}
@keyframes pulseGlow {
  0% { box-shadow: 0 0 6px rgba(196, 138, 74, 0.2); }
  100% { box-shadow: 0 0 22px rgba(196, 138, 74, 0.6); }
}
.theme-kivion7 .arrow-bounce {
  display: inline-block;
  transition: transform 0.2s ease;
}
.theme-kivion7 a:hover .arrow-bounce,
.theme-kivion7 button:hover .arrow-bounce {
  transform: translateX(5px);
}