/* Componentes compartidos Sitio ↔ Apps (reuse-first). El odómetro (js/odometro.js, núcleo) trae sus estilos en
   apps-base.css, que el Sitio no carga (sus .btn/.tarjeta son de las apps): aquí va la misma pieza para el Sitio. */
.odo{display:inline-flex;align-items:flex-start;font-variant-numeric:lining-nums tabular-nums;line-height:1}
.od-d{display:inline-block;height:1em;overflow:hidden}
.od-strip{display:flex;flex-direction:column;will-change:transform}
.od-strip span{display:block;height:1em;line-height:1}
.od-comma,.od-cur,.od-suf{display:inline-block;line-height:1}
.odo-sitio .od-d,.odo-sitio .od-strip span{height:1em;line-height:1}

/* ---------- Calendario de disponibilidad (js/calendario.js): reserva, Ventas, Concierge y Admin ---------- */
.cal-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.cal-mes{margin:0;font-family:var(--sans);font-size:1.0625rem;font-weight:800}
.cal-mes::first-letter,.detalle-fecha::first-letter{text-transform:uppercase}
.cal-nav{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--linea);background:var(--superficie);color:var(--tinta);font-size:1.5rem;cursor:pointer}
.cal-nav:disabled{opacity:.35;cursor:default}
.cal-sem,.cal-rejilla{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal-sem span{text-align:center;font-size:.8125rem;font-weight:700;color:var(--tinta-2);text-transform:capitalize;padding:4px 0}
.cal-dia{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:48px;padding:4px 2px;border-radius:var(--radio-chico);border:1px solid var(--linea);background:var(--superficie);color:var(--tinta);cursor:pointer;font:inherit;min-width:0;transition:border-color var(--dur-rapida) var(--curva),background var(--dur-rapida) var(--curva)}
.cal-dia:hover{border-color:var(--marca)}
.cal-n{font-weight:800;font-size:.9375rem;line-height:1.1}
.cal-p,.cal-s{display:none;font-size:.75rem;line-height:1.1;color:var(--tinta-2);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-punto{display:block;width:6px;height:6px;border-radius:50%;background:var(--ok)}
.cal-dia.nivel-alto .cal-punto,.leyenda .nivel-alto{background:var(--acento)}
.cal-dia.nivel-pocos .cal-punto,.leyenda .nivel-pocos{background:var(--aviso)}
.cal-dia.no{background:transparent;border-style:dashed;color:var(--tinta-2);cursor:not-allowed}
.cal-dia.no .cal-n{text-decoration:line-through;font-weight:600}
.cal-dia.no .cal-punto,.leyenda .no{background:var(--linea)}
.cal-dia.elegido{background:var(--marca);border-color:var(--marca);color:var(--sobre-marca)}
.cal-dia.elegido .cal-p,.cal-dia.elegido .cal-s{color:var(--sobre-marca)}
.cal-dia.elegido .cal-punto{background:var(--sobre-marca)}
.cal-vacio{min-height:48px}
@media (min-width:640px){.cal-dia{min-height:64px}.cal-p,.cal-s{display:block}.cal-dia .cal-punto{position:absolute;top:6px;right:6px}}
.leyenda{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:var(--t-chico);color:var(--tinta-2)}
.leyenda li{display:flex;align-items:center;gap:6px}
.leyenda .cal-punto{width:10px;height:10px;flex:none}
.leyenda .nivel-base{background:var(--ok)}

/* ---------- Pase de abordar (js/pase.js): confirmación del Sitio y app del Cliente ---------- */
.pase{position:relative;max-width:440px;margin:0 auto;background:var(--superficie);border-radius:24px;box-shadow:var(--sombra-alta);overflow:hidden;color:var(--tinta)}
.pase-cab{display:flex;align-items:center;gap:10px;padding:16px 18px;background:var(--marca);color:var(--sobre-marca)}
.pase-simbolo{width:30px;height:30px;flex:none}
.pase-simbolo svg,.pase-vela svg{width:100%;height:100%;display:block}
.pase-marca{font-family:var(--display);font-size:1.2rem;font-weight:600;white-space:nowrap}
.pase-tit{margin-left:auto;font-size:.8125rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.pase-demo{padding:2px 8px;border-radius:999px;background:var(--acento);color:var(--sobre-acento);font-size:.75rem;font-weight:800}
.pase-ruta{display:flex;align-items:center;gap:10px;padding:18px 18px 4px}
.pase-puerto{font-family:var(--display);font-size:1.9rem;font-weight:600;color:var(--marca-oscura)}
.pase-linea{position:relative;flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--linea) 0 8px,transparent 8px 14px)}
.pase-vela{position:absolute;left:0;top:-22px;width:30px;height:30px;margin-left:-15px;color:var(--acento);display:block}
.pase-producto{margin:4px 18px 10px;font-family:var(--display);font-size:1.75rem;font-weight:600;line-height:1.1}
.pase-datos{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin:0;padding:0 18px}
.pase-datos div{min-width:0}
.pase-datos .ancho{grid-column:1/-1}
.pase-datos dt{font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-2)}
.pase-datos dd{margin:2px 0 0;font-weight:700}
.pase-antes{margin:12px 18px 0;padding:8px 12px;border-radius:var(--radio-chico);background:var(--acento-suave);font-size:var(--t-chico);font-weight:700}
.pase-corte{position:relative;height:28px;margin-top:10px;background:radial-gradient(circle at 0 50%,var(--fondo) 13px,transparent 14px),radial-gradient(circle at 100% 50%,var(--fondo) 13px,transparent 14px)}
.pase-corte::after{content:"";position:absolute;left:22px;right:22px;top:50%;border-top:2px dashed var(--linea)}
.pase-pie{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:4px 18px 20px}
.pase-qr{width:138px;height:138px}
.qr{display:block;width:100%;height:100%}
.qr-fondo{fill:var(--superficie)}
.qr-mod{fill:var(--tinta)}
.pase-codigo{display:flex;flex-direction:column;gap:2px;min-width:0}
.pase-codigo small{color:var(--tinta-2);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-top:6px}
.pase-codigo b{font-size:1.25rem;letter-spacing:.06em;overflow-wrap:anywhere}
.pase-estado{align-self:flex-start;margin-top:4px;padding:2px 10px;border-radius:999px;background:color-mix(in srgb,var(--ok) 14%,var(--superficie));color:color-mix(in srgb,var(--ok) 65%,var(--tinta));font-size:.8125rem;font-weight:800}
@media (max-width:360px){.pase-pie{grid-template-columns:1fr;justify-items:center;text-align:center}.pase-codigo{align-items:center}.pase-estado{align-self:center}}

/* Cormorant trae numerales de estilo antiguo: en cifras se usan los alineados (se leen como datos, no como prosa). */
.pase-puerto,.pase-producto,.riel-cifras b,.pago-monto .importe,.recibo-odo{font-variant-numeric:lining-nums}