/* tweaks que Tailwind no cubre o que valen la pena centralizar */

html { scroll-behavior: smooth; }

/* foco visible y bonito en todo elemento interactivo */
:focus-visible {
  outline: 2px solid #2c5282;
  outline-offset: 2px;
  border-radius: 4px;
}

/* prosa con HTML embebido desde data.json */
.prose-narrow b, .prose-narrow strong { color: #1a202c; font-weight: 600; }
.prose-narrow i, .prose-narrow em     { color: #2d3748; }
.prose-narrow code                    { background: #edf2f7; padding: 1px 5px;
                                        border-radius: 4px; font-size: 0.875em;
                                        font-family: ui-monospace, SFMono-Regular, monospace; }

/* status pills */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: 9999px;
  font-size: 0.75rem; font-weight: 600;
  white-space: nowrap;
}
.pill.green { background: #c6f6d5; color: #22543d; }
.pill.red   { background: #fed7d7; color: #742a2a; }

/* scorecard */
.scorecard {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color 120ms, box-shadow 120ms;
}
.scorecard:hover { border-color: #cbd5e0; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.scorecard .lbl { font-size: 0.7rem; letter-spacing: 0.06em;
                  text-transform: uppercase; color: #718096; font-weight: 600; }
.scorecard .val { font-size: 2.25rem; font-weight: 700; line-height: 1.1;
                  font-variant-numeric: tabular-nums; }
.scorecard.app  .val { color: #2c5282; }
.scorecard.gnp  .val { color: #c05621; }
.scorecard.meta .val { color: #4a5568; font-size: 1.65rem; }

/* tabla resumen */
.resumen-tabla { width: 100%; border-collapse: collapse; }
.resumen-tabla th, .resumen-tabla td { padding: 12px 14px; text-align: left;
                                       font-size: 0.875rem; }
.resumen-tabla thead th { background: #2c5282; color: #ffffff;
                          font-weight: 600; font-size: 0.8rem;
                          letter-spacing: 0.02em; }
.resumen-tabla tbody tr { border-bottom: 1px solid #edf2f7;
                          transition: background-color 100ms; }
.resumen-tabla tbody tr:nth-child(odd) { background: #f7fafc; }
.resumen-tabla tbody tr:hover { background: #ebf3fb; }
.resumen-tabla td.num   { font-variant-numeric: tabular-nums; }
.resumen-tabla td.kpi   { font-weight: 600; color: #1a202c; }
.resumen-tabla td.kpi a { color: inherit; text-decoration: none; display: block; }
.resumen-tabla td.kpi a:hover { color: #2c5282; }
.resumen-tabla td.kpi a::after { content: " →"; color: #a0aec0;
                                 opacity: 0; transition: opacity 120ms; }
.resumen-tabla tbody tr:hover .kpi a::after { opacity: 1; }

/* responsive */
@media (max-width: 640px) {
  .scorecard .val { font-size: 1.85rem; }
  .resumen-tabla th, .resumen-tabla td { padding: 8px 10px; font-size: 0.8rem; }
}

/* anclas con offset para que no queden tapadas por el header */
.anchor-target { scroll-margin-top: 80px; }

/* toggle de cohorte */
.toggle-grp {
  display: inline-flex; align-items: center;
  background: #edf2f7; padding: 4px; border-radius: 9999px;
  gap: 2px;
}
.toggle-grp button {
  padding: 6px 14px; font-size: 0.8rem; font-weight: 600;
  color: #4a5568; border-radius: 9999px;
  transition: background-color 120ms, color 120ms;
}
.toggle-grp button:hover { color: #1a202c; }
.toggle-grp button.activo {
  background: #ffffff; color: #1a202c;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* ------------------------------------------------------------ tile (4 KPIs arriba) */
.tile {
  display: flex; flex-direction: column; gap: 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #cbd5e0;
  border-radius: 12px;
  padding: 14px 16px;
  text-decoration: none; color: inherit;
  transition: border-color 120ms, box-shadow 120ms, transform 120ms;
}
.tile:hover { border-color: #cbd5e0; box-shadow: 0 4px 12px rgba(0,0,0,0.05);
              transform: translateY(-1px); }
.tile-ok   { border-left-color: #2f855a; }
.tile-warn { border-left-color: #c53030; }
.tile-head { display: flex; align-items: center; justify-content: space-between; }
.tile-num  { display: inline-flex; align-items: center; justify-content: center;
             width: 22px; height: 22px; border-radius: 6px;
             background: #edf2f7; color: #4a5568;
             font-weight: 700; font-size: 0.75rem; }
.tile-title { font-size: 0.85rem; font-weight: 600; color: #1a202c;
              line-height: 1.25; min-height: 2.6em; }
.tile-vals  { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tile-lbl   { font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase;
              font-weight: 600; }
.tile-lbl.app { color: #2c5282; }
.tile-lbl.gnp { color: #c05621; }
.tile-val   { font-size: 1.35rem; font-weight: 700; line-height: 1.1;
              font-variant-numeric: tabular-nums; }
.tile-val.app { color: #2c5282; }
.tile-val.gnp { color: #c05621; }
.tile-meta  { font-size: 0.7rem; color: #718096; padding-top: 6px;
              border-top: 1px solid #edf2f7; }

/* ------------------------------------------------------------ callouts (debajo del embudo) */
.callout {
  background: #ffffff; border: 1px solid #e2e8f0;
  border-radius: 10px; padding: 12px 14px;
}
.callout.callout-warn { background: #fffbeb; border-color: #fde68a; }
.callout-lbl {
  font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 700; color: #2c5282; margin-bottom: 4px;
}
.callout-warn .callout-lbl { color: #b7791f; }
.callout-txt { font-size: 0.825rem; color: #2d3748; line-height: 1.45; }
.callout-txt b { color: #1a202c; font-weight: 600; }

/* botones / links de descarga */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 8px;
  font-size: 0.8rem; font-weight: 600; line-height: 1;
  background: #ffffff; color: #2c5282;
  border: 1px solid #cbd5e0;
  transition: background-color 120ms, border-color 120ms;
  white-space: nowrap;
}
.btn:hover { background: #f7fafc; border-color: #a0aec0; }
.btn-primary { background: #2c5282; color: #ffffff; border-color: #2c5282; }
.btn-primary:hover { background: #1a365d; border-color: #1a365d; }
.btn-link {
  font-size: 0.75rem; color: #4a5568; font-weight: 500;
}
.btn-link:hover { color: #2c5282; text-decoration: underline; }