/* ==========================================================
   SIMULADOR DE ARQUITECTURAS - BOGOTÁ SEGURA
   Hoja de estilos completa
   ========================================================== */

* { box-sizing: border-box; }
html {
  max-width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  color: #263238;
  background-color: #eef2f6;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
}

header {
  padding: 2.5rem 1.5rem;
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, #172a3a, #24527a);
}

.brand-line,
.hero-actions,
.summary-heading,
.executive-verdict {
  display: flex;
  align-items: center;
}

.brand-line {
  justify-content: center;
  gap: 0.65rem;
  margin-bottom: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #16354e;
  background: #f4c95d;
  border-radius: 10px 10px 10px 3px;
}

.version-badge,
.test-badge {
  padding: 0.3rem 0.65rem;
  font-size: 0.78rem;
  border-radius: 999px;
}

.version-badge { background: rgba(255, 255, 255, 0.15); }

.hero-actions {
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 1.1rem;
}

.hero-actions button { background: #f4c95d; color: #183b56; }
.hero-actions button:hover { background: #ffe08a; }
.hero-actions .button-secondary { color: #fff; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.4); }
.hero-actions .button-secondary:hover { background: rgba(255, 255, 255, 0.22); }

.section-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 0.3rem;
  justify-content: center;
  padding: 0.65rem 1rem;
  overflow-x: auto;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid #d9e2ec;
  box-shadow: 0 3px 12px rgba(25, 45, 65, 0.08);
  backdrop-filter: blur(10px);
}

.section-nav a {
  flex: 0 0 auto;
  padding: 0.45rem 0.7rem;
  color: #465965;
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
}

.section-nav a:hover,
.section-nav a.active { color: #fff; background: #1769aa; }

section { scroll-margin-top: 72px; }

.executive-summary {
  color: #fff;
  background: linear-gradient(135deg, #0d4f3c, #176e55 55%, #24527a);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.summary-heading { justify-content: space-between; gap: 1rem; }
.executive-summary h2 { margin: 0.2rem 0 1rem; color: #fff; }
.eyebrow { color: #3d8e75; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.executive-summary .eyebrow { color: #bcebdc; }
.test-badge { flex: 0 0 auto; color: #114533; background: #c8f2df; }

.summary-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
}

.summary-metrics article {
  padding: 0.9rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
}

.summary-metrics strong { display: block; font-size: 1.65rem; line-height: 1.1; }
.summary-metrics span { color: #dceee8; font-size: 0.82rem; }

.executive-verdict {
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  color: #183b56;
  background: #fff;
  border-radius: 9px;
}

.executive-verdict span { color: #60727e; font-size: 0.82rem; font-weight: 700; text-transform: uppercase; }
.executive-verdict strong { text-align: right; }
.guided-status { margin-top: 0.8rem; padding: 0.7rem 0.9rem; color: #fff5cf; background: rgba(0, 0, 0, 0.15); border-radius: 8px; }

.delta-card {
  margin-top: 1rem;
  padding: 1rem;
  background: #fff9e8;
  border: 1px solid #efd58b;
  border-left: 5px solid #d89a00;
  border-radius: 8px;
}
.delta-card h3 { margin: 0 0 0.35rem; color: #715200; }
.delta-card p { margin-bottom: 0; }

.sources-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.source-card {
  min-width: 0;
  padding: 1.1rem;
  background: #f8fafc;
  border: 1px solid #d9e2ec;
  border-top: 4px solid #3d8e75;
  border-radius: 10px;
}
.source-card span { color: #60727e; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.source-card h3 { margin: 0.45rem 0 0.7rem; color: #183b56; font-size: 1rem; }
.source-card a { color: #0d5f95; font-weight: 700; }
.evidence-note { margin-top: 1rem; }

.updated-flash { animation: updated-flash 0.8s ease; }
@keyframes updated-flash {
  0% { box-shadow: 0 0 0 0 rgba(23, 105, 170, 0.4); }
  50% { box-shadow: 0 0 0 7px rgba(23, 105, 170, 0.14); }
  100% { box-shadow: 0 4px 16px rgba(25, 45, 65, 0.09); }
}

.guided-focus { outline: 4px solid #f4c95d; outline-offset: 4px; }

header h1 {
  max-width: 1100px;
  margin: 0 auto 0.7rem;
  font-size: 2rem;
  line-height: 1.25;
}

header .subtitle {
  max-width: 900px;
  margin: 0 auto 1.2rem;
  font-size: 1.05rem;
}

.disclaimer-badge {
  max-width: 900px;
  margin: 0 auto;
  padding: 0.8rem 1rem;
  font-size: 0.95rem;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
}

main {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 2rem 0;
}

section {
  min-width: 0;
  max-width: 100%;
  margin-bottom: 1.8rem;
  padding: 1.6rem;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(25, 45, 65, 0.09);
}

h1,
h2,
h3,
h4,
p,
li,
label,
small,
code {
  overflow-wrap: anywhere;
}

code { white-space: normal; }

section h2 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: #183b56;
  font-size: 1.55rem;
  line-height: 1.3;
}

section h3,
section h4 { color: #24527a; }
section p { margin-top: 0; }
.section-help,
.charts-help { color: #52616b; }

.control-group {
  max-width: 650px;
  margin-bottom: 1.3rem;
}

.control-group label,
.input-item label {
  display: block;
  margin-bottom: 0.4rem;
  color: #183b56;
  font-weight: 700;
}

.grid-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.input-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1rem;
  background-color: #f8fafc;
  border: 1px solid #d9e2ec;
  border-radius: 9px;
}

.input-item small {
  display: block;
  margin-top: 0.45rem;
  color: #5f6c78;
  line-height: 1.35;
}

input,
select,
textarea,
button { font: inherit; }

input,
select,
textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  color: #263238;
  background-color: #fff;
  border: 1px solid #9eabb7;
  border-radius: 6px;
}

input,
select { min-height: 42px; }

textarea {
  min-height: 118px;
  line-height: 1.45;
  resize: vertical;
}

input:hover,
select:hover,
textarea:hover { border-color: #607d8b; }

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: 3px solid rgba(38, 132, 255, 0.25);
  outline-offset: 2px;
  border-color: #1769aa;
}

.actions { margin-top: 1.3rem; }

button {
  min-height: 44px;
  padding: 0.7rem 1.3rem;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  background-color: #1769aa;
  border: none;
  border-radius: 7px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

button:hover {
  background-color: #0d4f85;
  transform: translateY(-1px);
}

button:active { transform: translateY(0); }

.validation-box {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  color: #842029;
  font-weight: 700;
  background-color: #f8d7da;
  border: 1px solid #f1aeb5;
  border-radius: 7px;
}

.project-summary {
  margin-top: 1.2rem;
  border-left-color: #2e7d32;
  background-color: #f2f8f2;
}

.project-summary h3 { margin-top: 0; }
.project-summary ul { margin-bottom: 0; padding-left: 1.4rem; }
.project-summary li { margin-bottom: 0.4rem; overflow-wrap: anywhere; }

.table-container {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  background-color: #fff;
  border: 1px solid #d9e2ec;
  border-radius: 9px;
}

#formulasSection .table-container { margin-bottom: 1.5rem; }

table {
  width: 100%;
  min-width: 760px;
  background-color: #fff;
  border-collapse: collapse;
}

th,
td {
  padding: 0.8rem 0.75rem;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #dde5ec;
}

th {
  color: #fff;
  background-color: #24527a;
}

th:first-child,
td:first-child { text-align: left; }
tbody tr:nth-child(even) { background-color: #f7f9fb; }
tbody tr:hover { background-color: #eef5fb; }
tbody tr:last-child td { border-bottom: none; }

td[id^="cump-"] {
  font-weight: 700;
  text-align: center;
}

.cumple-si {
  color: #155724;
  background-color: #d4edda !important;
}

.cumple-no {
  color: #842029;
  background-color: #f8d7da !important;
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: 1.3rem;
}

.chart-card {
  min-width: 0;
  padding: 1.2rem;
  background-color: #f8fafc;
  border: 1px solid #d9e2ec;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(25, 45, 65, 0.05);
}

.chart-card h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: #183b56;
  font-size: 1.05rem;
  line-height: 1.35;
}

.bar-chart {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bar-chart > p {
  margin: 0;
  color: #5f6c78;
  font-size: 0.95rem;
}

.bar-row { width: 100%; }

.bar-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.35rem;
}

.bar-name {
  min-width: 0;
  color: #263238;
  font-size: 0.9rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.bar-value {
  flex-shrink: 0;
  color: #183b56;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}

.bar-track {
  width: 100%;
  height: 21px;
  overflow: hidden;
  background-color: #e1e8ee;
  border: 1px solid #d1dbe3;
  border-radius: 999px;
}

.bar-fill {
  height: 100%;
  min-width: 0;
  border-radius: 999px;
  transition: width 0.45s ease;
}

#chartsSection::after {
  display: block;
  margin-top: 1.4rem;
  padding: 0.75rem 1rem;
  color: #52616b;
  font-size: 0.88rem;
  content: "Leyenda: gris = Monolito | azul = Modular + BaaS | morado = Microservicios + eventos";
  background-color: #f1f5f8;
  border-left: 4px solid #1769aa;
  border-radius: 5px;
}

.recommendation-card {
  padding: 1.2rem;
  background-color: #f1f7fc;
  border-left: 5px solid #1769aa;
  border-radius: 8px;
  overflow-wrap: anywhere;
}

.recommendation-card h3:first-child { margin-top: 0; }
.recommendation-card h4 { margin-bottom: 0.4rem; }
.recommendation-card p:last-child { margin-bottom: 0; }
.recommendation-card ul { padding-left: 1.4rem; }
.recommendation-card li { margin-bottom: 0.35rem; }

.methodology-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.method-col {
  min-width: 0;
  padding: 1rem;
  background-color: #f8fafc;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
}

.method-col h3 { margin-top: 0; }
.method-col ul,
.method-col ol { margin-bottom: 0; padding-left: 1.4rem; }
.method-col li { margin-bottom: 0.55rem; }

code {
  color: #16354e;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.92em;
  overflow-wrap: anywhere;
}

footer {
  width: 100%;
  padding: 1.1rem;
  color: #fff;
  text-align: center;
  background-color: #172a3a;
}

footer p { margin: 0; font-size: 0.95rem; }

@media (max-width: 850px) {
  header { padding: 2rem 1rem; }
  header h1 { font-size: 1.65rem; }
  main { width: min(100% - 1rem, 1180px); padding: 1rem 0; }
  section { padding: 1.1rem; }
  .grid-inputs,
  .charts-grid,
  .methodology-grid,
  .sources-grid { grid-template-columns: 1fr; }
  .summary-metrics { grid-template-columns: repeat(2, 1fr); }
  .section-nav { justify-content: flex-start; }
}

@media (max-width: 500px) {
  header { padding: 1.5rem 0.8rem; }
  header h1 { font-size: 1.4rem; }
  header .subtitle { font-size: 0.95rem; }
  .disclaimer-badge { padding: 0.7rem; font-size: 0.85rem; }
  main { width: calc(100% - 0.75rem); }
  section { padding: 1rem; border-radius: 8px; }
  section h2 { font-size: 1.3rem; }
  button { width: 100%; }
  .hero-actions { align-items: stretch; }
  .summary-heading,
  .executive-verdict { align-items: flex-start; flex-direction: column; }
  .executive-verdict strong { text-align: left; }
  .test-badge { align-self: flex-start; }
  th,
  td { padding: 0.65rem 0.55rem; font-size: 0.9rem; }
  .chart-card { padding: 1rem; }
  .bar-header { gap: 0.5rem; }
  .bar-name,
  .bar-value { font-size: 0.82rem; }
  .bar-track { height: 18px; }
  #chartsSection::after { font-size: 0.8rem; }
  footer { padding: 1rem 0.7rem; }
  footer p { font-size: 0.82rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  body { color: #111; background: #fff; font-size: 10pt; }
  header { padding: 1rem; color: #111; background: #fff; border-bottom: 2px solid #183b56; }
  header h1 { color: #183b56; }
  .brand-line, .hero-actions, .section-nav, .actions, .temporal-actions, .guided-status { display: none !important; }
  main { width: 100%; padding: 0; }
  section { break-inside: avoid; margin: 0 0 0.6rem; padding: 0.7rem; box-shadow: none; border: 1px solid #bbb; }
  .executive-summary { color: #111; background: #fff; }
  .executive-summary h2, .executive-summary .eyebrow { color: #183b56; }
  .summary-metrics article, .executive-verdict { color: #111; background: #fff; border: 1px solid #aaa; }
  .summary-metrics span { color: #333; }
  a { color: #111; text-decoration: none; }
  canvas { max-height: 160px; }
  footer { color: #111; background: #fff; border-top: 1px solid #333; }
}

/* ==========================================================
   17. CABECERA Y NAVEGACION v3.2
   Diseño de presentación y ruptura explícita de la versión anterior.
   ========================================================== */

.site-hero {
  position: relative;
  padding: 0;
  overflow: hidden;
  text-align: left;
  background:
    radial-gradient(circle at 8% 18%, rgba(83, 211, 125, 0.14), transparent 24rem),
    radial-gradient(circle at 92% 90%, rgba(192, 132, 252, 0.18), transparent 26rem),
    linear-gradient(135deg, #071522 0%, #0e2d43 54%, #24133e 100%);
  border-bottom: 1px solid #35536a;
}

.site-hero::after {
  position: absolute;
  right: -90px;
  bottom: -150px;
  width: 330px;
  height: 330px;
  pointer-events: none;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 40px rgba(255, 255, 255, 0.025), 0 0 0 85px rgba(255, 255, 255, 0.018);
}

.hero-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 390px);
  gap: 2rem;
  align-items: center;
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 2.7rem 0 3rem;
}

.hero-copy { min-width: 0; }

.site-hero .brand-line {
  justify-content: flex-start;
  margin: 0 0 1.3rem;
  color: #f7fbff;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.site-hero .brand-mark {
  width: 38px;
  height: 38px;
  overflow: hidden;
  color: transparent;
  background: #082837;
  box-shadow: 0 7px 18px rgba(5, 21, 31, 0.32);
}

.site-hero .brand-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }

.brand-divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.3);
}

.brand-context { color: #b9ccda; font-weight: 600; }
.site-hero .version-badge { color: #dff7ec; background: rgba(83, 211, 125, 0.14); border: 1px solid rgba(83, 211, 125, 0.34); }

.hero-kicker {
  margin: 0 0 0.65rem;
  color: #7fdbba;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-hero h1 {
  max-width: 720px;
  margin: 0 0 1rem;
  color: #fff;
  font-size: clamp(2.1rem, 4.2vw, 3.65rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-align: left;
}

.site-hero .subtitle {
  max-width: 670px;
  margin: 0;
  color: #d5e4ee;
  font-size: 1.08rem;
  line-height: 1.65;
  text-align: left;
}

.site-hero .subtitle strong { color: #fff; }

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.4rem;
}

.hero-chips span {
  padding: 0.4rem 0.72rem;
  color: #d9eaf4;
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.065);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}

.hero-control-card {
  min-width: 0;
  padding: 1.35rem;
  background: linear-gradient(145deg, rgba(20, 42, 59, 0.94), rgba(27, 33, 58, 0.94));
  border: 1px solid rgba(170, 204, 225, 0.24);
  border-radius: 18px;
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px);
}

.control-card-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.control-card-heading small,
.control-card-heading strong { display: block; }
.control-card-heading small { margin-bottom: 0.1rem; color: #83d7ba; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; }
.control-card-heading strong { color: #fff; font-size: 1rem; }

.control-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  color: #17384b;
  background: #f4c95d;
  border-radius: 12px;
}

.hero-control-card > p { margin: 1rem 0; color: #c8d9e5; font-size: 0.9rem; line-height: 1.5; }
.hero-control-card button { width: 100%; min-height: 46px; border-radius: 10px; box-shadow: none; }

.hero-control-card .hero-primary-action {
  color: #102d40;
  background: linear-gradient(135deg, #ffe28a, #f4c95d);
}

.hero-control-card .hero-primary-action:hover { background: linear-gradient(135deg, #ffebaa, #ffd465); }

.hero-secondary-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin-top: 0.65rem;
}

.hero-control-card .button-secondary {
  color: #dceaf3;
  background: #1b3346;
  border: 1px solid #38556b;
}

.hero-control-card .button-secondary:hover { background: #25455d; }

.hero-control-card .disclaimer-badge {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  margin: 0.8rem 0 0;
  padding: 0.65rem 0.75rem;
  color: #aebfcb;
  text-align: left;
  background: rgba(5, 15, 25, 0.38);
  border: 0;
  border-radius: 9px;
}

.hero-control-card .disclaimer-badge p { margin: 0; color: #aebfcb; font-size: 0.75rem; line-height: 1.45; }
.hero-control-card .disclaimer-badge strong { color: #dce8f0; }

.section-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: block;
  padding: 0.65rem 1rem;
  overflow-x: auto;
  background: rgba(8, 20, 31, 0.94);
  border-bottom: 1px solid #2c4559;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(14px);
}

.section-nav-inner {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  width: max-content;
  min-width: 100%;
  margin: 0 auto;
}

.section-nav a {
  display: inline-flex;
  gap: 0.38rem;
  align-items: center;
  padding: 0.52rem 0.72rem;
  color: #b9cbd8;
  font-size: 0.79rem;
  font-weight: 750;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 9px;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.section-nav a span { color: #6f899b; font-size: 0.66rem; font-weight: 800; }
.section-nav a:hover { color: #fff; background: #152d3f; border-color: #304d62; }
.section-nav a.active { color: #102f41; background: #77d6b2; border-color: #93e6c8; }
.section-nav a.active span { color: #1c654e; }

.executive-summary {
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
}

@media (max-width: 760px) {
  .hero-shell { grid-template-columns: 1fr; gap: 1.7rem; padding: 2.4rem 0 2.7rem; }
  .site-hero h1 { max-width: 760px; font-size: clamp(2rem, 7vw, 3rem); }
  .hero-control-card { max-width: 680px; }
  .section-nav-inner { justify-content: flex-start; }
}

@media (max-width: 540px) {
  .hero-shell { width: calc(100% - 1.25rem); padding: 1.35rem 0 1.7rem; }
  .site-hero .brand-line { flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
  .brand-context, .brand-divider { display: none; }
  .site-hero h1 { font-size: 2rem; line-height: 1.08; }
  .site-hero .subtitle { font-size: 0.95rem; line-height: 1.55; }
  .hero-chips { margin-top: 1rem; }
  .hero-control-card { padding: 1rem; border-radius: 14px; }
  .hero-secondary-actions { grid-template-columns: 1fr; }
  .section-nav { padding: 0.55rem 0.5rem; }
  .section-nav-inner { min-width: max-content; }
  .section-nav a { padding: 0.48rem 0.62rem; }
}

/* ==========================================================
   13. SIMULACION TEMPORAL Y ANALISIS DE RESILIENCIA
   ========================================================== */

#temporalSimulationSection {
  position: relative;
  overflow: hidden;
  border-top: 5px solid #7b1fa2;
}

#temporalSimulationSection::before {
  position: absolute;
  top: -120px;
  right: -100px;
  width: 280px;
  height: 280px;
  pointer-events: none;
  content: "";
  background: radial-gradient(circle, rgba(123, 31, 162, 0.12), transparent 68%);
  border-radius: 50%;
}

.temporal-notice {
  margin: 1rem 0 1.5rem;
  padding: 0.9rem 1rem;
  color: #3e2350;
  background: linear-gradient(135deg, #f4eafa, #f8f5fb);
  border: 1px solid #d8bde5;
  border-left: 5px solid #7b1fa2;
  border-radius: 8px;
}

.temporal-config-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.temporal-checkbox-item {
  justify-content: center;
}

.checkbox-control {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 42px;
  padding: 0.55rem 0.7rem;
  background-color: #fff;
  border: 1px solid #9eabb7;
  border-radius: 6px;
}

.checkbox-control input[type="checkbox"] {
  width: 19px;
  min-width: 19px;
  height: 19px;
  min-height: 19px;
  margin: 0;
  accent-color: #7b1fa2;
}

.checkbox-control span {
  font-size: 0.92rem;
  line-height: 1.3;
}

.temporal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.4rem;
}

#startTemporalButton {
  background: linear-gradient(135deg, #6a1b9a, #8e24aa);
}

#startTemporalButton:hover {
  background: linear-gradient(135deg, #4a126b, #6a1b9a);
}

#pauseTemporalButton {
  background-color: #e28a00;
}

#pauseTemporalButton:hover {
  background-color: #b66d00;
}

#resetTemporalButton {
  background-color: #596773;
}

#resetTemporalButton:hover {
  background-color: #3e4a53;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none !important;
}

.temporal-progress-panel {
  margin: 1.4rem 0;
  padding: 1rem;
  background-color: #f8fafc;
  border: 1px solid #d9e2ec;
  border-radius: 10px;
}

.temporal-progress-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.65rem;
  color: #183b56;
}

.temporal-progress-track {
  width: 100%;
  height: 18px;
  overflow: hidden;
  background-color: #e0e6eb;
  border: 1px solid #ccd6de;
  border-radius: 999px;
}

.temporal-progress-fill {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #1769aa, #7b1fa2, #d15600);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(123, 31, 162, 0.38);
  transition: width 0.28s ease;
}

.live-indicators-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
  margin-bottom: 1.5rem;
}

.live-indicator-card {
  min-width: 0;
  padding: 1rem;
  background: linear-gradient(145deg, #183b56, #24527a);
  border: 1px solid #315f82;
  border-radius: 10px;
  box-shadow: 0 5px 13px rgba(24, 59, 86, 0.16);
}

.live-indicator-wide {
  grid-column: span 4;
  background: linear-gradient(145deg, #4a1760, #7b1fa2);
}

.live-indicator-label {
  display: block;
  margin-bottom: 0.3rem;
  color: #dbeaf5;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.live-indicator-card strong {
  display: block;
  color: #fff;
  font-size: 1.45rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.architecture-live-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.6rem;
}

.architecture-live-card {
  --status-color: #78909c;
  min-width: 0;
  padding: 1rem;
  background-color: #fff;
  border: 1px solid #d9e2ec;
  border-top: 5px solid var(--status-color);
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(25, 45, 65, 0.08);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.architecture-live-card:not(.status-idle) {
  transform: translateY(-2px);
  box-shadow: 0 7px 16px rgba(25, 45, 65, 0.12);
}

.architecture-live-heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.architecture-live-heading h4 {
  margin: 0;
  color: #183b56;
}

.status-dot {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  background-color: var(--status-color);
  border-radius: 50%;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--status-color) 16%, transparent);
}

.architecture-live-card dl {
  margin: 0;
}

.architecture-live-card dl > div {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid #edf1f4;
}

.architecture-live-card dl > div:last-child {
  border-bottom: 0;
}

.architecture-live-card dt {
  color: #5f6c78;
  font-size: 0.88rem;
}

.architecture-live-card dd {
  margin: 0;
  color: #183b56;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: right;
}

.status-idle { --status-color: #78909c; }
.status-stable { --status-color: #2e7d32; background-color: #f5fbf5; }
.status-warning { --status-color: #e0a000; background-color: #fffaf0; }
.status-danger { --status-color: #ef6c00; background-color: #fff7ef; }
.status-critical { --status-color: #c62828; background-color: #fff3f3; }
.status-budget { --status-color: #546e7a; background-color: #f4f6f7; }

.status-critical .status-dot,
.status-danger .status-dot {
  animation: temporal-pulse 1.1s ease-in-out infinite;
}

@keyframes temporal-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.7; }
}

.temporal-charts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.temporal-chart-card {
  min-width: 0;
  padding: 1rem;
  background-color: #fbfcfd;
  border: 1px solid #d9e2ec;
  border-radius: 10px;
}

.temporal-chart-card h4 {
  margin: 0 0 0.75rem;
  color: #183b56;
}

.temporal-chart-card canvas {
  display: block;
  width: 100%;
  height: auto;
  min-height: 230px;
  background: linear-gradient(180deg, #fff, #f9fbfc);
  border: 1px solid #e1e8ee;
  border-radius: 7px;
}

.temporal-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}

.temporal-log-card,
.temporal-summary-card {
  min-width: 0;
  padding: 1rem;
  background-color: #f8fafc;
  border: 1px solid #d9e2ec;
  border-radius: 10px;
}

.temporal-log-card h3,
.temporal-summary-card h3 {
  margin-top: 0;
}

.temporal-event-log {
  max-height: 290px;
  margin: 0;
  padding: 0 0 0 1.5rem;
  overflow-y: auto;
}

.temporal-event-log li {
  margin-bottom: 0.55rem;
  padding: 0.35rem 0.5rem;
  background-color: #fff;
  border-left: 3px solid #7b1fa2;
  border-radius: 3px;
}

.temporal-summary-card {
  background: linear-gradient(145deg, #f4f8fb, #f8f3fa);
  border-left: 5px solid #7b1fa2;
}

@media (max-width: 1050px) {
  .temporal-config-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .live-indicators-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .live-indicator-wide {
    grid-column: span 2;
  }
}

@media (max-width: 850px) {
  .architecture-live-grid,
  .temporal-charts-grid,
  .temporal-bottom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .temporal-config-grid,
  .live-indicators-grid {
    grid-template-columns: 1fr;
  }

  .live-indicator-wide {
    grid-column: span 1;
  }

  .temporal-actions {
    flex-direction: column;
  }

  .temporal-actions button {
    width: 100%;
  }

  .temporal-progress-header {
    flex-direction: column;
    gap: 0.25rem;
  }

  .architecture-live-card dl > div {
    align-items: flex-start;
  }

  .temporal-chart-card canvas {
    min-height: 190px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .status-critical .status-dot,
  .status-danger .status-dot {
    animation: none;
  }

  .temporal-progress-fill,
  .architecture-live-card {
    transition: none;
  }
}

/* ==========================================================
   14. RESUMEN FINAL TEMPORAL
   ========================================================== */

.temporal-summary-highlights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0.8rem 0 1rem;
}

.temporal-summary-metric {
  min-width: 0;
  padding: 0.75rem;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid #d9e2ec;
  border-radius: 7px;
}

.temporal-summary-metric span {
  display: block;
  margin-bottom: 0.2rem;
  color: #5f6c78;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.temporal-summary-metric strong {
  display: block;
  color: #183b56;
  font-size: 0.96rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.temporal-summary-table-wrapper {
  width: 100%;
  margin: 1rem 0;
  overflow-x: auto;
  background-color: #fff;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
}

.temporal-summary-table {
  min-width: 980px;
  font-size: 0.84rem;
}

.temporal-summary-table th,
.temporal-summary-table td {
  padding: 0.65rem 0.55rem;
}

.temporal-summary-table th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 155px;
}

.temporal-summary-table tbody th:first-child {
  color: #183b56;
  background-color: #f7f9fb;
}

.temporal-winner-row th,
.temporal-winner-row td {
  color: #155724;
  font-weight: 700;
  background-color: #dff2e2 !important;
}

.temporal-methodology-details {
  margin: 1rem 0;
  padding: 0.75rem 0.9rem;
  background-color: #fff;
  border: 1px solid #d9e2ec;
  border-radius: 7px;
}

.temporal-methodology-details summary {
  color: #24527a;
  font-weight: 700;
  cursor: pointer;
}

.temporal-methodology-details p {
  margin: 0.7rem 0 0;
  color: #52616b;
}

.temporal-final-observations {
  padding-left: 1.4rem;
}

.temporal-final-observations li {
  margin-bottom: 0.35rem;
}

.temporal-summary-disclaimer {
  margin-top: 1rem !important;
  padding: 0.75rem;
  color: #5d4037;
  font-size: 0.88rem;
  background-color: #fff8e1;
  border-left: 4px solid #e0a000;
  border-radius: 5px;
}

@media (max-width: 600px) {
  .temporal-summary-highlights {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   15. CORRECCION DE ORDEN Y DESBORDAMIENTO DEL RESUMEN
   Estas reglas prevalecen sobre las anteriores.
   ========================================================== */

/* La bitacora y el resumen usan todo el ancho disponible. */
.temporal-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  width: 100%;
}

.temporal-log-card,
.temporal-summary-card {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.temporal-log-card {
  max-height: none;
}

.temporal-event-log {
  max-height: 330px;
  padding-right: 0.65rem;
}

/* El resumen deja de verse como una lista pegada. */
.temporal-summary-highlights {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.8rem;
  width: 100%;
  margin: 1rem 0 1.25rem;
}

.temporal-summary-metric {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  min-height: 105px;
  padding: 0.85rem;
  background: #ffffff;
  border: 1px solid #d7e0e7;
  border-top: 4px solid #7b1fa2;
  border-radius: 9px;
  box-shadow: 0 3px 9px rgba(25, 45, 65, 0.07);
}

.temporal-summary-metric span {
  display: block;
  margin: 0 0 0.55rem;
  color: #60717e;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.temporal-summary-metric strong {
  display: block;
  color: #183b56;
  font-size: 0.98rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* La tabla nunca ensancha la tarjeta exterior. */
.temporal-summary-table-wrapper {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 1rem 0 1.2rem;
  overflow-x: auto;
  overflow-y: hidden;
  background: #ffffff;
  border: 1px solid #d6e0e8;
  border-radius: 9px;
  box-shadow: inset 0 -1px 0 rgba(25, 45, 65, 0.05);
  -webkit-overflow-scrolling: touch;
}

.temporal-summary-table {
  width: 100%;
  min-width: 1040px;
  margin: 0;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.temporal-summary-table th,
.temporal-summary-table td {
  padding: 0.72rem 0.6rem;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: break-word;
  vertical-align: middle;
}

.temporal-summary-table thead th {
  color: #ffffff;
  text-align: center;
  background: #245c88;
  border-right: 1px solid rgba(255, 255, 255, 0.24);
}

.temporal-summary-table thead th:first-child {
  width: 180px;
  text-align: left;
}

.temporal-summary-table thead th:nth-child(2) { width: 105px; }
.temporal-summary-table thead th:nth-child(3) { width: 115px; }
.temporal-summary-table thead th:nth-child(4) { width: 145px; }
.temporal-summary-table thead th:nth-child(5) { width: 135px; }
.temporal-summary-table thead th:nth-child(6) { width: 130px; }
.temporal-summary-table thead th:nth-child(7) { width: 145px; }
.temporal-summary-table thead th:nth-child(8) { width: 125px; }

.temporal-summary-table tbody th {
  color: #183b56;
  text-align: left;
  background: #f5f8fa;
}

.temporal-summary-table tbody td {
  color: #263238;
  text-align: center;
  background: #ffffff;
}

.temporal-summary-table tbody tr:nth-child(even) th,
.temporal-summary-table tbody tr:nth-child(even) td {
  background: #f7fafc;
}

.temporal-summary-table th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  box-shadow: 3px 0 5px rgba(25, 45, 65, 0.08);
}

.temporal-summary-table thead th:first-child {
  z-index: 3;
  background: #245c88;
}

.temporal-winner-row th,
.temporal-winner-row td,
.temporal-summary-table tbody tr.temporal-winner-row:nth-child(even) th,
.temporal-summary-table tbody tr.temporal-winner-row:nth-child(even) td {
  color: #155724;
  font-weight: 700;
  background: #dff2e2 !important;
}

/* Mejor jerarquia del texto posterior a la tabla. */
.temporal-summary-card h4 {
  margin: 1.2rem 0 0.65rem;
  color: #183b56;
  font-size: 1.05rem;
}

.temporal-methodology-details {
  margin: 1rem 0 1.25rem;
}

.temporal-final-observations {
  margin: 0.8rem 0 0;
  padding-left: 1.35rem;
}

.temporal-final-observations li {
  margin-bottom: 0.45rem;
  padding-left: 0.2rem;
}

/* Indicio visual de desplazamiento horizontal. */
.temporal-summary-table-wrapper::after {
  display: block;
  padding: 0.45rem 0.7rem;
  color: #60717e;
  font-size: 0.75rem;
  text-align: right;
  content: "Deslice horizontalmente para ver todas las columnas";
  background: #f4f7f9;
  border-top: 1px solid #e0e7ec;
}

@media (max-width: 1150px) {
  .temporal-summary-highlights {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .temporal-summary-highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .temporal-summary-table {
    min-width: 980px;
  }
}

@media (max-width: 520px) {
  .temporal-summary-highlights {
    grid-template-columns: 1fr;
  }

  .temporal-summary-metric {
    min-height: 0;
  }

  .temporal-summary-table-wrapper {
    margin-right: 0;
    margin-left: 0;
  }
}

/* ==========================================================
   16. MODO OSCURO PERMANENTE
   Estas reglas reemplazan visualmente el tema claro.
   ========================================================== */

:root {
  color-scheme: dark;
  --dark-page: #08111c;
  --dark-surface: #101c29;
  --dark-surface-2: #152434;
  --dark-surface-3: #1b2c3d;
  --dark-border: #30465a;
  --dark-border-soft: #24394c;
  --dark-text: #edf4fa;
  --dark-muted: #aabccc;
  --dark-blue: #55a9e6;
  --dark-purple: #c084fc;
  --dark-green: #53d37d;
  --dark-yellow: #f3c64e;
  --dark-orange: #ff9f43;
  --dark-red: #ff6b6b;
}

html,
body {
  color: var(--dark-text);
  background-color: var(--dark-page);
}

body {
  background:
    radial-gradient(circle at 15% 5%, rgba(23, 105, 170, 0.12), transparent 28rem),
    radial-gradient(circle at 90% 30%, rgba(123, 31, 162, 0.1), transparent 30rem),
    var(--dark-page);
}

header {
  color: #ffffff;
  background: linear-gradient(135deg, #08131f, #12334e 52%, #321449);
  border-bottom: 1px solid #365268;
}

.disclaimer-badge {
  color: #e7f2fa;
  background-color: rgba(7, 17, 28, 0.52);
  border-color: rgba(163, 203, 230, 0.36);
}

section {
  color: var(--dark-text);
  background-color: var(--dark-surface);
  border: 1px solid var(--dark-border-soft);
  box-shadow: 0 7px 22px rgba(0, 0, 0, 0.28);
}

section h2,
section h3,
section h4,
.control-group label,
.input-item label,
.architecture-live-heading h4,
.temporal-chart-card h4,
.temporal-summary-card h4 {
  color: #d8ecfb;
}

section p,
section li,
section dt,
section dd {
  color: var(--dark-text);
}

.section-help,
.charts-help,
.input-item small,
.architecture-live-card dt,
.temporal-methodology-details p {
  color: var(--dark-muted);
}

.input-item,
.method-col,
.chart-card,
.temporal-progress-panel,
.temporal-chart-card,
.temporal-log-card {
  color: var(--dark-text);
  background-color: var(--dark-surface-2);
  border-color: var(--dark-border);
}

input,
select,
textarea {
  color: var(--dark-text);
  background-color: #0b1723;
  border-color: #456078;
}

input:hover,
select:hover,
textarea:hover {
  border-color: #6c8da8;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline-color: rgba(85, 169, 230, 0.42);
  border-color: var(--dark-blue);
}

input::placeholder,
textarea::placeholder {
  color: #8299ab;
}

input:disabled,
select:disabled,
textarea:disabled {
  color: #8095a6;
  background-color: #101a24;
}

.checkbox-control {
  color: var(--dark-text);
  background-color: #0b1723;
  border-color: #456078;
}

button {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.24);
}

.validation-box {
  color: #ffd6d9;
  background-color: #471c25;
  border-color: #873b4b;
}

.project-summary,
.recommendation-card {
  color: var(--dark-text);
  background-color: #14283a;
  border-color: var(--dark-blue);
}

.project-summary {
  background-color: #132d25;
  border-left-color: var(--dark-green);
}

.table-container,
.temporal-summary-table-wrapper {
  background-color: #0d1925;
  border-color: var(--dark-border);
}

table {
  color: var(--dark-text);
  background-color: #0d1925;
}

th {
  color: #ffffff;
  background-color: #245c88;
}

td {
  color: var(--dark-text);
  border-bottom-color: var(--dark-border-soft);
}

tbody tr:nth-child(even) {
  background-color: #142332;
}

tbody tr:hover {
  background-color: #1a3145;
}

.cumple-si {
  color: #bdf6cf;
  background-color: #153b29 !important;
}

.cumple-no {
  color: #ffd2d2;
  background-color: #4a2025 !important;
}

.chart-card,
.temporal-chart-card {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}

.chart-card h3 {
  color: #d8ecfb;
}

.bar-name,
.bar-value {
  color: var(--dark-text);
}

.bar-track,
.temporal-progress-track {
  background-color: #263849;
  border-color: #40566a;
}

#chartsSection::after {
  color: #c4d4e1;
  background-color: #152434;
  border-left-color: var(--dark-blue);
}

code {
  color: #9ed4ff;
}

footer {
  color: #dce9f2;
  background-color: #07111b;
  border-top: 1px solid #2a4053;
}

#temporalSimulationSection {
  border-top-color: var(--dark-purple);
}

#temporalSimulationSection::before {
  background: radial-gradient(circle, rgba(192, 132, 252, 0.14), transparent 68%);
}

.temporal-notice {
  color: #eadcff;
  background: linear-gradient(135deg, #2c1940, #192536);
  border-color: #64427c;
  border-left-color: var(--dark-purple);
}

.live-indicator-card {
  background: linear-gradient(145deg, #14344d, #1c5278);
  border-color: #386986;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

.live-indicator-wide {
  background: linear-gradient(145deg, #35194b, #672584);
  border-color: #824fa0;
}

.live-indicator-label {
  color: #c7dff0;
}

.architecture-live-card {
  color: var(--dark-text);
  background-color: var(--dark-surface-2);
  border-color: var(--dark-border);
  border-top-color: var(--status-color);
  box-shadow: 0 4px 13px rgba(0, 0, 0, 0.25);
}

.architecture-live-card dl > div {
  border-bottom-color: #2b4052;
}

.architecture-live-card dd {
  color: var(--dark-text);
}

.status-idle {
  --status-color: #8298a9;
  background-color: #152434;
}

.status-stable {
  --status-color: var(--dark-green);
  background-color: #143126;
}

.status-warning {
  --status-color: var(--dark-yellow);
  background-color: #382f17;
}

.status-danger {
  --status-color: var(--dark-orange);
  background-color: #3d2817;
}

.status-critical {
  --status-color: var(--dark-red);
  background-color: #3e1d24;
}

.status-budget {
  --status-color: #9bafbd;
  background-color: #202b35;
}

.temporal-progress-fill {
  background: linear-gradient(90deg, #37a2e9, #b260e3, #ff914d);
}

.temporal-chart-card canvas {
  background: #101a24;
  border-color: var(--dark-border);
}

.temporal-event-log li {
  color: var(--dark-text);
  background-color: #0d1925;
  border-left-color: var(--dark-purple);
}

.temporal-event-log li strong {
  color: #cfa5f8;
}

.temporal-summary-card {
  color: var(--dark-text);
  background: linear-gradient(145deg, #142434, #251a34);
  border-color: #67427d;
  border-left-color: var(--dark-purple);
}

.temporal-summary-metric {
  background-color: #101e2b;
  border-color: #344b5e;
  border-top-color: var(--dark-purple);
  box-shadow: 0 4px 11px rgba(0, 0, 0, 0.22);
}

.temporal-summary-metric span {
  color: var(--dark-muted);
}

.temporal-summary-metric strong {
  color: var(--dark-text);
}

.temporal-summary-table-wrapper {
  background-color: #0b1722;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}

.temporal-summary-table {
  background-color: #0b1722;
}

.temporal-summary-table thead th,
.temporal-summary-table thead th:first-child {
  color: #ffffff;
  background-color: #245c88;
}

.temporal-summary-table tbody th,
.temporal-summary-table tbody td {
  color: var(--dark-text);
  background-color: #101e2b;
  border-bottom-color: #2d4355;
}

.temporal-summary-table tbody tr:nth-child(even) th,
.temporal-summary-table tbody tr:nth-child(even) td {
  background-color: #172838;
}

.temporal-summary-table th:first-child {
  box-shadow: 3px 0 7px rgba(0, 0, 0, 0.24);
}

.temporal-winner-row th,
.temporal-winner-row td,
.temporal-summary-table tbody tr.temporal-winner-row:nth-child(even) th,
.temporal-summary-table tbody tr.temporal-winner-row:nth-child(even) td {
  color: #c8f8d6;
  background-color: #17452d !important;
}

.temporal-summary-table-wrapper::after {
  color: var(--dark-muted);
  background-color: #142332;
  border-top-color: #2f4557;
}

.temporal-methodology-details {
  color: var(--dark-text);
  background-color: #101e2b;
  border-color: var(--dark-border);
}

.temporal-methodology-details summary {
  color: #9ed4ff;
}

.temporal-summary-disclaimer {
  color: #ffe2a8;
  background-color: #3a2d13;
  border-left-color: var(--dark-yellow);
}

/* Barra de desplazamiento oscura. */
* {
  scrollbar-color: #526b80 #101a24;
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

*::-webkit-scrollbar-track {
  background: #101a24;
}

*::-webkit-scrollbar-thumb {
  background-color: #526b80;
  border: 2px solid #101a24;
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #6b879d;
}

::selection {
  color: #ffffff;
  background-color: #6f2b91;
}

/* ==========================================================
   17. CORRECCION DE LEGIBILIDAD EN MODO OSCURO
   Contraste reforzado para textos, botones y tabla temporal.
   ========================================================== */

/* Tipografia general mas clara y consistente. */
body {
  color: #f3f7fb;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

section,
section p,
section li,
section dt,
section dd,
.temporal-summary-card,
.temporal-log-card {
  color: #f3f7fb;
}

section h2,
section h3,
section h4 {
  color: #f7fbff;
  font-weight: 700;
}

.section-help,
.charts-help,
.input-item small {
  color: #c2d1dc;
}

/* Los botones deshabilitados siguen siendo claramente legibles. */
button:disabled {
  color: #e8eef3 !important;
  opacity: 0.72;
  filter: saturate(0.82);
}

#startTemporalButton:disabled {
  color: #f1e5fa !important;
  background: #642784 !important;
  border: 1px solid #8d4bab;
}

#pauseTemporalButton:disabled {
  color: #fff1d4 !important;
  background-color: #9a6517 !important;
  border: 1px solid #c18a35;
}

#resetTemporalButton:disabled {
  color: #eef4f8 !important;
  background-color: #526575 !important;
  border: 1px solid #708596;
}

/* Estado y reloj sobre la barra de progreso. */
.temporal-progress-header,
.temporal-progress-header strong,
.temporal-progress-header span,
#temporalStatusText,
#temporalClock {
  color: #f0f7fc !important;
  font-weight: 700;
}

.temporal-progress-panel {
  background-color: #142638;
  border-color: #3a566d;
}

/* Etiquetas y valores de indicadores. */
.live-indicator-label {
  color: #e0edf7;
  font-weight: 700;
}

.live-indicator-card strong {
  color: #ffffff;
  font-weight: 750;
}

/* Tarjetas de estado por arquitectura. */
.architecture-live-heading h4,
.architecture-live-card dd {
  color: #f5f9fc !important;
}

.architecture-live-card dt {
  color: #bfd0dc !important;
}

/* Bitacora mas legible. */
.temporal-event-log li {
  color: #edf4f8;
  line-height: 1.5;
}

.temporal-event-log li strong {
  color: #e3c0ff;
  font-weight: 750;
}

/* Tarjetas destacadas del resumen. */
.temporal-summary-metric span {
  color: #c8d8e3;
  font-weight: 750;
}

.temporal-summary-metric strong {
  color: #ffffff;
  font-weight: 750;
}

/* Tabla temporal: contraste uniforme en TODAS las filas y columnas. */
.temporal-summary-table thead th,
.temporal-summary-table thead th:first-child {
  color: #ffffff !important;
  font-weight: 750;
  background-color: #276895 !important;
}

.temporal-summary-table tbody th,
.temporal-summary-table tbody td,
.temporal-summary-table tbody tr:nth-child(even) th,
.temporal-summary-table tbody tr:nth-child(even) td {
  color: #f2f7fb !important;
}

.temporal-summary-table tbody th {
  font-weight: 700;
}

.temporal-summary-table tbody td {
  font-weight: 550;
}

/* Fila ganadora: evita texto verde oscuro sobre fondo verde. */
.temporal-winner-row th,
.temporal-winner-row td,
.temporal-summary-table tbody tr.temporal-winner-row:nth-child(even) th,
.temporal-summary-table tbody tr.temporal-winner-row:nth-child(even) td {
  color: #effff4 !important;
  background-color: #1d5b3a !important;
  font-weight: 750;
}

.temporal-winner-row th:first-child {
  color: #ffffff !important;
  background-color: #216644 !important;
}

/* Primera columna normal: elimina el bloque blanco que aparece en Monolito. */
.temporal-summary-table tbody th:first-child {
  color: #f2f7fb !important;
  background-color: #162b3d !important;
}

.temporal-summary-table tbody tr:nth-child(even) th:first-child {
  background-color: #1a3246 !important;
}

.temporal-summary-table tbody tr.temporal-winner-row th:first-child {
  color: #ffffff !important;
  background-color: #216644 !important;
}

/* Metodologia y recomendacion. */
.temporal-methodology-details summary {
  color: #a8dcff !important;
  font-weight: 750;
}

.temporal-methodology-details p,
.temporal-summary-card > div > p,
.temporal-final-observations li {
  color: #edf4f8 !important;
}

.temporal-summary-card h4 {
  color: #b8e2ff !important;
}

.temporal-summary-disclaimer {
  color: #ffe9b9 !important;
}

/* Texto auxiliar inferior de la tabla. */
.temporal-summary-table-wrapper::after {
  color: #c3d2dc;
}

/* Formula y bloques metodologicos. */
.method-col,
.method-col p,
.method-col li,
.recommendation-card,
.recommendation-card p,
.recommendation-card li {
  color: #eef5fa;
}

code {
  color: #b5e1ff;
  font-weight: 600;
}

/* Formularios: texto blanco real, no gris tenue. */
input,
select,
textarea {
  color: #f7fbff;
}

input:disabled,
select:disabled,
textarea:disabled {
  color: #b9c9d5;
  opacity: 1;
}

/* Tablas generales. */
table tbody td,
table tbody th {
  color: #edf4f8;
}

/* Compatibilidad para pantallas con contraste alto. */
@media (prefers-contrast: more) {
  body,
  section p,
  section li,
  .temporal-summary-table tbody th,
  .temporal-summary-table tbody td {
    color: #ffffff !important;
  }

  section,
  .input-item,
  .chart-card,
  .temporal-chart-card,
  .architecture-live-card {
    border-color: #67839a;
  }
}

/* Componentes v3.1 ajustados al tema oscuro permanente. */
.source-card {
  color: var(--dark-text);
  background: var(--dark-surface-2);
  border-color: var(--dark-border);
  border-top-color: #53d37d;
}

.source-card p { color: #dbe8f1; }
.source-card a { color: #78c7ff; }

.delta-card {
  color: #ffe9b0;
  background: #342a12;
  border-color: #755d20;
  border-left-color: #f3c64e;
}

.delta-card h3,
.delta-card p { color: #fff0c7; }

@media print {
  :root { color-scheme: light; }
  html,
  body { color: #111 !important; background: #fff !important; }
  header { color: #111 !important; background: #fff !important; border-bottom: 2px solid #183b56; }
  header h1,
  section h2,
  section h3,
  section h4,
  section p,
  section li,
  section dt,
  section dd { color: #111 !important; }
  section,
  .input-item,
  .method-col,
  .chart-card,
  .source-card,
  .delta-card,
  .recommendation-card { color: #111 !important; background: #fff !important; box-shadow: none !important; }
  table,
  tbody tr,
  tbody td,
  tbody th { color: #111 !important; background: #fff !important; }
  thead th { color: #fff !important; background: #24527a !important; }
}