:root{
  --bg1: #0f1724; /* deep navy */
  --bg2: #24143a; /* purple */
  --card-radius: 14px;
  --shadow: 0 10px 30px rgba(2,8,23,0.6);
  --muted: #9aa3b2;
  --accent-orange: #ff8a3d;
  --purple: #7c4dff;
  --green: #19c37d;
  --blue: #33a9ff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background: linear-gradient(120deg,var(--bg1), var(--bg2));
  color:#e6eef8;
}
.app{display:flex;min-height:100vh}

/* Sidebar */
.sidebar{
  width:260px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:22px 16px;
  border-right: 1px solid rgba(255,255,255,0.03);
  display:flex;flex-direction:column;gap:18px;
}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.logo{width:48px;height:48px;border-radius:10px;background:linear-gradient(135deg,var(--purple),var(--blue));display:flex;align-items:center;justify-content:center;font-weight:700}
.brand-text{font-weight:600;color:#fff}
.menu{display:flex;flex-direction:column;gap:8px}
.menu-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;background:transparent;border:0;color:var(--muted);font-size:16px;cursor:pointer;transition:all .18s ease}
.menu-item .icon{width:20px;height:20px;opacity:.9}
.menu-item span{flex:1;text-align:left}
.menu-item:hover{background:rgba(255,255,255,0.02);color:#fff;transform:translateX(4px)}
.menu-item.active{background:linear-gradient(90deg, rgba(255,138,61,0.13), rgba(255,138,61,0.06));color:var(--accent-orange);box-shadow:0 6px 18px rgba(255,138,61,0.08)}

/* Main */
.main{flex:1;display:flex;flex-direction:column}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:20px 28px;border-bottom:1px solid rgba(255,255,255,0.03)}
.topbar .title{font-size:20px;font-weight:600;color:#fff}
.top-actions{display:flex;gap:12px}
.top-btn{background:rgba(255,255,255,0.02);border:0;padding:12px;border-radius:10px;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.top-btn svg{width:18px;height:18px}
.top-btn:active{transform:scale(.98)}

/* Sidebar collapsed state */
.sidebar{transition:width .28s ease, opacity .28s ease}
.app.sidebar-collapsed .sidebar{width:72px}
.app.sidebar-collapsed .brand-text,
.app.sidebar-collapsed .menu-item span{display:none}
.app.sidebar-collapsed .menu-item{justify-content:center;padding-left:0;padding-right:0}
.app.sidebar-collapsed .logo{margin:0 auto}
.app.sidebar-collapsed .sidebar{overflow:hidden}

.top-btn.toggle{display:inline-flex;margin-right:8px}

/* small visual hint when collapsed */
.app.sidebar-collapsed .menu-item .icon{opacity:0.95}

.dashboard{padding:24px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:var(--card-radius);padding:18px;box-shadow:var(--shadow);min-height:200px;display:flex;flex-direction:column;justify-content:space-between}
.card-header{display:flex;justify-content:space-between;align-items:flex-end}
.card-header h3{margin:0;font-size:16px}
.card-header .sub{color:var(--muted);font-size:12px}
.card-body{display:flex;gap:18px;align-items:center}

.indicators{list-style:none;padding:0;margin:0;color:var(--muted);font-size:13px}
.indicators li{margin:6px 0}

/* color accents */
.card.purple .donut-seg{stroke:var(--purple)}
.card.green .network-svg .node circle{fill:var(--green)}
.card.green .link{stroke:rgba(25,195,125,0.18)}
.card.orange{--local-accent:var(--accent-orange)}
.card.blue .bar{background:linear-gradient(180deg, rgba(51,169,255,0.95), rgba(51,169,255,0.7))}

/* donut chart */
.donut{width:120px;height:120px}
.donut-bg{fill:none;stroke:#142232;stroke-width:4}
.donut-seg{fill:none;stroke-width:4;stroke-linecap:round;transform-origin:50% 50%;transform:rotate(-90deg)}
.donut-number{font-size:6px;fill:#fff;text-anchor:middle}

.network{display:flex;align-items:center;gap:12px}
.network-svg{width:220px;height:120px}
.network-stats{display:flex;flex-direction:column;gap:8px;color:var(--muted);font-size:13px}

.mini-cards{display:flex;gap:10px}
.mini-card{background:rgba(255,255,255,0.03);padding:12px;border-radius:10px;min-width:80px;text-align:center}
.mc-title{font-size:12px;color:var(--muted)}
.mc-value{font-weight:700;font-size:18px}
.cta{background:var(--accent-orange);border:0;padding:10px 14px;border-radius:10px;color:#fff;cursor:pointer}

.chart .bars{display:flex;align-items:end;gap:8px;height:80px}
.chart .bar{width:18px;background:linear-gradient(180deg, rgba(124,77,255,0.9), rgba(51,169,255,0.9));border-radius:6px}
.chart-legend{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;margin-top:12px}

/* touch friendly */
button{outline:none}
button, .menu-item{touch-action:manipulation}

/* Responsive for kiosk: collapse grid if narrow */
@media (max-width:1400px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .sidebar{width:220px}
}
@media (max-width:1000px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .sidebar{display:none}
  .topbar{padding-left:16px;padding-right:16px}
}
@media (max-width:600px){
  .cards{grid-template-columns:1fr}
}

/* Management panel styles */
.management-panel{padding:24px;border-top:1px solid rgba(255,255,255,0.02)}
.management-panel .panel-title{font-size:18px;margin:0 0 12px 0;color:#fff}
.store-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.store-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:18px;
  border-radius:var(--card-radius);
  box-shadow:var(--shadow);
  min-height:140px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:transform .18s ease, box-shadow .18s ease;
}
.store-card{position:relative}
.store-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(2,8,23,0.72)}
.store-card{cursor:pointer;padding-bottom:56px}

.sc-actions{position:absolute;right:16px;bottom:14px;display:flex;gap:10px}
.store-map-btn{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px 12px;border-radius:10px;color:#eaf3ff;font-weight:600;cursor:pointer;font-size:13px}
.store-map-btn:hover{background:rgba(255,255,255,0.02);transform:translateY(-2px)}
.store-map-btn:active{transform:translateY(0)}
.store-card .store-map-btn{margin-left:0}

/* On narrow screens place the action button inline under content */
@media (max-width:700px){
  .store-card{padding-bottom:18px}
  .sc-actions{position:static;margin-top:12px;justify-content:flex-start}
}
.store-card h4{margin:0;font-size:16px;font-weight:600;color:#fff}
.store-card .sc-sub{font-size:12px;color:var(--muted);margin-top:6px}
.store-card .sc-metric{font-size:14px;margin-top:10px;color:#fff}
.store-card .sc-note{font-size:12px;color:var(--muted);margin-top:8px}

/* icon inside store card */
.sc-header{display:flex;align-items:center;gap:12px}
.sc-icon-wrap{width:44px;height:44px;border-radius:10px;background:rgba(255,255,255,0.03);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sc-icon{width:28px;height:28px;color:#fff;opacity:0.95;display:block}
.sc-icon path{vector-effect:non-scaling-stroke}
.sc-title{display:flex;flex-direction:column}

.store-fashion .sc-icon{color:rgba(124,77,255,0.95)}
.store-electronics .sc-icon{color:rgba(51,169,255,0.95)}
.store-food .sc-icon{color:rgba(255,138,61,0.95)}
.store-home .sc-icon{color:rgba(25,195,125,0.95)}
.store-fashion{border-left:4px solid rgba(124,77,255,0.9)}
.store-electronics{border-left:4px solid rgba(51,169,255,0.9)}
.store-food{border-left:4px solid rgba(255,138,61,0.95)}
.store-home{border-left:4px solid rgba(25,195,125,0.95)}

@media (max-width:1400px){
  .store-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1000px){
  .store-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .store-grid{grid-template-columns:1fr}
}

/* Entretenimientos */
.entretenimientos-panel{padding:24px;border-top:1px solid rgba(255,255,255,0.02)}
.entretenimientos-panel .panel-title{font-size:18px;margin:0 0 12px 0;color:#fff}
.ent-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ent-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:var(--card-radius);box-shadow:var(--shadow);min-height:140px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;transition:transform .25s cubic-bezier(.2,.9,.3,1),box-shadow .25s ease;transform-style:preserve-3d;cursor:pointer;position:relative}
.ent-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(2,8,23,0.72)}
.ent-header{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px}
.ent-left{display:flex;align-items:center;gap:12px}
.ent-img{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:28px;background:rgba(255,255,255,0.03);flex-shrink:0}
.ent-icon{width:28px;height:28px;display:block}
.ent-img svg{width:28px;height:28px;fill:currentColor}

/* icon color overrides per variant */
.ent-arcade .ent-img{color:rgba(124,77,255,0.95)}
.ent-cine .ent-img{color:rgba(255,138,61,0.95)}
.ent-bowling .ent-img{color:rgba(25,195,125,0.95)}
.ent-park .ent-img{color:rgba(255,95,160,0.95)}

/* mini-cards inside entretenimientos (polished look) */
.ent-mini-cards{display:flex;gap:10px;margin-top:12px;width:100%}
.ent-mini-cards .mini-card{min-width:86px;padding:10px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));text-align:center;box-shadow:inset 0 1px 0 rgba(255,255,255,0.02)}
.ent-mini-cards .mc-title{font-size:12px;color:var(--muted);margin-bottom:6px}
.ent-mini-cards .mc-value{font-weight:800;font-size:18px}
.ent-info h4{margin:0;font-size:16px}
.ent-sub{font-size:12px;color:var(--muted);margin-top:6px}
.ent-metric{font-size:13px;color:#fff;margin-top:8px}
.ent-actions{margin-left:0}
.ent-cta{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);padding:10px 14px;border-radius:12px;color:#fff;font-weight:700;cursor:pointer;box-shadow:0 6px 14px rgba(2,8,23,0.6)}
.ent-cta:hover{transform:translateY(-2px)}

/* Position "Ver detalles" in bottom-right only for Arcade card */
.ent-arcade{padding-bottom:62px}
.ent-arcade .ent-actions{position:absolute;right:16px;bottom:14px}

@media (max-width:700px){
  .ent-arcade{padding-bottom:18px}
  .ent-arcade .ent-actions{position:static;margin-top:12px}
}

/* small responsive */
@media (max-width:1400px){.ent-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1000px){.ent-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.ent-grid{grid-template-columns:1fr}}

/* floating subtle animation (kept for reference) */
@keyframes entFloat{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
/* Apply professional Arcade Galaxy layout to all entretenimientos cards: no floating, button fixed bottom-right */
.ent-card{animation:none;padding-bottom:62px}
.ent-card .ent-actions{position:absolute;right:16px;bottom:14px}
@media (max-width:700px){
  .ent-card{padding-bottom:18px}
  .ent-card .ent-actions{position:static;margin-top:12px}
}

/* variant accents */
.ent-arcade .ent-img{background:linear-gradient(135deg,rgba(124,77,255,0.14),rgba(51,169,255,0.06))}
.ent-cine .ent-img{background:linear-gradient(135deg,rgba(255,138,61,0.12),rgba(255,138,61,0.04))}
.ent-bowling .ent-img{background:linear-gradient(135deg,rgba(25,195,125,0.12),rgba(25,195,125,0.04))}
.ent-park .ent-img{background:linear-gradient(135deg,rgba(255,95,160,0.12),rgba(255,95,160,0.04))}

/* Modal styles */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1200}
.modal.show{display:flex}
.modal-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(2,8,23,0.6), rgba(2,8,23,0.7));backdrop-filter:blur(6px)}
.modal-content{position:relative;max-width:1100px;width:90%;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:16px;padding:20px;box-shadow:0 24px 60px rgba(2,8,23,0.75);display:flex;flex-direction:column}
.modal-close{position:absolute;right:12px;top:12px;background:transparent;border:0;color:var(--muted);font-size:28px;cursor:pointer}
.modal-grid{display:flex;gap:18px;align-items:flex-start}
.modal-info{flex:1}
.modal-info h3{margin:0 0 6px 0;font-size:20px}
.modal-details{margin:12px 0 0 0;padding-left:18px;color:var(--muted)}
.modal-map{width:420px;flex-shrink:0;border-radius:12px;overflow:hidden;background:#0b1220}
.modal-map img{width:100%;height:100%;object-fit:cover;display:block}

@media (max-width:1000px){
  .modal-grid{flex-direction:column}
  .modal-map{width:100%;height:240px}
}