/* Marca, avatar, iconos e imágenes bien escalados */

/* Logo CIMAT Mérida — bloque bajo la biografía en la portada (static/media/cimat-merida-logo.png) */
.cimat-merida-home-logo-wrap {
  text-align: center;
  padding: 0.25rem 0 1.25rem;
  margin: 0 auto;
  max-width: 100%;
}
.cimat-merida-home-logo-wrap a {
  border-bottom: none !important;
  display: inline-block;
}
.cimat-merida-home-logo {
  height: auto;
  max-height: 7rem;
  width: auto;
  max-width: min(200px, 92vw);
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
}

.navbar-brand {
  font-size: clamp(0.9rem, 2vw, 1.05rem) !important;
  font-weight: 600;
  max-width: 85%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Avatar en páginas internas / tarjetas */
.avatar-wrapper {
  max-width: 110px !important;
  max-height: 110px !important;
}

/* Foto de presentación en la portada (círculo grande pero contenido) */
main .hb-section:first-child .avatar-wrapper,
.blox-resume-biography-3 .avatar-wrapper,
#section-resume-biography-3 .avatar-wrapper {
  max-width: 240px !important;
  max-height: 240px !important;
}

.avatar-wrapper .avatar {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  aspect-ratio: 1;
  object-fit: cover;
}

/* Iconos pequeños: bloque autor (redes) + header/navbar. Clase real en HTML es blox-resume-biography-3 */
.blox-resume-biography-3 a[class*="w-12"],
.blox-resume-biography-3 a[class*="h-12"],
.blox-resume-biography-3 a[class*="w-16"],
.blox-resume-biography-3 a[class*="h-16"],
.blox-resume-biography-3 .w-12.h-12,
.blox-resume-biography-3 .w-16.h-16,
#section-resume-biography-3 a[class*="w-12"],
#section-resume-biography-3 a[class*="h-12"],
#section-resume-biography-3 a[class*="w-16"],
#section-resume-biography-3 a[class*="h-16"],
.header a[class*="w-12"],
.header a[class*="h-12"],
.header a[class*="w-16"],
.header a[class*="h-16"],
.navbar a[class*="w-12"],
.navbar a[class*="h-12"],
.navbar a[class*="w-16"],
.navbar a[class*="h-16"],
.header .w-12.h-12,
.header .w-16.h-16,
.navbar .w-12.h-12,
.navbar .w-16.h-16 {
  max-width: 1.25rem !important;
  max-height: 1.25rem !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  min-width: 1.25rem !important;
  min-height: 1.25rem !important;
}

.blox-resume-biography-3 a svg,
.blox-resume-biography-3 [class*="w-12"] svg,
.blox-resume-biography-3 [class*="w-16"] svg,
#section-resume-biography-3 a svg,
#section-resume-biography-3 [class*="w-12"] svg,
#section-resume-biography-3 [class*="w-16"] svg,
.header a svg,
.header [class*="w-12"] svg,
.header [class*="w-16"] svg,
.navbar a svg,
.navbar [class*="w-12"] svg,
.navbar [class*="w-16"] svg {
  max-width: 0.8rem !important;
  max-height: 0.8rem !important;
  width: 0.8rem !important;
  height: 0.8rem !important;
}

/* Modal de búsqueda / estados vacíos: el tema usa h-12 w-12 (48px) — demasiado */
svg.mx-auto.h-12.w-12,
svg.h-12.w-12.mx-auto {
  width: 1rem !important;
  height: 1rem !important;
  max-width: 1rem !important;
  max-height: 1rem !important;
}

svg.animate-spin.h-8.w-8 {
  width: 1.25rem !important;
  height: 1.25rem !important;
  max-width: 1.25rem !important;
  max-height: 1.25rem !important;
}

.hb-section img,
.prose img,
main img {
  max-width: 100%;
  height: auto;
}

/*
 * Intereses (bloque biografía portada): los <span> van seguidos sin texto entre medio;
 * si el CSS del tema no aplica gap (purge, orden de carga, etc.), se ven pegados en
 * pantalla y en extractores de texto. Forzamos flex + gap y margen en chips.
 * (El h3 "Intereses" no es hermano directo del contenedor; está en un div de cabecera.)
 */
.resume-biography .flex.flex-wrap.gap-3,
#section-resume-biography-3 .flex.flex-wrap.gap-3 {
  display: flex !important;
  flex-wrap: wrap !important;
  column-gap: 0.75rem !important;
  row-gap: 0.5rem !important;
}
.resume-biography .flex.flex-wrap.gap-3 > span,
#section-resume-biography-3 .flex.flex-wrap.gap-3 > span {
  margin: 0.2rem 0.35rem !important;
}

/*
 * Mismo problema de chips “pegados” en subpáginas (tags, badges, filas flex del tema).
 * Aplica en todo main, no solo en el bloque biografía de la portada.
 */
main .flex.flex-wrap[class*="gap-"] {
  display: flex !important;
  flex-wrap: wrap !important;
}
main .flex.flex-wrap.gap-1 {
  column-gap: 0.25rem !important;
  row-gap: 0.25rem !important;
}
main .flex.flex-wrap.gap-2 {
  column-gap: 0.5rem !important;
  row-gap: 0.375rem !important;
}
main .flex.flex-wrap.gap-3 {
  column-gap: 0.75rem !important;
  row-gap: 0.5rem !important;
}
main .flex.flex-wrap.gap-4 {
  column-gap: 1rem !important;
  row-gap: 0.5rem !important;
}
main .flex.flex-wrap[class*="gap-"] > span,
main .flex.flex-wrap[class*="gap-"] > a.inline-flex {
  margin: 0.12rem 0.28rem !important;
}

/* Encabezado: búsqueda / tema — evitar que text-xl herede y agrande iconos */
.header button[data-search-toggle],
.header button[data-search-toggle] svg,
.header button.theme-toggle,
.header button.theme-toggle svg {
  font-size: 1rem !important;
  line-height: 1 !important;
}

.header button[data-search-toggle] svg,
.header button.theme-toggle svg {
  max-width: 1rem !important;
  max-height: 1rem !important;
  width: 1rem !important;
  height: auto !important;
}

/* Cabecera completa (incl. selector de idiomas fuera del <nav class="navbar">): capar SVG */
.page-header svg,
#site-header svg {
  max-width: 1.25rem !important;
  max-height: 1.25rem !important;
  width: auto !important;
  height: auto !important;
}

label[for="nav-toggle"] svg {
  max-width: 1.25rem !important;
  max-height: 1.25rem !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
}

/* Pie: CC y cualquier SVG del footer */
.page-footer svg,
.page-footer .footer-license-icons svg {
  width: 1rem !important;
  height: 1rem !important;
  max-width: 1rem !important;
  max-height: 1rem !important;
}

/*
 * Markdown (Divulgación, etc.): lg:prose-xl + w-full en figuras; !important gana a utilities.
 */
.prose figure .w-full {
  max-width: min(100%, 32rem) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.prose figure img {
  display: block !important;
  max-width: min(100%, 32rem) !important;
  max-height: min(22rem, 65vh) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Por si el tema no envuelve en <figure> o el orden CSS anula .prose figure img */
#section-markdown .prose img:not(.cimat-merida-home-logo),
.blox-markdown .prose img:not(.cimat-merida-home-logo) {
  max-width: min(100%, 32rem) !important;
  max-height: min(22rem, 65vh) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* GoatCounter: línea discreta de vistas por página (hook body-end + demos /software/) */
.hb-gc-pageviews {
  text-align: center;
  margin-top: 1.5rem;
  padding: 0.35rem 0.75rem 0.15rem;
  font-size: 0.7rem;
  line-height: 1.45;
  color: #64748b;
  border-top: 1px solid rgba(148, 163, 184, 0.25);
}
html.dark .hb-gc-pageviews,
.dark .hb-gc-pageviews {
  color: #94a3b8;
  border-top-color: rgba(148, 163, 184, 0.2);
}
.hb-gc-pageviews .hb-gc-label {
  font-weight: 400;
}
.hb-gc-pageviews .hb-gc-num {
  color: #475569;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
html.dark .hb-gc-pageviews .hb-gc-num,
.dark .hb-gc-pageviews .hb-gc-num {
  color: #cbd5e1;
}
.hb-gc-pageviews .hb-gc-hint {
  font-size: 0.65rem;
  opacity: 0.88;
  font-weight: 400;
}
.hb-gc-pageviews .hb-gc-fallback .hb-gc-num {
  font-weight: 500;
  opacity: 0.7;
}