/* ============================================================================
 * sidebar.css — Armazón de escritorio KREVO. FUENTE ÚNICA de estilo.
 * ----------------------------------------------------------------------------
 * El aspecto vive aquí y el markup lo inyecta js/componentes/sidebar.js.
 * ==========================================================================*/

/* Barra blanca fija, alineada al contrato visual de escritorio de Sprint 2. */
.layout { grid-template-columns: 212px minmax(0, 1fr) !important; grid-template-rows: auto 1fr; background: #F6F9FC; }
.sidebar { background: #fff; border-right: 1px solid #E3E8EE; padding: 12px 0 20px; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; width: 212px; height: 100vh; z-index: 20; }
/* La barra fija sale del flujo → la rejilla colocaría el contenido en la col 1 (tras la barra).
   Forzar TODO lo que no sea la barra a la col 2 (1fr); la col 1 queda reservada y la
   barra la cubre. En teléfono la barra se oculta (mobile.css) y el contenido vuelve a col auto. */
.layout > *:not(.sidebar):not(script) { grid-column: 2; min-width: 0; }
.layout > *:not(.sidebar):not(script):not(.desktop-app-header) { grid-row: 2; }
@media (max-width: 768px) { .layout > *:not(.sidebar):not(script) { grid-column: auto; } }

/* Marca — lockup apaisado para fondo claro. */
/* Marca con PRESENCIA, arriba-izquierda (es UI, manda la retícula). Altura 52px = peso propio.
   Alineación IZQ con la columna de íconos (28px): el SVG trae margen interno (~5.6% del ancho a la
   izq, ~14.9% arriba) → a 52px son ~8px, así que el contenedor va a 20px (20 + 8 ≈ 28 del símbolo
   visible) y baja ~20px del borde (sidebar padding-top 12px + margen interno). El TAMAÑO lo fija la
   ALTURA del <img> (escala proporcional); el padding solo posiciona. */
.brand { padding: 0 0 0 20px; display: flex; align-items: center; }
.brand-logo-img { height: 52px; width: auto; display: block; }
.brand-block { display: flex; align-items: baseline; gap: 6px; }
.brand-name { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.385em; color: #ffffff; }
.brand-version { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 600; }

/* Nav — inactivos blanco 70% (subido de 60% al aclarar el fondo a #2341AC, para que se lean
   cómodos sin tocar el color), activo con fondo sutil + borde izquierdo blanco */
/* A SANGRE: el nav ya no tiene padding lateral y el bloque va de borde a borde de la barra
   (sin margen izq/der, sin radio) — franja continua, no botón flotante. El inset del texto (28px)
   se conserva vía el padding lateral del ítem (antes 12px del nav + 16px del ítem = 28px). */
.nav { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }
.nav-item { padding: 9px 12px; border-radius: 9px; cursor: pointer; font-size: 14px; color: #425466; text-decoration: none; font-weight: 400; display: flex; align-items: center; gap: 10px; }
.nav-item:hover { background: #F7FAFC; color: #0A2540; }
/* Activo: acento tenue, legible sin competir con el contenido. */
.nav-item.active { background: #EEEBFF; color: #635BFF; font-weight: 600; }
.sidebar .nav .ji-nav-ic { color: inherit; opacity: 1; }

/* Footer */
.sidebar-footer { margin-top: auto; padding: 16px 12px 4px; }
.sidebar-divider { height: 1px; background: #E3E8EE; margin: 0 0 12px 0; }
.footer-action { padding: 9px 16px; font-size: 13px; color: #8792A2; cursor: pointer; display: flex; align-items: center; gap: 10px; border-radius: 8px; text-decoration: none; background: none; border: none; width: 100%; text-align: left; font-family: inherit; }
.footer-action:hover { background: #F7FAFC; color: #0A2540; }
.footer-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.7; }

.desktop-app-header { grid-column: 2; grid-row: 1; position: sticky; top: 0; z-index: 19; background: #fff; border-bottom: 1px solid #E3E8EE; }
.desktop-app-header-inner { min-height: 64px; padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.desktop-app-title { margin: 0; color: #0A2540; font-size: 19px; font-weight: 650; line-height: 1.2; }
.desktop-app-context { margin: 3px 0 0; color: #8792A2; font-size: 12px; }
.desktop-app-avatar { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #635BFF; color: #fff; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.desktop-app-rainbow { height: 3px; background: linear-gradient(90deg,#FF5996,#635BFF,#00D4FF); }

@media (min-width: 769px) {
  .main { height: calc(100vh - 68px) !important; max-height: calc(100vh - 68px) !important; }
}

@media (max-width: 768px) {
  .layout { grid-template-columns: 1fr !important; grid-template-rows: 1fr; }
  .desktop-app-header { display: none; }
  .layout > *:not(.sidebar):not(script):not(.desktop-app-header) { grid-row: auto; }
}