/**
 * Módulo Embajadas — 25 ago 2026.
 *
 * FONDO BLANCO por pedido directo de Fidel: «para este módulo fondo blanco».
 * Es el primer módulo del hub que no va sobre oscuro, así que la paleta se
 * define aquí entera y no se hereda de hub.css. No se toca hub.css ni
 * tokens.css (AGENTS.md §3).
 *
 * El rojo sale del icono que envió Fidel: el PNG lleva un degradado que va
 * de #f13840 a #fc4f4d (píxeles leídos del propio fichero). Se toma el extremo
 * oscuro, #f13840, porque es el que contrasta sobre blanco. Se usa como
 * acento, nunca como fondo: 111 filas sobre rojo no se leen.
 */

[hidden] {
  display: none !important;
}

body[data-page="embajadas"] {
  --emb-rojo: #f13840;
  --emb-tinta: #12161c;
  --emb-tinta-suave: #5b6470;
  --emb-linea: #e7e9ee;
  --emb-fondo-suave: #f6f7f9;
}

.card-moment--embajadas {
  position: relative;
  overflow: hidden;
  margin-bottom: 0.85rem;
  background: #ffffff;
  border: 1px solid var(--emb-linea);
  box-shadow: 0 10px 28px rgba(18, 22, 28, 0.06);
}

.card-moment--embajadas .card-moment__seal {
  width: 2.5rem;
  height: 2.5rem;
  top: 0.75rem;
  right: 0.75rem;
}

/* —— Cabecera —— */
.emb-hero {
  margin: 0 0 0.9rem;
  padding-right: 3rem;
}

.emb-hero__title {
  margin: 0 0 0.25rem;
  font-family: var(--font-headline);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--emb-tinta);
}

.emb-hero__sub {
  /* 25 ago 2026: hueco para la etiqueta «¿Qué hace?», que cuelga debajo del
     sello (esquina superior derecha) y se comía la segunda línea de este
     párrafo. El título ya reserva su sitio con el padding-right de .emb-hero;
     la etiqueta baja más y necesita el suyo. */
  padding-right: 5.2rem;
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 300;
  line-height: 1.45;
  color: var(--emb-tinta-suave);
}

/* El cartel rojo de «Directorio sin contrastar» (.emb-aviso) vivía aquí. Se
   retiró el 25 ago 2026 por pedido de Fidel: media pantalla de disclaimer antes
   de la primera dirección. El aviso se reparte ahora entre la marca del
   recuento y el pie. Ver el comentario del HTML. */

/* —— Buscador —— */
.emb-buscador {
  margin: 0 0 0.9rem;
}

.emb-buscador__label {
  display: block;
  margin: 0 0 0.35rem;
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--emb-tinta-suave);
}

.emb-buscador__campo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.85rem;
  border: 1px solid var(--emb-linea);
  background: var(--emb-fondo-suave);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.emb-buscador__campo:focus-within {
  border-color: color-mix(in srgb, var(--emb-rojo) 55%, transparent);
  background: #ffffff;
}

.emb-buscador__icono {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  fill: none;
  stroke: var(--emb-tinta-suave);
  stroke-width: 2;
  stroke-linecap: round;
}

.emb-buscador__campo input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--emb-tinta);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.emb-buscador__campo input::placeholder {
  color: color-mix(in srgb, var(--emb-tinta-suave) 75%, #ffffff);
}

.emb-buscador__campo input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.emb-buscador__x {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--emb-tinta-suave) 14%, transparent);
  cursor: pointer;
}

.emb-buscador__x svg {
  width: 0.85rem;
  height: 0.85rem;
  fill: none;
  stroke: var(--emb-tinta);
  stroke-width: 2.2;
  stroke-linecap: round;
}

.emb-cuenta {
  margin: 0.45rem 0 0;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 300;
  color: var(--emb-tinta-suave);
}

/* —— Lista ——
   Agrupada por zona porque es como se busca de verdad en La Habana: casi
   todas están en Miramar, y lo útil es ver de un golpe cuáles NO. */
.emb-grupo + .emb-grupo {
  margin-top: 1.15rem;
}

.emb-grupo__cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0 0 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--emb-linea);
}

.emb-grupo__nombre {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--emb-rojo);
}

.emb-grupo__cuenta {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--emb-tinta-suave);
}

.emb-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.emb-item:last-child {
  border-bottom: 0;
}

.emb-item__pais {
  margin: 0 0 0.15rem;
  font-family: var(--font-body);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--emb-tinta);
}

.emb-item__dir {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.45;
  color: var(--emb-tinta-suave);
}

.emb-item mark {
  padding: 0 0.1em;
  border-radius: 0.2em;
  background: color-mix(in srgb, var(--emb-rojo) 18%, #ffffff);
  color: inherit;
}

.emb-vacio {
  margin: 1rem 0 0;
  padding: 0.9rem;
  border-radius: 0.8rem;
  background: var(--emb-fondo-suave);
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 300;
  text-align: center;
  color: var(--emb-tinta-suave);
}

.emb-disclaimer {
  margin: 0.9rem 0 0;
  padding: 0 0.25rem;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--on-surface-muted);
}

@media (prefers-reduced-motion: reduce) {
  .emb-buscador__campo {
    transition: none;
  }
}

/* —— 25 ago 2026 · Bandera y puente a Pasaporte ——————————————————————
   Pedido de Fidel: bandera en cada fila y enlace con otro módulo del hub.

   La bandera es un emoji compuesto desde el código ISO (ver embajadas.js), no
   una imagen. Va con `aria-hidden`: al lado tiene el nombre del país escrito,
   y un lector de pantalla diciendo «bandera de Alemania. Alemania» sobra.

   El puente no es un botón: es una salida. Por eso va discreto, alineado a la
   izquierda bajo la dirección, y solo aparece en las fichas que tienen destino
   en Pasaporte —109 de 111—. Una fila sin enlace no enseña un hueco. */
.emb-item__pais {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.emb-item__bandera {
  flex-shrink: 0;
  font-size: 1.05rem;
  line-height: 1;
  /* En Windows no hay glifo de bandera y Chrome pinta las dos letras. Se deja
     sitio para eso sin que descuadre la fila. */
  min-width: 1.35rem;
}

.emb-item__nombre {
  min-width: 0;
}

.emb-item__puente {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.35rem;
  padding: 0.22rem 0.5rem 0.22rem 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--emb-rojo) 30%, transparent);
  background: color-mix(in srgb, var(--emb-rojo) 6%, #ffffff);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--emb-tinta);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.emb-item__puente svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: none;
  stroke: var(--emb-rojo);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.emb-item__puente:hover,
.emb-item__puente:active,
.emb-item__puente:focus-visible {
  border-color: color-mix(in srgb, var(--emb-rojo) 60%, transparent);
  background: color-mix(in srgb, var(--emb-rojo) 12%, #ffffff);
}

@media (prefers-reduced-motion: reduce) {
  .emb-item__puente {
    transition: none;
  }
}

/* —— 25 ago 2026 · Segunda vuelta: la ficha completa ————————————————
   El módulo pasa de listín a herramienta. Cada país es ahora una ficha que se
   abre: dentro va lo que evita el viaje en balde —horario, sección consular,
   teléfono, correo, embajador—. Cerrada enseña lo mínimo para decidir: país,
   dirección y si está abierto ahora mismo. */

.emb-item {
  padding: 0;
  border-bottom: 1px solid var(--emb-linea);
}

.emb-item__cab {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "pais flecha" "dir flecha" "estado flecha";
  align-items: center;
  gap: 0.15rem 0.5rem;
  width: 100%;
  padding: 0.7rem 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.emb-item__pais { grid-area: pais; }
.emb-item__dir {
  grid-area: dir;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.45;
  color: var(--emb-tinta-suave);
}

.emb-item__flecha {
  grid-area: flecha;
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: var(--emb-tinta-suave);
  stroke-width: 2;
  stroke-linecap: round;
  transition: transform 0.18s ease;
}

.emb-item.is-open .emb-item__flecha { transform: rotate(180deg); }

.emb-tipo {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--emb-tinta-suave);
}

/* «Abierto ahora». Solo se pinta cuando el horario publicado se entiende
   entero (ver leerHorario en embajadas.js). Si el MINREX escribe algo con
   excepciones, no aparece nada: decir «abierto» de más cuesta un viaje. */
.emb-abierto {
  grid-area: estado;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.2rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
}

.emb-abierto__punto {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: currentColor;
}

.emb-abierto.es-si { color: #1a8a4a; }
.emb-abierto.es-no { color: var(--emb-tinta-suave); }

.emb-item__cuerpo {
  padding: 0.15rem 0 0.9rem;
}

.emb-dato {
  display: grid;
  grid-template-columns: 8.2rem 1fr;
  gap: 0.15rem 0.7rem;
  padding: 0.32rem 0;
  border-top: 1px solid color-mix(in srgb, var(--emb-linea) 60%, transparent);
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.45;
}

@media (max-width: 26rem) {
  .emb-dato { grid-template-columns: 1fr; }
}

.emb-dato__k {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--emb-tinta-suave);
  padding-top: 0.08rem;
}

.emb-dato__v { color: var(--emb-tinta); font-weight: 300; }
.emb-dato__v a { color: var(--emb-rojo); text-decoration: none; font-weight: 500; }
.emb-dato__v a:hover { text-decoration: underline; }
.emb-dato--suave .emb-dato__v { color: var(--emb-tinta-suave); }

.emb-desde { color: var(--emb-tinta-suave); font-size: 0.74rem; }

.emb-nota {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.65rem;
  border-radius: 0.6rem;
  background: var(--emb-fondo-suave);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 300;
  line-height: 1.45;
  color: var(--emb-tinta-suave);
}

.emb-item__cuerpo .emb-item__puente { margin-top: 0.6rem; }

/* —— Sin sede en La Habana ————————————————————————————————————————
   No es un descarte: es la respuesta a «¿dónde está la embajada de X?»
   cuando la respuesta es «aquí no hay». */
.emb-fuera {
  margin-top: 1.3rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--emb-linea);
}

.emb-fuera > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--emb-tinta-suave);
}

.emb-fuera > summary::-webkit-details-marker { display: none; }

.emb-fuera__n {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  font-size: 0.72rem;
}

.emb-fuera__ayuda {
  margin: 0.6rem 0 0.5rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 300;
  line-height: 1.45;
  color: var(--emb-tinta-suave);
}

.emb-fuera__lista { list-style: none; margin: 0; padding: 0; }

.emb-fuera__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.42rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--emb-linea) 60%, transparent);
  font-family: var(--font-body);
  font-size: 0.84rem;
}

.emb-fuera__item:last-child { border-bottom: 0; }
.emb-fuera__pais { font-weight: 500; color: var(--emb-tinta); }
.emb-fuera__donde { font-weight: 300; font-size: 0.78rem; color: var(--emb-tinta-suave); }

@media (prefers-reduced-motion: reduce) {
  .emb-item__flecha { transition: none; }
}

/* ——— 27 ago 2026 · Las dos puertas y el buscar-primero ————————————
 *
 * Decisión de Fidel: «dos entradas claras, con una cabecera que explica
 * brevemente». La portada del módulo deja de tener listado: solo la cabecera
 * y dos botones grandes. Y dentro de cada puerta no se despliega nada hasta
 * que se escribe.
 *
 * Las puertas son <a>, no <button> con JS: son navegación de verdad, así que
 * se pueden abrir en otra pestaña, copiar el enlace y volver atrás. Un botón
 * con `location.href` rompe las tres cosas.
 *
 * `min-height: 44px` en la línea de la puerta viene del 21 de agosto —el
 * mínimo que se toca sin fallar en un móvil— y aquí sobra de largo, pero se
 * deja escrito para que nadie lo apriete sin saber de dónde salía. */

.emb-puertas {
  display: grid;
  gap: 0.7rem;
  margin-top: 1.1rem;
}

.emb-puerta {
  position: relative;
  display: grid;
  gap: 0.28rem;
  padding: 1rem 2.4rem 1rem 1rem;
  min-height: 44px;
  border: 1px solid var(--emb-linea);
  border-radius: 14px;
  background: #ffffff;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.emb-puerta:hover,
.emb-puerta:focus-visible {
  border-color: var(--emb-rojo);
  box-shadow: 0 8px 22px rgba(18, 22, 28, 0.08);
  transform: translateY(-1px);
}

.emb-puerta__t {
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--emb-tinta);
  line-height: 1.25;
}

.emb-puerta__n {
  font-size: 0.95rem;
  color: var(--emb-tinta);
}

.emb-puerta__n strong {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--emb-rojo);
  margin-right: 0.28rem;
}

.emb-puerta__d {
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--emb-tinta-suave);
}

.emb-puerta__d strong {
  font-weight: 600;
  color: var(--emb-tinta);
}

.emb-puerta__f {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: -0.55rem;
  fill: none;
  stroke: var(--emb-tinta-suave);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Consulados y oficinas dentro de la ficha de su país: Toronto y Montreal
 * cuelgan de Canadá, no son fichas sueltas. */
.emb-sub {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--emb-linea);
}

.emb-sub__t {
  margin: 0 0 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--emb-rojo);
}

/* La puerta cruzada. Sale solo cuando la búsqueda propia no encuentra nada y
 * el país sí está en la otra lista. Una línea, sin caja pesada: es una salida,
 * no un aviso. */
.emb-cruce__a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
  padding: 0.75rem 0.9rem;
  min-height: 44px;
  border: 1px solid var(--emb-rojo);
  border-radius: 12px;
  background: #fff;
  color: var(--emb-tinta);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
}

.emb-cruce__a svg {
  width: 1rem;
  height: 1rem;
  margin-left: auto;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--emb-rojo);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* El sello del módulo al que lleva el enlace. Pequeño y al lado del texto:
 * quien mira sabe a dónde va antes de tocar. Mismo criterio que los puentes
 * de Pasaporte y Envíos. */
.emb-item__puente-icono {
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
  object-fit: contain;
}

/* Un puente con dos renglones: qué es, y para qué sirve. El segundo va más
 * pequeño y apagado — es la explicación, no el enlace. */
.emb-item__puente-sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--emb-tinta-suave);
}