/* Fase 9.3 — CSS verbatim de los bloques de estilo de Pages/HotelManager/Componentes/PageRoomRack.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. */
.rr-head { flex-wrap: wrap; gap: .6rem; }
.rr-nav { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }

    .rr-nav .cc-select-sm {
        height: 31px;
        padding: 0 .5rem;
        font-size: .8rem;
        width: auto;
        flex: 0 0 auto;
    }

    .rr-nav .rr-buscar {
        width: 260px;
    }

    .rr-nav .rr-filtro {
        width: 190px;
        max-width: 190px;
    }

.rr-rango { font-family: var(--hv-serif); font-weight: 700; font-size: 1rem; padding: 0 .4rem; }
.cc-select-sm { height: 31px; padding: 0 .5rem; font-size: .8rem; width: auto; }
.rr-legend { display: flex; gap: .8rem; font-size: .76rem; font-weight: 600; color: var(--hot-muted); align-items: center; flex-wrap: wrap; }
.rr-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.rr-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.rr-dot-pend { background: repeating-linear-gradient(135deg, #3B5BDB 0 3px, #fff 3px 5px); }

/* ---- grilla (colores FIJOS, no dependen del tema: la disponibilidad debe leerse siempre igual) ---- */
.rr-wrap { overflow-x: auto; border: 1px solid var(--hot-border); border-radius: 12px; margin-top: .8rem; }
.rr-grid { display: grid; position: relative; min-width: 1100px; }
.rr-gh, .rr-gc, .rr-gu, .rr-gf { border-bottom: 1px solid var(--hot-border); border-right: 1px solid var(--hot-border); }
.rr-gh { background: #F2F0EA; padding: .5rem .3rem; text-align: center; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hot-muted); position: sticky; top: 0; z-index: 2; }
.rr-gh b { display: block; font-size: 1rem; color: var(--hot-ink); letter-spacing: 0; }
.rr-gh.wk { color: var(--hot-petroleo); }
.rr-gh.today { background: #FFF6E0; color: #8A5A0E; }
.rr-gh.today b { color: #8A5A0E; }
.rr-gu { background: #fff; padding: .5rem .7rem; position: sticky; left: 0; z-index: 3; display: flex; flex-direction: column; gap: 2px; }
.rr-cod { font-family: var(--hv-serif); font-weight: 700; font-size: 1.05rem; color: var(--hot-noche); display: flex; align-items: center; gap: .5rem; }
.rr-tipo { font-size: .72rem; color: var(--hot-muted); display: flex; gap: .6rem; }
.rr-chip { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 6px; border-radius: 999px; font-family: var(--hv-sans); }
.rr-chip.limpia { background: #E6F4EC; color: #146C3A; }
.rr-chip.sucia { background: #FBE7C2; color: #8A5A0E; }
.rr-chip.mant { background: #E9D8F2; color: #4A235A; }
.rr-chip.fuera { background: #DDE2E7; color: #2C3E50; }
.rr-chip.ocup { background: #F8D3CE; color: #7A1A14; }
.rr-chip.resv { background: #D9E2FB; color: #1E3A8A; }
.rr-gc { background: #FBFAF6; min-height: 52px; }
.rr-gc.wk { background: #F2F0EA; }
.rr-gc.today { background: #FFF6E0; }
.rr-gc.libre:hover { background: #E6F4EC; cursor: pointer; }

.rr-bar { position: relative; z-index: 1; align-self: center; height: 38px; margin: 0 2px; border-radius: 9px; display: flex; align-items: center; gap: .4rem; padding: 0 .5rem 0 .6rem; overflow: hidden; white-space: nowrap; font-size: .76rem; font-weight: 600; border-left: 5px solid var(--st); background: var(--st-bg); color: var(--st-ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); cursor: pointer; font-family: var(--hv-sans); }
.rr-bar.ocup { --st: #C0392B; --st-bg: #F8D3CE; --st-ink: #7A1A14; }
.rr-bar.fin { --st: #95A5A6; --st-bg: #ECEEEE; --st-ink: #566573; }
.rr-bar.res { --st: #3B5BDB; --st-bg: #D9E2FB; --st-ink: #1E3A8A; }
.rr-bar.res.pend { background: repeating-linear-gradient(135deg, #D9E2FB 0 8px, #EEF2FD 8px 12px); }
.rr-bar.limp { --st: #D68910; --st-bg: #FBE7C2; --st-ink: #8A5A0E; }
.rr-bar.mant { --st: #6C3483; --st-bg: #E9D8F2; --st-ink: #4A235A; }
.rr-bar.bloq { --st: #5D6D7E; --st-bg: #DDE2E7; --st-ink: #2C3E50; }
.rr-bar .nom { color: #1E2A33; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.rr-bar .meta { color: var(--st-ink); font-weight: 500; font-size: .7rem; }
.rr-bar .src { font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 5px; border-radius: 4px; background: rgba(255,255,255,.6); color: var(--st-ink); }
.rr-bar .ico { display: inline-flex; gap: .35rem; align-items: center; color: var(--st-ink); font-size: .72rem; }
.rr-bar .monto { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; font-size: .74rem; }
.rr-bar .monto.deuda { color: #B3261E; }
.rr-bar .tag { background: #B3261E; color: #fff; font-size: .6rem; font-weight: 700; padding: 2px 6px; border-radius: 999px; letter-spacing: .04em; text-transform: uppercase; animation: rr-blink 1.2s ease-in-out infinite; }
.rr-bar.venc { border-left-color: #B3261E; animation: rr-borde 1.2s ease-in-out infinite; }
.rr-bar.hit { outline: 2px solid var(--hot-petroleo); outline-offset: 1px; }
.rr-bar.short .src, .rr-bar.short .ico, .rr-bar.short .meta, .rr-bar.short .monto { display: none; }
.rr-bar.short .nom { font-size: .7rem; }
.rr-bar.mid .src { display: none; }
@keyframes rr-blink { 50% { opacity: .25; } }
@keyframes rr-borde { 50% { box-shadow: 0 0 0 3px rgba(179,38,30,.3); } }
@media (prefers-reduced-motion: reduce) { .rr-bar.venc, .rr-bar .tag { animation: none; } }

.rr-now { position: relative; pointer-events: none; z-index: 4; }
.rr-now::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--frac) * 100%); width: 2px; background: #D68910; }
.rr-now span { position: absolute; top: 2px; left: calc(var(--frac) * 100% + 4px); font-size: .62rem; font-weight: 700; color: #D68910; background: #fff; padding: 1px 4px; border-radius: 4px; }

.rr-gf { background: #F2F0EA; padding: .4rem .25rem; text-align: center; font-size: .68rem; color: var(--hot-muted); font-variant-numeric: tabular-nums; line-height: 1.35; }
.rr-gf b { display: block; font-size: .86rem; color: var(--hot-ink); }
.rr-gf.today { background: #FFF6E0; }
.rr-gf.lbl { text-align: left; padding-left: .7rem; position: sticky; left: 0; z-index: 3; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .6rem; }
.rr-gf .pct { display: inline-block; margin-top: 2px; padding: 1px 6px; border-radius: 999px; font-weight: 700; background: #E6F4EC; color: #146C3A; }
.rr-gf .pct.hi { background: #FBE7C2; color: #8A5A0E; }
.rr-gf .pct.full { background: #F8D3CE; color: #7A1A14; }