/* Barra lateral de navegación, compartida por las pantallas de MinaIA.
   La inyecta navegacion.js; en pantallas angostas no aparece y cada pantalla
   conserva su navegación superior. */
:root { --lateral: 256px; }
body.lateral-plegada { --lateral: 64px; }

.lateral {
  position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--lateral);
  display: flex; flex-direction: column; gap: 4px; padding: 12px 12px 12px;
  background: var(--panel); border-right: 1px solid var(--line);
}
/* Sin transición en el cuerpo: al cambiar el ancho de la ventana el contenido no debe quedar corrido ni un instante. */
body.con-lateral { padding-left: var(--lateral); }
/* Con la barra a la vista, Panel y Casos se eligen ahí. */
body.con-lateral .tabs { display: none; }
body.con-lateral #btn-estructura { display: none; }

.lateral-marca { display: flex; align-items: center; gap: 10px; padding: 2px 6px 14px; min-height: 52px; }
.lateral-marca .logo { flex: none; width: 36px; height: 36px; border-radius: 12px; background: var(--accent); }
.lateral-marca strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.2; }
.lateral-marca small { color: var(--muted); font-size: 12px; }

.lateral-lista { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; }
.lateral-item {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px;
  border: 0; border-radius: 12px; background: none; color: var(--muted);
  font-size: 14px; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.lateral-item:hover { background: var(--gray-bg); color: var(--ink); }
.lateral-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lateral-item.activo { background: var(--accent-bg); color: var(--ink); }
/* Marca de la pantalla activa: una raya corta a la izquierda y el ícono en el color de acento. */
.lateral-item.activo::before { content: ""; position: absolute; left: 0; top: 50%; width: 2px; height: 20px; border-radius: 2px;
  background: var(--accent); transform: translateY(-50%); }
.lateral-item.activo svg { color: var(--accent); }
.lateral-item svg { flex: none; width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lateral-texto { display: flex; flex-direction: column; line-height: 1.2; }
.lateral-agente { color: var(--ok); font-size: 11px; font-weight: 600; letter-spacing: .03em; }
.lateral-item .insignia { margin-left: auto; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-size: 11px; font-weight: 700; }
.lateral-item .nuevo { margin-left: auto; padding: 1px 7px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-size: 10.5px; font-weight: 700; letter-spacing: .03em; }

.lateral-estado {
  margin: 8px 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--accent-bg); font-size: 12px; color: var(--ink-2); line-height: 1.4;
}
.lateral-estado b { display: flex; align-items: center; gap: 7px; color: var(--ink); font-size: 13px; }
.lateral-estado b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.lateral-estado.simulada b::before { background: var(--warn); }
.lateral-pie { border-top: 1px solid var(--line); padding-top: 6px; }

body.lateral-plegada .lateral-marca div,
body.lateral-plegada .lateral-item span,
body.lateral-plegada .lateral-item .insignia,
body.lateral-plegada .lateral-estado { display: none; }
body.lateral-plegada .lateral-item { justify-content: center; padding: 10px 0; }
body.lateral-plegada .lateral-marca { justify-content: center; padding-left: 0; padding-right: 0; }
body.lateral-plegada #lateral-plegar svg { transform: scaleX(-1); }

@media (max-width: 900px) {
  .lateral { display: none; }
  body.con-lateral { padding-left: 0; }
  body.con-lateral .tabs { display: flex; }
  body.con-lateral #btn-estructura { display: inline-flex; }
}

/* La marca ya está en la barra: en la cabecera queda solo el nombre de la pantalla. */
@media (min-width: 901px) { body.con-lateral .topbar .brand .logo { display: none; } }