/* shell.css — Layout compartido: sidebar fijo + panel de contenido.
   Mismos colores que el escritorio (ver CLAUDE.md): COLOR_SIDEBAR
   #1a2332, COLOR_ACENTO #e8a33d, COLOR_FONDO_PANEL #f5f6f8. */

/* Tamaño base fluido: todo lo que use rem (etiquetas, campos, tablas,
   tarjetas) crece en armonía con el ancho disponible, en vez de quedar
   fijo mientras sobra espacio en pantallas grandes. */
html { font-size: clamp(15px, 0.55vw + 13px, 19px); }

html, body { margin: 0; }

/* La página EXTERIOR (el shell: index.html de cada módulo, con sidebar +
   iframe) nunca debe poder hacer scroll -- eso es justo lo que causaba
   la franja gris (el menú lateral "empujaba" la altura de la página
   completa cuando su contenido no cabía, desalineándose del panel de
   contenido de al lado). Con esto, el único scroll posible ahí es el del
   propio menú (#sidebar-container) o el de adentro del iframe -- nunca
   el de la página que los contiene a los dos.
   Se aplica solo cuando el documento contiene el shell (.vt-shell o
   #pantalla-login) -- shell.css también lo importa cada content.html
   (para las variables de color), y ESE documento sí necesita poder
   crecer y hacer scroll con normalidad cuando su formulario es más alto
   que el iframe visible (bug real, 2026-07-12: en pantallas grandes el
   formulario cabía completo y no se notaba, pero en un portátil con
   menos alto de pantalla los botones Guardar/Cerrar quedaban cortados
   sin ninguna forma de bajar a verlos, porque heredaban este
   overflow:hidden aunque nunca tienen sidebar ni iframe propios). */
html:has(.vt-shell), html:has(.vt-login-shell),
body:has(.vt-shell), body:has(.vt-login-shell) {
  height: 100%;
  overflow: hidden;
}

.vt-shell {
  display: flex;
  height: 100%;
  align-items: stretch;
}

#sidebar-container {
  width: 260px;
  flex: 0 0 260px;
  background: var(--sidebar);
  display: flex;
  flex-direction: column;
  padding-bottom: 16px;
  /* Scroll propio: .vt-shell tiene height:100vh fijo -- sin esto, un
     menu mas alto que la pantalla se "derrama" por fuera de ese límite
     en vez de desplazarse adentro, dejando una franja gris a esa altura
     donde el iframe del contenido (que sí respeta los 100vh) ya terminó. */
  overflow-y: auto;
}

.vt-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 20px 18px;
}
.vt-logo-emoji { font-size: 1.6rem; }
.vt-logo-texto {
  color: white;
  font-weight: bold;
  font-size: 1.05rem;
  letter-spacing: 0.5px;
}

.vt-sep {
  height: 1px;
  background: rgba(255,255,255,0.12);
  margin: 0 20px 14px;
}

.vt-items { flex: 1; }

.vt-seccion {
  color: #7f8ba3;
  font-size: 0.72rem;
  font-weight: bold;
  letter-spacing: 0.6px;
  padding: 14px 22px 6px;
}

.vt-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 22px;
  color: #d6dbe4;
  text-decoration: none;
  font-size: 0.92rem;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.vt-item:hover { background: rgba(255,255,255,0.06); }

.vt-item-activo {
  background: rgba(232,163,61,0.16);
  color: var(--acento);
  font-weight: bold;
  border-right: 3px solid var(--acento);
}

.vt-item-disabled {
  color: #5c6478;
  cursor: default;
  justify-content: space-between;
}
.vt-item-disabled:hover { background: none; }
.vt-proximamente {
  font-size: 0.68rem;
  background: rgba(255,255,255,0.08);
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

.vt-pie { padding-top: 6px; }
.vt-usuario {
  color: #8b95a8;
  font-size: 0.8rem;
  padding: 4px 22px 10px;
}
.vt-item-salir { color: #ff8a8a; }

.vt-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.vt-franja { height: 4px; background: var(--acento); flex: none; }

/* El contenido de cada módulo vive DENTRO de este iframe (mismo patrón
   que abrir_modulo_embebido() en el escritorio: un solo panel, el
   contenido cambia adentro, nunca se abre una ventana aparte). */
.vt-iframe {
  flex: 1;
  width: 100%;
  border: none;
  display: block;
}

/* Usado DENTRO de cada content.html (no en el shell) para el padding/
   ancho del contenido de un módulo. Sin max-width: llena todo el ancho
   del panel (antes quedaba una franja gris a la derecha en pantallas
   anchas) -- tablas/listas aprovechan el espacio real; los formularios
   ponen su propio límite de lectura razonable (ver cada style.css). */
.vt-main-contenido {
  padding: clamp(20px, 2vw, 40px);
  width: 100%;
  box-sizing: border-box;
}

/* Pantalla de login: a pantalla completa, sin sidebar (todavía no hay sesión) */
.vt-login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fondo);
}

/* [hidden] pierde contra .vt-shell/.vt-login-shell por igual especificidad
   (la regla de clase queda después en la cascada) -- se refuerza aquí para
   que ocultar/mostrar con `elemento.hidden = true/false` funcione siempre. */
.vt-shell[hidden], .vt-login-shell[hidden] { display: none; }

@media (max-width: 720px) {
  .vt-shell { flex-direction: column; height: auto; min-height: 100vh; }
  #sidebar-container { width: 100%; flex: none; }
  .vt-iframe { min-height: 70vh; }
  .vt-main-contenido { padding: 16px; }
}