/* Calendario de rango — Sendero del Sol (29/10/2026). Va con js/calendario.js.
   Usa los tokens de estilo.css (--cal, --cal-2, --tinta, --tinta-2, --parra, --hilera, --linea, --radio, --display),
   con respaldo por si una página no los trae. */

/* ---- el campo: un botón con la fecha legible encima del input real (que queda oculto, pero se envía) -------- */
.cal-etiqueta { position: relative; }
.cal-oculto {
  position: absolute !important; left: 0; bottom: 0; width: 1px !important; height: 1px !important;
  opacity: 0; pointer-events: none; overflow: hidden; margin: 0 !important; padding: 0 !important; border: 0 !important;
}
.cal-campo {
  position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: .6rem;
  min-width: 8.6em; padding: .2rem .1rem; margin: 0; cursor: pointer; text-align: left;
  font: 600 1.1rem/1.2 var(--display, 'Helvetica Neue', Arial, sans-serif); font-style: normal;
  color: #fff; background: transparent; border: 0; border-bottom: 1.5px solid rgba(255,255,255,.6); border-radius: 0;
  -webkit-tap-highlight-color: transparent; -webkit-appearance: none; appearance: none;
}
/* área de toque de 44 px aunque la línea se vea delgada */
.cal-campo::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.cal-campo .cal-ico { flex: none; opacity: .75; }
.cal-campo:hover .cal-ico { opacity: 1; }
.cal-campo:focus { outline: none; }
.cal-campo:focus-visible { outline: 3px solid var(--hilera, #91C846); outline-offset: 3px; }
.cal-campo.cal-foco, .cal-campo:focus { border-bottom-color: var(--hilera, #91C846); }
.frase-clara .cal-campo { color: var(--tinta, #151A16); border-bottom-color: var(--tinta-2, #4B544D); }
.frase-clara .cal-campo.cal-foco, .frase-clara .cal-campo:focus { border-bottom-color: var(--parra, #22362A); }
@media (max-width: 48rem) {
  .cal-campo { width: 100%; min-width: 0; font-size: 1rem; }
}

/* ---- contenedor ------------------------------------------------------------------------------------------- */
.cal[hidden] { display: none !important; }
.cal { font-family: var(--display, 'Helvetica Neue', Arial, sans-serif); color: var(--tinta, #151A16); }
.cal-hoja {
  z-index: 70; background: var(--cal, #F6F7F3); color: var(--tinta, #151A16);
  display: flex; flex-direction: column; box-sizing: border-box;
}
.cal-hoja *, .cal-hoja *::before, .cal-hoja *::after { box-sizing: border-box; }
.cal button { font-family: inherit; -webkit-tap-highlight-color: transparent; }
.cal button:focus { outline: none; }
.cal button:focus-visible { outline: 3px solid var(--hilera, #91C846); outline-offset: 2px; }

.cal-cabeza { display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem .7rem 1.25rem; }
.cal-titulo { flex: 1; margin: 0; font: 600 1rem/1.3 var(--display, sans-serif); }
.cal-estado { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
.cal-x {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--cal-2, #ECEFE8); color: var(--tinta, #151A16); font-size: 1.6rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.cal-x:hover { background: var(--linea, #D5DBD2); }

.cal-nav { display: none; }
.cal-ant, .cal-sig {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linea, #D5DBD2); cursor: pointer;
  background: transparent; color: var(--tinta, #151A16); font-size: 1.5rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.cal-ant:hover:not(:disabled), .cal-sig:hover:not(:disabled) { background: var(--cal-2, #ECEFE8); }
.cal-ant:disabled, .cal-sig:disabled { opacity: .3; cursor: default; }

.cal-sem { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;
  font: 600 .72rem/1 var(--display, sans-serif); letter-spacing: .04em; color: var(--tinta-2, #4B544D); padding: .4rem 0; }
.cal-mes-t { margin: 0 0 .35rem; font: 600 1rem/1.3 var(--display, sans-serif); text-transform: capitalize; }

.cal-grilla { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 4px; }
.cal-dia {
  position: relative; height: 46px; min-width: 44px; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer;
  color: var(--tinta, #151A16); font: 500 .95rem/1 var(--display, sans-serif); font-variant-numeric: tabular-nums;
}
.cal-dia span {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; transition: background .15s, color .15s;
}
.cal-dia:hover span { background: var(--cal-2, #ECEFE8); }
.cal-dia:focus-visible { outline: none; }
.cal-dia:focus-visible span { box-shadow: 0 0 0 3px var(--hilera, #91C846); }
.cal-hoy span { font-weight: 700; }
.cal-hoy span::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--hilera, #91C846); }
.cal-ll.cal-hoy span::after { background: #fff; }
.cal-des { color: var(--tinta-2, #4B544D); opacity: .32; cursor: default; text-decoration: line-through; text-decoration-thickness: 1px; }
.cal-des:hover span { background: transparent; }
.cal-lejos { color: var(--tinta-2, #4B544D); }

/* franja entre llegada y salida */
.cal-rango::before, .cal-con-fin::before, .cal-sa::before {
  content: ""; position: absolute; top: 2px; bottom: 2px; left: 0; right: 0; background: var(--cal-2, #ECEFE8);
  box-shadow: inset 0 1px 0 var(--linea, #D5DBD2), inset 0 -1px 0 var(--linea, #D5DBD2);
}
.cal-con-fin::before { left: 50%; }
.cal-sa::before { right: 50%; }
.cal-rango.cal-tent::before, .cal-con-fin.cal-tent::before, .cal-sa.cal-tent::before { background: transparent; box-shadow: inset 0 1px 0 var(--linea, #D5DBD2), inset 0 -1px 0 var(--linea, #D5DBD2); }
.cal-rango:hover span { background: var(--linea, #D5DBD2); }
.cal-ll span, .cal-sa:not(.cal-tent) span { background: var(--parra, #22362A) !important; color: #fff; font-weight: 700; }
.cal-sa.cal-tent span { background: transparent; box-shadow: inset 0 0 0 1.5px var(--parra, #22362A); }

.cal-pie { display: flex; align-items: center; gap: 1rem; padding: .8rem 1.25rem; border-top: 1px solid var(--linea, #D5DBD2); background: var(--cal, #F6F7F3); }
.cal-aviso { flex: 1; margin: 0; font: 500 .85rem/1.35 var(--display, sans-serif); color: var(--tinta-2, #4B544D); }
.cal-ok { min-height: 44px; min-width: 7.5rem; }
.cal-ok:disabled { opacity: .45; cursor: default; }
.cal-ok:disabled:hover { background: var(--hilera, #91C846); }

/* ---- celular: hoja que sube desde abajo, todos los meses en scroll vertical ---------------------------------- */
.cal-movil .cal-fondo {
  position: fixed; inset: 0; z-index: 69; background: rgba(14, 20, 16, .5);
  opacity: 0; transition: opacity .28s ease;
}
.cal-movil .cal-hoja {
  position: fixed; left: 0; right: 0; bottom: 0; height: 92vh; height: 92dvh; max-height: 92vh;
  border-radius: var(--radio, 18px) var(--radio, 18px) 0 0; box-shadow: 0 -12px 40px rgba(14, 20, 16, .22);
  transform: translateY(100%); transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.cal-movil.cal-abierto .cal-fondo { opacity: 1; }
.cal-movil.cal-abierto .cal-hoja { transform: none; }
.cal-movil .cal-cabeza { border-bottom: 1px solid var(--linea, #D5DBD2); }
.cal-movil .cal-sem-fija { padding: .55rem 1rem; border-bottom: 1px solid var(--linea, #D5DBD2); background: var(--cal, #F6F7F3); }
.cal-movil .cal-mes .cal-sem { display: none; }
.cal-movil .cal-meses { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: .6rem 1rem 1.5rem; }
.cal-movil .cal-mes { padding-top: .9rem; }
.cal-movil .cal-mes + .cal-mes { margin-top: .6rem; }
.cal-movil .cal-dia { min-width: 0; height: 48px; }
.cal-movil .cal-pie { padding-bottom: calc(.8rem + env(safe-area-inset-bottom, 0px)); }
.cal-movil .cal-ok { flex: none; min-width: 9rem; }
html.cal-bloqueo, html.cal-bloqueo body { overflow: hidden; }

/* ---- PC: panel flotante bajo el formulario, 2 meses lado a lado ---------------------------------------------- */
.cal-pc .cal-fondo { display: none; }
.cal-pc .cal-hoja {
  position: absolute; width: 42rem; max-width: calc(100vw - 32px);
  border: 1px solid var(--linea, #D5DBD2); border-radius: var(--radio, 18px);
  box-shadow: 0 24px 60px rgba(14, 20, 16, .22), 0 2px 8px rgba(14, 20, 16, .08);
  opacity: 0; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease;
}
.cal-pc.cal-abierto .cal-hoja { opacity: 1; transform: none; }
.cal-pc .cal-sem-fija { display: none; }
.cal-pc .cal-cabeza { padding-bottom: .2rem; }
.cal-pc .cal-x { width: 40px; height: 40px; font-size: 1.4rem; background: transparent; }
.cal-pc .cal-x:hover { background: var(--cal-2, #ECEFE8); }
.cal-pc .cal-nav {
  display: flex; justify-content: space-between; position: absolute; left: .9rem; right: .9rem; top: 3.55rem; pointer-events: none;
}
.cal-pc .cal-nav button { pointer-events: auto; }
.cal-pc .cal-meses { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding: .5rem 1.25rem 1rem; }
.cal-pc .cal-mes-t { text-align: center; line-height: 44px; margin: 0; }
.cal-pc .cal-mes .cal-sem { padding: .2rem 0 .5rem; }

@media (prefers-reduced-motion: reduce) {
  .cal-movil .cal-fondo, .cal-movil .cal-hoja, .cal-pc .cal-hoja, .cal-dia span { transition: none !important; }
}