/* estilo-20 · EL TABLERO DEL OPERADOR, RONDA 2 (app-88) · 14-oct-2026
   Resumen armado de las reservas y el modulo Ventas. Todo con prefijo .ohc2-
   o colgado de body.ohc-on: recepcion y gerencia no lo prenden nunca. */

/* Los encabezados de modulo que no son .mh (Reservas, Complementos) quedan a la
   misma altura y con el mismo tamano que los demas modulos del tablero. */
body.ohc-on main .ohcab{margin-top:22px}
body.ohc-on main .ohcab h1{font-size:26px;line-height:1.15;color:var(--navy-t,var(--navy))}
@media(min-width:768px){body.ohc-on main .ohcab h1{font-size:30px}}
@media(min-width:1024px){body.ohc-on main .ohcab{margin-top:26px}body.ohc-on main .ohcab h1{font-size:32px}}
body.ohc-on main .mh.ohc2-sinv{display:block}

/* Botones y filas */
.ohc2-ir{margin-top:20px}
.ohc-bs.ohc2-mini{min-height:38px;padding:0 16px;font-size:14px;flex:0 0 auto}
.ohc2-alerta{color:#8A5A00}

/* Las listas de huespedes */
.ohc2-gl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ohc2-gl li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;
  border-bottom:1px solid rgba(217,217,217,.5)}
.ohc2-gl li:last-child{border-bottom:0}
.ohc2-gn{display:flex;flex-direction:column;gap:2px;min-width:0}
.ohc2-gn b{font-size:15px;color:var(--navy-t,var(--navy));overflow-wrap:anywhere}
.ohc2-gn small{font-size:13px;color:var(--ink2);line-height:1.4}
.ohc2-hab{flex:0 0 auto;font-size:13px;font-weight:700;color:var(--navy-t,var(--navy));padding:4px 10px;border-radius:999px;
  border:1px solid var(--sand);white-space:nowrap}
.ohc2-hab.ohc2-falta{color:#8A5A00;border-color:#E2C38A;background:#FBF4E6}
.ohc2-mas{font-size:13px!important;color:#5D6A73!important}
.ohc2-at .ohc-crow{align-items:center}

/* Por propiedad del Resumen: en telefono, «Esta noche» y «Atender» */
@media(max-width:767px){
  .ohc2-prow .ohc-pc:nth-of-type(4),.ohc2-prow .ohc-pc:nth-of-type(5){display:none}
  .ohc2-prow .ohc-pc:nth-of-type(6){display:flex}
}

/* Ventas: en telefono cada renglon es una tarjeta (nombre arriba, numeros abajo
   con su etiqueta); desde 768 es un renglon y las etiquetas van una vez arriba. */
.ohc2-dos{display:grid;grid-template-columns:minmax(0,1fr);gap:0 20px}
@media(min-width:1280px){.ohc2-dos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ohc2-vrow{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.ohc2-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ohc2-nums span{display:flex;flex-direction:column;gap:2px}
.ohc2-nums small{font-size:11px;color:#5D6A73;text-transform:uppercase;letter-spacing:.06em}
.ohc2-nums b{font-size:16px;color:var(--navy-t,var(--navy));font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ohc2-th{display:none}
@media(min-width:768px){
  .ohc2-vrow,.ohc2-th{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px}
  .ohc2-nums,.ohc2-th>span:last-child{display:grid;grid-template-columns:70px 70px 116px;gap:8px}
  .ohc2-nums span{align-items:flex-end}
  .ohc2-nums small{display:none}
  .ohc2-th{display:grid;padding:0 0 8px;border-bottom:1px solid var(--sand)}
  .ohc2-th>span:last-child span{font-size:11px;color:#5D6A73;text-transform:uppercase;letter-spacing:.06em;text-align:right}
}
.ohc2-pbtn{display:block;width:100%;background:transparent;border:0;padding:0;font:inherit;text-align:left;cursor:pointer;
  border-bottom:1px solid rgba(217,217,217,.5)}
.ohc2-pbtn:last-child{border-bottom:0}
.ohc2-pbtn .ohc-crow{border-bottom:0}
.ohc2-pbtn:hover .ohc-cn b{text-decoration:underline}
.ohc2-pbtn:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:8px}

/* Lo ya vendido por mes de estancia: tres tarjetas, se deslizan de lado en telefono */
.ohc2-meses{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:12px;overflow-x:auto;padding-bottom:2px}
.ohc2-mes{border:1px solid var(--sand);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.ohc2-mes>b{font-size:15px;color:var(--navy-t,var(--navy))}
.ohc2-mes span{display:flex;flex-direction:column;gap:2px}
.ohc2-mes span small{font-size:11px;color:#5D6A73;text-transform:uppercase;letter-spacing:.06em}
.ohc2-mes em{font-style:normal;font-size:22px;font-weight:700;color:var(--navy-t,var(--navy));font-variant-numeric:tabular-nums}
.ohc2-sinm{font-size:12px;color:#8A5A00}