/* Tourevo Portal Cliente · CSS mínimo · Tailwind via CDN hace el resto. */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

*:focus-visible {
  outline: 2px solid rgb(52 211 153 / 0.55);
  outline-offset: 2px;
  border-radius: 6px;
}
input:focus-visible, textarea:focus-visible, button:focus-visible { outline: none; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.16); }

/* Language switcher (details/summary nativo + chevron rotation) */
.lang-switch > summary { list-style: none; }
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch[open] > summary .lang-switch-chev { transform: rotate(180deg); }
.lang-switch-chev { transition: transform .15s; }

/* Navegación de secciones · en móvil scrollea al costado.
   La barra de scroll se oculta a propósito: el corte de la última pestaña ya
   avisa que hay más, y una barra gris cruzando la nav se ve como un error. */
.nav-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.nav-scroll::-webkit-scrollbar { display: none; }

/* Se difumina el borde derecho mientras quede nav sin ver. Es la única pista
   de que hay más secciones cuando no entran en pantalla. */
.nav-fade { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }

/* De sm para arriba la nav NO scrollea: envuelve.
   Antes acá sólo se quitaba el difuminado, dando por hecho que en pantalla
   grande entraba todo. No entraba: seis secciones miden unos 774 px y el
   contenedor tiene 768, así que la última quedaba cortada — sin difuminado que
   avisara y sin barra de scroll (la ocultamos a propósito más arriba). O sea
   invisible Y fuera de alcance. Y la última es «Pagos».
   Envolver no puede fallar: no depende de cuánto mida cada etiqueta, así que
   tampoco se rompe cuando el mismo texto es más largo en otro idioma. */
@media (min-width: 640px) {
  .nav-fade { -webkit-mask-image: none; mask-image: none; }
  .nav-scroll { overflow-x: visible; }
  .nav-scroll > ul { flex-wrap: wrap; row-gap: .25rem; }
}

/* Markdown del body del tour · estilo más cálido que el admin */
/* El tope de lectura NO es decorativo. El portal ahora usa el ancho de la
   pantalla —hasta 1560px— y eso es bueno para el calendario y para las fichas
   de hotel, que son grillas. Pero la narración del día es prosa: a 1400px de
   ancho el ojo pierde el renglón al volver a la izquierda y el cliente deja de
   leer justo lo que más trabajo nos costó escribir. 72ch la deja en la medida
   de un libro, sin achicar nada de lo que sí gana con el ancho. */
.markdown { line-height: 1.75; color: #cbd5e1; max-width: 72ch; }
.markdown p { margin: .85em 0; }
.markdown h1, .markdown h2, .markdown h3, .markdown h4 {
  color: #f1f5f9;
  font-family: 'Fraunces', Georgia, serif;
  margin: 1.6em 0 .6em;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.markdown h1 { font-size: 1.6rem; }
.markdown h2 { font-size: 1.3rem; padding-top: .6em; border-top: 1px solid rgba(255,255,255,.05); }
.markdown h2:first-child { border-top: none; padding-top: 0; }
.markdown h3 { font-size: 1.15rem; color: #6ee7b7; }
.markdown h4 { font-size: 1rem; }
.markdown strong { color: #f1f5f9; font-weight: 600; }
.markdown em { color: #e2e8f0; font-style: italic; }
.markdown ul, .markdown ol { padding-left: 1.5em; margin: .85em 0; }
.markdown ul { list-style: disc; }
.markdown ol { list-style: decimal; }
.markdown li { margin: .3em 0; }
.markdown li::marker { color: #34d399; }
.markdown hr { border: 0; border-top: 1px dashed rgba(255,255,255,.1); margin: 1.6em 0; }
.markdown blockquote {
  border-left: 3px solid #10b981;
  padding-left: 1em;
  margin: 1.2em 0;
  color: #a7f3d0;
  font-style: italic;
}

/* Print: imprimir la propuesta limpia */
@media print {
  header nav, footer, form, .no-print { display: none !important; }
  body { background: white !important; color: #0f172a !important; }
  .markdown { color: #1e293b !important; }
  .markdown h1, .markdown h2, .markdown h3 { color: #0f172a !important; }
  section { background: white !important; border: 1px solid #e2e8f0 !important; color: #1e293b !important; page-break-inside: avoid; }
}

/* ══ CALENDARIO · GEMELO ══════════════════════════════════════════════════
   Este bloque es copia exacta entre admin/assets/app.css y c/assets/app.css.
   Lo vigila admin/tests/gemelos-tests.php · si tocás uno, tocá el otro.

   EL PROBLEMA EN CELULAR

   La grilla es de escritorio: una columna por día, mínimo 148 px. Con once
   días eso da 1.069 px metidos en una pantalla de 390 — dos días a la vez,
   679 px de scroll lateral, los títulos cortados contra el borde de la
   columna, y el eje de horas yéndose con el dedo. Al tercer día de swipe ya
   no sabés si esa barra son las 08:00 o las 15:00.

   QUÉ HACE ACÁ

   Un día por pantalla, con el eje de horas clavado a la izquierda. Es lo que
   hace cualquier agenda en el teléfono, y por un motivo: comparar días de
   costado es una tarea de escritorio; en el teléfono lo que se mira es la
   FORMA de un día — qué hay, cuánto dura, qué queda pegado a qué.

   El ancho de la columna sale de `100cqw`, el ancho real del marco, y no de
   `100vw` menos un número inventado: así no hay que adivinar padding y sigue
   valiendo si el contenedor cambia. Va detrás de @supports porque si el
   navegador no entiende `cqw` la plantilla entera quedaría inválida y la
   grilla se rompe: sin soporte, queda el scroll de costado de siempre.
   Falla como antes, nunca peor.                                            */

.tv-cal-marco { container-type: inline-size; }

.tv-cal {
  --tv-eje: 62px;
  --tv-col: minmax(148px, 1fr);
  grid-template-columns: var(--tv-eje) repeat(var(--tv-dias, 1), var(--tv-col));
  min-width: 100%;
}

/* El eje de horas no se va con el dedo · es la única referencia que vuelve
   legible un bloque cuando ya scrolleaste tres días. Es un riel a propósito:
   fondo sólido y borde, en vez de fingir que no está. */
.tv-cal-eje {
  position: sticky;
  left: 0;
  z-index: 15;
  background: #060c18;
}
.tv-cal-eje--horas { box-shadow: 1px 0 0 rgb(255 255 255 / .08); }

@supports (width: 1cqw) {
  @media (max-width: 640px) {
    .tv-cal {
      --tv-eje: 46px;
      --tv-col: calc(100cqw - var(--tv-eje));
    }

    /* Que el dedo caiga en un día, no entre dos. */
    .tv-cal-scroll {
      scroll-snap-type: x mandatory;
      scroll-padding-left: var(--tv-eje, 46px);
      overscroll-behavior-x: contain;
    }
    .tv-cal-dia { scroll-snap-align: start; }
  }
}

/* La tira de días · con once días, llegar al último a puro swipe son diez
   gestos. Sólo en celular: en escritorio se ven todos juntos y sobra. */
.tv-cal-tira {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.tv-cal-tira::-webkit-scrollbar { display: none; }
.tv-cal-tira a {
  flex: 0 0 auto;
  scroll-margin-left: 12px;
  border-radius: 8px;
  border: 1px solid rgb(255 255 255 / .10);
  background: rgb(255 255 255 / .04);
  padding: 5px 9px;
  font-size: 11px;
  line-height: 1.25;
  color: #cbd5e1;
  text-align: center;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.tv-cal-tira a:hover { background: rgb(255 255 255 / .09); border-color: rgb(255 255 255 / .20); }
.tv-cal-tira a b { display: block; font-weight: 600; color: #fff; }
.tv-cal-tira a[data-hoy] { border-color: rgb(52 211 153 / .45); background: rgb(52 211 153 / .12); }
.tv-cal-tira a[data-hoy] b { color: #6ee7b7; }

@media (prefers-reduced-motion: reduce) {
  .tv-cal-scroll { scroll-behavior: auto; }
}
/* ══ FIN CALENDARIO · GEMELO ═════════════════════════════════════════════ */