/* Fase 9.3 — CSS verbatim de los bloques de estilo de Pages/HotelManager/Componentes/PageCheckInOut.razor. Igual que hoy, es global mientras el componente está en pantalla:
   se enlaza con <link> donde estaba el bloque. Cambios: @@ → @ y capas D-51. */
.cio-cod { font-family: var(--hv-serif); color: var(--hot-petroleo); }
.cio-info { display: flex; align-items: center; gap: .4rem; margin: .6rem 0 0; font-size: .84rem; color: var(--hot-petroleo); }
.cio-bloque { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--hot-border); }
.cio-bloque-t { display: flex; align-items: center; gap: .5rem; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--hot-noche); margin-bottom: .7rem; }
.cio-num { width: 22px; height: 22px; border-radius: 50%; background: var(--hot-petroleo); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; }
.cio-huesped { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem 1rem; margin-bottom: 1rem; }
.cio-huesped > div { padding: .6rem .8rem; background: #F6F4EF; border-radius: 10px; font-size: .88rem; min-width: 0; }
.cio-lbl { display: block; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--hot-muted); font-weight: 700; margin-bottom: .2rem; }
.cio-saldo { display: flex; align-items: baseline; justify-content: flex-end; gap: .8rem; margin-top: .8rem; flex-wrap: wrap; }
.cio-saldo .cio-lbl { display: inline; margin: 0 0 0 1rem; }
.cio-saldo-val { font-family: var(--hv-serif); font-size: 1.6rem; font-weight: 700; color: var(--hot-noche); }
.cio-saldo-sec { font-family: var(--hv-serif); font-size: 1.1rem; font-weight: 700; color: var(--hot-muted); }
.cio-saldo-inline { font-family: var(--hv-serif); font-size: 1.1rem; color: var(--hot-rojo); }
.cio-resumen-tarifa { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: .6rem; padding: .55rem .9rem; background: #F6F4EF; border-radius: 10px; font-size: .84rem; }
.cio-resumen-tarifa i { color: var(--hot-petroleo); margin-right: .3rem; }
.cio-total { margin-left: auto; }
.cio-foto { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.cio-huespedes td input.cc-select { min-width: 0; }
.cio-huespedes tr.is-titular td { background: #F2FAF5; }
.cio-ok { color: #146C3A; font-size: .86rem; margin-top: .75rem; display: flex; align-items: center; gap: .4rem; }
.cio-co-steps { display: flex; flex-direction: column; gap: 1rem; }
.cio-co-step { padding: 1rem; border: 1px dashed var(--hot-border); border-radius: 12px; opacity: .55; }
.cio-co-step.is-active { opacity: 1; border-style: solid; border-color: var(--hot-petroleo); background: #FBFAF7; }
.cio-co-step.is-done { opacity: 1; border-color: #BFE3CC; background: #F2FAF5; }
.cc-table tr.is-bajo td:first-child { color: #8A5A0E; }
.nr-titular { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border: 1px solid var(--hot-border); border-radius: 12px; background: #FBFAF7; }
.nr-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(120deg, var(--hot-noche), var(--hot-petroleo)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.nr-titular-info { flex: 1; display: flex; flex-direction: column; gap: .15rem; font-size: .86rem; }
.nr-titular-info .cc-pill { align-self: flex-start; }
.nr-hint { font-size: .8rem; color: var(--hot-muted); margin: .6rem 0 0; display: flex; align-items: center; gap: .4rem; }
.ops-chk { display: flex; align-items: center; gap: .45rem; font-size: .84rem; text-transform: none; letter-spacing: 0; }
@media (max-width: 900px) { .cio-huesped { grid-template-columns: 1fr 1fr; } }