/* Variables de tema en el contenedor */
#bess-dashboard { --bg:#0b0b0c; --text:#f4f4f5; --card:#17171a; --border:#2a2a2e; --muted:#9ca3af; font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--text); background:var(--bg); }
#bess-dashboard[data-theme="light"] { --bg:#fafafa; --text:#111; --card:#fff; --border:#eaeaea; --muted:#666; }

/* HEADER */
#bess-dashboard .bess-header { position:sticky; top:0; z-index:3; background:#111; color:#fff; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
#bess-dashboard .bess-header h1 { margin:0; font-size:18px; }
#bess-dashboard .actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
#bess-dashboard .btn, #bess-dashboard select { background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:8px 10px; font-size:14px; line-height:1; }
#bess-dashboard .btn:hover { opacity:.95; cursor:pointer; }
#bess-dashboard .fld { display:flex; align-items:center; gap:6px; }

/* MAIN */
#bess-dashboard .bess-main { max-width:1400px; margin:0 auto; padding:16px; }
#bess-dashboard .sec-title { margin:8px 0; font-size:16px; }

#bess-dashboard .kpi-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap:10px; }
#bess-dashboard .kpi-card { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:10px; }
#bess-dashboard .kpi-label { font-size:12px; color:var(--muted); }
#bess-dashboard .kpi-value { font-size:20px; font-weight:600; }

#bess-dashboard .split { display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top:16px; min-height:60vh; }
#bess-dashboard #map { width:100%; height:62vh; background:var(--card); border:1px solid var(--border); border-radius:10px; position:relative; overflow:hidden; }
#bess-dashboard .chart { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:8px; min-height:62vh; overflow:hidden; }
#bess-dashboard .no-data { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--muted); pointer-events:none; }

#bess-dashboard .legend { position:absolute; bottom:0; left:0; right:0; padding:6px 8px; }
#bess-dashboard .legend-inner { display:flex; gap:8px; align-items:center; justify-content:center; }
#bess-dashboard .legend-title { font-size:12px; color:#111; margin-right:8px; }
#bess-dashboard[data-theme="dark"] .legend-title { color:#fff; }
#bess-dashboard .legend-strip { display:flex; gap:2px; align-items:stretch; flex:1; max-width:900px; }
#bess-dashboard .legend-cell { flex:1; min-width:60px; text-align:center; font-size:11px; border:1px solid rgba(0,0,0,.25); border-radius:4px; padding:4px 2px; }
#bess-dashboard .legend-bg { background:rgba(255,255,255,0.88); border-top-left-radius:10px; border-top-right-radius:10px; }

#bess-dashboard .below { display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top:16px; }
#bess-dashboard .table-card { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:0; overflow:hidden; display:flex; flex-direction:column; }
#bess-dashboard .table-title { padding:10px; border-bottom:1px solid var(--border); font-weight:600; }
#bess-dashboard .table-wrap { overflow:auto; }
#bess-dashboard table { width:100%; border-collapse:collapse; font-size:14px; }
#bess-dashboard thead { position:sticky; top:0; background:var(--bg); z-index:1; }
#bess-dashboard th, #bess-dashboard td { padding:10px; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; }
#bess-dashboard th { font-weight:600; color:var(--muted); }

/* M贸viles */
@media (max-width: 900px) {
  #bess-dashboard .split, #bess-dashboard .below { grid-template-columns:1fr; }
  #bess-dashboard #map, #bess-dashboard .chart { height:60vh; min-height:60vh; }
  #bess-dashboard .btn, #bess-dashboard select { font-size:16px; padding:10px 12px; } /* tap-targets */
}




/* ===== Full-bleed: romper el contenedor del tema y ocupar todo el viewport ===== */
#bess-dashboard.bess-full-bleed {
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: calc(-50vw);
  margin-right: calc(-50vw);
}

/* En navegadores modernos, 100dvw evita pequeños scrolls horizontales por la barra */
@supports (width: 100dvw) {
  #bess-dashboard.bess-full-bleed {
    width: 100dvw;
    max-width: 100dvw;
    margin-left: calc(-50dvw);
    margin-right: calc(-50dvw);
  }
}

/* El contenido interno puede tener un límite cómodo (controlado por data-max) */
#bess-dashboard .bess-main { 
  /* por defecto ya tenía max-width: 1400px y padding;
     ahora lo ligamos al atributo data-max del shortcode */
}
#bess-dashboard[data-max="0"] .bess-main { max-width: none; }
#bess-dashboard:not([data-max="0"]) .bess-main { 
  max-width: calc(attr(data-max number, 1600) * 1px);
}

/* Evita recortes si el tema usa overflow oculto en wrappers */
#bess-dashboard.bess-full-bleed { overflow: visible; }