/* estilo-21 · Arqui, 14-oct-2026 · el calendario de recepcion (app-91).
   Textual de Eduardo: «que los colores sean mas claros de percibir, se
   confunden en los indicadores que aparecen arriba».

   LA PALETA ANTERIOR ERA DE CINCO TONOS OSCUROS Y APAGADOS (azul marino,
   morado, guinda, verde botella, cafe, ciruela): con texto blanco todos pasaban
   AA, pero entre ellos se parecian, y en un cuadrito de 10 px de la leyenda no
   se distinguian. La nueva separa por MATIZ y por LUZ a la vez, una familia
   por fuente, y usa el mismo color en claro y en nocturno para que nadie tenga
   que aprender dos:
     Booking   azul     #1F5FBF · texto blanco 6.09
     Expedia   amarillo #F2B705 · texto tinta  9.57
     Airbnb    coral    #C8304A · texto blanco 5.28
     Directa   verde    #7CC242 · texto tinta  7.71   (Google igual: es Directa)
     Central   morado   #7B3FBF · texto blanco 6.35
     Recepcion grafito  #44505C · texto blanco 8.2
     Agencias  cafe     #8A5A2B · texto blanco 5.87   (Despegar, Agoda... igual)
   Recepcion deja el teal del acento: era primo del azul de Booking y del verde
   de Directa, y eran justo los que se confundian.
   Los selectores llevan «html» delante para ganarle a estilo-16 sin !important. */

html body.ohm-opera .ohkg .ohkbar.ohq64-booking{background:#1F5FBF;color:#fff;box-shadow:none}
html body.ohm-opera .ohkg .ohkbar.ohq64-expedia{background:#F2B705;color:#1A1A1A;box-shadow:none}
html body.ohm-opera .ohkg .ohkbar.ohq64-airbnb{background:#C8304A;color:#fff;box-shadow:none}
html body.ohm-opera .ohkg .ohkbar.ohq64-directo,
html body.ohm-opera .ohkg .ohkbar.ohq64-google{background:#7CC242;color:#14210B;box-shadow:none}
html body.ohm-opera .ohkg .ohkbar.ohq64-central{background:#7B3FBF;color:#fff;box-shadow:none}
html body.ohm-opera .ohkg .ohkbar.ohq64-recepcion{background:#44505C;color:#fff;box-shadow:none}
html body.ohm-opera .ohkg .ohkbar.ohq64-agencia,
html body.ohm-opera .ohkg .ohkbar.ohq64-despegar,
html body.ohm-opera .ohkg .ohkbar.ohq64-pricetravel,
html body.ohm-opera .ohkg .ohkbar.ohq64-agoda,
html body.ohm-opera .ohkg .ohkbar.ohq64-trip_com,
html body.ohm-opera .ohkg .ohkbar.ohq64-hotelbeds{background:#8A5A2B;color:#fff;box-shadow:none}
/* En nocturno el grafito se pierde contra el fondo: un filo claro lo separa. */
@media(prefers-color-scheme:dark){
  :where(html:not(.oh-dia)) body.ohm-opera .ohkg .ohkbar.ohq64-recepcion{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
}
:where(html.oh-noche) body.ohm-opera .ohkg .ohkbar.ohq64-recepcion{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}

/* Los cuadritos de la leyenda: mas grandes y del mismo color que la barra. */
html .oh91lg i{width:16px;height:12px;border-radius:4px;flex:0 0 auto}
html .oh91lg i.ohq64-booking{background:#1F5FBF}
html .oh91lg i.ohq64-expedia{background:#F2B705}
html .oh91lg i.ohq64-airbnb{background:#C8304A}
html .oh91lg i.ohq64-directo,html .oh91lg i.ohq64-google{background:#7CC242}
html .oh91lg i.ohq64-central{background:#7B3FBF}
html .oh91lg i.ohq64-recepcion{background:#44505C}
html .oh91lg i.ohq64-agencia,html .oh91lg i.ohq64-despegar,html .oh91lg i.ohq64-pricetravel,
html .oh91lg i.ohq64-agoda,html .oh91lg i.ohq64-trip_com,html .oh91lg i.ohq64-hotelbeds{background:#8A5A2B}
@media(prefers-color-scheme:dark){
  :where(html:not(.oh-dia)) .oh91lg i.ohq64-recepcion{box-shadow:0 0 0 1px rgba(255,255,255,.45)}
}
:where(html.oh-noche) .oh91lg i.ohq64-recepcion{box-shadow:0 0 0 1px rgba(255,255,255,.45)}

/* La leyenda queda fuera de la caja que se desplaza, en una sola fila que se
   acomoda: en el telefono baja a dos o tres renglones, pero nunca se esconde. */
.oh91lg{margin:0 0 var(--o-e2);row-gap:var(--o-e1)}
.oh91lg .ohq64lg-i{font-weight:var(--o-fuerte);color:var(--o-texto)}
.oh91lg .ohq64lg-v.quieto{opacity:.45;cursor:default;text-decoration:none}

/* La barra a medio dia. El porcentaje de un margen en una rejilla se mide
   contra el ancho del area de la barra, que son --oh91-sp dias: 50% entre los
   dias es medio dia. */
body.ohm-opera .ohkg .ohkbar.oh91-ini{margin-left:calc(50% / var(--oh91-sp,1))}
body.ohm-opera .ohkg .ohkbar.oh91-fin{margin-right:calc(-50% / var(--oh91-sp,1))}
body.ohm-opera .ohkg .ohkbar{z-index:1}

/* «Sin cupo» es una casilla, no una barra: su cuadrito se dibuja como la
   casilla (fondo rosado y filo rojo) para no confundirse con el coral de
   Airbnb. Y «Bloqueada» lleva el mismo rayado que la barra de un bloqueo. */
html .oh91lg i.ohq64-cero{background:rgba(190,60,60,.16);box-shadow:inset 0 0 0 1.5px var(--o-alarma)}
html .oh91lg i.ohq64-bloqueo{background-color:var(--sand,#D9D9D9);
  background-image:repeating-linear-gradient(45deg,rgba(22,40,50,.35) 0 2px,rgba(0,0,0,0) 2px 4px)}

/* LA CASILLA DEL DIA DE LLEGADA SIEMPRE SE VE (Eduardo, 19-oct-2026). Una reserva
   que llega ese dia empieza a medio dia, y la mitad izquierda de su casilla quedaba
   vacia: el calendario parecia roto justo en «hoy». La casilla se dibuja como una
   sombra de la propia barra recorrida a la izquierda exactamente lo que la barra se
   recorre (su margen de medio dia), asi que queda debajo de la reserva y con su misma
   altura y esquinas. Las barras ganan una sombra suave para leerse ENCIMA del dia. */
body.ohm-opera .ohkg .ohkbar{
  --oh92-m:calc((var(--oh91-sp,1) * var(--ohk-d,78px) + (var(--oh91-sp,1) - 1) * 2px) / (2 * var(--oh91-sp,1)));
  --oh92-cel:var(--o-super);
  --oh92-som:0 1px 2px rgba(15,30,40,.16),0 3px 8px rgba(15,30,40,.10);
  box-shadow:var(--oh92-som)}
body.ohm-opera .ohkg .ohkbar.oh92-fs{--oh92-cel:var(--o-fondo)}
body.ohm-opera .ohkg .ohkbar.oh91-ini{
  box-shadow:calc(-1 * var(--oh92-m)) 0 0 0 var(--oh92-cel),var(--oh92-som)}
/* Hoy conserva su linea de acento a la izquierda de la casilla, como las demas. */
body.ohm-opera .ohkg .ohkbar.oh91-ini.oh92-hoy{
  box-shadow:calc(2px - var(--oh92-m)) 0 0 0 var(--oh92-cel),
    calc(-1 * var(--oh92-m)) 0 0 0 var(--o-acento),var(--oh92-som)}

/* La lista del mes cede ancho en el telefono en lugar de salirse de la pantalla. */
.ohkbar2 .ohkmes{min-width:0;max-width:100%}
/* En el telefono no caben en una fila: Hoy y Bloquear arriba, el mes debajo a todo lo
   ancho. Antes la lista se encimaba sobre «Bloquear» y lo tapaba. */
@media (max-width:600px){
  .ohkbar2{flex-wrap:wrap;row-gap:var(--o-e2)}
  .ohkbar2 .ohkder{order:1;margin-left:auto}
  .ohkbar2 > .ohf-n{display:none}
  .ohkbar2 .ohkmes{order:3;flex:1 1 calc(100% - 60px)}
}