/* Gran Hotel Laserre - Sistema de gestión */
:root {
  --carbon: #373634;
  --carbon-2: #2c2b29;
  --carbon-3: #45433f;
  --crema: #e9dfc6;
  --crema-2: #f6f1e4;
  --dorado: #b49a5e;
  --dorado-2: #8c7440;
  --fondo: #eceae5;
  --panel: #ffffff;
  --borde: #d3cfc6;
  --borde-2: #e4e1da;
  --texto: #23221f;
  --texto-2: #625f58;
  --sel: #dcd2b6;
  --hover: #f4f0e4;
  --azul: #2f6db3;
  --verde: #2e7d4f;
  --rojo: #b23b3b;
  --naranja: #c47a1c;
  --violeta: #6b4fa3;
  --gris: #8a8780;
  --radio: 4px;
  --sombra: 0 6px 24px rgba(0,0,0,.18);
  --fuente: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs: 13px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--fuente); font-size: var(--fs); color: var(--texto); background: var(--fondo); -webkit-font-smoothing: antialiased; overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--azul); }
.hidden { display: none !important; }
svg.i { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: middle; }

/* ---------- Login ---------- */
#login { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, #4a4844, var(--carbon-2) 70%); z-index: 50; padding: 16px; }
.login-box { width: 100%; max-width: 360px; background: var(--carbon); border: 1px solid #55524c; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); padding: 28px 28px 22px; color: var(--crema); text-align: center; }
.login-box img { width: 132px; height: 132px; border-radius: 6px; }
.login-box h1 { font-size: 15px; font-weight: 600; letter-spacing: .12em; margin: 10px 0 18px; text-transform: uppercase; color: var(--crema); }
.login-box label { display: block; text-align: left; font-size: 12px; margin: 10px 0 4px; color: #cfc6b0; }
.login-box input { width: 100%; padding: 10px 12px; border-radius: 6px; border: 1px solid #5d5a53; background: var(--carbon-2); color: #fff; outline: none; }
.login-box input:focus { border-color: var(--dorado); }
.login-box button { width: 100%; margin-top: 18px; padding: 11px; border: 0; border-radius: 6px; background: var(--dorado); color: #1d1c1a; font-weight: 600; cursor: pointer; }
.login-box button:hover { background: #c5ab6c; }
.login-err { color: #ffb4a8; min-height: 18px; margin-top: 10px; font-size: 12px; white-space: pre-line; }
.login-foot { margin-top: 12px; font-size: 11px; color: #9c968a; }

/* ---------- Estructura escritorio ---------- */
#app { display: grid; grid-template-rows: auto auto auto 1fr auto; height: 100vh; height: 100dvh; }
.titlebar { display: flex; align-items: center; gap: 10px; background: var(--carbon-2); color: var(--crema); padding: 0 10px; height: 34px; user-select: none; }
.titlebar img { width: 24px; height: 24px; border-radius: 3px; }
.titlebar .ttl { font-weight: 600; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.titlebar .ttl small { font-weight: 400; color: #b8b09c; margin-left: 6px; }
.titlebar .sp { flex: 1; }
.titlebar .usr { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #d8cfb8; cursor: pointer; padding: 4px 8px; border-radius: 4px; }
.titlebar .usr:hover { background: var(--carbon-3); }
.hamb { display: none; background: none; border: 0; color: var(--crema); padding: 6px; cursor: pointer; }
.hamb svg.i { width: 22px; height: 22px; }

.menubar { display: flex; background: var(--carbon); color: var(--crema); padding: 0 4px; height: 28px; align-items: stretch; user-select: none; position: relative; z-index: 20; }
.menubar > .mi { position: relative; padding: 0 11px; display: flex; align-items: center; cursor: default; border-radius: 3px; }
.menubar > .mi:hover, .menubar > .mi.open { background: var(--carbon-3); }
.menubar u { text-decoration: none; border-bottom: 1px solid currentColor; }
.dropdown { position: absolute; top: 100%; left: 0; min-width: 240px; background: #fff; color: var(--texto); border: 1px solid var(--borde); box-shadow: var(--sombra); padding: 4px 0; display: none; border-radius: 0 0 4px 4px; }
.mi.open > .dropdown { display: block; }
.dropdown .dd { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 10px; cursor: pointer; white-space: nowrap; }
.dropdown .dd:hover { background: var(--sel); }
.dropdown .dd .k { margin-left: auto; color: var(--texto-2); font-size: 11px; padding-left: 20px; }
.dropdown .sep { height: 1px; background: var(--borde-2); margin: 4px 0; }
.dropdown .dd.dis { color: #aaa; pointer-events: none; }

.toolbar { display: flex; align-items: center; gap: 2px; background: linear-gradient(#faf8f3, #ece8de); border-bottom: 1px solid var(--borde); padding: 3px 6px; overflow-x: auto; scrollbar-width: none; }
.toolbar::-webkit-scrollbar { display: none; }
.tb { display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 1px solid transparent; border-radius: 4px; padding: 4px 8px; min-width: 64px; cursor: pointer; font-size: 11px; color: var(--texto); white-space: nowrap; }
.tb svg.i { width: 22px; height: 22px; color: var(--dorado-2); stroke-width: 1.6; }
.tb:hover { background: #fff; border-color: var(--borde); }
.tb:active { background: var(--sel); }
.tbsep { width: 1px; align-self: stretch; background: var(--borde); margin: 4px 6px; }

.workspace { display: grid; grid-template-columns: 220px 1fr; min-height: 0; }
.sidebar { background: #f7f5f0; border-right: 1px solid var(--borde); overflow-y: auto; padding: 6px 0 20px; }
.sidebar .grp { font-size: 11px; font-weight: 700; color: var(--texto-2); text-transform: uppercase; letter-spacing: .06em; padding: 12px 14px 4px; }
.sidebar .nav { display: flex; align-items: center; gap: 9px; padding: 6px 14px; cursor: pointer; color: var(--texto); border-left: 3px solid transparent; }
.sidebar .nav:hover { background: var(--hover); }
.sidebar .nav.act { background: var(--sel); border-left-color: var(--dorado-2); font-weight: 600; }
.sidebar .nav svg.i { color: var(--dorado-2); }
.sidebar .nav .cnt { margin-left: auto; background: var(--rojo); color: #fff; border-radius: 9px; font-size: 10px; padding: 0 6px; line-height: 16px; }
.sidebar .side-logo { display: none; }

.main { display: grid; grid-template-rows: auto 1fr; min-width: 0; min-height: 0; }
.tabs { display: flex; align-items: flex-end; gap: 2px; background: #dedad1; padding: 4px 6px 0; overflow-x: auto; scrollbar-width: thin; }
.tab { display: flex; align-items: center; gap: 6px; padding: 5px 8px 5px 12px; background: #ebe8e0; border: 1px solid var(--borde); border-bottom: 0; border-radius: 5px 5px 0 0; cursor: pointer; white-space: nowrap; color: var(--texto-2); max-width: 220px; }
.tab.act { background: var(--panel); color: var(--texto); font-weight: 600; position: relative; top: 1px; }
.tab .x { border: 0; background: none; padding: 1px; border-radius: 3px; cursor: pointer; color: var(--texto-2); display: flex; }
.tab .x:hover { background: #ddd; color: var(--rojo); }
.tab .x svg.i { width: 13px; height: 13px; }
.views { background: var(--panel); min-height: 0; position: relative; border-top: 1px solid var(--borde); }
.view { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; }

.statusbar { display: flex; gap: 0; background: #e2ded5; border-top: 1px solid var(--borde); font-size: 11.5px; color: var(--texto-2); height: 24px; align-items: stretch; }
.statusbar > div { padding: 0 12px; display: flex; align-items: center; gap: 6px; border-right: 1px solid var(--borde); white-space: nowrap; }
.statusbar .grow { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); display: inline-block; }
.dot.off { background: var(--rojo); }

/* ---------- Barra de herramientas de módulo ---------- */
.vtools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--borde-2); background: #fbfaf7; }
.vtitle { font-size: 15px; font-weight: 600; margin-right: 10px; display: flex; align-items: center; gap: 8px; }
.vtitle svg.i { color: var(--dorado-2); width: 18px; height: 18px; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--borde); background: linear-gradient(#fff, #f1eee7); border-radius: var(--radio); cursor: pointer; white-space: nowrap; line-height: 1.2; }
.btn:hover { border-color: #b7b1a3; background: #fff; }
.btn:active { background: var(--sel); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.pri { background: linear-gradient(#4a4844, var(--carbon)); color: var(--crema); border-color: var(--carbon-2); }
.btn.pri:hover { background: var(--carbon-3); }
.btn.gold { background: linear-gradient(#c7ae73, var(--dorado)); border-color: var(--dorado-2); color: #1d1c1a; }
.btn.danger { color: var(--rojo); }
.btn.sm { padding: 3px 7px; font-size: 12px; }
.btn svg.i { width: 15px; height: 15px; }
.vsep { width: 1px; height: 22px; background: var(--borde); margin: 0 4px; }
.inp, select.inp { padding: 5px 8px; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; min-width: 0; outline: none; }
.inp:focus { border-color: var(--dorado); box-shadow: 0 0 0 2px rgba(180,154,94,.25); }
.search { position: relative; display: flex; align-items: center; }
.search svg.i { position: absolute; left: 7px; color: var(--gris); }
.search .inp { padding-left: 26px; width: 210px; }
.vtools .push { margin-left: auto; }
.vbody { flex: 1; overflow: auto; min-height: 0; position: relative; }
.vbody.pad { padding: 14px; }
.vfoot { display: flex; gap: 16px; padding: 4px 10px; border-top: 1px solid var(--borde-2); background: #fbfaf7; font-size: 12px; color: var(--texto-2); flex-wrap: wrap; }
.vfoot b { color: var(--texto); }

/* ---------- Grilla ---------- */
table.grid { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12.5px; }
.grid th { position: sticky; top: 0; background: linear-gradient(#f7f5ef, #e9e5dc); border-bottom: 1px solid var(--borde); border-right: 1px solid var(--borde-2); text-align: left; font-weight: 600; padding: 6px 8px; white-space: nowrap; cursor: pointer; user-select: none; z-index: 2; }
.grid th:hover { background: #efebe2; }
.grid th .ord { color: var(--dorado-2); font-size: 10px; margin-left: 3px; }
.grid td { padding: 4px 8px; border-bottom: 1px solid #efece6; border-right: 1px solid #f3f1ec; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.grid tbody tr:nth-child(even) td { background: #fbfaf7; }
.grid tbody tr:hover td { background: var(--hover); }
.grid tbody tr.sel td { background: var(--sel) !important; }
.grid td.n, .grid th.n { text-align: right; font-variant-numeric: tabular-nums; }
.grid td.c, .grid th.c { text-align: center; }
.grid tfoot td { position: sticky; bottom: 0; background: #efebe2; font-weight: 700; border-top: 1px solid var(--borde); }
.neg { color: var(--rojo); }
.more { text-align: center; padding: 12px; }
.empty { text-align: center; color: var(--texto-2); padding: 40px 10px; }
.badge { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; background: #e7e4dc; color: #4b4842; white-space: nowrap; }
.b-verde { background: #dcefe2; color: #1f6a3e; }
.b-rojo { background: #f6dede; color: #9a2c2c; }
.b-azul { background: #dde8f6; color: #24558d; }
.b-naranja { background: #f8e8cf; color: #8e5711; }
.b-violeta { background: #e8e0f4; color: #553b86; }
.b-gris { background: #e7e5e0; color: #6b6861; }

/* tarjetas (móvil) */
.cards { display: none; }
.card { background: #fff; border: 1px solid var(--borde-2); border-radius: 8px; padding: 10px 12px; margin: 8px 10px; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.card .t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .s { color: var(--texto-2); font-size: 12px; grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .r { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; grid-row: 1; grid-column: 2; }
.card .rb { grid-column: 2; text-align: right; }
.card.sel { border-color: var(--dorado); background: var(--crema-2); }

/* ---------- Formularios / diálogos ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(30,29,27,.45); display: flex; align-items: center; justify-content: center; z-index: 40; padding: 16px; }
.dlg { background: #fff; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.35); width: 100%; max-width: 760px; max-height: calc(100dvh - 32px); display: flex; flex-direction: column; border: 1px solid #a9a397; overflow: hidden; }
.dlg.sm { max-width: 420px; }
.dlg.lg { max-width: 980px; }
.dlg-h { display: flex; align-items: center; gap: 8px; background: var(--carbon); color: var(--crema); padding: 8px 12px; font-weight: 600; }
.dlg-h .x { margin-left: auto; background: none; border: 0; color: var(--crema); cursor: pointer; padding: 2px; border-radius: 3px; display: flex; }
.dlg-h .x:hover { background: var(--rojo); }
.dlg-b { padding: 14px 16px; overflow-y: auto; }
.dlg-f { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 16px; background: #f5f3ee; border-top: 1px solid var(--borde-2); flex-wrap: wrap; }
.dlg-f .left { margin-right: auto; display: flex; gap: 8px; flex-wrap: wrap; }
fieldset.sec { border: 1px solid var(--borde-2); border-radius: 6px; margin: 0 0 12px; padding: 8px 12px 12px; }
fieldset.sec legend { font-weight: 600; color: var(--dorado-2); padding: 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.fgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px 12px; }
.fld { display: flex; flex-direction: column; gap: 3px; grid-column: span 2; min-width: 0; }
.fld.w1 { grid-column: span 1; } .fld.w3 { grid-column: span 3; } .fld.w4 { grid-column: span 4; } .fld.w6 { grid-column: span 6; }
.fld label { font-size: 11.5px; color: var(--texto-2); font-weight: 600; }
.fld .inp { width: 100%; }
.fld textarea.inp { min-height: 60px; resize: vertical; }
.fld .ro { padding: 5px 8px; background: #f3f1ec; border-radius: var(--radio); border: 1px solid var(--borde-2); font-weight: 600; min-height: 29px; }
.fld.chk { flex-direction: row; align-items: center; gap: 8px; padding-top: 18px; }
.req::after { content: " *"; color: var(--rojo); }
.msg { white-space: pre-line; line-height: 1.45; }

/* toast */
#toasts { position: fixed; right: 16px; bottom: 34px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.toast { background: var(--carbon); color: #fff; padding: 9px 14px; border-radius: 6px; box-shadow: var(--sombra); max-width: 360px; animation: tin .2s ease; border-left: 4px solid var(--dorado); white-space: pre-line; }
.toast.err { border-left-color: #ff7a6b; }
.toast.ok { border-left-color: #6fd39a; }
@keyframes tin { from { transform: translateY(8px); opacity: 0; } }

/* menú contextual */
.ctx { position: fixed; background: #fff; border: 1px solid var(--borde); box-shadow: var(--sombra); padding: 4px 0; z-index: 45; min-width: 190px; border-radius: 4px; }
.ctx .dd { display: flex; gap: 10px; align-items: center; padding: 6px 14px 6px 10px; cursor: pointer; }
.ctx .dd:hover { background: var(--sel); }
.ctx .sep { height: 1px; background: var(--borde-2); margin: 4px 0; }

/* ---------- Panel ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi { background: #fff; border: 1px solid var(--borde-2); border-radius: 8px; padding: 10px 12px; border-top: 3px solid var(--dorado); cursor: default; }
.kpi.click { cursor: pointer; }
.kpi.click:hover { border-color: var(--dorado); }
.kpi .l { font-size: 11px; color: var(--texto-2); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.kpi .v { font-size: 22px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi .d { font-size: 11.5px; color: var(--texto-2); margin-top: 2px; }
.dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; }
.box { background: #fff; border: 1px solid var(--borde-2); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.box h3 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; padding: 8px 12px; background: #f7f5ef; border-bottom: 1px solid var(--borde-2); display: flex; align-items: center; gap: 8px; }
.box h3 .c { margin-left: auto; font-weight: 600; color: var(--texto-2); }
.box .bb { padding: 10px 12px; overflow: auto; max-height: 340px; }
.box.wide { grid-column: 1 / -1; }
.li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #f0ede7; }
.li:last-child { border-bottom: 0; }
.li .hab { width: 34px; height: 26px; border-radius: 4px; background: var(--carbon); color: var(--crema); display: grid; place-items: center; font-weight: 700; flex: none; font-size: 12px; }
.li .tx { flex: 1; min-width: 0; }
.li .tx b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li .tx span { font-size: 11.5px; color: var(--texto-2); }
.rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.room { border-radius: 6px; padding: 7px 8px; border: 1px solid var(--borde-2); background: #eef7f1; cursor: pointer; min-height: 62px; display: flex; flex-direction: column; position: relative; }
.room .n { font-size: 17px; font-weight: 700; }
.room .g { font-size: 10.5px; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room.ocu { background: #fbe9d8; border-color: #ecc79f; }
.room.lleg { background: #e1ebf8; border-color: #aac3e6; }
.room.bloq { background: #e6e4df; border-color: #c9c5bc; color: #7d7a73; }
.room .sucia { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--naranja); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--texto-2); margin-top: 10px; }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; border: 1px solid #0002; }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 120px; padding-top: 6px; }
.bars .bcol { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; justify-content: flex-end; min-width: 0; }
.bars .bar { width: 100%; background: var(--dorado); border-radius: 3px 3px 0 0; min-height: 1px; }
.bars .bar.hoy { background: var(--carbon); }
.bars .bl { font-size: 9.5px; color: var(--texto-2); }

/* ---------- Planning ---------- */
.plan-wrap { overflow: auto; height: 100%; position: relative; }
table.plan { border-collapse: separate; border-spacing: 0; font-size: 11.5px; table-layout: fixed; }
.plan th, .plan td { border-right: 1px solid #ebe8e1; border-bottom: 1px solid #ebe8e1; height: 34px; padding: 0; }
.plan thead th { position: sticky; top: 0; background: #f4f1ea; z-index: 3; font-weight: 600; text-align: center; width: 46px; min-width: 46px; line-height: 1.15; height: 38px; }
.plan thead th.we { background: #ebe5d6; }
.plan thead th.hoy { background: var(--carbon); color: var(--crema); }
.plan th.rh { position: sticky; left: 0; background: #f4f1ea; z-index: 2; width: 128px; min-width: 128px; white-space: nowrap; overflow: hidden; text-align: left; padding: 0 8px; }
.plan thead th.rh { z-index: 4; }
.plan th.rh small { display: block; font-weight: 400; color: var(--texto-2); font-size: 10px; }
.plan td { position: relative; cursor: cell; }
.plan td:hover { background: var(--hover); }
.plan td.we { background: #faf8f2; }
.plan td.hoy { background: #f3eedf; }
.plan td.bloq { background: repeating-linear-gradient(45deg, #eee, #eee 4px, #e2e0da 4px, #e2e0da 8px); }
.rsv { position: absolute; top: 4px; bottom: 4px; left: 23px; border-radius: 5px; padding: 0 6px; display: flex; align-items: center; font-size: 11px; font-weight: 600; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; z-index: 1; box-shadow: 0 1px 2px rgba(0,0,0,.25); background: var(--azul); }
.rsv.st-EN-CASA { background: var(--naranja); }
.rsv.st-FINALIZADA { background: #8d8a83; }
.rsv.st-CONFIRMADA { background: var(--azul); }
.rsv.st-PRESUPUESTO, .rsv.st-PENDIENTE { background: var(--violeta); }
.rsv.debe { box-shadow: inset 0 -3px 0 #ff9f8f, 0 1px 2px rgba(0,0,0,.25); }
.rsv:hover { filter: brightness(1.1); }

/* ---------- Reportes ---------- */
.rtabs { display: flex; gap: 4px; flex-wrap: wrap; }
.rtabs .btn.act { background: var(--carbon); color: var(--crema); }
.hbar { display: grid; grid-template-columns: 200px 1fr 120px; gap: 8px; align-items: center; padding: 4px 0; font-size: 12.5px; }
.hbar .tr { background: #f0ede6; border-radius: 3px; height: 16px; overflow: hidden; }
.hbar .fl { background: var(--dorado); height: 100%; }
.hbar .vv { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.hbar .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart2 { display: flex; align-items: flex-end; gap: 8px; height: 200px; padding: 10px 0 0; border-bottom: 1px solid var(--borde); }
.chart2 .g { flex: 1; display: flex; align-items: flex-end; gap: 2px; height: 100%; min-width: 0; }
.chart2 .g div { flex: 1; border-radius: 3px 3px 0 0; min-height: 1px; }
.chart2 .a { background: var(--dorado); } .chart2 .b { background: var(--carbon-3); }
.chart2l { display: flex; gap: 8px; } .chart2l div { flex: 1; text-align: center; font-size: 10.5px; color: var(--texto-2); }

.about { max-width: 640px; line-height: 1.55; }
.about img { width: 110px; border-radius: 6px; }
kbd { background: #f3f1ec; border: 1px solid var(--borde); border-bottom-width: 2px; border-radius: 3px; padding: 0 5px; font-size: 11px; font-family: inherit; }
.offline-bar { background: var(--naranja); color: #fff; text-align: center; font-size: 12px; padding: 3px; }

/* ---------- Móvil / tablet ---------- */
@media (max-width: 900px) {
  :root { --fs: 14px; }
  #app { grid-template-rows: auto 1fr; }
  .menubar, .toolbar, .tabs, .statusbar { display: none; }
  .titlebar { height: 52px; padding: 0 6px; }
  .titlebar img { width: 30px; height: 30px; }
  .titlebar .ttl small { display: none; }
  .titlebar .usr span { display: none; }
  .hamb { display: flex; }
  .workspace { grid-template-columns: 1fr; position: relative; }
  .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 82%; max-width: 300px; z-index: 30; transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--sombra); padding-top: 0; }
  .sidebar.open { transform: none; }
  .sidebar .side-logo { display: flex; align-items: center; gap: 10px; background: var(--carbon); color: var(--crema); padding: 14px; font-weight: 600; }
  .sidebar .side-logo img { width: 44px; height: 44px; border-radius: 4px; }
  .sidebar .nav { padding: 11px 16px; font-size: 15px; }
  .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 25; }
  .main { grid-template-rows: 1fr; }
  .vtools { padding: 8px; gap: 6px; }
  .vtitle { width: 100%; font-size: 17px; }
  .vtools .search { flex: 1 1 100%; order: 5; }
  .search .inp { width: 100%; }
  .vtools .push { margin-left: 0; }
  .vtools .hide-m, .vsep { display: none; }
  .btn { padding: 8px 11px; }
  .btn .lbl-d { display: none; }
  .has-cards table.grid { display: none; }
  .has-cards .cards { display: block; padding-bottom: 80px; }
  .fab { position: fixed; right: 18px; bottom: 22px; width: 56px; height: 56px; border-radius: 50%; background: var(--carbon); color: var(--crema); border: 0; box-shadow: var(--sombra); display: grid; place-items: center; z-index: 15; }
  .fab svg.i { width: 26px; height: 26px; }
  .modal-bg { padding: 0; align-items: stretch; }
  .dlg, .dlg.sm, .dlg.lg { max-width: none; max-height: none; height: 100%; border-radius: 0; border: 0; }
  .dlg.sm { height: auto; margin: auto 12px; border-radius: 8px; }
  .modal-bg:has(.dlg.sm) { padding: 16px; align-items: center; }
  .fgrid { grid-template-columns: repeat(2, 1fr); }
  .fld, .fld.w3, .fld.w4, .fld.w6 { grid-column: span 2; }
  .fld.w1 { grid-column: span 1; }
  .fld .inp { padding: 9px 10px; font-size: 16px; }
  .dlg-f .btn { flex: 1; justify-content: center; }
  .dlg-f .left { width: 100%; }
  .dash { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .kpi .v { font-size: 19px; }
  .hbar { grid-template-columns: 1fr 90px; }
  .hbar .tr { grid-column: 1 / -1; grid-row: 2; }
  #toasts { left: 12px; right: 12px; bottom: 90px; }
  .vfoot { padding: 6px 10px; }
}
@media (min-width: 901px) { .fab, .scrim { display: none !important; } }

/* ---------- Impresión ---------- */
@media print {
  body { overflow: visible; background: #fff; }
  .titlebar, .menubar, .toolbar, .sidebar, .tabs, .statusbar, .vtools, .fab, #toasts, .more { display: none !important; }
  #app, .workspace, .main, .views { display: block; height: auto; }
  .view { position: static; display: none; }
  .view.printing { display: block; }
  .vbody { overflow: visible; }
  .has-cards table.grid { display: table !important; }
  .cards { display: none !important; }
  .grid th { position: static; }
  .grid td { max-width: none; white-space: normal; }
  .print-head { display: block !important; }
}
.print-head { display: none; font-size: 14px; font-weight: 700; margin: 0 0 8px; }

/* ===== v1.2: ocupación / armado ===== */
select.inp.falta { border-color: var(--rojo); box-shadow: 0 0 0 2px rgba(200, 40, 40, .12); }
.rsv .arm { font-size: 9.5px; font-weight: 700; opacity: .85; margin-left: 2px; }
.rpar { display: inline-flex; gap: 4px; flex-wrap: wrap; }

/* ===== v1.2: legajos del personal ===== */
.lgw { display: grid; grid-template-columns: 290px 1fr; height: 100%; min-height: 0; }
.lg-list { border-right: 1px solid var(--borde-2); overflow: auto; background: #fbfaf7; min-height: 0; }
.lg-q { position: sticky; top: 0; z-index: 1; background: #fbfaf7; padding: 8px; border-bottom: 1px solid var(--borde-2); display: flex; flex-direction: column; gap: 6px; }
.lg-q label { font-size: 12px; color: var(--texto-2); display: flex; gap: 6px; align-items: center; }
.lg-emp { position: relative; padding: 8px 40px 8px 12px; border-bottom: 1px solid #efebe3; cursor: pointer; }
.lg-emp b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-emp span { display: block; font-size: 11.5px; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-emp .cnt { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 11px; font-weight: 700; background: #ece6d8; color: var(--texto); border-radius: 99px; padding: 1px 7px; }
.lg-emp:hover { background: #f3efe6; }
.lg-emp.act { background: var(--carbon); color: var(--crema); }
.lg-emp.act span { color: #cfc6b0; }
.lg-emp.act .cnt { background: var(--dorado); color: #fff; }
.lg-emp.inact { opacity: .6; }
.lg-det { overflow: auto; padding: 14px 18px; min-width: 0; min-height: 0; }
.lg-det > .empty { margin-top: 60px; text-align: center; }
.lg-det > .empty .i { width: 40px; height: 40px; opacity: .4; }
.lg-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.lg-head h2 { margin: 0 0 2px; font-size: 19px; }
.lg-nm { min-width: 0; }
.lg-av { width: 46px; height: 46px; border-radius: 50%; background: var(--dorado); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 16px; flex: none; }
.lg-back { display: none; }
.lg-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 16px; background: #fff; border: 1px solid var(--borde-2); border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; }
.lg-datos label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-2); font-weight: 600; }
.lg-datos div div { overflow-wrap: anywhere; }
.lg-obs { background: #fffaf0; border: 1px solid #eadfc4; border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; white-space: pre-wrap; }
.lg-h3 { margin: 6px 0 8px; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--dorado-2); }
.lg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.chip { border: 1px solid var(--borde-2); background: #fff; border-radius: 99px; padding: 4px 11px; font: inherit; font-size: 12px; cursor: pointer; color: inherit; }
.chip:hover { border-color: var(--dorado); }
.chip.act { background: var(--carbon); color: var(--crema); border-color: var(--carbon); }
.lg-tl { border-left: 2px solid var(--dorado); margin-left: 6px; padding-bottom: 4px; }
.lg-ev { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px 10px 18px; margin: 0 0 8px; background: #fff; border: 1px solid var(--borde-2); border-left: 0; border-radius: 0 8px 8px 0; cursor: pointer; }
.lg-ev::before { content: ''; position: absolute; left: -7px; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--dorado); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--dorado); }
.lg-ev:hover { border-color: var(--dorado); }
.lg-f { width: 80px; flex: none; font-weight: 700; font-variant-numeric: tabular-nums; padding-top: 1px; }
.lg-b { flex: 1; min-width: 0; }
.lg-r { font-size: 12px; color: var(--texto-2); margin-left: 4px; }
.lg-d { margin-top: 5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.lg-u { margin-top: 4px; font-size: 11px; color: var(--texto-2); }
.thumb { flex: none; width: 92px; height: 92px; border: 1px solid var(--borde-2); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #f6f4ef; color: var(--rojo); text-decoration: none; font-weight: 700; font-size: 12px; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .i { width: 30px; height: 30px; }
.thumb:hover { border-color: var(--dorado); }
.thumb.sm { width: 40px; height: 40px; font-size: 9px; display: inline-flex; vertical-align: middle; }
.thumb.sm .i { width: 16px; height: 16px; }
.lg-rep td { vertical-align: middle; }
.adj { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; overflow-wrap: anywhere; }
.adj-sel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.adj-sel label.btn { cursor: pointer; }
.adj-sel span { color: var(--texto-2); font-size: 12px; }
.adj-prev { max-width: 240px; max-height: 170px; margin-top: 8px; border-radius: 6px; border: 1px solid var(--borde-2); }
@media (max-width: 900px) {
  .lgw { grid-template-columns: 1fr; }
  .lg-datos { grid-template-columns: 1fr 1fr; padding: 10px 12px; }
  .lg-list { border-right: 0; }
  .lg-det { display: none; padding: 12px; }
  .lgw.show-det .lg-list { display: none; }
  .lgw.show-det .lg-det { display: block; }
  .lg-back { display: inline-flex; }
  .lg-head .push { flex-basis: 100%; height: 0; }
  .lg-ev { flex-wrap: wrap; padding-left: 14px; }
  .lg-f { width: 100%; }
  .thumb { width: 76px; height: 76px; }
  .rpar input[type=date] { width: 140px; }
}
@media print {
  .lgw { display: block; height: auto; }
  .lg-list, .lg-head .btn, .lg-chips { display: none !important; }
  .lg-det { display: block !important; overflow: visible; padding: 0; }
  .lg-ev { break-inside: avoid; }
}