:root {
  /* Paleta fiel al prototipo Bitacora-v2 (estética boutique, beige cálido). */
  --bg: #f5f4f0;
  --panel: #ffffff;
  --ink: #1a1a1a;
  --muted: #6b7280;
  --muted2: #9ca3af;
  --line: #e8e7e1;
  --line2: #f0efe9;
  --ok: #059669;
  --bad: #dc2626;
  --warn: #d97706;
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px -4px rgba(0,0,0,.12);
  --shadow-lg: 0 20px 60px -20px rgba(0,0,0,.3);
  --r: 12px;
  /* Marca (Meraki por defecto: turquesa + oro). */
  --brand: #2d8ba1;
  --brand2: #cda15c;
  --brand-ink: #1c5f6f;
  --brand-soft: #e7f4f7;
  /* Alias usados por el login. */
  --brand-a: #2d8ba1;
  --brand-b: #cda15c;
  /* Pie del micrositio (color de marca de cada agencia). */
  --footer: #2d8ba1;
  --radius: 14px;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, "SF Mono", monospace;
}

/* Tema por agencia: Mis Lugares Recorridos (verde + azul). */
body[data-ag="mlr"] {
  --brand: #0f9e79;
  --brand2: #16386a;
  --brand-ink: #0b5f52;
  --brand-soft: #e4f5ef;
  --brand-a: #0f9e79;
  --brand-b: #16386a;
  /* Pie con el primario (verde), no con el secundario (azul). */
  --footer: #0f9e79;
}
/* El verde del pie es más claro que el azul que tenía antes, así que el texto
   va en blanco puro (sin alfa) para no perder legibilidad. Solo MLR: el email
   del pie de Meraki (turquesa) queda como estaba. */
body[data-ag="mlr"] .mfoot { color: #fff; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
}

.serif { font-family: var(--serif); }
::selection { background: var(--brand); color: #fff; }

/* ---------- Login ---------- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(1200px 600px at 20% -10%, #163a44 0%, transparent 60%),
              radial-gradient(1000px 500px at 100% 120%, #3a2f16 0%, transparent 55%),
              #0f1720;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--panel);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 40px 34px 34px;
}

.login-brand { text-align: center; margin-bottom: 22px; }

.login-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  font-weight: 800;
  font-size: 26px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-a), var(--brand-b));
  box-shadow: 0 8px 20px rgba(45, 139, 161, 0.4);
}

.login-brand h1 { margin: 14px 0 2px; font-size: 24px; letter-spacing: 0.2px; }
.login-sub { margin: 0; color: var(--muted); font-size: 13px; }

.login-form { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.login-form label { font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 10px; }

.login-form input {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 15px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.login-form input:focus {
  border-color: var(--brand-a);
  box-shadow: 0 0 0 3px rgba(45, 139, 161, 0.15);
}

.login-form button {
  margin-top: 20px;
  padding: 13px;
  border: 0;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, var(--brand-a), #24707f);
}
.login-form button:hover { filter: brightness(1.05); }

.login-error {
  background: #fdecec;
  color: #b3261e;
  border: 1px solid #f5c6c3;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  margin: 0 0 6px;
  text-align: center;
}

/* ---------- App layout ---------- */
.layout { display: flex; min-height: 100vh; background: var(--bg); }

.sidebar {
  width: 244px;
  flex-shrink: 0;
  background: #101a24;
  color: #cdd6df;
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
}

.side-brand { font-weight: 800; font-size: 18px; color: #fff; display: flex; align-items: center; gap: 8px; margin-bottom: 22px; }
.side-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px; font-size: 15px;
  background: linear-gradient(135deg, var(--brand-a), var(--brand-b)); color: #fff;
}

.side-user { display: flex; align-items: center; gap: 11px; padding: 12px; background: rgba(255,255,255,0.05); border-radius: 12px; margin-bottom: 18px; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 17px;
}
.side-user-info { display: flex; flex-direction: column; line-height: 1.25; }
.side-user-info strong { color: #fff; font-size: 14px; }
.side-user-info small { color: #8a97a3; font-size: 12px; }

.side-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; border-radius: 10px;
  color: #b9c3cd; text-decoration: none; font-size: 14px; font-weight: 500;
  transition: background 0.12s, color 0.12s;
}
.nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav-item.activa { background: var(--brand-a); color: #fff; }
.nav-icon { width: 20px; text-align: center; }

.side-logout { margin-top: 12px; }
.side-logout button {
  width: 100%; padding: 10px; border: 1px solid rgba(255,255,255,0.14);
  background: transparent; color: #cdd6df; border-radius: 10px; cursor: pointer; font-size: 13px;
}
.side-logout button:hover { background: rgba(255,255,255,0.06); color: #fff; }

.app-main { flex: 1; display: flex; flex-direction: column; }

.topbar {
  height: 66px; background: #fff; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; padding: 0 26px;
}

.agencia-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border: 1.5px solid var(--line); border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--ink); background: #fff;
}
.agencia-chip .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.agencia-selector { display: flex; align-items: center; gap: 8px; }
.agencia-selector label { font-size: 12px; color: var(--muted); font-weight: 600; }
.agencia-selector select {
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 14px; background: #fff; color: var(--ink); cursor: pointer;
}
.agencia-selector noscript button { margin-left: 6px; }

.app-content { padding: 30px 26px; }
.placeholder {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 44px; text-align: center; color: var(--muted); box-shadow: var(--shadow);
}
.placeholder h2 { margin: 0 0 8px; color: var(--ink); font-size: 22px; }
.placeholder p { margin: 0; font-size: 14px; }

@media (max-width: 640px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; flex-direction: column; }
}

/* ==================== Módulo Propuestas ==================== */
.app-content { padding: 26px; }

/* Encabezado de página */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.page-head h1 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 30px; color: var(--ink); }
.page-sub { margin: 4px 0 0; color: var(--muted); font-size: 14px; }

/* Botones (estilo prototipo) */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 15px; border: 1px solid var(--line); border-radius: 9px;
  background: #fff; color: var(--ink); font-size: 14px; font-weight: 600;
  cursor: pointer; text-decoration: none; line-height: 1; transition: background .12s, filter .12s;
}
.btn:hover { background: #fafaf7; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { filter: brightness(1.07); background: var(--brand); }
.btn.sm { padding: 7px 11px; font-size: 13px; border-radius: 8px; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.block { width: 100%; justify-content: center; }

/* Separador "Insertar día aquí" entre días del itinerario */
.dia-insert { display: flex; align-items: center; gap: 10px; margin: 6px 0; color: var(--muted); }
.dia-insert::before, .dia-insert::after { content: ""; flex: 1; height: 1px; background: var(--line, #e4e0d6); }
.dia-insert .btn.ghost { color: var(--muted); border: 1px dashed var(--line, #cfc9bb); white-space: nowrap; }
.dia-insert .btn.ghost:hover { color: var(--brand); border-color: var(--brand); }

/* Filtros */
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.filtros .f-search { flex: 1; min-width: 240px; }
.filtros input, .filtros select {
  padding: 9px 13px; border: 1px solid var(--line); border-radius: 9px;
  font-size: 14px; background: #fff; color: var(--ink); font-family: var(--sans);
}
.filtros input:focus, .filtros select:focus { outline: none; border-color: var(--brand); }
.filtros select { cursor: pointer; }

/* Card */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }

/* Tabla */
.tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tbl th {
  text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); background: #fcfcfa;
}
.tbl td { padding: 13px 16px; border-bottom: 1px solid var(--line2); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: #fcfbf8; }
.tbl th.c, .tbl td.c { text-align: center; }
.tbl th.r, .tbl td.r { text-align: right; }
.p-title { display: block; font-weight: 700; color: var(--ink); text-decoration: none; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-title:hover { color: var(--brand); }
.tbl .sub { display: block; color: var(--muted2); font-size: 12.5px; margin-top: 2px; }
.tbl .muted { color: var(--muted2); }

/* Vistas */
.views { font-weight: 600; font-size: 13.5px; }
.views.cero { color: var(--muted2); }
.views.media { color: var(--warn); }
.views.alta { color: var(--ok); font-weight: 700; }

/* Badges de estado */
/* Indicador de cobro del CRM: chip chico al lado del badge de estado, para ver
   cómo viene el cobro sin abrir la propuesta. Mismos colores que el panel de
   urgencia y que los estados de cuota del micrositio. */
.cobro { display: inline-block; margin-left: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.cobro-ok { background: #f0fdf4; color: #166534; }
.cobro-parcial { background: #fffbeb; color: #92400e; }
.cobro-cero { background: #f3f4f6; color: #4b5563; }
.cobro-alerta { background: #fef2f2; color: #991b1b; }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.badge .d { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.b-new { background: #eff6ff; color: #1d4ed8; } .b-new .d { background: #3b82f6; }
.b-cot { background: #fffbeb; color: #92400e; } .b-cot .d { background: #f59e0b; }
.b-env { background: #ecfdf5; color: #065f46; } .b-env .d { background: #10b981; }
.b-vnd { background: #f0fdf4; color: #166534; } .b-vnd .d { background: #16a34a; }
.b-pen { background: #f5f5f4; color: #57534e; } .b-pen .d { background: #a8a29e; }
.b-prd { background: #fef2f2; color: #991b1b; } .b-prd .d { background: #ef4444; }
/* «No elegida»: gris neutro, con el punto un tono más marcado que el de
   Borrador para poder distinguirlas de un vistazo. NO usa el rojo de Perdida:
   el cliente sí compró, eligió otra alternativa. */
.b-noe { background: #f1f0ee; color: #4b5563; } .b-noe .d { background: #78716c; }

/* Pills de agencia */
.ag-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.ag-meraki { background: #e7f4f7; color: #1c5f6f; }
.ag-mlr { background: #e4f5ef; color: #0b5f52; }

/* Estado vacío */
.empty { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty-t { font-family: var(--serif); font-size: 20px; color: var(--ink); margin: 0 0 6px; }

/* Formularios (crear / editor) */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.field input, .field select, .field textarea {
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 9px;
  font-size: 14.5px; background: #fff; color: var(--ink); font-family: var(--sans); width: 100%;
}
.field textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Caja tipo modal (crear) */
.mbox { max-width: 720px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 26px; }
.mbox-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.nuevo-cliente { border: 1px dashed var(--line); border-radius: 12px; padding: 16px 16px 2px; margin-bottom: 14px; background: #fcfcfa; }
/* Selector de cliente del editor: buscador arriba del <select> (que sigue
   siendo el campo que viaja, así funciona igual sin JavaScript). */
.cli-campo .cli-buscar { margin-bottom: 8px; }
/* Reasignar el vendedor (solo la directora), en «Datos base» junto al cliente.
   Se enmarca a propósito: es una acción con consecuencias (cambia quién ve la
   cotización) y no un campo más del formulario. */
.reasig { border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 12px;
  padding: 14px 16px 12px; margin-bottom: 14px; background: #fcfcfa; }
.reasig .field { margin-bottom: 10px; }
.reasig-chk { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.45;
  color: var(--ink); margin: 0 0 10px; cursor: pointer; }
.reasig-chk input { margin-top: 3px; flex: 0 0 auto; }
.reasig-cat { margin-top: 12px; border-top: 1px solid var(--line2); padding-top: 10px; }
.reasig-cat-t { font-size: 13px; font-weight: 600; color: #92400e; margin: 0 0 6px; }
.reasig-cat-l { margin: 0 0 8px; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.reasig-hist-c { font-family: var(--mono); font-size: 11.5px; }
/* Modal de «Duplicar»: a quién va la copia. */
.dup-ops { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 4px; }
.dup-op { display: flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; }
.dup-sel { margin-left: 26px; max-width: 340px; }
/* Duplicar hacia la otra agencia: va ARRIBA de las opciones de cliente porque
   es la decisión que manda —cruzando de marca el cliente ni siquiera aplica—.
   ⚠️ El `[hidden]` con `!important` no es adorno: `.dup-ops` declara
   `display: flex` de autor, y cualquier `display` de autor le gana a la hoja
   del navegador. Es la misma trampa que ya mordió con `.field` y `.ad-chk`. */
.dup-ag { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.dup-ag-h { color: var(--muted); font-size: 12.5px; line-height: 1.45; margin: 2px 0 0; }
.dup-ops[hidden] { display: none !important; }

/* Avisos */
.notice { padding: 11px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; margin-bottom: 16px; }
.notice.ok { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.notice.error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* Editor: bloques */
.editor-grid { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; padding-bottom: 90px; }
.editor-main { display: flex; flex-direction: column; gap: 16px; }
.blk { display: flex; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 18px; }
.blk-ico { flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px; background: var(--brand-soft); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.blk-body { flex: 1; min-width: 0; }
.btype { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.seclab { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .25em; text-transform: uppercase; color: var(--brand); margin-bottom: 8px; }

/* Miniatura de portada */
.thumb { width: 100%; height: 160px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); margin-bottom: 12px; background: #f0efe9; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.vacio { display: flex; align-items: center; justify-content: center; color: var(--muted2); font-size: 13px; }

/* Panel lateral del editor */
.editor-side { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 14px; }
.side-card { padding: 16px; }
.side-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line2); font-size: 14px; }
.side-row:last-child { border-bottom: 0; }
/* Regenerar el enlace del cliente (panel del editor). */
.side-enlace-t { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.side-enlace-h { font-size: 12.5px; color: var(--muted); line-height: 1.45; margin: 0 0 10px; }
/* ---------- Cotizaciones enlazadas (grupo = oportunidad) ---------- */
/* Tarjeta del panel lateral del editor + tilde del modal de duplicar. */
.grp-lista { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.grp-item { display: flex; align-items: center; gap: 8px; justify-content: space-between; font-size: 12.5px; }
.grp-t { color: var(--ink); text-decoration: none; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grp-t:hover { text-decoration: underline; }
.grp-add { display: flex; gap: 6px; margin-top: 8px; }
.grp-add select { flex: 1; min-width: 0; }
.grp-asist { margin-top: 12px; border-top: 1px solid var(--line2); padding-top: 10px; }
.dup-alt { display: block; margin-top: 12px; font-size: 13px; line-height: 1.45; }
.dup-alt-h { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
/* Historial del cliente (drawer del CRM). */
.hist-cont { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.hist-chip { background: #f5f4f0; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: 12px; color: var(--muted); }
.hist-chip strong { color: var(--ink); }
.hist-ok { background: #f0fdf4; border-color: #bbf7d0; }
.hist-no { background: #fef2f2; border-color: #fecaca; }
.hist-monto { background: var(--brand-soft); border-color: var(--brand); }
.hist-op { border: 1px solid var(--line); border-radius: 10px; padding: 8px; margin-bottom: 8px; background: #fafaf8; }
.hist-op-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.hist-op-t { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.hist-op-e { font-size: 11.5px; font-weight: 700; }
.hist-op-ganada { border-left: 3px solid #16a34a; } .hist-op-ganada .hist-op-e { color: #166534; }
.hist-op-perdida { border-left: 3px solid #dc2626; } .hist-op-perdida .hist-op-e { color: #991b1b; }
.hist-op-abierta { border-left: 3px solid #ca8a04; } .hist-op-abierta .hist-op-e { color: #854d0e; }
/* Criterio al pie de las tablas de Conversión. */
.conv-nota { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0; padding: 10px 12px; border-top: 1px solid var(--line); }
/* ---------- Papelera ---------- */
.pap-ayuda { padding: 14px 16px; margin-bottom: 12px; }
.pap-ayuda p { margin: 0 0 6px; font-size: 14px; line-height: 1.5; }
.pap-form { display: inline; }
.pap-fecha { font-family: var(--mono); font-size: 12.5px; }
.pap-quedan { font-size: 12.5px; color: var(--muted); }
/* Cuando queda poco, se avisa: es el dato que decide si hay que apurarse. */
.pap-poco { color: #92400e; font-weight: 600; }
.pap-ya { color: #991b1b; font-weight: 600; }
.regen-hist { margin-top: 12px; border-top: 1px solid var(--line2); padding-top: 10px; }
.regen-hist-t { font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.regen-hist-r { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); padding: 2px 0; }
.regen-hist-f { font-family: var(--mono); }
.regen-hist-u { font-weight: 500; }
/* Bloque «Enlace del cliente» del drawer de cotización. */
.drw-enlace { font-size: 13px; word-break: break-all; margin-bottom: 8px; }
.drw-enlace-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.drw-enlace-h { font-size: 12.5px; color: var(--muted); line-height: 1.45; margin: 10px 0 0; }
.side-row .k { color: var(--muted); font-weight: 600; }
.mono { font-family: var(--mono); font-size: 12.5px; }

@media (max-width: 860px) {
  .editor-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .editor-side { position: static; }
}

/* ==================== Editor de bloques (parte 2) ==================== */
.lib-hint { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.blib-sec { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 14px 0 8px; }
.blk-lib { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.blib-item {
  display: flex; align-items: center; gap: 8px; text-align: left;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--ink); font-size: 13.5px; font-weight: 600; cursor: pointer;
  font-family: var(--sans); transition: border-color .12s, background .12s;
}
.blib-item:hover { border-color: var(--brand); background: var(--brand-soft); }
.blib-ico { font-size: 16px; }

.blks-area { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }

/* Recuadro de la Caja destacada en el EDITOR: el vendedor ve el marco con el
   color de la agencia mientras escribe (el rich-ed de adentro pierde su borde
   propio para no duplicar marcos). */
.caja-dest-ed { border: 2px solid var(--brand); border-radius: 12px; background: #fff; padding: 6px; }
.caja-dest-ed .rich-ed { border: 0; border-radius: 8px; }

/* ---------- Paleta flotante de bloques (editor de propuestas) ----------
   Siempre a mano mientras se scrollea: en escritorio arranca abierta como
   panel fijo al costado derecho (colapsable con ✕); en pantallas chicas queda
   plegada en el botón «+» de abajo a la derecha. z-index por debajo de los
   overlays (scrim 900 / modales 1000): cualquier modal la tapa. */
/* ⚠️⚠️ LA ZONA FLOTANTE DEL EDITOR (2026-09-11): «Guardar cambios» (.gv-flot) a
   la IZQUIERDA del «+» de la paleta (.pal-flot), los dos abajo a la derecha.
   La maqueta está medida para que no se pisen ni con la paleta abierta:
   · el «+» ocupa de 18 a 72px desde la derecha (right 18 + 54 de ancho);
     Guardar empieza en right: 84px → 12px de aire entre los dos;
   · la paleta abierta se despliega ARRIBA del «+» (columna con gap 10px), así
     que su borde inferior queda a 18 + 54 + 10 = 82px del piso; Guardar mide
     ~40px de alto y termina a 22 + 40 = 62px → no se tocan;
   · a 360px de ancho entran los dos (Guardar ~150px + 84 = 234 < 360).
   test/guardar-flotante.test.js lee estas medidas del CSS, no las escribe. */
.pal-flot { position: fixed; right: 18px; bottom: 18px; z-index: 850; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.gv-flot { position: fixed; right: 84px; bottom: 22px; z-index: 850; }
.gv-flot-btn { height: 40px; padding: 0 18px; border-radius: 999px; box-shadow: 0 8px 22px rgba(0, 0, 0, .22); white-space: nowrap; }
.gv-flot-btn[data-estado="ok"] { background: var(--ok); border-color: var(--ok); }
.gv-flot-btn:disabled { opacity: .7; cursor: progress; }
/* El `padding-bottom` de `.editor-grid` (arriba) deja aire para que la zona
   flotante no tape el último bloque. */
.pal-fab { width: 54px; height: 54px; border-radius: 50%; border: 0; background: var(--brand); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 8px 22px rgba(0, 0, 0, .25); }
.pal-fab:hover { filter: brightness(1.08); }
/* El «+» sigue a la vista con la paleta abierta: tocarlo de nuevo la cierra
   (2026-09-11). Girado, se lee como un ✕. */
.pal-flot.abierta .pal-fab { transform: rotate(45deg); }
.pal-panel { display: none; width: 250px; max-height: min(70vh, 580px); overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); }
.pal-flot.abierta .pal-panel { display: block; }
.pal-head { position: sticky; top: 0; z-index: 1; background: #fff; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pal-min { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 14px; padding: 2px 4px; }
.pal-min:hover { color: var(--ink); }
.pal-list { display: flex; flex-direction: column; gap: 2px; padding: 8px; }
.pal-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: 1px solid transparent; background: none; border-radius: 8px; padding: 8px 9px; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }
.pal-item:hover { border-color: var(--brand); background: var(--brand-soft); }
.pal-ico { font-size: 15px; flex: none; }
.blks-empty { text-align: center; padding: 24px; color: var(--muted2); border: 1px dashed var(--line); border-radius: var(--r); font-size: 14px; }

/* Acciones del bloque */
.blk-acts { display: flex; gap: 4px; align-self: flex-start; }
.bact { border: 0; background: transparent; color: var(--muted2); cursor: pointer; font-size: 14px; padding: 4px 6px; border-radius: 6px; line-height: 1; }
.bact:hover { background: #f0efe9; color: var(--ink); }
.bact.del:hover { background: #fef2f2; color: var(--bad); }

/* Sub-tarjetas (día, tramo, excursión) */
.scard { border: 1px dashed var(--line); border-radius: 10px; padding: 14px; background: #fafaf7; margin-bottom: 12px; }
.scard-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.scard-head strong { font-size: 14px; }
.del { border: 0; background: transparent; color: var(--bad); cursor: pointer; font-size: 13px; font-weight: 600; padding: 4px 6px; border-radius: 6px; }
.del:hover { background: #fef2f2; }

/* Grillas de campos */
.r2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.r3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.r4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
/* r5: el formulario de cuota, que desde 2026-08-21 lleva «Nombre (opcional)». */
.r5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.r2 .field, .r3 .field, .r4 .field, .r5 .field { margin-bottom: 12px; }
@media (max-width: 860px) { .r4, .r5 { grid-template-columns: 1fr 1fr; } }
.fld-lbl { font-size: 12.5px; font-weight: 600; color: var(--muted); margin: 6px 0 8px; }
/* Aclaración al lado de la etiqueta («la primera es la portada»). */
.fld-hint { font-style: normal; font-weight: 400; color: var(--muted2); }

/* Galería de URLs */
.galeria { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.thumb-row { display: flex; align-items: center; gap: 8px; }
.thumb-row input { flex: 1; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; font-size: 14px; font-family: var(--sans); }
.thumb-row input:focus { outline: none; border-color: var(--brand); }
.tp { width: 58px; height: 44px; flex-shrink: 0; border-radius: 7px; border: 1px solid var(--line); background: #f0efe9; overflow: hidden; }
.tp img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Paneles hotel/transporte del día */
.dia-extra { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.dia-extra > .btn { flex: 0 0 auto; }
.panel-hotel, .panel-transp { flex: 1; min-width: 260px; border-radius: 10px; padding: 12px; }
.panel-hotel { background: #fefce8; border: 1px solid #fde68a; }
.panel-transp { background: #f8f6ff; border: 1px solid #e0d9ff; }
.panel-head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 13.5px; margin-bottom: 10px; }
.panel-hotel .panel-head { color: #92400e; }
.panel-transp .panel-head { color: #6d4bb5; }
.dia-fotos { margin-bottom: 10px; }

/* Piezas del día: contenido reordenable (texto, fotos, excursión, hotel, transporte) */
.dia-piezas { margin-top: 10px; }
.pieza { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 10px; background: #fff; }
.pieza-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; margin-bottom: 10px; }
.pieza-acts { display: flex; align-items: center; gap: 2px; }
.pieza-acts .mini { min-width: 26px; padding: 4px 7px; border: 1px solid var(--line); background: #fff; border-radius: 7px; cursor: pointer; font-size: 12px; color: var(--ink); }
.pieza-acts .mini:hover:not(:disabled) { background: var(--brand-soft); border-color: var(--brand); }
.pieza-acts .mini:disabled { opacity: .35; cursor: default; }
.pieza-hotel { background: #fefce8; border-color: #fde68a; }
.pieza-hotel .pieza-head strong { color: #92400e; }
.pieza-transporte { background: #f8f6ff; border-color: #e0d9ff; }
.pieza-transporte .pieza-head strong { color: #6d4bb5; }
.pieza-excursion { background: #f4fbf7; border-color: #cfe9db; }
.pieza-excursion .pieza-head strong { color: #17694a; }
.pieza-vacio { font-size: 13px; color: var(--muted); padding: 12px; border: 1px dashed var(--line); border-radius: 10px; margin-bottom: 10px; }
.pieza-add { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px) { .pieza-add .btn { flex: 1 1 auto; } }
/* Bloque GRUPO (contenedor). Solo existe en el editor: el micrositio y el PDF
   no dibujan nada de esto — los bloques de adentro salen como si fueran
   sueltos. El recuadro punteado y la franja de marca a la izquierda son para
   que se vea de un vistazo qué bloques viajan juntos. */
/* Fechas de check-in / check-out en el editor: los dos campos uno al lado del
   otro. El date picker nativo necesita algo más de alto que un input de texto
   en algunos navegadores, de ahí el min-height. */
.inp-fecha { font-family: var(--sans); min-height: 38px; }
@media (max-width: 560px) { .hotel-fechas { grid-template-columns: 1fr; } }

/* ⚠️⚠️ EL GRUPO NO LE ROBA ANCHO A LOS BLOQUES QUE TIENE ADENTRO.
   `grupo-cont` y `grupo-pal` son HERMANOS de `.blk-body` (no hijos), así que
   con `flex-basis: 100%` ocupan la fila entera de la tarjeta en vez de vivir
   dentro del cuerpo, que ya venía recortado por la columna del ícono y la de
   acciones. Los márgenes negativos devuelven casi todo el relleno del grupo:
   un bloque anidado pierde solo la barrita de color, los bordes y 6px de aire
   de cada lado. La pertenencia se marca con la barra de la izquierda y el
   fondo, no con un recuadro que cueste ancho útil.
   ⚠️ Si se toca el relleno de `.blk` hay que tocar estos márgenes: la prueba
   de `test/grupo-ancho-y-titulo.test.js` mide los dos y falla si se separan. */
.blk-grupo { flex-wrap: wrap; background: #fafaf7; border-left: 3px solid var(--brand); }
/* ⚠️ El `+ 24px` del calc NO es adorno: `flex-basis: 100%` mide el contenido
   del grupo, así que con márgenes negativos a secas la caja se DESPLAZA 12px a
   la izquierda en vez de ensancharse — y termina 12px antes por la derecha. El
   calc tiene que valer exactamente lo que suman los dos márgenes negativos, y
   hay prueba de esa igualdad. */
.blk-grupo > .grupo-cont, .blk-grupo > .grupo-pal { flex: 0 0 calc(100% + 24px); margin-left: -12px; margin-right: -12px; }
.blk-grupo > .grupo-cont { margin-top: 14px; margin-bottom: 12px; }
.grupo-cont > .blk + .blk { margin-top: 10px; }
.blk-en-grupo { box-shadow: none; border-color: var(--line); }
.grupo-vacio { font-size: 13px; color: var(--muted); text-align: center; padding: 18px; border: 1px dashed var(--line); border-radius: 10px; background: var(--panel); }
.grupo-pal { display: flex; flex-wrap: wrap; gap: 8px; }
.grupo-add { font-size: 12.5px; }
@media (max-width: 640px) { .grupo-pal .btn { flex: 1 1 auto; } }

.lay-sel { padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; font-size: 13.5px; margin-bottom: 8px; background: #fff; font-family: var(--sans); }
.btn.mini { font-size: 12.5px; padding: 6px 10px; }

/* Barra de texto rico */
.rich-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 7px; background: #f8f8f5; border: 1px solid var(--line); border-bottom: 0; border-radius: 9px 9px 0 0; }
.rbtn { min-width: 30px; padding: 5px 9px; border: 1px solid var(--line); background: #fff; border-radius: 7px; cursor: pointer; font-size: 13px; color: var(--ink); }
.rbtn:hover { background: var(--brand-soft); border-color: var(--brand); }
.rsel { padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; font-size: 12.5px; background: #fff; cursor: pointer; font-family: var(--sans); }
.rcol { width: 30px; height: 30px; padding: 2px; border: 1px solid var(--line); border-radius: 7px; background: #fff; cursor: pointer; }
.rich-ed { min-height: 120px; padding: 13px; border: 1px solid var(--line); border-radius: 0 0 9px 9px; font-size: 15px; line-height: 1.7; background: #fff; outline: none; }
.rich-ed:focus { border-color: var(--brand); }
.rt-sep { width: 1px; height: 20px; background: var(--line); margin: 0 3px; display: inline-block; }
/* Mini paleta de colores rápidos */
.rt-palette { display: inline-flex; align-items: center; gap: 3px; }
.rt-sw { min-width: 20px; width: 20px; height: 22px; padding: 0; border-radius: 5px; border: 1px solid rgba(0,0,0,.15); }
.rt-sw:hover { transform: scale(1.12); }
.rt-editpal { min-width: 26px; }
.rtpal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; }
.rtpal-item { display: flex; flex-direction: column; gap: 4px; align-items: center; font-size: 12px; color: var(--muted); }
.rtpal-item input { width: 100%; height: 38px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.vend-paleta { margin: 4px 0 6px; }
.vend-pal-row { display: flex; gap: 6px; flex-wrap: wrap; }
.vend-pal-row input[type="color"] { width: 40px; height: 32px; border: 1px solid var(--line); border-radius: 7px; padding: 2px; cursor: pointer; }
/* Contenido rico (editor y micrositio): listas, párrafos y enlaces con formato */
.rich-ed ul, .rich ul { margin: 8px 0; padding-left: 22px; list-style: disc; }
.rich-ed ol, .rich ol { margin: 8px 0; padding-left: 22px; list-style: decimal; }
.rich-ed li, .rich li { margin: 3px 0; }
.rich p { margin: 0 0 10px; }
.rich p:last-child { margin-bottom: 0; }
.rich a { color: var(--brand-ink); text-decoration: underline; }

/* Preview de precio */
.precio-prev { margin-top: 10px; padding: 16px; border-radius: 12px; background: var(--brand-soft); text-align: center; }
.pp-label { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--brand-ink); }
.pp-big { font-family: var(--serif); font-size: 30px; font-weight: 700; color: var(--brand-ink); margin: 4px 0; }
.pp-note { font-size: 13px; color: var(--muted); }

/* ---------- Escribir con IA ---------- */
.btn-ia {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px; padding: 7px 12px;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--brand-ink); background: var(--brand-soft);
  border: 1px solid var(--brand); border-radius: 8px;
  cursor: pointer; transition: filter .12s ease;
}
.btn-ia:hover { filter: brightness(.97); }

.ia-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(20, 22, 26, .5);
}
.ia-overlay[hidden] { display: none; }
.ia-box {
  width: 100%; max-width: 560px; max-height: 90vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.ia-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.ia-titulo { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--ink); }
.ia-x {
  border: none; background: transparent; cursor: pointer;
  font-size: 16px; color: var(--muted); line-height: 1; padding: 4px;
}
.ia-x:hover { color: var(--ink); }
.ia-body { padding: 18px 20px; }
.ia-lbl {
  display: block; margin-bottom: 6px;
  font-size: 13px; font-weight: 500; color: var(--ink);
}
.ia-indic, .ia-resultado {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  font-family: var(--sans); font-size: 14px; color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; resize: vertical;
}
.ia-indic:focus, .ia-resultado:focus { outline: none; border-color: var(--brand); }
.ia-hint { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.ia-estado {
  padding: 20px; text-align: center; color: var(--brand-ink);
  font-size: 14px; font-family: var(--mono);
}
.ia-alerta {
  padding: 12px 14px; border-radius: 8px;
  background: #fef2f2; border: 1px solid #fecaca; color: var(--bad); font-size: 14px;
}
.ia-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 20px; border-top: 1px solid var(--line);
}
.ia-foot:empty { display: none; }

/* ===== Selector de imágenes (picker) ===== */
/* Botón "Buscar imagen" junto a cada campo de foto */
.pick-btn { flex: 0 0 auto; white-space: nowrap; }
.pick-row { display: flex; align-items: flex-end; gap: 8px; }
.pick-row > .field { flex: 1; margin-bottom: 0; }
.pick-row > .pick-btn { margin-bottom: 2px; }

/* Capa de overlays estándar (reservada para futuros módulos) */
.pk-scrim { position: fixed; inset: 0; z-index: 900; background: rgba(20, 22, 26, .5); }
.pk-scrim[hidden] { display: none; }
.pk-drawer[hidden], .pk-modal[hidden], .micro[hidden], .toast[hidden] { display: none; }

.picker {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.picker[hidden] { display: none; }
.pk-box {
  width: 100%; max-width: 760px; max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.pk-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 20px; border-bottom: 1px solid var(--line);
}
.pk-head strong { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--ink); }
.pk-x {
  border: none; background: transparent; cursor: pointer;
  font-size: 16px; color: var(--muted); line-height: 1; padding: 4px;
}
.pk-x:hover { color: var(--ink); }

.pk-tabs { display: flex; gap: 4px; padding: 10px 16px 0; border-bottom: 1px solid var(--line); }
.pk-tab {
  border: none; background: transparent; cursor: pointer;
  padding: 9px 14px; font-family: var(--sans); font-size: 13.5px; font-weight: 500;
  color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pk-tab:hover { color: var(--ink); }
.pk-tab.on { color: var(--brand-ink); border-bottom-color: var(--brand); }

.pk-body { padding: 18px 20px; overflow: auto; }
.pk-pane[hidden] { display: none; }

.pk-search { display: flex; gap: 8px; margin-bottom: 14px; }
.pk-kw, .pk-url {
  flex: 1; box-sizing: border-box; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 9px;
  font-family: var(--sans); font-size: 14px; color: var(--ink);
}
.pk-kw:focus, .pk-url:focus { outline: none; border-color: var(--brand); }

.pk-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; min-height: 120px;
}
.pk-hint { grid-column: 1 / -1; padding: 24px 8px; text-align: center; color: var(--muted); font-size: 13.5px; }
.pk-item {
  position: relative; padding: 0; border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; cursor: pointer; background: #f0efe9;
  aspect-ratio: 4 / 3;
}
.pk-item:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.pk-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-src {
  position: absolute; left: 6px; bottom: 6px;
  padding: 2px 7px; border-radius: 20px; font-size: 10.5px; font-weight: 500;
  background: rgba(20, 22, 26, .62); color: #fff;
}

/* Mientras se baja al VPS la foto elegida: la grilla se apaga y no se puede
   volver a hacer clic (si no, dos clics = dos descargas del mismo archivo). */
.pk-grid.pk-cargando { opacity: .45; pointer-events: none; }

.pk-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 38px 20px; text-align: center; cursor: pointer;
  border: 2px dashed var(--line); border-radius: 12px; background: var(--bg);
}
.pk-drop:hover { border-color: var(--brand); }
.pk-drop-ico { font-size: 30px; }
.pk-drop-t { font-size: 14.5px; font-weight: 500; color: var(--ink); }
.pk-drop-s { font-size: 12.5px; color: var(--muted); }
.pk-upstate { margin-top: 12px; text-align: center; font-size: 13.5px; color: var(--brand-ink); font-family: var(--mono); }
.pk-upstate[hidden] { display: none; }

.pk-urlprev { margin: 12px 0; border-radius: 10px; overflow: hidden; }
.pk-urlprev:empty { display: none; }
.pk-urlprev img { width: 100%; max-height: 280px; object-fit: cover; display: block; border: 1px solid var(--line); border-radius: 10px; }
.pk-urlacts { display: flex; justify-content: flex-end; }

/* ===== Overlays genéricos: modal centrado + drawer lateral ===== */
body.ov-open { overflow: hidden; }
.pk-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.pk-modal[hidden] { display: none; }
.ov-box {
  width: 100%; max-width: 620px; max-height: 88vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 22px 24px;
}
.ov-box .ov-title { margin: 0 0 4px; font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--ink); }
.ov-box .ov-sub { margin: 0 0 16px; color: var(--muted); font-size: 13.5px; }
.ov-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ov-x { border: none; background: transparent; cursor: pointer; font-size: 18px; color: var(--muted); line-height: 1; padding: 2px 4px; }
.ov-x:hover { color: var(--ink); }
.ov-acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

.pk-drawer {
  position: fixed; inset: 0 0 0 auto; z-index: 1000;
  display: flex; justify-content: flex-end;
}
.pk-drawer[hidden] { display: none; }
.ov-drawer-box {
  width: 100%; max-width: 460px; height: 100%; overflow: auto;
  background: var(--panel); border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lg); padding: 24px 26px;
  animation: ovSlide .22s ease;
}
@keyframes ovSlide { from { transform: translateX(30px); opacity: .4; } to { transform: none; opacity: 1; } }
.ov-drawer-box .ov-title { margin: 0 0 2px; font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--ink); }
.ov-drawer-box .ov-sub { margin: 0 0 18px; color: var(--muted); font-size: 13px; font-family: var(--mono); }
.drw-sec { margin-top: 18px; }
.drw-sec-t { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-ink); margin-bottom: 8px; }

/* ===== Herramientas de la biblioteca de bloques + importador ===== */
.lib-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.import-btn, .bib-btn { font-weight: 600; }
.imp-or { text-align: center; color: var(--muted); font-family: var(--mono); font-size: 12px; margin: 12px 0; }
.imp-drop { padding: 22px 16px; }
.imp-state { margin-top: 12px; padding: 10px 12px; border-radius: 9px; font-size: 13.5px; background: var(--bg); color: var(--brand-ink); border: 1px solid var(--line); }
.imp-state[hidden] { display: none; }
.imp-state.err { background: #fef2f2; color: #991b1b; border-color: #fecaca; }

/* Biblioteca de bloques */
.bib-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow: auto; }
.bib-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.bib-item-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bib-name { font-size: 14.5px; color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bib-tag { flex: 0 0 auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--brand); padding: 3px 8px; border-radius: 20px; }
.bib-item-acts { display: flex; gap: 6px; flex: 0 0 auto; }
.dia-acts { display: inline-flex; align-items: center; gap: 8px; }
.dup-form { display: inline; margin: 0; }

/* ===== CRM (Módulo 3) ===== */
.crm-agencia-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.crm-agencia-bar label { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--brand-ink); letter-spacing: .03em; }
.crm-agencia-bar select { padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; font-family: var(--sans); font-size: 14px; color: var(--ink); background: #fff; cursor: pointer; min-width: 200px; }
/* Seguimiento comercial: urgencia + historial */
.urg { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.urg-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.urg-red { background: #fef2f2; color: #991b1b; } .urg-red .urg-dot { background: #dc2626; }
.urg-orange { background: #fff7ed; color: #9a3412; } .urg-orange .urg-dot { background: #ea580c; }
.urg-yellow { background: #fefce8; color: #854d0e; } .urg-yellow .urg-dot { background: #ca8a04; }
.urg-green { background: #f0fdf4; color: #166534; } .urg-green .urg-dot { background: #16a34a; }
.urg-gray, .urg-gray-rev { background: #f3f4f6; color: #4b5563; } .urg-gray .urg-dot { background: #9ca3af; } .urg-gray-rev .urg-dot { background: #6b7280; }
.urg-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.urgrow.urg-row-red > td:first-child { box-shadow: inset 3px 0 0 #dc2626; }
.urgrow.urg-row-orange > td:first-child { box-shadow: inset 3px 0 0 #ea580c; }
.urgrow.urg-row-yellow > td:first-child { box-shadow: inset 3px 0 0 #ca8a04; }
.seg-list { display: flex; flex-direction: column; gap: 8px; }
.seg-item { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.seg-meta { font-size: 12px; color: var(--muted); font-family: var(--mono); display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.seg-prox { color: var(--brand-ink); font-weight: 600; }
.seg-nota { font-size: 14px; color: var(--ink); line-height: 1.5; }

/* Seguimiento comercial: contacto realizado, historial y reagendar */
.seg-cab { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.seg-tipo { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.seg-tipo-cto { background: var(--brand-soft); color: var(--brand-ink); }
.seg-tipo-rea { background: #f3f4f6; color: #4b5563; }
.seg-item.seg-contacto { border-left: 3px solid var(--brand); }
.cto-chip { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.cto-res-green { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.cto-res-gray { background: #f3f4f6; color: #4b5563; border-color: #e5e7eb; }
.cto-ultimo { font-size: 13.5px; color: var(--ink); margin-bottom: 10px; }
.cto-ultimo-t { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.cto-ultimo-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.cto-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.cto-acts-fila { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.cto-hace { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.cto-form { display: flex; flex-direction: column; gap: 14px; }
.cto-grupo { display: flex; flex-direction: column; gap: 8px; }
.cto-lbl { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-ink); }
.cto-opt { text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 400; }
.cto-ops { display: flex; gap: 8px; flex-wrap: wrap; }
.cto-op { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 7px 14px; font-size: 13.5px; cursor: pointer; font-family: inherit; }
.cto-op:hover { border-color: var(--brand); }
.cto-op[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.cto-op-green[aria-pressed="true"] { background: #16a34a; border-color: #16a34a; }
.cto-op-gray[aria-pressed="true"] { background: #6b7280; border-color: #6b7280; }
.cto-fecha { border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-family: inherit; font-size: 14px; background: #fff; color: var(--ink); }

/* Pipeline Kanban */
.pl-board { display: grid; grid-template-columns: repeat(5, minmax(180px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.pl-col { background: #f3f2ee; border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; min-height: 120px; }
.pl-col-head { padding: 10px 12px; border-radius: 12px 12px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-bottom: 2px solid var(--line); }
.pl-col-t { font-weight: 700; font-size: 13.5px; color: var(--ink); flex: 1; }
.pl-col-n { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 700; }
.pl-col-sum { width: 100%; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.pl-head-consulta_nueva { border-bottom-color: #94a3b8; }
.pl-head-enviada { border-bottom-color: #2d8ba1; }
.pl-head-negociacion { border-bottom-color: #ca8a04; }
.pl-head-ganada { border-bottom-color: #16a34a; }
/* «No elegida» va en gris neutro a propósito: no es un fracaso (el cliente
   compró otra alternativa del mismo grupo), así que no lleva el rojo de
   Perdida ni el verde de Ganada. */
.pl-head-no_elegida { border-bottom-color: #a8a29e; }
.pl-head-perdida { border-bottom-color: #dc2626; }
.pl-col-body { padding: 10px; display: flex; flex-direction: column; gap: 9px; flex: 1; min-height: 60px; }
.pl-col-body.pl-over { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand); border-radius: 0 0 12px 12px; }
/* La tarjeta hace las dos cosas: un clic la abre, arrastrarla cambia el estado.
   El cursor dice «clic» porque abrir es lo que más se hace y el `grab` de antes
   escondía que fuera cliqueable; el `grabbing` del :active sigue dando la señal
   de arrastre apenas se la aprieta. */
.pl-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; box-shadow: var(--shadow); cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.pl-card:hover { border-color: var(--brand); }
.pl-card.pl-dragging { opacity: .5; }
.pl-card:active { cursor: grabbing; }
.pl-card-cli { font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 2px; padding-right: 16px; }
/* El título del viaje, debajo del cliente y en UNA línea (Julieta, 2026-08-28).
   Se recorta con … por CSS y no cortando el texto: el `title` lleva el
   completo y se lee al pasar el ratón. */
.pl-card-viaje { font-size: 12.5px; color: var(--muted); margin-bottom: 6px;
  padding-right: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-card-meta { margin-bottom: 8px; font-size: 12.5px; }
.pl-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.pl-monto { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--brand-ink); }
.pl-presu { font-weight: 500; color: var(--muted); }
/* El ↗ sigue siendo un <a> real: es el modo de abrir en una pestaña nueva
   (ctrl/cmd o botón del medio). Antes era gris tenue y pasaba desapercibido;
   ahora se dibuja como botón al pasar por la tarjeta. */
.pl-card-open { position: absolute; top: 6px; right: 6px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; color: var(--muted); text-decoration: none; font-size: 13px; line-height: 1; }
.pl-card:hover .pl-card-open { background: var(--bg); color: var(--brand-ink); }
.pl-card-open:hover { background: var(--brand); color: #fff; }

.crm-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.crm-tab { padding: 9px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 14px; font-weight: 500; text-decoration: none; }
.crm-tab:hover { color: var(--ink); border-color: var(--brand); }
.crm-tab.on { background: var(--brand); border-color: var(--brand); color: #fff; }
/* Contador de vencidas en la pestaña «Para contactar». Vacío = sin vencidas:
   `:empty` lo esconde, así no queda un 0 en rojo pidiendo atención. */
.crm-tab-n { display: inline-block; margin-left: 7px; min-width: 19px; padding: 1px 6px; border-radius: 999px;
  background: #dc2626; color: #fff; font-size: 12px; font-weight: 700; text-align: center; line-height: 1.4; }
.crm-tab-n:empty { display: none; }
.crm-tab.on .crm-tab-n { background: #fff; color: #dc2626; }
.tbl-click tbody tr { cursor: pointer; }
.chip-n { display: inline-block; min-width: 22px; padding: 2px 8px; border-radius: 20px; background: var(--bg); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--ink); }
.chip-n.ok { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.field.mini { margin-bottom: 0; }
.field.mini input { padding: 8px 10px; }
.conv-filtros { align-items: flex-end; }
.conv-block { margin-bottom: 22px; }
.conv-pct { font-family: var(--mono); font-weight: 600; color: var(--brand-ink); }
/* Buscador de sitio web del hotel */
.hotel-web-row { display: flex; align-items: flex-end; gap: 8px; }
.hotel-web-row > .field { flex: 1; margin-bottom: 0; }
.hot-btn { flex: 0 0 auto; white-space: nowrap; margin-bottom: 2px; }
.hot-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; max-height: 56vh; overflow: auto; }
.hot-item { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); cursor: pointer; }
.hot-item:hover { border-color: var(--brand); }
.hot-item.sinweb { opacity: .8; }
.hot-n { font-weight: 600; color: var(--ink); font-size: 14.5px; }
.hot-c { font-size: 12.5px; color: var(--muted); }
.hot-web { font-size: 12.5px; color: var(--brand-ink); font-family: var(--mono); word-break: break-all; }
.hot-noweb { font-size: 12px; color: var(--muted2); font-style: italic; }

/* Formulario de pasajeros (micrositio) */
.mpas .pas-area { display: flex; flex-direction: column; gap: 14px; margin-bottom: 12px; }
.pas-card { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; background: #fff; }
.pas-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pas-del { border: none; background: transparent; color: #b91c1c; cursor: pointer; font-size: 13px; }
.pas-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.pas-field > span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.pas-field input, .pas-field textarea { padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; font-family: var(--sans); font-size: 14.5px; color: var(--ink); background: #fff; }
.pas-r2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pas-doc { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.pas-file { cursor: pointer; }
.pas-file-btn { display: inline-block; padding: 8px 14px; border: 1px dashed var(--line); border-radius: 9px; font-size: 13.5px; color: var(--brand-ink); background: var(--bg); }
.pas-adj { font-size: 12.5px; color: var(--muted); }
.pas-adj.ok { color: #166534; font-weight: 600; }
.btn-pas-add { border: 1px solid var(--line); background: var(--bg); border-radius: 9px; padding: 9px 14px; font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--brand-ink); cursor: pointer; }
.mpas-consent { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); cursor: pointer; }
.mpas-consent input { margin-top: 3px; flex: 0 0 auto; width: 18px; height: 18px; }
.mpas-consent-txt { font-size: 13px; color: var(--muted); line-height: 1.6; }
.mpas-actions { margin-top: 8px; }
.mpas-send { border: 0; border-radius: 11px; padding: 13px 22px; font-family: var(--sans); font-weight: 700; font-size: 15px; color: #fff; background: var(--brand); cursor: pointer; }
.mpas-send:hover { filter: brightness(1.06); }
.pas-ok { padding: 16px 18px; border-radius: 12px; background: #f0fdf4; color: #166534; font-size: 15px; font-weight: 500; border: 1px solid #bbf7d0; }
@media (max-width: 560px) { .pas-r2 { grid-template-columns: 1fr; } }

/* Ficha de pasajeros (editor, solo lectura) */
.pas-ficha { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; background: var(--bg); }
.pas-ficha-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.pas-ficha-g { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ink); }
.pas-ficha-g b, .pas-ficha-obs b { color: var(--muted); font-weight: 600; }
.pas-ficha-obs { font-size: 13px; margin-top: 6px; }
.pas-ficha-consent { margin-top: 6px; }
.pas-consent-ok { font-size: 12px; color: #166534; font-family: var(--mono); }

.pedido-box { border-left: 3px solid var(--brand); background: var(--brand-soft); }
.pedido-txt { font-size: 15px; line-height: 1.7; color: var(--ink); white-space: normal; }
.vend-mini { display: inline-flex; align-items: center; gap: 8px; }
.mini-av { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; display: inline-grid; place-items: center; color: #fff; font-weight: 700; font-size: 12px; overflow: hidden; }
.mini-av img { width: 100%; height: 100%; object-fit: cover; }

/* ===== Catálogos (Módulo 4) — panel ===== */
.cat-props { margin-top: 8px; }
.cat-check-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; max-height: 340px; overflow: auto; padding: 2px; }
.cat-check { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--bg); }
.cat-check:hover { border-color: var(--brand); }
.cat-check input { margin-top: 3px; }
.cat-check-b { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cat-check-t { font-weight: 600; color: var(--ink); font-size: 14.5px; }
.cat-check-m { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ===== Catálogos — página pública ===== */
body.catalogo-pub { background: var(--bg); }
.cat-hero { position: relative; min-height: 46vh; display: flex; align-items: flex-end; background-size: cover; background-position: center; background-color: var(--brand); padding: 0; }
.cat-hero-ov { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,22,26,.25), rgba(20,22,26,.75)); }
.cat-hero-c { position: relative; z-index: 1; padding: 40px 26px; max-width: 900px; margin: 0 auto; width: 100%; color: #fff; }
.cat-hero-c .eyebrow { color: rgba(255,255,255,.85); font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
.cat-hero-c h1 { font-family: var(--serif); font-weight: 600; font-size: 40px; line-height: 1.08; margin: 0 0 10px; }
.cat-hero-sub { font-size: 17px; font-weight: 300; opacity: .95; margin: 0 0 12px; max-width: 640px; }
.cat-hero-n { display: inline-block; font-family: var(--mono); font-size: 12.5px; padding: 5px 12px; border-radius: 20px; background: rgba(255,255,255,.16); backdrop-filter: blur(4px); }
.cat-grid { max-width: 980px; margin: -40px auto 0; padding: 0 20px 60px; position: relative; z-index: 2; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.cat-card { display: flex; flex-direction: column; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); text-decoration: none; color: var(--ink); border: 1px solid var(--line); transition: transform .18s, box-shadow .18s; }
.cat-card:hover { transform: translateY(-4px); }
.cat-card-img { height: 180px; background-size: cover; background-position: center; background-color: #e7e5df; }
.cat-card-img.nofoto { background: linear-gradient(135deg, var(--brand), var(--brand2)); }
.cat-card-b { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.cat-card-dest { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-ink); }
.cat-card-t { font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.15; }
.cat-card-sub { font-size: 13.5px; color: var(--muted); }
.cat-card-cta { margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--brand-ink); }
.cat-empty { text-align: center; color: var(--muted); padding: 40px; grid-column: 1 / -1; }

/* ===== Portal del pasajero (Módulo 5) ===== */
/* Editor */
.doc-up { margin-bottom: 12px; }
.doc-drop { padding: 20px 16px; }
.docs-editor { display: flex; flex-direction: column; gap: 8px; }
.doc-row { display: flex; align-items: center; gap: 12px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.doc-row .doc-b { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.doc-ico { font-size: 22px; flex: 0 0 auto; }
.doc-n { font-weight: 600; color: var(--ink); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-m { font-size: 12px; color: var(--muted); font-family: var(--mono); }
/* Micrositio */
.docs-list { display: flex; flex-direction: column; gap: 10px; }
.doc-item { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; }
.doc-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.doc-item .doc-ico { font-size: 26px; }
.doc-item .doc-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.doc-item .doc-n { font-family: var(--serif); font-size: 16px; font-weight: 600; }
.doc-dl { flex: 0 0 auto; font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--brand-ink); padding: 7px 12px; border-radius: 20px; background: var(--bg); border: 1px solid var(--line); }

/* ===== Vendedores (Módulo 6) ===== */
.vend-cell { display: flex; align-items: center; gap: 11px; }
.vend-av { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 15px; overflow: hidden; flex: 0 0 auto; }
.vend-av img { width: 100%; height: 100%; object-fit: cover; }
.row-off { opacity: .55; }
.vend-color { margin: 4px 0 6px; }
.vend-sws { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.vend-sw { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.vend-sw.on { border-color: var(--ink); box-shadow: 0 0 0 2px #fff inset; }
.vend-foto { margin-top: 6px; }

/* ===== Recorte del avatar ===== */
/* z-index por encima del selector (1000): se abre arriba de él. */
.recorte {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.recorte[hidden] { display: none; }
.rc-box {
  width: 100%; max-width: 400px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 18px;
}
.rc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.rc-ayuda { font-size: 12.5px; color: var(--muted); margin: 0 0 12px; line-height: 1.45; }
/* El marco: cuadrado por aspect-ratio y con la imagen recortada adentro. */
.rc-stage {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  overflow: hidden; border-radius: var(--radius);
  background: #12141a; cursor: grab; touch-action: none; user-select: none;
}
.rc-stage:active { cursor: grabbing; }
.rc-imgwrap { position: absolute; inset: 0; }
.rc-img { position: absolute; top: 0; left: 0; transform-origin: 0 0; max-width: none; display: block; -webkit-user-drag: none; }
/* Máscara: oscurece fuera del círculo para mostrar cómo va a quedar el avatar.
   pointer-events:none para no robarle el arrastre al marco. */
.rc-mask {
  position: absolute; inset: 0; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(18, 20, 26, .55) inset;
  border-radius: 50%;
}
.rc-zoom { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; }
.rc-zlbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rc-zoom input[type="range"] { flex: 1; accent-color: var(--brand); }
.rc-estado { font-size: 13px; color: var(--muted); margin: 6px 0; }
.rc-estado[hidden] { display: none; }
.rc-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }


/* Contacto por agencia: un teléfono y un email por cada marca. */
.vend-contacto { margin: 4px 0 10px; }
.vend-ag-ayuda { font-size: 12.5px; color: var(--muted); margin: -2px 0 10px; line-height: 1.45; }
.vend-ag-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; background: var(--line2); }
.vend-ag-nom { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin-bottom: 8px; }
/* Celda "Contacto" del listado: una línea por agencia con datos cargados. */
.vend-ct { display: block; font-size: 13px; line-height: 1.5; }
.vend-ct + .vend-ct { margin-top: 4px; }
.vend-ct-ag { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: block; }

/* ===== Datos de agencias (Módulo 7) ===== */
.ag-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }
.ag-card { padding: 22px 24px; }
.ag-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ag-card-head h2 { margin: 0; font-size: 21px; font-weight: 600; flex: 1; }
.ag-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.ag-logo { margin: 4px 0 8px; }
.ag-logo-thumb { max-width: 220px; }
.ag-logo-thumb img { max-height: 90px; object-fit: contain; background: #fff; }
.ccard-logo { max-height: 64px; max-width: 70%; object-fit: contain; margin-bottom: 4px; }

/* Drawer de cliente */
.drw-prop { display: block; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; text-decoration: none; background: var(--bg); }
.drw-prop:hover { border-color: var(--brand); }
.drw-prop-t { display: block; font-weight: 600; color: var(--ink); font-size: 14.5px; margin-bottom: 4px; }
.drw-prop-m { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; font-family: var(--mono); }
.crm-state { margin-top: 6px; }

/* ---------- Buscar o crear el cliente de una consulta (2026-08-29) ---------- */
/* El <input> es el de siempre; lo que se agrega es la lista de sugerencias y el
   cartelito que dice en qué estado quedó el vínculo. Sin JavaScript no se dibuja
   ninguna sugerencia y el campo se ve exactamente igual que antes. */
.cli-pick { position: relative; }
.cli-sug-caja, .cli-pick-sug {
  position: absolute; z-index: 30; left: 0; right: 0; top: 100%;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .09); overflow: hidden; margin-top: 2px;
}
.cli-sug {
  display: block; width: 100%; text-align: left; padding: 9px 12px;
  border: 0; border-bottom: 1px solid var(--line2); background: none;
  cursor: pointer; font: inherit; color: var(--ink);
}
.cli-sug:last-child { border-bottom: 0; }
.cli-sug:hover { background: var(--line2); }
.cli-sug-n { display: block; font-weight: 600; font-size: 14px; }
.cli-sug-m { display: block; font-size: 12px; color: var(--muted); font-family: var(--mono); margin-top: 2px; }
/* Un nombre visto en consultas anteriores que NO tiene ficha: no se puede
   elegir (no hay a qué vincular), así que no es un botón ni se comporta como
   uno. Solo avisa del antecedente. */
.cli-sug-visto { cursor: default; background: #fdfcf7; }
.cli-sug-visto:hover { background: #fdfcf7; }
.cli-sug-nuevo { font-weight: 600; color: var(--brand); }
.cli-pick-chip {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  margin: 6px 0 12px; padding: 7px 11px; border-radius: 8px; font-size: 12.5px;
}
.cli-pick-chip-t { flex: 1; }
.cli-pick-ok { background: #f0f8f2; color: #166534; border: 1px solid #cde9d6; }
.cli-pick-no { background: #f7f6f2; color: var(--muted); border: 1px solid var(--line); }
.cli-pick-ojo { background: #fdf6e7; color: #854d0e; border: 1px solid #efdfb8; }
.cli-dueno { margin: 0; padding: 9px 0 0; font-size: 14px; color: var(--ink); }

/* Las consultas anteriores del cliente, en su ficha y en el drawer. */
.drw-cons { display: block; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 7px; background: var(--bg); }
.drw-cons-t { display: block; font-size: 14px; color: var(--ink); margin-bottom: 3px; }
.drw-cons-act { border-color: var(--brand); }
.drw-hist-cli { margin-top: 10px; border-top: 1px solid var(--line2); padding-top: 10px; }

/* ---------- Cambiar la agencia de una consulta (2026-08-29) ---------- */
/* ⚠️ Estilo propio y no `.aviso-info`: aquélla vive en interno.css bajo
   .ad/.xp/.dir, y el drawer del CRM no cuelga de ninguno de los tres. */
.cons-ag-actual { margin: 0 0 10px; font-size: 14px; color: var(--ink); }
.cons-ag-freno {
  margin: 0 0 10px; padding: 9px 12px; border-radius: 8px; font-size: 13px;
  background: #f7f6f2; color: var(--muted); border: 1px solid var(--line);
}
/* El aviso de la cotización en papelera: informativo, no de alarma — una
   cotización eliminada es un estado legítimo; lo que no puede es ser invisible
   hasta que alguien la restaure. */
.cons-ag-papelera {
  margin: 0 0 10px; padding: 9px 12px; border-radius: 8px;
  background: #fffbeb; border: 1px solid #fde68a;
}

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 1100; padding: 11px 18px; border-radius: 10px;
  background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 500;
  box-shadow: var(--shadow-lg); opacity: 0; transition: opacity .2s;
}
.toast.on { opacity: 1; }

/* ============================================================
   Acciones del listado de propuestas (panel interno)
   ============================================================ */
.row-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.row-acts .del-form { display: inline; margin: 0; }
.btn.sm.wa { background: #25d366; border-color: #25d366; color: #fff; }
.btn.sm.wa:hover { filter: brightness(1.05); background: #25d366; }
.btn.sm.danger { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.btn.sm.danger:hover { background: #fee2e2; }

/* ============================================================
   Micrositio público del cliente
   ============================================================ */
/* ⚠️ El fondo va en el MISMO tono que el resto del sitio (--bg, beige) y se
   declara igual en el body y en .mwrap. Antes el body era blanco y `html` se
   quedaba con el beige de la regla general: como los dos tienen fondo propio y
   `height: 100%`, el del body pintaba SOLO el primer viewport y de ahí para
   abajo asomaba el beige del html — el corte horizontal que se veía a mitad de
   página. En impresión los dos vuelven a blanco (ver @media print). */
body.micrositio { background: var(--bg); }
/* Las superficies que antes se apoyaban en el blanco del micrositio y estaban
   pintadas del propio beige (o casi) pasan a BLANCO: sobre el fondo nuevo se
   confundirían con él y dejarían de leerse como tarjetas. Va acotado a
   body.micrositio para no tocar el panel, donde el fondo sigue siendo beige y
   estas mismas clases contrastan bien. */
body.micrositio .mc-card,
body.micrositio .doc-row,
body.micrositio .doc-dl,
body.micrositio .mapa-pie,
body.micrositio .mpas-consent,
body.micrositio .pas-ficha,
body.micrositio .pas-file-btn,
body.micrositio .btn-pas-add { background: #fff; }

/* --- Portada animada --- */
.mcover {
  position: fixed; inset: 0; z-index: 100; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 20px 9vh; transition: opacity .5s, visibility .5s;
}
.mcover.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.cbg {
  position: absolute; inset: -6%; background-size: cover; background-position: center;
  animation: kb 24s ease-in-out infinite alternate;
}
.cbg.nofoto { background: linear-gradient(135deg, var(--brand), var(--brand2)); }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .cbg { animation: none; } }
.cgrad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15) 20%, rgba(0,0,0,.72) 100%); }
.ccard {
  position: relative; z-index: 2; width: min(680px, 100%); color: #fff; text-align: center;
  animation: rise .7s cubic-bezier(.2,.8,.2,1) both .1s;
}
@keyframes rise { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }
.ccard-ag { font-family: var(--mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; opacity: .92; }
.ceyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .82; margin-bottom: 10px; }
.ccard-t { font-family: var(--serif); font-size: clamp(28px, 7vw, 46px); font-weight: 600; line-height: 1.1; margin: 0 0 16px; }
.cmeta { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 26px; }
/* Pie de la portada: logo a la izquierda, "Entrar" a la derecha, agrupados hacia
   el centro (no pegados a los bordes) y centrados entre sí. */
.ccard-foot { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 26px; }
/* El logo va en una tarjetita de vidrio esmerilado, igual que los chips de la
   portada (.hmchip): así el fondo propio del archivo no se ve como un recorte. */
.ccard-foot .ccard-ag {
  flex: 0 1 auto; min-width: 0; text-align: left;
  background: rgba(255,255,255,.2); backdrop-filter: blur(4px);
  padding: 10px 16px; border-radius: var(--radius);
}
.ccard-foot .ccard-logo { display: block; margin-bottom: 0; max-width: 100%; }
.enter-btn {
  flex: 0 0 auto;
  background: var(--brand); color: #fff; border: 0; border-radius: 12px;
  padding: 14px 32px; font-family: var(--sans); font-weight: 700; font-size: 16px;
  cursor: pointer; box-shadow: 0 12px 32px -8px rgba(0,0,0,.55);
}
.enter-btn:hover { filter: brightness(1.08); }
/* Celular: el logo y su tarjetita se achican para que la fila entre sin apretar
   el botón. */
@media (max-width: 520px) {
  .ccard-foot { gap: 16px; }
  .ccard-foot .ccard-logo { max-height: 40px; }
  .ccard-foot .ccard-ag { font-size: 11px; letter-spacing: .12em; padding: 8px 12px; }
  .enter-btn { padding: 13px 22px; font-size: 15px; }
}
.hmchip {
  background: rgba(255,255,255,.2); backdrop-filter: blur(4px);
  padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #fff;
}

/* --- Contenido --- */
/* El contenedor se ensanchó de 820 a 1080: a 820 quedaba todo muy concentrado
   en el medio de una pantalla grande. Las fotos, el mapa y la línea de tiempo
   aprovechan el ancho nuevo; la PROSA se acota aparte (ver .lead/.tl-txt), o a
   1080px los renglones quedarían demasiado largos para leer. */
.mwrap { max-width: 1080px; margin: 0 auto; background: var(--bg); padding-bottom: 96px; }
.mwrap[hidden] { display: none; }

.mhero { position: relative; min-height: clamp(220px, 42vh, 360px); background-size: cover; background-position: center; display: flex; align-items: flex-end; }
.mhero-ov { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.08) 40%, rgba(0,0,0,.7) 100%); }
.mhero-c { position: relative; z-index: 2; padding: 26px 22px; color: #fff; }
.mhero .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .9; margin-bottom: 8px; }
.mhero h1 { font-family: var(--serif); font-size: clamp(24px, 5.5vw, 38px); font-weight: 600; line-height: 1.1; margin: 0 0 8px; }
.mhero-sub { font-size: 15px; opacity: .92; margin: 0 0 12px; max-width: 620px; }
.mhero-meta { display: flex; flex-wrap: wrap; gap: 8px; }

.msec { padding: 26px 22px; }
/* Más aire a los costados cuando hay lugar (el ancho nuevo lo permite). */
@media (min-width: 900px) {
  .msec { padding: 32px 44px; }
  .mhero-c { padding: 32px 44px; }
}
.msec + .msec { border-top: 1px solid var(--line2); }
/* 15px, el mismo cuerpo que la etiqueta del día (.tl-day): a 10px estos
   rótulos («Itinerario», «Servicios», «Tu asesor de viaje»…) casi no se leían.
   Se afloja el letter-spacing por el mismo motivo que allá. */
.mseclab { font-family: var(--mono); font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.mseclab::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* Título de sección de un GRUPO. Sale solo con la casilla «Mostrar título al
   cliente» marcada. Va en la serif del sitio, como el título del día del
   itinerario, con una regla corta del color de la agencia encima — nada de
   colores escritos a mano, o MLR saldría con el turquesa de Meraki.
   ⚠️ Es un encabezado de lo que viene DEBAJO: por eso no lleva la línea de
   separación entre él y la sección siguiente, que lo dejaría encajonado. */
.mgrupo { padding-bottom: 0; }
.mgrupo-h { font-family: var(--serif); font-size: clamp(21px, 3.4vw, 27px); font-weight: 600; line-height: 1.2; margin: 0; color: var(--ink); }
.mgrupo-h::before { content: ""; display: block; width: 46px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--brand), var(--brand2)); margin-bottom: 12px; }
.mgrupo + .msec { border-top: 0; padding-top: 18px; }
.lead { font-size: 16px; line-height: 1.75; color: #374151; }
.lead.rich :first-child { margin-top: 0; }

/* Servicios */
.srv-box { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.srv-h { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 16px; margin-bottom: 10px; }
.srv-ico { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 12px; flex: none; }
.srv-ico.ok { background: var(--ok); }
.srv-ico.bad { background: var(--bad); }
.srv-box ul { margin: 0; padding-left: 20px; }
.srv-box li { font-size: 15px; color: #374151; padding: 3px 0; line-height: 1.5; }

/* Itinerario */
.tl { position: relative; padding-left: 24px; }
.tl::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(var(--brand), var(--brand2)); }
/* 36px (antes 26): con las piezas nuevas los días quedaban muy pegados. */
.tl-item { position: relative; margin-bottom: 36px; }
.tl-item:last-child { margin-bottom: 0; }
.tl-dot { position: absolute; left: -24px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand2); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--brand2); }
/* Al tamaño del texto normal (15px): a 10px casi no se leía. Se afloja el
   letter-spacing, que a este cuerpo separaba demasiado y partía la línea. */
/* Aire entre la etiqueta «DÍA N — fecha», el título del día y el contenido: la
   etiqueta y el título quedaban pegados uno al otro y al texto de abajo. */
.tl-day { font-family: var(--mono); font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--brand2); font-weight: 600; display: block; margin-bottom: 10px; }
.tl-title { font-family: var(--serif); font-size: 22px; font-weight: 600; margin: 0 0 18px; line-height: 1.2; }
/* Espaciado entre piezas del día: márgenes verticales parejos (16px) para que
   el contenido respire — hotel del día, transporte, excursión y fotos salían
   pegados unos a otros. Los márgenes consecutivos colapsan, así que la
   separación queda consistente en todo el micrositio. */
.tl-txt { font-size: 15px; color: #374151; line-height: 1.65; margin: 0 0 14px; }
.day-transp, .day-hotel { display: flex; align-items: center; gap: 10px; border-radius: 10px; padding: 9px 13px; margin: 16px 0; }
.day-transp { background: var(--brand-soft); border: 1px solid var(--brand-soft); }
.day-hotel { background: #fefce8; border: 1px solid #fde68a; }
.day-hotel-img { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
/* El nombre del hotel del día, como título (tipografía elegante): a 14px en
   negrita sans no se leía como tal. Solo el hotel; el transporte no cambia. */
.day-hotel .dt-ruta { font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.2; }
/* Hotel del día con foto: tarjeta horizontal — recuadro compacto de foto a la
   izquierda, datos a la derecha (el banner estirado a todo el ancho arriba del
   nombre no dejaba ver nada). En mobile se apila (ver media query). */
.day-hotel-confoto { gap: 14px; padding: 12px 14px; }
.dh-foto { flex: 0 0 220px; }
.dh-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.msobre-nombre { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.msobre-social { display: flex; gap: 10px; margin-top: 12px; }
.mc-social-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink); border: 1px solid var(--line); transition: transform .15s; }
.mc-social-ico:hover { transform: translateY(-2px); background: var(--brand); color: #fff; }
.mfoot-social { display: flex; gap: 12px; justify-content: center; margin-top: 12px; }
.mfoot-ico { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; transition: background .15s; }
.mfoot-ico:hover { background: rgba(255,255,255,.3); }
.msobre-texto { color: var(--muted); font-size: 15px; line-height: 1.7; }
.day-hotel a { color: var(--brand-ink); text-decoration: none; }
.day-hotel a:hover { text-decoration: underline; }
.dt-ico { font-size: 18px; flex: none; }
.dt-ruta { font-weight: 700; font-size: 14px; }
.dt-det { font-size: 12.5px; color: var(--muted); }
.tl-imgs { display: grid; gap: 8px; margin: 16px 0; }
.tl-imgs.n1 { grid-template-columns: 1fr; }
.tl-imgs.n2 { grid-template-columns: 1fr 1fr; }
.tl-imgs.n3 { grid-template-columns: 1.4fr .6fr; }
.tl-imgs.n3 img:first-child { grid-row: 1 / 3; }
.tl-imgs img { width: 100%; border-radius: 10px; object-fit: cover; aspect-ratio: 16 / 8; max-height: 240px; }
.tl-imgs.n1 img { aspect-ratio: 16 / 7; }
/* «Mostrar completa (sin recortar)»: la imagen se ve ENTERA a lo ancho
   disponible, con el alto que le toca por proporción. Nació para los MAPAS DE
   ITINERARIO de crucero, que con el recorte de siempre pierden puertos y
   quedan inservibles.
   ⚠️ Una columna: apiladas y a todo el ancho. NO cambia cuántas fotos se
   muestran (eso sigue siendo el layout), solo cómo se ven.
   ⚠️ El tope de alto + `contain` es para que un mapa vertical no se coma tres
   pantallas; cuando sobra espacio se ve el fondo de la página, que es neutro
   a propósito (el recuadro no se nota). */
.tl-imgs.completa { grid-template-columns: 1fr; }
.tl-imgs.completa img { aspect-ratio: auto; object-fit: contain; object-position: center;
  width: 100%; height: auto; max-height: 76vh; background: var(--bg); }
/* El layout de 3 pone la primera foto ocupando dos filas: acá van todas
   iguales, una debajo de la otra. */
.tl-imgs.completa.n3 img:first-child { grid-row: auto; }

/* Transporte: tarjeta tipo pasaje de avión (también tren/bus/auto/barco).
   Arriba el TIPO ("Vuelo", "Tren"…) + aerolínea/número; abajo dos cajas con el
   código del aeropuerto/ciudad en los extremos y la hora de salida/llegada
   DEBAJO de cada uno, unidas por una línea punteada con el ícono del transporte
   y la conexión en el medio. La ruta va solo en el cuerpo (antes se repetía en
   la cabecera). Los datos que faltan se ocultan, sin dejar huecos. Se usa igual
   en el bloque de transporte y en el transporte del día del itinerario. */
.pass { border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; margin: 16px 0; box-shadow: var(--shadow); }
.pass-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 12px 18px; background: var(--brand-soft); border-bottom: 1px dashed var(--line); }
.pass-route { display: flex; align-items: center; gap: 8px; min-width: 0; font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--brand-ink); }
.pass-ico { font-size: 18px; flex: none; }
.pass-airline { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.pass-air { font-weight: 600; color: var(--ink); }
.pass-num { font-family: var(--mono); font-size: 12px; background: #fff; border: 1px solid var(--line); padding: 2px 8px; border-radius: 6px; color: #57534e; }
.pass-body { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 16px 18px; }
.pass-end { min-width: 0; }
.pass-b { text-align: right; }
/* El código bajó de 30 a 22px: dominaba la tarjeta y le comía protagonismo a la
   ciudad y a los horarios. */
.pass-code { font-family: var(--serif); font-size: 22px; font-weight: 700; line-height: 1; color: var(--ink); letter-spacing: .02em; }
.pass-city { font-size: 13px; color: var(--muted); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* La hora va al MISMO tamaño que el nombre de la ciudad de su extremo (13px):
   en 12px se leía chica. Los dos tamaños quedan atados por una prueba. */
.pass-when { font-family: var(--mono); font-size: 13px; color: var(--brand-ink); margin-top: 6px; }
.pass-mid { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 96px; padding: 0 4px; }
.pass-track { position: relative; width: 100%; display: grid; place-items: center; }
.pass-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dotted var(--line); }
.pass-plane { position: relative; z-index: 1; background: #fff; padding: 0 8px; font-size: 20px; color: var(--brand2); }
/* Texto libre de conexión, debajo del ícono del medio ("Vuelo directo", "Con
   conexión en Madrid"). Acá ya NO va el horario: se reparte por extremo. */
.pass-conx { font-size: 11.5px; color: var(--muted); text-align: center; line-height: 1.35; }
/* Ruta que no se puede partir en dos extremos (un traslado, una excursión en
   bus): va como una línea sola, sin las cajas de código. */
.pass-single { padding: 14px 18px; }
.pass-single-r { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink); }
.pass-single-m { font-family: var(--mono); font-size: 12px; color: var(--brand-ink); margin-top: 5px; }
.pass-note { padding: 0 18px 14px; font-size: 13px; color: var(--muted); }

/* Hotel: tarjeta horizontal — recuadro compacto de foto a la IZQUIERDA y los
   datos a la derecha (antes la galería salía como columna estirada). Con
   varias fotos, el recuadro es un carrusel deslizable (scroll-snap) con
   flechas que maneja micro.js. En mobile se apila (ver media query). */
.hotel { display: flex; align-items: flex-start; gap: 18px; border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.hgal { position: relative; flex: 0 0 340px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--bg); }
.hgal-track { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hgal-track::-webkit-scrollbar { display: none; }
.hgal-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.hgal-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255,255,255,.88); color: var(--ink); font-size: 20px; line-height: 1; display: grid; place-items: center; cursor: pointer; }
.hgal-nav.prev { left: 8px; }
.hgal-nav.next { right: 8px; }
.hgal-nav:hover { background: #fff; }
.hb { flex: 1; min-width: 0; padding: 4px 6px; }
/* Como título: a 20px el nombre del hotel no se distinguía del texto. */
.hn { font-family: var(--serif); font-size: 25px; font-weight: 600; line-height: 1.2; }
/* Estrellas + régimen + noches, todo en una línea con separadores. Las estrellas
   van inline con su color de marca. */
.stars { color: var(--brand2); letter-spacing: 2px; font-size: 15px; }
.hm { font-size: 14px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
/* Check-in / check-out del hotel. Línea propia debajo de la meta (estrellas ·
   régimen · noches · habitación), que ya puede tener cuatro partes: sumarle dos
   fechas la volvería ilegible en el celular. En mono y con el color de marca,
   igual que los horarios del pasaje: son datos duros, no descripción.
   Sirve a las DOS variantes de hotel (bloque suelto y hotel del día). */
.hfechas { font-family: var(--mono); font-size: 13px; color: var(--brand-ink); margin-top: 6px; line-height: 1.5; }
.day-hotel .hfechas, .day-hotel-info .hfechas { font-size: 12px; margin-top: 4px; }
.hd { margin-top: 8px; font-size: 14px; color: #374151; line-height: 1.6; }
.hlinks { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.hlinks a { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 13.5px; font-weight: 600; color: var(--brand-ink); text-decoration: none; }
.hlinks a:hover { border-color: var(--brand); }

/* Excursiones: tarjeta COMPACTA que se amplía.
   Antes la foto iba en una columna al costado y el texto en la otra: dos
   columnas finitas donde no se leía ni se veía nada, y encima con una sola
   foto. Ahora la tarjeta cerrada muestra portada + nombre + datos + las
   primeras líneas con «…», y al tocarla se abre a lo ancho: las fotos arriba y
   el texto completo debajo, sin columnas.
   Es un <details> nativo: funciona sin JS, y al imprimir se despliega solo
   (micro.js ya abre todos los <details> antes de imprimir). */
.exc { border: 1px solid var(--line); border-radius: 12px; margin: 16px 0; padding: 12px; }
.exc-sum, .exc-plana { display: flex; align-items: flex-start; gap: 14px; }
.exc-sum { cursor: pointer; list-style: none; }
.exc-sum::-webkit-details-marker { display: none; }
/* Portada de la vista compacta: recuadro chico, no una franja estirada. */
.exc-thumb { flex: 0 0 130px; display: block; border-radius: 10px; overflow: hidden; background: var(--bg); }
.exc-thumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.exc-b { display: block; flex: 1; min-width: 0; padding: 2px 4px; }
.exc-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
/* Como título (tipografía elegante): a 16px no se leía como tal. */
.exc-n { font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.2; }
.exc-tag { font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.exc-tag.ok { background: #dcfce7; color: #166534; }
.exc-tag.extra { background: #fef3c7; color: #92400e; }
.exc-m { display: block; font-size: 13px; color: var(--muted); }
.exc-resumen { display: block; font-size: 14px; color: #374151; line-height: 1.6; margin-top: 6px; }
/* «Ver más» / «Ver menos»: los dos están en el HTML y el CSS muestra el que
   corresponde según el estado del <details>. Sin JS. */
.exc-mas { display: inline-block; margin-top: 8px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--brand-ink); }
.exc-mas-b { display: none; }
.exc-card[open] .exc-mas-a { display: none; }
.exc-card[open] .exc-mas-b { display: inline; }
.exc-card[open] .exc-resumen { display: none; }
.exc-full { margin-top: 14px; }
.exc-d { font-size: 14px; color: #374151; line-height: 1.6; margin: 6px 0 0; }
.exc-full .exc-d { margin-top: 12px; }
/* Zona de fotos de la vista ampliada: a lo ancho, nunca en una columna finita.
   Con 3 o más se usa el carrusel .hgal del hotel (ver .exgal-car más abajo). */
.exgal-1 img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.exgal-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.exgal-2 img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
/* El carrusel del hotel es una columna fija de 340px al costado de los datos;
   acá va a todo el ancho de la tarjeta. */
.hgal.exgal-car { flex: none; width: 100%; aspect-ratio: 16 / 9; }
/* Indicador de posición del carrusel (solo la excursión lo pide). */
.hgal-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.hgal-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.5); box-shadow: 0 1px 3px rgba(0,0,0,.45); transition: background .15s; }
.hgal-dot.on { background: #fff; }

/* Destino */
.dest-info { font-size: 16px; color: #374151; line-height: 1.7; }
.img-cap { font-size: 13px; color: var(--muted); margin-top: 8px; text-align: center; }

/* Caja destacada: recuadro con el color primario de la agencia (turquesa
   Meraki / verde MLR, vía var(--brand) del tema), fondo blanco, esquinas
   redondeadas y padding generoso. El contenido es el mismo texto rico del
   bloque de texto libre. */
.caja-dest { border: 2px solid var(--brand); background: #fff; border-radius: 14px; padding: 24px 28px; font-size: 16px; line-height: 1.7; color: #374151; }
.caja-dest.rich > :first-child { margin-top: 0; }
.caja-dest.rich > :last-child { margin-bottom: 0; }

/* Precio: franja de ANCHO COMPLETO (como estaba antes de contenerla), pero con
   el contenido repartido: etiqueta a la izquierda, importe grande a la derecha y
   el detalle («≈ € X por persona») debajo del importe. La cifra sigue entre 26 y
   34px y el formato de números no cambia (€ 4.680, sin decimales). */
/* Editor del bloque CRUCERO: la tabla de escalas. Cuatro campos por fila más
   las acciones, en una grilla, para que se cargue rápido de arriba abajo. */
.cru-esc { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin: 12px 0; background: #fff; }
.cru-esc-t { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.cru-fila { display: grid; grid-template-columns: 70px 1fr 90px 90px 84px; gap: 6px; align-items: center; margin-bottom: 6px; }
.cru-fila-head span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.cru-in { width: 100%; box-sizing: border-box; padding: 7px 9px; font-size: 13.5px;
  font-family: var(--sans); border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
.cru-in:focus { outline: none; border-color: var(--brand); }
.cru-acts { display: flex; gap: 3px; justify-content: flex-end; }
.cru-ayuda { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
/* Comparador de cabinas en el EDITOR: una tarjeta por opción, con sus fotos. */
.cru-comp-ed { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin: 12px 0; background: #fff; }
.cru-cabed { margin-top: 10px; }
.cru-cabed-acts { display: inline-flex; gap: 4px; align-items: center; }
@media (max-width: 760px) {
  .cru-fila { grid-template-columns: 1fr 1fr; }
  .cru-fila-head { display: none; }
  .cru-fila .cru-in-puerto { grid-column: 1 / -1; }
  .cru-acts { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ============================================================
   Bloque CRUCERO (barco + cabina + puertos + mapa)
   ============================================================
   Misma estética que la ficha de hotel: foto a la izquierda, datos a la
   derecha, y en móvil se apila. */
/* ⚠️ El texto va CENTRADO contra la foto (`align-items: center`), no pegado
   arriba: con la foto de 300px y cuatro líneas cortas, `flex-start` dejaba todo
   amontonado arriba a la izquierda y medio cuadrante vacío. */
.cru-barco { display: flex; align-items: center; gap: 22px;
  border: 1px solid var(--line); border-radius: 12px; padding: 18px; background: #fff; }
.cru-foto { flex: 0 0 300px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--bg); }
.cru-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cru-datos { flex: 1; min-width: 0; padding: 2px 4px; }
/* Jerarquía de la cabecera: la naviera es el sello de arriba, el barco el
   protagonista, los datos del viaje la información clave y el régimen/promo la
   etiqueta que resalta. Todo con más cuerpo y más aire que en la primera
   versión, donde el nombre del barco se comía a las otras tres líneas. */
.cru-naviera { font-family: var(--mono); font-size: 13.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand); font-weight: 600; margin: 0 0 8px;
  overflow-wrap: anywhere; }
.cru-nombre { font-family: var(--serif); font-size: clamp(23px, 5.2vw, 31px); font-weight: 600;
  line-height: 1.18; margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.cru-cabina { font-size: 16px; color: var(--ink); margin: 14px 0 0; line-height: 1.5; }
.cru-cab-lbl { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.cru-cabdet { font-size: 14.5px; color: var(--muted); margin: 4px 0 0; line-height: 1.5; }
/* Régimen / promo: etiqueta con los colores de la agencia. Resalta sin gritar
   —no es un cartel de oferta, es un dato del viaje— y sirve igual para «PROMO
   TARIFA AZUL» que para «SOLO CRUCERO».
   ⚠️ `inline-block` para que la píldora mida lo que dice y no cruce la tarjeta. */
.cru-reg { display: inline-block; font-size: 14.5px; font-weight: 600; line-height: 1.45;
  color: var(--brand-ink); background: var(--brand-soft); border-radius: 999px;
  padding: 6px 14px; margin: 14px 0 0; max-width: 100%; overflow-wrap: anywhere; }

/* Tabla de puertos. Es una <table> de verdad para que en el PDF el encabezado
   se repita solo si el itinerario cruza de hoja. */
.cru-tabla-wrap { margin-top: 14px; }
.cru-tabla { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 15px; }
.cru-tabla th { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); font-weight: 600;
  text-align: left; padding: 0 10px 8px; border-bottom: 2px solid var(--brand); }
.cru-tabla td { padding: 11px 10px; border-bottom: 1px solid var(--line);
  color: var(--ink); vertical-align: top; overflow-wrap: anywhere; }
.cru-tabla tr:last-child td { border-bottom: 0; }
.cru-tabla .cru-c-dia { width: 16%; font-family: var(--mono); font-size: 13.5px; color: var(--brand-ink); }
.cru-tabla .cru-c-hora { width: 19%; font-family: var(--mono); font-size: 13.5px; color: var(--muted); }
.cru-tabla td.cru-c-puerto { font-weight: 600; }
.cru-mapa { margin-top: 16px; }
/* Datos del viaje: una línea en mono con el color de marca, igual que las
   fechas del hotel y los horarios del pasaje (son datos duros, no descripción). */
/* Datos del viaje: es la información clave del pasajero (cuándo sale, desde
   dónde y cuántas noches), así que va al mismo cuerpo que el rótulo de sección
   (.mseclab) y no en letra chica. ⚠️ Los dos tamaños están ATADOS por una
   prueba: si se cambia uno hay que cambiar el otro.
   `overflow-wrap` para que un puerto largo —«Venecia (Trieste)»— no desborde
   la tarjeta en el celular. */
.cru-meta { font-family: var(--mono); font-size: 15px; color: var(--brand-ink);
  margin: 12px 0 0; line-height: 1.6; overflow-wrap: anywhere; }
/* Texto libre del crucero, debajo de la ficha del barco. */
.cru-texto { margin-top: 16px; font-size: 16.5px; color: #374151; line-height: 1.7; }

/* ---- Comparador de cabinas ----
   Tarjetas de opciones del MISMO itinerario. Es solo presentación: no calcula
   nada ni toca el bloque de Inversión. */
.cru-comp { margin-top: 20px; }
.cru-comp-t { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 0 0 10px; }
.cru-cabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cru-cab { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: #fff; }
.cru-cab-sum, .cru-cab-plana { display: flex; align-items: flex-start; gap: 12px; }
.cru-cab-sum { cursor: pointer; list-style: none; }
.cru-cab-sum::-webkit-details-marker { display: none; }
.cru-cab-thumb { flex: 0 0 84px; display: block; border-radius: 9px; overflow: hidden; background: var(--bg); }
.cru-cab-thumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cru-cab-b { flex: 1; min-width: 0; display: block; }
.cru-cab-t { display: block; font-weight: 600; font-size: 15.5px; color: var(--ink); line-height: 1.3; }
.cru-cab-p { display: block; font-family: var(--serif); font-size: 22px; font-weight: 600;
  color: var(--brand-ink); line-height: 1.15; margin-top: 4px; }
.cru-cab-n { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.cru-cab-mas { display: inline-block; margin-top: 8px; font-family: var(--mono); font-size: 12px;
  font-weight: 600; letter-spacing: .04em; color: var(--brand-ink); }
.cru-cab-mas-b { display: none; }
.cru-cab-card[open] .cru-cab-mas-a { display: none; }
.cru-cab-card[open] .cru-cab-mas-b { display: inline; }
.cru-cab-full { margin-top: 12px; }
.cru-comp-nota { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; line-height: 1.5; }

/* Móvil: la tabla se apila fila por fila. Cada celda muestra su rótulo (el
   `data-lbl` que emite la vista), o quedarían cuatro datos sueltos sin saber
   cuál es la llegada y cuál la salida. */
@media (max-width: 620px) {
  /* ⚠️ `stretch` y no el `center` de escritorio: en columna, el eje cruzado es
     el horizontal y `center` encogería el bloque de datos al ancho de su
     contenido. */
  .cru-barco { flex-direction: column; align-items: stretch; gap: 16px; padding: 14px; }
  .cru-foto { flex: 0 0 auto; width: 100%; aspect-ratio: 16 / 9; }
  .cru-datos { padding: 0; }
  .cru-tabla, .cru-tabla tbody, .cru-tabla tr, .cru-tabla td { display: block; width: auto; }
  .cru-tabla thead { display: none; }
  .cru-tabla tr { border: 1px solid var(--line); border-radius: 10px;
    padding: 10px 12px; margin-bottom: 10px; background: #fff; }
  .cru-tabla td { border: 0; padding: 2px 0; display: flex; gap: 10px; align-items: baseline; }
  .cru-tabla td::before { content: attr(data-lbl); flex: 0 0 74px;
    font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted); }
  .cru-tabla td:empty { display: none; }
  .cru-tabla .cru-c-dia, .cru-tabla .cru-c-hora { width: auto; }
  .cru-tabla td.cru-c-puerto { font-size: 16px; }
  /* Comparador: una tarjeta por fila. Dos columnas de 130px no dejan leer ni
     el tipo ni el precio. */
  .cru-cabs { grid-template-columns: 1fr; }
}

.price-box { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px;
  background: var(--brand); color: #fff; border-radius: 14px; padding: 18px 24px; }
/* La etiqueta va al MISMO tamaño que el rótulo de sección («INVERSIÓN», 15px):
   en 11.5px se leía chica contra el importe. Atados por una prueba. */
.price-box .pl { font-size: 15px; letter-spacing: .09em; text-transform: uppercase; opacity: .85; font-weight: 600; }
.price-box .pb-r { text-align: right; min-width: 0; }
/* ⚠️ El símbolo de moneda va en la SANS aunque la cifra sea serif: Playfair
   dibuja el "$" con DOS barras verticales y el signo de pesos lleva UNA. Mismo
   tamaño (1em) y peso que la cifra. Vale también para la vista previa del
   editor (.pp-big), que usa la misma serif. */
.price-box .cur, .pp-big .cur { font-family: var(--sans); font-weight: inherit; }
.price-box .pn { font-family: var(--serif); font-size: clamp(26px, 5vw, 34px); font-weight: 600; line-height: 1.05; }
/* El detalle subió de 13 a 15px: se leía chico. Sigue por debajo del importe
   principal, para no competir con él. */
.price-box .ps { font-size: 15px; opacity: .85; margin-top: 5px; }
@media (max-width: 560px) {
  .price-box { flex-direction: column; align-items: flex-start; gap: 6px; }
  .price-box .pb-r { text-align: left; }
}

/* Contacto */
/* Los datos quedaban todos apilados contra un costado: ahora el logo de la
   agencia va del lado opuesto. */
.mc-card { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; background: #fafaf8;
  display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.mc-main { min-width: 0; }
.mc-logo { flex: 0 0 auto; max-width: 40%; }
/* ⚠️ Los logos son JPG y NO tienen transparencia: traen su propio fondo blanco
   y se veía el recuadro sobre la tarjeta. `multiply` funde el blanco con el
   fondo y lo hace desaparecer. La solución de fondo sigue siendo subir un PNG
   con transparencia desde el panel de agencias. */
.mc-logo img { display: block; max-width: 100%; max-height: 84px; object-fit: contain; mix-blend-mode: multiply; }
@media (max-width: 640px) {
  .mc-card { flex-direction: column; align-items: flex-start; gap: 16px; }
  .mc-logo { max-width: 60%; }
  .mc-logo img { max-height: 60px; }
}

/* Carátula del PDF: en pantalla NO existe (la portada animada ya cumple ese
   papel). Solo aparece como primera hoja al imprimir; ver la regla de impresión.
   Ojo: el pie de esa regla la vuelve visible solo en papel. */
.pcover { display: none; }

/* La tabla que reserva el margen de cada hoja impresa (ver views-micrositio).
   En PANTALLA se comporta como bloques anidados: mismo resultado visual que
   antes de envolverlo, y los .msec siguen siendo hermanos entre sí (de eso
   depende el separador .msec + .msec). */
.psheet, .psheet > thead, .psheet > tbody, .psheet > tfoot,
.psheet > thead > tr, .psheet > tbody > tr, .psheet > tfoot > tr,
.psheet > thead > tr > td, .psheet > tbody > tr > td, .psheet > tfoot > tr > td {
  display: block; margin: 0; padding: 0; border: 0; border-spacing: 0; width: auto;
}
.psp { display: none; }
.mc-t { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.mc-agent { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.mc-av { width: 46px; height: 46px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink); display: grid; place-items: center; font-weight: 700; font-size: 20px; flex: none; overflow: hidden; }
.mc-av img { width: 100%; height: 100%; object-fit: cover; }
.mc-name { font-weight: 700; font-size: 17px; }
.mc-ag { font-size: 13px; color: var(--muted); }
.mc-links { display: flex; flex-direction: column; gap: 6px; }
.mc-link { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #374151; text-decoration: none; }
.mc-link:hover { color: var(--brand); }
/* WhatsApp del asesor: botón con icono, sin mostrar el número. */
.mc-wa { align-self: flex-start; gap: 6px; padding: 7px 14px; border-radius: 999px; background: #25d366; color: #fff; font-weight: 600; }
.mc-wa:hover { background: #1eb655; color: #fff; }

/* ===== Panel lateral sticky (Mejora 5, estilo Mogu) =====
   En escritorio el contenido (.mmain) va a la izquierda y el panel lateral
   (.mside: acciones + asesor + «Sobre nosotros») queda sticky a la derecha
   mientras el cliente scrollea. En mobile todo se apila (default) y las acciones
   las cubre la barra flotante. En el PDF, .mbody/.mside vuelven a fluir como
   bloques (ver @media print). */
.mside-actions { display: none; }
.msa-t { font-family: var(--serif); font-size: 17px; font-weight: 600; margin-bottom: 12px; }
.msa-btn { display: block; width: 100%; border: 0; border-radius: 11px; padding: 12px 14px; font-family: var(--sans); font-weight: 700; font-size: 14.5px; cursor: pointer; margin-top: 8px; }
.msa-btn:first-of-type { margin-top: 0; }
.msa-buy { background: var(--brand); color: #fff; }
.msa-ask { background: #25d366; color: #fff; }
.msa-pdf { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.msa-btn:hover { filter: brightness(1.06); }

@media (min-width: 1000px) {
  .mbody { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 40px; align-items: start; padding: 0 44px; }
  /* El padding lateral de las secciones lo pone ahora .mbody: si no, se sumaría. */
  .mbody .msec { padding-left: 0; padding-right: 0; }
  .mmain { min-width: 0; }
  .mside { position: sticky; top: 20px; align-self: start; }
  .mside-actions { display: block; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow); margin-bottom: 20px; }
  /* La tarjeta del asesor se apila en la columna angosta (foto arriba). */
  .mside .mc-card { flex-direction: column; align-items: flex-start; gap: 14px; }
  /* El logo quedaba pegado al borde izquierdo del recuadro: apilado va centrado
     horizontalmente (align-self, porque la tarjeta es flex en columna). */
  .mside .mc-logo { max-width: 70%; align-self: center; }
  /* En escritorio la barra flotante desaparece: las acciones viven en el panel. */
  body.entered .mcta { display: none; }
}

/* ===== Video incrustado (YouTube / Vimeo) ===== */
.video-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.video-if { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Recuadro para el PDF (los iframes no se reproducen impresos): en pantalla no
   se ve; ver @media print. */
.video-print { display: none; border: 1px dashed var(--line); border-radius: 12px; padding: 16px 18px; font-size: 14px; color: #374151; }
.video-print-ico { color: var(--brand); font-weight: 700; margin-right: 6px; }
.video-print a { color: var(--brand-ink); word-break: break-all; }
/* Video de un banco (Pexels / Pixabay): <video> nativo dentro del mismo marco
   16:9 que el iframe. El poster (la miniatura) es lo que se ve hasta que el
   cliente le da play — con preload="none" no se baja un solo mega antes. */
.video-el { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; background: #000; }
/* Título del video: va ARRIBA del video y con el mismo criterio visual que el
   nombre del hotel (.hn: serif, 25px, 600) — antes era un epígrafe chico debajo
   y casi no se leía. El margin-bottom es el aire contra el video; el margen de
   arriba queda en 0 porque el rótulo de sección ya trae el suyo. Sin título el
   elemento NO se emite, así que no puede dejar hueco. */
.video-tit { font-family: var(--serif); font-size: 25px; font-weight: 600; line-height: 1.2; color: var(--ink); margin: 0 0 12px; }
@media (max-width: 640px) {
  .video-tit { font-size: 20px; margin-bottom: 10px; }
}
/* Fuente del video: dato INTERNO del editor, en gris chico. ⚠️ No existe en el
   micrositio ni en el PDF — el pasajero no ve ninguna línea de crédito. */
.video-fuente { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
/* ===== Plan de pagos (editor interno) =====
   Usa los tokens de marca (--brand / --brand-soft / --brand-ink), así que se
   tiñe solo con la agencia de la propuesta, igual que el resto del editor. */
.plan-resumen { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: flex-end;
  background: var(--brand-soft); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin-bottom: 16px; }
.plan-cifra { display: flex; flex-direction: column; gap: 3px; }
.plan-lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.plan-num { font-family: var(--serif); font-size: 24px; font-weight: 600; line-height: 1.1; color: var(--ink); }
.plan-num.ok { color: var(--ok); }
.plan-num.pend { color: var(--warn); }
/* El símbolo de moneda va en la sans aunque la cifra sea serif: el "$" de
   Playfair lleva dos barras (ver .price-box .cur). */
.plan-num .cur { font-family: var(--sans); font-weight: inherit; }
.plan-avance { flex: 1 1 180px; min-width: 160px; }
.plan-barra { height: 8px; border-radius: 999px; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.plan-barra span { display: block; height: 100%; background: var(--brand); transition: width .25s; }
.plan-pct { display: block; margin-top: 5px; font-size: 12px; color: var(--muted); }
/* Avisos que NO bloquean (cobrado > total, cuotas descuadradas). */
.plan-aviso { flex: 1 1 100%; background: #fffbeb; color: #92400e; border: 1px solid #fde68a;
  border-radius: 9px; padding: 9px 12px; font-size: 13px; }
.plan-cfg { margin-top: 4px; }
.plan-sec { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.plan-sec h4 { font-family: var(--serif); font-size: 18px; font-weight: 600; margin: 0 0 10px; }
/* Generador de cuotas: recuadro propio dentro de la sección de cuotas, para que
   se lea como una herramienta aparte y no como otro formulario de alta. */
.plan-gen { margin-top: 16px; padding: 14px; border: 1px dashed var(--line); border-radius: 10px; background: #fafaf7; }
.plan-gen-t { font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.plan-gen .lib-hint { margin-top: 8px; }
.plan-form { margin-top: 12px; }
.plan-tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.plan-tabla th { text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.plan-tabla td { padding: 8px; border-bottom: 1px solid var(--line2, var(--line)); vertical-align: middle; }
.plan-tabla .plan-monto { font-weight: 600; white-space: nowrap; }
.plan-tabla .plan-monto .cur { font-family: var(--sans); }
.plan-tabla .plan-nota, .plan-tabla .plan-quien { color: var(--muted); }
/* Nombre opcional de la cuota («Seña», «Saldo»…). Si está, es lo que ve el
   pasajero en lugar de «Cuota N»; si no, queda un guión apagado. */
.plan-tabla .plan-cuota-nombre { font-weight: 600; }
.plan-vac { color: var(--muted); font-weight: 400; }
/* Firma de contratos (2026-08-21): estado de cada documento en el editor.
   Reusa las clases .urg-* del CRM para que verde/amarillo/gris signifiquen lo
   mismo en todo Bitácora. */
.urg-firma { display: inline-block; padding: 1px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; margin-left: 6px; vertical-align: 1px; }
.doc-row .doc-acc { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.doc-row .doc-firma-det { color: var(--muted); font-size: 12px; }
/* El enlace que recibió el pasajero, para copiarlo y mandarlo por otro medio.
   ⚠️ El token es largo: `break-all` + `min-width:0` para que envuelva dentro de
   la fila en vez de ensancharla (en el celular la tarjeta es angosta). */
.doc-row .doc-firma-link { display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-top: 6px; min-width: 0; }
.doc-row .doc-firma-url { font-family: var(--mono); font-size: 11.5px;
  color: var(--muted); background: var(--soft, #f4f4f5); border: 1px solid var(--line);
  border-radius: 6px; padding: 2px 7px; word-break: break-all; min-width: 0; }
/* Acceso de vuelta al cotizador desde el editor de una propuesta (2026-08-22).
   Discreto: solo aparece si la propuesta está enlazada desde alguna cotización,
   y no cambia nada del resto del bloque «Datos base». */
.pexp { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 14px; padding: 10px 14px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--bg); font-size: 14px; }
.pexp-lbl { font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pexp-t { font-weight: 600; }
.pexp-cot { color: var(--muted); }
.pexp .btn { margin-left: auto; }
.pexp-varias { align-items: flex-start; }
/* Sin expediente todavía: el camino de ida al cotizador. Más apagado que la
   cajita del enlace ya existente — es una oferta, no un dato. */
.pexp-crear { background: transparent; border-style: dashed; }
.pexp-lista { flex-basis: 100%; margin: 4px 0 0; padding-left: 18px; }
.pexp-lista li { margin: 2px 0; }

/* Portal del pasajero: contrato firmado / pendiente de firma. */
.doc-firma-ok { color: #166534; font-weight: 600; }
.doc-firma-pend { color: #9a3412; font-weight: 600; }
.doc-item.doc-pendiente { border-color: #fed7aa; background: #fffbf5; }
.plan-tabla .plan-acc { text-align: right; white-space: nowrap; }
.plan-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.plan-badge.pagada { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.plan-badge.pendiente { background: var(--bg); color: #57534e; border: 1px solid var(--line); }
.plan-badge.vencida { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
/* Selector de estado de cada cuota. El estado es MANUAL: nada lo cambia solo. */
.plan-estado-sel { font-size: 12.5px; padding: 4px 8px; border: 1px solid var(--line);
  border-radius: 999px; background: #fff; color: var(--ink); font-weight: 600; }
.plan-estado-sel:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
/* Aviso suave de vencimiento pasado: NO cambia el estado guardado. */
.plan-atraso { font-family: var(--mono); font-size: 10.5px; color: #991b1b; white-space: nowrap; }
.plan-aud { margin-top: 16px; font-size: 13px; color: var(--muted); }
.plan-aud summary { cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.plan-aud ul { margin: 10px 0 0; padding-left: 18px; line-height: 1.7; }
.plan-aud-f { font-family: var(--mono); font-size: 11.5px; color: var(--brand-ink); }
@media (max-width: 640px) {
  .plan-tabla { font-size: 12.5px; }
  .plan-num { font-size: 20px; }
}

/* Editor: aviso y vista previa del video */
.video-prev { margin-top: 10px; }
.video-ok { font-size: 12.5px; color: var(--ok); margin: 8px 0 0; }
.video-err { font-size: 13px; color: var(--bad); background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; padding: 10px 12px; line-height: 1.5; }

/* Editor: las 2 pestañas del bloque de video («Buscar videos» / «Pegar
   enlace»), mismo patrón visual que el selector de imágenes (.pk-tabs). */
.vid-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.vid-tab {
  border: none; background: transparent; cursor: pointer;
  padding: 9px 14px; font-family: var(--sans); font-size: 13.5px; font-weight: 500;
  color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.vid-tab:hover { color: var(--ink); }
.vid-tab.on { color: var(--brand-ink); border-bottom-color: var(--brand); }
.vid-pane[hidden] { display: none; }
.vid-search { display: flex; gap: 8px; margin-bottom: 12px; }
.vid-kw {
  flex: 1; box-sizing: border-box; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 9px;
  font-family: var(--sans); font-size: 14px; color: var(--ink);
}
.vid-kw:focus { outline: none; border-color: var(--brand); }
/* Banco de origen, aclarado una sola vez debajo del buscador (con una sola
   fuente, una etiqueta por miniatura serían 12 carteles repetidos). */
.vid-fuente-lbl { font-size: 12px; color: var(--muted); margin: 0 0 10px; }
.vid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.vid-item {
  position: relative; padding: 0; border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; cursor: pointer; background: #f0efe9;
  aspect-ratio: 16 / 9;
}
.vid-item:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.vid-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* El ▶ distingue de un vistazo la grilla de videos de la de fotos. */
.vid-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 26px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.6); pointer-events: none;
}

/* ===== Plan de pagos en el micrositio (lo que ve el cliente) =====
   Usa los tokens de marca, así que se tiñe con la agencia de la propuesta. Los
   colores de estado de cada cuota son LOS MISMOS del panel de urgencia del CRM
   (.urg-green / .urg-red / .urg-gray), para que verde-rojo-gris signifiquen lo
   mismo en todo el sistema. */
.mplan-resumen { display: flex; flex-wrap: wrap; gap: 18px 36px; align-items: flex-end;
  background: var(--brand-soft); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; }
.mplan-cifra { display: flex; flex-direction: column; gap: 4px; min-width: 130px; }
.mplan-lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mplan-num { font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1.1; color: var(--ink); }
.mplan-num.mplan-verde { color: #166534; }
.mplan-num.mplan-pend { color: #9a3412; }
/* El símbolo de moneda va en la sans aunque la cifra sea serif: Playfair dibuja
   el "$" con DOS barras (ver .price-box .cur). */
.mplan-num .cur { font-family: var(--sans); font-weight: inherit; }
.mplan-avance { margin-top: 16px; }
.mplan-barra { height: 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.mplan-barra span { display: block; height: 100%; background: var(--brand); transition: width .4s ease; }
.mplan-pct { display: block; margin-top: 7px; font-size: 13px; color: var(--muted); }
.mplan-cerrado { margin: 16px 0 0; padding: 12px 16px; border-radius: 12px;
  background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; font-size: 15px; font-weight: 600; }
.mplan-bloque { margin-top: 26px; }
.mplan-h { font-family: var(--serif); font-size: 20px; font-weight: 600; margin: 0 0 12px; color: var(--ink); }
.mplan-lista { list-style: none; margin: 0; padding: 0; }
.mplan-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; margin-bottom: 8px; }
.mplan-fecha { font-family: var(--mono); font-size: 13px; color: var(--brand-ink); }
.mplan-met { font-size: 14px; color: var(--muted); }
.mplan-ncuota { font-weight: 700; font-size: 15px; color: var(--ink); min-width: 78px; }
/* El monto se va al extremo derecho; en celular baja de línea sin apretarse. */
.mplan-monto { margin-left: auto; font-family: var(--serif); font-size: 19px; font-weight: 600; white-space: nowrap; }
.mplan-monto .cur { font-family: var(--sans); font-weight: inherit; }
.mplan-badge { padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.mplan-badge.mplan-pagada { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.mplan-badge.mplan-pendiente { background: #f3f4f6; color: #4b5563; border: 1px solid var(--line); }
.mplan-badge.mplan-vencida { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
/* Cuota pendiente cuyo vencimiento ya pasó: marca SUAVE (borde ámbar), sin
   cambiar el chip ni el estado guardado, que solo lo mueve la agencia. */
.mplan-badge.mplan-atrasada { border-color: #fcd34d; box-shadow: inset 0 0 0 1px #fef3c7; }
.mplan-contrato { display: flex; align-items: center; gap: 12px; margin-top: 22px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: 15px; }
.mplan-contrato:hover { border-color: var(--brand); }
.mplan-contrato .doc-dl { margin-left: auto; }
/* Celular: es donde se abre casi siempre. Las cifras se apilan de a dos y cada
   fila de pago/cuota se reordena para que el monto no quede espachurrado. */
@media (max-width: 640px) {
  .mplan-resumen { gap: 14px 22px; padding: 16px 16px; }
  .mplan-cifra { min-width: 44%; }
  .mplan-num { font-size: 22px; }
  .mplan-item { gap: 6px 12px; padding: 12px 14px; }
  .mplan-monto { font-size: 17px; }
  .mplan-ncuota { min-width: 100%; }
  .mplan-badge { order: 9; }
}

/* Pie */
.mfoot { background: var(--footer, #111); color: rgba(255,255,255,.78); padding: 26px 20px; text-align: center; font-size: 14px; }
.mfoot .mfl { font-family: var(--serif); font-size: 20px; color: #fff; margin-bottom: 6px; }
/* Blanco puro (sin alfa), igual que el nombre de la agencia y el email: sobre
   los fondos de marca el blanco al 60% quedaba muy lavado. */
.mfoot-lic { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: #fff; margin-bottom: 6px; }

/* Barra flotante de acciones del cliente */
.mcta {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line); justify-content: center;
}
body.entered .mcta { display: flex; }
.mcta button { flex: 1; max-width: 280px; border: 0; border-radius: 11px; padding: 14px 16px; font-family: var(--sans); font-weight: 700; font-size: 15px; cursor: pointer; }
.mcta-pdf { background: #fff; color: var(--ink); border: 1px solid var(--line) !important; flex: 0 0 auto !important; max-width: none !important; }
.mcta-ask { background: #25d366; color: #fff; }
.mcta-buy { background: var(--brand); color: #fff; }
.mcta button:hover { filter: brightness(1.06); }

/* Página de token inválido */
.m404 { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--bg); }
.m404-box { text-align: center; max-width: 420px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 36px 30px; box-shadow: var(--shadow); }
.m404-logo { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, var(--brand-a), var(--brand-b)); color: #fff; font-weight: 800; font-size: 24px; display: grid; place-items: center; margin: 0 auto 18px; }
.m404-box h1 { font-family: var(--serif); font-size: 24px; margin: 0 0 10px; }
.m404-box p { font-size: 15px; color: var(--muted); line-height: 1.6; margin: 0; }

@media (max-width: 560px) {
  /* En pantallas chicas las tarjetas horizontales se apilan: foto arriba
     compacta (16/9), texto abajo. */
  .hotel { flex-direction: column; align-items: stretch; }
  .hgal { flex: none; width: 100%; aspect-ratio: 16 / 9; }
  /* Pasaje en pantalla chica: código un poco menor y línea del medio más corta,
     pero mantiene las dos cajas de extremos. */
  .pass-route { font-size: 16px; }
  .pass-code { font-size: 18px; }
  .pass-mid { min-width: 66px; }
  .pass-conx { font-size: 10.5px; }
  .pass-body { gap: 6px; padding: 14px; }
  .day-hotel-confoto { flex-direction: column; align-items: stretch; }
  .dh-foto { flex: none; }
  .dh-foto img { aspect-ratio: 16 / 9; }
  /* Excursión: si el ancho no da para foto + texto, la compacta se apila (foto
     arriba, texto abajo) y las dos fotos de la ampliada también. */
  .exc-sum, .exc-plana { flex-direction: column; gap: 10px; }
  .exc-thumb { flex: none; width: 100%; }
  .exc-thumb img { aspect-ratio: 16 / 9; }
  .exgal-2 { grid-template-columns: 1fr; }
}

/* Pasaje en pantalla de CELULAR (≤460px: 360, 390 y 414 son los anchos
   habituales). La tarjeta tiene que entrar COMPLETA a lo ancho.
   ⚠️ `.pass` lleva `overflow: hidden` (lo necesita por las esquinas
   redondeadas), así que lo que no entra NO se puede recuperar deslizando: se
   corta y desaparece. De ahí el reporte de «la imagen del pasaje queda cortada
   y no deja desplazarse al costado».
   Lo que lo causaba, medido contra los datos reales: a 360px quedan ~104px por
   extremo, y `.pass-city` iba con `white-space: nowrap` + ellipsis, así que
   «Palma de Mallorca» y «TENERIFE NORTE» (dos casos de producción) salían
   recortados con «…». Acá la ciudad pasa a ENVOLVER en dos líneas y el ancho
   sale de achicar la columna del medio y los paddings, no de tapar texto. */
@media (max-width: 460px) {
  .pass-head { padding: 10px 12px; gap: 6px 10px; }
  .pass-route { font-size: 15px; }
  .pass-ico { font-size: 16px; }
  .pass-airline { font-size: 12px; gap: 6px; }
  .pass-body { padding: 13px 10px; gap: 6px; }
  .pass-code { font-size: 17px; }
  .pass-city { font-size: 12px; white-space: normal; overflow: visible; text-overflow: clip; }
  .pass-when { font-size: 12px; }
  .pass-mid { min-width: 44px; padding: 0; }
  .pass-plane { font-size: 16px; padding: 0 4px; }
  .pass-conx { font-size: 10px; }
  .pass-single { padding: 13px 12px; }
  .pass-single-r { font-size: 15px; }
  .pass-note { padding: 0 12px 12px; }
}
/* Red de seguridad a CUALQUIER ancho: un dato cargado sin espacios (un código
   raro, una URL pegada por error en la ruta) no puede empujar la tarjeta más
   allá de su caja. Con `min-width: 0` en .pass-end el track del grid ya puede
   encogerse; esto se ocupa de la palabra suelta que no entra. */
.pass-code, .pass-city, .pass-when, .pass-air, .pass-num,
.pass-single-r, .pass-single-m, .pass-conx { overflow-wrap: anywhere; }

/* ===== Métricas de apertura (drawer de cotización del CRM) ===== */
.met-hero { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); font-weight: 600; font-size: 14px; color: var(--ink); }
.met-hero-ico { margin-right: 6px; }
.met-hero.met-volvio { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-ink); }
.met-hero-sub { font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--muted); letter-spacing: .02em; }
.met-volvio .met-hero-sub { color: var(--brand-ink); opacity: .85; }
.met-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.met-c { text-align: center; padding: 10px 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.met-n { display: block; font-family: var(--serif); font-size: 22px; line-height: 1.1; color: var(--brand-ink); }
.met-k { display: block; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-top: 3px; }
.met-graf { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.met-bars { display: flex; align-items: flex-end; gap: 3px; height: 44px; }
.met-bar { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.met-bar-f { width: 100%; background: var(--brand); border-radius: 3px 3px 0 0; opacity: .75; }
.met-bar:hover .met-bar-f { opacity: 1; }
.met-graf-k { font-family: var(--mono); font-size: 10.5px; color: var(--muted2); text-align: right; margin-top: 6px; }
.met-lista { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.met-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); font-size: 12.5px; }
.met-fecha { font-family: var(--mono); color: var(--ink); }
.met-tag { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; padding: 2px 6px; border-radius: 5px; background: var(--line2); color: var(--muted); }
.met-tag-1 { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
.met-hace { margin-left: auto; color: var(--muted2); font-size: 11.5px; }
.met-nota { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted2); }

/* ===== Mapas del itinerario (Leaflet + OpenStreetMap) ===== */
.mapa-wrap { margin: 0 0 22px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); box-shadow: var(--shadow); }
.mapa { height: 320px; width: 100%; background: var(--line2); }
.mapa-pie { padding: 8px 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--line); background: var(--bg); }
/* Marcador propio: círculo con el número del día (sin imágenes de Leaflet). */
.map-pin-wrap { background: transparent; border: 0; }
.map-pin { width: 28px; height: 28px; border-radius: 50%; color: #fff; font-family: var(--mono); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.map-pop-d { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.map-pop-n { font-family: var(--serif); font-size: 16px; color: var(--ink); margin-top: 2px; }
.map-pop-t { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
/* Leaflet mete sus propios estilos: acá se alinean con la estética del sitio. */
.leaflet-container { font-family: var(--sans); }
.leaflet-popup-content-wrapper { border-radius: 10px; }
.leaflet-popup-content { margin: 10px 14px; }

/* ===== Buscador de lugares (editor: fila del día) ===== */
.lug-row { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.lug-row .field { flex: 1; min-width: 180px; margin-bottom: 0; }
.lug-chip { font-family: var(--mono); font-size: 11px; padding: 6px 8px; border-radius: 7px; background: var(--brand-soft); color: var(--brand-ink); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lug-chip.lug-vacio { background: var(--line2); color: var(--muted2); }
.lug-x { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 12px; padding: 0 2px; opacity: .7; }
.lug-x:hover { opacity: 1; }
.lug-list { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; }
.lug-item { text-align: left; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; font-family: var(--sans); }
.lug-item:hover { border-color: var(--brand); background: var(--brand-soft); }
.lug-n { font-weight: 600; font-size: 14px; color: var(--ink); }
.lug-c { font-size: 12px; color: var(--muted); }

@media (max-width: 560px) {
  .mapa { height: 240px; }
}

/* ===== Informe inteligente con IA (CRM → Conversión) ===== */
.inf-box { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 16px 18px; margin: 0 0 20px; box-shadow: var(--shadow); }
.inf-box.inf-off { background: var(--bg); box-shadow: none; }
.inf-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.inf-t { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-ink); font-weight: 600; }
.inf-hint { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.inf-estado { margin-top: 12px; padding: 10px 12px; border-radius: 9px; font-size: 13px; background: var(--brand-soft); color: var(--brand-ink); }
.inf-estado.inf-error { background: #fdecea; color: #8a1c13; }
.inf-estado.inf-cargando::after { content: ' ⋯'; }
.inf-out { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.65; color: var(--ink); }
.inf-out h3 { font-family: var(--serif); font-size: 17px; color: var(--brand-ink); margin: 18px 0 8px; }
.inf-out h3:first-child { margin-top: 0; }
.inf-out p { margin: 0 0 10px; }
.inf-out ul { margin: 0 0 12px; padding-left: 20px; }
.inf-out li { margin-bottom: 5px; }
.inf-out strong { color: var(--brand-ink); }


/* ---------- Desplegables del editor (día y excursión) ---------- */
details.scard > summary, details.pieza > summary { cursor: pointer; list-style: none; }
details.scard > summary::-webkit-details-marker,
details.pieza > summary::-webkit-details-marker { display: none; }
details.scard > summary::before, details.pieza > summary::before {
  content: '\25B8'; display: inline-block; margin-right: 8px; color: var(--muted);
  transition: transform .15s ease; flex: 0 0 auto;
}
details.scard[open] > summary::before, details.pieza[open] > summary::before { transform: rotate(90deg); }
details.scard:not([open]) > summary, details.pieza:not([open]) > summary { margin-bottom: 0; }
/* Título de lo que está plegado, para reconocerlo sin abrirlo. */
.det-res {
  flex: 1 1 auto; min-width: 0; margin: 0 10px; color: var(--muted); font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
details.pieza > summary { display: flex; align-items: center; }

/* Casilla de opción del bloque (días cerrados en el micrositio) */
.chk-row { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: 10px; background: #fafaf7; cursor: pointer; }
/* ⚠️⚠️ EL TILDE TIENE QUE VERSE. La casilla salía chiquita y del gris del
   navegador, así que marcada y sin marcar se parecían demasiado: `accent-color`
   la pinta del color de la agencia y 18px la hacen del tamaño del texto.
   ⚠️ Y la FILA ENTERA se enciende, que es lo que se ve de reojo. Si el navegador
   no soporta `:has()` queda el acento de color, que ya alcanza.
   ⚠️ Nada de esto sirve si el JS cancela el clic: el `default` de una casilla
   ES el tilde. Ver `esControl()` en public/blocks.js. */
.chk-row input { margin-top: 1px; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--brand); cursor: pointer; }
.chk-row:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.chk-row span { font-size: 13.5px; }
.chk-row em { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); margin-top: 3px; }

/* ---------- Día plegable en el micrositio ---------- */
.tl-det > summary { cursor: pointer; list-style: none; display: block; padding: 2px 0; }
.tl-det > summary::-webkit-details-marker { display: none; }
.tl-sum { position: relative; padding-right: 28px; }
.tl-sum::after {
  content: '\25B8'; position: absolute; right: 4px; top: 50%; margin-top: -.5em;
  color: var(--brand); font-size: 15px; transition: transform .15s ease;
}
.tl-det[open] > .tl-sum::after { transform: rotate(90deg); }
.tl-det > summary:hover .tl-title { color: var(--brand); }
.tl-det[open] > .tl-body { margin-top: 8px; }

/* ---------- Impresión / Guardar como PDF ---------- */
/* El itinerario sale COMPLETO: micro.js abre los <details> en beforeprint, y
   esto cubre el navegador que no lo dispare. */
/* Sin margen de hoja el navegador NO tiene dónde dibujar su encabezado ni su
   pie: así desaparecen la fecha, el título y la URL de todas las páginas.
   ⚠️ El margen NO se pierde: lo reserva la tabla .psheet con sus espaciadores,
   que el navegador repite en cada hoja (un padding del cuerpo no sirve: se
   aplica una sola vez en todo el documento, no por página). Las dos cosas
   juntas son la única forma de tener margen Y no tener fecha/URL. */
@page { margin: 0; }

@media print {
  /* Sin esto la cabecera —que es un background-image— sale en blanco, igual que
     los fondos de color de hoteles y transportes. */
  *, *::before, *::after { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .mhero { min-height: 300px; }
  /* Las fotos ya vienen cargadas (micro.js las pasa a eager antes de imprimir);
     acá solo se evita que una foto alta se coma una página entera. */
  /* Más bajas que en pantalla: una foto que no entra en lo que queda de hoja
     no se puede partir y salta entera, dejando el hueco. Cuanto más baja,
     menos veces pasa. */
  .tl-imgs img, .exc img, .dh-foto img, .mgal img { max-height: 240px; object-fit: cover; }
  /* ⚠️ La regla de arriba RECORTA (`cover`), que es justo lo que «Mostrar
     completa» viene a evitar: sin esta excepción el mapa saldría cortado en el
     PDF aunque en pantalla se viera entero. Va después a propósito. El tope en
     mm (no en vh) es para que entre en la hoja con margen. */
  .tl-imgs.completa img { max-height: 150mm; object-fit: contain; height: auto; background: transparent; }
  .tl-imgs.completa { break-inside: avoid; }
  /* ===== Crucero en papel =====
     ⚠️ La tabla NO se protege entera: un itinerario de 15 escalas es alto y
     `break-inside: avoid` lo haría saltar de hoja dejando media página en
     blanco (la lección que ya costó tres pasadas). Se protegen la ficha del
     barco y CADA FILA, que sí son cortas. El <thead> se repite solo. */
  /* La jerarquía de la cabecera se imprime igual que en pantalla. Lo único que
     hace falta es una defensa: si el navegador imprime sin fondos, la píldora
     del régimen/promo se quedaría sin su color, así que lleva borde. */
  .cru-reg { border: 1px solid var(--brand); }
  .cru-tabla { break-inside: auto; }
  /* ⚠️ micro.js abre TODOS los <details> antes de imprimir, así que sin esto
     cada cabina sacaría su galería entera en el PDF. En papel va la foto
     principal (la miniatura, un poco más grande) y nada más. */
  .cru-cab-full, .cru-cab-mas { display: none !important; }
  .cru-cab-thumb { flex: 0 0 110px; }
  /* Las tarjetas son cortas: se protegen enteras. La grilla NO (ver la lección
     de break-inside: proteger un contenedor alto fabrica el hueco). */
  .cru-cab { break-inside: avoid; }
  .cru-cabs { break-inside: auto; }
  .cru-tabla thead { display: table-header-group; }
  .cru-tabla tr, .cru-barco { break-inside: avoid; }
  .cru-tabla th { break-after: avoid; }
  /* El carrusel del hotel no tiene sentido en papel: se imprime la primera
     foto (el track recortado por overflow) y las flechas no salen. */
  .hgal-nav { display: none; }
  /* ===== Excursión en papel: layout simple y prolijo =====
     En el PDF la tarjeta sale SIEMPRE abierta (micro.js despliega todos los
     <details> antes de imprimir), así que lo que se ve es la vista ampliada.
     Se quita todo lo que es de pantalla:
       · el resumen con «…» y el «Ver más» — en papel va el texto COMPLETO, y
         el resumen además lo duplicaría;
       · la miniatura de la compacta — la misma foto ya sale grande abajo;
       · el carrusel, que en papel no se puede deslizar: pasa a portada grande
         arriba y el resto en grilla debajo. */
  .exc-resumen, .exc-mas, .exc-thumb { display: none !important; }
  .exc-sum { cursor: auto; display: block; }
  .exc-full { margin-top: 10px; }
  .hgal.exgal-car { aspect-ratio: auto; height: auto; overflow: visible; }
  .hgal.exgal-car .hgal-track { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; height: auto; overflow: visible; }
  .hgal.exgal-car .hgal-track img { flex: none; height: auto; aspect-ratio: 4 / 3; border-radius: 8px; }
  /* La portada, a lo ancho de la grilla. */
  .hgal.exgal-car .hgal-track img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .hgal-dots { display: none; }
  .exgal img { max-height: 240px; }
  details, details[open] { display: block; }
  .tl-det > summary { list-style: none; }
  .tl-sum::after { display: none; }
  .tl-det > .tl-body { display: block !important; }
  /* ⚠️ El día NO se protege como un todo. Tenerlo en `break-inside: avoid`
     era la causa del hueco: un día más alto que lo que queda de página saltaba
     ENTERO a la siguiente y dejaba media hoja en blanco. Ahora el día fluye y
     se corta donde caiga; solo se protegen las piezas CHICAS, que sí quedan
     mal partidas por la mitad. */
  /* ⚠️ Mismo error, un nivel más abajo: `.exc`, `.tl-imgs`, `.srv-box` y
     `.mc-card` TAMPOCO son chicos (llevan foto y descripción), y protegerlos
     enteros hacía saltar la ficha completa a la hoja siguiente — es lo que
     pasaba con «AUTOBUS TURÍSTICO» y con la entrada a los estudios de Harry
     Potter. Fluyen y se cortan donde caiga. */
  .tl-item, .exc, .tl-imgs, .srv-box, .mc-card { break-inside: auto; }
  /* Solo lo que de verdad es una fila corta de una o dos líneas. */
  .day-transp, .day-hotel:not(.day-hotel-confoto) { break-inside: avoid; }
  /* La tarjeta pasaje es compacta: se protege entera para no partirla al medio.
     Sombra fuera en papel. */
  .pass { break-inside: avoid; box-shadow: none; }
  /* Panel lateral: en el PDF vuelve al flujo lineal (asesor + «Sobre nosotros»
     al final, como antes). Las acciones son controles de pantalla: no se
     imprimen. */
  .mbody { display: block; padding: 0; }
  .mside { position: static; }
  .mside-actions { display: none; }
  /* Video: el iframe no se reproduce en papel; en su lugar el recuadro con el
     enlace. */
  /* Ni el iframe ni el <video> se reproducen impresos: en su lugar va el
     recuadro con el enlace, igual para el video de banco y el de YouTube. */
  .video-wrap, .video-if, .video-el { display: none !important; }
  .video-print { display: block; }
  /* Una imagen no se puede partir por la mitad, así que igual salta si no
     entra; al menos que no arrastre nada más con ella. */
  img { break-inside: avoid; }
  /* El pie iba partido: el nombre y la licencia en una hoja, el mail y las
     redes en la siguiente. */
  .mfoot { break-inside: avoid; }
  /* Un encabezado solo al pie de una hoja queda huérfano: se pega a su día. */
  .tl-sum, .tl-day, .tl-title, .mseclab, .mgrupo-h, .video-tit { break-after: avoid; }
  /* ===== Plan de pagos: RESUMEN sí, DETALLE no =====
     ⚠️ TERCER criterio sobre esto, y conviene leer los dos anteriores para no
     revertirlo sin contexto: hasta el 2026-08-02 el plan se imprimía ENTERO;
     ese día se ocultó ENTERO (un PDF que dice "saldo $ 1.200" circulando cuando
     ya está saldado confunde); desde el 2026-08-12 se imprime SOLO EL RESUMEN.
     El equilibrio: las cifras de cabecera (total acordado, ya pagado, estado) y
     la barra de avance son lo que el pasajero quiere ver en el PDF de su viaje;
     lo que envejece mal —y no va— es el DETALLE: cada pago parcial con su
     fecha y cada cuota con su vencimiento. */
  .mplan-bloque { display: none !important; }
  /* El contrato es un enlace de descarga: en papel no se puede tocar. Su nombre
     igual aparece en «Documentos del viaje», que sí se imprime (el contrato se
     elige entre los documentos ya subidos), así que no se pierde nada. */
  .mplan-contrato { display: none !important; }
  /* El resumen es corto: viaja entero, sin partirse entre hojas. La SECCIÓN, en
     cambio, fluye — protegerla entera fabricaría media hoja en blanco (la
     lección de `break-inside` que ya costó tres pasadas). */
  .mplan { break-inside: auto; }
  .mplan-resumen, .mplan-avance, .mplan-uno { break-inside: avoid; }
  /* (`.mseclab` ya lleva break-after arriba, con los demás encabezados.) */
  .mplan-cab { break-after: avoid; }
  /* La barra no anima en papel, y lleva borde por si el navegador se imprime
     sin fondos. */
  .mplan-barra { transition: none !important; border: 1px solid var(--line); }

  /* ===== Datos de los pasajeros: NO se imprimen =====
     La sección entera (el formulario, los datos personales ya cargados y el
     texto legal de protección de datos). Es un trámite de la web, no parte de
     la propuesta: en papel el formulario no se puede completar, y los datos de
     documento de cada pasajero no tienen por qué viajar en un PDF que se
     comparte y se archiva. */
  .mpas { display: none !important; }
  /* La portada es un overlay a pantalla completa: taparía la impresión.
     Y el cuerpo puede estar [hidden] si se imprime sin haber tocado «Entrar». */
  .mcover, .mcta { display: none !important; }
  .mwrap[hidden] { display: block !important; }
  /* Con @page en 0, los costados los pone el contenido. Arriba y abajo los
     ponen los espaciadores de .psheet, hoja por hoja. */
  .mwrap { padding: 0 12mm; max-width: none; }
  /* ⚠️ El PDF va sobre BLANCO. En pantalla el fondo es beige, y como el bloque
     de impresión fuerza `print-color-adjust: exact` para no perder las fotos ni
     los fondos de color, ese beige se imprimiría en todas las hojas. */
  html, body.micrositio, .mwrap { background: #fff !important; }
  /* La tabla vuelve a ser tabla SOLO al imprimir: es lo que hace que el
     navegador repita thead/tfoot en cada página y les reserve el alto. */
  /* ⚠️ `table-layout: fixed` NO es opcional: una tabla, al contrario de un div,
     se ENSANCHA para que entre su contenido. Sin esto, cualquier cosa más
     ancha que la celda (una foto, una grilla) empujaba la tabla hacia la
     derecha y el margen quedaba desparejo —más de un lado que del otro—.
     Con `fixed` la tabla respeta el ancho pedido y el contenido se ajusta. */
  .psheet { display: table; width: 100%; max-width: 100%; table-layout: fixed; border-collapse: collapse; }
  .psheet > thead { display: table-header-group; }
  .psheet > tfoot { display: table-footer-group; }
  .psheet > tbody { display: table-row-group; }
  .psheet > thead > tr, .psheet > tbody > tr, .psheet > tfoot > tr { display: table-row; }
  .psheet > thead > tr > td, .psheet > tbody > tr > td, .psheet > tfoot > tr > td {
    display: table-cell; padding: 0; width: 100%; max-width: 0; overflow-wrap: break-word;
  }
  /* Ninguna imagen puede ser más ancha que su celda. */
  .psheet img { max-width: 100%; }
  /* ⚠️ La línea que une los días era UNA sola (.tl::before, absoluta de punta
     a punta) y una caja absoluta NO puede cruzar un salto de página: se cortaba
     al terminar la primera hoja y del día 8 en adelante no había línea.
     Acá se dibuja como BORDE DE CADA DÍA, que fluye y se repite hoja por hoja.
     La geometría se conserva: el borde queda en x=5 y el texto sigue en x=24.
     El borde no admite degradado, así que va en color plano (en pantalla sigue
     siendo el degradado de siempre). */
  .tl { padding-left: 0; }
  .tl::before { display: none; }
  .tl-item {
    border-left: 1px solid var(--brand2);
    margin-left: 5px; padding-left: 18px;
    margin-bottom: 0; padding-bottom: 26px;
  }
  .tl-item:last-child { padding-bottom: 0; }
  /* El punto se recoloca por el borde nuevo: sigue centrado sobre la línea. */
  .tl-dot { left: -6px; }
  /* El logo de la agencia es un JPG con fondo blanco: sobre tarjeta blanca no
     se nota el recuadro. */
  .mc-card { background: #fff; }
  /* El margen de arriba y de abajo, repetido en TODAS las hojas. */
  .psp { display: block; height: 12mm; }
  /* El texto de la cabecera repetía el título y el cliente, que ya están en
     grande en la carátula. Queda la foto sola, como banner. */
  .mhero-c { display: none !important; }
  /* Carátula: primera hoja, centrada, y todo lo demás arranca en la siguiente. */
  .pcover {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; min-height: 80vh; break-after: page; break-inside: avoid;
    /* Fuera de la tabla .psheet: pone su propio margen de hoja. */
    padding: 12mm 10px;
  }
  .pcover-logo { max-width: 60%; max-height: 200px; object-fit: contain; margin-bottom: 40px; }
  .pcover-ag { font-family: var(--serif); font-size: 30px; font-weight: 600; margin-bottom: 40px; }
  .pcover-eyebrow {
    font-family: var(--mono); font-size: 13px; letter-spacing: .28em; text-transform: uppercase;
    color: var(--brand); margin-bottom: 18px;
  }
  .pcover-t { font-family: var(--serif); font-size: 38px; font-weight: 600; line-height: 1.15; margin: 0 0 22px; }
  .pcover-meta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
  /* El hero abre la segunda hoja: sin esto quedaba pegado al borde de arriba. */
  .mhero { break-before: auto; }
}


/* ---------- Aviso de guardado del editor (public/guardar.js) ----------
   Persistente a propósito: un fallo de guardado no puede desvanecerse solo
   como un toast mientras el vendedor mira para otro lado. */
.gv-aviso {
  position: relative;
  margin: 0 0 18px;
  padding: 16px 44px 16px 18px;
  border-radius: var(--radius);
  border: 1px solid;
  font-size: 15px;
  line-height: 1.5;
}
.gv-aviso strong { display: block; font-size: 16px; margin-bottom: 4px; }
.gv-aviso p { margin: 0; }
.gv-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.gv-warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.gv-info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.gv-x {
  position: absolute; top: 10px; right: 10px;
  width: 26px; height: 26px; line-height: 1;
  border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .06); color: inherit;
  font-size: 14px; cursor: pointer;
}
.gv-x:hover { background: rgba(0, 0, 0, .12); }
.gv-acciones { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

/* ---------- Plan de pagos: varios planes (uno por moneda) ---------- */
/* Cada plan es una tarjeta propia dentro del bloque, para que se lea como una
   cuenta separada y no como una continuación de la anterior. */
.plan-uno + .plan-uno { margin-top: 22px; padding-top: 22px; border-top: 2px solid var(--line); }
.plan-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.plan-cab .plan-titulo {
  flex: 1 1 200px; min-width: 0; font-family: var(--serif); font-size: 18px;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.plan-moneda-pill {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; font-weight: 600;
  background: var(--brand-soft); color: var(--brand); padding: 4px 9px; border-radius: 999px;
}
.plan-cuenta {
  font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--brand);
  background: var(--brand-soft); padding: 2px 8px; border-radius: 999px; margin-left: 6px;
}
.plan-nuevo { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line); }
.plan-sug { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
/* El chip multi-moneda del CRM: no se recorta ni parte el ancho de la tabla. */
.cobro-multi { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Micrositio: varios planes, cada uno con su título y su moneda. */
.mplan-intro { margin: 0 0 18px; color: var(--muted); font-size: 15px; }
.mplan-uno + .mplan-uno { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line); }
.mplan-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.mplan-titulo { font-family: var(--serif); font-size: 22px; margin: 0; font-weight: 600; }
.mplan-mon {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; font-weight: 600;
  background: var(--brand-soft); color: var(--brand); padding: 3px 9px; border-radius: 999px;
}
@media (max-width: 640px) { .mplan-titulo { font-size: 19px; } }

/* ---------- Cliente compartido con otro vendedor (drawer, solo directora) --- */
.comp-lista { list-style: none; margin: 8px 0 12px; padding: 0; }
.comp-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px;
}
.comp-nom { flex: 1 1 auto; min-width: 0; font-weight: 500; }
.comp-fecha { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.comp-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.comp-add select { flex: 1 1 180px; min-width: 0; }

/* ---------- Datos de pasajeros: confirmación de «ya enviaste» ---------- */
/* Reemplaza al formulario una vez enviado: antes se le seguía mostrando el
   formulario entero para siempre, ocupando media pantalla. */
.mpas-ok {
  background: #fff; border: 1px solid var(--line); border-left: 4px solid #16a34a;
  border-radius: var(--radius); padding: 20px 22px;
}
.mpas-ok-t { font-family: var(--serif); font-size: 21px; font-weight: 600; margin-bottom: 6px; }
.mpas-ok-sub { margin: 0 0 14px; color: var(--muted); font-size: 15px; }
.mpas-ok-lista { list-style: none; margin: 0 0 16px; padding: 0; }
.mpas-ok-item {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 9px 0; border-top: 1px solid var(--line);
}
.mpas-ok-nom { font-weight: 600; flex: 1 1 180px; min-width: 0; }
.mpas-ok-doc { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.mpas-ok-adj { font-size: 13px; color: var(--muted); }
.mpas-ok-adj.si { color: #166534; }
.mpas-corregir {
  background: none; border: 1px solid var(--line); color: var(--muted);
  padding: 8px 14px; border-radius: 999px; font: inherit; font-size: 13px; cursor: pointer;
}
.mpas-corregir:hover { border-color: var(--brand); color: var(--brand); }
.mpas-cancelar {
  background: none; border: 1px solid var(--line); color: var(--muted);
  padding: 10px 18px; border-radius: 999px; font: inherit; cursor: pointer;
}
@media (max-width: 640px) {
  .mpas-ok { padding: 16px; }
  .mpas-ok-t { font-size: 18px; }
}
/* En el PDF el bloque va entero (es corto) y sin los botones, que no se tocan. */
@media print {
  .mpas-corregir, .mpas-cancelar { display: none !important; }
  .mpas-ok { break-inside: avoid; }
}

/* ---------- Origen de la consulta y campañas ---------- */
/* Chip compacto en listados y drawers. Sin origen no se dibuja nada en los
   listados (18 filas diciendo «Sin origen» serían ruido); el filtro es el que
   sirve para encontrarlas. */
.org-chip {
  display: inline-flex; align-items: baseline; gap: 5px; vertical-align: middle;
  margin-left: 8px; padding: 2px 9px; border-radius: 999px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .03em; font-weight: 600;
  background: var(--brand-soft); color: var(--brand); white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.org-chip .org-ico { font-family: var(--sans); font-size: 11px; }
.org-extra { font-weight: 400; opacity: .85; }
.org-extra::before { content: '· '; }
.org-vacio { background: #f3f4f6; color: #6b7280; }
/* Un color por familia de origen, para reconocerlos de un vistazo. */
.org-feboda { background: #fdf2f8; color: #9d174d; }
.org-whatsapp { background: #f0fdf4; color: #166534; }
.org-instagram { background: #fdf4ff; color: #86198f; }
.org-facebook { background: #eff6ff; color: #1e40af; }
.org-web { background: #f0f9ff; color: #075985; }
.org-derivado { background: #fefce8; color: #854d0e; }
.org-vendedor { background: #fff7ed; color: #9a3412; }
.org-campana { background: #eef2ff; color: #3730a3; }
.org-bodasnet { background: #fdf2f8; color: #9d174d; }
/* El campo del formulario: el bloque extra aparece solo con su origen. */
.org-campo { margin-top: 4px; }
.org-opt { font-style: normal; font-weight: 400; color: var(--muted); font-size: 11px; }
.org-extra-box {
  margin-top: 10px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--brand-soft); border: 1px solid var(--line);
}
.org-extra-box[hidden] { display: none; }
.org-buscar { margin-bottom: 6px; }
/* Tablas de la pestaña Conversión (por origen y por campaña). */
.conv-card + .conv-card { margin-top: 18px; }

/* ============================================================
   Formulario público de consulta (circuito Bodas.net)
   ============================================================
   Lo ve una pareja que está organizando su luna de miel, casi siempre desde el
   móvil. Usa los tokens de marca de la agencia (var(--brand) etc., que llegan
   por body[data-ag]), así que se tiñe solo con los colores de cada una. */
body.cpub { background: var(--bg); }
.cpub-wrap { max-width: 680px; margin: 0 auto; padding: 0 18px 56px; }

/* Cabecera: FONDO CLARO con el logo grande como protagonista.
   ⚠️ Antes era una franja del color de la agencia (var(--brand)) con el logo
   chico encima, y NO funcionaba: el logo de Meraki es de trazos finos en verde
   agua y dorado, así que contra el turquesa se perdía por poco contraste —
   agrandarlo no alcanzaba. Sobre claro, el logo se lee a color y el turquesa
   pasa a ser ACENTO (la línea inferior y el chip del hero). */
.cpub-head {
  background: linear-gradient(180deg, #fff 0%, #fff 58%, var(--bg) 100%);
  padding: 46px 20px 34px; text-align: center; margin-bottom: 30px;
  border-bottom: 3px solid var(--brand);
}
/* El logo manda: alto grande y elástico (mínimo cómodo en móvil, tope en
   escritorio). Los dos topes van juntos a propósito — el navegador escala
   respetando la proporción para entrar en los dos, así que un logo muy
   apaisado de otra agencia tampoco desborda. */
.cpub-logo { display: block; margin: 0 auto;
  max-height: clamp(96px, 26vw, 150px); max-width: min(86%, 460px); object-fit: contain;
  /* Los logos son JPG con fondo blanco propio: `multiply` lo funde con el
     fondo claro en vez de dejar un recuadro. Mismo criterio que la tarjeta
     del asesor en el micrositio. */
  mix-blend-mode: multiply; }
/* Sin logo cargado, el nombre ocupa su lugar. ⚠️ Va en tinta oscura, NO en
   blanco: el fondo de la cabecera ahora es claro. */
.cpub-marca { color: var(--ink); font-family: var(--serif); font-size: clamp(26px, 6vw, 34px);
  font-weight: 600; line-height: 1.2; }

.cpub-hero { text-align: center; padding: 8px 0 26px; }
/* Chip «Luna de miel»: el acento de color de la marca, ahora que la cabecera
   es clara. */
.cpub-eyebrow { display: inline-block; font-family: var(--mono); font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
  color: var(--brand-ink); background: var(--brand-soft);
  border-radius: 999px; padding: 6px 15px; margin: 0 0 14px; }
.cpub-t { font-family: var(--serif); font-size: clamp(28px, 7vw, 40px); font-weight: 600;
  line-height: 1.15; margin: 0 0 12px; color: var(--ink); }
.cpub-sub { font-size: 16px; line-height: 1.65; color: #4b5563; margin: 0 auto; max-width: 30em; }

/* Secciones del formulario: tarjetas blancas separadas. */
.cpub-form { display: block; }
.cpub-sec { background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 22px 20px; margin-bottom: 16px; }
.cpub-sec-t { font-family: var(--serif); font-size: 21px; font-weight: 600; margin: 0 0 4px; color: var(--ink); }
.cpub-sec-p { font-size: 14px; color: var(--muted); margin: 0 0 16px; line-height: 1.55; }
.cpub-sec-t + .cpub-campo, .cpub-sec-t + .cpub-fila { margin-top: 16px; }

.cpub-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cpub-campo { display: block; margin-bottom: 14px; }
.cpub-lbl { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.cpub-lbl i { color: var(--brand); font-style: normal; margin-left: 3px; }
.cpub-ayuda { display: block; font-size: 12.5px; color: var(--muted); margin: -2px 0 6px; }
.cpub-campo input, .cpub-campo select, .cpub-campo textarea {
  width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 16px;
  font-family: var(--sans); color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: 11px;
}
/* 16px en los campos NO es capricho: por debajo de eso, iOS hace zoom solo al
   tocarlos y la pareja pierde de vista el formulario. */
.cpub-campo textarea { resize: vertical; line-height: 1.5; }
.cpub-campo input:focus, .cpub-campo select:focus, .cpub-campo textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
.cpub-campo.con-error input, .cpub-campo.con-error select, .cpub-campo.con-error textarea { border-color: #dc2626; }
.cpub-err { display: block; font-size: 13px; color: #b91c1c; margin-top: 6px; font-weight: 500; }
.cpub-hora[hidden] { display: none; }

.cpub-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px;
  line-height: 1.55; color: #374151; cursor: pointer; margin-top: 4px; }
.cpub-check input { flex: 0 0 auto; margin-top: 3px; width: 18px; height: 18px; accent-color: var(--brand); }
.cpub-consent { background: var(--brand-soft); border-color: var(--brand); }
.cpub-consent.con-error { border-color: #dc2626; }
.cpub-consent-txt p { margin: 0; }
.cpub-consent-txt { font-size: 13.5px; line-height: 1.55; }

.cpub-aviso { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b;
  border-radius: 12px; padding: 12px 14px; font-size: 14.5px; margin-bottom: 16px; }

.cpub-enviar { display: block; width: 100%; border: 0; border-radius: 13px;
  background: var(--brand); color: #fff; font-family: var(--sans); font-weight: 700;
  font-size: 17px; padding: 16px 20px; cursor: pointer; text-align: center;
  text-decoration: none; box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); }
.cpub-enviar:hover { filter: brightness(1.07); }
.cpub-nota { text-align: center; font-size: 13px; color: var(--muted); margin: 14px 0 0; }

/* ⚠️ HONEYPOT: fuera de la vista pero SIN display:none — algunos robots saltean
   lo que está oculto de esa forma, y la gracia es justamente que lo completen. */
.cpub-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Pantalla de gracias */
.cpub-ok { text-align: center; background: #fff; border: 1px solid var(--line);
  border-radius: 18px; padding: 40px 24px; }
.cpub-ok-ico { font-size: 46px; line-height: 1; margin-bottom: 14px; }
.cpub-ok-reunion { background: var(--brand-soft); color: var(--brand-ink); border-radius: 12px;
  padding: 14px 16px; font-size: 15px; line-height: 1.5; margin: 22px 0; }
.cpub-ok-firma { font-size: 14.5px; color: var(--muted); margin: 0 0 20px; }

/* Pie */
.cpub-foot { text-align: center; padding: 26px 18px 40px; color: var(--muted); }
.cpub-fnom { font-family: var(--serif); font-size: 18px; color: var(--ink); }
.cpub-lic { font-size: 12px; margin-top: 4px; }
.cpub-flinks { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 16px; }
.cpub-fbtn { background: #25d366; color: #fff; text-decoration: none; font-weight: 700;
  padding: 12px 22px; border-radius: 999px; font-size: 15px; }
.cpub-flink { color: var(--brand-ink); text-decoration: none; font-size: 14px; }
.cpub-flink:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .cpub-fila { grid-template-columns: 1fr; gap: 0; }
  .cpub-sec { padding: 18px 16px; border-radius: 14px; }
  .cpub-head { padding: 30px 16px 24px; margin-bottom: 22px; }
}

/* ============================================================
   Bandeja de consultas: pestañas por estado, orden y estado en la fila
   ============================================================ */
.cons-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.cons-tab { display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); text-decoration: none;
  font-size: 13.5px; font-weight: 600; }
.cons-tab:hover { border-color: var(--brand); }
.cons-tab.on { background: var(--brand); border-color: var(--brand); color: #fff; }
/* El contador: solo donde dice qué falta hacer, y nunca en cero (se esconde). */
.cons-tab-n { display: inline-block; min-width: 18px; text-align: center;
  background: var(--brand-soft); color: var(--brand-ink); border-radius: 999px;
  font-size: 11.5px; font-weight: 700; padding: 1px 6px; }
.cons-tab.on .cons-tab-n { background: rgba(255,255,255,.25); color: #fff; }
.cons-tab-n[hidden] { display: none; }

.cons-orden { font-size: 12.5px; color: var(--muted); margin: -4px 0 12px; }
.cons-ord { color: var(--brand-ink); text-decoration: none; margin-left: 8px; }
.cons-ord:hover { text-decoration: underline; }
.cons-ord.on { font-weight: 700; text-decoration: underline; }

/* Estado editable en la fila: se lee como el badge de siempre (mismo color por
   estado) pero se cambia sin abrir el drawer. */
.badge-sel { border: 0; border-radius: 999px; padding: 5px 10px; font-family: var(--sans);
  font-size: 12px; font-weight: 600; cursor: pointer; max-width: 100%;
  -webkit-appearance: none; appearance: none; }
.badge-sel:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.badge-sel:disabled { opacity: .55; cursor: progress; }

/* Reunión pedida desde el formulario público (consultas de Bodas.net). */
.chip-reunion { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .02em;
  background: var(--brand-soft); color: var(--brand-ink); border-radius: 6px; padding: 2px 6px; }
/* Ámbar cuando la reunión es hoy o ya pasó sin atender: mismo criterio de
   urgencia que el panel «Para contactar». */
.chip-reunion.urge { background: #fef3c7; color: #92400e; font-weight: 600; }
.drw-reunion .reunion-fecha { font-family: var(--serif); font-size: 18px; color: var(--ink);
  background: var(--brand-soft); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }

/* ---------- Registro de PASAJEROS (2026-08-20) ---------- */
/* El nombre del listado abre el drawer. Es un <button> (no un <a>): no navega a
   ningún lado, así que un enlace mentiría sobre lo que hace. Se pinta como el
   resto de los títulos de fila. */
.pas-lnk { background: none; border: 0; padding: 0; font: inherit; color: inherit;
  cursor: pointer; text-align: left; }
.pas-lnk:hover { color: var(--brand); text-decoration: underline; }
/* ⚠️ El documento va en mono y ENMASCARADO en el listado: el completo se ve al
   abrir el detalle (ver lib/views-pasajeros.js). */
.pas-doc { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; }
.pas-fecha { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
/* Señal de que ese documento aparece en más de una cotización: una fila, varios
   viajes. Sin esto la agrupación se lee como si faltaran filas. */
.pas-multi { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-ink); font-size: 11.5px; font-weight: 600;
  font-family: var(--mono); vertical-align: middle; }
.pas-viajes { min-width: 240px; }
.pas-viaje { display: block; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px;
  margin-bottom: 6px; text-decoration: none; background: var(--bg); }
.pas-viaje:last-child { margin-bottom: 0; }
.pas-viaje:hover { border-color: var(--brand); }
.pas-viaje-t { display: block; font-weight: 600; color: var(--ink); font-size: 13.5px; margin-bottom: 3px; }
.pas-viaje-m { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }

/* Drawer de detalle */
.pas-d-row { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pas-d-row:last-of-type { border-bottom: 0; }
.pas-d-k { flex: 0 0 42%; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); }
.pas-d-v { flex: 1 1 auto; font-size: 14.5px; color: var(--ink); font-weight: 500;
  overflow-wrap: anywhere; }
.pas-d-doc { margin-top: 12px; }

/* Descarga del registro (dirección, 2026-09-03). El aviso al lado dice QUÉ se
   lleva: un botón «Descargar» a secas no distingue «lo que veo» de «todo». */
.pas-export { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px; }
.pas-export .lib-hint { margin: 0; }

/* Corregir los datos del pasajero (dirección, 2026-09-03). Es un <details>: el
   drawer abre mostrando los datos, y el formulario está a un clic. */
[data-pas-editar] > summary { cursor: pointer; list-style: revert; }
[data-pas-editar] > summary::-webkit-details-marker { display: revert; }
.pas-edit { margin-top: 10px; }
.pas-edit .field { margin-bottom: 10px; }
.pas-edit textarea { padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px;
  font-family: var(--sans); font-size: 14.5px; color: var(--ink); background: #fff;
  width: 100%; box-sizing: border-box; }

/* «Pasajeros de sus viajes», en la ficha del cliente */
.pas-cli-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; margin-bottom: 6px;
  background: var(--bg); }
.pas-cli-nom { font-weight: 600; font-size: 14px; color: var(--ink); }
.pas-cli-doc { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.pas-cli-viaje { font-size: 12.5px; color: var(--brand); text-decoration: none; margin-left: auto; }
.pas-cli-viaje:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .pas-viajes { min-width: 0; }
  .pas-cli-viaje { margin-left: 0; flex-basis: 100%; }
}

/* ---------- Cintita de VISTA PREVIA (2026-08-20) ---------- */
/* Discreta pero inequívoca: quien mira tiene que saber que está en modo
   revisión y que esa visita NO va al contador. Va fija arriba, por encima de
   todo (la portada del micrositio es un overlay a pantalla completa con
   z-index alto, así que la cinta tiene que estar por arriba). */
.vp-cinta { position: fixed; top: 0; left: 0; right: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 7px 14px; background: #1f2937; color: #f9fafb;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em;
  text-transform: uppercase; box-shadow: 0 2px 10px rgba(0,0,0,.22); }
.vp-cinta .vp-ojo { font-size: 14px; }
.vp-cinta .vp-sep { opacity: .5; }
/* La aclaración se esconde en pantallas chicas: «Vista previa» ya se entiende
   y en un celular la línea entera no entra sin romperse. */
.vp-cinta .vp-txt { text-transform: none; letter-spacing: .02em; opacity: .82; }
@media (max-width: 520px) {
  .vp-cinta { font-size: 11.5px; padding: 6px 10px; }
  .vp-cinta .vp-sep, .vp-cinta .vp-txt { display: none; }
}
/* ⚠️ NO se imprime: es andamiaje del panel, no del PDF que recibe el cliente. */
@media print { .vp-cinta { display: none !important; } }

/* Los dos botones del enlace, uno al lado del otro y bien diferenciados */
.side-enlace-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.side-enlace-acts .btn { flex: 1 1 auto; justify-content: center; }
.cat-enlace { margin-bottom: 16px; }

/* «vía catálogo» en las métricas de apertura */
.met-via { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-ink); font-size: 11px; font-weight: 600;
  font-family: var(--mono); vertical-align: middle; }

/* ⚠️⚠️ CAMPO DE DINERO QUE NO SE ENTIENDE (2026-08-26). `public/importe.js`
   normaliza al salir del campo; cuando lo tipeado no se puede leer NO se toca
   el texto —perderlo sería peor— y se marca acá. Va en la hoja del sistema
   porque los campos de dinero están en el editor de propuestas, en el
   cotizador, en Administración y en Dirección: es una sola cosa, en un solo
   lugar. El selector lleva el atributo, así que no puede alcanzar nada más. */
input[data-money][aria-invalid="true"] {
  border-color: #dc2626;
  background: #fef2f2;
}

/* ─────────────────────────────────────────────────────────────────────────
   VER UN DOCUMENTO SIN DESCARGARLO (Ana, 2026-08-28)

   La fila dejó de ser un enlace de descarga: ahora el cuerpo abre el PDF en el
   navegador y la descarga es un botón aparte. Por eso `.doc-item` puede ser un
   <div> y el que se estira es `.doc-ver`.
   ───────────────────────────────────────────────────────────────────────── */
.doc-ver { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px;
  text-decoration: none; color: inherit; }
.doc-ver:hover .doc-n { text-decoration: underline; }