
/* ALBA 2026 - panel independiente de progreso, optimizado para iPad vertical. */
.dashboard-body {
  margin: 0;
  min-height: 100vh;
  background: #f4f7fa;
  color: #142b42;
  font-family: system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-text-size-adjust: 100%;
}
.dashboard-body * {box-sizing:border-box}
.report-nav {
  max-width: 1320px;
  margin:auto;
  padding: 16px 30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  border-bottom:1px solid #e3ebf1;
  background: #f4f7fa;
}
.report-brand {display:flex;align-items:center;gap:11px;min-width:0}
.report-brand img {width:48px;height:48px;object-fit:contain}
.report-brand span {display:flex;flex-direction:column;gap:2px}
.report-brand strong {font-size:12px;letter-spacing:1px;color:#133248;line-height:1.3}
.report-brand small {font-size:12px;color:#718391;line-height:1.3}
.report-back {font-size:13px;font-weight:750;text-decoration:none;padding:11px 16px;color:#115c6a;
  background:#fff;border:1px solid #cedee6;border-radius:11px;min-height:44px;
  display:flex;align-items:center;justify-content:center;white-space:nowrap}
.report-back:hover {background:#e9f3f6}
.report-main {max-width:1320px;margin:auto;padding:23px 30px 64px}
.report-intro {
  color:#fff;
  padding:31px 33px;
  background:linear-gradient(108deg,#071f38 2%,#0d3b55 57%,#126b77 115%);
  border-radius:22px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,350px);
  gap:20px;
  align-items:center;
  box-shadow:0 10px 28px #09283b0e;
}
.report-kicker {font-size:11px;letter-spacing:1.7px;font-weight:800;color:#9ae0d8;display:flex;align-items:center;gap:9px}
.report-dot {width:7px;height:7px;border-radius:50%;background:#4de0bb}
.report-intro h1 {font-size:clamp(27px,3.6vw,41px);line-height:1.1;letter-spacing:-.9px;
  margin:12px 0 10px;color:#fff;font-weight:850}
.report-intro h1 span {color:#73d8d0}
.report-intro p {font-size:13.5px;color:#d9e9ef;line-height:1.6;margin:0;max-width:580px}
.report-backup {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:center}
.report-btn {border-radius:11px;min-height:50px;font-size:13px;font-weight:800;
  padding:12px 13px;cursor:pointer;white-space:nowrap}
.report-btn.outline {border:1px solid #9ebdc6;background:transparent;color:#fff}
.report-btn.solid {border:1px solid #9be7dc;background:#91eadc;color:#073c48}
.report-btn:hover {filter:brightness(1.08)}
.backup-status {grid-column:1/-1;margin:2px 0 0!important;min-height:0;
  font-size:11px!important;color:#b9eedd!important}
.backup-status:empty {display:none}
.backup-error {color:#ffccca!important}
.report-kpis {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin:18px 0}
.kpi {background:#fff;border:1px solid #e0e9ef;border-radius:16px;
  min-width:0;padding:19px 20px 17px;display:grid;gap:5px;
  box-shadow:0 3px 14px #0d263707}
.kpi-icon {display:inline-flex;width:37px;height:37px;align-items:center;justify-content:center;
  border-radius:12px;font-size:22px;font-weight:850;margin-bottom:4px}
.kpi-icon.blue {color:#2977b9;background:#e8f3fd}
.kpi-icon.green {color:#168772;background:#e5f8ee}
.kpi-icon.red {color:#d14d61;background:#fff0f1}
.kpi-icon.amber {color:#b97927;background:#fff5e6}
.kpi small {font-size:12px;color:#63798a;font-weight:700}
.kpi strong {font-size:clamp(25px,3vw,34px);font-weight:850;color:#142b42;line-height:1.2}
.kpi-sub {font-size:11px;color:#97a7b0;line-height:1.4}
.report-charts {display:grid;grid-template-columns:minmax(280px,.86fr) minmax(0,1.36fr);gap:15px}
.report-middle {display:grid;grid-template-columns:minmax(0,1.35fr) minmax(245px,.88fr);gap:15px;margin-top:15px}
.report-card {background:#fff;border:1px solid #e0e9ef;border-radius:17px;
  padding:22px 24px;min-width:0;box-shadow:0 3px 13px #12385006}
.report-card-header {display:flex;justify-content:space-between;align-items:flex-start;gap:13px}
.card-overline {display:block;font-size:10.5px;font-weight:850;letter-spacing:1.2px;color:#0e938b;margin-bottom:6px}
.report-card h2 {font-size:19px;line-height:1.3;font-weight:800;letter-spacing:-.2px;margin:0;color:#172f42}
.card-tag {border-radius:20px;border:1px solid #bdece3;background:#edfbf6;color:#188571;
  padding:6px 12px;font-size:12px;font-weight:800}
.donut-wrap {display:flex;align-items:center;justify-content:center;gap:18px;margin-top:10px}
.report-donut {width:min(52%,190px);height:auto;flex-shrink:0}
.donut-info {font-size:12px;color:#6f8291;display:grid;gap:10px}
.donut-info p {font-size:12px;color:#5b7686;margin:0 0 6px;line-height:1.4}
.donut-info>div {display:flex;gap:8px;align-items:center}
.legend-dot {width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0}
.legend-dot.green {background:#159a7f}
.legend-dot.red {background:#e76e75}
.legend-dot.amber {background:#f2ba65}
.chart-subtitle {font-size:12px;color:#81939f;line-height:1.5;margin:10px 0 7px}
.trend-svg {display:block;width:100%;height:auto;max-height:210px;margin:12px 0 0}
.chart-bottom {display:flex;justify-content:space-between;color:#9aa8b0;font-size:11px;padding:0 5px 0 30px}
.priority-items {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.priority-pill {text-decoration:none;border:1px solid #ead1be;background:#fff9f2;color:#9a5f20;
  padding:13px 14px;border-radius:11px;display:flex;flex-direction:column;gap:6px;min-height:65px;
  justify-content:center;font-size:12px}
.priority-pill strong {font-size:12px;color:#9b5720}
.priority-pill:hover {border-color:#d4a170}
.empty-priority {font-size:13px;color:#778d9a;line-height:1.5}
.priority-icon {color:#f39a64;font-size:24px}
.coverage-number {display:flex;align-items:baseline;gap:10px;margin:21px 0 4px}
.coverage-number strong {font-size:clamp(30px,4vw,48px);color:#17364c;letter-spacing:-1px}
.coverage-number span {font-size:12px;color:#738696}
.coverage-art {display:flex;gap:7px;align-items:end;height:31px;overflow:hidden}
.coverage-art span {width:18%;height:9px;border-radius:5px;background:#c5e8e3}
.coverage-art span:nth-child(2) {height:18px;background:#8edbd2}
.coverage-art span:nth-child(3) {height:24px;background:#41b8b0}
.coverage-art span:nth-child(4) {height:16px;background:#b2e6e0}
.coverage-art span:nth-child(5) {height:28px;background:#138a88}
.topic-panel {margin-top:16px}
.topic-panel-head {display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.topic-panel-head p {font-size:12px;color:#80929e;line-height:1.5;margin:7px 0 0}
.report-filters {display:flex;gap:10px;flex-shrink:0;align-items:end}
.report-filters label {display:grid;gap:5px;font-size:11px;font-weight:750;color:#6b7f8d}
.report-filters select {min-height:42px;padding:8px 30px 8px 10px;min-width:145px;max-width:190px;
  font-size:12px;border:1px solid #d5e2e8;border-radius:9px;background:#fff;color:#19364b}
.topics-summary {display:flex;justify-content:space-between;gap:15px;
  padding:14px 0 12px;border-bottom:1px solid #e7edf1;color:#8294a0;font-size:11px}
.topics-summary span:first-child {font-weight:750;color:#497182}
.topics-report-list {display:grid;gap:12px;margin-top:12px}
.topic-report {border:1px solid #e4ebf0;border-radius:12px;padding:16px 17px}
.topic-report-head {display:flex;justify-content:space-between;align-items:start;gap:15px}
.topic-report-name {min-width:0;flex:1}
.topic-id {font-size:10px;letter-spacing:1px;color:#198d86;font-weight:900}
.topic-report h3 {margin:3px 0 13px;font-size:14px;line-height:1.4;font-weight:750;overflow-wrap:anywhere}
.topic-status {flex-shrink:0;border-radius:20px;padding:6px 10px;font-size:10px;font-weight:850}
.topic-status.urgent {background:#fff1ee;color:#b94c3f}
.topic-status.review {background:#fff7e6;color:#aa7726}
.topic-status.good {background:#e8f8f1;color:#16815d}
.topic-status.learning {background:#eaf4fb;color:#3e789a}
.topic-status.none {background:#f0f3f5;color:#788993}
.topic-report-metrics {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-bottom:14px}
.topic-data {display:grid;gap:4px;min-width:0;padding:9px 11px;background:#f6f9fa;border-radius:8px}
.topic-data small {font-size:10px;color:#8296a2}
.topic-data strong {font-size:17px;color:#273d4e;overflow-wrap:anywhere}
.topic-meter {height:7px;border-radius:10px;overflow:hidden;background:#e5edf1}
.topic-meter-fill {height:100%;background:linear-gradient(90deg,#208b92,#35c2af)}
.topic-report-foot {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:11px}
.topic-accuracy {font-size:11px;color:#7c919c;line-height:1.45}
.topic-links {display:flex;gap:8px;flex-wrap:wrap}
.topic-link {text-decoration:none;padding:9px 12px;min-height:40px;display:inline-flex;
  align-items:center;justify-content:center;border:1px solid #d3e3e6;background:#f6fbfb;
  border-radius:8px;font-size:12px;font-weight:750;color:#1d7c80}
.topic-link.primary-link {background:#168f8b;color:white;border-color:#168f8b}
.topic-link:hover {filter:brightness(.96)}
.report-disclaimer {font-size:11px;color:#798c9a;line-height:1.6;margin:22px 4px}
.load-error {border-radius:12px;background:#fff3ef;color:#b7403c;padding:16px;font-size:13px}
.report-back:focus-visible,.report-btn:focus-visible,.topic-link:focus-visible,
.report-filters select:focus-visible,.priority-pill:focus-visible {outline:3px solid #65c6c0;outline-offset:3px}
@media (max-width: 1020px) {
  .report-intro {grid-template-columns:1fr}
  .report-backup {max-width:490px}
  .report-charts {grid-template-columns:1fr 1fr}
  .report-middle {grid-template-columns:1fr 1fr}
  .priority-items {grid-template-columns:1fr}
}
@media (max-width: 870px) and (orientation:portrait) {
  .report-nav {padding:12px 19px}
  .report-main {padding:18px 18px 50px}
  .report-intro {padding:25px 23px}
  .report-kpis {grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .report-charts {grid-template-columns:1fr 1fr}
  .report-middle {grid-template-columns:1fr 1fr}
  .report-card {padding:19px}
  .report-card h2 {font-size:17px}
  .donut-wrap {gap:7px}
  .donut-info {font-size:11px;gap:7px}
  .report-donut {width:51%}
  .topic-report-metrics {gap:8px}
}
@media (max-width:640px) {
  .report-nav {padding:12px 14px}
  .report-brand strong {font-size:10px}
  .report-brand small {font-size:10px}
  .report-brand img {width:38px;height:38px}
  .report-back {font-size:11px;padding:9px;min-height:41px}
  .report-main {padding:12px 12px 40px}
  .report-intro {padding:22px 18px;border-radius:17px}
  .report-intro h1 {font-size:29px}
  .report-backup {grid-template-columns:1fr 1fr}
  .report-btn {font-size:11px;padding:9px 8px}
  .report-kpis {gap:8px;margin:11px 0}
  .kpi {padding:13px 12px}
  .kpi-icon {width:32px;height:32px;font-size:19px}
  .kpi strong {font-size:25px}
  .report-charts,.report-middle {grid-template-columns:1fr;gap:11px;margin-top:11px}
  .report-card {padding:18px 14px}
  .donut-wrap {justify-content:flex-start;gap:18px}
  .report-donut {max-width:175px}
  .priority-items {grid-template-columns:1fr}
  .topic-panel-head {flex-direction:column;align-items:stretch}
  .report-filters {display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .report-filters select {width:100%;min-width:0;max-width:none}
  .topics-summary {flex-direction:column;gap:3px}
  .topic-report {padding:14px 12px}
  .topic-report-head {flex-direction:column;gap:5px}
  .topic-report h3 {margin-bottom:5px}
  .topic-report-metrics {grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .topic-report-foot {flex-direction:column;align-items:start}
  .topic-links {width:100%}
}


/* ALBA v70: navegación a la configuración de tests, sin flecha. */
.report-nav .report-back{
  color:#fff;
  background:linear-gradient(120deg,#12375f,#195289);
  border-color:#2967a6;
  font-weight:900;
  letter-spacing:.2px;
}
.report-nav .report-back:hover {background:linear-gradient(120deg,#164979,#226aab);}


/* ALBA v72: texto negro legible en todos los paneles claros de Mi progreso.
   Conservamos las letras blancas y turquesas del encabezado azul y los
   colores semánticos de los indicadores. */
.dashboard-body .report-brand small,
.dashboard-body .report-kpis .kpi small,
.dashboard-body .report-kpis .kpi .kpi-sub,
.dashboard-body .report-kpis .kpi strong,
.dashboard-body .report-card h2,
.dashboard-body .report-card .chart-subtitle,
.dashboard-body .report-card .donut-info,
.dashboard-body .report-card .donut-info p,
.dashboard-body .report-card .chart-bottom,
.dashboard-body .report-card .empty-priority,
.dashboard-body .report-card .coverage-number strong,
.dashboard-body .report-card .coverage-number span,
.dashboard-body .report-card .topic-panel-head p,
.dashboard-body .report-card .report-filters label,
.dashboard-body .report-card .topics-summary,
.dashboard-body .report-card .topics-summary span,
.dashboard-body .report-card .topic-report h3,
.dashboard-body .report-card .topic-report .topic-data small,
.dashboard-body .report-card .topic-report .topic-data strong,
.dashboard-body .report-card .topic-report .topic-accuracy,
.dashboard-body .report-card .topic-report .topic-status.none,
.dashboard-body .report-card .no-items,
.dashboard-body .report-disclaimer {
  color: #0a0a0a !important;
}
/* Ejes, marcas y texto integrado en gráficas vectoriales. */
.dashboard-body #trendChart text,
.dashboard-body .report-donut text {
  fill: #0a0a0a !important;
}
/* Fondo gris del estado "Por comenzar" permanece claro y no reduce contraste. */
.dashboard-body .topic-status.none {
  background: #edf1f4;
  font-weight: 850;
}
/* Los contadores y datos leídos rápidamente resaltan sin gris. */
.dashboard-body .kpi small,
.dashboard-body .donut-info,
.dashboard-body .chart-subtitle,
.dashboard-body .chart-bottom,
.dashboard-body .topic-data small,
.dashboard-body .topic-accuracy,
.dashboard-body .topic-panel-head p {
  font-weight: 700;
}
