/* ============================================================
   Tukan Landing — estado.css
   Página-machote por estado, layout tipo docs:
   columna de texto a la izquierda + columna de visuales a la derecha.
   Usa los design tokens de ../css/styles.css (no redefine variables).
   ============================================================ */

/* Evita el "flash" de los mount points vacíos mientras carga el .md */
#estado { opacity: 0; transition: opacity 0.3s ease; }
#estado.is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  #estado { opacity: 1; transition: none; }
}

/* --------------------------- Layout -------------------------- */
.estado-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 56px;
  align-items: start;
  padding-top: 116px;
  padding-bottom: 88px;
}
.estado-main { min-width: 0; }

/* --------------------------- Header -------------------------- */
.estado-breadcrumb {
  display: inline-block;
  margin-bottom: 22px;
  font-size: var(--fs-body2);
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.15s ease;
}
.estado-breadcrumb:hover { color: var(--primary-700); }

.estado-head { display: flex; align-items: center; gap: 14px; }
.estado-head__img {
  width: 72px; height: 72px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(19, 50, 71, 0.16);
  flex-shrink: 0;
}
.estado-title {
  font-size: 44px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--text-heading);
}
.estado-updated {
  margin-top: 4px;
  font-size: var(--fs-caption);
  color: var(--text-faint);
}

.estado-lema {
  margin-top: 18px;
  font-size: var(--fs-h5);
  font-weight: 500;
  line-height: 1.4;
  color: var(--primary-700);
}
.estado-intro {
  max-width: 60ch;
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
}
.estado-intro a {
  color: var(--primary-600);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.estado-intro a:hover { color: var(--primary-800); }
/* Divider entre el subtítulo y el cuerpo */
.estado-divider {
  height: 1px;
  margin: 28px 0 0;
  border: none;
  background: var(--border);
}

/* ---------------------- Cuerpo (markdown) -------------------- */
.estado-body {
  margin-top: 30px;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text-body);
}
.estado-body > *:first-child { margin-top: 0; }
.estado-body h2 {
  margin: 40px 0 12px;
  padding-top: 8px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.estado-body h3 {
  margin: 28px 0 8px;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
}
.estado-body p { margin: 0 0 16px; }
.estado-body a {
  color: var(--primary-600);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.estado-body a:hover { color: var(--primary-800); }
.estado-body strong { color: var(--text-heading); font-weight: 600; }
.estado-body code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  padding: 2px 6px;
  background: var(--primary-50);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.estado-body ul,
.estado-body ol { margin: 0 0 16px; padding-left: 22px; }
.estado-body li { margin: 5px 0; padding-left: 4px; }
.estado-body ul { list-style: disc; }
.estado-body ol { list-style: decimal; }
.estado-body blockquote {
  margin: 0 0 16px;
  padding: 4px 16px;
  border-left: 3px solid var(--primary-300);
  color: var(--text-muted);
}
.estado-body hr {
  margin: 32px 0;
  border: none;
  border-top: 1px solid var(--border);
}

/* Tablas del markdown */
.estado-table {
  margin: 0 0 20px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.estado-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body2);
}
.estado-table th,
.estado-table td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.estado-table th {
  background: var(--surface-soft);
  color: var(--text-heading);
  font-weight: 600;
  white-space: nowrap;
}
.estado-table tr:last-child td { border-bottom: none; }

/* -------------- Columna derecha (sticky) -------------- */
.estado-aside {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Datos clave */
.estado-facts {
  padding: 18px 20px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.estado-facts__title {
  margin-bottom: 6px;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.estado-facts__list { display: flex; flex-direction: column; }
.estado-fact {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.estado-fact:last-child { border-bottom: none; }
.estado-fact__label { font-size: var(--fs-body2); color: var(--text-muted); }
.estado-fact__value {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text-heading);
  text-align: right;
}

/* Placeholders de gráficas / tablas */
.estado-viz { display: flex; flex-direction: column; gap: 16px; }
.viz-card {
  margin: 0;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.viz-card__frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  aspect-ratio: 16 / 10;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(45deg, var(--surface-soft) 0 10px, #fff 10px 20px);
  color: var(--text-faint);
}
.viz-card__label {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.viz-card__caption {
  margin-top: 10px;
  font-size: var(--fs-body2);
  color: var(--text-muted);
}

/* ------------------------ Responsive ------------------------ */
@media (max-width: 980px) {
  .estado-layout {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 104px;
  }
  .estado-aside { position: static; }
}
@media (max-width: 560px) {
  .estado-title { font-size: 31px; }
  .estado-head__img { width: 60px; height: 60px; }
  .estado-intro { font-size: var(--fs-body2); }
  .estado-layout { padding-top: 96px; padding-bottom: 64px; }
}