/**
 * Estilos del módulo Pasaporte.
 *
 * Se apoya en tokens.css y hub.css. Aquí solo lo específico de Pasaporte.
 *
 * Dirección visual (10 ago 2026, ajuste bandera):
 *   - Superficies neutras navy + blanco tipográfico
 *   - Reflejo/borde: --pasaporte-blue (azul de bandera, levantado para UI)
 *   - Logo / sello: --pasaporte-red (rojo del icono P)
 *   - Sin anillos en el buscador; sí en el enlace al documento
 * El tipo de acceso se distingue por icono y texto, nunca por semáforo (D-2).
 */

/* —— Tarjeta: fondo plano; destello y borde en azul bandera (suave) —— */
.card-moment--pasaporte {
  position: relative;
  overflow: visible; /* deja escapar el desplegable de sugerencias */
  margin-bottom: 0.5rem;
  background: var(--navy-deep);
  border: 1px solid color-mix(in srgb, var(--pasaporte-blue) 22%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pasaporte-blue) 6%, transparent);
}

.card-moment--pasaporte::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.15rem;
  right: 1.15rem;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--pasaporte-blue) 55%, white),
    transparent
  );
  opacity: 0.85;
  pointer-events: none;
  z-index: 2;
}

/* Sello con el icono propio del módulo (10 ago 2026), mismo patrón que
   Legal/Aduana pero con el icono de identidad en vez del logo genérico. */
.card-moment--pasaporte .card-moment__seal {
  width: 2.5rem;
  height: 2.5rem;
  top: 0.75rem;
  right: 0.75rem;
}

/* —— Encabezado editorial —— */
.pas-hero {
  margin: 0.15rem 0 0.95rem;
  padding-right: 2.35rem; /* deja aire para el sello */
}

.pas-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.4rem;
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--pasaporte-blue) 58%, var(--on-surface-muted));
}

.pas-hero__flag {
  font-size: 0.85rem;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}

.pas-hero__title {
  margin: 0 0 0.45rem;
  font-family: var(--font-headline);
  font-size: clamp(1.35rem, 5.5vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: #ffffff;
}

.pas-hero__subtitle {
  margin: 0;
  max-width: 28rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.5;
  color: var(--on-surface-muted);
}

.pas-block {
  margin-bottom: 1.15rem;
}

/* El buscador sigue al subtítulo sin pregunta intermedia. */

/* —— Ficha del documento: segunda CTA (misma fuerza ámbar que el buscador). —— */
.pas-doc-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.15rem;
  margin: 0 0 1rem;
  /* "Entre líneas" (12 ago 2026): dos hairlines finas enmarcan la fila como
     una entrada tradicional. Sustituye al radar azul + punto rojo. */
  border-top: 1px solid color-mix(in srgb, var(--pasaporte-blue) 22%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--pasaporte-blue) 22%, transparent);
  color: var(--on-surface-muted);
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}

@media (hover: hover) {
  .pas-doc-link:hover {
    border-color: color-mix(in srgb, var(--pasaporte-blue) 42%, transparent);
  }
}

/* Icono del pasaporte en cuadro redondeado (12 ago 2026): sustituye al radar
   azul + punto rojo. La entrada se señala ahora "entre líneas" (.pas-doc-link)
   + subrayado animado del título. */
.pas-doc-link__mark {
  position: relative;
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
  border-radius: 0.42rem;
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 1px color-mix(in srgb, #ffffff 8%, transparent);
}

.pas-doc-link__mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* (Radar de anillos retirado el 12 ago 2026 — ver .pas-doc-link.) */

.pas-doc-link__copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.pas-doc-link__title {
  position: relative;
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-headline);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--on-surface);
}

/* Subrayado con barrido de luz suave -> señala "esto es una entrada/enlace"
   (12 ago 2026). Reemplaza al punto rojo + radar. */
.pas-doc-link__title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--pasaporte-blue) 55%, transparent),
    transparent
  );
  background-size: 220% 100%;
  animation: pas-doc-link-underline 5s ease-in-out infinite;
}

@keyframes pas-doc-link-underline {
  0% {
    background-position: 120% 0;
    opacity: 0.12;
  }
  50% {
    background-position: -20% 0;
    opacity: 0.6;
  }
  100% {
    background-position: 120% 0;
    opacity: 0.12;
  }
}

/* (Punto rojo pulsante retirado el 12 ago 2026.) */

@media (prefers-reduced-motion: reduce) {
  .pas-doc-link__title::after {
    animation: none;
    opacity: 0.6;
  }
}

.pas-doc-link__teaser {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--on-surface-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pas-doc-link__chevron {
  width: 0.95rem;
  height: 0.95rem;
  margin-left: auto;
  stroke: var(--on-surface-muted);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

@media (hover: hover) {
  .pas-doc-link:hover {
    color: var(--on-surface);
  }
  .pas-doc-link:hover .pas-doc-link__mark {
    border-color: color-mix(in srgb, var(--pasaporte-blue) 70%, transparent);
    box-shadow: 0 0 11px 2px color-mix(in srgb, var(--pasaporte-blue) 32%, transparent);
  }
}


/* —— Buscador de destino —— */
.pas-search-field {
  position: relative;
}

/* Lupa: sin anillos (pedido 10 ago 2026). Solo icono neutro. */
.pas-search-mark {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  z-index: 1;
  width: 1.35rem;
  height: 1.35rem;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  pointer-events: none;
}

.pas-search-field__icon {
  width: 1.05rem;
  height: 1.05rem;
  stroke: var(--on-surface-muted);
  fill: none;
  stroke-width: 2;
}

.pas-search {
  width: 100%;
  padding: 0.9rem 1rem 0.9rem 2.85rem;
  background: color-mix(in srgb, var(--navy-deep) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-surface) 22%, transparent);
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--on-surface);
  outline: none;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.pas-search:focus {
  border-color: color-mix(in srgb, var(--pasaporte-blue) 48%, transparent);
  background: color-mix(in srgb, var(--navy) 35%, var(--navy-deep));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pasaporte-blue) 14%, transparent);
}

.pas-search-field:focus-within .pas-search-field__icon {
  stroke: color-mix(in srgb, var(--pasaporte-blue) 55%, var(--on-surface));
}

.pas-search:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* 22 ago 2026: la pista solo aparece cuando tiene algo que decir —cargando o
   un fallo—. En reposo se queda vacía, y un elemento vacío con margen deja un
   hueco que se lee como un descuido. */
.pas-search-hint:empty {
  display: none;
}

.pas-search-hint {
  margin: 0.5rem 0 0;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.5;
  color: var(--on-surface-muted);
}

.pas-suggestions {
  position: absolute;
  z-index: 5;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--navy-deep);
  border: 1px solid color-mix(in srgb, var(--pasaporte-blue) 18%, transparent);
  border-radius: 0.9rem;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  max-height: 16rem;
  overflow-y: auto;
}

.pas-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: none;
  border-radius: 0.6rem;
  background: transparent;
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.pas-suggestion:hover,
.pas-suggestion:focus-visible {
  background: color-mix(in srgb, var(--selection) 14%, transparent);
}

.pas-suggestion__region {
  font-size: 0.72rem;
  color: var(--on-surface-muted);
}

/* —— Veredicto —— el dato protagonista, resuelto sin cambiar de pantalla —— */
.pas-veredicto-slot:empty {
  display: none;
}

.veredicto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 1.1rem;
  margin-bottom: 1rem;
  background: color-mix(in srgb, var(--navy-deep) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-surface) 12%, transparent);
  border-left-width: 3px;
  border-radius: 1rem;
}

.card-moment--pasaporte .veredicto {
  margin-bottom: 0;
}

.veredicto--libre {
  border-left-color: #3dcf8e;
}

.veredicto--tramite {
  border-left-color: var(--amber);
}

.veredicto--neutro {
  border-left-color: color-mix(in srgb, var(--on-surface) 28%, transparent);
}

.veredicto__pais {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-family: var(--font-headline);
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
}

.pas-hero__title.veredicto__pais {
  font-size: clamp(1.35rem, 5.5vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: #ffffff;
}

.pas-flag {
  font-size: 1.25em;
  line-height: 1;
  flex-shrink: 0;
}

.pas-flag--sm {
  font-size: 1.05em;
  margin-right: 0.35rem;
}

.veredicto__pais-nombre {
  min-width: 0;
}

.veredicto__perfil {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.4;
  color: var(--on-surface-muted);
}

.pas-suggestion__nombre {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

/* Colorimetría del veredicto (tech sencillo, 6 ago 2026):
   - Verde: libre acceso (sin_visa). Cumples condiciones del país con el pasaporte.
   - Ámbar: requiere trámite (llegada / electrónica / consular). Es alerta, no
     prohibición — "puedes ir, con proceso".
   - Neutro: sin confirmar o no aplica.
   No usamos rosa (--selection): en el HUB es solo selección activa.
   No usamos rojo: un semáforo rojo mentiría ("no puedes ir"). */
.veredicto__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.75rem;
  border-radius: 0.55rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.veredicto__badge--libre {
  background: color-mix(in srgb, #3dcf8e 14%, transparent);
  border: 1px solid color-mix(in srgb, #3dcf8e 42%, transparent);
  color: #3dcf8e;
}

.veredicto__badge--tramite {
  background: color-mix(in srgb, var(--amber) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
  color: var(--amber);
}

.veredicto__badge--neutro {
  background: color-mix(in srgb, var(--on-surface) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-surface) 18%, transparent);
  color: var(--on-surface-muted);
}

.veredicto__icono {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

.veredicto__estancia {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--on-surface);
}

.veredicto__estancia strong {
  font-family: var(--font-headline);
  font-size: 1.25rem;
  color: var(--amber);
}

.veredicto__estancia-nota {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.55;
  color: var(--on-surface-muted);
}

/* Aviso de veredicto no confirmado: la etiqueta va encima del cuerpo,
   como hijo directo. Dentro de .pas-anclaje (fichas verificadas) no se toca. */
.veredicto > .certeza-tag {
  opacity: 1;
  color: var(--on-surface);
}

.veredicto__salida {
  align-self: stretch;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-control);
  border: 1px solid color-mix(in srgb, var(--on-surface) 18%, transparent);
  background: color-mix(in srgb, var(--neutral) 55%, transparent);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  transition: background 0.12s ease;
}

.veredicto__salida:active {
  background: color-mix(in srgb, var(--selection) 25%, var(--neutral));
}

/* —— Nivel de certeza —— el corazón editorial del módulo.
   Los cuatro estados se distinguen por el trazo del borde y el peso del
   texto, nunca por color: la información no puede depender de distinguir
   tonos. —— */
.certeza-tag {
  display: inline-block;
  width: fit-content;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--on-surface-muted);
  border: 1px solid color-mix(in srgb, var(--on-surface) 20%, transparent);
}

.certeza-tag--verificado {
  color: var(--on-surface);
  font-weight: 700;
  background: color-mix(in srgb, var(--on-surface) 8%, transparent);
}

.certeza-tag--referencia {
  border-style: dashed;
}

.certeza-tag--practica {
  border-style: dotted;
  font-style: italic;
}

.certeza-tag--pendiente_verificar {
  border-style: dashed;
  opacity: 0.8;
}

/* —— Anclaje: certeza, fecha de revisión y las fuentes que sostienen el dato.
   Un dato puede apoyarse en más de una fuente y se muestran todas: elegir una
   y ocultar el resto sería decidir por el usuario cuál le conviene creer. —— */
.pas-anclaje {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}

.pas-anclaje__fecha {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--on-surface-muted);
}

.fuente-lista {
  margin: 0.2rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.fuente-line {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.5;
}

.fuente-line__enlace {
  color: var(--on-surface);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, var(--on-surface) 40%, transparent);
}

.fuente-line__fecha {
  color: var(--on-surface-muted);
}

/* —— Estados: cargando, error, vacío —— */
.pas-estado {
  padding: 1.25rem 1.1rem;
  margin: 0 0 1rem;
  text-align: center;
  background: #0f1d30;
  border: 1px solid rgba(232, 238, 248, 0.06);
  border-radius: 1rem;
}

.pas-estado__titulo {
  margin: 0;
  font-family: var(--font-headline);
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
}

.pas-estado__texto {
  margin: 0.4rem 0 0;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.55;
  color: var(--on-surface-muted);
}

.pas-estado--cargando .pas-estado__titulo {
  color: var(--on-surface-muted);
  font-weight: 600;
}

.pas-estado--error {
  border-color: color-mix(in srgb, var(--on-surface) 18%, transparent);
}

/* —— Estado vacío de la entrada —— */





/* —— Foto del documento: sobria, discreta, sin caption llamativo. Vive
   dentro de la misma card-moment que el título — una sola caja, no una
   tarjeta debajo de otra —, así que sin margen inferior propio: lo da el
   padding de .card-moment. —— */
.pas-documento-foto {
  display: flex;
  justify-content: center;
  margin: 0;
}

.pas-documento-foto img {
  width: 100%;
  max-width: 12.5rem;
  height: auto;
  border-radius: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--amber) 16%, transparent);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45);
}

/* —— Resumen bajo la foto: chips tipo "tech" — casilla propia, punto de luz
   y texto fino en vez de un titular en negrita. En el flujo normal de la
   misma caja, no superpuesto (lo que flotaba encima de la foto no
   encajaba: demasiado pequeño, cortado por el borde de la imagen). Puntos
   puramente decorativos, mismo color los dos, para no leerse como semáforo
   de estado (misma regla D-2 del veredicto de viaje). —— */
.pas-doc-resumen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.95rem;
  border-top: 1px solid color-mix(in srgb, var(--on-surface) 10%, transparent);
}

.pas-doc-resumen[hidden] {
  display: none;
}

.pas-doc-resumen__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--navy-deep) 65%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-surface) 16%, transparent);
  font-family: var(--font-headline);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--on-surface-muted);
  white-space: nowrap;
}

.pas-doc-resumen__punto {
  width: 0.4rem;
  height: 0.4rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--amber);
  box-shadow: 0 0 4px 1px color-mix(in srgb, var(--amber) 55%, transparent);
}

/* —— Panel de contenido (ficha del documento cubano) —— */
.pas-panel {
  padding: 1.1rem;
  margin-bottom: 1rem;
  background: #0f1d30;
  border: 1px solid rgba(232, 238, 248, 0.06);
  border-radius: 1rem;
}

.pas-panel__titulo {
  margin: 0.35rem 0 0.4rem;
  font-family: var(--font-headline);
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
}

.pas-panel__titulo--en-acordeon {
  margin-top: 0;
}

.pas-panel__texto {
  margin: 0 0 0.6rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.55;
  color: var(--on-surface-muted);
}

/* Variante para texto que sigue inmediatamente a un section-label, sin el
   hueco pensado para cuando va debajo de un título (pas-panel__titulo). */
.pas-panel__texto--bajo-etiqueta {
  margin-top: 0.35rem;
}

/* —— Campos extra de la ficha de destino (tránsito, acceso condicional,
   vigencia, práctica). Viven dentro de la misma tarjeta: mismo borde
   izquierdo, mismo tamaño de título. Un campo vacío no se pinta, así que
   tampoco queda un título hueco ni una raya suelta. —— */
.pas-ficha-campo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.85rem 0 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid color-mix(in srgb, var(--on-surface) 12%, transparent);
}

.pas-ficha-campo--alerta {
  border-top-color: var(--amber);
}

.pas-ficha-campo--alerta > .pas-panel__texto {
  color: var(--on-surface);
}

.pas-ficha-campo--practica {
  border-top-style: dotted;
}

.pas-ficha-campo .pas-panel__texto {
  margin-bottom: 0;
}

.pas-dato__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  align-self: stretch;
}

.pas-dato__item + .pas-dato__item {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid color-mix(in srgb, var(--on-surface) 10%, transparent);
}

.pas-dato__base {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.55;
  color: var(--on-surface-muted);
  font-style: italic;
}

/* —— Acordeón de la ficha del documento: titulares que se seleccionan,
   contenido que se revela. `<details>` nativo — sin JS propio, teclado y
   lector de pantalla lo entienden solos. Reemplaza el bloque largo de texto
   corrido por ventanas independientes. —— */
.pas-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.pas-accordion__item {
  background: #0f1d30;
  border: 1px solid rgba(232, 238, 248, 0.06);
  border-radius: 1rem;
  overflow: hidden;
}

.pas-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.85rem 1.1rem;
  font-family: var(--font-headline);
  font-size: 0.88rem;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
  list-style: none;
}

.pas-accordion__trigger::-webkit-details-marker {
  display: none;
}

.pas-accordion__trigger::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  flex-shrink: 0;
  border-right: 2px solid var(--on-surface-muted);
  border-bottom: 2px solid var(--on-surface-muted);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.pas-accordion__item[open] > .pas-accordion__trigger::after {
  transform: rotate(-135deg);
}

.pas-accordion__panel {
  padding: 0 1.1rem 1rem;
}

.pas-accordion__panel .pas-panel__texto--bajo-etiqueta:first-child {
  margin-top: 0;
}

@media (hover: hover) {
  .pas-accordion__trigger:hover {
    background: color-mix(in srgb, var(--selection) 6%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pas-accordion__trigger::after {
    transition: none;
  }
}

/* —— Textos de servicio —— */
.pas-breadcrumb {
  margin: 0 0 0.85rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
}

.pas-actualizado {
  margin: 0 0 1rem;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--on-surface-muted);
}

.pas-disclaimer {
  margin: 0.15rem auto 0;
  max-width: 28rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.55;
  color: var(--on-surface-muted);
}

.pas-disclaimer strong {
  color: color-mix(in srgb, var(--on-surface) 90%, var(--pasaporte-blue));
  font-weight: 600;
}

/* Estado de la cobertura: cuántos destinos están anclados a fuente oficial.
   No nombra proveedores — el modelo de datos es propio y cada dato cita sus
   fuentes en su ficha. */
.pas-atribucion {
  margin: 0 auto;
  max-width: 30rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.55;
  color: var(--on-surface-muted);
}

.pas-atribucion:empty {
  display: none;
}

/* —— .tool-card__mark: consolidada en hub.css (8 ago 2026, tercer uso con
   Envíos, regla de tres de HERIZO_PRODUCT_PRINCIPLES.md §5.1). No
   redefinir aquí. —— */

@media (prefers-reduced-motion: reduce) {
  .pas-search,
  .pas-suggestion,
  .veredicto__salida {
    transition: none;
  }

}

/* ── «Cómo funciona» ───────────────────────────────────────────────────────
 *
 * 22 ago 2026, a petición de Fidel: el mismo botón que Legal, en el mismo
 * sitio —debajo del título— y por el mismo motivo. Allí lo pidieron dos
 * personas ajenas probando la página: el cliente entra, se encuentra con qué
 * es esto, lo lee y luego sigue.
 *
 * Se copia la FORMA del de Legal a propósito: dos botones que hacen lo mismo
 * en dos módulos tienen que verse igual, o cada uno se lee como una cosa
 * distinta. Lo único que cambia es el color, que es el del módulo
 * (--pasaporte-blue), igual que allí es el de Legal. */
/* 22 ago 2026, corrección de Fidel viéndolo en pantalla: «el botón recae
   sobre el documento de abajo y no mantiene una distancia correcta con las
   letras de encima». Tenía razón: llevaba 0,85rem arriba y 0,25 abajo, o sea
   que estaba pegado al buscador y flotando respecto al subtítulo. Ahora el
   mismo aire por los dos lados, y el botón se lee como una cosa suelta entre
   dos, que es lo que es. */
.pas-como-links {
  display: flex;
  margin: 1.15rem 0;
}

.pas-como-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem 0.35rem 0.35rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--pasaporte-blue) 38%, transparent);
  background: color-mix(in srgb, var(--pasaporte-blue) 12%, transparent);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 0.82rem;
  /* 22 ago 2026, indicación de Fidel: «letra legible, pero fina y tech». El
     600 la ponía gorda al lado del subtítulo, que va en 400. Con 500 y un
     poco de aire entre letras se lee igual de bien y pesa menos. */
  font-weight: 500;
  letter-spacing: 0.015em;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.pas-como-btn:active,
.pas-como-btn.is-open {
  border-color: color-mix(in srgb, var(--pasaporte-blue) 75%, white);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--pasaporte-blue) 55%, #0a1628) 0%,
    color-mix(in srgb, var(--pasaporte-blue) 22%, #0a1628) 100%
  );
  color: #fff;
  transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
  .pas-como-btn { transition: none; }
  .pas-como-btn:active, .pas-como-btn.is-open { transform: none; }
}

.pas-como-btn__icon {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: var(--pasaporte-blue);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  flex-shrink: 0;
}

.pas-como {
  margin: 0 0 0.9rem;
  padding: 0.85rem 0.95rem;
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--pasaporte-blue) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--pasaporte-blue) 20%, transparent);
}

.pas-como ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.pas-como li {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--on-surface-muted);
}

.pas-como strong {
  color: var(--on-surface);
  font-weight: 500;
}

/* La línea que antes vivía repetida en cada ficha: aquí se dice una vez. */
.pas-como__aviso {
  margin: 0.8rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid color-mix(in srgb, var(--pasaporte-blue) 20%, transparent);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--on-surface-muted);
}