:root{
  --lilas:#8e24aa;
  --lilas-dark:#7b1fa2;
  --lilas-soft:#f3e5f5;
  --bg:#f5f7fb;
  --card:#ffffff;
  --text:#101828;
  --muted:#667085;
  --line:#e4e7ec;
  --sidebar-w: 260px;
  --topbar-h: 58px;
  --radius: 16px;
  --shadow: 0 10px 28px rgba(16,24,40,.06);
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  padding:0;
  width:100%;
  min-height:100%;
}

body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}

a{
  text-decoration:none;
}

img{
  max-width:100%;
  display:block;
}

/* ===== SHELL ===== */
.app-shell{
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  min-height:100vh;
}

/* ===== SIDEBAR ===== */
.app-sidebar{
  grid-column:1;
  grid-row:1 / span 2;
  background:#fff;
  border-right:1px solid var(--line);
  min-width:0;
  width:var(--sidebar-w);
  height:100vh;
  position:sticky;
  top:0;
  z-index:1035;
}

.sidebar-head{
  padding:14px 12px 12px;
  border-bottom:1px solid var(--line);
}

.sidebar-head img{
  width:72px;
  height:72px;
  object-fit:contain;
  margin:0 auto 10px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(142,36,170,.18);
  padding:6px;
}

.sidebar-title{
  margin:0;
  font-weight:900;
  font-size:1.05rem;
  color:#101828;
}

.sidebar-sub{
  margin:2px 0 0;
  font-size:.92rem;
  color:var(--muted);
  font-weight:600;
}

.app-nav{
  padding:10px 8px 12px;
  min-width:0;
}

.nav-section{
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:#98a2b3;
  font-weight:900;
  padding:10px 10px 4px;
}

.app-nav .nav-link{
  min-height:46px;
  border-radius:14px;
  padding:10px 12px;
  color:#24324b;
  font-weight:800;
  transition:all .18s ease;
}

.app-nav .nav-link i{
  font-size:1rem;
  color:#64748b;
  flex:0 0 auto;
}

.app-nav .nav-link:hover{
  background:#f8fafc;
  color:#101828;
}

.app-nav .nav-link:hover i{
  color:var(--lilas);
}

.app-nav .nav-link.active{
  background:rgba(142,36,170,.10);
  color:#101828;
  border:1px solid rgba(142,36,170,.18);
}

.app-nav .nav-link.active i{
  color:var(--lilas);
}

.app-nav .collapse .nav-link{
  margin-top:2px;
  margin-left:8px;
  padding-left:18px;
  min-height:42px;
}

/* ===== TOPBAR ===== */
.app-topbar{
  grid-column:2;
  grid-row:1;
  background:var(--lilas);
  border-bottom:1px solid rgba(255,255,255,.12);
  position:sticky;
  top:0;
  z-index:1030;
  min-width:0;
}

.app-topbar .container-fluid{
  min-height:var(--topbar-h);
}

.app-topbar .fw-bold{
  color:#fff;
}

.app-topbar .btn-outline-secondary{
  border-color:rgba(255,255,255,.45);
  color:#fff;
  background:transparent;
}

.app-topbar .btn-outline-secondary:hover{
  background:rgba(255,255,255,.14);
  color:#fff;
  border-color:rgba(255,255,255,.7);
}

.app-topbar .btn-outline-danger{
  border-color:rgba(255,255,255,.45);
  color:#fff;
  background:transparent;
}

.app-topbar .btn-outline-danger:hover{
  background:rgba(255,255,255,.14);
  color:#fff;
  border-color:rgba(255,255,255,.7);
}

/* ===== MAIN ===== */
.app-main{
  grid-column:2;
  grid-row:2;
  min-width:0;
  overflow-x:hidden;
  padding:14px;
}

/* ===== CARDS / ELEMENTOS ===== */
.card{
  border:1px solid rgba(16,24,40,.08);
  box-shadow:var(--shadow);
  border-radius:16px;
}

.btn-lilas{
  background:var(--lilas);
  border-color:var(--lilas);
  color:#fff;
}

.btn-lilas:hover{
  background:var(--lilas-dark);
  border-color:var(--lilas-dark);
  color:#fff;
}

.btn-outline-lilas{
  border:1px solid rgba(142,36,170,.35);
  color:var(--lilas);
  background:#fff;
}

.btn-outline-lilas:hover{
  background:var(--lilas-soft);
  border-color:rgba(142,36,170,.45);
  color:var(--lilas);
}

.text-lilas{
  color:var(--lilas) !important;
}

.bg-lilas-soft{
  background:var(--lilas-soft) !important;
}

.border-lilas{
  border-color:var(--lilas) !important;
}

/* ===== FORM ===== */
.form-control,
.form-select,
.input-group-text{
  border-radius:12px;
}

.form-control:focus,
.form-select:focus{
  border-color:rgba(142,36,170,.45);
  box-shadow:0 0 0 .25rem rgba(142,36,170,.12);
}

/* ===== TABLE ===== */
.table{
  --bs-table-bg: transparent;
}

.table thead th{
  border-bottom:1px solid var(--line);
}

.table tbody td{
  border-color:#eef2f6;
}

/* ===== MAPA / LEAFLET ===== */
.leaflet-container,
#map,
#mapa,
#mapaOperacional,
#mapAssistidasDash{
  z-index:1 !important;
}

.leaflet-popup-content-wrapper{
  border-radius:14px;
}

.leaflet-control-container .leaflet-top,
.leaflet-control-container .leaflet-bottom{
  z-index: 2 !important;
}

/* ===== OVERLAY ===== */
.app-overlay{
  position:fixed;
  inset:0;
  background:rgba(16,24,40,.35);
  opacity:0;
  visibility:hidden;
  transition:.2s ease;
  z-index:1040;
}

.app-overlay.show{
  opacity:1;
  visibility:visible;
}

/* ===== UTIL ===== */
.no-print{}
.uppercase{ text-transform:uppercase; }

/* ===== MOBILE ===== */
@media (max-width: 991.98px){
  .app-shell{
    display:block;
    min-height:100vh;
  }

  .app-sidebar{
    position:fixed !important;
    top:0;
    left:0;
    width:280px;
    max-width:86vw;
    height:100vh;
    transform:translateX(-100%);
    transition:transform .25s ease;
    z-index:1050;
    background:#fff;
    overflow-y:auto;
    overflow-x:hidden !important;
    box-shadow:0 12px 30px rgba(16,24,40,.18);
    border-right:1px solid var(--line);
  }

  .app-sidebar.is-open{
    transform:translateX(0);
  }

  .app-topbar{
    position:sticky;
    top:0;
    z-index:1030;
    margin-left:0 !important;
    width:100% !important;
  }

  .app-main{
    margin-left:0 !important;
    width:100% !important;
    min-width:0;
    padding:12px;
  }

  html.no-scroll,
  body.sidebar-open{
    overflow:hidden;
  }

  .sidebar-head{
    padding-top:16px;
  }

  .sidebar-head img{
    width:64px;
    height:64px;
  }

  .sidebar-title{
    font-size:1rem;
  }

  .sidebar-sub{
    font-size:.84rem;
  }
}

/* ===== DESKTOP LARGE ===== */
@media (min-width: 1400px){
  .app-main{
    padding:18px;
  }
}

/* ===== PRINT ===== */
@media print{
  .no-print,
  .app-sidebar,
  .app-topbar,
  .app-overlay{
    display:none !important;
  }

  .app-shell{
    display:block !important;
  }

  .app-main{
    padding:0 !important;
    margin:0 !important;
    width:100% !important;
  }

  body{
    background:#fff;
  }

  .card{
    box-shadow:none !important;
    border:1px solid #ddd !important;
  }
}