/* ═══════════════════════════════════════════════════════════════
   MIP — Motel Intelligence Platform · Design System v10
   Basado en MIP_Prototipo_UX_v10_1
═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { font-size: 16px; }

/* ── Tokens modo claro ── */
[data-theme="light"], :root {
  --bg0: #F5F5F7; --bg1: #FFFFFF; --bg2: #F4F4F6; --bg3: #EBEBED;
  --border: #E2E2E6; --border2: #CACAD0;
  --text1: #18181B; --text2: #52525B; --text3: #A1A1AA;
  --shadow: 0 1px 4px rgba(0,0,0,.06); --shadow-md: 0 4px 16px rgba(0,0,0,.08);
  --red: #C0392B; --red-l: #FDECEA; --red-b: #F5C6C2; --red-t: #7D1A12;
  --green: #1A7A4A; --green-l: #E8F5EE; --green-b: #A8D5BB; --green-t: #0F4A2C;
  --amber: #9A6200; --amber-l: #FEF6E4; --amber-b: #F5DFA0; --amber-t: #6B4400;
  --blue: #1A9E96; --blue-l: #E6F7F6; --blue-b: #7DD4CF; --blue-t: #0B5C6E;
  --purple: #6D28D9; --purple-l: #F5F3FF; --purple-b: #C4B5FD; --purple-t: #4C1D95;
  /* Zonas de navegación */
  --zone-ops: #1A9E96; --zone-ops-l: #E6F7F6; --zone-ops-b: #7DD4CF;
  /* Paleta de marca MIP */
  --brand-navy: #0D2247;
  --zone-gest: #6D28D9; --zone-gest-l: #F5F3FF; --zone-gest-b: #C4B5FD;
  --zone-ceo: #C0392B; --zone-ceo-l: #FDECEA; --zone-ceo-b: #F5C6C2;
  /* Tipos de ocupación */
  --rot: #1A9E96; --rot-l: #E6F7F6; --rot-b: #7DD4CF; --rot-t: #0B5C6E;
  --aman: #6D28D9; --aman-l: #F5F3FF; --aman-b: #C4B5FD; --aman-t: #4C1D95;
  --rec: #C0392B; --rec-l: #FDECEA; --rec-b: #F5C6C2; --rec-t: #7D1A12;
  --fds: #1A7A4A; --fds-l: #E8F5EE; --fds-b: #A8D5BB; --fds-t: #0F4A2C;
}

/* ── Tokens modo oscuro ── */
[data-theme="dark"] {
  --bg0: #111113; --bg1: #18181B; --bg2: #222226; --bg3: #2C2C32;
  --border: #33333A; --border2: #44444E;
  --text1: #FAFAFA; --text2: #A1A1AA; --text3: #52525B;
  --shadow: 0 1px 4px rgba(0,0,0,.3); --shadow-md: 0 4px 16px rgba(0,0,0,.4);
  --red: #E05C50; --red-l: #2D1512; --red-b: #6B2820; --red-t: #F5A89E;
  --green: #34C877; --green-l: #0D2B1A; --green-b: #1A5C32; --green-t: #6EDA9E;
  --amber: #F5A623; --amber-l: #2A1E06; --amber-b: #5C3D0A; --amber-t: #F5D87A;
  --blue: #1EA8A0; --blue-l: #062523; --blue-b: #0B5C6E; --blue-t: #7DD4CF;
  --purple: #A78BFA; --purple-l: #1E1535; --purple-b: #4C1D95; --purple-t: #C4B5FD;
  --zone-ops: #1EA8A0; --zone-ops-l: #062523; --zone-ops-b: #0B5C6E;
  --zone-gest: #A78BFA; --zone-gest-l: #1E1535; --zone-gest-b: #4C1D95;
  --zone-ceo: #E05C50; --zone-ceo-l: #2D1512; --zone-ceo-b: #6B2820;
  --rot: #1EA8A0; --rot-l: #062523; --rot-b: #0B5C6E; --rot-t: #7DD4CF;
  --aman: #A78BFA; --aman-l: #1E1535; --aman-b: #4C1D95; --aman-t: #C4B5FD;
  --rec: #E05C50; --rec-l: #2D1512; --rec-b: #6B2820; --rec-t: #F5A89E;
  --fds: #34C877; --fds-l: #0D2B1A; --fds-b: #1A5C32; --fds-t: #6EDA9E;
}

body { background: var(--bg0); color: var(--text1); font-family: 'Inter', system-ui, -apple-system, sans-serif; }

/* ═══════════════════════ LAYOUT SHELL ═══════════════════════ */
.shell { display: flex; height: 100vh; overflow: hidden; }

/* ── Sidebar ── */
.sidebar {
  width: 248px; flex-shrink: 0; background: var(--bg1);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  transition: width .22s cubic-bezier(.4,0,.2,1);
  overflow: hidden; z-index: 10;
}
.sidebar.collapsed { width: 52px; }
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-badge,
.sidebar.collapsed .logo-text,
.sidebar.collapsed .zone-label { display: none; }
.sidebar.collapsed .ni { justify-content: center; padding: 9px 0; }
.sidebar.collapsed .sh { justify-content: center; padding: 14px 0; }
.sidebar.collapsed .sf { padding: 10px 0; justify-content: center; }
.sidebar.collapsed .zone-header { padding: 8px 0; justify-content: center; }

/* Logo / header */
.sh { padding: 15px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo { width: 34px; height: 34px; border-radius: 9px; background: var(--red); display: flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
.logo-text { flex: 1; overflow: hidden; }
.logo-name { font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600; color: var(--text1); white-space: nowrap; }
.logo-sub { font-size: 10px; color: var(--text3); white-space: nowrap; margin-top: 1px; }

/* Nav scroll area */
.snav { flex: 1; overflow-y: auto; padding: 6px 0; }
.snav::-webkit-scrollbar { width: 3px; }
.snav::-webkit-scrollbar-thumb { background: var(--border); }

/* Zone headers */
.zone-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px 3px; }
.zone-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.zone-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; white-space: nowrap; }
.zone-ops .zone-dot { background: var(--zone-ops); }
.zone-ops .zone-label { color: var(--zone-ops); }
.zone-gest .zone-dot { background: var(--zone-gest); }
.zone-gest .zone-label { color: var(--zone-gest); }
.zone-ceo .zone-dot { background: var(--zone-ceo); }
.zone-ceo .zone-label { color: var(--zone-ceo); }

/* Nav items */
.ni {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 22px; cursor: pointer; font-size: 12px;
  color: var(--text2); border-left: 2px solid transparent;
  transition: all .12s; text-decoration: none; white-space: nowrap;
}
.ni:hover { background: var(--bg2); color: var(--text1); }
.ni i { font-size: 15px; flex-shrink: 0; min-width: 15px; }
.nav-label { flex: 1; }
.nav-badge { font-size: 9px; font-weight: 600; padding: 2px 6px; border-radius: 99px; }
.nb-r { background: var(--red-l); color: var(--red); }
.nb-g { background: var(--green-l); color: var(--green); }
.nb-b { background: var(--blue-l); color: var(--blue); }
.nb-a { background: var(--amber-l); color: var(--amber); }

/* Active nav states */
.ni.az-ops { background: var(--zone-ops-l); color: var(--zone-ops); border-left-color: var(--zone-ops); font-weight: 500; }
.ni.az-gest { background: var(--zone-gest-l); color: var(--zone-gest); border-left-color: var(--zone-gest); font-weight: 500; }
.ni.az-ceo { background: var(--zone-ceo-l); color: var(--zone-ceo); border-left-color: var(--zone-ceo); font-weight: 500; }

/* Sidebar footer */
.sf { padding: 11px 14px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.collapse-btn { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text3); flex-shrink: 0; transition: all .12s; }
.collapse-btn:hover { color: var(--red); border-color: var(--red); }
.install-wrap { flex: 1; overflow: hidden; }
.install-sel { width: 100%; font-size: 11px; padding: 5px 8px; border-radius: 7px; border: 1px solid var(--border); background: var(--bg2); color: var(--text1); cursor: pointer; outline: none; font-family: 'Inter', sans-serif; }
.install-sel:focus { border-color: var(--red); }

/* ── Main area ── */
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

/* Topbar */
.topbar {
  height: 54px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 20px; gap: 10px;
  flex-shrink: 0; background: var(--bg1); box-shadow: var(--shadow);
}
.tb-zone { font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 99px; letter-spacing: .05em; text-transform: uppercase; flex-shrink: 0; }
.tb-zone.ops { background: var(--zone-ops-l); color: var(--zone-ops); }
.tb-zone.gest { background: var(--zone-gest-l); color: var(--zone-gest); }
.tb-zone.ceo { background: var(--zone-ceo-l); color: var(--zone-ceo); }
.tb-title { font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 600; color: var(--text1); flex: 1; }
.tb-icon { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg2); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text2); transition: all .12s; flex-shrink: 0; }
.tb-icon:hover { color: var(--red); border-color: var(--red); }
.theme-btn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg2); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text2); flex-shrink: 0; transition: all .12s; }
.theme-btn:hover { color: var(--red); border-color: var(--red); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--red-l); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: var(--red); cursor: pointer; flex-shrink: 0; border: 1px solid var(--red-b); }
.mob-btn { display: none; background: none; border: none; cursor: pointer; color: var(--text2); }

/* Content scroll */
.content { flex: 1; overflow-y: auto; padding: 20px; scroll-behavior: smooth; }
.content::-webkit-scrollbar { width: 4px; }
.content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Breadcrumb bar */
.bcbar {
  height: 30px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 20px; gap: 5px;
  flex-shrink: 0; background: var(--bg0); font-size: 11px;
}
.bc-sep { font-size: 10px; color: var(--text3); }
.bc-lnk { color: var(--text3); text-decoration: none; transition: color .12s; }
.bc-lnk:hover { color: var(--text1); }
.bc-cur { color: var(--text1); font-weight: 600; }

/* Sub nav items (inside Configuración group) */
.ni.ni-sub { padding-left: 38px; font-size: 11.5px; }
.ni.ni-group { user-select: none; }
.ni.ni-group:hover { background: var(--bg2); }

/* Módulos bloqueados por licencia */
.ni.ni-locked { opacity: .45; cursor: not-allowed; }
.ni.ni-locked:hover { background: transparent; color: var(--text3); }

/* ═══════════════════════ COMPONENTES ═══════════════════════ */

/* ── Status bar ── */
.sbar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.sc { display: flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 99px; font-size: 10px; font-weight: 500; border: 1px solid transparent; }
.sc i { font-size: 11px; }
.sc.ok { background: var(--green-l); color: var(--green-t); border-color: var(--green-b); }
.sc.w { background: var(--amber-l); color: var(--amber-t); border-color: var(--amber-b); }
.sc.e { background: var(--red-l); color: var(--red-t); border-color: var(--red-b); }
.sc.b { background: var(--blue-l); color: var(--blue-t); border-color: var(--blue-b); }

/* ── KPI grid ── */
.kgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; margin-bottom: 14px; }
.kpi { background: var(--bg1); border: 1px solid var(--border); border-radius: 10px; padding: 13px 14px; box-shadow: var(--shadow); }
.kpi.ops { border-top: 3px solid var(--zone-ops); }
.kpi.gest { border-top: 3px solid var(--zone-gest); }
.kpi.ceo { border-top: 3px solid var(--zone-ceo); }
.kl { font-size: 10px; color: var(--text3); margin-bottom: 4px; }
.kv { font-family: 'Space Grotesk', sans-serif; font-size: 21px; font-weight: 600; color: var(--text1); line-height: 1; }
.kd { font-size: 10px; margin-top: 4px; }
.kd.up { color: var(--green); }
.kd.dn { color: var(--red); }
.kd.w { color: var(--amber); }

/* ── Card ── */
.card { background: var(--bg1); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow); }
.ct { font-size: 12px; font-weight: 600; color: var(--text1); margin-bottom: 12px; }

/* ── CEO KPIs grandes ── */
.exec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 16px; }
.exec-kpi { border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 6px; border: 1px solid transparent; position: relative; overflow: hidden; }
.exec-kpi::before { content: ''; position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; border-radius: 50%; opacity: .08; }
.exec-kpi.ingresos { background: var(--red-l); border-color: var(--rec-b); }
.exec-kpi.ingresos::before { background: var(--red); }
.exec-kpi.rotacion { background: var(--blue-l); border-color: var(--blue-b); }
.exec-kpi.rotacion::before { background: var(--blue); }
.exec-kpi.limpieza { background: var(--green-l); border-color: var(--green-b); }
.exec-kpi.limpieza::before { background: var(--green); }
.exec-kpi.beneficio { background: var(--green-l); border-color: var(--green-b); }
.exec-kpi.beneficio::before { background: var(--green); }
.exec-kpi-label { font-size: 10px; font-weight: 500; }
.exec-kpi.ingresos .exec-kpi-label { color: var(--red-t); }
.exec-kpi.rotacion .exec-kpi-label { color: var(--blue-t); }
.exec-kpi.limpieza .exec-kpi-label,
.exec-kpi.beneficio .exec-kpi-label { color: var(--green-t); }
.exec-kpi-val { font-family: 'Space Grotesk', sans-serif; font-size: 28px; font-weight: 700; line-height: 1; }
.exec-kpi.ingresos .exec-kpi-val { color: var(--red); }
.exec-kpi.rotacion .exec-kpi-val { color: var(--blue); }
.exec-kpi.limpieza .exec-kpi-val,
.exec-kpi.beneficio .exec-kpi-val { color: var(--green); }
.exec-kpi-delta { font-size: 11px; }
.exec-kpi-delta.up { color: var(--green); }
.exec-kpi-delta.dn { color: var(--red); }
.exec-kpi-delta.w { color: var(--amber); }

/* ── Decision cards ── */
.dec { border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; border: 1px solid transparent; }
.dec.alta { background: var(--green-l); border-color: var(--green-b); }
.dec.media { background: var(--amber-l); border-color: var(--amber-b); }
.dec.info { background: var(--blue-l); border-color: var(--blue-b); }
.dec-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.dec-badge { font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 99px; letter-spacing: .04em; flex-shrink: 0; }
.dec-badge.alta { background: var(--green-l); color: var(--green-t); border: 1px solid var(--green-b); }
.dec-badge.media { background: var(--amber-l); color: var(--amber-t); border: 1px solid var(--amber-b); }
.dec-badge.info { background: var(--blue-l); color: var(--blue-t); border: 1px solid var(--blue-b); }
.dec-title { font-size: 13px; font-weight: 500; color: var(--text1); }
.dec-body { font-size: 12px; color: var(--text2); line-height: 1.6; margin-bottom: 10px; }
.dec-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dec-impacto { display: inline-flex; align-items: center; gap: 6px; border-radius: 7px; padding: 5px 11px; font-size: 12px; font-weight: 600; }
.dec-impacto.alta { background: var(--green-l); color: var(--green-t); border: 1px solid var(--green-b); }
.dec-impacto.media { background: var(--amber-l); color: var(--amber-t); border: 1px solid var(--amber-b); }
.dec-impacto.info { background: var(--blue-l); color: var(--blue-t); border: 1px solid var(--blue-b); }

/* ── Tabla ── */
.tw { overflow-x: auto; }
.tw::-webkit-scrollbar { height: 3px; }
.tw::-webkit-scrollbar-thumb { background: var(--border); }
table { width: 100%; border-collapse: collapse; font-size: 11px; }
th { text-align: left; padding: 7px 8px; font-size: 9px; font-weight: 600; color: var(--text3); border-bottom: 1px solid var(--border); white-space: nowrap; text-transform: uppercase; letter-spacing: .05em; }
td { padding: 8px; border-bottom: 1px solid var(--border); color: var(--text1); vertical-align: middle; font-size: 11px; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--bg2); }

/* ── Badges ── */
.bdg { display: inline-block; padding: 2px 7px; border-radius: 99px; font-size: 9px; font-weight: 600; }
.bdg.r { background: var(--red-l); color: var(--red-t); }
.bdg.g { background: var(--green-l); color: var(--green-t); }
.bdg.a { background: var(--amber-l); color: var(--amber-t); }
.bdg.b { background: var(--blue-l); color: var(--blue-t); }
.bdg.gr { background: var(--bg3); color: var(--text3); }
.bdg.p { background: var(--purple-l); color: var(--purple-t); }

/* ── Botones ── */
.btn-primary { background: var(--red); color: #fff; border: none; border-radius: 8px; padding: 8px 16px; font-size: 12px; font-weight: 500; cursor: pointer; font-family: 'Inter', sans-serif; display: inline-flex; align-items: center; gap: 6px; }
.btn-primary:hover { opacity: .88; }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text2); border-radius: 8px; padding: 7px 14px; font-size: 11px; cursor: pointer; font-family: 'Inter', sans-serif; transition: all .12s; display: inline-flex; align-items: center; gap: 5px; }
.btn-ghost:hover { border-color: var(--red); color: var(--red); }
.btn-sm { font-size: 10px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--border2); background: transparent; cursor: pointer; font-family: 'Inter', sans-serif; color: var(--text3); transition: all .12s; }
.btn-sm:hover { color: var(--red); border-color: var(--red); }

/* ── Form fields ── */
.field-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field-label { font-size: 11px; color: var(--text2); font-weight: 600; }
.field-input { background: var(--bg2); border: 1px solid var(--border); border-radius: 7px; padding: 7px 10px; font-size: 12px; color: var(--text1); font-family: 'Inter', sans-serif; outline: none; transition: border .12s; width: 100%; }
.field-input:focus { border-color: var(--red); }
.field-note { font-size: 9px; color: var(--text3); }
textarea.field-input { resize: none; }

/* ── Bar chart ── */
.chart-wrap { position: relative; height: 100px; margin-bottom: 8px; }
.chart-bars { display: flex; align-items: flex-end; gap: 3px; height: 100%; padding-top: 4px; }
.chart-bar { flex: 1; border-radius: 4px 4px 0 0; min-width: 8px; transition: opacity .14s; cursor: pointer; position: relative; }
.chart-bar:hover { opacity: .8; }
.chart-bar .tooltip { display: none; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: var(--text1); color: var(--bg1); font-size: 9px; padding: 3px 6px; border-radius: 4px; white-space: nowrap; z-index: 10; }
.chart-bar:hover .tooltip { display: block; }
.chart-labels { display: flex; gap: 3px; }
.chart-label { flex: 1; text-align: center; font-size: 8px; color: var(--text3); }

/* ── Bar horizontal ── */
.br { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bt { flex: 1; height: 6px; background: var(--bg3); border-radius: 99px; overflow: hidden; }
.bf { height: 100%; border-radius: 99px; }
.bl { min-width: 40px; text-align: right; color: var(--text3); font-size: 10px; }
.br-label { font-size: 10px; color: var(--text2); min-width: 84px; }

/* ── Room grid ── */
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; margin-bottom: 12px; }
.rc {
  height: 52px; border-radius: 8px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; font-size: 9px; font-weight: 600;
  gap: 2px; border: 1px solid transparent; cursor: pointer; transition: opacity .12s;
  position: relative;
}
.rc:hover { opacity: .75; }
.rc i { font-size: 14px; }
.rc.libre { background: var(--green-l); color: var(--green-t); border-color: var(--green-b); }
.rc.limpieza { background: var(--amber-l); color: var(--amber-t); border-color: var(--amber-b); }
.rc.mantenimiento { background: var(--bg3); color: var(--text3); border-color: var(--border); }
.rc.ocupada-rot { background: var(--rot-l); color: var(--rot); border-color: var(--rot-b); }
.rc.ocupada-aman { background: var(--aman-l); color: var(--aman); border-color: var(--aman-b); }
.rc.ocupada-rec { background: var(--rec-l); color: var(--rec); border-color: var(--rec-b); }
.rc.ocupada-fds { background: var(--fds-l); color: var(--fds); border-color: var(--fds-b); }
.rc.timer-warn { border-color: var(--amber) !important; box-shadow: 0 0 0 2px var(--amber-l); }
.rc.timer-over { border-color: var(--red) !important; box-shadow: 0 0 0 2px var(--red-l); animation: pulse-red 1.5s infinite; }
.hab-timer { position: absolute; bottom: 2px; left: 0; right: 0; font-size: 8px; font-weight: 700; text-align: center; letter-spacing: .02em; line-height: 1; }
.hab-type { position: absolute; top: 2px; right: 3px; font-size: 7px; font-weight: 700; border-radius: 3px; padding: 1px 3px; }

@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 0 2px var(--red-l); }
  50% { box-shadow: 0 0 0 4px #F5C6C288; }
}

/* ── Tipo badges ── */
.tipo-rot { background: var(--rot-l); color: var(--rot); font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 99px; }
.tipo-aman { background: var(--aman-l); color: var(--aman); font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 99px; }
.tipo-rec { background: var(--rec-l); color: var(--rec); font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 99px; }
.tipo-fds { background: var(--fds-l); color: var(--fds); font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 99px; }

/* ── Tipo selector (entradas) ── */
.tipo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.tipo-card { border: 2px solid var(--border); border-radius: 10px; padding: 12px 10px; cursor: pointer; transition: all .14s; text-align: center; }
.tipo-card:hover { border-color: var(--border2); }
.tipo-card.selected-rot { border-color: var(--rot); background: var(--rot-l); }
.tipo-card.selected-aman { border-color: var(--aman); background: var(--aman-l); }
.tipo-card.selected-rec { border-color: var(--rec); background: var(--rec-l); }
.tipo-card.selected-fds { border-color: var(--fds); background: var(--fds-l); }
.tipo-card-icon { font-size: 20px; margin-bottom: 4px; }
.tipo-card-name { font-size: 12px; font-weight: 600; color: var(--text1); margin-bottom: 2px; }
.tipo-card-price { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 700; }
.tipo-card.selected-rot .tipo-card-price { color: var(--rot); }
.tipo-card.selected-aman .tipo-card-price { color: var(--aman); }
.tipo-card.selected-rec .tipo-card-price { color: var(--rec); }
.tipo-card.selected-fds .tipo-card-price { color: var(--fds); }
.tipo-card-desc { font-size: 9px; color: var(--text3); margin-top: 2px; line-height: 1.4; }

/* ── Recargo alert ── */
.recargo-alert { background: var(--red-l); border: 1.5px solid var(--red-b); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.recargo-alert i { font-size: 20px; color: var(--red); flex-shrink: 0; }
.recargo-alert-text { flex: 1; font-size: 12px; color: var(--red-t); line-height: 1.5; }
.recargo-alert-price { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 700; color: var(--red); flex-shrink: 0; }

/* ── Leyenda ── */
.legend { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.li { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text2); }
.ld { width: 9px; height: 9px; border-radius: 2px; }

/* ── Nota informativa ── */
.snote { font-size: 10px; color: var(--text3); margin-bottom: 12px; padding: 8px 12px; background: var(--bg2); border-radius: 7px; border-left: 2px solid var(--border2); line-height: 1.5; }

/* ── Employee cards ── */
.emp-card { background: var(--bg1); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; display: flex; align-items: center; gap: 14px; cursor: pointer; transition: box-shadow .12s; }
.emp-card:hover { box-shadow: var(--shadow-md); }
.emp-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; flex-shrink: 0; border: 2px solid transparent; }
.emp-avatar.top { background: var(--amber-l); color: var(--amber-t); border-color: var(--amber-b); }
.emp-avatar.ok { background: var(--green-l); color: var(--green-t); border-color: var(--green-b); }
.emp-avatar.warn { background: var(--red-l); color: var(--red-t); border-color: var(--red-b); }
.emp-info { flex: 1; min-width: 0; }
.emp-name { font-size: 13px; font-weight: 600; color: var(--text1); margin-bottom: 3px; }
.emp-role { font-size: 10px; color: var(--text3); }
.emp-stats { display: flex; gap: 10px; margin-top: 5px; flex-wrap: wrap; }
.emp-stat { font-size: 10px; color: var(--text2); }
.emp-stat strong { color: var(--text1); }
.score-ring { width: 48px; height: 48px; flex-shrink: 0; position: relative; }
.score-ring svg { transform: rotate(-90deg); }
.score-val { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 700; }

/* ── Propuestas (equipo) ── */
.propuesta { border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; border: 1px solid transparent; display: flex; align-items: flex-start; gap: 10px; }
.propuesta.incentivo { background: var(--green-l); border-color: var(--green-b); }
.propuesta.sancion { background: var(--red-l); border-color: var(--red-b); }
.propuesta.neutral { background: var(--amber-l); border-color: var(--amber-b); }
.propuesta-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.propuesta-body { flex: 1; }
.propuesta-title { font-size: 12px; font-weight: 600; color: var(--text1); margin-bottom: 3px; }
.propuesta-desc { font-size: 11px; color: var(--text2); line-height: 1.5; margin-bottom: 8px; }
.propuesta-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.p-btn-ok { font-size: 11px; padding: 4px 10px; border-radius: 6px; border: none; cursor: pointer; font-family: 'Inter', sans-serif; font-weight: 500; }
.p-btn-ok.g { background: var(--green); color: #fff; }
.p-btn-ok.r { background: var(--red); color: #fff; }
.p-btn-ok.a { background: var(--amber); color: #fff; }
.p-btn-dis { font-size: 11px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border2); background: transparent; cursor: pointer; font-family: 'Inter', sans-serif; color: var(--text3); }

/* ── Event log ── */
.event-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 11px; }
.event-row:last-child { border-bottom: none; }
.event-type { font-size: 8px; font-weight: 700; padding: 2px 6px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; margin-top: 2px; letter-spacing: .04em; }
.evt-PMS { background: var(--blue-l); color: var(--blue); }
.evt-OPS { background: var(--red-l); color: var(--red); }
.evt-FLOW { background: var(--green-l); color: var(--green); }
.evt-MAINT { background: var(--amber-l); color: var(--amber); }
.evt-ACCESS { background: var(--purple-l); color: var(--purple); }
.event-main { flex: 1; min-width: 0; }
.event-title { font-weight: 500; color: var(--text1); margin-bottom: 2px; }
.event-meta { font-size: 9px; color: var(--text3); }
.event-time { font-size: 9px; color: var(--text3); white-space: nowrap; flex-shrink: 0; }

/* ── Workflow ── */
.wf-card { background: var(--bg1); border: 1.5px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 10px; cursor: pointer; transition: all .14s; }
.wf-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.07); border-color: var(--border2); }
.wf-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.wf-status { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.wf-status.on { background: var(--green); }
.wf-status.off { background: var(--text3); }
.wf-name { font-size: 13px; font-weight: 500; color: var(--text1); flex: 1; }
.wf-chain { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 10px; }
.wf-block { padding: 3px 8px; border-radius: 6px; font-weight: 600; letter-spacing: .02em; }
.wf-trigger { background: var(--blue-l); color: var(--blue); }
.wf-condition { background: var(--amber-l); color: var(--amber); }
.wf-action { background: var(--green-l); color: var(--green); }
.wf-arrow { color: var(--text3); font-size: 12px; }
.wf-runs { font-size: 10px; color: var(--text3); margin-top: 6px; }

/* ── Toggle switches ── */
.int-toggle { width: 38px; height: 21px; border-radius: 99px; border: none; cursor: pointer; position: relative; transition: background .2s; flex-shrink: 0; }
.int-toggle.on { background: var(--green); }
.int-toggle.off { background: var(--bg3); }
.int-toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.int-toggle.on::after { transform: translateX(17px); }

/* ── Cfg tabs ── */
.cfg-tabs { display: flex; gap: 4px; margin-bottom: 14px; flex-wrap: wrap; }
.ctab { font-size: 11px; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--border); cursor: pointer; color: var(--text3); background: transparent; font-family: 'Inter', sans-serif; transition: all .12s; }
.ctab:hover { color: var(--text1); border-color: var(--border2); }
.ctab.active { background: var(--red-l); color: var(--red); border-color: var(--red-b); }
.cfgp { display: none; }
.cfgp.active { display: block; }

/* ── Alert items ── */
.alert-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.alert-item:last-child { border-bottom: none; padding-bottom: 0; }
.alert-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.alert-dot.r { background: var(--red); }
.alert-dot.a { background: var(--amber); }
.alert-dot.g { background: var(--green); }
.alert-text { font-size: 12px; color: var(--text1); line-height: 1.5; }
.alert-meta { font-size: 10px; color: var(--text3); margin-top: 2px; }

/* ── Estado grid ── */
.estado-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin-bottom: 14px; }
.estado-card { border-radius: 10px; padding: 12px; border: 1.5px solid transparent; cursor: pointer; transition: all .14s; }
.estado-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.estado-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 4px; }
.estado-desc { font-size: 9px; color: var(--text2); line-height: 1.4; }
.estado-count { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 700; margin-top: 6px; }
.estado-VACANT_DIRTY { background: var(--amber-l); border-color: var(--amber-b); }
.estado-VACANT_DIRTY .estado-label { color: var(--amber); }
.estado-VACANT_CLEAN { background: var(--green-l); border-color: var(--green-b); }
.estado-VACANT_CLEAN .estado-label { color: var(--green); }
.estado-OCCUPIED_CLEAN { background: var(--blue-l); border-color: var(--blue-b); }
.estado-OCCUPIED_CLEAN .estado-label { color: var(--blue); }
.estado-OCCUPIED_DIRTY { background: var(--red-l); border-color: var(--red-b); }
.estado-OCCUPIED_DIRTY .estado-label { color: var(--red); }
.estado-MAINTENANCE_BLOCKED { background: var(--red-l); border-color: var(--red-b); }
.estado-MAINTENANCE_BLOCKED .estado-label { color: var(--red); }
.estado-OUT_OF_SERVICE { background: var(--bg3); border-color: var(--border2); }
.estado-OUT_OF_SERVICE .estado-label { color: var(--text3); }

/* ── Two-col grid ── */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── Ficha empleado ── */
.ficha-header { background: linear-gradient(135deg, var(--green-l), #D1FAE5); border: 1px solid var(--green-b); border-radius: 14px; padding: 18px; margin-bottom: 14px; display: flex; align-items: center; gap: 16px; }
.ficha-avatar { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; border: 3px solid var(--green-b); flex-shrink: 0; }
.ficha-nombre { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 700; color: var(--text1); }
.ficha-rol { font-size: 11px; color: var(--text3); margin-top: 2px; }
.ficha-score { font-family: 'Space Grotesk', sans-serif; font-size: 36px; font-weight: 700; color: var(--green); margin-left: auto; }
.ficha-score-label { font-size: 10px; color: var(--text3); text-align: right; }
.logro { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.logro:last-child { border-bottom: none; }
.logro-icon { font-size: 22px; flex-shrink: 0; }
.logro-info { flex: 1; }
.logro-title { font-size: 12px; font-weight: 500; color: var(--text1); }
.logro-desc { font-size: 10px; color: var(--text3); margin-top: 2px; }
.logro-val { font-size: 12px; font-weight: 600; color: var(--green); }

/* ── Reporte anónimo ── */
.reporte-anonimo { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-top: 12px; }
.ra-label { font-size: 10px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }

/* ── Hist evento ── */
.hist-evento { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.hist-evento:last-child { border-bottom: none; }
.hist-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.hist-dot.g { background: var(--green); }
.hist-dot.r { background: var(--red); }
.hist-dot.a { background: var(--amber); }
.hist-dot.b { background: var(--blue); }
.hist-text { flex: 1; font-size: 11px; color: var(--text1); line-height: 1.5; }
.hist-date { font-size: 10px; color: var(--text3); white-space: nowrap; flex-shrink: 0; }

/* ── Checkout summary ── */
.checkout-summary { background: var(--bg2); border-radius: 10px; padding: 12px 14px; border: 1px solid var(--border); margin-bottom: 10px; }

/* ─ Blazor error UI ─ */
#blazor-error-ui {
  background: var(--red-l); border-top: 1px solid var(--red-b);
  bottom: 0; color: var(--red-t); display: none; left: 0;
  padding: .75rem 1.25rem; position: fixed; width: 100%; z-index: 1000;
  font-size: 12px;
}
#blazor-error-ui .dismiss { cursor: pointer; float: right; font-weight: 700; }

/* ─ Mobile ─ */
.mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 5; }
@media(max-width: 768px) {
  .sidebar { position: fixed; top: 0; left: 0; height: 100%; z-index: 20; transform: translateX(-100%); transition: transform .25s cubic-bezier(.4,0,.2,1), width .22s; }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar.collapsed { width: 248px; transform: translateX(-100%); }
  .sidebar.collapsed.mobile-open { transform: translateX(0); }
  .mobile-overlay.active { display: block; }
  .mob-btn { display: flex; }
  .topbar { padding: 0 14px; gap: 8px; }
  .content { padding: 14px; }
  .kgrid { grid-template-columns: repeat(2, 1fr); }
  .exec-grid { grid-template-columns: repeat(2, 1fr); }
  .two { grid-template-columns: 1fr; }
  .tipo-grid { grid-template-columns: 1fr 1fr; }
}