.app{
  display:flex;
  min-height:100vh;
}
.app[hidden]{display:none;}

/* ---------- Sidebar / navegación ---------- */
.sidebar{
  width:var(--sidebar-width);
  flex-shrink:0;
  background:var(--ocean-deep);
  color:var(--sand);
  padding:26px 20px;
  display:flex;
  flex-direction:column;
  gap:28px;
}

.brand{display:flex; gap:12px; align-items:flex-start;}
.brand-mark{width:34px; height:34px; flex-shrink:0; margin-top:2px;}
.brand-text .name{font-family:var(--font-display); font-size:16.5px; line-height:1.25; color:var(--sand); font-weight:600;}
.brand-text .sub{font-size:11.5px; color:#9FB6AC; margin-top:4px; letter-spacing:.02em;}

.primary-nav{display:flex; flex-direction:column; gap:2px;}

.nav-item{
  display:flex; align-items:center; gap:10px;
  min-height:var(--touch-target-min);
  width:100%;
  padding:10px 12px;
  border-radius:2px;
  background:none;
  border:none;
  border-left:2px solid transparent;
  color:#CDE0D8;
  cursor:pointer;
  font-size:14.5px;
  font-family:inherit;
  text-align:left;
  transition:background .15s ease, color .15s ease;
}
.nav-item svg{width:16px; height:16px; opacity:.85; flex-shrink:0;}
.nav-item:hover{background:rgba(255,255,255,.06); color:#fff;}
.nav-item.active{background:rgba(255,255,255,.09); color:#fff; border-left-color:var(--amber);}

/* ---------- Indicador de sincronizacion (issue #15) ---------- */
.sync-indicator{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:2px;
  background:rgba(255,255,255,.06);
  font-size:12px;
  color:#CDE0D8;
}
.sync-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--ocean-line);
  flex-shrink:0;
}
.sync-indicator.is-offline .sync-dot,
.sync-indicator.is-atencion .sync-dot{background:var(--coral);}
.sync-indicator.is-pendiente .sync-dot{background:var(--amber);}
.sync-text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sidebar-footer{
  margin-top:auto;
  font-size:11.5px;
  color:#7E9A8F;
  line-height:1.5;
}

/* ---------- Contenido principal ---------- */
.main{
  flex:1;
  min-width:0;
  padding:34px 40px 60px;
}

.view{display:none;}
.view.is-active{display:block;}

.view-header{margin-bottom:26px;}
.view-header h1{font-size:26px; font-weight:600;}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  /* Reservado: en este issue el shell no necesita cambios en 980px;
     las vistas con grillas de contenido (panel, fichas, mapa) los definirán en sus propios issues. */
}

@media (max-width:760px){
  .app{flex-direction:column;}
  .sidebar{
    width:100%;
    flex-direction:row;
    align-items:center;
    padding:14px 16px;
    gap:14px;
    position:sticky;
    top:0;
    z-index:40;
  }
  .brand{flex-shrink:0;}
  .brand-text .sub{display:none;}
  .sidebar{flex-wrap:wrap; row-gap:10px;}
  /* El menú va en su propio renglón: entre la marca y el indicador de
     sincronización no le queda ancho en pantallas de teléfono. */
  .primary-nav{
    order:3;
    flex:1 1 100%;
    min-width:0;
    flex-direction:row;
    gap:4px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .nav-item{
    width:auto;
    padding:8px 10px;
    white-space:nowrap;
    border-left:none;
    border-bottom:2px solid transparent;
  }
  .nav-item.active{border-left:none; border-bottom-color:var(--amber);}
  .sidebar-footer{display:none;}
  .sync-indicator{
    flex-shrink:0;
    margin-left:auto;
    padding:6px 8px;
  }
  .sync-text{max-width:130px;}
  .main{padding:22px 16px 50px;}
  .view-header h1{font-size:21px;}
}

@media (max-width:480px){
  .main{padding:18px 14px 44px;}
  .sync-text{max-width:80px;}
}