/* Panel del operador — estilos mínimos. Paleta de marca: navy + ámbar sobre
   neutros. Texto grande porque el guía a menudo lo usa en el móvil, con prisa. */
:root {
  --navy: #0e2a47;
  --ambar: #f5a623;
  --ambar-oscuro: #d98e12;
  --fondo: #f4f6f9;
  --superficie: #ffffff;
  --linea: #d8dee6;
  --tinta: #16232f;
  --atenuado: #5b6b7a;
  --rojo: #c0392b;
}

* { box-sizing: border-box; }

/* El atributo `hidden` debe ganar SIEMPRE: si no, una regla con `display`
   (p. ej. .centro { display:flex } o .campo { display:flex }) lo anula y el
   elemento "oculto" se queda visible. Bug real que tapaba la transición de login. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--fondo);
  color: var(--tinta);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.4;
}

.vista { min-height: 100%; }
.centro {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.tarjeta {
  width: 100%;
  max-width: 380px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.marca {
  margin: 0;
  color: var(--navy);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.4px;
}
.subtitulo { margin: -8px 0 8px; color: var(--atenuado); font-size: 18px; }

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo span { font-size: 16px; color: var(--atenuado); font-weight: 600; }
.campo input {
  padding: 14px 16px;
  border: 1.5px solid var(--linea);
  border-radius: 12px;
  font-size: 20px;
  color: var(--tinta);
  background: #fff;
}
.campo input:focus { outline: none; border-color: var(--navy); }

.boton {
  padding: 16px;
  border: none;
  border-radius: 12px;
  background: var(--ambar);
  color: var(--navy);
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
}
.boton:hover { background: var(--ambar-oscuro); }
.boton:disabled { opacity: 0.6; cursor: default; }

.boton-texto {
  border: none;
  background: none;
  color: var(--atenuado);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

.error {
  margin: 0;
  color: var(--rojo);
  font-size: 17px;
  font-weight: 600;
}

/* Barra superior de la app */
.barra {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--navy);
  color: #fff;
}
.marca-pequena { font-weight: 800; font-size: 20px; letter-spacing: -0.2px; }
.hueco { flex: 1; }
.quien { color: #cdd8e4; font-size: 16px; }
.barra .boton-texto { color: #cdd8e4; }

.contenido { padding: 24px; max-width: 760px; margin: 0 auto; }
.marcador { color: var(--atenuado); }

.fila-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.fila-titulo h2 { margin: 0; color: var(--navy); font-size: 26px; }

.boton-compacto { padding: 12px 18px; font-size: 17px; }
.boton-texto-navy { color: var(--navy); }
.boton-peligro-texto { color: var(--rojo); }

/* Pestañas Itinerario / Avisos dentro de un viaje */
.pestanas {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  border-bottom: 2px solid var(--linea);
}
.pestana {
  border: none;
  background: none;
  padding: 10px 18px;
  font-size: 18px;
  font-weight: 700;
  color: var(--atenuado);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}
.pestana.activa {
  color: var(--navy);
  border-bottom-color: var(--ambar);
}

/* Archivar viaje: discreto al pie, con confirmación inline */
.zona-borrar {
  margin-top: 40px;
  border-top: 1px solid var(--linea);
  padding-top: 16px;
}
.borrar-encurso {
  background: #FDECEA;
  border-left: 4px solid var(--rojo);
  color: #8a1c12;
  padding: 10px 12px;
  border-radius: 6px;
}
.borrar-futuro { color: var(--atenuado); }
/* Qué verá el viajero. Informa, no alarma: va en gris y algo menor que el
   párrafo de la cascada, que es el que sí describe lo irreversible. */
.borrar-viajeros { color: var(--atenuado); font-size: 15.5px; }
.borrar-campo { margin: 14px 0; }

/* Lista de viajes */
.lista-viajes { display: flex; flex-direction: column; gap: 14px; }
.viaje {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 14px;
  padding: 18px;
}
.viaje-info { flex: 1; min-width: 0; }
.viaje-info h3 { margin: 0 0 4px; font-size: 21px; color: var(--tinta); }
.viaje-meta { margin: 0; color: var(--atenuado); font-size: 16px; }
.viaje-estado { margin: 4px 0 0; font-size: 15px; color: var(--atenuado); }

.viaje-codigo, .codigo-grande {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: #fff7ea;
  border: 1.5px solid var(--ambar);
  border-radius: 12px;
  padding: 10px 16px;
}
.viaje-codigo .etq, .codigo-grande .etq {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--atenuado);
  font-weight: 700;
}
.viaje-codigo strong { font-size: 26px; letter-spacing: 3px; color: var(--navy); }

/* Formulario de crear viaje */
.formulario { display: flex; flex-direction: column; gap: 16px; }
.fila-campos { display: flex; gap: 14px; }
.fila-campos .campo { flex: 1; }
.formulario input, .formulario select {
  padding: 14px 16px;
  border: 1.5px solid var(--linea);
  border-radius: 12px;
  font-size: 19px;
  color: var(--tinta);
  background: #fff;
  width: 100%;
}
.formulario input:focus, .formulario select:focus { outline: none; border-color: var(--navy); }
.pista { margin: 0; color: var(--atenuado); font-size: 15px; line-height: 1.35; }

/* Confirmación de viaje creado */
.creado { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.creado h2 { margin: 0; color: var(--navy); }
.acciones-codigo { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
/* Botones del cambio de clave: a la izquierda, alineados con los campos del
   formulario (a diferencia de .acciones-codigo, que va centrada). */
.acciones-clave { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.bloque-codigo { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.codigo-grande { padding: 20px 32px; }
.codigo-grande strong { font-size: 48px; letter-spacing: 8px; color: var(--navy); }

/* Editor de itinerario */
.editor { margin-top: 24px; }
.editor > h3 { color: var(--navy); font-size: 22px; margin: 0 0 12px; }
.editor .campo { margin-bottom: 14px; }
.editor .campo span { font-size: 15px; }
.editor input, .editor select {
  padding: 12px 14px;
  border: 1.5px solid var(--linea);
  border-radius: 10px;
  font-size: 18px;
  color: var(--tinta);
  background: #fff;
  width: 100%;
}
.editor input:focus, .editor select:focus { outline: none; border-color: var(--navy); }
.campo-ancho { flex: 2; }

.dia {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--navy);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.dia-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.dia-num { font-weight: 800; color: var(--navy); font-size: 19px; }
.del-dia { color: var(--rojo); }

.actividades { display: flex; flex-direction: column; gap: 12px; margin: 8px 0; }
.actividad { display: flex; flex-direction: column; gap: 6px; }
.act-fila { display: flex; gap: 8px; align-items: center; }
/* Sangrada bajo la hora: se lee como una nota de la actividad de arriba y no
   como otra actividad. */
.act-fila-2 { padding-left: 118px; }
.actividad .a-hora { width: 110px; flex: none; }
.actividad .a-titulo { flex: 1; }
.actividad .a-tipo { width: 140px; flex: none; }
.actividad .a-etiqueta { width: 140px; flex: none; }
.actividad .a-detalle { flex: 1; }
.actividad .act-fila-2 input { font-size: 15px; padding: 7px 10px; }
/* Etiqueta apagada = la actividad tiene hora exacta y la etiqueta no pinta
   nada. Se atenúa en vez de esconderse para que el operador vea que el hueco
   existe y por qué no puede escribir en él. */
.actividad .a-etiqueta:disabled { opacity: 0.4; cursor: not-allowed; background: var(--fondo); }
.actividad .del-act { color: var(--rojo); font-size: 20px; padding: 0 6px; }

.ambar-suave { background: #fff7ea; color: var(--navy); border: 1.5px solid var(--ambar); }
.ambar-suave:hover { background: #ffeccb; }

.guardar-barra {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.editor-msg { margin: 0; font-size: 16px; font-weight: 600; }
.editor-msg.ok { color: #1e7a46; }
.editor-msg.error { color: var(--rojo); }

/* Sección de avisos */
.avisos-sec { margin-top: 32px; border-top: 1px solid var(--linea); padding-top: 20px; }
.avisos-sec > h3 { color: var(--navy); font-size: 22px; margin: 0 0 12px; }
.avisos-sec .sub { color: var(--atenuado); font-size: 17px; margin: 24px 0 10px; }
.formulario textarea {
  padding: 12px 14px;
  border: 1.5px solid var(--linea);
  border-radius: 10px;
  font-size: 18px;
  font-family: inherit;
  color: var(--tinta);
  background: #fff;
  width: 100%;
  resize: vertical;
}
.formulario textarea:focus { outline: none; border-color: var(--navy); }

.aviso {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.aviso-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.aviso-cuando { color: var(--atenuado); font-size: 15px; }
/* El "Borrar…" al borde derecho de la cabecera de cada aviso */
.aviso-cab .borrar-aviso { margin-left: auto; font-size: 15px; padding: 0; }
.borrar-confirm { margin-top: 12px; }
.aviso-titulo { margin: 0; font-weight: 700; font-size: 18px; }
.aviso-cuerpo { margin: 2px 0 0; color: var(--atenuado); font-size: 16px; }

.badge {
  font-size: 13px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.3px;
}
.estado-pendiente { background: #fff7ea; color: #a5710a; border: 1px solid var(--ambar); }
.estado-enviado { background: #e9f7ef; color: #1e7a46; border: 1px solid #9ad2b1; }
.estado-error { background: #fdecea; color: var(--rojo); border: 1px solid #e6a89f; }
.badge-critico { background: #fdecea; color: var(--rojo); border: 1px solid #e6a89f; }

/* Desplegable de acuses de recibo (quién sí / quién no) */
.acuses { margin-top: 10px; }
.boton-acuses { padding: 0; }
.acuses-detalle { margin-top: 8px; }
.acuses-resumen { margin: 0 0 6px; font-weight: 700; font-size: 16px; }
.ac-sub { margin: 10px 0 4px; font-weight: 600; color: var(--atenuado); font-size: 15px; }
.ac-lista { list-style: none; margin: 0; padding: 0; }
.ac-lista li { padding: 4px 0; font-size: 16px; }
.ac-si { color: #1e7a46; }
/* Estado intermedio (Tarea 7): lo vio y no confirmó. Ni verde ni rojo. */
.ac-visto { color: #8a5a00; }
.ac-no { color: var(--rojo); }
.ac-hora { color: var(--atenuado); font-size: 14px; font-weight: 400; }
/* Aviso normal (Tarea 9): recuerda que "abierto" NO es un acuse de recibo. */
.ac-matiz { margin: 0 0 8px; color: var(--atenuado); font-size: 14px; font-style: italic; }
/* Hora que mandó un móvil con el reloj desajustado: se muestra, pero marcada. */
.ac-dudosa { font-style: italic; text-decoration: underline dotted; cursor: help; }

/* Lista de viajeros: UNA LÍNEA cada uno. Con 40+ en un viaje, lo que importa es
   poder barrerla entera sin scroll; el detalle de cada uno va en el `title`. */
.vj-lista { list-style: none; margin: 0 0 4px; padding: 0; }
.vj {
  display: grid;
  /* Columnas fijas para que la señal quede alineada y se lea en vertical. */
  grid-template-columns: minmax(0, 1fr) 158px 118px;
  gap: 10px;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px solid var(--linea);
}
.vj:last-child { border-bottom: none; }
.vj:hover { background: var(--fondo); }
.vj-nombre {
  font-weight: 700;
  font-size: 16px;
  /* Un nombre largo recorta, no parte la fila en dos. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vj-senal { font-size: 14px; white-space: nowrap; }
/* Entró, pero todavía no ha abierto ningún aviso. Es un hecho, no un hueco:
   por eso va en gris de texto normal y no en el rojo de "no ha confirmado". */
.vj-acceso { color: var(--atenuado); }
.vj-accion { font-size: 14px; text-align: right; padding: 0; }
/* De baja: apagado, no tachado. Sigue siendo alguien que estuvo aquí. */
.vj-baja .vj-nombre { color: var(--atenuado); font-weight: 600; }

/* El matiz que evita que "dar de baja" se lea como "expulsar". Plegado para no
   comerse la pantalla, pero con el titular SIEMPRE a la vista; además el
   confirm() del botón lo repite antes de hacer nada. */
.vj-aviso {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff7ea;
  border: 1px solid var(--ambar);
  font-size: 15px;
  line-height: 1.45;
}
.vj-aviso summary { cursor: pointer; }
.vj-aviso p { margin: 10px 0 0; }

/* Bloque 1: equivalencia horaria en vivo (§7.2). Lo que se lee antes de
   programar: a qué hora suena ALLÍ y qué hora es esa AQUÍ. */
.equivalencia {
  margin: 2px 0 4px;
  padding: 10px 12px;
  border-radius: 10px;
  border-left: 4px solid var(--navy);
  background: rgba(14, 42, 71, .06);
  font-size: 15px;
  line-height: 1.5;
}
.equivalencia span { display: block; }
.eq-destino { font-weight: 600; }
.eq-tuya { color: var(--atenuado); }
.eq-paso { margin-top: 4px; color: var(--rojo); font-weight: 600; }

/* Etiqueta de zona junto a los campos de fecha/hora y en la lista de avisos.
   Va en navy sobre fondo claro para que se lea como un dato, no como una
   aclaración menor: es la diferencia entre acertar y programar a las 3 de la
   madrugada del destino (§7.2). */
.etq-zona {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(14, 42, 71, .1);
  color: var(--navy);
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
  white-space: nowrap;
}
.aviso-zona { color: var(--atenuado); font-weight: 400; }

/* Bloques 2 y 3: cambiar nombre y teléfono del viaje */
.renombrar-caja {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 460px;
  margin-top: 8px;
  padding: 14px;
  border: 1px solid var(--linea);
  border-radius: 11px;
  background: var(--superficie);
}
.renombrar-caja input {
  padding: 9px 11px;
  font-size: 16px;
  font-family: inherit;
  border: 1px solid var(--linea);
  border-radius: 9px;
  background: var(--superficie);
  color: var(--tinta);
}
.renombrar-botones { display: flex; gap: 10px; align-items: center; }

/* Casilla "crítico": fila horizontal con el texto a la derecha del check */
.campo-check {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.campo-check input { width: 22px; height: 22px; margin-top: 2px; flex: none; }
.campo-check span { font-size: 15px; color: var(--atenuado); font-weight: 600; line-height: 1.35; }

/* Caja de envío instantáneo: destacada porque sale AHORA a todo el grupo */
.caja-ahora {
  background: #fff7ea;
  border: 1.5px solid var(--ambar);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 24px;
}
.sub-ahora { margin-top: 0 !important; color: var(--navy) !important; font-weight: 800; }
.boton-peligro { background: var(--ambar); color: var(--navy); }
.boton-peligro:hover { background: var(--ambar-oscuro); }

.confirmacion {
  background: #fff;
  border: 1.5px solid var(--ambar);
  border-radius: 12px;
  padding: 14px 16px;
}
.confirmacion p { margin: 0 0 12px; font-size: 17px; }
.confirm-botones { display: flex; gap: 12px; align-items: center; justify-content: flex-end; }

@media (max-width: 480px) {
  .fila-campos { flex-direction: column; }
  .viaje { flex-direction: column; align-items: stretch; }
  .viaje-codigo { flex-direction: row; justify-content: center; gap: 10px; }
  .act-fila { flex-wrap: wrap; }
  /* Sin sitio para la sangría: en móvil la segunda fila va a la izquierda. */
  .act-fila-2 { padding-left: 0; }
  .actividad .a-hora, .actividad .a-tipo { width: 100%; }
  /* En móvil no caben tres columnas: nombre + acción arriba, señal debajo.
     Dos líneas, que sigue siendo el límite. */
  .vj { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 0; }
  .vj-senal { grid-row: 2; grid-column: 1 / -1; }
}

/* ─── DOCUMENTOS (Parte B) ─────────────────────────────────────────────── */

.docs-sec { margin-top: 22px; }

/* El aviso de peso no es un error: cabe, pero conviene optimizarlo. Ámbar sobre
   fondo tenue, nunca ámbar como texto sobre blanco (§9: contraste). */
.pista-aviso {
  background: #fff6e5;
  border-left: 3px solid var(--ambar);
  padding: 8px 10px;
  border-radius: 4px;
  color: var(--tinta);
}

.doc-subir { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.doc-progreso {
  flex: 1 1 160px;
  height: 8px;
  background: var(--linea);
  border-radius: 999px;
  overflow: hidden;
}
.doc-barra {
  height: 100%;
  width: 0;
  background: var(--ambar);
  transition: width 0.15s linear;
}

.doc-uso { margin: 18px 0 6px; }
.uso-barra {
  height: 6px;
  background: var(--linea);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}
.uso-relleno { height: 100%; background: var(--navy); }

.doc-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: var(--superficie);
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.doc-datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.doc-datos strong { color: var(--navy); }
.doc-meta { font-size: 13px; color: var(--atenuado); }
.doc-acciones { display: flex; align-items: center; gap: 10px; }
.doc-acciones [disabled] { opacity: 0.35; cursor: default; }

/* "Antes de salir" se marca porque cambia DÓNDE se ve: ese documento sale
   además en la portada del itinerario, y el operador debe poder comprobarlo
   de un vistazo sin abrir nada. */
.etq-antes {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 11px;
  letter-spacing: 0.02em;
}

/* ─── BLOQUE PREVIO (Parte B2) ─────────────────────────────────────────── */

.previo-fila {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.previo-fila input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--linea);
  border-radius: 6px;
  font: inherit;
  color: var(--tinta);
  background: var(--superficie);
}
.previo-fila input:focus { outline: none; border-color: var(--navy); }

/* ─── IMPORTADOR DE ITINERARIO PEGADO ──────────────────────────────────── */

.importar {
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: var(--fondo);
  padding: 12px 16px;
  margin-bottom: 16px;
}
.importar > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--navy);
}
.importar > summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.importar .pista { margin: 10px 0; }
#imp-texto {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--linea);
  border-radius: 6px;
  font: inherit;
  font-size: 15px;
  line-height: 1.35;
  color: var(--tinta);
  background: var(--superficie);
  resize: vertical;
}
#imp-texto:focus { outline: none; border-color: var(--navy); }

.imp-previa { margin-top: 14px; }
.imp-resumen { margin: 0 0 8px; font-size: 16px; }

/* Rojo y no ámbar: es una advertencia, y el ámbar sobre blanco no contrasta. */
.imp-rojo {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-left: 4px solid var(--rojo);
  background: #fdf0ee;
  color: var(--rojo);
  font-size: 15px;
  font-weight: 600;
}
.imp-avisos {
  margin: 0 0 10px;
  padding-left: 22px;
  color: var(--atenuado);
  font-size: 15px;
}
.imp-nada { margin: 0 0 10px; color: var(--rojo); font-size: 16px; }
.imp-ejemplo {
  margin: 0 0 10px;
  padding: 10px 12px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 6px;
  font-size: 14px;
  white-space: pre-wrap;
  overflow-x: auto;
}

.imp-dias {
  margin: 0 0 12px;
  padding-left: 26px;
  max-height: 260px;
  overflow-y: auto;
  font-size: 15px;
}
.imp-dias li { margin-bottom: 3px; }
.imp-fecha { font-variant-numeric: tabular-nums; color: var(--atenuado); }
.imp-ciudad { font-weight: 600; margin: 0 6px; }
.imp-formatos {
  margin: 0 0 12px;
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: var(--superficie);
  padding: 8px 12px;
}
.imp-formatos > summary {
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
}
.imp-formatos > summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.imp-formatos .imp-ejemplo { background: var(--fondo); }
.imp-corregir { margin: 0 0 10px; }

/* ————————————————————————————————————————————————————————————————
 * El logo de la agencia (vista "Mi logo")
 * ———————————————————————————————————————————————————————————————— */
.marca-previa {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  margin: 4px 0 14px;
  padding: 14px;
  border: 1px dashed var(--linea);
  border-radius: 12px;
  /* Cuadros: un logo con fondo transparente sobre blanco liso no deja ver si
     el fondo es transparente o blanco, y en el PDF eso sí se nota. */
  background-color: var(--superficie);
  background-image:
    linear-gradient(45deg, #eef1f5 25%, transparent 25%, transparent 75%, #eef1f5 75%),
    linear-gradient(45deg, #eef1f5 25%, transparent 25%, transparent 75%, #eef1f5 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}
.marca-previa img { max-width: 260px; max-height: 90px; object-fit: contain; }
.marca-previa .marcador { margin: 0; text-align: center; }

/* ————————————————————————————————————————————————————————————————
 * El visor del PDF del itinerario (pestaña Herramientas).
 * El PDF ya viene hecho por pdfmake, así que aquí no hay nada de maquetación
 * de impresión: solo el marco donde se enseña y la barra de descarga.
 * ———————————————————————————————————————————————————————————————— */
.pdf-visor {
  margin: 14px 0 4px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  overflow: hidden;
  background: var(--superficie);
}
.pdf-visor-barra {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-bottom: 1px solid var(--linea);
}
.pdf-visor-nombre {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9rem;
  color: var(--atenuado);
  overflow-wrap: anywhere;
}
/* El enlace de descarga es un <a> y no un <button> porque `download` es lo que
   guarda el archivo sin subirlo a ningún sitio. Al no ser un botón le falta lo
   que el navegador da por hecho en uno: no es inline-block (y sin eso el padding
   de .boton no separa nada) y viene subrayado. */
.pdf-visor-barra a.boton {
  display: inline-block;
  flex: none;
  text-decoration: none;
}

/* Alto fijo: el PDF puede tener 20 páginas y no puede empujar la pestaña entera.
   75vh deja ver una página casi completa sin tapar el resto del panel. */
#pdf-marco {
  display: block;
  width: 100%;
  height: 75vh;
  min-height: 420px;
  border: 0;
  background: #f2f4f7;
}

/* El logo dentro de Herramientas, junto al botón del PDF */
.pdf-marca {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 10px 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: var(--superficie);
}
.pdf-logo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 60px;
  border: 1px dashed var(--linea);
  border-radius: 8px;
  background: var(--fondo);
}
.pdf-logo img { max-width: 108px; max-height: 50px; object-fit: contain; }
.pdf-sinlogo { color: var(--atenuado); font-size: 14px; }
.pdf-marca .pista { margin-bottom: 4px; }
.pdf-marca .boton-texto { font-size: 16px; padding: 0; }