:root {
  --navy: #14213D;
  --navy-2: #1E2F55;
  --rojo: #C8161D;
  --rojo-hover: #A51117;
  --mar: #0E7C86;
  --ambar: #B26A00;
  --papel: #F2F4F8;
  --blanco: #FFFFFF;
  --tinta: #1B2433;
  --gris: #5E6878;
  --linea: #DCE1EA;
  --suave: #EEF1F6;
  --radio: 10px;
  --sombra: 0 1px 2px rgba(20, 33, 61, .06), 0 4px 16px rgba(20, 33, 61, .05);
  --titulos: 'Poppins', system-ui, sans-serif;
  --texto: 'Nunito Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--texto);
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--papel);
}
h1, h2, h3 { font-family: var(--titulos); color: var(--navy); line-height: 1.25; margin: 0; }
h1 { font-size: 1.5rem; font-weight: 600; }
h2 { font-size: 1.1rem; font-weight: 600; }
h3 { font-size: .95rem; font-weight: 600; }
a { color: var(--navy); }
.cargando { padding: 2rem; color: var(--gris); }
.oculto { display: none !important; }
:focus-visible { outline: 3px solid #7FA7E6; outline-offset: 2px; }

/* ---------- Estructura ---------- */
.marco { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.lateral {
  background: var(--navy);
  color: #C9D1E3;
  padding: 1.25rem .9rem;
  display: flex; flex-direction: column; gap: 1.5rem;
  position: sticky; top: 0; height: 100vh;
}
.marca { font-family: var(--titulos); color: #fff; font-size: 1.25rem; font-weight: 700; padding: 0 .5rem; }
.marca span { font-weight: 500; opacity: .85; }
.lateral nav { display: flex; flex-direction: column; gap: 2px; }
.lateral nav a {
  color: #C9D1E3; text-decoration: none; padding: .55rem .75rem; border-radius: 8px;
  font-weight: 600; display: flex; align-items: center; gap: .6rem;
}
.lateral nav a:hover { background: var(--navy-2); color: #fff; }
.lateral nav a[aria-current="page"] { background: #fff; color: var(--navy); }
.lateral nav svg { width: 18px; height: 18px; flex: none; }
.quien { margin-top: auto; padding: .75rem; border-top: 1px solid var(--navy-2); font-size: .85rem; }
.quien strong { color: #fff; display: block; }
.quien button { margin-top: .5rem; }
.principal { padding: 1.75rem 2rem 3rem; min-width: 0; }
.encabezado { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.encabezado p { margin: .25rem 0 0; color: var(--gris); }
.barra-movil { display: none; }

/* ---------- Bloques ---------- */
.panel { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.25rem; }
.panel + .panel, .rejilla + .panel, .panel + .rejilla { margin-top: 1rem; }
.rejilla > .panel { margin-top: 0; }
.panel > h2 { margin-bottom: .85rem; }
.rejilla { display: grid; gap: 1rem; }
.rejilla.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla.cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cifra { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem 1.1rem; }
.cifra b { display: block; font-family: var(--titulos); font-size: 1.6rem; font-weight: 600; color: var(--navy); line-height: 1.2; }
.cifra small { color: var(--gris); }
.vacio { color: var(--gris); padding: .5rem 0; }
.rejilla.cifras.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
table.cuentas td { padding: .45rem .2rem; }
table.cuentas tr.subtotal td { border-top: 1px solid var(--linea); font-weight: 700; }
table.cuentas tr.total td { border-top: 2px solid var(--navy); font-family: var(--titulos); font-weight: 600; color: var(--navy); font-size: 1.02rem; }
table.cuentas tr.alerta-fila td { color: var(--ambar); border-top-color: var(--ambar); }

/* ---------- Tablas ---------- */
.tabla-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th { text-align: left; font-weight: 700; color: var(--gris); font-size: .8rem; padding: .5rem .6rem; border-bottom: 1px solid var(--linea); white-space: nowrap; }
td { padding: .6rem; border-bottom: 1px solid var(--suave); vertical-align: top; }
tbody tr.fila-enlace { cursor: pointer; }
tbody tr.fila-enlace:hover td { background: #F7F9FC; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sub { display: block; color: var(--gris); font-size: .82rem; }

/* ---------- Estados ---------- */
.estado { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.estado.cotizado { background: #E6ECF7; color: #2C4A80; }
.estado.vendido { background: #DDF2F3; color: #0B5F67; }
.estado.no_compro { background: #EEEFF2; color: #5E6878; }
.estado.anulado { background: #FBE6E7; color: #9A1015; }
.alerta { color: var(--ambar); font-weight: 700; }
.vencido { color: var(--rojo); font-weight: 700; }
.pagado { color: var(--mar); font-weight: 700; }
tr.pago-anulado td { color: var(--gris); }
tr.pago-anulado td.num { text-decoration: line-through; }

/* ---------- Formularios ---------- */
form .campos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .85rem 1rem; }
.c12 { grid-column: span 12; } .c8 { grid-column: span 8; } .c6 { grid-column: span 6; }
.c4 { grid-column: span 4; } .c3 { grid-column: span 3; } .c2 { grid-column: span 2; }
label { display: block; font-weight: 700; font-size: .85rem; margin-bottom: .3rem; color: var(--tinta); }
input, select, textarea {
  width: 100%; font: inherit; color: var(--tinta); background: #fff;
  border: 1px solid #C5CCD8; border-radius: 8px; padding: .55rem .65rem;
}
input:focus, select:focus, textarea:focus { border-color: var(--navy); outline: 2px solid #C8D6F0; outline-offset: 0; }
textarea { min-height: 96px; resize: vertical; }
.ayuda { color: var(--gris); font-size: .82rem; margin-top: .25rem; }
.acciones { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.acciones.final { margin-top: 1.25rem; justify-content: flex-end; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-family: var(--titulos); font-weight: 600; color: var(--navy); margin-bottom: .75rem; font-size: 1.05rem; }
.seccion-form + .seccion-form { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--suave); }

button, .boton {
  font: inherit; font-weight: 700; border: 1px solid transparent; border-radius: 8px;
  padding: .55rem 1rem; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem;
  background: var(--rojo); color: #fff;
}
button:hover, .boton:hover { background: var(--rojo-hover); }
button.secundario, .boton.secundario { background: #fff; color: var(--navy); border-color: #C5CCD8; }
button.secundario:hover, .boton.secundario:hover { background: var(--suave); }
button.texto { background: none; color: var(--navy); padding: .3rem .4rem; text-decoration: underline; }
button.texto:hover { background: none; color: var(--rojo); }
button.peligro { background: #fff; color: var(--rojo); border-color: #E7B5B7; }
button.peligro:hover { background: #FBE6E7; }
.lateral button.secundario { background: transparent; color: #C9D1E3; border-color: var(--navy-2); }
button:disabled { opacity: .55; cursor: not-allowed; }

.filtros { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.filtros input[type="search"] { max-width: 320px; }
.filtros select { width: auto; }

/* Líneas de la prefactura */
.lineas td { padding: .35rem .3rem; border: 0; }
.lineas input { padding: .45rem .5rem; }
.lineas .cant { width: 90px; } .lineas .precio { width: 150px; }
.total-form { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: .35rem 1.25rem; font-family: var(--titulos); color: var(--navy); margin-top: .75rem; }
.total-form span { font-size: .92rem; color: var(--gris, #5E6878); font-family: inherit; }
.total-form b { font-size: 1.15rem; }
.hab-linea { border: 1px solid #DCE1EA; border-left: 4px solid var(--mar); border-radius: 10px; padding: .75rem .9rem .9rem; margin-bottom: .75rem; background: #fff; }
.hab-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; color: var(--navy); font-family: var(--titulos); }

/* Selector de cliente */
.buscador-cliente { position: relative; }
.resultados { position: absolute; z-index: 5; left: 0; right: 0; top: 100%; background: #fff; border: 1px solid var(--linea); border-radius: 8px; box-shadow: var(--sombra); max-height: 260px; overflow: auto; margin-top: 4px; }
.resultados button { display: block; width: 100%; text-align: left; background: #fff; color: var(--tinta); border-radius: 0; font-weight: 400; padding: .55rem .75rem; }
.resultados button:hover, .resultados button:focus { background: var(--suave); }
.cliente-elegido { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--suave); border-radius: 8px; padding: .65rem .85rem; }

/* ---------- El boleto (detalle de reserva) ---------- */
.boleto { display: grid; grid-template-columns: 1fr 230px; background: #fff; border: 1px solid var(--linea); border-radius: 14px; box-shadow: var(--sombra); overflow: hidden; }
.boleto-cuerpo { padding: 1.25rem 1.5rem; }
.boleto-talon { background: var(--navy); color: #fff; padding: 1.25rem 1.25rem; position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; }
.boleto-talon::before { content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; border-left: 2px dashed rgba(255,255,255,.35); }
.boleto-talon .numero { font-family: var(--titulos); font-size: 1.35rem; font-weight: 700; letter-spacing: .02em; }
.boleto-talon small { color: #C9D1E3; display: block; }
.boleto-talon .monto { font-family: var(--titulos); font-size: 1.5rem; font-weight: 600; }
.ruta { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; margin: 1rem 0 .5rem; }
.ruta .fecha b { display: block; font-family: var(--titulos); font-size: 1.25rem; color: var(--navy); }
.ruta .fecha small { color: var(--gris); }
.ruta .fecha:last-child { text-align: right; }
.ruta .trazo { height: 2px; background: repeating-linear-gradient(90deg, var(--linea) 0 8px, transparent 8px 14px); position: relative; text-align: center; }
.ruta .trazo span { white-space: nowrap; position: relative; top: -.8rem; background: #fff; padding: 0 .5rem; color: var(--gris); font-size: .85rem; font-weight: 700; }
.datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem 1.25rem; margin-top: 1rem; }
.datos div small { display: block; color: var(--gris); font-size: .8rem; }
.datos div span { font-weight: 600; }

/* ---------- Demostración ---------- */
.cinta-demo { background: #FFF5E6; color: #6B4300; border-bottom: 1px solid #F1D3A1; padding: .45rem 1rem; font-size: .85rem; text-align: center; }
.cinta-demo button.texto { color: #6B4300; font-size: .85rem; padding: 0 .25rem; }
.demo-roles { border-top: 1px solid var(--linea); padding-top: 1rem; margin-top: .25rem; }
.demo-roles h3 { margin-bottom: .6rem; }
.demo-roles .acciones button { padding: .35rem .7rem; }

/* ---------- Diálogos ---------- */
dialog { border: 0; border-radius: 12px; padding: 1.5rem; width: min(520px, 92vw); box-shadow: 0 20px 60px rgba(20,33,61,.25); }
dialog::backdrop { background: rgba(20, 33, 61, .45); }
dialog h2 { margin-bottom: .75rem; }

/* ---------- Aviso ---------- */
#aviso { position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%); background: var(--navy); color: #fff; padding: .7rem 1.1rem; border-radius: 8px; box-shadow: var(--sombra); z-index: 50; max-width: 90vw; }
#aviso.error { background: var(--rojo); }

/* ---------- Acceso ---------- */
.acceso { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.acceso-arte { background: var(--navy); color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.acceso-arte .marca { font-size: 1.6rem; padding: 0; }
.acceso-arte h1 { color: #fff; font-size: 2.2rem; font-weight: 600; max-width: 14ch; }
.acceso-arte p { color: #C9D1E3; max-width: 40ch; }
.acceso-arte .sol { position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: var(--navy-2); }
.acceso-arte .sol::after { content: ""; position: absolute; left: 110px; top: 110px; width: 100px; height: 100px; border-radius: 50%; background: var(--rojo); }
.acceso-form { display: grid; place-items: center; padding: 2rem; background: #fff; }
.acceso-form form { width: min(380px, 100%); display: grid; gap: 1rem; }

/* ---------- Documento imprimible ---------- */
.doc { background: #fff; max-width: 820px; margin: 0 auto; padding: 2.5rem 2.75rem; border: 1px solid var(--linea); border-radius: 6px; }
.doc-cabeza { display: flex; justify-content: space-between; gap: 2rem; padding-bottom: 1.25rem; border-bottom: 3px solid var(--rojo); }
.doc-cabeza .marca { color: var(--navy); padding: 0; font-size: 1.5rem; }
.doc-cabeza .agencia { font-size: .82rem; color: var(--gris); margin-top: .35rem; }
.doc-cabeza .tipo { text-align: right; }
.doc-cabeza .tipo h1 { font-size: 1.35rem; }
.doc-cabeza .tipo div { font-size: .88rem; color: var(--gris); }
.doc-bloques { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 1.5rem 0; }
.doc-bloques h3 { font-size: .85rem; color: var(--rojo); margin-bottom: .35rem; }
.doc-bloques p { margin: 0; font-size: .92rem; }
.doc table { margin-top: .5rem; }
.doc th { background: var(--suave); color: var(--navy); }
.doc .totales { margin-left: auto; width: 360px; margin-top: 1rem; }
.doc .totales div { display: flex; justify-content: space-between; padding: .3rem 0; }
.doc .totales .grande { font-family: var(--titulos); font-size: 1.2rem; color: var(--navy); border-top: 2px solid var(--navy); margin-top: .3rem; padding-top: .5rem; font-weight: 600; }
.doc .condiciones { margin-top: 1.75rem; font-size: .82rem; color: var(--gris); white-space: pre-line; border-top: 1px solid var(--linea); padding-top: 1rem; }
.doc .limite { background: #FFF5E6; border: 1px solid #F1D3A1; border-radius: 6px; padding: .65rem .85rem; margin-top: 1rem; font-size: .9rem; }
.barra-doc { max-width: 820px; margin: 0 auto 1rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ---------- Caja ---------- */
.fila-total td { border-top: 2px solid var(--navy); font-family: var(--titulos); font-weight: 600; color: var(--navy); }
.aviso-panel { background: #FFF5E6; border: 1px solid #F1D3A1; border-radius: var(--radio); padding: .7rem 1rem; margin-bottom: 1rem; color: #6B4300; }
.doc .totales .abono span:first-child small { display: block; font-size: .75rem; color: var(--gris); }
.buscador-caja input { font-size: 1.15rem; padding: .8rem .9rem; }

/* ---------- Foto en el formulario ---------- */
.foto-previa { border: 1px dashed #C5CCD8; border-radius: 10px; min-height: 150px; display: grid; place-items: center; overflow: hidden; background: var(--suave); color: var(--gris); font-size: .85rem; text-align: center; padding: .5rem; }
.foto-previa img { width: 100%; height: 190px; object-fit: cover; border-radius: 6px; display: block; }

/* ---------- Voucher de entrada ---------- */
.voucher { max-width: 820px; margin: 0 auto; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--sombra); border: 1px solid var(--linea); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.v-encabezado { background: var(--navy); color: #fff; }
.v-encabezado img { display: block; width: 100%; height: auto; }
.v-banda { padding: 1.1rem 1.75rem 1.25rem; border-top: 4px solid var(--rojo); }
.v-banda p { margin: 0; font-size: .9rem; color: #C9D1E3; }
.v-banda h1 { color: #fff; font-size: 2.1rem; font-weight: 700; line-height: 1.1; margin: .25rem 0; text-wrap: balance; }
.v-banda .v-nombre { color: #fff; font-size: 1.1rem; font-weight: 600; }
.v-portada { position: relative; height: 380px; color: #fff; overflow: hidden; background: var(--navy); }
.v-foto, .v-ilustracion { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.v-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,33,61,.55) 0%, rgba(20,33,61,0) 30%, rgba(20,33,61,0) 45%, rgba(20,33,61,.85) 100%); }
.v-marca { position: absolute; top: 1.4rem; left: 1.75rem; font-family: var(--titulos); font-weight: 700; font-size: 1.25rem; }
.v-marca span { font-weight: 500; }
.v-saludo { position: absolute; left: 1.75rem; right: 1.75rem; bottom: 1.5rem; }
.v-saludo p { margin: 0; font-size: .9rem; opacity: .9; }
.v-saludo h1 { color: #fff; font-size: 2.6rem; font-weight: 700; line-height: 1.05; margin: .3rem 0 .4rem; text-wrap: balance; text-shadow: 0 2px 18px rgba(0,0,0,.25); }
.v-saludo .v-nombre { font-size: 1.15rem; opacity: 1; font-weight: 600; }
.v-cuerpo { padding: 1.75rem 1.75rem 1.25rem; display: grid; gap: 1.4rem; }
.v-hotel h2 { font-size: 1.45rem; }
.v-hotel p { margin: .2rem 0 0; color: var(--gris); }
.v-estadia { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.25rem; background: var(--suave); border-radius: 12px; padding: 1rem 1.4rem; }
.v-estadia > div:not(.v-noches) { display: grid; text-align: center; }
.v-estadia small { color: var(--gris); font-size: .78rem; }
.v-estadia b { font-family: var(--titulos); font-size: 2.3rem; line-height: 1.1; color: var(--navy); }
.v-estadia span { font-weight: 700; color: var(--navy); }
.v-noches { position: relative; height: 2px; background: repeating-linear-gradient(90deg, #AEB8C9 0 8px, transparent 8px 14px); text-align: center; }
.v-noches span { position: relative; top: -.75rem; background: var(--suave); padding: 0 .6rem; color: var(--rojo); font-weight: 700; white-space: nowrap; }
.v-datos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem 1.5rem; margin: 0; }
.v-datos dt { font-size: .78rem; color: var(--gris); }
.v-datos dd { margin: .1rem 0 0; font-weight: 700; }
.v-datos .v-ok { color: var(--mar); }
.v-datos .v-localizador { font-family: var(--titulos); font-size: 1.15rem; color: var(--navy); letter-spacing: .02em; }
.v-bloque h3 { color: var(--rojo); font-size: .9rem; margin-bottom: .3rem; }
.v-bloque p { margin: 0; white-space: pre-line; }
.v-habs { width: 100%; border-collapse: collapse; font-size: .9rem; }
.v-habs td { padding: .3rem .5rem .3rem 0; border-bottom: 1px solid #E6E9F0; vertical-align: middle; }
.v-loc { display: inline-flex; flex-direction: column; align-items: flex-start; padding: .2rem .5rem; border: 1.5px solid var(--rojo); border-radius: 6px; background: #FFF4F2; line-height: 1.15; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.v-loc small { font-size: .6rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--rojo); }
.v-loc b { font-family: var(--titulos); font-size: .92rem; color: var(--navy); letter-spacing: .03em; }
.v-aviso { border-left: 4px solid var(--rojo); background: #FFF5F5; padding: .7rem .9rem; border-radius: 0 8px 8px 0; font-weight: 600; }
.v-pie { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; background: var(--navy); color: #C9D1E3; padding: 1.1rem 1.75rem; font-size: .88rem; }
.v-pie b { color: #fff; }
.v-firma { font-family: var(--titulos); color: #fff; font-weight: 700; font-size: 1.1rem; text-align: right; }
.v-firma span { font-weight: 500; }
.v-firma small { display: block; font-family: var(--texto); font-weight: 400; font-size: .8rem; color: #C9D1E3; }
@media (max-width: 760px) {
  .v-portada { height: 300px; }
  .v-saludo h1 { font-size: 1.9rem; }
  .v-banda h1 { font-size: 1.6rem; }
  .v-banda { padding: .9rem 1rem 1rem; }
  .v-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-estadia { padding: .9rem; gap: .6rem; }
  .v-estadia b { font-size: 1.8rem; }
  .v-pie { flex-direction: column; align-items: flex-start; }
  .v-firma { text-align: left; }
}
@media print {
  .voucher { border: 0; box-shadow: none; border-radius: 0; max-width: none; }
  .v-portada { height: 330px; }
}

@media print {
  body { background: #fff; }
  .lateral, .barra-doc, .barra-movil, #aviso { display: none !important; }
  .marco { display: block; }
  .principal { padding: 0; }
  .doc { border: 0; padding: 0; max-width: none; }
  @page { margin: 14mm; }
}

/* ---------- Pantallas pequeñas ---------- */
@media (max-width: 980px) {
  .rejilla.cifras, .rejilla.cifras.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla.dos { grid-template-columns: 1fr; }
  .boleto { grid-template-columns: 1fr; }
  .boleto-talon::before { display: none; }
  .datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) { .ruta { gap: .5rem; } .ruta .fecha b { font-size: 1.05rem; } }
@media (max-width: 760px) {
  .marco { grid-template-columns: 1fr; }
  .lateral { position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 40; transform: translateX(-100%); transition: transform .2s; }
  .lateral.abierta { transform: none; }
  .barra-movil { display: flex; justify-content: space-between; align-items: center; background: var(--navy); color: #fff; padding: .65rem 1rem; position: sticky; top: 0; z-index: 30; }
  .barra-movil .marca { font-size: 1.05rem; padding: 0; }
  .barra-movil button { background: transparent; border: 1px solid var(--navy-2); }
  .principal { padding: 1.1rem 1rem 3rem; }
  form .campos > * { grid-column: span 12; }
  .acceso { grid-template-columns: 1fr; }
  .acceso-arte { padding: 2rem 1.5rem; min-height: 220px; }
  .acceso-arte h1 { font-size: 1.6rem; }
  .doc { padding: 1.25rem; }
  .doc-cabeza, .doc-bloques { grid-template-columns: 1fr; display: grid; }
  .doc-cabeza .tipo { text-align: left; }
  .doc .totales { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Voucher al imprimir o guardar en PDF: siempre en una hoja, con el diseño de escritorio */
@media print {
  .marco { min-height: 0; }
  .principal { padding: 0 !important; }
  .voucher { break-inside: avoid; zoom: .86; }
  .principal > .barra-doc + .voucher { margin-top: 0; }
  .v-banda { padding: .8rem 1.4rem .9rem; }
  .v-banda h1 { font-size: 1.75rem; }
  .v-cuerpo { gap: .9rem; padding: 1.1rem 1.4rem .9rem; }
  .v-hotel h2 { font-size: 1.3rem; }
  .v-estadia { padding: .7rem 1.2rem; gap: 1rem; }
  .v-estadia b { font-size: 1.9rem; }
  .v-datos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem 1.25rem; }
  .v-pie { flex-direction: row; align-items: flex-end; padding: .9rem 1.4rem; }
  .v-firma { text-align: right; }
}

.aviso-bloqueo { background: #EEF1F6; border: 1px dashed #B9C2D3; border-radius: 8px; padding: .55rem .8rem; font-size: .9rem; color: var(--navy); margin: 0 0 .75rem; }
.hab-linea input:disabled { background: #F2F4F8; color: #9AA3B2; cursor: not-allowed; }
.estado.reservado { background: #FFF1D6; color: #8A5A00; }

.avisos-admin { border-left: 4px solid var(--rojo); }
.avisos-admin h2 .contador { display: inline-block; background: var(--rojo); color: #fff; border-radius: 999px; font-size: .8rem; padding: .05rem .55rem; vertical-align: middle; }
.aviso-item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 0; border-top: 1px solid #E6E9F0; }
.aviso-item:first-of-type { border-top: 0; }
.aviso-item p { margin: .15rem 0; }
.aviso-item .acciones { flex-shrink: 0; }
@media (max-width: 640px) { .aviso-item { flex-direction: column; align-items: flex-start; } }
.estado.pagado_proveedor { background: #E3F3E6; color: #1E6B34; }
.rejilla.cifras.dos-cifras { grid-template-columns: repeat(auto-fit, minmax(220px, 320px)); }
.en-fecha { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; }
.en-fecha input { width: auto; }
.codigo-prov { color: var(--mar); font-weight: 600; }

/* ---------- Ajustes para móviles ---------- */
.rejilla > *, .panel, .marco > main { min-width: 0; }
.doc .totales .abono span:last-child, .doc td.num, .tabla-movil td.num { white-space: nowrap; }
@media (max-width: 760px) {
  form .campos > .m6 { grid-column: span 6; }
  .encabezado .acciones { width: 100%; }
  .encabezado .acciones > * { flex: 1 1 auto; text-align: center; }
}
@media (max-width: 640px) {
  table.tabla-movil thead { display: none; }
  table.tabla-movil, table.tabla-movil tbody, table.tabla-movil tr { display: block; width: 100%; }
  table.tabla-movil tr { padding: .55rem 0; border-bottom: 1px solid #E6E9F0; }
  table.tabla-movil td { display: block; position: relative; padding: .2rem 0 .2rem 38%; border: 0; text-align: right; min-height: 1.4em; }
  table.tabla-movil td > * { text-align: right; }
  table.tabla-movil td::before { content: attr(data-label); position: absolute; left: 0; top: .25rem; width: 36%; font-size: .8rem; font-weight: 600; color: #5E6878; text-align: left; }
  table.tabla-movil td:first-child { padding-left: 0; text-align: left; }
  table.tabla-movil td:first-child::before { content: none; }
  table.tabla-movil td:first-child > * { text-align: left; }
  table.tabla-movil td:empty { display: none; }
  table.tabla-movil select, table.tabla-movil input { max-width: 60%; }
  .v-habs tr { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem .75rem; padding: .45rem 0; border-bottom: 1px solid #E6E9F0; }
  .v-habs td { border: 0; padding: 0; }
  .doc .totales .abono { gap: .75rem; }
}
.hab-cab > span { white-space: nowrap; font-family: var(--cuerpo, inherit); }
.hab-cab { gap: .75rem; }
.doc-logo { display: block; width: 150px; height: auto; margin-bottom: .5rem; }
@media print { .doc-logo { width: 130px; } }

/* Edad de cada niño: casillas pequeñas en fila */
.zona-edades { display: flex; flex-wrap: wrap; gap: .5rem .75rem; }
.zona-edades[hidden] { display: none; }
.edad-nino { width: 7.5rem; }
.edad-nino label { font-size: .78rem; white-space: nowrap; }
.edad-nino input { width: 100%; }
.prov-otro { margin-top: .4rem; }

.hab-num { display: block; font-size: .78rem; color: var(--navy); }
@media print {
  .doc { font-size: 12.5px; }
  .doc table td, .doc table th { padding-top: .3rem; padding-bottom: .3rem; }
  .doc .hab-num { font-size: .72rem; }
  .doc-logo { width: 105px; }
  .doc-cabeza { padding-bottom: .6rem; margin-bottom: .9rem; }
  .doc .condiciones { font-size: 10.5px; }
}
@media print {
  .doc { line-height: 1.35; }
  .doc table td, .doc table th { padding-top: .2rem; padding-bottom: .2rem; }
  .doc .totales, .doc .limite, .doc .condiciones, .doc-bloques { margin-top: .6rem; margin-bottom: .6rem; }
  .doc .limite { padding: .45rem .7rem; }
}

/* Sugerencias de hotel */
.con-sugerencias { position: relative; }
.sugerencias { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin: .2rem 0 0; padding: .25rem 0; list-style: none; background: #fff; border: 1px solid #D5DAE5; border-radius: 10px; box-shadow: 0 10px 28px rgba(20, 33, 61, .16); max-height: 320px; overflow-y: auto; }
.sugerencias li[data-i] { padding: .5rem .8rem; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.sugerencias li[data-i] span { font-size: .8rem; color: var(--gris); white-space: nowrap; }
.sugerencias li[data-i]:hover, .sugerencias li.activo { background: #EEF2F8; }
.sugerencias .sug-nota { padding: .45rem .8rem; font-size: .78rem; color: var(--gris); }
@media (max-width: 640px) { .sugerencias li[data-i] { flex-direction: column; gap: 0; } }

/* Voucher de grupos */
.v-modo { display: inline-flex; gap: .25rem; padding: .25rem; margin: 0 0 1rem; background: var(--suave); border-radius: 10px; flex-wrap: wrap; }
.v-modo a { padding: .45rem .85rem; border-radius: 8px; font-weight: 600; font-size: .9rem; color: var(--navy); text-decoration: none; }
.v-modo a.activo { background: #fff; box-shadow: 0 1px 3px rgba(20, 33, 61, .15); }
.voucher.v-individual + .voucher.v-individual { margin-top: 1.5rem; }
.v-grupo .v-habs td { padding-top: .2rem; padding-bottom: .2rem; font-size: .85rem; }
.v-grupo .v-loc { padding: .1rem .4rem; }
.v-grupo .v-loc b { font-size: .82rem; }
.v-grupo .v-loc small { font-size: .55rem; }
@media print {
  .v-modo { display: none !important; }
  .voucher.v-grupo { break-inside: auto; }
  .v-grupo .v-encabezado img { height: 34mm; object-fit: cover; object-position: top; }
  .v-grupo .v-habs tr { break-inside: avoid; }
  .v-grupo .v-cuerpo { gap: .6rem; }
  .v-grupo .v-estadia { padding: .45rem 1rem; }
  .v-grupo .v-estadia b { font-size: 1.5rem; }
  .voucher.v-individual { break-after: page; }
  .voucher.v-individual:last-of-type { break-after: auto; }
  .voucher.v-individual + .voucher.v-individual { margin-top: 0; }
}
@media print {
  .doc table tr, .doc .totales, .doc .limite, .doc .condiciones { break-inside: avoid; }
  .doc thead { display: table-header-group; }
}

/* Políticas y condiciones completas */
.chk-pol { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; font-weight: 600; margin-right: .5rem; }
.chk-pol input { width: auto; }
.nota-politicas { margin: .9rem 0 0; font-size: .8rem; color: var(--gris); }
.nota-politicas .no-politicas { display: none; }
.nota-politicas.sin .si-politicas { display: none; }
.nota-politicas.sin .no-politicas { display: inline; }
.doc-politicas { margin-top: 1.5rem; }
.pol-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 2px solid var(--rojo); padding-bottom: .4rem; margin-bottom: .8rem; }
.pol-cabeza h2 { font-size: 1.15rem; margin: 0; }
.pol-cabeza span { font-size: .78rem; color: var(--gris); }
.pol-texto { columns: 2; column-gap: 1.6rem; font-size: .78rem; line-height: 1.45; text-align: justify; hyphens: auto; }
.pol-bloque { margin-bottom: .55rem; }
.pol-texto h3 { font-size: .8rem; margin: .5rem 0 .2rem; color: var(--navy); break-after: avoid; text-align: left; }
.pol-texto p { margin: 0 0 .25rem; }
.pol-pie { margin: .8rem 0 0; font-size: .72rem; color: var(--gris); text-align: center; }
@media (max-width: 640px) { .pol-texto { columns: 1; } }
@media print {
  .chk-pol { display: none !important; }
  .doc-politicas { break-before: page; margin-top: 0; }
  .doc-politicas[hidden] { display: none !important; }
  .pol-texto { font-size: 9.6px; line-height: 1.4; column-gap: 7mm; }
  .pol-texto h3 { font-size: 10px; }
}

/* Servicios adicionales */
.servicios-form { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px dashed #D5DAE5; }
.servicios-form h3 { margin: 0 0 .25rem; font-size: 1rem; }
.botones-servicio { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.serv-linea { border-left-color: var(--rojo); }
.doc-servicios { margin-top: .6rem; }
.v-servicios { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.v-servicios li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid #E6E9F0; font-size: .9rem; }
.v-servicios li div { display: grid; }
.v-servicios li span:not(.v-loc) { color: var(--gris); font-size: .84rem; }
@media print { .v-servicios li { break-inside: avoid; } }

/* Marca de agua con el logo y pie de página numerado en cotización, prefactura y factura */
.doc { position: relative; isolation: isolate; }
.doc[style*="--marca"]::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--marca) center 38% / min(55%, 340px) no-repeat; opacity: .06; }
.doc-marca { display: none; }
@media print {
  .doc { page: documento; }
  .doc[style*="--marca"]::before { display: none; }
  .doc { background: transparent !important; }
  .doc-marca { display: flex; position: fixed; inset: 0; align-items: center; justify-content: center; z-index: -1; pointer-events: none; }
  .doc-marca img { width: 62%; max-width: 120mm; opacity: .07; }
  @page documento {
    margin: 14mm 14mm 18mm;
    @bottom-left { content: "Lokieroo Travels"; font-family: Inter, Arial, sans-serif; font-size: 8pt; font-weight: 600; color: #14213D; }
    @bottom-right { content: "Página " counter(page) " de " counter(pages); font-family: Inter, Arial, sans-serif; font-size: 8pt; color: #6B7280; }
  }
}
.chk-hotel { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; margin-bottom: .6rem; }
.chk-hotel input { width: auto; }
.sub-titulo { font-size: .8rem; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: .04em; margin-top: .35rem; }
.solo-hotel[hidden] { display: none !important; }
@media print { .v-modo-nota { display: none !important; } }
/* Pasajeros del vuelo: una fila por pasajero con su equipaje */
.pasajeros-vuelo { display: grid; gap: .5rem; }
.pax-fila { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; padding: .55rem .7rem; background: var(--suave); border-radius: 8px; }
@media (max-width: 640px) { .pax-fila { grid-template-columns: 1fr 1fr; } .pax-nombre { grid-column: 1 / -1; } }
.doc .limite ul { margin: .25rem 0 0; padding-left: 1.1rem; }
.serv-limite { margin-top: -.15rem; }
.lim-hab { font-size: .88rem; margin-top: -.1rem; }
.lim-acciones { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; padding-bottom: .55rem; }
.pago-inmediato { display: inline-block; background: #FDECEC; color: var(--rojo); border: 1px solid #F4B9BB; border-radius: 999px; padding: .1rem .6rem; font-size: .78rem; font-weight: 700; }
.doc .limite.pagado-doc { background: #E8F6EE; border-color: #A9DDBE; color: #15603A; }
.hab-linea, #f-costos-conta { scroll-margin-top: 80px; }
/* Datos obligatorios que faltan al reservar */
input.falta, select.falta { border-color: var(--rojo) !important; background: #FFF5F5 !important; box-shadow: 0 0 0 3px rgba(200, 22, 29, .12); }

/* Facturas de proveedores */
#fp-cifras small { display: block; }
#fp-cifras small.vencido { color: #B42318; }
.aviso-panel-fp { border-left: 4px solid var(--navy); }
tr.fila-clic { cursor: pointer; }
tr.fila-clic:hover td { background: #F4F6FA; }
.chk-inline { display: inline-flex; align-items: center; gap: .35rem; margin-left: .75rem; font-weight: 400; font-size: .9rem; }
.chk-inline input { width: auto; }
.lista-sugerencias { display: grid; gap: .3rem; margin-top: .4rem; }
.lista-sugerencias button { text-align: left; background: #fff; color: var(--navy); border: 1px solid #D5DAE5; border-radius: 8px; padding: .5rem .75rem; font-weight: 400; }
.lista-sugerencias button:hover { background: #EEF2F8; }
.lista-sugerencias .sub { display: block; font-size: .8rem; color: var(--gris); }
#fp-texto { max-height: 260px; overflow: auto; background: #F6F7FA; border: 1px solid #E2E6EE; border-radius: 8px; padding: .6rem; font-size: .78rem; white-space: pre-wrap; }
#fp-lectura .pagado, #fp-cuadre .pagado { color: #15803D; }

/* Comprobante fiscal */
.tipo-comp { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .6rem; }
.opcion-comp { display: flex; gap: .6rem; align-items: flex-start; border: 1px solid #D5DAE5; border-radius: 10px; padding: .7rem .85rem; cursor: pointer; font-weight: 400; background: #fff; }
.opcion-comp input { width: auto; margin-top: .25rem; }
.opcion-comp b { display: block; color: var(--navy); }
.opcion-comp small { display: block; color: var(--gris); font-size: .82rem; }
.opcion-comp:has(input:checked) { border-color: var(--navy); background: #EEF2F8; }
.doc .doc-fiscal { margin-top: .6rem; }
.doc .doc-fiscal small { display: block; font-size: .75rem; color: var(--gris); }
.doc .totales .desglose { font-size: .9rem; color: var(--gris); }
#zona-fiscal[hidden] { display: none; }

/* Enlace público del cliente */
.principal.publico { max-width: 980px; margin: 0 auto; padding: 1rem; }
.pub-marca { font-family: var(--titulos); font-weight: 600; color: var(--navy); }

/* Aviso al grupo de vendedores */
.aviso-grupo { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; justify-content: space-between; }
.aviso-grupo.destacado { border: 2px solid #25D366; background: #F0FBF4; }
.aviso-grupo #b-grupo { background: #128C4B; border-color: #128C4B; }

/* Comprobantes de pago */
.zona-subir { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: 1.4rem; border: 2px dashed #B9C2D3; border-radius: 12px; cursor: pointer; text-align: center; background: #F8FAFC; }
.zona-subir:hover { border-color: var(--navy); background: #EEF2F8; }
.zona-subir span { color: var(--gris); font-size: .9rem; }
.comp-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1rem; align-items: start; }
.comp-foto img { width: 100%; height: auto; border-radius: 8px; display: block; }
@media (max-width: 900px) { .comp-rejilla { grid-template-columns: 1fr; } }
.comp-pendientes { background: #FFF8E6; border: 1px solid #F5D78E; border-radius: 8px; padding: .6rem .8rem; margin-bottom: .6rem; font-size: .9rem; display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
#cp-texto { max-height: 220px; overflow: auto; background: #F6F7FA; border: 1px solid #E2E6EE; border-radius: 8px; padding: .6rem; font-size: .78rem; white-space: pre-wrap; }

/* Interruptores de WhatsApp por tipo */
.wa-tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: .8rem; }
.wa-tipos fieldset { border: 1px solid #E2E6EE; border-radius: 10px; padding: .6rem .8rem; margin: 0; }
.wa-tipos legend { font-weight: 600; color: var(--navy); padding: 0 .3rem; }
.wa-tipo { display: flex; gap: .55rem; align-items: flex-start; padding: .35rem 0; font-weight: 400; cursor: pointer; }
.wa-tipo input { width: auto; margin-top: .2rem; }
.wa-tipo b { display: block; font-weight: 500; }
.wa-tipo small { display: block; color: var(--gris); font-size: .8rem; }
.wa-tipo { justify-content: space-between; align-items: center; }
.wa-tipo select { width: auto; min-width: 9.5rem; flex-shrink: 0; }