/* ═══════════════════════════════════════════════════════════════════════
   estilo-32.css · RONDA DE LIMPIEZA 1019 (auditoria de la muestra)
   Va AL FINAL de todas las hojas. Solo corrige lo medido en la auditoria;
   no cambia que se ve ni quien lo ve. Las piezas de JS que acompanan esta
   hoja viven en app-104.js (y en app-20 el Volver junto al <h1>).
   ═══════════════════════════════════════════════════════════════════════ */

/* 1 · EL VOLVER, UNA SOLA FORMA EN TODO EL SISTEMA. Antes era un recuadro gris
   de radio 10 que no hablaba el idioma de la piel nueva (pildoras, radio 24).
   Ahora es una pildora fantasma con los tokens de estilo-10/30, igual en
   recepcion, gerencia, operador y en las pantallas viejas. Va a la izquierda
   del <h1>, en su misma linea (.ohv-fila, la arma app-20). */
.ohv-fila{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;min-width:0}
.ohv-fila>h1{min-width:0;margin-top:0;margin-bottom:0}
.mh .ohv-fila{margin-bottom:4px}
.volver,.mx-atras,.ohq64-volver{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;margin:0;
  min-height:40px;padding:0 16px 0 12px;border-radius:var(--oh-pildora,999px);
  border:1px solid var(--o-linea-f,rgba(22,35,44,.16));
  background:var(--o-super,#fff);color:var(--o-acento-t,#0E5560);
  font:inherit;font-size:14px;font-weight:600;line-height:1;cursor:pointer;
  white-space:nowrap;box-shadow:none;text-decoration:none;
  transition:border-color .15s ease,color .15s ease,background .15s ease}
.volver:hover,.mx-atras:hover,.ohq64-volver:hover{border-color:var(--o-acento,#13707F);background:var(--o-super,#fff);text-decoration:none}
.volver span,.mx-atras span[aria-hidden],.ohq64-volver span{font-size:16px;line-height:1}
.volver:focus-visible,.mx-atras:focus-visible{outline:2px solid var(--oh-teal,#13707F);outline-offset:2px}
body.ohm-opera main .volver{font-size:14px;font-weight:600}
body.ohm-opera main .volver span{font-size:16px}
/* El 44 px de toque sin estirar la pildora */
.volver,.mx-atras{position:relative}
.volver::after,.mx-atras::after{content:"";position:absolute;left:0;right:0;top:-2px;bottom:-2px}
/* Mensajes: el regreso de la conversacion a la lista usa la misma pildora */
.mx-atras svg{display:none}
.mx-hcab .mx-atras{display:none}
@media (max-width:900px){.mx-hcab .mx-atras{display:inline-flex}}

/* 2 · EL MENU «MAS»: el texto de cada renglon y su encabezado al mismo nivel
   (los botones traen 12 px de relleno y los encabezados ninguno). Y las
   pantallas que el riel tiene pero la barra de abajo no (Historico,
   Complementos, Promociones) solo se listan donde la barra de abajo existe. */
.menu-p .menu-cuerpo h3{padding-left:12px}
.menu-p .menu-pie{padding-left:12px}
@media (min-width:1180px){.menu-p .oh104-ir{display:none}}

/* 3 · EL PAPEL TAPIZ: estilo-02 lo pide relativo a css/ y no existe ahi (404
   cada vez que se abre el menu). El archivo vive en la raiz publica. */
:root{--tapiz:url('/tapiz-ohos.png')}

/* 4 · EL TABLERO DEL OPERADOR EN LA MISMA LETRA QUE TODOS. estilo-18 lo dejo
   en Arial; recepcion, gerencia y propietarios ya usan el token --tipo. */
body.ohc-on{--tipo:'IBM Plex Sans',Arial,Helvetica,sans-serif;font-family:var(--tipo)}

/* 5 · TELEFONO */
@media (max-width:767px){
  /* «Por propiedad»: el nombre toma todo el ancho; las cifras debajo */
  .ohc-prow,.ohc2-prow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
  .ohc-prow .ohc-mono{flex:0 0 38px}
  .ohc-prow .ohc-pn{flex:1 1 calc(100% - 50px)}
  .ohc-prow .ohc-pc{flex:1 1 0;align-items:flex-start;min-width:0}
  .ohc-prow .ohc-pc:nth-of-type(3){margin-left:50px}

  /* El encabezado de recepcion: «Nueva reserva» como boton redondo con «+»
     para que el nombre del hotel no se corte. La etiqueta sigue en
     aria-label y title. */
  body.ohm-opera .ohtelb{width:36px;height:36px;min-height:36px;padding:0;justify-content:center;gap:0}
  body.ohm-opera .ohtelb span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  body.ohm-opera .ohtelb svg{width:20px;height:20px}

  /* Indicadores: las catorce noches caben a 390 sin franja lateral oculta */
  .ohc-barras{grid-template-columns:repeat(14,minmax(0,1fr));gap:3px;overflow-x:visible}
  .ohc-bar{min-width:0}
  .ohc-bar b,.ohc-bar span{font-size:10px;letter-spacing:-.01em;white-space:nowrap}
}

/* 6 · AIRE ABAJO: el contenido ya no termina pegado a la barra de abajo */
@media (max-width:1179px){
  body.ohm-opera,html[data-opera="1"] body.ohm-opera{padding-bottom:calc(var(--o-abajo,60px) + 1px + 24px + env(safe-area-inset-bottom))}
}

/* 7 · MENSAJES */
@media (min-width:901px){
  /* Tres columnas del mismo alto; cada una se desplaza por dentro y el cuadro
     para contestar siempre queda a la vista, abajo de la conversacion. */
  .mx-g,.mx-g:not(.mx-con){align-items:stretch;height:max(460px,calc(100dvh - 300px))}
  .mx-lista,.mx-hilo,.mx-ficha{height:100%;max-height:none;min-height:0;box-sizing:border-box}
  .mx-lista,.mx-ficha{overflow:auto}
  .mx-hilo{display:flex;flex-direction:column;overflow:hidden}
}
.mx-hilo>.mx-msgs{flex:1 1 auto;min-height:80px;overflow:auto}
.mx-hilo>.mx-comp,.mx-hilo>.mx-solo,.mx-hilo>.mx-hcab,.mx-hilo>.mx-fchica{flex:0 0 auto}
.mx-of{max-height:min(260px,36dvh);overflow:auto}
.mx-of-l{max-height:none;overflow:visible}
@media (max-width:900px){
  /* La conversacion abierta ocupa la pantalla, como en cualquier mensajero:
     los mensajes se desplazan arriba y el cuadro para contestar queda justo
     encima de la barra de abajo. */
  .mx-g.mx-con .mx-hilo{position:fixed;left:0;right:0;top:0;bottom:0;z-index:44;
    min-height:0;max-height:none;border-radius:0;border:0;box-shadow:none;
    padding-top:env(safe-area-inset-top);display:flex;flex-direction:column}
  body.ohm-opera .mx-g.mx-con .mx-hilo{bottom:calc(var(--o-abajo,60px) + 1px + env(safe-area-inset-bottom))}
  .mx-g.mx-con .mx-hilo .mx-comp{padding:10px 12px}
  .mx-g.mx-con .mx-hilo .mx-comp textarea{min-height:64px}
}