/* =====================================================================
   INTERIOR V2 — Shell del sistema (barra superior + sidebar)
   Se carga DESPUÉS de estilo.css en base.html, así que sus reglas
   ganan por orden de cascada sin necesidad de !important ni de tocar
   una sola línea del estilo.css original. No se modifica el HTML del
   sidebar (nav-link, nav-group, subenlace, icono-nav, chevron) — solo
   se sobrescribe su apariencia.
   ===================================================================== */
/* La paleta (--iv-*) y las variables heredadas de estilo.css ahora se
   definen una sola vez en tokens.css (auditoría 2026-10, UX-12). */

body { font-family: var(--iv-font-body); }

/* ---- Barra superior nueva (topbar-v2) ---- */
.topbar-v2 {
  background: var(--iv-white);
  border-bottom: 1px solid var(--iv-line);
  padding: 0.85rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 30;
}
.tb-logo {
  font-family: var(--iv-font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--iv-blue-deep);
  text-decoration: none;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.tb-logo img {
  height: 40px;
  width: auto;
  display: block;
}
.tb-acciones { display: flex; align-items: center; gap: 0.75rem; }

.tb-empresa-pill {
  background: var(--iv-blue-pale);
  color: var(--iv-blue-deep);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tb-empresa-pill svg { width: 13px; height: 13px; flex-shrink: 0; }

.tb-link-ingresar { color: var(--iv-ink-soft); text-decoration: none; font-size: 0.9rem; }
.tb-link-ingresar:hover { color: var(--iv-ink); }
.tb-btn-cta {
  background: var(--iv-blue);
  color: var(--mc-blanco);
  font-weight: 700;
  padding: 0.5rem 1.1rem;
  border-radius: 0;
  text-decoration: none;
  font-size: 0.88rem;
}
.tb-btn-cta:hover { background: var(--iv-blue-deep); color: var(--mc-blanco); }

/* ---- Botón de icono (campana) ---- */
.tb-notif-wrap, .tb-avatar-wrap { position: relative; }
.tb-icon-btn {
  width: 38px; height: 38px;
  border-radius: 0;
  border: 1px solid var(--iv-line);
  background: var(--iv-white);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--iv-ink-soft);
}
.tb-icon-btn:hover { background: var(--iv-surface); color: var(--iv-ink); }
.tb-icon-btn svg { width: 18px; height: 18px; }

.tb-notif-panel, .tb-avatar-panel {
  display: none;
  position: absolute;
  top: 48px;
  right: 0;
  background: var(--mc-blanco);
  border: 1px solid var(--iv-line);
  border-radius: 0;
  box-shadow: 0 20px 50px rgba(15, 27, 61, 0.15);
  z-index: 50;
  overflow: hidden;
}
.tb-notif-panel.abierto, .tb-avatar-panel.abierto { display: block; }

.tb-notif-panel { width: 300px; }
.tb-notif-head { padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--iv-line); font-weight: 700; font-size: 0.88rem; color: var(--iv-ink); }
.tb-notif-vacio { padding: 2.25rem 1.5rem; text-align: center; }
.tb-notif-ic {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--iv-surface); color: var(--iv-ink-soft);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 0.75rem;
}
.tb-notif-ic svg { width: 19px; height: 19px; }
.tb-notif-vacio p { font-size: 0.83rem; color: var(--iv-ink-soft); line-height: 1.5; margin: 0; }

/* ---- Menú de usuario (avatar) ---- */
.tb-avatar-btn {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.3rem 0.6rem 0.3rem 0.3rem;
  border-radius: 0;
  border: none; background: none; cursor: pointer;
}
.tb-avatar-btn:hover { background: var(--iv-surface); }
.tb-avatar-circ {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--iv-blue); color: var(--mc-blanco);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.8rem;
}
.tb-avatar-nombre { font-size: 0.86rem; font-weight: 600; color: var(--iv-ink); }

.tb-avatar-panel { width: 200px; padding: 0.4rem; }
.tb-avatar-panel a, .tb-avatar-panel form button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.6rem 0.7rem;
  border-radius: 0;
  font-size: 0.87rem;
  color: var(--iv-ink);
  text-decoration: none;
  border: none;
  background: none;
  font-family: var(--iv-font-body);
  cursor: pointer;
}
.tb-avatar-panel a:hover, .tb-avatar-panel form button:hover { background: var(--iv-surface); }
.tb-avatar-panel form { margin: 0; }

/* =====================================================================
   MODAL DE AVISOS DEL SISTEMA (mensajes de Django, usado en toda la app)
   ===================================================================== */
.dash-overlay { position: fixed; inset: 0; background: rgba(15, 27, 61, 0.45); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; }
.dash-modal-aviso { background: var(--mc-blanco); border-radius: 0; padding: 1.5rem; max-width: 400px; width: 100%; box-shadow: 0 30px 60px rgba(15, 27, 61, 0.25); text-align: left; }
.dash-modal-cabecera { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.dash-modal-icono { width: 40px; height: 40px; border-radius: 50%; background: var(--iv-blue-pale); color: var(--iv-blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dash-modal-aviso.dash-modal-exito .dash-modal-icono { background: var(--mc-exito-fondo); color: var(--mc-exito); }
.dash-modal-aviso.dash-modal-error .dash-modal-icono { background: var(--mc-peligro-fondo); color: var(--mc-peligro); }
.dash-modal-cabecera h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--iv-ink); font-family: var(--iv-font-body); }
.dash-modal-texto { color: var(--iv-ink-soft); font-size: 0.9rem; line-height: 1.5; margin: 0 0 1.25rem; }
.dash-modal-acciones { display: flex; justify-content: flex-end; }

/* ---- Spinner reutilizable (ej. "Consultando con SUNAT...") ---- */
.dash-spinner { width: 36px; height: 36px; border: 3px solid var(--iv-blue-pale); border-top-color: var(--iv-blue); border-radius: 50%; margin: 0 auto; animation: dash-girar 0.7s linear infinite; }
@keyframes dash-girar { to { transform: rotate(360deg); } }

@media (max-width: 768px) { /* antes 760px (auditoría 2026-10, UX-20) */
  .tb-empresa-pill { display: none; }
  .tb-avatar-nombre { display: none; }
}

/* =====================================================================
   AVISO DE ARTÍCULO — banner educativo con el artículo/noticia más
   reciente de mentecorporativa.com. Se gestiona desde Panel Interno →
   Avisos de artículos (ver apps.dashboard.views.gestionar_avisos). No
   tiene botón de cerrar a propósito: es contenido educativo permanente,
   no una notificación descartable.
   ===================================================================== */
.aviso-articulo {
  background: linear-gradient(90deg, var(--iv-blue-deep), var(--iv-blue));
  color: var(--mc-blanco);
  padding: 0.6rem 1.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
}
.aviso-articulo .aviso-icono {
  width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.aviso-articulo .aviso-icono svg { width: 14px; height: 14px; }
.aviso-articulo .aviso-etiqueta {
  background: rgba(255,255,255,0.2); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.03em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 5px; flex-shrink: 0;
}
.aviso-articulo .aviso-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.aviso-articulo .aviso-texto strong { font-weight: 700; }
.aviso-articulo .aviso-link {
  background: var(--mc-blanco); color: var(--iv-blue-deep); font-weight: 700; font-size: 0.8rem;
  padding: 0.4rem 0.9rem; border-radius: 0; text-decoration: none; flex-shrink: 0; white-space: nowrap;
}

@media (max-width: 768px) { /* antes 760px (auditoría 2026-10, UX-20) */
  .aviso-articulo .aviso-etiqueta { display: none; }
}

/* (Aquí estaba la segunda definición del menú lateral, la versión azul de
   "Interior V2", que el "Rediseño V3" de más abajo pisaba por completo.
   Se quitó: el menú se define una sola vez, más abajo. Auditoría 2026-10, UX-12.) */
.badge-alerta-menu { background: var(--iv-red); }

/* ---- Layout / contenido ---- */
.layout-app { background: var(--iv-surface); }
.contenido { background: var(--iv-surface); }

/* ---- Animación de entrada al cargar cada página ----
   Efecto sutil de aparición (fade + leve desplazamiento) sobre el
   contenido principal cada vez que el navegador carga una página nueva.
   No afecta al sidebar ni a la barra superior, solo al bloque {% block
   contenido %}. Se desactiva automáticamente si el usuario tiene activada
   la preferencia de sistema "reducir movimiento". */
@keyframes iv-entrada-contenido {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.contenido {
  animation: iv-entrada-contenido 0.28s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .contenido { animation: none; }
}

@media (max-width: 768px) {
  .topbar-v2 { flex-wrap: wrap; }
}

/* =====================================================================
   MENÚ LATERAL COMO CAJÓN (celular, tablet, laptop 13"-14")
   Por debajo de 1280px (antes 1180px) el sidebar deja de apilarse empujando el
   contenido (eso obligaba a scrollear todo el menú antes de ver la
   pantalla) y pasa a ser un cajón que se desliza sobre el contenido,
   con una capa oscura detrás. Se abre con el botón ☰ de la barra
   superior y se cierra tocando la capa oscura, la "×", o cualquier
   opción del menú. Desde 1280px el sidebar sigue exactamente
   igual que siempre (fijo, empujando el contenido, plegable a íconos).
   ===================================================================== */
.tb-inicio { display: flex; align-items: center; gap: 0.85rem; }
.menu-movil-btn {
  display: none;
  width: 38px; height: 38px;
  border-radius: 0;
  border: 1px solid var(--iv-line);
  background: var(--iv-white);
  align-items: center;
  justify-content: center;
  color: var(--iv-ink-soft);
  cursor: pointer;
  flex-shrink: 0;
}
.menu-movil-btn:hover { background: var(--iv-surface); color: var(--iv-ink); }
.menu-movil-btn svg { width: 20px; height: 20px; }

.menu-movil-cerrar {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  margin: 0 0 0.6rem auto;
  background: var(--iv-surface);
  border: 1px solid var(--iv-line);
  border-radius: 50%;
  color: var(--iv-ink-soft);
  cursor: pointer;
}
.menu-movil-cerrar svg { width: 16px; height: 16px; display: block; }

.menu-movil-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 27, 61, 0.5);
  z-index: 65;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.menu-movil-overlay.activo { display: block; opacity: 1; }

@media (max-width: 1279.98px) { /* antes 1180px (auditoría 2026-10, UX-20) */
  .menu-movil-btn { display: flex; }

  .layout-app { position: relative; }
  /* El cajón (.sidebar en modo móvil) se define junto con el resto del
     menú lateral, más abajo en "MENÚ LATERAL". */
  .menu-movil-cerrar { display: flex; }

  body.menu-movil-bloqueado { overflow: hidden; }

  /* El sidebar ahora es un cajón que no ocupa espacio en pantalla, así que
     el contenido puede usar un padding lateral más cómodo en laptop
     13"-14" / iPad, en vez del padding pensado para monitores grandes. */
  .contenido { padding: 1.5rem; }
  .contenido.contenido-ancho { padding: 1.25rem; }
}

@media (max-width: 480px) {
  /* Celular: aún menos padding para no desperdiciar el ancho de pantalla. */
  .contenido { padding: 1rem; }
  .contenido.contenido-ancho { padding: 0.85rem; }
}

/* =====================================================================
   PÁGINA DE ERROR 404
   ===================================================================== */
.dash-error-pagina { min-height: 65vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3rem 1.5rem; }
.dash-error-codigo {
  font-family: var(--iv-font-body); font-variant-numeric: tabular-nums; font-size: 0.95rem; font-weight: 600; color: var(--iv-blue);
  background: var(--iv-blue-pale); padding: 0.4rem 1rem; border-radius: 999px; margin-bottom: 1.5rem;
}
.dash-error-titulo { font-family: var(--iv-font-display); font-size: 1.8rem; font-weight: 600; color: var(--iv-ink); margin: 0 0 0.75rem; }
.dash-error-texto { color: var(--iv-ink-soft); font-size: 0.95rem; max-width: 420px; margin: 0 0 2rem; line-height: 1.6; }
.dash-error-acciones { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }

/* =====================================================================
   MODAL DE CONFIRMACIÓN (static/js/confirmar.js)
   Reemplaza los confirm() nativos del navegador en todo el sistema, con
   el mismo diseño de recuadros cuadrados y los mismos botones (dash-btn
   / dash-btn-outline) que usa el resto del sistema.
   ===================================================================== */
.mc-confirmar-overlay {
  position: fixed; inset: 0; background: rgba(15, 27, 51, 0.55); z-index: 3000;
  display: flex; align-items: center; justify-content: center; padding: 1.25rem;
  opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
.mc-confirmar-overlay.activo { opacity: 1; pointer-events: auto; }
.mc-confirmar-caja {
  background: var(--iv-white); border: 1px solid var(--iv-line);
  max-width: 420px; width: 100%; padding: 1.5rem;
  box-shadow: 0 20px 48px rgba(15, 27, 51, 0.24);
}
.mc-confirmar-mensaje { margin: 0 0 1.25rem; font-size: 0.92rem; color: var(--iv-ink); line-height: 1.55; }
.mc-confirmar-acciones { display: flex; justify-content: flex-end; gap: 0.6rem; }
body.mc-confirmar-bloqueado { overflow: hidden; }

@media (max-width: 480px) {
  .mc-confirmar-caja { padding: 1.1rem; }
  .mc-confirmar-acciones { flex-direction: column-reverse; }
  .mc-confirmar-acciones .dash-btn, .mc-confirmar-acciones .dash-btn-outline { width: 100%; justify-content: center; }
}

/* =====================================================================
   CAMPOS NUMÉRICOS (montos, cantidades): en todo el sistema.
   Quita las flechitas de incrementar/disminuir de <input type="number">
   - el usuario siempre digita el monto a mano, esas flechas (que suben o
   bajan de centavo en centavo) no aportan nada y solo estorban.
   ===================================================================== */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}


/* =====================================================================
   REDISEÑO V3 — Barra superior azul, menú lateral claro y fondo gris.
   Solo apariencia y disposición: no cambia ninguna opción del menú,
   ningún enlace ni ningún permiso. Va al final del archivo para ganar
   por orden de cascada sobre las reglas anteriores.
   ===================================================================== */

/* ---- Barra superior ---- */
.topbar-v2 {
  background: var(--iv-nav);
  border-bottom: 0;
  height: var(--iv-topbar-h);
  padding: 0 1rem 0 0.75rem;
  flex-wrap: nowrap;
}
.tb-inicio { min-width: 0; gap: 0.75rem; flex: 1 1 auto; }
.tb-logo img { height: 34px; border-radius: 4px; }
.tb-producto {
  color: var(--mc-blanco);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  padding-left: 0.85rem;
  border-left: 1px solid rgba(255,255,255,0.25);
  line-height: 24px;
}
.tb-empresa-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  max-width: 380px;
  height: 40px;
  padding: 0 0.7rem;
  margin-left: 0.25rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 4px;
  color: var(--mc-blanco);
  text-decoration: none;
  font-weight: 400;
}
.tb-empresa-pill:hover { background: rgba(255,255,255,0.16); color: var(--mc-blanco); }
.tb-empresa-pill svg { width: 16px; height: 16px; flex-shrink: 0; }
.tb-empresa-pill .tb-emp-chev { width: 14px; height: 14px; opacity: 0.8; }
.tb-emp-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.tb-emp-txt b { font-size: 0.82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-emp-txt small { font-size: 0.72rem; opacity: 0.75; white-space: nowrap; }

.tb-acciones { gap: 0.25rem; flex-shrink: 0; }
.tb-icon-btn,
.menu-movil-btn {
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--mc-blanco);
}
.tb-icon-btn:hover,
.menu-movil-btn:hover { background: rgba(255,255,255,0.12); color: var(--mc-blanco); }
.tb-avatar-btn { border-radius: 4px; height: 40px; }
.tb-avatar-btn:hover { background: rgba(255,255,255,0.12); }
.tb-avatar-circ { background: var(--mc-blanco); color: var(--iv-nav); }
.tb-avatar-nombre { color: var(--mc-blanco); }
.tb-notif-panel, .tb-avatar-panel { top: 46px; border-radius: 6px; }
.tb-avatar-panel a, .tb-avatar-panel form button { border-radius: 4px; }
.tb-link-ingresar { color: rgba(255,255,255,0.85); }
.tb-link-ingresar:hover { color: var(--mc-blanco); }
.tb-btn-cta { background: var(--iv-blue); border-radius: 4px; }
.tb-btn-cta:hover { background: var(--iv-blue-deep); }

/* ---- Fondo general gris ---- */
body, .layout-app, .contenido { background: var(--iv-surface); }

/* =====================================================================
   MENÚ LATERAL — ÚNICA definición (auditoría 2026-10, UX-12).
   Antes el menú se definía tres veces (estilo.css "Libro Mayor",
   "Interior V2" azul y este "Rediseño V3"), y cada una pisaba en parte a
   la anterior. Aquí quedó solo el resultado que se veía en pantalla: lo de
   este bloque más las pocas propiedades de las versiones viejas que nadie
   pisaba (transición del ancho, cursor y marcador de los grupos, giro de
   la flecha, etc.). Mismas clases HTML de siempre.
   ===================================================================== */
.sidebar {
  width: 256px;
  flex-shrink: 0;
  background: var(--mc-blanco);
  border-right: 1px solid var(--iv-line);
  padding: 0.6rem 0.5rem 0.6rem;
  position: sticky;
  top: var(--iv-topbar-h);
  height: calc(100vh - var(--iv-topbar-h));
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  transition: width 0.22s ease;
}
.sidebar.plegado { width: 64px; }

.sidebar a.nav-link,
.sidebar span.nav-link,
.sidebar details.nav-group summary,
.sidebar .sidebar-contraer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 38px;
  padding: 0.45rem 0.75rem;
  margin: 1px 0;
  border: 0;
  border-left: none;
  border-radius: var(--mc-radio-sm);
  background: transparent;
  color: var(--mc-texto-menu);
  font-size: 0.9rem;
  font-weight: 400;
  text-decoration: none;
  position: relative;
  white-space: nowrap;
  width: 100%;
  text-align: left;
}
.sidebar a.nav-link:hover,
.sidebar details.nav-group summary:hover,
.sidebar .sidebar-contraer:hover {
  background: var(--mc-hover);
  color: var(--iv-ink);
  border-left: none;
}
.sidebar a.nav-link.activo {
  background: var(--iv-blue-pale);
  color: var(--iv-blue);
  font-weight: 600;
  border-left: none;
}
.sidebar a.nav-link.activo::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--iv-blue);
}
.sidebar details.nav-group { border: 0; }
.sidebar details.nav-group summary { cursor: pointer; list-style: none; user-select: none; }
.sidebar details.nav-group summary::-webkit-details-marker { display: none; }
.sidebar details.nav-group[open] summary { color: var(--iv-ink); font-weight: 600; }
.sidebar details.nav-group summary .chevron {
  margin-left: auto;
  width: 14px; height: 14px;
  transition: transform 0.15s ease;
  opacity: 0.55;
}
.sidebar details.nav-group[open] summary .chevron { transform: rotate(90deg); }

.sidebar details.nav-group .subenlace {
  display: block;
  padding: 0.42rem 0.75rem 0.42rem 2.7rem;
  margin: 1px 0;
  border-radius: var(--mc-radio-sm);
  border-left: none;
  color: var(--mc-texto-submenu);
  font-size: 0.86rem;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar details.nav-group .subenlace:hover { background: var(--mc-hover); color: var(--iv-ink); border-left: none; }
.sidebar details.nav-group .subenlace.activo {
  background: var(--iv-blue-pale);
  color: var(--iv-blue);
  font-weight: 600;
  border-left: none;
}

.sidebar .icono-nav { width: 18px; height: 18px; flex-shrink: 0; color: var(--mc-icono); }
.sidebar a.nav-link.activo .icono-nav { color: var(--iv-blue); }
.sidebar details.nav-group summary:hover .icono-nav,
.sidebar details.nav-group[open] summary .icono-nav,
.sidebar a.nav-link:hover .icono-nav { color: var(--iv-ink); }
.sidebar .subgrupo-titulo { color: var(--iv-ink-soft); }

/* "Planillas (Próximamente)" y el separador de Panel Interno, en el menú claro */
.sidebar span.nav-link { cursor: default; }
.sidebar details.nav-group[style] { border-top-color: var(--iv-line) !important; }

/* Bloque inferior: Configuración, Soporte y Contraer menú */
.sidebar-pie {
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid var(--iv-line);
}
.sidebar .sidebar-contraer { cursor: pointer; font-family: inherit; }
.sidebar .sidebar-contraer .icono-nav { transition: transform 0.2s ease; }

/* Auditoría 2026-10, UX-29: en PC el fondo blanco del menú llega hasta el
   final de la página. El menú es "sticky" y mide lo que mide la ventana, así
   que en páginas largas (o al imprimir / capturar la página completa) debajo
   de él se veía el gris del fondo. Ahora la columna del menú se pinta en el
   propio contenedor (.layout-app), del alto de toda la página: blanco + la
   línea del borde, 256 px (64 px con el menú contraído). Solo escritorio: por
   debajo de 1280px el menú es un cajón y no ocupa columna. */
@media (min-width: 1280px) {
  .layout-app:has(> .sidebar) {
    background: linear-gradient(to right, var(--mc-blanco) 0 255px, var(--iv-line) 255px 256px, var(--iv-surface) 256px);
  }
  .layout-app:has(> .sidebar.plegado) {
    background: linear-gradient(to right, var(--mc-blanco) 0 63px, var(--iv-line) 63px 64px, var(--iv-surface) 64px);
  }
}

/* Menú contraído (solo escritorio): quedan los íconos */
.sidebar.plegado a.nav-link,
.sidebar.plegado span.nav-link,
.sidebar.plegado details.nav-group summary,
.sidebar.plegado .sidebar-contraer {
  font-size: 0;
  justify-content: center;
  gap: 0;
  padding-left: 0;
  padding-right: 0;
}
.sidebar.plegado details.nav-group summary .chevron,
.sidebar.plegado .badge-alerta-menu { display: none; }
.sidebar.plegado .sidebar-contraer span,
.sidebar.plegado span.nav-link span { display: none; }
.sidebar.plegado .sidebar-contraer .icono-nav { transform: rotate(180deg); }
.sidebar.plegado a.nav-link.activo::before { left: 2px; }

/* ---- Celular, tablet y laptop pequeña (menos de 1280px): el menú es un
   cajón que se desliza sobre el contenido, con una capa oscura detrás.
   Se abre con el botón ☰ de la barra superior y se cierra tocando la capa
   oscura, la "×", o cualquier opción del menú. ---- */
@media (max-width: 1279.98px) { /* antes 1180px (auditoría 2026-10, UX-20) */
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    height: auto;
    width: 300px;
    max-width: 85vw;
    z-index: 70;
    padding-top: 0.75rem;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    /* La sombra del cajón solo cuando está abierto (antes se asomaba una
       franja gris en el borde izquierdo de la pantalla). */
    box-shadow: none;
  }
  .sidebar.menu-movil-abierto { transform: translateX(0); box-shadow: 0 0 50px rgba(15, 27, 61, 0.3); }
  .sidebar.plegado { width: 300px; }
  .sidebar.plegado a.nav-link,
  .sidebar.plegado span.nav-link,
  .sidebar.plegado details.nav-group summary {
    font-size: 0.9rem;
    justify-content: flex-start;
    gap: 0.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .sidebar.plegado details.nav-group summary .chevron,
  .sidebar.plegado .badge-alerta-menu { display: revert; }
  .sidebar .sidebar-contraer { display: none; }
  .menu-movil-cerrar { flex-shrink: 0; }
  /* El contenido ocupa exactamente el ancho de la pantalla (antes, en
     celular, podía quedar más ancho que la pantalla y moverse de lado). */
  .contenido { width: 100%; margin: 0; }
}

@media (max-width: 768px) { /* antes 900px (auditoría 2026-10, UX-20) */
  .tb-producto { display: none; }
}

@media (max-width: 768px) { /* antes 760px (auditoría 2026-10, UX-20) */
  /* En pantallas angostas la empresa se sigue viendo, solo con la razón social */
  .tb-empresa-pill { display: inline-flex; max-width: none; flex: 1 1 auto; margin-left: 0; }
  .tb-emp-txt small { display: none; }
  .topbar-v2 { padding: 0 0.5rem; gap: 0.5rem; }
}

@media (max-width: 480px) {
  .tb-logo img { height: 30px; }
  .tb-empresa-pill { padding: 0 0.5rem; gap: 0.4rem; }
  .tb-empresa-pill > svg:first-child { display: none; }
  .tb-icon-btn { width: 36px; height: 36px; }
}

/* ---- Barra "‹ Configuración / ..." arriba de cada pantalla de configuración ---- */
.cfg-migas { display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: var(--iv-ink-soft); margin: -0.25rem 0 1rem; flex-wrap: wrap; }
.cfg-migas a { display: inline-flex; align-items: center; gap: 0.2rem; color: var(--iv-blue); font-weight: 600; text-decoration: none; }
.cfg-migas a:hover { text-decoration: underline; color: var(--iv-blue-deep); }
.cfg-migas svg { width: 15px; height: 15px; }
.cfg-migas b { color: var(--iv-ink); font-weight: 600; }

/* ---- "Panel Interno" en el menú lateral: separado del resto con una línea ---- */
.sidebar a.nav-link.nav-link-interno { margin-top: 0.75rem; }
.sidebar a.nav-link.nav-link-interno::after { content: ""; position: absolute; left: 0.5rem; right: 0.5rem; top: -0.4rem; height: 1px; background: var(--iv-line); }

/* ---- Campana con notificaciones (Gestión Laboral, Fase 2) ---- */
.tb-notif-wrap .tb-icon-btn { position: relative; }
.tb-notif-badge { position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: #D93025; color: var(--mc-blanco); font-size: 0.66rem; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--iv-nav); }
.tb-notif-panel.con-lista { width: 340px; }
.tb-notif-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.tb-notif-head form { margin: 0; }
.tb-notif-head button { background: none; border: 0; color: var(--iv-blue); font-size: 0.76rem; font-weight: 600; cursor: pointer; padding: 0; }
.tb-notif-lista { max-height: 360px; overflow-y: auto; }
.tb-notif-item { display: block; padding: 0.7rem 1.1rem; border-bottom: 1px solid var(--iv-line); text-decoration: none; color: var(--iv-ink); font-size: 0.84rem; line-height: 1.35; }
.tb-notif-item:hover { background: var(--iv-surface); color: var(--iv-ink); }
.tb-notif-item.no-leida { background: #F2F7FD; }
.tb-notif-item.no-leida b::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--iv-blue); margin-right: 0.4rem; vertical-align: middle; }
.tb-notif-item b { display: block; font-weight: 600; }
.tb-notif-item span { display: block; color: var(--iv-ink-soft); font-size: 0.78rem; margin-top: 0.1rem; }
.tb-notif-item small { display: block; color: #8A94A6; font-size: 0.72rem; margin-top: 0.2rem; }
.tb-notif-pie { display: block; text-align: center; padding: 0.65rem; font-size: 0.8rem; font-weight: 600; color: var(--iv-blue); text-decoration: none; }
.tb-notif-pie:hover { background: var(--iv-surface); }

/* =====================================================================
   FOCO DE TECLADO Y CAMPOS (auditoría 2026-10, UX-13 y UX-14)
   Botones, enlaces del menú, pestañas y tarjetas clicables no mostraban
   dónde estaba el foco del teclado (Bootstrap lo dejaba en un halo
   celeste de 1,1:1 o lo quitaba). Ahora todo elemento enfocable con el
   teclado muestra un contorno azul de 2px (5,8:1 sobre blanco; blanco
   sobre la barra superior oscura). Con el mouse no se ve (:focus-visible).
   ===================================================================== */
:where(a, button, summary, input, select, textarea, [role="tab"], [role="button"], [role="option"], [tabindex]):focus-visible {
  outline: var(--mc-foco-ancho) solid var(--mc-foco);
  outline-offset: var(--mc-foco-separacion);
}
/* Bootstrap pone "outline: 0" en .btn y .nav-link al enfocar: se recupera el contorno. */
.btn:focus-visible, .nav-link:focus-visible, .page-link:focus-visible, .dropdown-item:focus-visible, .list-group-item-action:focus-visible {
  outline: var(--mc-foco-ancho) solid var(--mc-foco);
  outline-offset: var(--mc-foco-separacion);
}
/* Menú lateral: el contorno va hacia adentro para que el borde del menú no lo corte. */
.sidebar a.nav-link:focus-visible, .sidebar .subenlace:focus-visible,
.sidebar details.nav-group summary:focus-visible, .sidebar .sidebar-contraer:focus-visible,
.sidebar .menu-movil-cerrar:focus-visible {
  outline: var(--mc-foco-ancho) solid var(--mc-foco);
  outline-offset: calc(-1 * var(--mc-foco-ancho));
  box-shadow: none;
}
/* Sobre fondos oscuros o azules (barra superior, aviso de artículo): contorno blanco. */
.topbar-v2 :focus-visible, .aviso-articulo :focus-visible {
  outline: var(--mc-foco-ancho) solid var(--mc-foco-sobre-oscuro);
  outline-offset: var(--mc-foco-separacion);
}
.topbar-v2 .tb-notif-panel :focus-visible, .topbar-v2 .tb-avatar-panel :focus-visible {
  outline-color: var(--mc-foco);
  outline-offset: calc(-1 * var(--mc-foco-ancho));
}
/* Campos de Bootstrap: borde con contraste (antes #dee2e6, 1,3:1) y anillo de foco visible. */
.form-control, .form-select { border-color: var(--mc-borde-campo); }
.form-control:focus, .form-select:focus { border-color: var(--mc-foco); box-shadow: var(--mc-foco-campo); }

/* =====================================================================
   Estilos que antes iban en línea en templates/base.html (auditoría
   2026-10, UX-12): mismos valores, ahora con tokens.
   ===================================================================== */
/* Banda roja "MODO SOPORTE" */
.mc-banda-soporte { background: var(--mc-peligro); color: var(--mc-blanco); padding: 0.7rem 1.2rem; text-align: center; font-weight: 600; position: sticky; top: 0; z-index: 9999; }
.mc-banda-soporte-enlace { margin-left: 1rem; color: var(--mc-blanco); font-weight: 700; text-decoration: underline; }
.mc-banda-soporte-enlace:hover { color: var(--mc-blanco); }
.mc-banda-soporte-form { display: inline; margin-left: 1rem; }
.mc-banda-soporte-btn { background: var(--mc-blanco); color: var(--mc-peligro); border: none; border-radius: var(--mc-radio-sm); padding: 0.3rem 0.9rem; font-weight: 700; cursor: pointer; }
.mc-banda-soporte :focus-visible { outline-color: var(--mc-foco-sobre-oscuro); }
/* "Gestión Laboral (Próximamente)" en el menú: opción inactiva */
.sidebar span.nav-link.nav-link-proximamente { opacity: 0.55; cursor: default; }
.nav-link-proximamente-nota { font-size: 0.75rem; opacity: 0.85; }
/* Auditoría 2026-10, UX-29: la etiqueta ahora es "Pronto" (antes "(Próximamente)",
   que no cabía en los 256 px del menú y salía recortada); por si acaso, se corta
   con "…" en vez de salirse del menú. */
.sidebar span.nav-link.nav-link-proximamente { overflow: hidden; }
.nav-link-proximamente-nota { margin-left: auto; overflow: hidden; text-overflow: ellipsis; }