/* ── Las herramientas locales ─────────────────────────────────────────────────
   Sin colores de marca: el aspecto lo pone el tema padre de cada red. Aqui solo
   va la estructura y lo que tiene que verse SIEMPRE — sobre todo el bloque de
   "sin dato", que es el que no se puede quedar discreto.
   Hereda el color del tema con currentColor y color-mix, para no imponer una
   paleta que choque con el padre. ------------------------------------------- */

.mh-herramienta { max-width: 46rem; margin: 0 auto; }
.mh-h-cabecera { margin: 0 0 1.5rem; }
.mh-h-titulo { margin: 0 0 .25rem; }
.mh-h-entrada { margin: 0; opacity: .8; }
.mh-h-pais { margin: .25rem 0 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; opacity: .6; }
.mh-h-nota { font-size: .85rem; opacity: .75; line-height: 1.5; }
.mh-h-vacio { opacity: .75; }

.mh-panel { border: 1px solid color-mix(in srgb, currentColor 18%, transparent); border-radius: .75rem; padding: 1rem 1.15rem; margin: 0 0 1rem; }
.mh-panel > h2 { margin: 0 0 .75rem; font-size: 1.05rem; }

/* ── El dato y su procedencia. Van juntos o no va ninguno. ─────────────────── */
.mh-dato { margin: 0 0 1rem; }
.mh-dato:last-child { margin-bottom: 0; }
.mh-dato-etiqueta { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; opacity: .65; margin-bottom: .15rem; }
.mh-dato-valor { font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
.mh-dato-unidad { font-size: .9rem; font-weight: 600; opacity: .7; }
.mh-dato-fuente { font-size: .78rem; opacity: .8; margin-top: .2rem; line-height: 1.5; }
.mh-dato-nota { font-size: .8rem; opacity: .75; margin-top: .3rem; line-height: 1.5; }

/* "Sin dato" NO es un estado discreto. Se ve tanto como un dato, porque decir
   que no sabemos algo es parte de lo que publicamos. */
.mh-dato-vacio {
  font-size: .9rem; line-height: 1.55; padding: .6rem .75rem; border-radius: .5rem;
  border: 1px dashed color-mix(in srgb, currentColor 35%, transparent);
  background: color-mix(in srgb, currentColor 5%, transparent);
}

/* ── Remesas ──────────────────────────────────────────────────────────────── */
.mh-remesas-sincambio { margin: 0; line-height: 1.6; }
.mh-remesas-form { display: grid; gap: .4rem; }
.mh-remesas-form label { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; opacity: .7; }
.mh-remesas-form input { padding: .6rem .7rem; font-size: 1.15rem; font-weight: 700; border-radius: .5rem;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent); background: transparent; color: inherit; }
.mh-remesas-form button { margin-top: .5rem; padding: .7rem; border-radius: .5rem; font-weight: 700; cursor: pointer;
  border: 1px solid currentColor; background: transparent; color: inherit; }
.mh-remesas-ayuda { font-size: .8rem; opacity: .75; line-height: 1.55; margin: .5rem 0 0; }
.mh-remesas-alcance { font-size: .88rem; line-height: 1.6; margin: .6rem 0 0; }
.mh-remesas-tabla, .mh-tabla-operadores { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.mh-remesas-tabla th, .mh-remesas-tabla td,
.mh-tabla-operadores th, .mh-tabla-operadores td {
  text-align: left; padding: .55rem .4rem; font-size: .9rem;
  border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}
.mh-remesas-tabla th, .mh-tabla-operadores th { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; opacity: .65; }
.mh-remesas-tabla td.mh-q { text-align: right; font-weight: 800; font-size: 1rem; white-space: nowrap; }
.mh-remesas-dif { font-size: .88rem; margin: .7rem 0 0; }

/* ── Velocidad ────────────────────────────────────────────────────────────── */
.mh-boton { display: inline-block; padding: .65rem 1.1rem; border-radius: .5rem; font-weight: 700;
  border: 1px solid currentColor; text-decoration: none; color: inherit; }

/* ── Tramites ─────────────────────────────────────────────────────────────── */
.mh-tramite { border: 1px solid color-mix(in srgb, currentColor 18%, transparent); border-radius: .75rem; padding: 1rem 1.15rem; margin: 0 0 1rem; }
.mh-tramite > h2 { margin: 0 0 .4rem; font-size: 1.1rem; }
.mh-tramite-quees { margin: 0 0 .9rem; opacity: .85; line-height: 1.6; }
.mh-tramite-campos { display: grid; gap: .9rem; margin: 1rem 0; }
@media (min-width: 34rem) { .mh-tramite-campos { grid-template-columns: repeat(3, 1fr); } }
.mh-tramite-requisitos h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; opacity: .65; margin: 0 0 .35rem; }
.mh-tramite-requisitos ul { margin: 0 0 .4rem; padding-left: 1.1rem; line-height: 1.6; }

.mh-panel-limites { font-size: .88rem; line-height: 1.6; opacity: .9; }
.mh-panel-limites ul { margin: 0; padding-left: 1.1rem; }

/* ── Clima: la nota de division territorial ───────────────────────────────── */
.mh-clima-division { font-size: .82rem; opacity: .75; line-height: 1.55; margin: .2rem 0 0; }

/* ── Clima agrupado por division superior ───────────────────────────────────
   Aparece cuando los lugares traen `departamento`. El Salvador pasó de 28
   lugares a 262 distritos: en lista plana son 262 enlaces seguidos y nadie
   encuentra el suyo. Agrupados por departamento se recorren de un vistazo.
   Los países cuya lista no trae departamento siguen viendo la lista plana. */
.mh-clima-grupo { margin: 1.1rem 0 0; }
.mh-clima-grupo-titulo {
	font-size: .95rem; margin: 0 0 .35rem; padding-bottom: .2rem;
	border-bottom: 1px solid rgba(0, 0, 0, .12);
}
.mh-clima-grupo-cuenta { font-weight: 400; opacity: .6; font-size: .82rem; }
.mh-clima-grupo .mh-clima-municipios { margin: 0; }

/* ── Una sección que todavía no tiene qué enseñar ───────────────────────────
   La tarjeta se ve, NO se puede pulsar y dice «Pronto». Es un <span>, no un
   <a>: si fuera enlace llevaría a una página vacía, que es justo lo que esto
   existe para no hacer. Copiado del patrón de Pasatiempos en mihispano.gt. */
.mh-pronto { margin: 1.2rem 0; }
.mh-pronto-tarjeta {
	display: block; padding: .85rem 1rem; border: 1px dashed rgba(0, 0, 0, .25);
	border-radius: 6px; background: rgba(0, 0, 0, .02); cursor: default;
}
.mh-pronto-tarjeta h3 { margin: 0 0 .3rem; font-size: 1rem; }
.mh-pronto-etiqueta {
	display: inline-block; margin-left: .5rem; padding: .05rem .45rem;
	border-radius: 999px; font-size: .7rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: .04em;
	background: rgba(0, 0, 0, .08); vertical-align: .1em;
}
.mh-pronto-tarjeta p { margin: 0; font-size: .87rem; line-height: 1.55; opacity: .8; }
.mh-pronto-porque { margin: .5rem 0 0; font-size: .82rem; line-height: 1.55; opacity: .7; }