/* Blu Datalab UI 1.5 — tema tecnológico ejecutivo */
:root {
  --navy:#07162f !important;
  --blue:#1769ff !important;
  --blue-soft:#eaf2ff !important;
  --cyan:#17c3ff !important;
  --gray-bg:#f1f4f8 !important;
  --border:#d8e0ea !important;
  --text:#13213a !important;
  --muted:#64748b !important;
  --white:#ffffff !important;
  --green:#e8f7ef !important;
  --green-text:#087443 !important;
  --orange:#fff2dc !important;
  --orange-text:#a24b05 !important;
  --red:#fdeaea !important;
  --red-text:#aa2020 !important;
  --purple:#f1edff !important;
  --purple-text:#6239b8 !important;
  --radius-xs:6px;
  --radius-sm:8px;
  --radius-md:10px;
  --radius-lg:12px;
  --shadow-card:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.045);
  --shadow-float:0 10px 30px rgba(15,23,42,.12);
}
html { background:#f1f4f8; }
body {
  background:
    linear-gradient(rgba(23,105,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,105,255,.025) 1px,transparent 1px),
    var(--gray-bg) !important;
  background-size:32px 32px !important;
  color:var(--text) !important;
  font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif !important;
  -webkit-font-smoothing:antialiased;
}
.app { grid-template-columns:232px minmax(0,1fr) !important; }
.sidebar {
  background:#07162f !important;
  padding:22px 16px !important;
  gap:20px !important;
  border-right:1px solid rgba(255,255,255,.08);
  box-shadow:12px 0 32px rgba(7,22,47,.08);
}
.brand,.brand-home { gap:11px !important; }
.brand-mark,.brand-home .brand-mark,.brand-home>img {
  width:44px !important;height:44px !important;min-width:44px !important;min-height:44px !important;
  max-width:44px !important;max-height:44px !important;border-radius:10px !important;
  background:#0d2347 !important;border:1px solid rgba(84,146,255,.24) !important;
  box-shadow:none !important;
}
.brand-mark img,.brand-home .brand-mark img,.brand-home>img { padding:3px !important; }
.brand-title,.brand-title strong,.brand-home .brand-title {
  font-size:14px !important;font-weight:780 !important;letter-spacing:.055em !important;text-transform:uppercase;
}
.brand-title span,.brand span,.brand-home .brand-title span {
  color:#8fb7ff !important;font-size:10px !important;font-weight:600 !important;letter-spacing:.025em !important;
  text-transform:none;
}
.nav { gap:4px !important; }
.nav a {
  min-height:40px;padding:9px 10px !important;border-radius:8px !important;color:#c8d5e8 !important;
  font-size:13px !important;font-weight:600 !important;gap:10px !important;border:1px solid transparent;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.nav a:hover { background:#0d2347 !important;border-color:rgba(99,153,255,.15) !important;color:#fff !important; }
.nav a.active {
  background:#102b58 !important;color:#fff !important;border-color:rgba(71,132,255,.45) !important;
  box-shadow:inset 3px 0 0 var(--blue) !important;
}
.nav-icon { width:17px;height:17px;flex:0 0 17px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round; }
.support {
  padding:13px !important;border-radius:10px !important;background:#0a1d3d !important;
  border:1px solid rgba(142,181,255,.14) !important;box-shadow:none !important;
}
.support strong { font-size:12px !important;text-transform:uppercase;letter-spacing:.05em; }
.support p { color:#9fb4d4 !important;font-size:11px !important; }
.main { padding:22px 28px 36px !important; }
.topbar {
  min-height:54px !important;border-radius:10px !important;padding:12px 16px !important;margin-bottom:20px !important;
  background:rgba(255,255,255,.92) !important;border:1px solid var(--border) !important;box-shadow:var(--shadow-card) !important;
  backdrop-filter:blur(10px);
}
.topbar strong,.event-meta strong { font-size:15px !important;letter-spacing:-.01em; }
.topbar span,.event-meta { font-size:12px !important; }
.page-title { margin-bottom:18px !important;align-items:center !important; }
.page-title h1 { font-size:clamp(25px,2.5vw,34px) !important;letter-spacing:-.035em !important;line-height:1.05 !important;margin-bottom:6px !important; }
.page-title p { font-size:13px !important;max-width:760px; }
.actions { gap:8px !important; }
.btn,button:not(.plain):not(.icon-btn) {
  min-height:38px !important;padding:9px 12px !important;border-radius:8px !important;font-size:12px !important;
  font-weight:700 !important;box-shadow:none !important;letter-spacing:.005em;
}
.btn.primary,button.primary,.primary.btn {
  background:var(--blue) !important;border-color:var(--blue) !important;color:#fff !important;
  box-shadow:0 5px 14px rgba(23,105,255,.18) !important;
}
.btn:hover,button:hover { transform:translateY(-1px); }
.card,.panel,.box,.section-card,.summary-card,.metric-card {
  border-radius:12px !important;border-color:var(--border) !important;box-shadow:var(--shadow-card) !important;background:#fff !important;
}
.card { padding:16px !important; }
.cards { gap:12px !important;margin-bottom:14px !important; }
.metric-label { font-size:11px !important;text-transform:uppercase;letter-spacing:.055em;font-weight:700;color:#718096 !important; }
.metric-value { font-size:clamp(22px,2vw,30px) !important;letter-spacing:-.035em !important; }
.metric-note { font-size:11px !important; }
.grid { gap:14px !important; }
.section-title { margin-bottom:11px !important; }
.section-title h2 { font-size:16px !important;letter-spacing:-.015em !important; }
.table-wrap { border-radius:9px !important;border-color:var(--border) !important; }
table { font-size:12px !important; }
th {
  background:#f7f9fc !important;color:#536176 !important;font-size:10px !important;letter-spacing:.05em;text-transform:uppercase;
  padding:10px 9px !important;
}
td { padding:10px 9px !important; }
tbody tr:hover td { background:#f8fbff; }
.badge { border-radius:6px !important;padding:4px 7px !important;font-size:10px !important;letter-spacing:.015em; }
.alert-item { border-radius:9px !important;padding:11px !important;grid-template-columns:34px 1fr !important; }
.alert-icon { width:34px !important;height:34px !important;border-radius:8px !important; }
.progress { height:6px !important; }
input,select,textarea {
  border-radius:8px !important;border-color:#cfd8e5 !important;background:#fff !important;
  box-shadow:inset 0 1px 1px rgba(15,23,42,.02) !important;
}
input:focus,select:focus,textarea:focus { border-color:var(--blue) !important;box-shadow:0 0 0 3px rgba(23,105,255,.10) !important; }
.modal-content,.modal-card,.dialog,.drawer,.detail-panel { border-radius:12px !important;box-shadow:var(--shadow-float) !important; }
/* Plano: más superficie, controles sobrios y técnicos */
.map-card,.canvas-card,.plan-card,.plano-card,.workspace,.map-shell,.canvas-shell { border-radius:12px !important;box-shadow:var(--shadow-card) !important; }
.zoom-controls,.zoom-toolbar,.map-controls,.canvas-controls { border-radius:8px !important;box-shadow:var(--shadow-card) !important; }
.legend,.leyenda,.filters,.filter-bar,.toolbar { border-radius:9px !important; }
/* Login ejecutivo */
body:has(.shell) { background:#07162f !important;background-image:radial-gradient(circle at 15% 0%,rgba(23,105,255,.23),transparent 35%),linear-gradient(135deg,#061228,#0a1f42) !important; }
.shell { border-radius:16px !important;box-shadow:0 30px 80px rgba(0,0,0,.30) !important; }
.hero { background:linear-gradient(180deg,rgba(5,18,42,.12),rgba(5,18,42,.78)),radial-gradient(circle at 18% 12%,rgba(23,195,255,.24),transparent 32%),#07162f !important; }
.panel { box-shadow:none !important; }
.panel h2 { font-size:29px !important;letter-spacing:-.03em !important; }
.login-logo img { width:min(310px,76%) !important;max-height:115px !important; }
/* Scrollbars */
* { scrollbar-width:thin;scrollbar-color:#9babc0 #edf1f6; }
*::-webkit-scrollbar { width:8px;height:8px; }
*::-webkit-scrollbar-track { background:#edf1f6; }
*::-webkit-scrollbar-thumb { background:#9babc0;border-radius:8px;border:2px solid #edf1f6; }
@media(max-width:1040px){
 .app{grid-template-columns:1fr !important}.sidebar{border-radius:0 !important;height:auto !important;position:static !important}.main{padding:16px !important}
 .nav{grid-template-columns:repeat(2,minmax(0,1fr)) !important}.page-title{align-items:flex-start !important}
}
@media(max-width:680px){.nav{grid-template-columns:1fr !important}.topbar{border-radius:8px !important}.card{padding:13px !important}}


/* ================================================================
   Plano comercial dominante — parche 1.5.1
   ================================================================ */
body.sidebar-collapsed .app{grid-template-columns:minmax(0,1fr)!important}
body.sidebar-collapsed .sidebar{display:none!important}
body.sidebar-collapsed .sidebar-toggle{left:12px!important}
#mainLayout{position:relative;display:block!important;min-width:0}
#mainLayout>.card:first-of-type{width:100%;min-width:0}
#mainLayout .side-panel{position:absolute;z-index:60;top:12px;right:12px;width:min(330px,calc(100% - 24px));max-height:calc(100vh - 160px);overflow:auto;background:rgba(255,255,255,.97)!important;backdrop-filter:blur(10px)}
#mainLayout .side-panel.editing-panel{width:min(650px,calc(100% - 24px))}
#mainLayout.panel-collapsed .side-panel{display:none!important}
#mainLayout.panel-collapsed .open-side-panel{display:inline-flex!important}
.map-wrap{height:calc(100vh - 300px)!important;min-height:620px!important;overflow:scroll!important;scrollbar-gutter:stable both-edges}
#commercialMap{max-width:none!important;flex:none}
.stand-label{font-size:15px!important;font-weight:950!important;fill:#061a3a!important;paint-order:stroke fill;stroke:rgba(255,255,255,.96);stroke-width:3px;stroke-linejoin:round}
.stand-sub{font-size:9px!important;font-weight:750!important;fill:#1f2937!important;paint-order:stroke fill;stroke:rgba(255,255,255,.95);stroke-width:2px}
.map-pan-toolbar{display:grid;grid-template-columns:auto minmax(180px,1fr) auto;align-items:center;gap:10px;padding:7px 12px;border-bottom:1px solid var(--border);background:#f8fafc;font-size:10px;color:var(--muted);font-weight:700}
.map-pan-toolbar input[type=range]{width:100%;accent-color:var(--blue);cursor:ew-resize}


/* Plano comercial v1.5.2 — panel lateral, grid métrica y medición */
.layout {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 330px !important;
  gap:12px !important;
  align-items:stretch !important;
}
.layout.panel-collapsed { grid-template-columns:minmax(0,1fr) !important; }
.side-panel {
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  min-width:0 !important;
  max-height:calc(100vh - 160px) !important;
  overflow:auto !important;
  background:#fff !important;
  box-shadow:var(--shadow-card) !important;
}
.side-panel.editing-panel { width:100% !important; }
.layout.panel-collapsed .side-panel { display:none !important; }
.meter-grid { opacity:0;transition:opacity .15s ease; }
#commercialMap.grid-visible .meter-grid { opacity:.82; }
.resize-measure-tooltip {
  position:fixed;z-index:9999;display:none;pointer-events:none;min-width:145px;
  padding:9px 11px;border-radius:8px;background:#07162f;color:#fff;
  box-shadow:0 10px 28px rgba(7,22,47,.28);font-size:12px;font-weight:800;line-height:1.35;white-space:nowrap;
}
.resize-measure-tooltip.visible{display:block}
.resize-measure-tooltip small{display:block;margin-top:2px;color:#9fc2ff;font-size:10px;font-weight:700}
@media(max-width:1200px){.layout{grid-template-columns:minmax(0,1fr) 300px !important}}
@media(max-width:900px){.layout{grid-template-columns:1fr !important}.side-panel{max-height:none !important}}


/* Plano comercial v1.5.3 */
#changePabellonSelectedStand,
#bulkChangePabellon { display:none !important; }


/* Plano comercial v1.5.4 — ficha lateral, edición contextual y legibilidad */
.zoom-toolbar-spacer{flex:1 1 auto;min-width:12px}
.zoom-toolbar .edit-master-btn{margin-left:auto;min-width:118px}
.selected-quick-edit{padding:12px 13px 14px;border-top:1px solid var(--border);background:#f8fafc}
.selected-quick-edit[hidden]{display:none!important}
.selected-quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:10px}
.selected-quick-grid label{display:flex;flex-direction:column;gap:4px;font-size:10px;font-weight:800;color:var(--muted)}
.selected-quick-grid label:first-child{grid-column:1/-1}
.selected-quick-grid input,.selected-quick-grid select{width:100%;min-width:0;padding:8px 9px;font-size:12px}
.selected-quick-edit .btn{width:100%}
.stand-sub{font-weight:800!important;fill:#334155!important;paint-order:stroke fill;stroke:rgba(255,255,255,.95);stroke-width:2px;letter-spacing:.01em}
.stand-group.merge-candidate .stand-rect{stroke:#16a34a!important;stroke-width:5!important;filter:drop-shadow(0 0 12px rgba(22,163,74,.55))}


/* =========================================================
   Plano comercial v1.6.3 — panel lateral fijo en flujo, sin superposición
   ========================================================= */
#mainLayout.layout {
  position:relative !important;
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:flex-start !important;
  gap:12px !important;
  width:100% !important;
  min-width:0 !important;
}
#mainLayout > .card:first-of-type {
  position:relative !important;
  order:1 !important;
  flex:1 1 auto !important;
  width:auto !important;
  min-width:0 !important;
  max-width:calc(100% - 342px) !important;
}
#mainLayout > #sidePanel.side-panel {
  position:sticky !important;
  order:2 !important;
  flex:0 0 330px !important;
  top:12px !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;
  inset:auto !important;
  width:330px !important;
  min-width:330px !important;
  max-width:330px !important;
  max-height:calc(100vh - 24px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  align-self:flex-start !important;
  z-index:5 !important;
  transform:none !important;
  margin:0 !important;
  backdrop-filter:none !important;
}
#mainLayout > #openSidePanel.open-side-panel {
  position:sticky !important;
  order:2 !important;
  top:12px !important;
  right:auto !important;
  left:auto !important;
  inset:auto !important;
  flex:0 0 auto !important;
  align-self:flex-start !important;
  margin-left:auto !important;
  transform:none !important;
}
#mainLayout.panel-collapsed > .card:first-of-type {
  max-width:100% !important;
  flex-basis:100% !important;
}
#mainLayout.panel-collapsed > #sidePanel.side-panel { display:none !important; }
#mainLayout.panel-collapsed > #openSidePanel.open-side-panel { display:inline-flex !important; }
#mainLayout:not(.panel-collapsed) > #openSidePanel.open-side-panel { display:none !important; }
@media(max-width:720px){
  #mainLayout.layout{flex-direction:column !important}
  #mainLayout > .card:first-of-type{width:100% !important;max-width:100% !important}
  #mainLayout > #sidePanel.side-panel{
    position:relative !important;top:auto !important;width:100% !important;
    min-width:0 !important;max-width:none !important;max-height:none !important;flex:0 0 auto !important;
  }
}