/* estilo-34 · el calendario de reservas (encargo 1012, app-106). Va despues de todas.
   Sin scroll propio, columnas flexibles, fila de dias fija con fondo solido, carriles
   dentro de la habitacion, aire abajo y el precio que no se asoma bajo la media barra. */

/* 2 · la caja deja de desplazarse: el calendario usa el scroll de la pagina */
.ohksc{overflow:visible;max-height:none;padding-bottom:96px}
@media (max-width:700px){.ohksc{padding-bottom:calc(120px + env(safe-area-inset-bottom))}}

/* 3 · columnas flexibles: 14 dias caben desde 1180 px, 7 por debajo; nunca una barra
   horizontal. La columna de cuartos se queda con su ancho. */
.ohkg{grid-template-columns:var(--ohk-lab) repeat(var(--ohk-n),minmax(0,1fr));min-width:0}
.ohkwrap{min-width:0}
.ohkwrap > *{min-width:0}

/* la fila de dias se pega debajo del encabezado de la app, con fondo solido: los
   2 px entre casillas ya no dejan ver las barras que pasan por debajo */
.ohkg .ohkd,.ohkg .ohkesq{top:var(--oh106-top,0px);z-index:4}
.ohkg .ohkesq{z-index:6}
.ohkg .ohkd::before,.ohkg .ohkesq::before{content:"";position:absolute;z-index:-1;
  inset:-2px -2px -2px -2px;background:var(--o-fondo)}
.ohkg .ohkd{position:sticky}
.ohkg .ohkd,.ohkg .ohkesq{isolation:isolate}
/* en el telefono el gesto de semana vive en la fila de dias */
.ohkg .ohkd{touch-action:pan-y}

/* la columna de cuartos ya no necesita ir pegada a la izquierda (no hay scroll
   horizontal); se queda en su lugar, debajo de la fila de dias */
.ohkg .ohkl{position:relative;left:auto}

/* 1 · el segundo carril: huecos discretos y la reserva que coincide, marcada */
.ohkg .oh106-hueco{min-height:44px;border-radius:var(--o-radio-ctl);
  background:repeating-linear-gradient(135deg,rgba(21,35,45,.035) 0 6px,transparent 6px 12px)}
.ohkg .oh106-ocupa{cursor:default;pointer-events:none;
  background:repeating-linear-gradient(135deg,rgba(190,60,60,.10) 0 6px,transparent 6px 12px)}
.ohkg .ohkbar.oh106-choca{outline:2px dashed var(--o-alarma,#B42318);outline-offset:2px;z-index:2}
.ohkg .ohkl.oh106-l{align-self:stretch}

/* 5 · el dia de salida: la media barra tapa la mitad izquierda de esa casilla y el
   precio no cabe en la otra mitad (a 1440 la columna mide ~53 px). Ahi no se pinta:
   la casilla sigue reservable y su rotulo sigue diciendo la tarifa. */
.ohkg .ohkbar.oh91-fin + .ohkcel .ohkpr{visibility:hidden}

@media (prefers-reduced-motion:reduce){.ohkg .oh106-hueco,.ohkg .oh106-ocupa{background:rgba(21,35,45,.04)}}
/* En el celular la columna de cuartos solo lleva el punto y el numero: 60 px le
   bastan y las 7 columnas de dias ganan el ancho para que el precio quepa entero. */
@media (max-width:699px){
  .ohkg{grid-template-columns:60px repeat(var(--ohk-n),minmax(0,1fr));gap:2px}
  .ohkg .ohkl{padding:0 6px}
  .ohkg .ohkesq{font-size:0;padding:0}   /* «Habitación» no cabe en 60 px: el texto queda para lectores de pantalla */
  .ohkg .ohkl.lv b{font-size:11px;line-height:1.15}
  .ohkg .ohkcel .ohkpr{font-size:10.5px;letter-spacing:-.01em}
}
/* La bandeja «Por asignar» va al lado de la rejilla solo desde 1440 px. Entre 1180 y
   1440, al lado le quitaba a los 14 dias justo el ancho que necesitan (medido a 1180:
   columnas de 28 px y 279 precios cortados); debajo, cada dia mide mas de 50. */
@media (min-width:1180px) and (max-width:1439px){.ohkwrap.conban{grid-template-columns:minmax(0,1fr)}}

/* LA COLUMNA DE CUARTOS EN GERENCIA Y OPERADOR (encargo 1012, medido a 390 en la
   muestra del operador): estilo-15 viste el numero y el punto solo bajo
   body.ohm-opera (recepcion). En el tablero de gerencia y operador (body.ohc-on) el
   numero salia como boton crudo del navegador (63 px, borde de relieve) y el punto
   de estado media 27 px: con la columna de 60 px se encimaba sobre los dias. Las
   mismas reglas, sin el ambito de recepcion y con menos peso, asi recepcion no
   cambia y las dos vistas dicen lo mismo. */
.ohkg .ohkl{overflow:hidden}
.ohkg .ohkl .ohqn{font:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:var(--o-e1,4px);min-height:44px;color:inherit;text-align:left;box-shadow:none}
.ohkg .ohkl .ohqn b{font-size:var(--o-cuerpo-f);font-weight:var(--o-fuerte);color:var(--o-texto)}
.ohkg .ohkl .ohqn:focus-visible{outline:2px solid var(--o-acento);outline-offset:2px;border-radius:var(--o-radio-ctl)}
.ohkg .ohqp{width:10px;height:10px;border-radius:999px;display:inline-block;flex:0 0 auto;
  border:1px solid var(--o-linea-f);background:var(--o-fondo)}
.ohkg .ohqp.p-ok{background:var(--o-bien);border-color:var(--o-bien)}
.ohkg .ohqp.p-su{background:var(--o-atencion);border-color:var(--o-atencion)}
.ohkg .ohqp.p-pr{background:var(--o-acento);border-color:var(--o-acento)}
.ohkg .ohqp.p-fs{border-color:var(--o-texto3);
  background:repeating-linear-gradient(135deg,var(--o-texto3) 0 2px,var(--o-fondo) 2px 4px)}
@media (max-width:699px){.ohkg .ohkl > svg{display:none}}