/* ================= Clientes y viajeros (H2) ================= */
/* Todo bajo .clientes: la hoja de cada área no toca lo de las demás. tokens.css y portal.css se leen, no se editan. */
.clientes { --clientes-ambar: #8A6A2F; display: grid; gap: 18px; max-width: 1100px; }
.clientes h1 { margin: 0; font: italic 600 clamp(28px, 4vw, 40px)/1.1 var(--letra-titulo); }
.clientes__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.clientes--ficha .clientes__cabeza { display: grid; justify-content: start; gap: 6px; }
.clientes__buscar .campo { max-width: 520px; }
.clientes__filtro, .clientes__cargando, .clientes__nada, .clientes__cuenta, .clientes__ayuda { margin: 0; font-size: 14px; color: var(--gris); }
.clientes__filtro .enlace { margin-left: 6px; }

/* Las fichas del archivo: tarjetas con su número en la esquina, como un fichero de papel. */
.clientes__fichas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.clientes__ficha {
  position: relative; display: grid; gap: 4px; padding: 16px 18px 14px; border-radius: var(--radio-chico);
  background: var(--hoja); box-shadow: var(--sombra); color: var(--tinta); text-decoration: none;
  transition: transform var(--rapido) var(--suave), box-shadow var(--rapido) var(--suave);
}
.clientes__ficha:hover, .clientes__ficha:focus-visible {
  transform: translateY(-2px) rotate(-.3deg);
  box-shadow: 0 18px 30px -22px rgba(40, 30, 20, .7), 0 0 0 1px rgba(27, 36, 51, .1);
}
.clientes__numero { margin: 0; font: 500 11px var(--letra-codigo); letter-spacing: .14em; text-transform: uppercase; color: var(--clientes-ambar); }
.clientes__ficha .clientes__numero { position: absolute; top: 12px; right: 14px; }
.clientes__nombre { padding-right: 70px; font: 600 18px/1.25 var(--letra-titulo); overflow-wrap: anywhere; }
/* .clientes__contacto: el renglón de la ficha en la lista. (.clientes__datos es la tarjeta «Datos del cliente» de la ficha.) */
.clientes__contacto, .clientes__viajeros-cuenta, .clientes__proximo { font-size: 13.5px; color: var(--gris); overflow-wrap: anywhere; }

/* El semáforo del año de guardado: un sello chiquito y torcido, no un botón. Los tres pasan 4,5:1 sobre la hoja. */
.clientes__guardado {
  justify-self: start; margin-top: 6px; padding: 3px 9px; border: 1.5px solid currentColor; border-radius: 6px;
  font: 600 11px var(--letra-codigo); letter-spacing: .06em; transform: rotate(-1.2deg);
}
.clientes__guardado[data-semaforo="verde"] { color: var(--verde); }
.clientes__guardado[data-semaforo="amarillo"] { color: var(--clientes-ambar); }
.clientes__guardado[data-semaforo="rojo"] { color: var(--oxido); }

/* La hoja en blanco del archivo. */
.clientes__vacio { display: grid; justify-items: start; gap: 10px; max-width: 620px; padding: 34px 30px; border-radius: var(--radio); background: var(--hoja); box-shadow: var(--sombra); }
.clientes__vacio svg { width: 150px; height: auto; fill: none; stroke: var(--tinta); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.clientes__vacio .clientes__sello { stroke: var(--oxido); stroke-dasharray: 3 3; }
.clientes__vacio h2 { margin: 0; font: italic 600 24px var(--letra-titulo); }
.clientes__vacio p { margin: 0; color: var(--gris); }

/* La ficha. */
.clientes--ficha .tarjeta { max-width: none; }
.clientes__extension { margin: 0; font-size: 14px; color: var(--clientes-ambar); }
.clientes__par { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* El renglón del pasaporte, más corto (pedido del dueño, 25/9/2026): número, país y vencimiento en una fila. */
.clientes__tres { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.clientes__grupo { display: grid; gap: 14px; min-width: 0; margin: 4px 0 0; padding: 0; border: 0; }
.clientes__grupo legend { margin-bottom: 8px; padding: 0; font: 600 10px var(--letra-codigo); letter-spacing: .16em; text-transform: uppercase; color: var(--clientes-ambar); }
.clientes__casilla { display: flex; align-items: center; gap: 8px; font-size: 14px; }

/* Dieta y alergias como etiquetas, separadas por coma o Enter (pedido del dueño, 25/9/2026). */
.etiquetas__caja {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; padding: 6px 8px;
  border-radius: var(--radio-chico); background: var(--campo); box-shadow: inset 0 0 0 1px var(--borde-fuerte);
}
.etiquetas__caja:focus-within { box-shadow: inset 0 0 0 1.5px var(--laton), 0 0 0 4px rgba(200, 168, 108, .18); }
.etiquetas__caja input {
  flex: 1 1 90px; min-width: 90px; min-height: 28px; padding: 2px 4px; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; font: 400 14px var(--letra-texto); color: var(--tinta);
}
.etiquetas__chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 10px; border-radius: 999px;
  background: var(--hoja); box-shadow: inset 0 0 0 1px var(--borde-fuerte); font-size: 13.5px; white-space: nowrap;
}
.etiquetas__quitar { border: 0; background: transparent; padding: 2px; color: var(--gris); font-size: 15px; line-height: 1; cursor: pointer; }
.etiquetas__quitar:hover { color: var(--oxido); }

/* Viajero frecuente: un renglón chico por programa (pedido del dueño, 25/9/2026: «que el renglón sea más pequeño»). */
.clientes__frecuentes-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.clientes__frecuente { display: flex; align-items: center; gap: 8px; }
.clientes__frecuente .pais { flex: 2 1 0; min-width: 0; }
.clientes__frecuente-otro { cursor: text; }
.clientes__frecuente-numero { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 10px 12px; border: 0; border-radius: var(--radio-chico); background: var(--campo); box-shadow: inset 0 0 0 1px var(--borde-fuerte); font: 400 14px var(--letra-texto); color: var(--tinta); }
.clientes__frecuente-quitar { flex: none; padding: 4px 8px; font-size: 17px; line-height: 1; }
.clientes__botones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.clientes__peligro { color: var(--oxido); }
.clientes__boton-peligro { background: var(--oxido); color: #fff; }
.clientes__alerta { margin: 0; padding: 8px 12px; border-left: 3px solid var(--oxido); background: rgba(179, 67, 43, .07); font-size: 13.5px; }
.clientes__borrar[hidden], .clientes__confirmar[hidden] { display: none; }

/* Los viajeros como tarjetas de pasaporte: papel con guilloché, un sello y la franja de abajo. */
.clientes__pasaportes { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin: 12px 0; }
.clientes__pasaporte {
  position: relative; display: grid; gap: 10px; padding: 16px 18px 12px; border-radius: 12px; overflow: hidden;
  background: repeating-linear-gradient(135deg, rgba(168, 134, 79, .07) 0 2px, transparent 2px 9px), var(--hoja-2);
  box-shadow: var(--sombra);
}
.clientes__pasaporte-cabeza { display: flex; align-items: center; gap: 12px; }
.clientes__pasaporte-cabeza > div { display: grid; flex: 1; min-width: 0; }
.clientes__pasaporte-cabeza small { font-size: 12.5px; color: var(--gris); }
.clientes__pasaporte-sello {
  display: grid; place-items: center; flex: none; width: 38px; height: 38px; border: 1.5px dashed var(--oxido); border-radius: 50%;
  color: var(--oxido); font: italic 700 18px var(--letra-titulo); transform: rotate(-8deg);
}
/* La bandera del país que emitió el pasaporte, en el mismo círculo (pedido del dueño, 25/9/2026): sin la P, sin el
   sesgo ni el borde punteado. flag-icons 1x1 ya es cuadrada: object-fit la recorta redonda sin deformarla. */
.clientes__pasaporte-sello--bandera { border: 1px solid var(--borde-fuerte); transform: none; object-fit: cover; }
.clientes__pasaporte-nombre { font: 600 16px/1.25 var(--letra-titulo); overflow-wrap: anywhere; }
.clientes__pasaporte-datos { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px 18px; margin: 0; }
.clientes__pasaporte-datos dt { font: 600 9.5px var(--letra-codigo); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.clientes__pasaporte-datos dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 2px 0 0; font: 500 13.5px var(--letra-codigo); }
.clientes__pasaporte-numero { letter-spacing: .08em; }
.clientes__pasaporte-numero--vacio { font-family: var(--letra-texto); letter-spacing: 0; color: var(--gris); }
.clientes__preferencias { margin: 0; font-size: 13px; color: var(--gris); overflow-wrap: anywhere; }
.clientes__mrz {
  margin: 4px -18px -12px; padding: 8px 18px; overflow: hidden; white-space: pre;
  background: rgba(27, 36, 51, .05); color: rgba(27, 36, 51, .55); font: 500 11px/1.45 var(--letra-codigo); letter-spacing: .12em;
}

/* El editor del viajero: el papel que se levanta (otra capa). */
.clientes__viajero {
  grid-column: 1 / -1; padding: 18px; border-radius: 12px; background: var(--hoja);
  box-shadow: 0 22px 40px -26px rgba(40, 30, 20, .75), 0 0 0 1px rgba(27, 36, 51, .08);
  animation: clientes-levantar 260ms var(--suave) both;
}
@keyframes clientes-levantar { from { opacity: .4; transform: translateY(10px) rotate(-.5deg); box-shadow: var(--sombra); } }
.clientes__confirmar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px dashed var(--oxido); border-radius: 10px; }
.clientes__confirmar p { flex-basis: 100%; margin: 0; }

/* Sus viajes. */
.clientes__viajes-lista { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.clientes__viaje {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 14px; border-radius: 10px;
  background: var(--hoja-2); color: var(--tinta); text-decoration: none; transition: background var(--rapido) var(--suave);
}
.clientes__viaje:hover { background: var(--papel); }
.clientes__viaje span:not(.clientes__fase) { font: 500 12.5px var(--letra-codigo); color: var(--gris); }
.clientes__fase { grid-row: 1 / span 2; grid-column: 2; align-self: center; padding: 2px 8px; border: 1px solid currentColor; border-radius: 999px; font: 600 11px var(--letra-codigo); }
.clientes__fase[data-fase="cotizacion"] { color: var(--clientes-ambar); }
.clientes__fase[data-fase="por-salir"], .clientes__fase[data-fase="en-curso"] { color: var(--verde); }
.clientes__fase[data-fase="terminado"], .clientes__fase[data-fase="cancelado"] { color: var(--gris); }

/* Al ancho de un celular: una columna, y la franja se corta sin empujar la página. */
@media (max-width: 640px) {
  .clientes__par, .clientes__tres { grid-template-columns: 1fr; }
  .clientes__pasaportes, .clientes__fichas { grid-template-columns: 1fr; }
  .clientes__pasaporte-datos { grid-template-columns: repeat(2, auto); }
}

@media (prefers-reduced-motion: reduce) {
  .clientes__ficha, .clientes__viaje { transition: none; }
  .clientes__ficha:hover, .clientes__ficha:focus-visible { transform: none; }
  .clientes__viajero { animation: none; }
}