/* Fase 9.3 — CSS verbatim de los bloques de estilo de Pages/HotelManager/IndexHotel.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. */
.hd-page { display: flex; flex-direction: column; gap: 1rem; }
.hd-hello { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.hd-hello h2 { margin: 0; font-size: 1.7rem; font-weight: 700; }
.hd-hello p { margin: .25rem 0 0; color: var(--hot-muted); font-size: .86rem; }
.hd-clock { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--hot-ink); }
.hd-hello-actions { display: flex; gap: .5rem; align-items: center; }

.hd-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .9rem; }
.hd-kpi { background: #fff; border: 1px solid var(--hot-border); border-radius: 14px; padding: 1rem 1.15rem; min-width: 0; }
.hd-kpi-click { cursor: pointer; transition: box-shadow .15s, transform .15s; }
.hd-kpi-click:hover { box-shadow: 0 6px 18px rgba(15,36,56,.08); transform: translateY(-1px); }
.hd-kpi-lbl { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--hot-muted); margin-bottom: .45rem; }
.hd-kpi-val { font-family: var(--hv-serif); font-size: 2rem; font-weight: 700; color: var(--hot-noche); line-height: 1; }
.hd-kpi-sub { font-size: .74rem; color: var(--hot-muted); margin-top: .45rem; }
.hd-kpi-dark { background: var(--hot-noche); border-color: var(--hot-noche); }
.hd-kpi-dark .hd-kpi-lbl { color: rgba(255,255,255,.75); }
.hd-kpi-dark .hd-kpi-val { color: #fff; }
.hd-kpi-dark .hd-kpi-sub { color: #9ED8B0; font-weight: 600; }

.ops-main { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1rem; align-items: start; }
.ops-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.ops-side .hot-card { margin: 0; }
.hd-count { min-width: 26px; height: 26px; padding: 0 .5rem; border-radius: 999px; background: #EEEBE3; color: var(--hot-ink); font-size: .74rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.hd-kv { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1rem; }
.hd-kv > div { display: flex; flex-direction: column; gap: .15rem; padding: .45rem 0; border-bottom: 1px dashed var(--hot-border); }
.hd-kv dt { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--hot-muted); font-weight: 700; }
.hd-kv dd { margin: 0; font-weight: 600; font-size: .9rem; }

/* ---- leyenda / estados (colores fijos, no dependen del tema) ---- */
.ops-legend { display: flex; flex-wrap: wrap; gap: .35rem; }
.ops-leg { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 600; color: var(--hot-muted); padding: .2rem .55rem; border-radius: 999px; border: 1px solid transparent; cursor: pointer; }
.ops-leg i { width: 9px; height: 9px; border-radius: 50%; background: var(--st); }
.ops-leg.is-on { border-color: var(--st); color: var(--hot-ink); background: #fff; }
.st-libre { --st: #2E9E5B; --st-bg: #E6F4EC; --st-ink: #146C3A; }
.st-reservada { --st: #3B5BDB; --st-bg: #E8EEFC; --st-ink: #1E3A8A; }
.st-ocupada { --st: #C0392B; --st-bg: #FBE3E0; --st-ink: #9B2C21; }
.st-limpieza { --st: #D68910; --st-bg: #FBEFD9; --st-ink: #8A5A0E; }
.st-mantenimiento { --st: #6C3483; --st-bg: #F0E6F6; --st-ink: #4A235A; }
.st-bloqueada, .st-fuera { --st: #5D6D7E; --st-bg: #EAECEE; --st-ink: #34495E; }
.st-finalizada { --st: #95A5A6; --st-bg: #F2F3F4; --st-ink: #566573; }

/* ---- mapa ---- */
.ops-zona { margin-top: .9rem; }
.ops-zona-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.ops-zona-nombre { font-family: var(--hv-serif); font-weight: 700; font-size: 1rem; color: var(--hot-noche); }
.ops-zona-nombre i { color: var(--hot-petroleo); margin-right: .35rem; font-size: .85rem; }
.ops-zona-cnt { font-size: .74rem; color: var(--hot-muted); font-weight: 600; }
.ops-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: .6rem; }
.ops-tile { position: relative; border-radius: 12px; padding: .6rem .7rem; background: var(--st-bg); border: 1.5px solid transparent; border-left: 5px solid var(--st); cursor: pointer; min-height: 92px; transition: transform .12s, box-shadow .12s; }
.ops-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(15,36,56,.12); }
.ops-tile.is-selected { border-color: var(--st); box-shadow: 0 0 0 3px rgba(15,36,56,.12); }
.ops-tile-top { display: flex; justify-content: space-between; align-items: center; }
.ops-tile-cod { font-family: var(--hv-serif); font-size: 1.2rem; font-weight: 700; color: var(--hot-noche); }
.ops-tile-flags { display: flex; gap: .3rem; font-size: .72rem; color: var(--st-ink); }
.ops-tile-tipo { font-size: .7rem; color: var(--hot-muted); margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ops-tile-est { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--st-ink); margin-top: .35rem; }
.ops-tile-ocup { font-size: .74rem; font-weight: 600; margin-top: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--hot-ink); }
.ops-tile-ocup i { font-size: .65rem; color: var(--st-ink); }
.ops-tile-fecha { font-size: .68rem; color: var(--hot-muted); font-variant-numeric: tabular-nums; }

/* ---- [v3.1] alerta de vencimiento dentro del tile (banda al pie + borde) ---- */
.ops-alert { margin: .45rem -.7rem -.6rem -.7rem; padding: .3rem .7rem; border-radius: 0 0 10px 0; display: flex; align-items: center; gap: .4rem; font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.ops-alert .t { margin-left: auto; font-weight: 600; letter-spacing: 0; text-transform: none; }
.ops-tile.is-porvencer { border-color: #D68910; }
.ops-tile.is-porvencer .ops-alert { background: #FBEFD9; color: #8A5A0E; }
.ops-tile.is-porvencer .ops-alert i { animation: ops-blink 1.6s ease-in-out infinite; }
.ops-tile.is-vencido { border-color: #B3261E; animation: ops-borde 1.2s ease-in-out infinite; }
.ops-tile.is-vencido .ops-alert { background: #B3261E; color: #fff; animation: ops-banda 1.2s ease-in-out infinite; }
.ops-tile.is-noshow { border-style: dashed; border-color: #3B5BDB; }
.ops-tile.is-noshow .ops-alert { background: #E8EEFC; color: #1E3A8A; }
.ops-tile.is-noshow .ops-alert i { animation: ops-blink 1.6s ease-in-out infinite; }
@keyframes ops-blink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
@keyframes ops-banda { 0%, 100% { background: #B3261E; } 50% { background: #E5534B; } }
@keyframes ops-borde { 0%, 100% { box-shadow: 0 0 0 0 rgba(179,38,30,0); } 50% { box-shadow: 0 0 0 4px rgba(179,38,30,.28); } }
@media (prefers-reduced-motion: reduce) { .ops-tile.is-vencido, .ops-tile.is-vencido .ops-alert, .ops-alert i { animation: none; } }

/* ---- listas laterales ---- */
.ops-lista { display: flex; flex-direction: column; }
.ops-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; padding: .5rem 0; border-bottom: 1px dashed var(--hot-border); }
.ops-item:last-child { border-bottom: none; }
.ops-item-cod { font-family: var(--hv-serif); font-weight: 700; color: var(--hot-noche); min-width: 44px; }
.ops-item-nom { font-size: .84rem; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; flex-direction: column; }
.ops-item-nom small { font-weight: 400; color: var(--hot-muted); font-size: .72rem; }

.ops-nota-form { display: flex; gap: .4rem; margin-bottom: .6rem; }
.ops-nota-form input { flex: 1; }
.ops-notas { display: flex; flex-direction: column; gap: .3rem; max-height: 300px; overflow-y: auto; }
.ops-nota { display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; align-items: start; padding: .45rem .5rem; border-radius: 8px; background: #FBFAF7; font-size: .82rem; }
.ops-nota.is-done { opacity: .55; text-decoration: line-through; }
.ops-nota-chk, .ops-nota-del { border: none; background: none; cursor: pointer; color: var(--hot-petroleo); font-size: .95rem; padding: 0; }
.ops-nota-del { color: var(--hot-muted); }
.ops-nota-txt { display: flex; flex-direction: column; gap: .1rem; }
.ops-nota-txt small { color: var(--hot-muted); font-size: .68rem; text-decoration: none; }

/* ---- panel de unidad ---- */
.ops-head-est { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: rgba(255,255,255,.14); padding: .25rem .65rem; border-radius: 999px; }
.ops-head-est i { width: 8px; height: 8px; border-radius: 50%; background: var(--st); }
.ops-detalle { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; margin-bottom: 1rem; }
.ops-detalle > div { padding: .5rem .7rem; background: #F6F4EF; border-radius: 10px; font-size: .86rem; }
.ops-lbl { display: block; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--hot-muted); font-weight: 700; margin-bottom: .15rem; }
.ops-span2 { grid-column: span 2; }
.ops-icons { display: flex; gap: .6rem; color: var(--hot-petroleo); font-size: .95rem; }
.ops-acciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .55rem; }
.ops-act { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; border: 1px solid var(--hot-border); border-radius: 12px; padding: .65rem .8rem; background: #fff; cursor: pointer; text-align: left; font-family: inherit; color: var(--hot-ink); transition: box-shadow .12s; }
.ops-act:hover { box-shadow: 0 6px 16px rgba(15,36,56,.1); }
.ops-act i { font-size: 1rem; margin-bottom: .2rem; }
.ops-act span { font-weight: 700; font-size: .84rem; }
.ops-act small { font-size: .68rem; color: var(--hot-muted); }
.ops-act-blue i { color: var(--hot-azul); } .ops-act-green i { color: #146C3A; } .ops-act-amber i { color: #8A5A0E; } .ops-act-red i { color: var(--hot-rojo); } .ops-act-dark i { color: var(--hot-noche); } .ops-act-outline i { color: var(--hot-petroleo); }
.ops-sub { margin-top: 1rem; padding: 1rem; border: 1px dashed var(--hot-border); border-radius: 12px; background: #FBFAF7; }
.ops-sub h4 { margin: 0 0 .7rem; font-size: .95rem; font-family: var(--hv-serif); color: var(--hot-noche); }
.ops-sub h4 i { color: var(--hot-petroleo); margin-right: .3rem; }
.ops-chk { display: flex; align-items: center; gap: .45rem; font-size: .84rem; text-transform: none; letter-spacing: 0; }
.ops-ok { color: #146C3A; font-size: .84rem; margin-top: .75rem; display: flex; align-items: center; gap: .4rem; }

@media (max-width: 1400px) { .hd-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .ops-main { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .hd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ops-detalle { grid-template-columns: 1fr; } .ops-span2 { grid-column: span 1; } }