/* Travesia · mesa de trabajo del asesor.
   Oficio de tablero de aeropuerto: esquinas RECTAS en todo (Ale, 26-sep: "odio las esquinas redondas"), reglas finas en vez
   de cajas flotantes, cero sombras. Tres voces (Ale, 27-sep: Cormorant + Inter "AI generico"; eligio entre cinco sobre sus pantallas): serif editorial
   calida para titulos (Sentient), grotesca con caracter para trabajar (Supreme), y
   monoespaciada para lo que se copia o se compara (folios, horas, localizadores, codigos IATA).
   Escala pensada para quien la usa: una asesora con anos de oficio, no de pantallas (Ale, 27-sep: "es una persona grande,
   no es mucho de tecnologia"). Texto 16, nada abajo de 12.5, botones y cajas de 46-48 px, grises con contraste AA.
   Escala: 12.5 · 14 · 16 · 18 · 22 · 30 · 42 · 56. */
:root {
  --tinta: #1D2644; --tinta-2: #3E4460; --arena: #C0B08D; --arena-oscura: #756441; --arena-suave: #F1EBDD;
  --fondo: #F4F2EC; --superficie: #FFFFFF; --hundida: #ECE8DE;
  --texto: #141A2E; --suave: #4A5066; --tenue: #5F6477;
  --fino: rgba(29, 38, 68, 0.12); --linea: rgba(29, 38, 68, 0.26); --control: #858A99;
  --verde: #1F6B47; --verde-fondo: #E8F1EB; --ambar: #8F5A0B; --ambar-fondo: #FAF1DE; --rojo: #A3241A; --rojo-fondo: #FBEAE7;
  --r: 0; --toque: 46px;
  --f-texto: "Supreme", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-titulo: "Sentient", Georgia, serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@view-transition { navigation: auto; }
* { box-sizing: border-box; border-radius: 0; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 400 16px/1.55 var(--f-texto); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
.saltar-contenido { position: fixed; top: 8px; left: 16px; z-index: 100; transform: translateY(-160%);
  padding: 12px 18px; background: var(--superficie); color: var(--texto); border: 2px solid var(--tinta); }
.saltar-contenido:focus { transform: none; }
#contenido-principal { scroll-margin-top: 76px; }
@media (max-width: 900px) { #contenido-principal { scroll-margin-top: 156px; } }
#contenido-principal:focus { outline: none; }
a { color: var(--tinta); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
h1, h2, h3 { font-weight: 500; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: 22px; } h2 { font-size: 16px; letter-spacing: 0; } h3 { font-size: 16px; }
.titulo-editorial { font: 400 42px/1.05 var(--f-titulo); letter-spacing: -0.015em; }
.titulo-editorial em { font-style: italic; color: var(--arena-oscura); }
.suave { color: var(--suave); } .tenue { color: var(--tenue); } .chico { font-size: 14px; }
.versal { font: 500 12.5px/1.4 var(--f-texto); letter-spacing: 0.1em; text-transform: uppercase; color: var(--suave); }
/* las etiquetas en versalitas un punto mas firmes que el texto (Supreme no tiene 600) */
.versal, label.campo > span, .panel > header h2 { font-weight: 500; }
/* los numeros en la letra de texto (a una persona mayor la maquina de escribir le parece tecnico); los codigos siguen en .mono */
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* barra superior */
.barra { height: 66px; background: var(--superficie); border-bottom: 1px solid var(--linea); display: flex; align-items: stretch;
  gap: 28px; padding: 0 28px; position: sticky; top: 0; z-index: 20; }
.barra > a:first-child { display: flex; align-items: center; }
.barra img.logo { height: 22px; display: block; }
.barra nav { display: flex; gap: 22px; min-width: 0; overflow-x: auto; scrollbar-width: none; align-items: stretch; }
.barra nav::-webkit-scrollbar { display: none; }
.barra nav a { white-space: nowrap; display: flex; align-items: center; color: var(--suave); font-weight: 500; border-bottom: 2px solid transparent;
  margin-bottom: -1px; padding-top: 2px; transition: color .15s, border-color .15s; }
.barra nav a:hover { color: var(--texto); text-decoration: none; border-bottom-color: var(--linea); }
.barra nav a[aria-current="page"] { color: var(--texto); border-bottom-color: var(--tinta); }
.barra .espacio { flex: 1; }
.barra > .chip, .barra > .firma-quvo, .barra > .quien, .barra > form { align-self: center; }
.barra .quien { color: var(--suave); font-size: 15px; }
.firma-quvo { font: 500 12.5px var(--f-mono); color: var(--tenue); letter-spacing: 0.16em; }

/* franja de la demostracion: nadie la confunde con la agencia real */
.franja-demo { background: var(--tinta); color: #F1EBDD; font: 500 14px/1.4 var(--f-texto); display: flex; gap: 14px; align-items: center;
  justify-content: center; padding: 10px 20px; flex-wrap: wrap; text-align: center; }
.franja-demo b { font: 500 12.5px var(--f-mono); letter-spacing: 0.16em; color: var(--arena); }
.franja-demo a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.pagina { max-width: 1360px; margin: 0 auto; padding: 32px 28px 56px; }
.encabezado { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap;
  padding-bottom: 18px; border-bottom: 1px solid var(--linea); position: relative; }
.encabezado .versal { margin-bottom: 8px; }

/* botones: un solo color de accion, rectos */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--toque); padding: 0 14px;
  border: 1px solid var(--control); background: var(--superficie); color: var(--texto);
  font: 500 15px/1 var(--f-texto); cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.boton:hover { border-color: var(--tinta); text-decoration: none; }
.boton.principal { background: var(--tinta); border-color: var(--tinta); color: #fff; height: 48px; padding: 0 22px; font-size: 16px; letter-spacing: 0.01em; }
.boton.principal:hover { background: #0E1429; }
.boton.principal::after { content: "→"; font-family: var(--f-mono); margin-left: 2px; transition: transform .15s; }
.boton.principal:hover::after { transform: translateX(3px); }
.boton.principal.sin-flecha::after, .boton.principal:has(svg)::after { content: none; }
.boton.fantasma { border-color: transparent; background: transparent; color: var(--suave); }
.boton.fantasma:hover { color: var(--texto); border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
.boton[disabled], .boton.apagado { opacity: 0.45; cursor: not-allowed; }
.boton[disabled]::after, .boton.apagado::after { content: none; }
.boton svg { width: 17px; height: 17px; }

input[type=text], input[type=email], input[type=url], input[type=password], input[type=date], input[type=time], input[type=number], input[type=search], select, textarea {
  height: 46px; border: 1px solid var(--control); padding: 0 12px; background: #fff;
  font: 400 16px var(--f-texto); color: var(--texto); width: 100%; transition: border-color .15s; }
select { -webkit-appearance: none; appearance: none; padding-right: 32px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='%231D2644'/%3E%3C/svg%3E") no-repeat right 12px center; }
textarea { height: auto; padding: 10px 12px; min-height: 72px; line-height: 1.5; }
input:hover, select:hover, textarea:hover { border-color: var(--control); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--tinta); box-shadow: inset 0 -2px 0 var(--arena); }
button:focus-visible, a:focus-visible, .dato:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.franja-demo :focus-visible { outline-color: #fff; }
label.campo { display: block; margin-bottom: 14px; }
label.campo > span { display: block; font: 500 12.5px var(--f-texto); letter-spacing: 0.08em; text-transform: uppercase; color: var(--suave); margin-bottom: 6px; }

/* tabla de viajes: tablero de salidas */
.tabla { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--linea); }
.tabla th { text-align: left; font: 500 13px var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--arena);
  padding: 12px 14px; background: var(--tinta); border: 0; }
.tabla td { padding: 14px 16px; height: 72px; border-bottom: 1px solid var(--fino); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr { transition: background .12s; }
.tabla tbody tr:hover { background: #FAF8F3; }
.tabla tbody tr:hover .viaje-titulo { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.tabla .viaje-titulo { font: 500 21px/1.2 var(--f-titulo); color: var(--texto); }
.tabla .folio { font: 500 12.5px var(--f-mono); letter-spacing: 0.06em; color: var(--tenue); }

/* estados: sellos rectos, sin pastel */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; font: 500 13px var(--f-mono);
  letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid currentColor; color: var(--suave); background: transparent; white-space: nowrap; }
.chip.verde { color: var(--verde); } .chip.ambar { color: var(--ambar); } .chip.rojo { color: var(--rojo); }
.chip.tinta { background: var(--tinta); border-color: var(--tinta); color: var(--arena-suave); }
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--tenue); display: inline-block; flex: none; }
.punto.verde { background: var(--verde); } .punto.ambar { background: #C98A1B; } .punto.rojo { background: var(--rojo); }
.cinco { display: inline-flex; gap: 3px; }
.cinco .punto { width: 14px; height: 4px; border-radius: 0; }

/* mesa de trabajo */
.mesa { display: grid; grid-template-columns: 290px minmax(0, 1fr) 420px; gap: 24px; align-items: start; }
.panel { background: var(--superficie); border: 1px solid var(--linea); position: relative; }
.panel > header { padding: 16px 20px; border-bottom: 1px solid var(--fino); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.panel > header h2 { font: 500 13px var(--f-texto); letter-spacing: 0.1em; text-transform: uppercase; }
.panel > header .chico, .panel > header .suave { font-size: 14px; }
.panel > .cuerpo { padding: 16px 20px; }
.pegajoso { position: sticky; top: 84px; max-height: calc(100vh - 104px); overflow: auto; }
/* marcas de corte en las esquinas: el detalle de imprenta de las piezas importantes */
.marcas::before, .marcas::after { content: "+"; position: absolute; font: 400 14px/1 var(--f-mono); color: var(--arena-oscura); pointer-events: none; }
.marcas::before { top: -8px; left: -5px; } .marcas::after { bottom: -8px; right: -5px; }

.doc { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--fino); align-items: flex-start; }
.doc:last-child { border-bottom: 0; }
.doc .icono-doc { width: 56px; height: 50px; border: 1px solid var(--linea); display: grid; place-items: center; position: relative;
  font: 500 12.5px var(--f-mono); color: var(--tinta); letter-spacing: 0; flex: none; background: #FCFBF8;
  clip-path: polygon(0 0, 72% 0, 100% 22%, 100% 100%, 0 100%); }
.doc .nombre { font-weight: 500; word-break: break-word; line-height: 1.3; }

/* zona para soltar documentos */
.soltar { display: block; border: 1px dashed var(--linea); padding: 18px; text-align: center; color: var(--suave); background: #FCFBF8;
  cursor: pointer; position: relative; transition: background .2s, color .2s, border-color .2s; }
.soltar:hover { border-color: var(--tinta); }
.soltar.encima { border-style: solid; border-color: var(--tinta); background: var(--tinta); color: #E9E2D0; }
.soltar.encima strong { color: #fff !important; }
.soltar input[type=file] { font: 400 12px var(--f-texto); color: var(--suave); }
.soltar.grande { padding: 72px 32px 56px; border: 1px solid var(--linea); background: var(--superficie); }
.soltar.grande::before, .soltar.grande::after { content: ""; position: absolute; width: 18px; height: 18px; border-color: var(--tinta); border-style: solid; transition: all .25s; }
.soltar.grande::before { top: 10px; left: 10px; border-width: 1px 0 0 1px; }
.soltar.grande::after { bottom: 10px; right: 10px; border-width: 0 1px 1px 0; }
.soltar.grande:hover::before, .soltar.grande.encima::before { top: 6px; left: 6px; width: 30px; height: 30px; border-color: var(--arena); }
.soltar.grande:hover::after, .soltar.grande.encima::after { bottom: 6px; right: 6px; width: 30px; height: 30px; border-color: var(--arena); }
.soltar.grande strong { display: block; font: 400 40px/1.05 var(--f-titulo); color: var(--texto); margin: 0 0 12px; letter-spacing: -0.015em; }
.soltar.grande .tipos { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 22px 0 0; }
.soltar.grande .tipos span { font: 500 13px var(--f-mono); letter-spacing: 0.1em; padding: 5px 7px; border: 1px solid var(--fino); color: var(--suave); background: #FCFBF8; }
.soltar.encima .tipos span { border-color: rgba(233,226,208,.3); color: #E9E2D0; background: transparent; }
.soltar.grande input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.soltar .elegir { display: inline-block; margin-top: 18px; font: 500 16px var(--f-texto); color: var(--tinta); border-bottom: 1px solid var(--tinta); padding-bottom: 2px; }
.soltar.encima .elegir { color: #fff; border-color: #fff; }
.aviso-demo-soltar { margin-top: 16px; font-size: 14px; color: var(--ambar); }

/* lista de archivos por subir: talones de boleto */
.talones { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; }
.talones li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px;
  background: var(--superficie); border: 1px solid var(--fino); border-left: 3px solid var(--arena); animation: entra .25s ease both; }
.talones .tipo { font: 500 12.5px var(--f-mono); letter-spacing: 0.08em; color: var(--tinta); }
.talones .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.talones .peso { font: 400 12.5px var(--f-mono); color: var(--tenue); }
.talones li.pesado { border-left-color: var(--rojo); }
@keyframes entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* dias y reservas */
.dia { border-bottom: 1px solid var(--fino); }
.dia:last-child { border-bottom: 0; }
.dia > .dia-cab { display: flex; gap: 14px; align-items: baseline; padding: 18px 18px 8px; }
.dia .dia-num { font: 400 30px/1 var(--f-titulo); color: var(--arena-oscura); min-width: 44px; letter-spacing: -0.02em; }
.dia .dia-titulo { font: 500 22px/1.2 var(--f-titulo); }
.evento { display: grid; grid-template-columns: 64px 22px minmax(0, 1fr); gap: 10px; padding: 7px 18px; align-items: start; }
.evento .hora { font: 400 14px/1.6 var(--f-mono); color: var(--tinta-2); padding-top: 1px; }
.evento .ico { width: 18px; height: 18px; color: var(--tinta-2); margin-top: 2px; }
.evento .que { min-width: 0; }
.evento .que .t { font-weight: 500; }
.evento .que .d { color: var(--suave); font-size: 15px; }
.dato { border-bottom: 1px dotted rgba(29,38,68,.45); cursor: pointer; }
.dato:hover { background: var(--arena-suave); }
.dato.humano { border-bottom-style: solid; border-bottom-color: var(--arena-oscura); }
.dato.deducido { border-bottom-style: dashed; }

.reserva { border: 1px solid var(--fino); border-left: 2px solid var(--arena); margin: 8px 18px 14px 98px; padding: 12px 14px; background: #FDFCFA; }
.reserva .campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 18px; margin-top: 4px; }
.reserva .campos div > span:not(.dato) { display: block; font: 500 12.5px var(--f-texto); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tenue); margin-bottom: 1px; }
.reserva .campos .dato { display: inline; font: 400 16px var(--f-texto); color: var(--texto); }
.reserva .campos .falta { color: var(--rojo); font-weight: 500; border-color: var(--rojo); height: auto; min-height: 38px; padding: 6px 12px; margin-top: 2px; }

/* revisiones */
.revision { padding: 14px 18px; border-bottom: 1px solid var(--fino); }
.revision:last-child { border-bottom: 0; }
.revision .rev-cab { display: flex; gap: 10px; align-items: center; }
.revision .rev-n { font: 500 13px var(--f-mono); color: var(--tenue); width: 16px; }
.revision .rev-nombre { font-weight: 500; flex: 1; }
.revision p.rev-desc { margin: 4px 0 0 26px; color: var(--suave); font-size: 14px; }
.hallazgo { margin: 10px 0 0 26px; padding: 12px 14px; font-size: 15px; background: var(--superficie); border: 1px solid var(--fino); border-left: 3px solid var(--tenue); }
.hallazgo.rojo { border-left-color: var(--rojo); background: #FFFBFA; } .hallazgo.ambar { border-left-color: #C98A1B; background: #FFFDF8; }
.hallazgo.info { border-left-color: var(--tinta-2); }
.hallazgo.confirmado { border-left-color: var(--verde); color: var(--suave); }
.hallazgo .acciones { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.hallazgo .acciones .boton { height: 40px; font-size: 14px; padding: 0 14px; }
.semaforo { display: flex; gap: 12px; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--linea); }
.semaforo .grande { font: 500 22px/1.2 var(--f-titulo); }
.semaforo .punto { width: 12px; height: 12px; }

/* progreso de lectura */
.progreso { height: 3px; background: var(--hundida); overflow: hidden; }
.progreso > i { display: block; height: 100%; background: var(--tinta); width: 0; transition: width .4s ease; }

/* evidencia y ventanas */
dialog { border: 1px solid var(--linea); padding: 0; max-width: min(920px, 94vw); width: 920px; }
dialog::backdrop { background: rgba(14, 20, 41, 0.55); }
dialog header { padding: 14px 18px; border-bottom: 1px solid var(--fino); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
dialog .cuerpo { padding: 18px; max-height: 76vh; overflow: auto; }
.cita { font: 400 14px/1.6 var(--f-mono); background: #FCFBF8; border: 1px solid var(--fino); padding: 12px 14px; white-space: pre-wrap; }
.cita mark { background: #F0DE9E; color: inherit; padding: 1px 0; }
.hoja img { width: 100%; border: 1px solid var(--fino); display: block; }

.aviso { padding: 12px 14px; background: var(--superficie); border: 1px solid var(--fino); border-left: 3px solid var(--tinta-2); margin-bottom: 16px; }
.aviso.rojo { border-left-color: var(--rojo); color: var(--rojo); background: #FFFBFA; }
.vacio { padding: 56px 40px; text-align: center; color: var(--suave); }

/* entrada: el lobby */
.entrada { min-height: 100vh; display: grid; grid-template-columns: 1.15fr 1fr; }
.entrada .foto { background: var(--tinta) center/cover no-repeat; position: relative; overflow: hidden; }
.entrada .foto video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.entrada .foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,20,41,.10) 30%, rgba(14,20,41,.78)); }
.entrada .foto .leyenda { position: absolute; left: 56px; bottom: 52px; right: 56px; color: #fff; z-index: 1; }
.entrada .foto .leyenda .t { font: 400 56px/1.0 var(--f-titulo); letter-spacing: -0.02em; }
.entrada .foto .leyenda .t em { color: var(--arena); }
.entrada .foto .leyenda .versal { color: rgba(255,255,255,.7); margin-bottom: 16px; }
.entrada .foto .esquina { position: absolute; top: 28px; left: 56px; right: 56px; z-index: 1; display: flex; justify-content: space-between;
  font: 500 13px var(--f-mono); letter-spacing: 0.18em; color: rgba(255,255,255,.7); }
.entrada .forma { display: flex; flex-direction: column; justify-content: center; padding: 56px min(8vw, 104px); background: var(--superficie); }
.entrada .forma img { height: 40px; align-self: flex-start; margin-bottom: 56px; }
.entrada .forma .titulo-editorial { font-size: 56px; }
.entrada .olvide { margin: 18px 0 0; font-size: 15px; }
.entrada .olvide a { color: var(--tinta); border-bottom: 1px solid var(--linea); }
.entrada .olvide a:hover { text-decoration: none; border-bottom-color: var(--tinta); }
.entrada .salida { padding: 22px 0; border-top: 1px solid var(--fino); }
.entrada .salida h2 { font-size: 19px; margin: 0 0 8px; }
.entrada .salida p { margin: 0 0 14px; color: var(--suave); font-size: 16px; line-height: 1.5; }
.entrada .pie-demo { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--fino); font-size: 15px; color: var(--suave); }
.entrada .pie-demo a { color: var(--tinta); border-bottom: 1px solid var(--linea); }
.entrada .pie-demo a:hover { text-decoration: none; border-bottom-color: var(--tinta); }
.entrada .demo { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--fino); }

/* pagina de la demostracion: dos puertas */
.puertas { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--linea); margin-top: 28px; }
.puertas a { display: block; padding: 28px; color: inherit; border-right: 1px solid var(--linea); transition: background .2s, color .2s; }
.puertas a:last-child { border-right: 0; }
.puertas a:hover { background: var(--tinta); color: #E9E2D0; text-decoration: none; }
.puertas a:hover .t, .puertas a:hover .suave { color: #fff; }
.puertas .t { font: 400 28px/1.1 var(--f-titulo); margin: 10px 0 8px; color: var(--texto); }
.puertas ul { margin: 12px 0 0; padding-left: 18px; font-size: 15px; }
.puertas .ir { display: inline-block; margin-top: 18px; font: 500 13px var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; }

@media (prefers-reduced-motion: no-preference) {
  .aparece { animation: aparece .6s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes aparece { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .aparece { animation: desvanece .3s ease both; } @keyframes desvanece { from { opacity: 0 } to { opacity: 1 } }
  .talones li { animation: none; }
  @view-transition { navigation: none; }
}

/* laptop angosta: el menu no se corta (a 1024 px 'Bitacora' quedaba mocha) */
@media (max-width: 1200px) {
  .barra { gap: 20px; }
  .barra nav { gap: 18px; }
  .firma-quvo { display: none; }
}
/* telefono: la capa movil manda (44 px, 16 px) */
@media (max-width: 900px) {
  :root { --toque: 44px; }
  body { font-size: 16px; }
  input, select, textarea { font-size: 16px !important; height: 46px; }
  textarea { height: auto; }
  /* el menu baja a su propio renglon, a todo lo ancho: en una linea con el logo solo cabia "Viajes Coti" */
  .barra { padding: 0 16px; gap: 0 14px; height: auto; flex-wrap: wrap; }
  .barra > a:first-child { height: 52px; }
  .barra nav { order: 5; flex-basis: calc(100% + 32px); height: 44px; gap: 12px; justify-content: space-between; border-top: 1px solid var(--linea); margin: 0 -16px; padding: 0 16px; }
  .firma-quvo, .barra .chip { display: none; }
  .barra .quien { font-size: 0; width: 30px; height: 30px; background: var(--hundida); flex: none; display: flex; align-items: center; justify-content: center; color: var(--texto); text-decoration: none; }
  .barra .quien::before { content: attr(data-inicial); font-size: 13px; }
  .pagina { padding: 20px 16px 40px; }
  .titulo-editorial { font-size: 32px; }
  .mesa { grid-template-columns: 1fr; }
  .pegajoso { position: static; max-height: none; }
  .reserva { margin: 8px 16px 14px 16px; }
  .evento { grid-template-columns: 50px 20px minmax(0, 1fr); }
  .tabla .ocultable { display: none; }
  .tabla .viaje-titulo { font-size: 18px; }
  .entrada { grid-template-columns: 1fr; }
  .entrada .foto { min-height: 38vh; }
  .entrada .foto .leyenda { left: 20px; right: 20px; bottom: 22px; }
  .entrada .foto .esquina { left: 20px; right: 20px; top: 18px; }
  .entrada .foto .leyenda .t { font-size: 36px; }
  .entrada .forma { padding: 28px 20px 40px; }
  .entrada .forma img { margin-bottom: 28px; }
  .entrada .forma .titulo-editorial { font-size: 40px; }
  .puertas { grid-template-columns: 1fr; }
  .puertas a { border-right: 0; border-bottom: 1px solid var(--linea); }
  .puertas a:last-child { border-bottom: 0; }
  .soltar.grande { padding: 48px 20px 40px; }
  .soltar.grande strong { font-size: 30px; }
  .boton { font-size: 15px; }
  .boton.principal { height: 48px; }
  /* tablas y encabezados que no caben: se acomodan, no empujan la pagina */
  .tabla td.num { white-space: normal !important; }
  .panel > header { flex-wrap: wrap; }
  form.titulo-viaje { flex-wrap: wrap; }
  form.titulo-viaje input[name=titulo] { min-width: 0 !important; width: 100%; }
  /* formularios en rejilla: en el telefono, una columna */
  form[style*="grid-template-columns"], div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  form[style*="grid-template-columns"] > [style*="grid-column"], div[style*="grid-template-columns"] > [style*="grid-column"] { grid-column: auto !important; }
}

/* biblioteca */
.rejilla-bib { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.tarjeta-bib { display: block; color: inherit; overflow: hidden; }
.tarjeta-bib:hover { text-decoration: none; border-color: var(--tinta); }
.foto-bib { aspect-ratio: 16 / 10; background: var(--hundida); display: grid; place-items: center; overflow: hidden; }
.foto-bib img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.tarjeta-bib:hover .foto-bib img { transform: scale(1.03); }
.rejilla-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.foto-editable img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--fino); display: block; }

/* cambios contra lo publicado */
.aviso-cambio { padding: 14px 18px; margin-bottom: 16px; border-left: 3px solid #C98A1B; background: #FFFDF8; }

/* viajero: contacto, envios y visto */
.viajero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 18px 20px; margin-bottom: 20px; }
.viajero .contacto { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.5fr) minmax(0, 1fr) auto; gap: 0 14px; align-items: end; }
.viajero .envios { border-top: 1px solid var(--fino); padding-top: 14px; margin-top: 4px; }
.viajero .visto { display: flex; gap: 6px; align-items: center; margin-top: 10px; font-size: 15px; }
.viajero .historial { list-style: none; margin: 8px 0 0; padding: 0; font-size: 14px; color: var(--suave); max-height: 110px; overflow: auto; }
.viajero .historial li { padding: 2px 0; }
@media (max-width: 900px) {
  .viajero { grid-template-columns: 1fr; }
  .viajero .contacto { grid-template-columns: 1fr; }
}

/* cotizaciones */
.dos-col { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.dos-col > * { min-width: 0; }
.rejilla-partida { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 12px; }
.editar-partida .rejilla-partida { margin-top: 8px; padding: 12px; border: 1px solid var(--fino); background: #FCFBF8; }
.tabla tfoot td { height: 48px; border-top: 1px solid var(--linea); }
@media (max-width: 900px) { .dos-col { grid-template-columns: minmax(0, 1fr); } .rejilla-partida { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) {
  .rejilla-partida { grid-template-columns: minmax(0, 1fr); }
  .rejilla-partida > [style*="grid-column"] { grid-column: 1 / -1 !important; }
}

/* quien ve cada documento */
.compartir { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.compartir button.chip { cursor: pointer; font: 500 14px var(--f-texto); letter-spacing: 0; text-transform: none; height: 40px; padding: 0 14px; }
.compartir button.chip:hover { background: var(--hundida); }

/* toque personal */
.toque { margin-bottom: 20px; }
.forma-toque textarea.carta-edicion { font: 400 18px/1.6 var(--f-titulo); padding: 14px 16px; background: #FFFEFB; }
.fila-toque { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 10px 14px; align-items: end; }
/* cada fecha con su motivo en su propio renglon: "Aniversario de bodas de Carlos y Regina" no cabia */
.fila-toque > .campo:first-child { grid-column: 1 / -1; max-width: 190px; }
.pie-toque { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.pie-toque .chico { max-width: 560px; }
.estado-carta { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.otras-toque { display: flex; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--fino); }
.js-escribiendo.escribiendo button[type=submit] { opacity: .6; pointer-events: none; }
@media (max-width: 900px) { .fila-toque { grid-template-columns: 1fr; } }
/* D-62: las opciones de la carta en botones grandes que se ven (tono, largo, trato), no en menus escondidos */
.opciones-carta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 20px; margin: 4px 0 6px; }
.opciones-carta .ocasion { max-width: 340px; }
.opcion-carta { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
.opcion-carta legend { font: 500 12.5px/1.4 var(--f-texto); letter-spacing: .1em; text-transform: uppercase; color: var(--suave); margin-bottom: 6px; padding: 0; }
.chip-opcion { display: inline-flex; margin: 0 6px 6px 0; cursor: pointer; }
.chip-opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-opcion span { display: inline-flex; align-items: center; min-height: var(--toque); padding: 0 16px; border: 1px solid var(--linea, #C9C3B4);
  background: var(--superficie); font: 400 16px var(--f-texto); color: var(--texto); }
.chip-opcion span small { font-size: 13.5px; color: var(--suave); margin-left: 4px; }
.chip-opcion input:checked + span { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.chip-opcion input:checked + span small { color: rgba(255,255,255,.75); }
.chip-opcion input:focus-visible + span { outline: 2px solid var(--tinta); outline-offset: 2px; }
.fechas-carta { margin: 0 0 16px; }
.fechas-carta summary, .otra-carta summary, .versiones-carta summary { cursor: pointer; font: 500 16px var(--f-texto); min-height: 44px;
  display: flex; align-items: center; color: var(--texto); }
.fila-fechas { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 0 14px; margin-top: 6px; }
.cambiar-carta { margin: 6px 0 18px; padding: 16px; background: var(--fondo); border: 1px solid var(--fino); }
.cambiar-carta > .campo { margin-bottom: 6px; }
.fila-cambio { display: flex; gap: 8px; margin-bottom: 12px; }
.fila-cambio input { flex: 1 1 auto; min-width: 0; }
.fila-cambio .boton { flex: 0 0 auto; }
.rapidos-carta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.rapidos-carta .chico { margin-right: 4px; }
.cambiar-carta p.chico { margin: 6px 0 0; }
.otra-carta { flex: 1 1 auto; }
.otra-carta[open] { flex-basis: 100%; }
.otras-toque { flex-wrap: wrap; align-items: flex-start; }
.versiones-carta { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--fino); }
.versiones-carta ol { list-style: none; margin: 6px 0 0; padding: 0; }
.versiones-carta li { display: flex; gap: 14px; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid var(--fino); }
.versiones-carta li p { margin: 4px 0 0; color: var(--suave); font-size: 15px; }
.versiones-carta li > div { min-width: 0; }
.js-carta.escribiendo button { opacity: .6; pointer-events: none; }
@media (max-width: 700px) {
  .opciones-carta, .fila-fechas { grid-template-columns: 1fr; }
  .fila-cambio { flex-direction: column; }
  .versiones-carta li { flex-direction: column; align-items: stretch; }
  .pie-toque .boton { flex: 1 1 100%; }
}

/* encabezado del viaje: titulo completo en su renglon; "quien viaja" abajo con etiqueta (27-sep) */
.cab-viaje { min-width: 0; flex: 1 1 520px; }
.titulo-viaje { display: grid; gap: 8px; margin-top: 8px; }
.titulo-viaje .titulo-input { font: 500 32px/1.15 var(--f-titulo); height: 52px; border-color: transparent; padding: 0 8px; margin-left: -8px;
  width: 100%; max-width: 760px; background: transparent; text-overflow: ellipsis; }
.titulo-viaje .titulo-input:hover { border-color: var(--linea); background: #fff; }
.fila-perfil { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fila-perfil select { width: auto; min-width: 180px; }
/* D-56: quien viaja, tipo y "Otro" en una linea que se dobla en el telefono */
.fila-perfil { align-items: flex-end; }
.campo-linea { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.campo-linea input { width: 260px; max-width: 100%; }
.campo-linea.tipo-otro input { width: 220px; }
.datos-viaje { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.datos-viaje .dv-nombre { grid-column: 1 / -1; }
.datos-viaje .dv-tipo { display: grid; gap: 0; }
.datos-viaje .campo i.tenue { font-style: normal; }
@media (max-width: 700px) {
  .datos-viaje { grid-template-columns: 1fr; }
  .campo-linea, .campo-linea input, .campo-linea.tipo-otro input, .fila-perfil select { width: 100%; min-width: 0; }
  .fila-perfil > .campo-linea { flex: 1 1 100%; }
}
.falta-publicar { flex-basis: 100%; text-align: right; margin: 6px 0 0; font-size: 15px; color: var(--ambar); }
.falta-publicar a { color: var(--ambar); text-decoration: underline; text-underline-offset: 3px; margin-left: 4px; display: inline-flex; align-items: center; min-height: 44px; }
.titulo-bloque { font: 500 18px var(--f-titulo); margin-bottom: 10px; }
.titulo-bloque .suave { font: 400 15px var(--f-texto); }
.viajero .contacto { align-items: end; }

/* mesa en laptop: documentos arriba a lo ancho, itinerario y revisiones en dos columnas (a 1280 las tres apretaban) */
@media (max-width: 1440px) and (min-width: 901px) {
  .mesa { grid-template-columns: minmax(0, 1fr) 420px; }
  .mesa > #documentos { grid-column: 1 / -1; position: static; max-height: none; }
  .mesa > #documentos .lista-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 28px; }
}
.franja-demo form button, .franja-demo a { padding: 6px 2px; }
@media (max-width: 900px) {
  /* el nombre del viaje no se achica con la regla de 16 px de los campos */
  .titulo-viaje .titulo-input { font-size: 22px !important; height: 48px; }
  .hallazgo .acciones .boton { height: 44px; }
  /* tablas como tarjetas: una por renglon, cada dato en su linea (a 390 px el titulo se partia en tres) */
  .tabla, .tabla tbody { display: block; background: transparent; border: 0; }
  .tabla thead { display: none; }
  .tabla tr { display: block; background: var(--superficie); border: 1px solid var(--linea); margin-bottom: 12px; padding: 14px 16px; }
  .tabla td { display: block; height: auto; padding: 3px 0; border: 0; }
  .tabla td:empty { display: none; }
  .tabla tfoot { display: block; }
}

/* pantalla Hoy: una frase por pendiente, un boton grande, nada mas (27-sep) */
.hoy .bloque-hoy { margin-bottom: 44px; }
.hoy .titulo-seccion { font: 500 28px/1.2 var(--f-titulo); display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.hoy .titulo-seccion .cuenta { font: 500 15px var(--f-mono); background: var(--tinta); color: var(--arena-suave); padding: 3px 10px; }
.hoy .guia { color: var(--suave); margin: 0 0 16px; font-size: 16px; }
.accion { display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--superficie);
  border: 1px solid var(--linea); border-left: 4px solid var(--arena); padding: 18px 22px; margin-bottom: 12px; }
.accion.cot_caliente, .accion.sin_link { border-left-color: var(--rojo); }
.accion.regresa, .accion.especial, .accion.aniversario { border-left-color: var(--verde); }
.accion.oportunidad { border-left-color: var(--tinta); }
.accion-texto { flex: 1 1 420px; min-width: 0; }
.accion-texto h3 { font: 500 19px/1.35 var(--f-texto); margin: 0; }
.accion-texto p { margin: 6px 0 0; color: var(--suave); font-size: 16px; }
.accion-texto .que { font: 500 13px var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--arena-oscura); margin-bottom: 4px; }
.accion-texto .sin-numero { font-size: 14px; color: var(--ambar); }
.accion-botones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.accion-botones form { margin: 0; }
.hoy .nada { padding: 22px; background: var(--superficie); border: 1px dashed var(--linea); color: var(--suave); font-size: 17px; }
.cifras-mes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--linea); background: var(--superficie); }
.cifra { padding: 22px 24px; border-right: 1px solid var(--fino); border-bottom: 1px solid var(--fino); }
.cifra:nth-child(3n) { border-right: 0; }
.cifra .etiqueta, .destinos-top .etiqueta { font: 500 13px var(--f-texto); letter-spacing: 0.08em; text-transform: uppercase; color: var(--suave); }
.cifra .valor { font: 400 36px/1.15 var(--f-titulo); margin: 8px 0 6px; }
.cifra .valor .aprox { font: 400 16px var(--f-texto); color: var(--suave); }
.cifra p, .cifra ul { margin: 0; color: var(--suave); font-size: 15px; }
.cifra ul { padding-left: 18px; }
.destinos-top { margin: 14px 0 0; font-size: 16px; }
@media (max-width: 900px) {
  .cifras-mes { grid-template-columns: 1fr; }
  .cifra { border-right: 0; }
  .accion { padding: 16px; }
  .accion-botones { width: 100%; }
  .accion-botones .boton { flex: 1 1 auto; }
}
.viaje-op { background: var(--superficie); border: 1px solid var(--linea); border-left: 4px solid var(--tinta); margin-bottom: 14px; }
.viaje-op > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--fino); flex-wrap: wrap; }
.viaje-op h3 { font: 500 22px/1.2 var(--f-titulo); margin: 0; }
.viaje-op h3 a { color: var(--texto); }
.viaje-op .op { display: flex; gap: 18px; align-items: center; justify-content: space-between; padding: 14px 22px; border-bottom: 1px solid var(--fino); flex-wrap: wrap; }
.viaje-op .op:last-child { border-bottom: 0; }
.op-texto { flex: 1 1 380px; min-width: 0; }
.op-texto strong { font-size: 18px; font-weight: 500; }
.op-texto p { margin: 4px 0 0; color: var(--suave); font-size: 15px; }
.op-texto .que { font: 500 12.5px var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--arena-oscura); margin-bottom: 2px; }
@media (max-width: 900px) { .viaje-op .op, .viaje-op > header { padding: 14px 16px; } }
.hallazgo .foto-dudosa { display: block; width: 100%; max-width: 320px; aspect-ratio: 16 / 10; object-fit: cover; margin: 4px 0 6px; border: 1px solid var(--fino); }
/* tu dinero: lo que espera respuesta manda (con su lista), lo demas a un lado */
.dinero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); border: 1px solid var(--linea); background: var(--superficie); }
.dinero-espera { padding: 24px 26px; border-right: 1px solid var(--fino); }
.dinero-espera .etiqueta, .dinero-lado .etiqueta { font: 500 13px var(--f-texto); letter-spacing: 0.08em; text-transform: uppercase; color: var(--suave); }
.dinero-espera .valor { font: 400 40px/1.15 var(--f-titulo); margin: 6px 0 2px; }
.dinero-espera p { color: var(--suave); margin: 8px 0 10px; }
.lista-espera { list-style: none; margin: 0; padding: 0; }
.lista-espera li { padding: 10px 0; border-top: 1px solid var(--fino); }
.lista-espera a { color: var(--texto); font-size: 16px; }
.lista-espera span { display: block; color: var(--suave); font-size: 14px; margin-top: 2px; }
.dinero-lado .cifra { border: 0; border-bottom: 1px solid var(--fino); padding: 18px 22px; }
.dinero-lado .cifra:last-child { border-bottom: 0; }
.dinero-lado .chico-v { font: 400 26px/1.2 var(--f-titulo); margin: 4px 0 4px; }
.dinero-lado p { margin: 0; color: var(--suave); font-size: 15px; }
@media (max-width: 900px) { .dinero { grid-template-columns: 1fr; } .dinero-espera { border-right: 0; border-bottom: 1px solid var(--fino); } }

/* 30-sep, pulida para una persona mayor: nada en ingles, todo con alto de dedo, y la pagina larga con atajos */
.oculto-visual { position: absolute !important; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); pointer-events: none; }
.soltar .elegir { margin: 10px auto 0; pointer-events: none; }
.soltar:focus-within { border-color: var(--tinta); outline: 3px solid var(--tinta); outline-offset: 3px; }
.elegir-archivo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.elegir-archivo .boton { cursor: pointer; }
.elegir-archivo:focus-within .boton { outline: 3px solid var(--tinta); outline-offset: 3px; }
.saltos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.saltos a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--linea); background: var(--superficie);
  color: var(--texto); font-weight: 500; text-decoration: none; }
.saltos a:hover { border-color: var(--tinta); }
.revision-txt { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.revision-txt.rojo { color: var(--rojo); } .revision-txt.ambar { color: var(--ambar); } .revision-txt.verde { color: var(--verde); }
.compartir .chip { font: 500 14px var(--f-texto); letter-spacing: 0; text-transform: none; height: 40px; padding: 0 14px; cursor: pointer; }
.quitar-doc { height: 40px; padding: 0 10px; }
.enlace-franja { background: none; border: 0; color: #fff; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
  min-height: 44px; padding: 0 4px; }
@media (max-width: 900px) {
  /* el menu en dos renglones, sin nada escondido a un lado (Bitacora no se veia) */
  .barra nav { flex-wrap: wrap; height: auto; overflow: visible; justify-content: flex-start; gap: 0 20px; padding-block: 2px; }
  .barra nav a { min-height: 44px; }
  .barra .quien { width: 44px; height: 44px; }
  .barra .quien::before { font-size: 16px; }
  .compartir .chip, .quitar-doc, .saltos a { min-height: 44px; height: 44px; }
  .saltos a { flex: 1 1 auto; justify-content: center; }
}
#toque { margin-top: 24px; }
.soltar .boton.principal { color: #fff; display: inline-flex; }
.soltar.encima .boton.principal { background: #fff; color: var(--tinta); }
/* el menu completo en una laptop: la firma y el nombre ceden, las secciones no se cortan */
.barra .quien { white-space: nowrap; }
@media (max-width: 1440px) { .firma-quvo { display: none; } }
.barra .quien { display: inline-flex; align-items: center; min-height: 40px; }
@media (max-width: 1200px) { .barra > .chip.ambar { display: none; } }
.campo .elegir-archivo span { display: inline-flex; font: 400 15px var(--f-texto); letter-spacing: 0; text-transform: none; color: var(--suave); margin: 0; }
.campo .elegir-archivo span.boton { font-weight: 500; color: var(--texto); padding: 0 16px; }
/* biblioteca: para que sirve, en tres pasos (Ale, 30-sep) */
.para-que { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 22px; border: 1px solid var(--linea); background: var(--superficie); }
.para-que > div { padding: 18px 20px; border-right: 1px solid var(--fino); display: grid; gap: 4px; align-content: start; }
.para-que > div:last-child { border-right: 0; }
.para-que .n { font: 400 30px/1 var(--f-titulo); color: var(--arena-oscura); }
.para-que b { font-size: 17px; font-weight: 500; }
.para-que p { margin: 0; color: var(--suave); font-size: 15.5px; line-height: 1.5; }
@media (max-width: 900px) { .para-que { grid-template-columns: 1fr; } .para-que > div { border-right: 0; border-bottom: 1px solid var(--fino); } .para-que > div:last-child { border-bottom: 0; } }
/* biblioteca: la estrella de favorito encima de la tarjeta (Ale, 30-sep: "marcar favoritos") */
.caja-bib { position: relative; display: flex; }
.caja-bib .tarjeta-bib { flex: 1; min-width: 0; }
.marcar-fav { position: absolute; top: 8px; right: 8px; z-index: 2; }
.marcar-fav button { width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; background: rgba(255,255,255,.92);
  border: 1px solid var(--linea); color: var(--suave); }
.marcar-fav button svg { width: 22px; height: 22px; }
.marcar-fav button:hover { color: var(--arena-oscura); border-color: var(--arena-oscura); }
.marcar-fav button.es-fav { color: var(--arena-oscura); border-color: var(--arena-oscura); }
/* cotizaciones (D-40): cotizar ANTES de pagar. El desglose se arrastra, lo dudoso queda en ambar, el cliente ve solo el total */
.acciones-cot { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; max-width: 100%; }
.falta-enviar { flex-basis: 100%; text-align: right; margin: 6px 0 0; font-size: 15px; color: var(--ambar); }
.falta-enviar a { color: var(--ambar); text-decoration: underline; text-underline-offset: 3px; margin-left: 4px; }
.pasos-cot { list-style: none; margin: -12px 0 22px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--linea); background: var(--superficie); }
.pasos-cot li { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-right: 1px solid var(--fino); color: var(--tenue); font-size: 15px; line-height: 1.35; }
.pasos-cot li:last-child { border-right: 0; }
.pasos-cot b { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--linea); font: 500 15px var(--f-mono); color: var(--tenue); }
.pasos-cot li.actual { color: var(--texto); background: var(--arena-suave); }
.pasos-cot li.actual b { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.pasos-cot li.hecho { color: var(--verde); }
.pasos-cot li.hecho b { border-color: var(--verde); color: var(--verde); }
.lo-que-ve { padding: 14px 20px 16px; border-bottom: 1px solid var(--fino); background: #FCFBF8; }
.lo-que-ve .versal { display: block; margin-bottom: 8px; }
.segmentos { display: flex; flex-wrap: wrap; gap: 0; }
.segmentos button { min-height: 46px; padding: 8px 16px; border: 1px solid var(--linea); background: var(--superficie); color: var(--suave);
  font: 500 15px var(--f-texto); cursor: pointer; text-align: left; }
.segmentos button + button { border-left: 0; }
.segmentos button.activo { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.segmentos button:not(.activo):hover { color: var(--texto); border-color: var(--tinta); }
.segmentos button[disabled] { cursor: not-allowed; opacity: .55; }
.barra-monedas { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; padding: 12px 20px;
  background: var(--ambar-fondo); border-bottom: 1px solid var(--fino); color: var(--ambar); }
.barra-monedas form { display: flex; gap: 8px; flex-wrap: wrap; }
.barra-monedas .boton { min-width: 72px; font-weight: 500; color: var(--texto); }
.tabla-partidas .desc-partida { font-weight: 500; font-size: 17px; line-height: 1.35; margin: 2px 0; }
.tabla-partidas tr.por-revisar > td:first-child { box-shadow: inset 4px 0 0 var(--ambar); }
.tabla-partidas .acciones-partida { white-space: nowrap; text-align: right; }
.tabla-partidas .acciones-partida .boton.fantasma { min-width: 44px; }
.interna { margin: 6px 0 0; font-size: 14px; color: var(--suave); overflow-wrap: anywhere; }
.interna span { display: inline-block; margin-right: 8px; padding: 1px 6px; font: 500 12.5px var(--f-mono); letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--linea); color: var(--tenue); }
.revisar-p { margin: 10px 0 4px; padding: 10px 12px; background: var(--ambar-fondo); border-left: 3px solid var(--ambar); color: var(--texto); font-size: 15px; }
.revisar-p b { color: var(--ambar); }
.revisar-p ul { margin: 4px 0 8px; padding-left: 18px; }
.revisar-p form { margin: 0; }
.editar-partida > summary { list-style: none; margin-top: 8px; height: 44px; font-size: 15px; }
.editar-partida > summary::-webkit-details-marker { display: none; }
.editar-partida[open] > summary { background: var(--hundida); }
.importaciones { margin-bottom: 16px; }
.importacion { border-top: 1px solid var(--fino); }
.importacion:first-of-type { border-top: 0; }
.importacion > summary { padding: 14px 20px; cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 16px; }
.importacion > summary:hover { background: #FCFBF8; }
.importacion.deshecha > summary { color: var(--tenue); }
.importacion > .cuerpo { padding: 0 20px 18px; }
.comprobaciones { list-style: none; padding: 0; margin: 0 0 10px; }
.comprobaciones li { padding: 8px 12px; margin-bottom: 6px; border-left: 3px solid var(--linea); background: #FCFBF8; font-size: 15px; }
.comprobaciones li.cuadra { border-left-color: var(--verde); background: var(--verde-fondo); color: var(--verde); }
.comprobaciones li.no-cuadra { border-left-color: var(--ambar); background: var(--ambar-fondo); color: var(--ambar); }
.ambar-txt { color: var(--ambar); margin: 6px 0; }
.omitidos summary { cursor: pointer; color: var(--suave); padding: 6px 0; }
.omitidos ul { margin: 6px 0 0; padding-left: 18px; font-size: 14.5px; max-height: 280px; overflow: auto; }
.omitidos .texto-omitido { font-family: var(--f-mono); font-size: 13px; overflow-wrap: anywhere; }
.acciones-imp { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.acciones-imp form { margin: 0; }
.importar-desglose { margin: 0 0 16px; }
.importar-desglose.compacta { margin: 0; padding: 16px 20px; border-top: 1px solid var(--fino); }
.importar-desglose.compacta .soltar { padding: 16px 18px; }
.importar-desglose.compacta .soltar strong { display: block; font: 500 17px var(--f-texto); color: var(--texto); margin-bottom: 4px; }
.importar-desglose .soltar input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.importar-desglose .soltar .elegir { margin-top: 12px; }
.importar-desglose .soltar.leyendo { border-style: solid; border-color: var(--tinta); background: var(--arena-suave); }
.importar-boton { display: flex; justify-content: flex-end; margin-top: 10px; }
.importar-estado { margin: 8px 0 0; font-size: 15px; }
.nota-fija { margin: 2px 0 10px; padding: 8px 10px; background: var(--hundida); color: var(--suave); }
details.opcional { margin: 0 0 14px; }
details.opcional > summary { cursor: pointer; color: var(--suave); font-size: 15px; padding: 11px 0; }
details.opcional[open] > summary { margin-bottom: 8px; }
.fila-por-persona td { height: 40px !important; }
@media (max-width: 900px) {
  .pasos-cot { grid-template-columns: 1fr; margin-top: -8px; }
  .pasos-cot li { border-right: 0; border-bottom: 1px solid var(--fino); }
  .pasos-cot li:last-child { border-bottom: 0; }
  .acciones-cot { justify-content: flex-start; }
  .falta-enviar { text-align: left; }
  .tabla-partidas td.num[data-etiqueta]::before { content: attr(data-etiqueta) " · "; color: var(--tenue); font-size: 14px; }
  .tabla-partidas tfoot tr { padding: 10px 16px; }
  .tabla-partidas tfoot td { text-align: left !important; padding: 2px 0 !important; }
  .tabla-partidas .acciones-partida { text-align: left; padding-top: 8px !important; }
  .tabla-partidas tr.por-revisar { border-left: 4px solid var(--ambar); }
  .tabla-partidas tr.por-revisar > td:first-child { box-shadow: none; }
  .segmentos button { flex: 1 1 100%; }
  .segmentos button + button { border-left: 1px solid var(--linea); border-top: 0; }
}
.archivo-elegido { display: block; margin-top: 10px; font: 500 15px var(--f-texto); color: var(--verde); }
#soltar-nueva input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.acciones-fila { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.acciones-fila form { margin: 0; }
.acciones-fila .boton.fantasma { height: 44px; padding: 0 10px; font-size: 15px; }
.acciones-fila .editar-partida > summary { margin-top: 0; }
.acciones-fila .editar-partida[open] { flex-basis: 100%; order: 99; }
.tabla-partidas td.celda-partida { min-width: 0; }
.omitidos li { margin-bottom: 8px; }
.agregar-renglon { margin: 6px 0 0; }
.agregar-renglon .boton { height: 44px; font-size: 15px; }
@media (min-width: 901px) { .acciones-cot { margin-left: auto; } }

/* D-42 · cotizar con lo que haya: varios archivos, texto pegado, la capa mientras se lee y los tres formatos de precio */
.archivos-elegidos { list-style: none; margin: 12px 0 0; padding: 0; border: 1px solid var(--fino); background: var(--superficie); }
.archivos-elegidos li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 6px 6px 14px; border-top: 1px solid var(--fino);
  font-size: 15px; overflow-wrap: anywhere; }
.archivos-elegidos li:first-child { border-top: 0; }
.archivos-elegidos .boton { min-height: 40px; flex: none; }
.pegar-texto { margin: 12px 0 0; }
.pegar-texto > summary { cursor: pointer; color: var(--tinta); font-size: 15px; padding: 6px 0; }
.pegar-texto textarea, #forma-cot textarea { width: 100%; font: 400 16px/1.5 var(--f-texto); }
.importar-desglose.compacta .soltar { padding: 14px; }
.segmentos.tres button { flex: 1 1 180px; }
.importacion.con-error > summary { color: var(--ambar); }
.leyendo-capa { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(244, 242, 236, .94); }
.leyendo-caja { width: min(520px, 100%); padding: 32px 28px 26px; background: var(--superficie); border: 1px solid var(--linea); text-align: center; }
.leyendo-caja strong { display: block; font: 400 30px/1.15 var(--f-titulo); color: var(--texto); margin: 18px 0 10px; letter-spacing: -0.01em; }
.leyendo-caja p { margin: 0 0 8px; color: var(--suave); }
.leyendo-barra { height: 3px; background: var(--hundida); overflow: hidden; }
.leyendo-barra i { display: block; height: 100%; width: 34%; background: var(--tinta); animation: leyendo 1.6s ease-in-out infinite; }
@keyframes leyendo { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) { .leyendo-barra i { animation: none; width: 100%; opacity: .5; } }
body.con-capa { overflow: hidden; }
.barra-monedas .boton.principal { color: #fff; background: var(--tinta); border-color: var(--tinta); }
.resumen-importacion { padding: 14px 20px; border-bottom: 1px solid var(--fino); font-size: 16px; }
.resumen-importacion b { font-weight: 500; }
.mini-partida { float: right; width: 96px; height: 64px; object-fit: cover; margin: 2px 0 8px 12px; border: 1px solid var(--fino); }
@media (max-width: 700px) { .mini-partida { width: 72px; height: 48px; } }

/* D-53 · "Para terminar esta cotizacion": lo que falta, arriba, numerado y con su accion en el mismo renglon */
.terminar { margin: 0 0 20px; background: var(--superficie); border: 1px solid var(--linea); border-top: 4px solid var(--ambar); scroll-margin-top: 84px; }
.terminar > header { padding: 20px 24px 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.terminar > header h2 { font: 400 30px/1.15 var(--f-titulo); letter-spacing: -0.01em; }
.terminar .cuantas { font: 500 17px var(--f-texto); color: var(--ambar); }
.faltan { list-style: none; counter-reset: falta; margin: 0; padding: 6px 24px 10px; }
.faltan > li { counter-increment: falta; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px 16px; align-items: start;
  padding: 18px 0; border-top: 1px solid var(--fino); }
.faltan > li:first-child { border-top: 0; }
.faltan > li::before { content: counter(falta); width: 36px; height: 36px; display: grid; place-items: center; background: var(--tinta); color: #fff;
  font: 500 18px var(--f-texto); font-variant-numeric: tabular-nums; }
.faltan > li.con-renglones { grid-template-columns: 40px minmax(0, 1fr); }
.faltan > li.con-renglones > .renglones { grid-column: 2 / -1; }
.faltan .que { min-width: 0; }
.faltan .que > b { display: block; font: 500 21px/1.25 var(--f-texto); margin: 3px 0 4px; }
.faltan .que > span { display: block; color: var(--suave); font-size: 16px; }
.faltan .que b.dice { font-weight: 500; color: var(--texto); }
.monedas-un-clic { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.monedas-un-clic .boton { min-width: 72px; height: 48px; font-size: 16px; }
.renglones { list-style: none; margin: 4px 0 0; padding: 0; border: 1px solid var(--fino); }
.renglones > li { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; padding: 12px 14px; border-top: 1px solid var(--fino); }
.renglones > li:first-child { border-top: 0; }
.renglones .cual { min-width: 0; flex: 1 1 260px; }
.renglones .cual .versal { display: block; }
.renglones .cual .nombre { display: block; font: 500 17px/1.3 var(--f-texto); color: var(--texto); overflow-wrap: anywhere; }
.renglones .nota-ambar { display: block; color: var(--ambar); margin-top: 2px; }
.precio-rapido { display: grid; grid-template-columns: 140px 92px 250px auto; gap: 8px; align-items: center; margin: 0; flex: 0 1 auto; }
.precio-rapido label { margin: 0; min-width: 0; }
.precio-rapido input[type=text] { width: 100%; height: 48px; font-size: 18px; }
.precio-rapido select { width: 100%; height: 48px; font-size: 16px; }
.precio-rapido .sin-unidad { color: var(--tenue); font-size: 15px; padding-left: 4px; }
.acciones-renglon { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.acciones-renglon form { margin: 0; }
.terminar.lista { border-top-color: var(--verde); }
/* D-60: "¿Es el mismo servicio?" y las otras preguntas, en grande y con la respuesta a un clic */
.faltan > li.pregunta { grid-template-columns: 40px minmax(0, 1fr); background: var(--ambar-fondo); margin: 0 -12px; padding: 18px 12px; }
.faltan > li.pregunta > .comparar, .faltan > li.pregunta > .respuestas, .faltan > li.pregunta > .candidatas { grid-column: 2 / -1; }
.faltan .que > b.pregunta-titulo { font: 400 27px/1.2 var(--f-titulo); letter-spacing: -0.01em; }
.faltan .que .cita-archivo { font-weight: 500; color: var(--texto); overflow-wrap: anywhere; }
.comparar { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.comparar .lado { background: var(--superficie); border: 1px solid var(--linea); padding: 12px 14px; min-width: 0; }
.comparar .lado .versal, .comparar .lado span { display: block; }
.comparar .lado b { display: block; font: 500 18px/1.3 var(--f-texto); margin: 2px 0; overflow-wrap: anywhere; }
.respuestas { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; }
.respuestas .boton { min-height: 48px; height: auto; font-size: 16px; white-space: normal; max-width: 100%; text-align: left; overflow-wrap: anywhere; padding-top: 8px; padding-bottom: 8px; }
.candidatas { margin: 0; padding-left: 18px; }
.aparece-en { margin-top: 2px; overflow-wrap: anywhere; }
.lista-para-enviar { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; padding: 18px 24px; }
.lista-para-enviar h2 { font: 400 30px/1.15 var(--f-titulo); color: var(--verde); }
.lista-para-enviar span { display: block; color: var(--suave); font-size: 16px; margin-top: 2px; }
.resumen-importacion p { margin: 0; }
.resumen-importacion .grande { font: 500 19px/1.35 var(--f-texto); }
.resumen-importacion .desglose-archivos { margin-top: 4px; font-size: 16px; color: var(--suave); }
.importacion.sin-resultado > summary { color: var(--suave); }
.lista-sin-resultado { list-style: none; margin: 0; padding: 0 20px 14px; }
.lista-sin-resultado > li { padding: 12px 0; border-top: 1px solid var(--fino); }
.lista-sin-resultado > li:first-child { border-top: 0; }
.lista-sin-resultado p { margin: 4px 0 0; }
.lista-sin-resultado .acciones-imp { margin-top: 8px; }
.lista-sin-resultado li.deshecha b { color: var(--tenue); }
@media (max-width: 700px) {
  .terminar > header { padding: 16px 16px 4px; }
  .terminar > header h2, .lista-para-enviar h2 { font-size: 25px; }
  .faltan { padding: 4px 16px 8px; }
  .faltan > li, .faltan > li.con-renglones { grid-template-columns: 32px minmax(0, 1fr); gap: 8px 12px; }
  .faltan > li::before { width: 30px; height: 30px; font-size: 16px; }
  .faltan > li > form, .faltan > li > .boton { grid-column: 1 / -1; }
  .faltan > li.pregunta { grid-template-columns: 32px minmax(0, 1fr); margin: 0 -8px; padding: 16px 8px; }
  .faltan > li.pregunta > .comparar, .faltan > li.pregunta > .respuestas, .faltan > li.pregunta > .candidatas { grid-column: 1 / -1; }
  .faltan .que > b.pregunta-titulo { font-size: 23px; }
  .respuestas .boton { flex: 1 1 100%; }
  .faltan > li.con-renglones > .renglones { grid-column: 1 / -1; }
  .faltan .que > b { font-size: 19px; }
  .precio-rapido { width: 100%; grid-template-columns: minmax(0, 1fr) 92px; }
  .precio-rapido > label:nth-of-type(3), .precio-rapido .sin-unidad, .precio-rapido .boton { grid-column: 1 / -1; }
  .precio-rapido .sin-unidad { display: none; }
  .lista-para-enviar { padding: 16px; }
}

/* D-46 · servicios del viaje: agregar a mano, editar todo, quitar y restaurar (esquinas rectas como todo, D-17) */
#servicios { margin-top: 24px; scroll-margin-top: 84px; }
.aviso-hecho { background: var(--verde-fondo); border-left-color: var(--verde); color: var(--verde); font-weight: 500; }
#servicios > header .boton { margin-left: auto; }
.lista-servicios { list-style: none; margin: 0; padding: 0; }
.lista-servicios li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--fino); }
.lista-servicios li:last-child { border-bottom: 0; }
.lista-servicios .ico { width: 20px; height: 20px; color: var(--tinta-2); align-self: start; margin-top: 3px; }
.que-servicio { min-width: 0; }
.que-servicio b { font-weight: 500; font-size: 17px; overflow-wrap: anywhere; }
.tipo-servicio { display: inline-block; font: 500 12.5px var(--f-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); margin-right: 8px; }
.faltan-datos { color: var(--ambar); }
.acciones-servicio, .acciones-reserva { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.acciones-servicio form, .acciones-reserva form { margin: 0; }
.acciones-servicio .boton, .acciones-reserva .boton { height: 44px; font-size: 15px; }
.acciones-reserva { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--fino); }
.lista-servicios li.quitado .que-servicio b { color: var(--suave); text-decoration: line-through; text-decoration-color: var(--linea); }
.vacio-servicios { margin: 10px 0 0; color: var(--suave); }
.quitados { margin-top: 14px; border-top: 1px solid var(--linea); }
.quitados > summary { cursor: pointer; min-height: 46px; display: flex; align-items: center; gap: 10px; color: var(--suave); font-weight: 500; list-style: none; }
.quitados > summary::-webkit-details-marker { display: none; }
.quitados > summary::before { content: "+"; font: 500 18px/1 var(--f-mono); color: var(--tinta); width: 14px; }
.quitados[open] > summary::before { content: "\2212"; }
.quitados > summary:hover { color: var(--texto); }
/* el formulario: el mismo en su pagina (sin JavaScript) y en el cuadro de dialogo */
.servicio-forma > header { padding: 14px 18px; border-bottom: 1px solid var(--fino); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.servicio-forma > header strong { display: block; font: 500 22px/1.25 var(--f-titulo); overflow-wrap: anywhere; }
.servicio-forma > .cuerpo { padding: 18px; }
.tipos-servicio { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.tipos-servicio .boton { height: 64px; justify-content: flex-start; font-size: 17px; padding: 0 18px; white-space: normal; text-align: left; }
.tipos-servicio .boton svg { width: 22px; height: 22px; color: var(--tinta-2); flex: none; }
.rejilla-servicio { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px 18px; margin-top: 6px; align-items: start; }
.dato-servicio { min-width: 0; }
.dato-servicio label.campo { margin-bottom: 4px; }
.dato-servicio .obligatorio { font: 500 12.5px var(--f-texto); letter-spacing: 0; text-transform: none; color: var(--rojo); margin-left: 4px; }
.dato-servicio .ayuda { margin: 0 0 4px; font-size: 14px; color: var(--tenue); }
.dato-servicio .error-dato { margin: 0 0 6px; font-size: 14.5px; font-weight: 500; color: var(--rojo); }
.dato-servicio [aria-invalid="true"] { border-color: var(--rojo); }
.dato-servicio .falta-dato { margin: 0 0 6px; font-size: 14px; color: var(--ambar); }
.dato-servicio.se-quita input:not([type=checkbox]), .dato-servicio.se-quita select, .dato-servicio.se-quita textarea { text-decoration: line-through; opacity: .5; }
.dato-servicio textarea { min-height: 0; resize: vertical; }
.quitar-dato { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-bottom: 8px; font-size: 14.5px; color: var(--suave); cursor: pointer; }
.quitar-dato input { width: 20px; height: 20px; margin: 0; accent-color: var(--rojo); }
.pie-servicio { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.pie-servicio .espacio { flex: 1; }
/* un formulario largo (el crucero lleva 20 datos) se lee por bloques; las escalas se ven pero no se editan */
.rejilla-servicio .bloque-servicio, .escalas-servicio .bloque-servicio { grid-column: 1 / -1; margin: 10px 0 0; padding-top: 12px; border-top: 1px solid var(--fino); font: 500 12.5px var(--f-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.escalas-servicio { margin-top: 14px; }
.escalas-servicio .chico { margin: 6px 0 8px; }
.lista-escalas { list-style: none; margin: 0; padding: 0; }
.lista-escalas li { display: grid; grid-template-columns: minmax(150px, 13em) minmax(0, 1fr); gap: 2px 14px; padding: 8px 0; border-bottom: 1px solid var(--fino); font-size: 16px; }
.lista-escalas li:last-child { border-bottom: 0; }
.fecha-escala { color: var(--suave); }
.lugar-escala { overflow-wrap: anywhere; }
.quitar-servicio { display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: center; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--fino); }
.quitar-servicio .boton { height: 44px; padding: 0 10px; color: var(--rojo); }
@media (max-width: 900px) {
  #servicios > header .boton { margin-left: 0; width: 100%; }
  .rejilla-servicio { grid-template-columns: minmax(0, 1fr); }
  .tipos-servicio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tipos-servicio .boton { height: 58px; font-size: 16px; padding: 0 12px; }
  .lista-servicios li { grid-template-columns: 20px minmax(0, 1fr); }
  .lista-servicios li > .acciones-servicio { grid-column: 1 / -1; }
  .acciones-servicio { width: 100%; }
  .acciones-servicio .boton, .acciones-servicio form { flex: 1 1 auto; }
  .acciones-servicio form .boton { width: 100%; }
  .pie-servicio .boton { flex: 1 1 auto; }
  .pie-servicio .espacio { display: none; }
  .lista-escalas li { grid-template-columns: minmax(0, 1fr); }
}

/* «Por confirmar» (D-52): el problema en grande, la reserva sin ambiguedad, el documento y las salidas. Cada pendiente se
   entiende en tres segundos: que falta, de cual servicio (tren 9523, no "un tren"), en que dia y en que documento. */
.por-confirmar, .mesa .dia { scroll-margin-top: 84px; }
@media (max-width: 900px) { .por-confirmar, .mesa .dia { scroll-margin-top: 150px; } }
.pc-cabeza { padding: 18px 20px; border-bottom: 1px solid var(--linea); border-top: 4px solid var(--tenue); }
.pc-cabeza.rojo { border-top-color: var(--rojo); } .pc-cabeza.ambar { border-top-color: #C98A1B; } .pc-cabeza.listo { border-top-color: var(--verde); }
.pc-cuenta { display: flex; gap: 14px; align-items: center; }
.pc-num { font: 400 52px/1 var(--f-titulo); min-width: 46px; text-align: center; color: var(--texto); }
.pc-cabeza.rojo .pc-num { color: var(--rojo); } .pc-cabeza.ambar .pc-num { color: var(--ambar); }
.pc-listo { width: 40px; height: 40px; color: var(--verde); flex: none; }
.pc-frase { font: 500 21px/1.25 var(--f-titulo); letter-spacing: -0.005em; margin: 0; text-transform: none; }
.pc-sub { margin-top: 4px; font-size: 14.5px; color: var(--suave); display: flex; flex-wrap: wrap; gap: 2px 8px; }
.pc-sub b { font-weight: 500; } .pc-sub b.rojo { color: var(--rojo); } .pc-sub b.ambar { color: var(--ambar); }
.pc-sub span { flex-basis: 100%; }
.pc-hecho { margin: 12px 20px 0; }
/* D-66 (Ale, 14-oct: "es como una cosa infinita"): tres secciones con divisor claro, una tarjeta por problema */
.pc-seccion { border-bottom: 1px solid var(--linea); }
.pc-sec-titulo { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 20px 0; font: 500 14px/1.4 var(--f-texto);
  letter-spacing: 0.1em; text-transform: uppercase; border-top: 4px solid var(--tenue); }
.pc-sec-sub { margin: 0; padding: 2px 20px 12px; font-size: 14.5px; color: var(--suave); border-bottom: 1px solid var(--fino); }
.pc-seccion.urgente .pc-sec-titulo { color: var(--rojo); border-top-color: var(--rojo); }
.pc-seccion.urgente .pc-sec-titulo, .pc-seccion.urgente .pc-sec-sub { background: var(--rojo-fondo); }
.pc-seccion.por-confirmar .pc-sec-titulo { color: var(--ambar); border-top-color: #C98A1B; }
.pc-seccion.por-confirmar .pc-sec-titulo, .pc-seccion.por-confirmar .pc-sec-sub { background: var(--ambar-fondo); }
.pc-sec-n { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 7px;
  font: 500 14px/1 var(--f-texto); letter-spacing: 0; color: #fff; background: var(--tenue); }
.pc-seccion.urgente .pc-sec-n { background: var(--rojo); } .pc-seccion.por-confirmar .pc-sec-n { background: var(--ambar); }
.pc-sobre { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 6px; font-size: 14.5px; color: var(--suave); }
.pc-sobre .ico { width: 18px; height: 18px; margin-top: 2px; color: var(--tinta); flex: none; }
.pc-sobre > span { min-width: 0; overflow-wrap: anywhere; }
.pc-tipo { font: 500 12.5px/1.4 var(--f-texto); letter-spacing: 0.08em; text-transform: uppercase; color: var(--suave); }
.pc-nombre { font-weight: 500; color: var(--texto); }
.pc-ruta { color: var(--texto); }
.pc-sobre b { font-weight: 500; color: var(--texto); }
.pc-sobre a { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; white-space: nowrap; }
.pc-veces { font-weight: 400; font-size: 15px; color: var(--suave); }
.pc-filas { margin: 12px 0 0; display: grid; gap: 10px; }
.pc-fila { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 4px 12px; align-items: start; }
.pc-fila dt { font: 500 13px/1.4 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--suave); padding-top: 4px; }
.pc-fila dd { margin: 0; font-size: 15px; color: var(--texto); min-width: 0; }
.pc-fuentes { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-item .pc-fuente { display: inline-flex; align-items: flex-start; gap: 8px; height: auto; min-height: 40px; max-width: 100%; padding: 8px 12px;
  font-size: 14.5px; line-height: 1.35; white-space: normal; text-align: left; color: var(--tinta); background: var(--superficie);
  border: 1px solid var(--linea); }
.pc-item .pc-fuente:hover { border-color: var(--tinta); text-decoration: none; }
.pc-item .pc-fuente svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.pc-item .pc-fuente b { font-weight: 500; overflow-wrap: anywhere; }
.pc-mas > summary { display: flex; align-items: center; min-height: 48px; padding: 10px 20px; cursor: pointer; font-weight: 500; color: var(--tinta);
  border-top: 1px solid var(--fino); }
.pc-mas[open] > summary { border-bottom: 1px solid var(--fino); }
.pc-item { padding: 16px 20px 18px; border-left: 4px solid var(--tenue); }
.pc-item + .pc-item, .pc-mas .pc-item + .pc-item { border-top: 1px solid var(--fino); }
.pc-item.rojo { border-left-color: var(--rojo); } .pc-item.ambar { border-left-color: #C98A1B; }
.pc-problema { font: 500 19px/1.35 var(--f-texto); margin: 0; color: var(--texto); }
.pc-detalle { margin: 6px 0 0; font-size: 15px; color: var(--suave); }
.pc-item .acciones { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.pc-item .acciones form { margin: 0; }
.pc-item .acciones .boton { height: 44px; font-size: 15px; padding: 0 14px; }
.pc-item .acciones .boton.principal { height: 44px; }
/* D-69: una reserva con varias preguntas es una tarjeta; cada pregunta, numerada, con sus botones */
.pc-preguntas { list-style: none; margin: 10px 0 0; padding: 0; counter-reset: pc-preg; }
.pc-pregunta { counter-increment: pc-preg; position: relative; padding: 12px 0 12px 14px; border-left: 3px solid #C98A1B; }
.pc-pregunta.rojo { border-left-color: var(--rojo); }
.pc-pregunta + .pc-pregunta { margin-top: 10px; }
.pc-pregunta .pc-problema { font-size: 17px; }
.pc-pregunta .pc-problema::before { content: counter(pc-preg) ". "; color: var(--suave); }
.pc-ver { margin: 8px 0 0; }
/* D-56: sugerencias suaves (no cuentan, no bloquean) */
.pc-sugerencias { padding: 14px 20px 16px; border-bottom: 1px solid var(--linea); background: var(--fondo); }
.pc-sug-titulo { margin: 0 0 6px; font: 500 12.5px/1.4 var(--f-texto); letter-spacing: 0.08em; text-transform: uppercase; color: var(--suave); }
.pc-sug-titulo span { text-transform: none; letter-spacing: 0; }
.pc-sug + .pc-sug { border-top: 1px solid var(--fino); margin-top: 10px; padding-top: 10px; }
.pc-sug p { margin: 0; font-size: 16px; color: var(--texto); }
.pc-sug .acciones { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.pc-sug .acciones form { margin: 0; }
.pc-sug .acciones .boton { height: 40px; font-size: 14.5px; padding: 0 12px; }
/* D-56: lo que esta en juego, en grande, antes de cualquier boton */
.pc-valor { margin: 10px 0 0; padding: 10px 14px 12px; background: var(--fondo); border: 1px solid var(--fino); display: flex; flex-direction: column; gap: 2px; }
.pc-valor-et { font: 500 13px/1.4 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--suave); }
.pc-valor-v { font: 500 22px/1.3 var(--f-texto); color: var(--texto); overflow-wrap: anywhere; }
.pc-valor.falta .pc-valor-v { font-style: italic; font-weight: 400; color: var(--suave); }
.pc-valor-2 { font-size: 15px; color: var(--suave); overflow-wrap: anywhere; }
.pc-item .acciones .boton.pc-si { height: auto; min-height: 44px; padding: 8px 14px; white-space: normal; text-align: left; line-height: 1.3; }
.pc-item .foto-dudosa { display: block; width: 100%; max-width: 360px; aspect-ratio: 16 / 10; object-fit: cover; margin: 10px 0 0; border: 1px solid var(--fino); }
.pc-plegado { border-bottom: 1px solid var(--fino); }
.pc-plegado:last-child { border-bottom: 0; }
.pc-plegado > summary { padding: 14px 20px; cursor: pointer; font-weight: 500; color: var(--suave); }
.pc-plegado ul, .pc-plegado ol { margin: 0; padding: 0 20px 14px 20px; list-style: none; }
.pc-plegado li { padding: 8px 0; border-top: 1px solid var(--fino); }
.pc-cinco li { display: flex; gap: 10px; align-items: flex-start; }
.pc-cinco .punto { margin-top: 8px; }
.nota-hotel { margin-top: 8px; color: var(--suave); display: flex; gap: 4px 10px; flex-wrap: wrap; }
.nota-hotel .sin-fotos { color: var(--ambar); font-weight: 500; }
.nota-hotel a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (max-width: 900px) {
  .pc-cabeza, .pc-item { padding-left: 16px; padding-right: 16px; }
  .pc-sec-titulo, .pc-sec-sub, .pc-mas > summary { padding-left: 16px; padding-right: 16px; }
  .pc-fila { grid-template-columns: minmax(0, 1fr); }
  .pc-fila dt { padding-top: 0; }
  .pc-num { font-size: 44px; }
  .pc-item .acciones .boton, .pc-item .acciones form { flex: 1 1 auto; }
  .pc-item .acciones form .boton { width: 100%; }
}

/* «No, es otro» (D-52): una pantalla con las cuatro salidas del hotel que no es */
.ho-voucher { font-size: 18px; margin: 10px 0 0; color: var(--texto); }
.ho-voucher b { font-weight: 500; }
.ho-actual { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--verde-fondo);
  border: 1px solid var(--linea); border-left: 4px solid var(--verde); padding: 16px 20px; margin-bottom: 20px; }
.ho-actual p { margin: 2px 0 0; }
.ho-grande { font: 500 19px/1.3 var(--f-texto); margin: 2px 0 0; overflow-wrap: anywhere; }
.ho-link { overflow-wrap: anywhere; }
.ho-bloque { background: var(--superficie); border: 1px solid var(--linea); padding: 20px 22px; margin-bottom: 16px; }
.ho-bloque > p { margin: 4px 0 12px; }
.ho-titulo { font: 500 21px/1.3 var(--f-titulo); display: flex; gap: 12px; align-items: baseline; margin: 0; letter-spacing: 0; }
.ho-n { font: 500 14px var(--f-mono); color: var(--arena-suave); background: var(--tinta); padding: 2px 9px; }
.ho-encontrado { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 12px; }
.ho-encontrado p { margin: 0 0 4px; }
.ho-encontrado img, .ho-opciones img, .ho-sin-foto { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--fino); display: block; }
.ho-sin-foto { display: grid; place-items: center; background: var(--hundida); color: var(--tenue); font-size: 14px; }
.ho-opciones { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.ho-opciones li { border: 1px solid var(--linea); display: flex; flex-direction: column; }
.ho-op-texto { padding: 12px 14px 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.ho-op-texto b { font: 500 17px/1.3 var(--f-texto); overflow-wrap: anywhere; }
.ho-op-texto .suave { font-size: 14.5px; }
.ho-opciones li > .boton { margin: 12px 14px 14px; }
.ho-fila { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.ho-fila .campo { flex: 1 1 320px; margin-bottom: 0; }
.ho-fila-2 .campo { flex: 1 1 240px; }
.ho-bloque .aviso { margin: 12px 0 0; }
.ho-ninguno { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 18px 22px;
  border: 1px dashed var(--linea); background: var(--superficie); }
.ho-ninguno > div { flex: 1 1 320px; }
@media (max-width: 900px) {
  .ho-encontrado { grid-template-columns: minmax(0, 1fr); }
  .ho-bloque, .ho-ninguno { padding: 16px; }
  .ho-fila .boton, .ho-ninguno .boton, .ho-actual .boton, .ho-actual form { width: 100%; }
}

/* D-55 · la cotizacion moldeable: atajos, interruptores del final y el precio de cada partida junto a su nombre */
.atajos { align-items: stretch; }
.atajos .personalizado { display: none; min-height: 46px; padding: 8px 16px; border: 1px solid var(--tinta); border-left: 0; background: var(--tinta);
  color: #fff; font: 500 15px var(--f-texto); align-items: center; }
.atajos .personalizado.activo { display: inline-flex; }
.descripcion-atajo { margin: 8px 0 0; max-width: 72ch; }
.ajustes-precios { margin: 14px 0 0; border-top: 1px solid var(--fino); }
.ajustes-precios fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.ajuste { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 6px 16px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--fino); }
.ajuste > .opciones, .ajuste > .total-manual, .ajuste > .pista, .ajuste > .casilla-ajuste, .ajuste > .junto-texto { grid-column: 2; }
.nombre-ajuste { font: 500 15px/1.3 var(--f-texto); color: var(--texto); padding-top: 11px; }
.opciones { display: flex; flex-wrap: wrap; }
.opciones label { position: relative; margin: 0; }
.opciones input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opciones span { display: flex; align-items: center; min-height: 44px; padding: 8px 14px; border: 1px solid var(--linea); background: var(--superficie);
  color: var(--suave); font: 500 15px var(--f-texto); }
.opciones label + label span { border-left: 0; }
.opciones input:checked + span { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.opciones input:focus-visible + span { outline: 2px solid var(--tinta); outline-offset: 2px; }
.opciones label:hover input:not(:checked) + span { color: var(--texto); }
fieldset[disabled] .opciones span { opacity: .55; }
.total-manual { display: grid; grid-template-columns: minmax(0, 220px) 96px; gap: 8px; margin-top: 4px; }
.total-manual[hidden] { display: none; }
.total-manual input, .total-manual select { width: 100%; height: 46px; font-size: 17px; }
.pista { margin: 2px 0 0; font-size: 14px; color: var(--tenue); }
.casilla-ajuste { display: flex; gap: 10px; align-items: center; min-height: 44px; margin: 0; cursor: pointer; }
.casilla-ajuste input { width: 22px; height: 22px; accent-color: var(--tinta); flex: none; }
.guardar-ajustes { display: flex; justify-content: flex-end; padding: 10px 0 0; }
.junto-servicio { margin-top: 14px; border-top: 1px solid var(--fino); }
.junto-servicio + .ajustes-precios { margin-top: 0; border-top: 0; }
.junto-texto { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; padding-top: 6px; }
.junto-texto .acciones-renglon .boton { height: 40px; font-size: 15px; }
.ve-precio { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.interruptor { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 0; border: 0; background: none; cursor: pointer;
  color: var(--suave); font: 400 15px var(--f-texto); text-align: left; }
.interruptor i { position: relative; flex: none; width: 40px; height: 22px; border: 1px solid var(--linea); background: var(--hundida); transition: background .15s; }
.interruptor i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--superficie);
  border: 1px solid var(--linea); transition: transform .15s; }
.interruptor.encendido { color: var(--texto); }
.interruptor.encendido i { background: var(--tinta); border-color: var(--tinta); }
.interruptor.encendido i::after { transform: translateX(18px); border-color: var(--tinta); }
.interruptor:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .interruptor i, .interruptor i::after { transition: none; } }
.precio-en-fila > summary { list-style: none; height: 44px; font-size: 15px; }
.precio-en-fila > summary::-webkit-details-marker { display: none; }
.precio-en-fila[open] { flex-basis: 100%; order: 98; padding: 10px 0 4px; }
.precio-en-fila[open] > summary { background: var(--hundida); }
.precio-fila { display: grid; grid-template-columns: minmax(0, 180px) 92px auto; gap: 8px; align-items: center; margin: 10px 0 0; }
.precio-fila label { margin: 0; min-width: 0; }
.precio-fila input[type=text] { width: 100%; height: 46px; font-size: 17px; }
.precio-fila select { width: 100%; height: 46px; font-size: 16px; }
.renglones > li.otra-salida { background: var(--arena-suave); }
.renglones .cual .chico { display: block; margin-top: 2px; }
.total-rapido { grid-template-columns: 160px 92px auto; }
.sin-bloquear { margin: 0 24px 18px; padding: 14px 16px; background: #FCFBF8; border: 1px solid var(--fino); }
.sin-bloquear > ul { margin: 6px 0 0; padding-left: 18px; }
.sin-bloquear > ul > li { margin: 6px 0; }
.sin-bloquear > ul > li > b { font-weight: 500; }
.sin-bloquear .renglones { margin-top: 8px; background: var(--superficie); }
.fila-total-cliente td { border-top: 1px solid var(--fino); }
@media (max-width: 700px) {
  .ajuste { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ajuste > .opciones, .ajuste > .total-manual, .ajuste > .pista, .ajuste > .casilla-ajuste, .ajuste > .junto-texto { grid-column: 1; }
  .nombre-ajuste { padding-top: 0; }
  .opciones label { flex: 1 1 0; min-width: 0; }
  .opciones span { justify-content: center; text-align: center; padding: 8px 6px; font-size: 14.5px; line-height: 1.2; }
  .atajos .personalizado { flex: 1 1 100%; border-left: 1px solid var(--tinta); border-top: 0; }
  .total-manual { grid-template-columns: minmax(0, 1fr) 92px; }
  .precio-fila, .total-rapido { width: 100%; grid-template-columns: minmax(0, 1fr) 92px; }
  .precio-fila .boton, .total-rapido .boton { grid-column: 1 / -1; }
  .sin-bloquear { margin: 0 16px 16px; }
}

/* D-62: la Biblioteca pulida. Lo suyo primero (el «para qué» se pliega cuando ya hay fichas), filtros a la vista con su
   cuenta, cada estado vacio con salida, y en la ficha las fotos arriba: es lo que ve el cliente. */
.agregar-bib { display: flex; gap: 8px; flex-wrap: wrap; }
.para-que-caja { margin: 0 0 18px; }
.para-que-caja > summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; font: 500 16px var(--f-texto); color: var(--texto); }
.para-que-caja[open] > summary { margin-bottom: 8px; }
.tipos-bib { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.tipos-bib a { display: inline-flex; align-items: center; gap: 6px; min-height: var(--toque); padding: 0 16px; border: 1px solid var(--linea);
  background: var(--superficie); color: var(--texto); font: 400 16px var(--f-texto); text-decoration: none; }
.tipos-bib a svg { width: 18px; height: 18px; }
.tipos-bib a span { color: var(--suave); font-size: 14px; }
.tipos-bib a[aria-current] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.tipos-bib a[aria-current] span { color: rgba(255,255,255,.75); }
.buscar-bib { display: flex; gap: 8px; margin: 0 0 10px; flex-wrap: wrap; }
.buscar-bib input[type=search] { flex: 1 1 280px; max-width: 460px; min-width: 0; }
.cuantos-bib { margin: 0 0 12px; }
.sin-foto-bib { display: grid; gap: 4px; text-align: center; color: var(--suave); font-size: 15px; }
.sin-foto-bib small { font-size: 13.5px; color: var(--tenue); }
.datos-bib { padding: 12px 14px 14px; }
.nombre-bib { font-weight: 500; font-size: 17px; margin-top: 2px; }
.vacio .vacio-titulo { font: 400 26px var(--f-titulo); color: var(--texto); margin: 0 0 6px; }
.vacio-botones { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.aviso-accion { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.aviso-accion > span { flex: 1 1 320px; }
.fotos-ficha { margin-bottom: 20px; }
.fotos-ficha .rejilla-fotos { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.foto-editable.es-portada { grid-column: span 2; grid-row: span 2; }
.foto-editable.es-portada img { aspect-ratio: 4 / 3; }
.acciones-foto { display: flex; gap: 6px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
.subir-fotos { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--fino); }
.subir-fotos .campo { flex: 1 1 320px; margin-bottom: 0; }
.forma-ficha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; }
.forma-ficha .ancho { grid-column: 1 / -1; }
.pie-ficha { border-top: 1px solid var(--fino); display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.usos-ficha, .archivar-ficha { margin-top: 20px; }
.lista-usos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista-usos li { display: flex; gap: 10px; align-items: baseline; }
.archivar-ficha .cuerpo { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
@media (max-width: 700px) {
  .forma-ficha { grid-template-columns: 1fr; }
  .foto-editable.es-portada { grid-column: auto; grid-row: auto; }
  .fotos-ficha .rejilla-fotos { grid-template-columns: 1fr 1fr; }
  .agregar-bib .boton, .pie-ficha .boton, .subir-fotos .boton { flex: 1 1 100%; }
  .tipos-bib a { padding: 0 12px; }
}
/* los desplegables con display:flex pierden el triangulo del navegador: se dibuja uno que si se ve */
.para-que-caja > summary, .fechas-carta > summary, .otra-carta > summary, .versiones-carta > summary { list-style: none; gap: 10px; }
.para-que-caja > summary::-webkit-details-marker, .fechas-carta > summary::-webkit-details-marker,
.otra-carta > summary::-webkit-details-marker, .versiones-carta > summary::-webkit-details-marker { display: none; }
.para-que-caja > summary::before, .fechas-carta > summary::before, .otra-carta > summary::before, .versiones-carta > summary::before {
  content: ""; width: 0; height: 0; border-left: 7px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  transition: transform .15s; flex: 0 0 auto; }
.para-que-caja[open] > summary::before, .fechas-carta[open] > summary::before, .otra-carta[open] > summary::before,
.versiones-carta[open] > summary::before { transform: rotate(90deg); }
/* al volver de subir fotos o de cambiar la carta, la barra fija no tapa el titulo del bloque */
#fotos, #toque, #cambiar, #versiones { scroll-margin-top: 84px; }
@media (max-width: 900px) { #fotos, #toque, #cambiar, #versiones { scroll-margin-top: 140px; } }

/* D-61: el interruptor de las ideas de los dias libres, en una linea dentro de "Enviar al viajero" */
.ideas-libres { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 10px 0 14px; border-bottom: 1px solid var(--fino); margin-bottom: 12px; }
.ideas-libres > div { flex: 1 1 260px; min-width: 0; }

/* D-64: Borrar y la Papelera. Borrar se ve y se encuentra, pero en voz baja (rojo solo en el texto); eliminar para siempre
   es la unica accion de toda la app con fondo rojo, y solo aparece en la Papelera. */
.boton.fantasma.peligro, .boton.fantasma.borrar-fila { color: var(--rojo); }
.boton.fantasma.peligro:hover, .boton.fantasma.borrar-fila:hover { color: var(--rojo); }
.boton.peligro-lleno { background: var(--rojo); border-color: var(--rojo); color: #fff; height: 48px; padding: 0 22px; }
.boton.peligro-lleno:hover { background: #7E1B13; border-color: #7E1B13; }
.tabla th.col-borrar, .tabla td.col-borrar { width: 56px; padding-left: 4px; padding-right: 8px; text-align: right; }
.boton.borrar-fila { width: 44px; padding: 0; }
.boton.borrar-fila .solo-telefono { display: none; }
.botones-aviso { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.botones-aviso .boton.fantasma { color: var(--verde); }
.tabla-papelera .titulo-papelera { font-weight: 500; margin-left: 4px; }
.tabla-papelera .acciones-papelera { text-align: right; white-space: nowrap; }
.tabla-papelera .acciones-papelera form { display: inline-block; margin-left: 6px; }
.tabla-papelera .quedan-pocos { color: var(--ambar); font-weight: 500; }
.confirmar-papelera .cosa-a-borrar { font: 400 24px/1.3 var(--f-titulo); margin: 0 0 12px; overflow-wrap: anywhere; }
.confirmar-papelera .que-pasa { margin: 0 0 20px; padding-left: 20px; max-width: 640px; }
.confirmar-papelera .que-pasa li { margin-bottom: 6px; }
.confirmar-papelera .acciones-confirmar { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 900px) {
  .tabla td.col-borrar { width: auto; padding: 6px 0 0; text-align: left; border-top: 1px solid var(--fino); margin-top: 8px; }
  .boton.borrar-fila { width: auto; height: 40px; padding: 0 4px; }
  .boton.borrar-fila .solo-telefono { display: inline; }
  .tabla-papelera .acciones-papelera { text-align: left; white-space: normal; padding-top: 10px; }
  .tabla-papelera .acciones-papelera form { margin: 0 6px 6px 0; }
}
/* D-68: Mi cuenta (usuario o correo propio y contrasena) y el equipo ordenado en Ajustes */
.form-cuenta { display: grid; gap: 12px; align-items: end; }
.form-clave { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
.form-identificador { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; border-bottom: 1px solid var(--fino); }
.form-cuenta .subtitulo-cuenta { grid-column: 1 / -1; margin: 0; font: 500 13px/1.4 var(--f-texto, inherit); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.equipo-baja { border-top: 1px solid var(--fino); }
.equipo-baja > summary { cursor: pointer; padding: 14px 20px; list-style: none; font-weight: 500; }
.equipo-baja > summary::-webkit-details-marker { display: none; }
.equipo-baja > summary::before { content: "+"; display: inline-block; width: 1.2em; color: var(--suave); }
.equipo-baja[open] > summary::before { content: "−"; }
.equipo-baja .tabla tr { opacity: .85; }
.acciones-persona { text-align: right; white-space: nowrap; }
.acciones-persona form { display: inline; }
@media (max-width: 700px) {
  .form-clave, .form-identificador { grid-template-columns: minmax(0, 1fr); }
  .form-cuenta .boton { justify-self: start; }
  .acciones-persona { text-align: left; white-space: normal; }
  .acciones-persona form { display: inline-block; margin: 0 6px 6px 0; }
}
/* D-68: los lugares que se recomiendan al viajero, con su casilla */
.recomendaciones-viaje { border-top: 1px solid var(--fino); padding: 12px 0 4px; }
.recomendaciones-viaje > summary { cursor: pointer; }
.recos-destino { border-top: 1px dashed var(--fino); padding: 12px 0; display: grid; gap: 8px; }
.recos-destino .boton { justify-self: start; }
.recos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.recos-lista .casilla { display: flex; gap: 10px; align-items: flex-start; min-height: 32px; }
.recos-lista .casilla input[type=checkbox] { margin-top: 4px; flex: none; width: 18px; height: 18px; }
.recos-lista .casilla span { min-width: 0; overflow-wrap: anywhere; }
/* D-68: visas y autorizaciones en la pantalla del viaje */
.visas-viaje { border-top: 1px solid var(--fino); padding: 12px 0; }
.visas-viaje ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.visas-viaje li { display: flex; flex-wrap: wrap; gap: 4px 12px; overflow-wrap: anywhere; }

/* D-67: subir sin perder nada. La lista suma, se quita uno por uno; el resumen dice lo que no entro y por que. */
.elegir-mas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 0; }
.elegir-mas:empty { display: none; }
.seleccion { margin: 12px 0 0; }
.seleccion:empty { margin: 0; }
.sel-cab { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.sel-cab .boton { margin-left: auto; }
.sel-lista { max-height: 360px; overflow-y: auto; margin-top: 8px; }
.talones.sel-lista li { grid-template-columns: 52px minmax(0, 1fr) auto auto; padding: 6px 6px 6px 12px; }
.talones .nom small.carpeta { display: block; font: 400 12.5px var(--f-texto); color: var(--tenue); overflow: hidden; text-overflow: ellipsis; }
.quitar-uno { min-height: 44px; min-width: 44px; padding: 0 10px; border: 0; background: transparent; color: var(--suave); font: 500 14px var(--f-texto);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.quitar-uno:hover { color: var(--rojo); }
.sel-fuera { margin-top: 10px; padding: 10px 14px; border-left: 3px solid #C98A1B; background: var(--ambar-fondo); font-size: 14.5px; }
.sel-fuera ul, .resumen-subida ul, .resumen-lectura ul { margin: 6px 0 0; padding-left: 18px; }
.sel-fuera li, .resumen-subida li { overflow-wrap: anywhere; }
.subir-ya { width: 100%; margin-top: 10px; }
.subiendo { padding: 12px 14px; margin-top: 12px; }
.subiendo .progreso { margin-top: 8px; }
.resumen-subida { margin-top: 12px; }
.resumen-subida .resumen-titulo { display: block; font-size: 17px; margin-bottom: 2px; }
.resumen-subida .resumen-sub { margin: 10px 0 0; font-weight: 500; }
.resumen-subida .rojo-txt { color: var(--rojo); }
.resumen-subida .boton { margin-top: 10px; margin-right: 8px; }
.resumen-lectura { margin-top: 12px; font-size: 14.5px; }
.resumen-lectura li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; justify-content: space-between; padding: 2px 0; }
.resumen-lectura li span { min-width: 0; overflow-wrap: anywhere; }
.pie-crear { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.leyendo-fila { color: var(--tinta); }
.lectura-flotante { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding: 8px 32px;
  background: var(--superficie); border-bottom: 1px solid var(--linea); font-size: 15px; }
.lectura-flotante[hidden] { display: none; }
.lectura-flotante .lf-renglon { padding: 4px 0; flex: 1 1 320px; min-width: 0; }
.lectura-flotante [data-cerrar] { min-height: 44px; }
@media (max-width: 900px) { .lectura-flotante { padding: 6px 16px; } }
.lectura-flotante .lf-renglon a { font-weight: 500; overflow-wrap: anywhere; display: inline-flex; align-items: center; min-height: 44px; }
.lectura-flotante .lf-renglon span { color: var(--suave); }
.lectura-flotante .progreso { margin-top: 6px; }
.lectura-flotante .lf-listo a { color: var(--verde); }
@media (max-width: 600px) {
  /* en el telefono el nombre completo importa mas que el tipo: se lee entero, en dos renglones si hace falta */
  .talones.sel-lista li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; }
  .talones.sel-lista .tipo, .talones.sel-lista .peso { display: none; }
  .talones.sel-lista .nom { white-space: normal; overflow-wrap: anywhere; }
}
.resumen-subida.con-fallos { border-left: 3px solid var(--rojo); background: #FFFBFA; }
.resumen-subida details { margin-top: 4px; }
.resumen-subida summary { cursor: pointer; color: var(--suave); }
/* los avisos de quitar, deshacer y el freno llegan con #documentos: que la barra de arriba no tape su primer renglon */
#documentos { scroll-margin-top: 80px; }
@media (max-width: 900px) { #documentos { scroll-margin-top: 160px; } }

/* D-73: listas que se editan en su lugar (consejos) y los contactos para el viajero */
.lista-editable { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.item-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-items: start; }
.lista-editable.con-js .item-lista { grid-template-columns: 24px minmax(0, 1fr) auto; }
.item-lista textarea { min-height: 0; resize: vertical; line-height: 1.45; }
.item-lista .asa { display: grid; place-items: center; height: var(--toque); cursor: grab; color: var(--tenue); touch-action: none; }
.item-lista .asa svg { width: 10px; height: 16px; fill: currentColor; }
.item-lista .mover { display: flex; gap: 4px; }
.item-lista .mover .boton { width: var(--toque); padding: 0; }
.item-lista .mover .boton svg { width: 15px; height: 15px; }
.item-lista.arrastrando { opacity: .9; outline: 2px solid var(--arena); outline-offset: 2px; background: var(--superficie); }
.agregar-lista { margin-top: 10px; }
.consejos-grupo { border-top: 1px solid var(--fino); }
.consejos-grupo > summary { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; min-height: 52px; padding: 14px 20px; cursor: pointer; list-style: none; }
.consejos-grupo > summary::-webkit-details-marker { display: none; }
.consejos-grupo > summary::before { content: "+"; font: 400 18px/1 var(--f-mono); color: var(--tenue); width: 14px; }
.consejos-grupo[open] > summary::before { content: "–"; }
.consejos-grupo > summary b { font-weight: 500; }
.consejos-grupo > form { padding: 0 20px 18px; }
.acciones-lista { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.asistencias-agencia { display: grid; gap: 10px; margin: 8px 0 4px; }
.asistencia-fila { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr); gap: 10px; align-items: end; }
.asistencia-fila .campo { margin: 0; }
.contacto-viajero, .consejos-viaje { border-top: 1px solid var(--fino); }
.contacto-viajero > summary, .consejos-viaje > summary { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; min-height: 52px; padding: 14px 0; cursor: pointer; }
.contacto-viajero .elegir-contacto { display: grid; gap: 6px; margin: 6px 0 12px; }
.contacto-viajero .opcion-contacto { display: flex; gap: 10px; align-items: center; min-height: 44px; padding: 6px 10px; border: 1px solid var(--fino); background: var(--superficie); cursor: pointer; }
.contacto-viajero .opcion-contacto:has(input:checked) { border-color: var(--tinta); box-shadow: inset 3px 0 0 var(--tinta); }
.contacto-viajero .opcion-contacto input { width: 20px; height: 20px; flex: none; margin: 0; }
.contacto-viajero .opcion-contacto .num { margin-left: auto; white-space: nowrap; }
.contacto-viajero .opcion-contacto .chip { margin-left: 6px; }
.contacto-viajero .escribir { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 4px 0 8px 30px; }
.contacto-viajero fieldset { border: 0; padding: 0; margin: 0 0 8px; min-width: 0; }
.contacto-viajero legend { font-weight: 500; padding: 0; margin-bottom: 4px; }
.sugerencia-viaje { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 10px 12px; margin: 0 0 12px; background: var(--ambar-fondo); border-left: 3px solid var(--ambar); }
@media (max-width: 700px) {
  .asistencia-fila { grid-template-columns: minmax(0, 1fr); padding-bottom: 10px; border-bottom: 1px solid var(--fino); }
  .contacto-viajero .escribir { grid-template-columns: minmax(0, 1fr); margin-left: 0; }
  .contacto-viajero .opcion-contacto { flex-wrap: wrap; }
  .contacto-viajero .opcion-contacto .num { margin-left: 30px; white-space: normal; }
  .lista-editable.con-js .item-lista { grid-template-columns: 22px minmax(0, 1fr); }
  .item-lista .mover { grid-column: 2; justify-content: flex-end; }
  .consejos-grupo > summary, .consejos-grupo > form { padding-left: 14px; padding-right: 14px; }
}
/* lo que se escribe a mano solo se ve cuando se elige «Otro número» (sin :has, se ve siempre y funciona igual) */
.contacto-viajero fieldset:not(:has(input[value="otro"]:checked)) .escribir { display: none; }
.contacto-viajero > summary .suave, .consejos-viaje > summary .suave { font-size: 15px; }
.item-lista textarea { field-sizing: content; overflow: hidden; }
.contacto-viajero input[type="radio"] { accent-color: var(--tinta); }
/* D-75: en el telefono no se arrastra ni se pega con Ctrl+V; lo que solo sirve con raton se esconde con dedo y al reves */
.en-dedo { display: none !important; }
@media (pointer: coarse), (max-width: 600px) {
  .en-raton { display: none !important; }
  .en-dedo { display: inline !important; }
  strong.en-dedo, p.en-dedo { display: block !important; }
  #elegir-carpeta { display: none !important; }
}
.ayuda-subir { margin: 10px 0 0; }
.ayuda-subir > summary { min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; color: var(--suave);
  text-decoration: underline; text-underline-offset: 3px; font-size: 15px; }
.ayuda-subir[open] > summary { color: var(--texto); }
/* D-75: las acciones del viaje. En la Mac, una fila a la derecha; en el telefono, Publicar primero y a todo lo ancho, con lo
   que le falta justo abajo, luego ver y descargar en dos columnas, y Borrar al final (antes salian revueltos y a la derecha) */
.acciones-viaje { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; }
@media (max-width: 600px) {
  .acciones-viaje { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .acciones-viaje > * { order: 5; }
  .acciones-viaje .boton { width: 100%; justify-content: center; }
  .acciones-viaje > .av-publicar { order: 1; grid-column: 1 / -1; }
  .acciones-viaje > .falta-publicar { order: 2; grid-column: 1 / -1; margin: 0; text-align: left; }
  .acciones-viaje > .av-ver { order: 3; grid-column: 1 / -1; }
  .acciones-viaje > .av-pdf, .acciones-viaje > .av-pptx { order: 4; }
  .acciones-viaje > .av-cotizar { order: 6; grid-column: 1 / -1; }
  .acciones-viaje > .form-borrar { order: 7; grid-column: 1 / -1; justify-self: end; }
  .acciones-viaje > .form-borrar .boton { width: auto; }
}
/* D-75: el «Cotizaciones ›» de arriba del titulo es el camino de regreso: en el telefono se toca */
@media (pointer: coarse), (max-width: 600px) { .encabezado .versal a { display: inline-flex; align-items: center; min-height: 44px; } }
/* D-75: todo destino de un link (#partida-12, #para-terminar, #viajero...) aparece DEBAJO del menu fijo, no tapado por el */
:where([id]) { scroll-margin-top: 90px; }
@media (max-width: 900px) { :where([id]) { scroll-margin-top: 160px; } }
/* D-75: en el telefono la tarjeta entera de un viaje o una cotizacion abre (antes solo el titulo, de 23 px); Borrar y los
   demas botones quedan encima y siguen siendo suyos */
@media (max-width: 900px) {
  .tabla tbody tr:has(a.viaje-titulo) { position: relative; }
  .tabla tbody tr a.viaje-titulo::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .tabla tbody tr:has(a.viaje-titulo) :is(form, button, a:not(.viaje-titulo), summary, details) { position: relative; z-index: 2; }
}
/* D-75: en el telefono la tabla se vuelve tarjeta y pierde sus encabezados: lo que el encabezado decia va en el renglon */
.solo-movil { display: none; }
@media (max-width: 900px) { .solo-movil { display: inline; } }
/* D-75: en el telefono todo lo que se despliega (summary) se atina con el dedo */
@media (pointer: coarse), (max-width: 600px) { :where(summary:not(.boton)) { min-height: 44px; padding-block: 10px; box-sizing: border-box; } }

/* D-76 · Mandar al cliente: telefono primero; cada opcion es un renglon de 44 px que se toca entero */
.mandar-pagina { max-width: 860px; }
.mandar fieldset { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.mandar legend { font-weight: 500; padding: 0; margin-bottom: 6px; }
.opcion-mandar { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 10px 12px; margin-bottom: 6px;
  border: 1px solid var(--fino); background: var(--superficie); cursor: pointer; }
.opcion-mandar > span { display: grid; gap: 2px; min-width: 0; }
.opcion-mandar input { width: 20px; height: 20px; flex: none; margin: 1px 0 0; accent-color: var(--tinta); }
.opcion-mandar:has(input:checked) { border-color: var(--tinta); box-shadow: inset 3px 0 0 var(--tinta); }
.opciones-por { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.opcion-mandar.por { align-items: center; margin: 0; }
.mandar-texto { min-height: 300px; font: 400 16px/1.5 var(--f-texto); white-space: pre-wrap; }
.mandar-medida { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: -4px; }
.vista-correo iframe { width: 100%; height: 640px; border: 1px solid var(--fino); background: #F1ECE2; display: block; }
.burbuja-wa { white-space: pre-wrap; overflow-wrap: anywhere; background: #DCF8C6; color: #111B21; padding: 10px 12px 12px;
  border-radius: 8px 0 8px 8px; max-width: 520px; margin-left: auto; font: 400 15px/1.45 var(--f-texto); }
.mandar-botones { position: sticky; bottom: 0; z-index: 5; background: var(--fondo); padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--fino); margin-bottom: 16px; }
.grupo-boton { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.grupo-boton .boton.principal { flex: 1 1 260px; justify-content: center; }
.linea-sin-brevo { flex: 1 1 100%; margin: 2px 0 0; }
.mandar-salidas { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.mandar-resultado b { display: block; }
.mandado-pasos .paso-mandado + .paso-mandado { border-top: 1px solid var(--fino); margin-top: 16px; padding-top: 16px; }
/* que botones y campos se ven segun «por donde» (sin JavaScript) */
.mandar:has(input[name=por][value=whatsapp]:checked) :is(.solo-correo, .para-correo, .para-ambos),
.mandar:has(input[name=por][value=correo]:checked) :is(.solo-wa, .para-whatsapp, .para-ambos),
.mandar:has(input[name=por][value=ambos]:checked) :is(.para-whatsapp, .para-correo) { display: none; }
@media (max-width: 600px) {
  .vista-correo iframe { height: 560px; }
  .mandar-texto { min-height: 260px; }
  .grupo-boton .boton { flex: 1 1 100%; justify-content: center; }
}
.mandar-entrada { display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
@media (max-width: 600px) { .mandar-entrada .boton.principal { flex: 1 1 100%; justify-content: center; } }
.plantilla-mensaje { border-top: 1px solid var(--fino); }
.plantilla-mensaje > summary { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; min-height: 48px; padding: 12px 0; cursor: pointer; }
.plantilla-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.plantilla-dos textarea { min-height: 300px; font: 400 15px/1.5 var(--f-texto); }
.plantilla-dos .burbuja-wa { margin: 6px 0 0; max-width: none; }
.variables-plantilla ul { columns: 2; margin: 8px 0; padding-left: 18px; }
@media (max-width: 760px) { .plantilla-dos { grid-template-columns: minmax(0, 1fr); } .variables-plantilla ul { columns: 1; } }
.sin-brevo { display: grid; gap: 8px; justify-items: start; padding: 12px; margin: 0 0 12px; background: var(--hundida); }
@media (max-width: 600px) {
  .opciones-por .opcion-mandar.por { flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 4px; text-align: center; }
  .sin-brevo .boton { width: 100%; justify-content: center; }
  /* D-81: «Descargar el itinerario en PDF para adjuntarlo» no cabe en un renglon a 390: parte renglon y crece, no se sale */
  .sin-brevo .boton, .mandar-salidas .boton { height: auto; min-height: var(--toque); padding-top: 8px; padding-bottom: 8px;
    white-space: normal; text-align: center; line-height: 1.25; max-width: 100%; }
}

/* ------------------------------------------------------------------ D-80: «Falta algo en el itinerario» */
.falta-algo { margin: 14px 0 4px; padding: 14px 16px; border: 1px solid var(--linea); background: var(--arena-suave);
  display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.falta-algo p { margin: 0; flex: 1 1 220px; font-size: 14px; color: var(--suave); }
.falta-algo p b { display: block; color: var(--texto); font-weight: 500; font-size: 15px; margin-bottom: 2px; }
.falta-algo .boton { flex: none; }
.falta-algo .chip { height: 24px; padding: 0 8px; margin-left: 2px; background: var(--superficie); }
.faltante { max-width: 920px; }
.faltante .falta-intro { margin: 6px 0 0; max-width: 640px; }
.falta-cuenta { margin: 0 0 18px; font-size: 16px; color: var(--suave); }
.falta-cuenta b { font: 400 24px var(--f-titulo); color: var(--texto); margin-right: 2px; }
.falta-grupo { margin-bottom: 18px; }
.falta-grupo > header h2 { line-height: 1.35; }
.falta-por-que { margin: 0 0 6px; color: var(--suave); font-size: 15px; max-width: 680px; }
.falta-renglon { padding: 14px 0; border-top: 1px solid var(--fino); display: flex; gap: 10px 16px; align-items: flex-start;
  justify-content: space-between; flex-wrap: wrap; }
.falta-renglon:first-of-type { border-top: 0; }
.falta-renglon.importante { border-left: 3px solid var(--ambar); padding-left: 12px; margin-left: -12px; }
.falta-que { flex: 1 1 300px; min-width: 0; }
.falta-nombre { display: block; font-weight: 500; overflow-wrap: anywhere; line-height: 1.35; }
.falta-detalle { display: block; color: var(--suave); font-size: 14.5px; margin-top: 3px; overflow-wrap: anywhere; }
.falta-detalle b { color: var(--texto); font-weight: 500; }
.falta-detalle.rojo-txt { color: var(--rojo); }
.falta-botones { display: flex; gap: 8px; flex-wrap: wrap; flex: none; }
.falta-accion { margin: 0; }
.falta-fuentes { list-style: none; margin: 10px 0 0; padding: 0; flex-basis: 100%; }
.falta-fuentes li { display: flex; gap: 10px 14px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 10px 12px; background: var(--fondo); border: 1px solid var(--fino); margin-top: 6px; }
.falta-fuentes li > span { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.falta-fuentes li b { font-weight: 500; }
.falta-costo { margin: 10px 0 0; }
.falta-pasos { margin: 0 0 8px; padding-left: 20px; }
.falta-pasos li { margin-bottom: 8px; max-width: 680px; }
.falta-plegado { margin-top: 10px; border-top: 1px solid var(--fino); }
.falta-plegado > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 500; }
.falta-leyendo a { margin-left: 4px; }
@media (max-width: 600px), (pointer: coarse) {
  .faltante .encabezado > .boton { width: 100%; }
  .falta-botones { width: 100%; }
  .falta-botones .falta-accion, .falta-botones > .boton { flex: 1 1 100%; }
  .falta-botones .boton, .falta-fuentes .falta-accion, .falta-fuentes .boton { width: 100%; }
  .falta-fuentes .falta-accion { flex: 1 1 100%; }
  .falta-algo .boton { width: 100%; }
}
.resumen-subida .repetido-fuera { margin-bottom: 8px; }
.resumen-subida .repetido-fuera .boton { margin-top: 6px; display: flex; width: max-content; max-width: 100%; }
/* D-79: los WhatsApps del viaje (uno o varios, nombre corto y numero) que el viajero ve hasta abajo de su link. Cada renglon:
   asa para arrastrar, los dos campos, y subir / bajar / quitar de 44 px. En el telefono los dos campos van uno sobre otro. */
.whatsapps-viaje { margin-bottom: 18px !important; }
.lista-wa-viaje .item-lista { padding: 10px 0; border-bottom: 1px solid var(--fino); }
.lista-wa-viaje .item-lista:first-child { border-top: 1px solid var(--fino); }
.lista-wa-viaje .item-lista:first-child .wa-campos label.campo:first-child > span::after { content: " · el principal"; text-transform: none; letter-spacing: 0; color: var(--tinta-texto, var(--texto)); font-weight: 500; }
.lista-wa-viaje .item-lista.vacio-sin-js .wa-campos label.campo:first-child > span::after { content: none; }
.lista-wa-viaje .wa-campos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; min-width: 0; }
.lista-wa-viaje .wa-campos label.campo { margin: 0; min-width: 0; }
.lista-wa-viaje .wa-campos input { width: 100%; }
.lista-wa-viaje .item-lista.con-error input[aria-invalid="true"] { border-color: var(--rojo); box-shadow: inset 3px 0 0 var(--rojo); }
.lista-wa-viaje .mover { align-self: end; }
.wa-rapidos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.wa-rapidos .wa-rapido { border: 1px solid var(--fino); color: var(--texto); height: auto; min-height: var(--toque); padding: 6px 12px; flex-wrap: wrap; justify-content: flex-start; text-align: left; }
.wa-rapidos .wa-rapido svg { width: 14px; height: 14px; flex: none; }
.wa-rapidos .wa-rapido .num { color: var(--suave); }
.asistencia-viaje { margin-top: 22px !important; }
@media (max-width: 700px) {
  .lista-wa-viaje .wa-campos { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .lista-wa-viaje.con-js .item-lista { grid-template-columns: 22px minmax(0, 1fr); }
  .lista-wa-viaje .mover { grid-column: 2; justify-content: flex-end; }
  .wa-rapidos .wa-rapido { width: 100%; }
  /* el radio y su texto en el mismo renglon aunque el texto sea largo; el numero abajo */
  .contacto-viajero .opcion-contacto > span:first-of-type { flex: 1 1 0; min-width: 0; }
}
/* ------------------------------------------------------------------ D-82 claridad: «Falta algo» y la Red en 5 segundos.
   Arriba una frase de estado (verde: completo; ambar: N cosas no estan), dos salidas siempre a la vista, una tarjeta por cosa
   que de verdad falta (que es, por que, UN boton oscuro) y lo normal plegado al final como «Todo bien». */
.d82 { max-width: 780px; }
.d82-volver { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--suave); font-size: 15px; margin: -6px 0 2px; }
.d82-titulo { margin: 4px 0 18px; }
.d82-estado { display: flex; gap: 14px; align-items: center; padding: 18px 20px; border: 1px solid var(--linea); border-left-width: 5px; background: var(--superficie); }
.d82-estado.ok { background: var(--verde-fondo); border-color: var(--verde); color: var(--verde); }
.d82-estado.falta { background: var(--ambar-fondo); border-color: var(--ambar); color: var(--ambar); }
.d82-estado.leyendo { color: var(--tinta-2); }
.d82-icono { width: 36px; height: 36px; flex: none; }
.d82-estado-frase { margin: 0; font: 400 28px/1.15 var(--f-titulo); letter-spacing: -0.01em; color: var(--texto); }
.d82-estado-sub { margin: 4px 0 0; font-size: 16px; color: var(--suave); }
.d82-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 26px; }
.d82-acciones .boton { flex: 0 1 auto; }
.d82-nota { margin: 0 0 14px; font-size: 15px; color: var(--suave); }
.d82-lista { list-style: none; margin: 0 0 8px; padding: 0; }
.d82-tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-left: 5px solid var(--ambar); padding: 16px 18px 18px; margin-bottom: 14px; }
.d82-tarjeta.rojo { border-left-color: var(--rojo); }
.d82-tipo { display: block; font: 500 12.5px/1.4 var(--f-texto); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ambar); }
.d82-tarjeta.rojo .d82-tipo { color: var(--rojo); }
.d82-que { margin: 6px 0 4px; font: 500 19px/1.35 var(--f-texto); overflow-wrap: anywhere; }
.d82-porque { margin: 0 0 14px; font-size: 15.5px; color: var(--suave); overflow-wrap: anywhere; }
.d82-botones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.d82-form { margin: 0; }
.d82-par { list-style: none; margin: 10px 0 14px; padding: 0; }
.d82-par li { padding: 10px 12px; background: var(--fondo); border: 1px solid var(--fino); margin-top: 6px; overflow-wrap: anywhere; }
.d82-par li b { display: block; font-weight: 500; }
.d82-par li span { display: block; font-size: 14.5px; color: var(--suave); margin-top: 2px; }
.d82-par li .d82-de { color: var(--tenue); }
.d82-plegado { margin-top: 16px; border-top: 1px solid var(--linea); }
.d82-plegado > summary { min-height: 56px; display: flex; gap: 10px; align-items: center; cursor: pointer; list-style: none; font-size: 16px; padding: 8px 0; }
.d82-plegado > summary::-webkit-details-marker { display: none; }
.d82-plegado > summary::after { content: "+"; margin-left: auto; font: 400 24px/1 var(--f-texto); color: var(--suave); padding-left: 12px; }
.d82-plegado[open] > summary::after { content: "–"; }
.d82-plegado > summary b { font-weight: 500; }
.d82-bien > summary { color: var(--texto); }
.d82-icono-chico { width: 24px; height: 24px; flex: none; color: var(--verde); }
.d82-plegado-cuerpo { padding: 0 0 8px; }
.d82-normales { list-style: none; margin: 0; padding: 0; }
.d82-normales > li { padding: 12px 0; border-top: 1px solid var(--fino); overflow-wrap: anywhere; }
.d82-normales > li > b { display: block; font-weight: 500; }
.d82-normales > li > span { display: block; font-size: 14.5px; color: var(--suave); margin: 2px 0 4px; }
.d82-normales .boton.fantasma { padding-left: 0; }
.d82-separar > summary { min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; color: var(--suave); }
@media (max-width: 600px), (pointer: coarse) {
  .d82-estado { padding: 16px; gap: 12px; }
  .d82-estado-frase { font-size: 24px; }
  .d82-acciones .boton { flex: 1 1 100%; }
  .d82-tarjeta { padding: 14px 14px 16px; }
  .d82-botones > .d82-form, .d82-botones > .boton { flex: 1 1 100%; }
  .d82-botones .boton { width: 100%; }
}
/* D-82 claridad · la Red: una tarjeta por agencia, cifras grandes, la IA en palabras y con su tope, y lo apagado en gris */
.d82-red { max-width: 1120px; }
.d82-red-para { margin: 6px 0 20px; font-size: 17px; color: var(--suave); }
.d82-tope { margin: 0 0 18px; }
.d82-tope-texto { margin: 0 0 6px; font-size: 15.5px; color: var(--suave); }
.d82-tope-texto b { color: var(--texto); font-weight: 500; }
.d82-barra { height: 10px; background: var(--hundida); border: 1px solid var(--fino); }
.d82-barra > span { display: block; height: 100%; background: var(--verde); }
.d82-barra.alta > span { background: var(--ambar); }
.d82-agencias { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.d82-agencia { background: var(--superficie); border: 1px solid var(--linea); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.d82-agencia.aqui { border-top: 4px solid var(--verde); }
.d82-agencia.apagada { background: var(--hundida); color: var(--suave); }
.d82-agencia.apagada .d82-agencia-logo { filter: grayscale(1); opacity: .6; }
.d82-agencia-cabeza { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.d82-agencia-logo { height: 28px; max-width: 110px; object-fit: contain; flex: none; }
.d82-agencia-nombre { flex: 1 1 160px; min-width: 0; }
.d82-agencia-nombre h2 { font: 500 20px/1.25 var(--f-texto); letter-spacing: 0; overflow-wrap: anywhere; }
.d82-agencia-nombre p { margin: 2px 0 0; font-size: 14px; color: var(--tenue); overflow-wrap: anywhere; }
.d82-dentro, .d82-baja { font: 500 13px/1.3 var(--f-texto); padding: 6px 10px; flex: none; }
.d82-dentro { background: var(--verde-fondo); color: var(--verde); }
.d82-baja { background: var(--superficie); color: var(--suave); border: 1px solid var(--linea); }
.d82-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.d82-cifras > div { min-width: 0; }
.d82-cifras dt { font-size: 13.5px; color: var(--suave); line-height: 1.3; }
.d82-cifras dd { margin: 2px 0 0; font: 400 30px/1.1 var(--f-titulo); color: var(--texto); }
.d82-ia { margin: 0; font-size: 15.5px; }
.d82-ia b { font-weight: 500; }
.d82-ia span { display: block; font-size: 14px; color: var(--suave); }
.d82-agencia .d82-tope { margin: 0; }
.d82-agencia-botones { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: auto; }
.d82-crear-usuario > summary { list-style: none; cursor: pointer; }
.d82-crear-usuario > summary::-webkit-details-marker { display: none; }
.d82-crear-usuario[open] { flex-basis: 100%; }
.d82-crear-form { margin-top: 10px; padding: 14px; border: 1px solid var(--fino); background: var(--fondo); }
.d82-crear-form .boton { width: 100%; }
.d82-estado-agencia { border-top: 1px solid var(--fino); padding-top: 4px; }
.d82-estado-agencia .boton { padding-left: 0; }
.d82-peligro { color: var(--rojo) !important; }
.d82-sin-agencia { margin: 16px 0 0; font-size: 14.5px; color: var(--suave); max-width: 760px; }
.d82-red-seccion { margin-top: 28px; }
.d82-red-seccion > h2.versal { margin: 0 0 10px; }
.d82-alta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.d82-alta-boton { display: flex; align-items: end; margin-bottom: 12px; }
.d82-alta-boton .boton { width: 100%; }
@media (max-width: 700px) {
  .d82-agencias { grid-template-columns: minmax(0, 1fr); }
  .d82-agencia { padding: 16px; }
  .d82-alta { grid-template-columns: minmax(0, 1fr); }
  .d82-agencia-botones > .d82-form, .d82-agencia-botones > .boton, .d82-agencia-botones > details { flex: 1 1 100%; }
  .d82-agencia-botones .boton { width: 100%; }
  .d82-cifras dd { font-size: 26px; }
}
.d82-cifras > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.d82-cifras dd { font: 500 28px/1.1 var(--f-texto); font-variant-numeric: lining-nums tabular-nums; margin: 0 0 2px; }
@media (max-width: 700px) { .d82-cifras dd { font-size: 24px; } }

/* ---------- D-83 viajes faciles (Ale, 15-oct: "que ciertos botones resalten, que no parezca una biblia de texto,
   pum, pum"). El encabezado del viaje: el estado en una linea, UN boton principal (lo que sigue), ver y descargar discretos
   y Cotizacion/Borrar al final. Las acciones de cada renglon del itinerario a la vista. El formulario de un servicio mas
   corto. Las fotos con «Cambiar foto» encima. Todo control de 44 px o mas; nada se sale del ancho a 390. ---------- */
.acciones-viaje { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; max-width: 660px; }
.acciones-viaje > .aviso { margin: 0; }
.estado-viaje { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 17px; font-weight: 500; color: var(--texto); }
.estado-viaje .chico { font-weight: 400; color: inherit; }
.punto-estado { width: 11px; height: 11px; flex: none; background: var(--control); }
.estado-viaje.falta { color: var(--ambar); } .estado-viaje.falta .punto-estado { background: var(--ambar); }
.estado-viaje.listo, .estado-viaje.enviado { color: var(--verde); } .estado-viaje.listo .punto-estado, .estado-viaje.enviado .punto-estado { background: var(--verde); }
.estado-viaje.leyendo .punto-estado { background: var(--tinta); }
@media (prefers-reduced-motion: no-preference) { .estado-viaje.leyendo .punto-estado { animation: d83-latido 1.2s ease-in-out infinite; } }
@keyframes d83-latido { 50% { opacity: .25; } }
.acciones-viaje .av-principal { min-width: 300px; height: 54px; font-size: 17px; }
.acciones-viaje form.av-publicar, .acciones-viaje form.av-de-todos-modos { margin: 0; }
.av-de-todos-modos .boton { border-color: var(--ambar); color: var(--ambar); background: var(--superficie); min-height: 46px; height: auto; white-space: normal; text-align: center; }
.av-de-todos-modos .boton:hover { border-color: var(--ambar); background: var(--ambar-fondo); }
.acciones-viaje .falta-publicar { text-align: right; margin: 0; flex-basis: auto; }
.salidas-viaje { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding-top: 10px; border-top: 1px solid var(--fino); }
.salidas-viaje .boton { height: 44px; font-size: 15px; padding: 0 12px; }
.mas-acciones-viaje { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.mas-acciones-viaje form { margin: 0; }
.mas-acciones-viaje .boton { height: 44px; font-size: 15px; }
@media (max-width: 900px) {
  .acciones-viaje { align-items: stretch; width: 100%; max-width: none; }
  .acciones-viaje .falta-publicar { text-align: left; }
  .acciones-viaje .av-principal { min-width: 0; width: 100%; }
}
@media (max-width: 600px) {
  .acciones-viaje { display: flex; flex-direction: column; }
  .acciones-viaje > *, .acciones-viaje > .av-publicar, .acciones-viaje > .falta-publicar, .acciones-viaje > .av-ver,
  .acciones-viaje > .av-pdf, .acciones-viaje > .av-pptx, .acciones-viaje > .av-cotizar, .acciones-viaje > .form-borrar { order: 0; grid-column: auto; }
  .salidas-viaje { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .salidas-viaje .boton { white-space: normal; text-align: center; line-height: 1.2; height: auto; min-height: 44px; padding: 6px 8px; }
  .mas-acciones-viaje { justify-content: space-between; }
  .acciones-viaje .mas-acciones-viaje .boton { width: auto; }
}
/* el aviso de lo que se acaba de hacer, DONDE se hizo (un dia, las fotos, los ajustes), con su «Deshacer» */
.aviso-aqui { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.aviso-aqui form { margin: 0; }
.dia > .aviso-aqui { margin: 10px 18px 4px; }
.publicado-aviso { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.publicado-aviso .boton { color: #fff; }
/* cada renglon del itinerario: Editar (y en hoteles y tours, Cambiar foto) a la vista, alineados con el texto */
.acciones-evento { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 10px 124px; }
.acciones-evento .boton { height: 44px; padding: 0 12px; font-size: 14.5px; }
.acciones-evento .boton svg { width: 15px; height: 15px; }
.acciones-evento .boton.fantasma { border: 1px solid var(--fino); }
@media (max-width: 900px) { .acciones-evento { padding-left: 108px; } }
@media (max-width: 480px) { .acciones-evento { padding-left: 18px; } }
/* el formulario de un servicio: «Quitar» junto al rotulo (no un renglon aparte) y lo que casi no se usa en «Más datos» */
.dato-servicio.con-quitar { position: relative; }
.dato-servicio.con-quitar label.campo > span { min-height: 34px; display: flex; align-items: flex-end; padding-right: 92px; margin-bottom: 6px; }
.dato-servicio.con-quitar > .quitar-dato { position: absolute; top: -6px; right: 0; min-height: 44px; margin: 0; z-index: 1; }
.mas-datos { margin-top: 10px; border-top: 1px solid var(--fino); }
.mas-datos > summary { display: flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer; font-weight: 500; list-style: none; }
.mas-datos > summary::-webkit-details-marker { display: none; }
.mas-datos > summary::before { content: "+"; font-family: var(--f-mono); width: 14px; flex: none; }
.mas-datos[open] > summary::before { content: "–"; }
.mas-datos > summary .suave { font-weight: 400; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* las fotos del viaje: cada una con «Cambiar foto» encima */
.fotos-viaje { margin-top: 16px; }
.rejilla-fotos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.rejilla-fotos li { min-width: 0; }
.tarjeta-foto { display: block; color: var(--texto); }
.tarjeta-foto:hover { text-decoration: none; }
.marco-foto { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--hundida); overflow: hidden; border: 1px solid var(--fino); }
.marco-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.marco-foto .sin-foto { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 16%; color: var(--tenue); font-size: 15px; }
.marco-foto .cambiar-foto { position: absolute; left: 10px; bottom: 10px; height: 44px; background: rgba(255, 255, 255, .95); border-color: var(--tinta); color: var(--tinta); font-weight: 500; }
.tarjeta-foto:hover .cambiar-foto { background: var(--tinta); color: #fff; }
.pie-foto { display: flex; flex-direction: column; padding: 8px 2px 0; min-width: 0; }
.pie-foto b { font-weight: 500; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .rejilla-fotos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .marco-foto .cambiar-foto { left: 6px; right: 6px; bottom: 6px; padding: 0 6px; font-size: 14px; }
  .marco-foto .cambiar-foto svg { display: none; }
}
/* la pagina de cambiar una foto */
.fotos-de { margin: 6px 0 0; font-size: 17px; }
.foto-ahora figure { margin: 0 0 18px; }
.foto-ahora img { width: 100%; max-height: 380px; object-fit: cover; display: block; border: 1px solid var(--fino); }
.foto-ahora figcaption { margin-top: 6px; font-size: 14.5px; color: var(--suave); }
.sin-foto-grande { height: 200px; display: flex; align-items: center; justify-content: center; background: var(--hundida); color: var(--tenue); }
.foto-subir { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 0 0 26px; }
.foto-subir .elegir-foto { cursor: pointer; height: 54px; font-size: 17px; }
.fotos-opciones { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.fotos-opciones li { position: relative; background: var(--superficie); border: 1px solid var(--fino); min-width: 0; }
.fotos-opciones li.es-la-actual { outline: 3px solid var(--verde); outline-offset: -3px; }
.fotos-opciones li.fuera img { opacity: .35; }
.fotos-opciones img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.fotos-opciones .chip { position: absolute; top: 8px; left: 8px; background: var(--superficie); }
.acciones-foto { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; }
.acciones-foto form { flex: 1 1 auto; margin: 0; }
.acciones-foto .boton { width: 100%; height: 44px; padding: 0 8px; }
.foto-otras-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 8px; }
.foto-otras-acciones form { margin: 0; }
@media (max-width: 600px) {
  .fotos-opciones { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .foto-subir .elegir-foto, .foto-subir .boton { width: 100%; }
  .foto-otras-acciones, .foto-otras-acciones form { width: 100%; }
  .foto-otras-acciones .boton { width: 100%; }
}
/* Ajustes: en el telefono la tabla de personas es tarjetas sin encabezados; el chip dice de que es («Dos pasos: No») */
.rotulo-movil { display: none; }
@media (max-width: 900px) { .rotulo-movil { display: inline; } }
/* D-83: la lista de todos los servicios, plegada (cada renglon del itinerario ya trae su Editar) */
.lista-plegada { margin-top: 8px; border-top: 1px solid var(--fino); }
.lista-plegada > summary { display: flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer; font-weight: 500; list-style: none; }
.lista-plegada > summary::-webkit-details-marker { display: none; }
.lista-plegada > summary::before { content: "+"; font-family: var(--f-mono); width: 14px; flex: none; }
.lista-plegada[open] > summary::before { content: "–"; }
/* D-83: «Lo ve el viajero», «Quitar» de un documento y los saltos, de 44 px tambien en la Mac (antes 40) */
.compartir .chip, .quitar-doc, .saltos a { min-height: 44px; height: 44px; }
/* D-83: cada renglon del itinerario (se toca para ver sus datos) mide 44 px aunque sea de un solo renglon */
summary.evento { min-height: 44px; }
/* D-83: en Ajustes, «Las palabras entre llaves...» y «Cambiar nombre o usuario» de 44 px tambien en la Mac */
.variables-plantilla > summary, .editar-persona > summary { min-height: 44px; padding: 10px 0; box-sizing: border-box; cursor: pointer; }

/* D-84 cotizaciones faciles (Ale, 15-oct: "que sea muy facil editar las cosas... como Play-Doh... que ciertos botones
   resalten, que no parezca una biblia de texto"). Un boton principal arriba, atajos, cada servicio con Editar, Precio, Foto,
   flechas y Quitar a la vista, la foto con su boton al lado y el precio junto al nombre en el telefono. Mismas reglas:
   esquinas rectas, bordes de 1 px, nada de sombras, controles de 44 px, nada abajo de 12.5 px. */
.acciones-cot .descargar-pdf { padding: 0 10px; }
.acciones-cot form { margin: 0; }
.atajos-cot { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 18px; }
.atajos-cot a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--linea);
  background: var(--superficie); color: var(--texto); font: 500 15px/1.2 var(--f-texto); text-decoration: none; }
.atajos-cot a:hover { border-color: var(--tinta); }
.atajos-cot a b { font-weight: 500; color: var(--suave); font-variant-numeric: tabular-nums; }
.enviar-asi { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; margin: 4px 24px 20px;
  padding: 14px 16px; border: 1px dashed var(--linea); background: #FCFBF8; }
.enviar-asi > div { flex: 1 1 320px; min-width: 0; }
.enviar-asi span { color: var(--suave); }
.enviar-asi ul { margin: 6px 0 0; padding-left: 18px; }
.enviar-asi form { margin: 0; }
/* la foto de cada servicio, con su boton al lado */
.foto-partida { float: right; display: grid; justify-items: center; gap: 2px; margin: 2px 0 8px 12px; min-height: 44px; text-decoration: none; color: var(--texto); }
.foto-partida .mini-partida { float: none; margin: 0; }
.foto-partida .cambiar-foto-txt { font-size: 13px; text-decoration: underline; text-underline-offset: 3px; color: var(--suave); }
.foto-partida:hover .cambiar-foto-txt { color: var(--texto); }
.sin-foto-mini { display: flex; align-items: center; justify-content: center; background: var(--hundida); color: var(--tenue); font-size: 13px; }
.panel-fotos { margin-top: 10px; display: grid; gap: 10px; }
.fotos-elegir { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.fotos-elegir li { border: 1px solid var(--fino); background: var(--superficie); display: grid; }
.fotos-elegir li.principal { border: 2px solid var(--tinta); }
.fotos-elegir li.oculta img { opacity: .35; }
.fotos-elegir img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.botones-foto { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; padding: 6px; }
.botones-foto form { margin: 0; }
.botones-foto .chip { margin: 0 4px; }
/* las acciones de cada servicio: Editar, Precio, Foto, flechas, Quitar; lo demas en «Mas» */
.acciones-fila .flecha-mover { width: 44px; min-width: 44px; padding: 0; font-size: 20px; }
.acciones-fila > details > summary.boton { height: 44px; }
/* lo que se abre se abre AHI, debajo de su boton: los botones no brincan de lugar */
.acciones-fila > details[open] { flex-basis: 100%; order: 0; }
.acciones-fila .editar-partida > summary svg, .acciones-cot svg { width: 18px; height: 18px; }
.mas-acciones > summary.boton::after { content: "+"; font-family: var(--f-mono); margin-left: 2px; color: var(--suave); }
.mas-acciones[open] > summary.boton::after { content: "−"; }
.cambiar-hotel { flex-basis: 100%; }
.cambiar-hotel > summary { list-style: none; cursor: pointer; }
.cambiar-hotel > summary::-webkit-details-marker { display: none; }
.forma-hotel { margin-top: 10px; padding: 12px; border: 1px solid var(--fino); background: var(--superficie); display: grid; gap: 4px; max-width: 560px; }
.forma-hotel .campo { margin-bottom: 6px; }
.forma-hotel .boton { justify-self: start; }
/* el formulario corto de un servicio */
.mas-datos { margin: 4px 0 8px; border-top: 1px solid var(--fino); }
.mas-datos > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--suave); font-size: 15px; }
.mas-datos > summary:hover { color: var(--texto); }
.rejilla-mas-datos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 12px; padding-top: 6px; }
.rejilla-partida.modo-nota .mas-datos > summary { display: none; }
.rejilla-partida.modo-nota .rejilla-mas-datos > .campo:not(.para-nota) { display: none; }
.guardar-partida { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
/* el precio junto al nombre, solo en el telefono */
.precio-movil { display: none; }
@media (max-width: 900px) {
  .atajos-cot { margin-top: -10px; }
  .atajos-cot a { flex: 1 1 auto; justify-content: center; padding: 0 10px; font-size: 14.5px; }
  .precio-movil { display: block; margin: 4px 0 2px; font-size: 15px; color: var(--suave); }
  .precio-movil b { font: 500 17px var(--f-texto); color: var(--texto); }
  .tabla-partidas tbody td.celda-precio { display: none; }
  .rejilla-mas-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .enviar-asi { margin: 4px 16px 18px; }
  .enviar-asi .boton, .enviar-asi form { width: 100%; }
}
@media (max-width: 480px) {
  .rejilla-mas-datos { grid-template-columns: minmax(0, 1fr); }
  .rejilla-mas-datos > [style*="grid-column"] { grid-column: 1 / -1 !important; }
  .guardar-partida .boton { width: 100%; }
  .acciones-cot > .boton, .acciones-cot > form, .acciones-cot > form .boton { flex: 1 1 auto; }
  .acciones-cot > .boton.principal, .acciones-cot > form:first-child .boton.principal { flex-basis: 100%; }
}
/* D-84: las partidas marcadas, una por una, plegadas debajo de «Ya las revisé» */
.una-por-una { margin-top: 2px; grid-column: 2 / -1; min-width: 0; }
.una-por-una > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--suave); font-size: 15px; }
.una-por-una > summary:hover { color: var(--texto); }
.una-por-una > summary::before { content: "+"; font-family: var(--f-mono); width: 18px; color: var(--suave); }
.una-por-una[open] > summary::before { content: "−"; }

/* D-86: el asistente del viaje y de la cotizacion. Una conversacion como hilo de mensajes: lo de la asesora a la derecha en
   arena, lo del asistente a la izquierda con regla de tinta; los botones van debajo de la respuesta que los propone. */
.panel.asistente { margin-bottom: 16px; }
.asis-intro { margin: 0 0 12px; color: var(--suave); font-size: 15px; }
.asis-intro em { font-style: normal; color: var(--texto); }
.asis-mensajes { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.asis-msj { max-width: 88%; padding: 10px 14px; border: 1px solid var(--fino); }
.asis-msj p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.asis-msj.asesora { align-self: flex-end; background: var(--arena-suave); }
.asis-msj.asistente { align-self: flex-start; background: var(--superficie); border-left: 3px solid var(--tinta); }
.asis-quien { display: block; font: 500 12.5px/1.4 var(--f-texto); letter-spacing: 0.08em; text-transform: uppercase; color: var(--suave); margin-bottom: 2px; }
.asis-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.asis-botones form { margin: 0; }
.asis-forma { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.asis-forma .campo { width: 100%; margin: 0; }
.asis-forma textarea { width: 100%; font: inherit; min-height: 84px; }
.asis-cierre { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--fino); }
.asis-cierre form { margin: 0; }
.asis-otra { margin: 12px 0 0; }
.asis-anteriores { margin-top: 14px; font-size: 14px; }
.asis-anteriores ul { margin: 8px 0 0; padding-left: 18px; }
@media (max-width: 600px) { .asis-msj { max-width: 100%; } .asis-botones .boton, .asis-cierre .boton { width: 100%; } .asis-botones form, .asis-cierre form { width: 100%; } }
.red-asis-cifras { display: flex; flex-wrap: wrap; gap: 24px; margin: 8px 0 20px; }
.red-asis-cifras div { min-width: 120px; } .red-asis-cifras b { display: block; font: 400 30px/1.1 var(--f-titulo); }
.red-asis-conv { margin-bottom: 14px; }
.red-asis-conv .asis-mensajes { margin-top: 12px; }
.red-asis-reporte { display: grid; gap: 8px; margin: 12px 0; padding: 12px 14px; border-left: 3px solid var(--ambar); background: var(--ambar-fondo); }
.red-asis-reporte div { display: grid; gap: 2px; } .red-asis-reporte dt { font: 500 12.5px/1.4 var(--f-texto); letter-spacing: 0.08em; text-transform: uppercase; color: var(--suave); }
.red-asis-reporte dd { margin: 0; }
.asis-aprender { display: flex; align-items: center; gap: 8px; min-height: var(--toque); }
.asis-revision { margin: 0 0 14px; padding: 12px 14px; border-left: 3px solid var(--ambar); background: var(--ambar-fondo); }
.asis-revision.ok { border-left-color: var(--verde); background: var(--verde-fondo); }
.asis-revision p { margin: 0; } .asis-revision .asis-botones { margin-top: 10px; }
.emir-hoy li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--fino); }
.emir-hoy li:last-child { border-bottom: 0; } .emir-hoy p { margin: 2px 0 0; color: var(--suave); font-size: 15px; }
.emir-hoy ul { list-style: none; margin: 0; padding: 0; }

/* D-87: los documentos del viaje en carpetas por lo que traen, con su cuenta (se cuentan los boletos de un vistazo) */
.grupo-docs { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 18px 0 6px; padding: 6px 0 6px 10px;
  border-left: 3px solid var(--tinta); border-bottom: 1px solid var(--fino); font: 500 12.5px/1.4 var(--f-texto); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--tinta); }
.grupo-docs:first-child { margin-top: 4px; }
.grupo-docs b { font: 500 14px var(--f-mono); letter-spacing: 0; color: var(--tinta); }
.grupo-docs.grupo-revisar { border-left-color: var(--rojo); color: var(--rojo); background: var(--rojo-fondo); }
.grupo-docs.grupo-revisar b { color: var(--rojo); }
.grupo-docs.grupo-leyendo { border-left-color: var(--ambar); color: var(--ambar); }
.grupo-docs.grupo-vuelo { border-left-color: #2F5D8A; } .grupo-docs.grupo-hotel { border-left-color: var(--arena-oscura); }
.grupo-docs.grupo-tour { border-left-color: var(--verde); } .grupo-docs.grupo-seguro { border-left-color: #6B4C8A; }
.juntar-casilla { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: var(--toque); margin-right: 4px; cursor: pointer; }
.juntar-casilla input { width: 22px; height: 22px; }
.juntar-forma { margin-top: 12px; padding: 12px 14px; border: 1px dashed var(--linea); }
.juntar-forma p { margin: 0 0 8px; }
.lista-docs > .grupo-docs { grid-column: 1 / -1; }

/* D-87 (Ale, 18-oct: "no puede ser que es blanco y color piel... algo para identificar rapido las cosas importantes"): color con
   medida, con UNA idea: cada tipo de servicio tiene su color, igual en el itinerario y en las carpetas de documentos.
   Vuelos azul, hoteles arena, actividades verde, trenes y traslados petroleo, cruceros azul marino, seguros ciruela. */
:root { --c-vuelo: #2F5D8A; --c-hotel: #8A6A2E; --c-tour: #2F7A4F; --c-tren: #2D6E73; --c-crucero: #1D3F6B; --c-seguro: #6B4C8A; --c-auto: #7A4A2D; }
#itinerario .dia > .dia-cab { background: var(--arena-suave); padding: 14px 18px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--fino); }
#itinerario .dia-num { color: var(--tinta); }
#itinerario .evento { border-left: 3px solid transparent; padding-left: 12px; }
#itinerario .evento .hora { color: var(--tinta); font-weight: 500; }
#itinerario .evento .ico { color: var(--tenue); }
#itinerario .evento[class*="tipo-vuelo"], #itinerario .evento[class*="tipo-llegada"] { border-left-color: var(--c-vuelo); }
#itinerario .evento[class*="tipo-vuelo"] .ico, #itinerario .evento[class*="tipo-llegada"] .ico { color: var(--c-vuelo); }
#itinerario .evento[class*="tipo-hotel"] { border-left-color: var(--c-hotel); } #itinerario .evento[class*="tipo-hotel"] .ico { color: var(--c-hotel); }
#itinerario .evento[class*="tipo-tour"] { border-left-color: var(--c-tour); } #itinerario .evento[class*="tipo-tour"] .ico { color: var(--c-tour); }
#itinerario .evento[class*="tipo-tren"], #itinerario .evento[class*="tipo-traslado"], #itinerario .evento[class*="tipo-autobus"] { border-left-color: var(--c-tren); }
#itinerario .evento[class*="tipo-tren"] .ico, #itinerario .evento[class*="tipo-traslado"] .ico, #itinerario .evento[class*="tipo-autobus"] .ico { color: var(--c-tren); }
#itinerario .evento[class*="tipo-crucero"], #itinerario .evento[class*="tipo-puerto"] { border-left-color: var(--c-crucero); }
#itinerario .evento[class*="tipo-crucero"] .ico, #itinerario .evento[class*="tipo-puerto"] .ico { color: var(--c-crucero); }
#itinerario .evento[class*="tipo-auto"] { border-left-color: var(--c-auto); } #itinerario .evento[class*="tipo-auto"] .ico { color: var(--c-auto); }
#itinerario .evento .t { font-weight: 500; color: var(--texto); }
.grupo-docs.grupo-vuelo { border-left-color: var(--c-vuelo); color: var(--c-vuelo); background: #EEF3F8; }
.grupo-docs.grupo-hotel { border-left-color: var(--c-hotel); color: var(--c-hotel); background: var(--arena-suave); }
.grupo-docs.grupo-tour { border-left-color: var(--c-tour); color: var(--c-tour); background: var(--verde-fondo); }
.grupo-docs.grupo-tren, .grupo-docs.grupo-traslado { border-left-color: var(--c-tren); color: var(--c-tren); background: #EAF3F3; }
.grupo-docs.grupo-crucero { border-left-color: var(--c-crucero); color: var(--c-crucero); background: #EDF1F7; }
.grupo-docs.grupo-seguro { border-left-color: var(--c-seguro); color: var(--c-seguro); background: #F3EFF7; }
.grupo-docs.grupo-auto { border-left-color: var(--c-auto); color: var(--c-auto); background: #F6EFEA; }
.grupo-docs b { color: inherit; }
.grupo-docs { padding-right: 10px; }

/* D-88 (Ale, 18-oct): lo importante se VE sin leer todo. Botones firmes, WhatsApp en verde, negritas automaticas en el itinerario
   (hora, vuelo, terminal, codigo, +1 dia), donde duermen como marcatexto y las etiquetas de Hoy con su color. */
.boton { border: 1.5px solid var(--tinta); color: var(--tinta); font-weight: 600; }
.boton:hover { background: var(--arena-suave); }
.boton.principal { font-weight: 600; box-shadow: 0 2px 0 rgba(14, 20, 41, 0.25); }
.boton.principal:has(use[href="#i-whatsapp"]), .boton.whatsapp { background: #1E7F4F; border-color: #1E7F4F; color: #fff; }
.boton.principal:has(use[href="#i-whatsapp"]):hover, .boton.whatsapp:hover { background: #166640; }
.boton:not(.principal):has(use[href="#i-whatsapp"]) { border-color: #1E7F4F; color: #1E7F4F; }
.panel > header h2 { font-weight: 700; color: var(--tinta); }
.panel > header { border-bottom: 2px solid var(--arena); }
.evento .que .t { font-weight: 600; color: var(--tinta); }
.evento .que .d b { font-weight: 700; color: var(--texto); }
.evento .que b.ojo, .op-texto b.ojo { color: var(--ambar); background: var(--ambar-fondo); padding: 0 4px; }
.evento .que b.cod, .op-texto b.cod { font-family: var(--f-mono); font-weight: 600; letter-spacing: 0.04em; color: var(--tinta);
  border-bottom: 1.5px solid var(--arena); }
.op-texto p b { font-weight: 700; color: var(--texto); }
.dia-sub .dia-fecha { font-weight: 600; color: var(--texto); }
.dia-sub .duerme { margin-left: 6px; padding: 1px 6px; background: linear-gradient(transparent 45%, #F3E3B5 45%); color: var(--texto); }
.dia-sub .duerme b { font-weight: 700; }
.op-texto .que { display: inline-block; padding: 2px 8px; margin-bottom: 6px; background: var(--arena-suave); }
.op-texto .que-seguro { background: #E3ECF8; color: #1F4E8C; }
.op-texto .que-traslado { background: var(--ambar-fondo); color: var(--ambar); }
.op-texto .que-libres { background: var(--verde-fondo); color: var(--verde); }
.op-texto strong { font-weight: 700; color: var(--tinta); }
.boton.chico-boton { border-width: 1px; border-color: var(--linea); color: var(--tinta-2); font-weight: 500; }
.boton.chico-boton:hover { border-color: var(--tinta); color: var(--tinta); }