/* ============================================================
   NEFRO-VELOCÍMETRO — Estilos
   Rediseño: Profesional médico claro, azules NKF-inspired
   Compatible con todos los selectores existentes en app.js
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Paleta clara profesional */
  --primary:       #2563eb;
  --primary-dark:  #1d4ed8;
  --primary-light: #eff6ff;
  --primary-mid:   #bfdbfe;
  --accent-1:      #0ea5e9;
  --accent-2:      #2563eb;
  --accent-3:      #7c3aed;
  --dark:          #1e293b;
  --text:          #334155;
  --text-primary:  #1e293b;
  --text-secondary:#475569;
  --text-muted:    #94a3b8;
  --border:        #e2e8f0;
  --bg:            #f8fafc;
  --bg-card:       #ffffff;
  --bg-card2:      #f8fafc;
  --white:         #ffffff;
  --radius-lg:     12px;
  --radius-md:     8px;
  --radius-sm:     6px;
  --shadow-card:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md:     0 4px 12px rgba(0,0,0,.08);

  /* Stage colors — se mantienen en canvas */
  --stage-1:  #16a34a;
  --stage-2:  #65a30d;
  --stage-3a: #ca8a04;
  --stage-3b: #ea580c;
  --stage-4:  #dc2626;
  --stage-5:  #7f1d1d;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
}

/* ── HEADER ───────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}
.header-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo { display: flex; align-items: center; gap: 0.85rem; }
.logo-icon { width: 36px; height: 36px; flex-shrink: 0; }
.logo-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--dark);
  letter-spacing: -0.3px;
  line-height: 1.1;
}
.logo-sub { font-size: 0.68rem; color: var(--text-muted); font-weight: 400; margin-top: 2px; }

.header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.header-link {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--primary-mid);
  border-radius: 999px;
  background: var(--primary-light);
  transition: all 0.15s;
}
.header-link:hover { background: var(--primary-mid); }
/* legacy badge — hidden now, kept for compat */
.header-badge { display: none; }

.visit-counter {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 500;
}
.visit-badge {
  height: 15px;
  width: auto;
  display: block;
  border-radius: 3px;
}
.btn-reset {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0.38rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.btn-reset:hover { background: #fff1f2; border-color: #fca5a5; color: #dc2626; }

/* ── LAYOUT ───────────────────────────────────────────────── */
.main-content {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ── HERO ─────────────────────────────────────────────────── */
.hero { text-align: center; padding: 0.25rem 0 0; }
.hero-title {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.35rem, 3.5vw, 1.9rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--dark);
  margin-bottom: 0.5rem;
}
.gradient-text {
  color: var(--primary);
  -webkit-text-fill-color: var(--primary);
}
.hero-subtitle {
  max-width: 620px;
  margin: 0 auto;
  font-size: 0.88rem;
  color: var(--text-secondary);
}
.hero-subtitle strong { color: var(--dark); }

/* ── CARD ─────────────────────────────────────────────────── */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* ── MAIN PANEL ───────────────────────────────────────────── */
.main-panel {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
  padding: 0;
}
.panel-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.1rem;
  width: 260px;
  flex-shrink: 0;
  padding: 1.75rem 1.5rem;
}
.panel-divider {
  width: 1px;
  background: var(--border);
  flex-shrink: 0;
  align-self: stretch;
}
.panel-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1.25rem 1rem 0.75rem;
}
#speedometer {
  max-width: 100%;
  height: auto;
}

/* ── INPUTS ───────────────────────────────────────────────── */
.input-group { display: flex; flex-direction: column; gap: 0.4rem; }
.input-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
}
.input-label svg { width: 12px; height: 12px; stroke: var(--primary); }
.alb-label { color: var(--accent-3); }
.alb-label svg { stroke: var(--accent-3); }

.input-row { display: flex; }
.gfr-input {
  width: 100%;
  background: var(--bg-card2);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--dark);
  font-family: 'Outfit', sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  padding: 0.5rem 0.75rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  -moz-appearance: textfield;
  appearance: textfield;
  text-align: center;
  letter-spacing: -0.03em;
}
.gfr-input::-webkit-inner-spin-button,
.gfr-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.gfr-input::placeholder { color: var(--text-muted); font-size: 1.3rem; }
.gfr-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.alb-input:focus { border-color: var(--accent-3); box-shadow: 0 0 0 3px rgba(124,58,237,.12); }
.input-unit {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: -2px;
}

/* ── CALC BUTTON ──────────────────────────────────────────── */
.calc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--primary);
  border: none;
  border-radius: var(--radius-md);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.7rem 1rem;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s, box-shadow 0.2s;
  margin-top: 0.15rem;
}
.calc-btn svg { width: 15px; height: 15px; }
.calc-btn:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,.3); }
.calc-btn:active { transform: translateY(0); }
.input-hint { margin-top: 0.1rem; font-size: 0.7rem; color: var(--text-muted); text-align: center; }

/* ── SPEEDOMETER TITLE ────────────────────────────────────── */
.speedometer-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}
.speedometer-title svg { width: 12px; height: 12px; stroke: var(--primary); }

/* ── RESULT PANEL ─────────────────────────────────────────── */
.result-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 0.9rem;
  border-radius: var(--radius-md);
  background: var(--primary-light);
  border: 1px solid var(--primary-mid);
  text-align: center;
  animation: fadeSlide 0.4s ease both;
}
.result-panel.hidden { visibility: hidden; opacity: 0; pointer-events: none; }

@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.stage-badge {
  min-width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  flex-shrink: 0;
  border: 3px solid currentColor;
  margin: 0 auto;
}
.stage-name {
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 2px;
  line-height: 1.3;
}
.stage-desc { font-size: 0.73rem; color: var(--text-secondary); line-height: 1.4; }

/* ── ALBUMINURIA RESULT ───────────────────────────────────── */
.alb-result {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  background: rgba(124,58,237,.07);
  border: 1px solid rgba(124,58,237,.2);
  animation: fadeSlide 0.3s ease both;
  width: 100%;
}
.alb-result.hidden { display: none; }
.alb-badge {
  min-width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2.5px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  flex-shrink: 0;
}
.alb-desc { font-size: 0.7rem; color: var(--text-secondary); line-height: 1.4; text-align: left; }
.alb-desc strong { font-size: 0.75rem; color: var(--dark); }

/* ── PRINT BUTTON ─────────────────────────────────────────── */
.print-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.45rem;
  background: rgba(37,99,235,.06);
  border: 1px solid rgba(37,99,235,.3);
  border-radius: var(--radius-sm);
  color: var(--primary);
  font-family: 'Inter', sans-serif;
  font-size: 0.73rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.print-btn svg { width: 14px; height: 14px; stroke: currentColor; }
.print-btn:hover { background: rgba(37,99,235,.12); border-color: rgba(37,99,235,.5); }

/* ── CKD-EPI ACCORDION ────────────────────────────────────── */
.calc-accordion {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card2);
}
.accordion-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  padding: 0.6rem 0.85rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.accordion-toggle svg:first-child { width: 14px; height: 14px; stroke: var(--primary); flex-shrink: 0; }
.accordion-toggle .chevron { width: 14px; height: 14px; margin-left: auto; stroke: var(--text-muted); transition: transform 0.2s; }
.accordion-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.accordion-toggle:hover { background: var(--primary-light); }

.accordion-body { padding: 0.85rem; border-top: 1px solid var(--border); }

.formula-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}
.formula-tab {
  flex: 1;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.formula-tab.active { background: var(--primary); border-color: var(--primary); color: white; }
.formula-tab:not(.active):hover { border-color: var(--primary); color: var(--primary); }

.epi-fields { display: flex; flex-direction: column; gap: 0.6rem; }
.epi-row { display: flex; flex-direction: column; gap: 0.25rem; }
.epi-row-inline { flex-direction: row; align-items: center; justify-content: space-between; }
.epi-label { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); }
.epi-input {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--dark);
  background: var(--white);
  outline: none;
  width: 100%;
  transition: border-color 0.15s;
}
.epi-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(37,99,235,.1); }

.sex-toggle { display: flex; gap: 0.35rem; }
.sex-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--white);
  font-size: 1rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sex-btn.active { background: var(--primary); border-color: var(--primary); color: white; }
.sex-btn:not(.active):hover { border-color: var(--primary); color: var(--primary); }

.calc-epi-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  background: var(--primary);
  border: none;
  border-radius: var(--radius-sm);
  color: white;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 0.6rem;
}
.calc-epi-btn svg { width: 14px; height: 14px; }
.calc-epi-btn:hover { background: var(--primary-dark); }
.epi-note { font-size: 0.68rem; color: var(--text-muted); text-align: center; margin-top: 0.4rem; }

/* ── STAGES SECTION ───────────────────────────────────────── */
.stages-section { }
.section-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}
.stages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
}
.stage-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  box-shadow: var(--shadow-card);
}
.stage-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stage-card.active {
  border-color: var(--active-color, var(--primary));
  box-shadow: 0 0 0 2px var(--active-color, var(--primary)), var(--shadow-md);
}
.stage-dot {
  min-width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
}
.stage-card-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.9rem; color: var(--dark); margin-bottom: 2px; }
.stage-card-range { font-size: 0.76rem; color: var(--text-muted); font-weight: 500; }
.stage-card-desc { font-size: 0.75rem; color: var(--text-secondary); margin-top: 3px; line-height: 1.4; }

/* ── EXPLANATION ──────────────────────────────────────────── */
.explanation-section {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.5rem;
}
.explanation-icon {
  min-width: 44px;
  height: 44px;
  background: var(--primary-light);
  border: 1px solid var(--primary-mid);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.explanation-icon svg { width: 20px; height: 20px; stroke: var(--primary); }
.explanation-content h3 { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.95rem; color: var(--dark); margin-bottom: 0.5rem; }
.explanation-content ul { list-style: none; display: flex; flex-direction: column; gap: 0.3rem; }
.explanation-content li { font-size: 0.82rem; color: var(--text-secondary); }
.explanation-content li::before { content: '›'; color: var(--primary); font-weight: 700; margin-right: 7px; }
.explanation-content strong { color: var(--dark); }
.disclaimer { margin-top: 0.75rem; font-size: 0.75rem; color: var(--text-muted); font-style: italic; border-top: 1px solid var(--border); padding-top: 0.6rem; }

/* ── FOOTER ───────────────────────────────────────────────── */
.site-footer {
  text-align: center;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--white);
}
.site-footer strong { color: var(--text-secondary); }

/* ── REFERENCIAS (discretas, sin recuadro) ───────────────── */
.refs-section {
  margin: 2rem auto 0;
  padding: 1rem 0.5rem 0 1.5rem;
  border-top: 1px solid var(--border);
  max-width: 760px;
}
.refs-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 0.4rem;
}
.refs-intro {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin: 0 0 0.6rem;
}
.refs-list {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.refs-list li {
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.ref-tag {
  display: inline;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-right: 0.3rem;
}
.ref-tag::after { content: ' —'; }
.refs-list em { color: var(--text-secondary); font-style: italic; }
.refs-list a {
  color: #2563eb;
  text-decoration: none;
  font-weight: 600;
  word-break: break-word;
}
.refs-list a:hover { text-decoration: underline; }

/* ── AVISO USO PROFESIONAL ────────────────────────────────── */
.pro-notice {
  max-width: 720px;
  margin: 0 auto 0.75rem;
  padding: 0.6rem 0.9rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
}
.pro-notice strong { color: #1d4ed8; }

/* ── POLÍTICA DE DATOS ────────────────────────────────────── */
.privacy {
  max-width: 720px;
  margin: 1rem auto 0;
  text-align: left;
}
.privacy summary {
  cursor: pointer;
  font-weight: 600;
  color: #2563eb;
  text-align: center;
  list-style: none;
  padding: 0.4rem;
}
.privacy summary::-webkit-details-marker { display: none; }
.privacy summary::before { content: '\25B8  '; }
.privacy[open] summary::before { content: '\25BE  '; }
.privacy-body {
  margin-top: 0.75rem;
  padding: 1rem 1.15rem;
  background: var(--bg, #f8fafc);
  border: 1px solid var(--border);
  border-radius: 8px;
  line-height: 1.65;
}
.privacy-body p { margin: 0 0 0.7rem; }
.privacy-body ul { margin: 0 0 0.7rem; padding-left: 1.2rem; }
.privacy-body li { margin-bottom: 0.25rem; }
.privacy-legal {
  margin-top: 0.9rem !important;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
  font-size: 0.72rem;
}

/* ── NOMBRES OPCIONALES PARA LA HOJA ─────────────────────── */
.print-names { display: flex; flex-direction: column; gap: 0.45rem; margin: 0.9rem 0 0.6rem; }
.name-input {
  width: 100%;
  padding: 0.55rem 0.75rem;
  font: inherit;
  font-size: 0.82rem;
  color: var(--text-primary);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
}
.name-input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.name-input::placeholder { color: var(--text-muted); }

/* ── PRINT ONLY ───────────────────────────────────────────── */
.print-only { display: none !important; }

/* ── @MEDIA PRINT ─────────────────────────────────────────── */
@media print {
  body { background: white; color: black; margin: 0; font-size: 10pt; }
  .site-header, .main-content, .site-footer { display: none !important; }
  .print-only {
    display: block !important;
    padding: 1.2cm 1.5cm;
  }
  .pr-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 2pt solid #1d4ed8;
    padding-bottom: 8pt;
    margin-bottom: 14pt;
  }
  .pr-logo { font-size: 16pt; font-weight: 800; color: #1d4ed8; }
  .pr-date { font-size: 8pt; color: #555; }
  .pr-title { font-size: 14pt; font-weight: 700; margin: 10pt 0 10pt; color: #1e293b; }
  .pr-names { display: flex; gap: 24pt; margin: 0 0 12pt; font-size: 10pt; }
  .pr-name-row { flex: 1; display: flex; align-items: baseline; gap: 6pt; }
  .pr-name-label { font-weight: 700; color: #334155; white-space: nowrap; }
  .pr-name-value { flex: 1; border-bottom: 1pt solid #94a3b8; min-height: 12pt; padding-bottom: 1pt; color: #111; }
  .pr-value-block {
    background: #eff6ff;
    border: 1pt solid #bfdbfe;
    border-radius: 5pt;
    padding: 10pt 14pt;
    margin-bottom: 12pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .pr-val-label { font-size: 8pt; color: #555; text-transform: uppercase; margin-bottom: 4pt; }
  .pr-val-number { font-size: 22pt; font-weight: 800; color: #1d4ed8; }
  .pr-val-unit { font-size: 11pt; font-weight: 400; color: #555; }
  .pr-stage-line { font-size: 11pt; font-weight: 600; margin-top: 4pt; color: #334155; }
  .pr-canvas-wrap { text-align: center; margin-bottom: 12pt; }
  .pr-speedometer-img { max-width: 380pt; height: auto; }
  .pr-alb-block { font-size: 10pt; margin-bottom: 10pt; padding: 6pt 10pt; border: 0.5pt solid #e2e8f0; border-radius: 4pt; }
  .pr-description { font-size: 9pt; color: #334155; line-height: 1.5; margin-bottom: 12pt; }
  .pr-disclaimer { border-top: 0.5pt solid #ccc; padding-top: 8pt; font-size: 7.5pt; color: #777; text-align: center; }
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 760px) {
  .main-content { padding: 1rem 0.75rem 2rem; gap: 1rem; }
  .main-panel { flex-direction: column; }
  .panel-left { width: 100%; padding: 1.25rem 1.25rem 0; }
  .panel-divider { display: none; }
  .panel-right { padding: 0.75rem 0.75rem 1rem; }
  .gfr-input { font-size: 2rem; }
  .stages-grid { grid-template-columns: 1fr; }
  .explanation-section { flex-direction: column; }
  .header-inner { flex-wrap: wrap; gap: 0.5rem; }
  .header-link { display: none; }
}

/* ── RIESGO KDIGO G×A ─────────────────────────────────────── */
.risk-card {
  padding: 1.25rem 1.5rem 1.4rem;
}
.risk-intro {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 1.1rem;
  max-width: 62ch;
}
.risk-intro strong { color: var(--dark); }

.risk-table-wrap { overflow-x: auto; }

.risk-table {
  border-collapse: separate;
  border-spacing: 4px;
  width: 100%;
  min-width: 460px;
  table-layout: fixed;
}
.risk-table th,
.risk-table td { text-align: center; }

/* Encabezados de columna (A1/A2/A3) */
.risk-col-head {
  padding: 0.4rem 0.3rem 0.55rem;
  font-family: 'Outfit', sans-serif;
}
.risk-col-key {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--dark);
}
.risk-col-range {
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 1px;
}

/* Esquina + rótulos de eje */
.risk-corner {
  width: 118px;
  padding: 0.3rem;
  font-size: 0.66rem;
  line-height: 1.35;
  color: var(--text-muted);
  font-weight: 600;
  text-align: left;
}
.risk-axis-top { display: block; text-align: right; }
.risk-axis-left { display: block; }

/* Encabezados de fila (G1..G5) */
.risk-row-head {
  text-align: left;
  padding: 0.45rem 0.55rem;
  border-left: 4px solid var(--row-color, var(--border));
  background: var(--bg-card2);
  border-radius: var(--radius-sm);
}
.risk-row-key {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--row-color, var(--dark));
}
.risk-row-range {
  display: block;
  font-size: 0.66rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* Celdas de riesgo */
.risk-cell {
  position: relative;
  padding: 0.6rem 0.35rem;
  border-radius: var(--radius-sm);
  background: var(--cell-bg);
  border: 1px solid var(--cell-border);
  transition: transform 0.15s, box-shadow 0.15s;
}
.risk-cell-name {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--cell-fg);
  line-height: 1.2;
}
.risk-cell-freq {
  position: absolute;
  top: 3px;
  right: 5px;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--cell-fg);
  opacity: 0.55;
}

/* Casilla del paciente */
.risk-cell.active {
  box-shadow: 0 0 0 3px var(--cell-fg), var(--shadow-md);
  transform: scale(1.04);
  z-index: 2;
}
.risk-cell.active .risk-cell-name { font-size: 0.78rem; }
/* Fila resaltada cuando falta la albuminuria */
.risk-row.row-active .risk-cell { opacity: 1; }
.risk-table.has-gfr .risk-row:not(.row-active) .risk-cell { opacity: 0.4; }
.risk-table.has-gfr .risk-row:not(.row-active) .risk-row-head { opacity: 0.5; }

/* Leyenda */
.risk-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 1rem;
}
.risk-legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.risk-legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* Nota dinámica */
.risk-note {
  margin-top: 0.9rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  background: var(--bg-card2);
  border: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.risk-note.filled {
  background: var(--note-bg, var(--primary-light));
  border-color: var(--note-border, var(--primary-mid));
  color: var(--note-fg, var(--dark));
  font-weight: 500;
}
.risk-foot {
  margin-top: 0.8rem;
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Badge de riesgo en el panel de resultado */
.risk-result {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--border);
}
.risk-result.hidden { display: none; }
.risk-result-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.risk-result-badge {
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  border: 1.5px solid currentColor;
}
.risk-result-link {
  font-size: 0.7rem;
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}
.risk-result-link:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .risk-card { padding: 1rem 1rem 1.2rem; }
  .risk-table { min-width: 380px; border-spacing: 3px; }
  .risk-corner { width: 88px; font-size: 0.6rem; }
  .risk-cell { padding: 0.5rem 0.2rem; }
  .risk-cell-name { font-size: 0.66rem; }
  .risk-row-key { font-size: 0.75rem; }
}

@media print {
  .pr-risk-block {
    font-size: 10pt;
    margin-bottom: 10pt;
    padding: 6pt 10pt;
    border: 0.5pt solid #e2e8f0;
    border-radius: 4pt;
  }
}