/* Reset mínimo y tipografía */
:root {
  --bg: #ffffff;
  --text: #202122;
  --muted: #54595d;
  --link: #0645ad;
  --link-visited: #0b0080;
  --border: #c8ccd1;
  --table-stripe: #f8f9fa;
  --toc-bg: #f6f6f6;
}

:root[data-theme="dark"] {
  --bg: #111418;
  --text: #e5e7eb;
  --muted: #a3a7ad;
  --link: #7aa2ff;
  --link-visited: #b291ff;
  --border: #2a2f36;
  --table-stripe: #171b21;
  --toc-bg: #151a20;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); }
body { font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; }
body, .mw-header, .infobox-card, .mw-table thead th { transition: background-color .25s ease, color .25s ease, border-color .25s ease; }

/* Header */
.mw-header { border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 0; z-index: 20; }
.mw-header-inner { max-width: 1200px; margin: 0 auto; padding: 10px 16px; display: flex; gap: 12px; align-items: center; }
.mw-logo { font-weight: 700; text-decoration: none; color: var(--text); background: var(--table-stripe); padding: 6px 10px; border: 1px solid var(--border); border-radius: 4px; }
.mw-search { margin-left: auto; }
.mw-search input { width: 280px; max-width: 45vw; padding: 8px 10px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--text); }
.mw-toggle { margin-left: 8px; padding: 8px 10px; border: 1px solid var(--border); background: var(--table-stripe); color: var(--text); border-radius: 6px; cursor: pointer; }

/* Layout */
.mw-container { max-width: 1200px; margin: 0 auto; padding: 16px; display: grid; grid-template-columns: 1fr 320px; gap: 24px; }
@media (max-width: 1024px) { .mw-container { grid-template-columns: 1fr; } .mw-infobox { order: -1; } }

.mw-content h1 { font-size: 2rem; margin: 0 0 4px 0; }
.mw-subtitle { color: var(--muted); margin: 0 0 12px 0; }

.mw-hero img { width: 100%; height: auto; border: 1px solid var(--border); background: #eee; }
.mw-hero figcaption { font-size: .6rem; color: var(--muted); }

.mw-figure { margin: 16px 0; }
.mw-figure img { width: 100%; height: auto; border: 1px solid var(--border); }
.mw-figure figcaption { font-size: .6rem; color: var(--muted); }

/* TOC */
.mw-toc { border: 1px solid var(--border); background: var(--toc-bg); padding: 12px; margin: 16px 0; border-radius: 4px; }
.mw-toc h2 { font-size: 1rem; margin: 0 0 8px 0; }
.mw-toc ol { margin: 0; padding-left: 18px; }
.mw-toc a { color: var(--link); text-decoration: none; }
.mw-toc a:hover { text-decoration: underline; }

/* Infobox */
/* === Estilo tipo Wikipedia para el aside === */
.mw-infobox {
  position: relative;
  font-size: 0.9rem;
  color: var(--text);
}
.wiki {
  display: flex;
  align-items: center;
  font-family: "Times New Roman", serif;
}

.wiki img {
  width: 60px;
  margin-right: 10px;
}

.wiki-text {
  font-size: 20px;
  font-weight: normal;
  letter-spacing: 2px;
  line-height: 0.9;
}

.wiki-text .cap {
  font-size: 28px;
  font-weight: normal;
}

.wiki-text small {
  font-size: 16px;
  margin-left: 2px;
  display: block;
  letter-spacing: 0.1px;
}
.infobox-card {
  position: sticky;
  top: 72px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  overflow: hidden;
}

/* Encabezado principal */
.infobox-title {
  background: #a7c8df;
  color: #000;
  text-align: center;
  font-weight: bold;
  padding: 6px;
  font-size: 1.1rem;
  border-bottom: 1px solid var(--border);
  margin: 0;
}

/* Imagen */
.infobox-image {
  text-align: center;
  background: #f8f9fa;
  padding: 6px;
  border-bottom: 1px solid var(--border);
}
.infobox-image img {
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
}

/* Subtítulo (apodo) */
.infobox-sub {
  text-align: center;
  font-style: italic;
  color: var(--muted);
  margin: 4px 0 8px;
}

/* Sección de información */
.infobox-list {
  width: 100%;
  margin: 0;
  padding: 0;
  border-collapse: collapse;
}
.infobox-list dt {
  background: #a7c8df;
  font-weight: 600;
  padding: 4px 6px;
  border-top: 1px solid var(--border);
}
.infobox-list dd {
  padding: 4px 6px 6px 6px;
  margin: 0;
  border-bottom: 1px solid var(--border);
  background: var(--table-stripe);
}

/* Tema oscuro */
:root[data-theme="dark"] .infobox-card {
  background: #1c1f23;
  border-color: #333;
}
:root[data-theme="dark"] .infobox-title,
:root[data-theme="dark"] .infobox-list dt {
  background: #2e3a46;
  color: #e5e7eb;
}
:root[data-theme="dark"] .infobox-list dd {
  background: #22272b;
  border-color: #333;
}


/* Tabla */
.mw-table-wrap { overflow-x: auto; }
.mw-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.mw-table th, .mw-table td { border: 1px solid var(--border); padding: 8px; }
.mw-table thead th { background: var(--table-stripe); text-align: left; }
.mw-table tbody tr:nth-child(even) { background: var(--table-stripe); }

/* Galería */
.mw-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 16px 0;
}
.mw-gallery figure {
  margin: 0;
}
.mw-gallery img {
  width: 100%;
  height: 260px; /* altura fija igual para las dos */
  object-fit: cover; /* recorta sin deformar */
  border: 1px solid var(--border);
  background: #eee;
}
.mw-gallery figcaption {
  font-size: .75rem;
  color: var(--muted);
  margin-top: 4px;
  text-align: center;
}

a { color: var(--link); }
a:visited { color: var(--link-visited); }

.mw-footer { margin-top: 32px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--muted); font-size: .95rem; }

/* Resultados del buscador inline */
mark.search-hit { background: #fff3b0; padding: 0 2px; }

/* Utilidad para cortar el flujo de floats cuando termina una sección */
.clearfix { clear: both; }

/* Imagen lateral izquierda (tipo Wikipedia) */
.mw-side-figure {
  float: left;
  width: min(48%, 520px);  /* aprox mitad de pantalla, con tope */
  margin: 4px 16px 12px 0; /* separa del texto */
}
.mw-side-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  background: #eee;
}
.mw-side-figure figcaption {
  font-size: .6rem;
  color: var(--muted);
  margin-top: 4px;
}

/* Imagen lateral derecha (más chica, ~25% del ancho) */
.mw-side-figure-right {
  float: right;
  width: min(28%, 300px); /* un cuarto aprox, con máximo */
  margin: 4px 0 12px 16px; /* separación del texto */
}
.mw-side-figure-right img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  background: #eee;
}
.mw-side-figure-right figcaption {
  font-size: .6rem;
  color: var(--muted);
  margin-top: 4px;
}

/* En pantallas chicas, se apila y ocupa todo el ancho */
@media (max-width: 720px) {
  .mw-side-figure,
  .mw-side-figure-right {
    float: none;
    width: 100%;
    margin: 12px 0;
  }
}


/* Fuerza que todas las imágenes mantengan su espacio sin romper el layout */
img {
  display: block;
  width: 100%;
  height: auto;
}

/* Para las imágenes laterales tipo Wikipedia */
.mw-side-figure img,
.mw-side-figure-right img {
  aspect-ratio: 4 / 3; /* o 3/2 si queda mejor */
  object-fit: cover;
}

/* Para la imagen principal */
.mw-hero img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Para la galería */
.mw-gallery img {
  aspect-ratio: 4 / 3;
  height: auto; /* ya no fijamos altura rígida */
}
/* Evita el salto cuando cargan imágenes laterales */
.mw-side-figure img,
.mw-side-figure-right img,
.mw-figure img,
.mw-hero img {
    aspect-ratio: 4 / 3; /* Ajustá si tus fotos no son 4:3 */
    object-fit: cover;
    display: block;
}
/* Reservas de espacio para evitar CLS */
.mw-hero img { aspect-ratio: 3 / 2; display:block; }
.mw-side-figure img { aspect-ratio: 3 / 2; display:block; }
.mw-side-figure-right img { aspect-ratio: 3 / 2; display:block; }
.infobox-image img { aspect-ratio: 320 / 420; display:block; }

/* (ya lo tenés en galería, lo dejo explícito) */
.mw-gallery img { height: 260px; object-fit: cover; display:block; }


hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: -10px 0 0;      /* menos espacio arriba y abajo */
  height: 0;          /* evita que engrose */
  opacity: 0.6;       /* más suave */
}