/* =====================================================================
   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.
   ===================================================================== */
:root {
  --iv-white: #ffffff;
  --iv-surface: #F6F8FC;
  --iv-line: #E4E9F2;
  --iv-ink: #0F1B33;
  --iv-ink-soft: #5B6B85;
  --iv-blue-deep: #13286B;
  --iv-blue: #2447D6;
  --iv-blue-pale: #EAF0FF;
  --iv-red: #C0392B;
  --iv-font-display: 'Inter', sans-serif;
  --iv-font-body: 'Inter', sans-serif;
}

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: #fff;
  font-weight: 700;
  padding: 0.5rem 1.1rem;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.88rem;
}
.tb-btn-cta:hover { background: var(--iv-blue-deep); color: #fff; }

/* ---- Botón de icono (campana) ---- */
.tb-notif-wrap, .tb-avatar-wrap { position: relative; }
.tb-icon-btn {
  width: 38px; height: 38px;
  border-radius: 10px;
  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: #fff;
  border: 1px solid var(--iv-line);
  border-radius: 14px;
  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: 10px;
  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: #fff;
  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: 8px;
  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: #fff; border-radius: 16px; 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: #E7F6EE; color: #1C8A5B; }
.dash-modal-aviso.dash-modal-error .dash-modal-icono { background: #FDEEEE; color: #C0392B; }
.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: 760px) {
  .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: #fff;
  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: #fff; color: var(--iv-blue-deep); font-weight: 700; font-size: 0.8rem;
  padding: 0.4rem 0.9rem; border-radius: 7px; text-decoration: none; flex-shrink: 0; white-space: nowrap;
}

@media (max-width: 760px) {
  .aviso-articulo .aviso-etiqueta { display: none; }
}

/* =====================================================================
   SIDEBAR — mismas clases HTML de siempre (nav-link, nav-group,
   subenlace, icono-nav, chevron), apariencia completamente nueva.
   ===================================================================== */
.sidebar {
  width: 260px;
  background: var(--iv-white);
  border-right: 1px solid var(--iv-line);
  padding: 1.1rem 0.75rem;
}
.sidebar a.nav-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.7rem;
  border-radius: 9px;
  color: #45536E;
  text-decoration: none;
  border-left: none;
  font-size: 0.87rem;
  font-weight: 500;
  margin-bottom: 0.1rem;
}
.sidebar a.nav-link:hover { background: var(--iv-surface); color: var(--iv-ink); border-left: none; }
.sidebar a.nav-link.activo {
  background: var(--iv-blue-pale);
  color: var(--iv-blue-deep);
  border-left: none;
  font-weight: 600;
}

.sidebar details.nav-group { border-bottom: none; }
.sidebar details.nav-group summary {
  padding: 0.55rem 0.7rem;
  border-radius: 9px;
  color: #45536E;
  font-size: 0.87rem;
  font-weight: 500;
}
.sidebar details.nav-group summary:hover { background: var(--iv-surface); color: var(--iv-ink); }
.sidebar details.nav-group[open] summary { color: var(--iv-ink); }
.sidebar details.nav-group .subenlace {
  padding: 0.45rem 0.7rem 0.45rem 2.85rem;
  border-radius: 7px;
  color: #45536E;
  border-left: none;
  font-size: 0.83rem;
}
.sidebar details.nav-group .subenlace:hover { background: var(--iv-surface); color: var(--iv-ink); border-left: none; }
.sidebar details.nav-group .subenlace.activo {
  background: var(--iv-blue-pale);
  color: var(--iv-blue-deep);
  border-left: none;
  font-weight: 600;
}
.sidebar .icono-nav { color: var(--iv-ink-soft); }
.sidebar a.nav-link.activo .icono-nav,
.sidebar details.nav-group summary:hover .icono-nav,
.sidebar details.nav-group[open] summary .icono-nav { color: var(--iv-blue); }

.sidebar .subgrupo-titulo { color: var(--iv-ink-soft); }

.badge-alerta-menu { background: var(--iv-red); }

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

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

/* =====================================================================
   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; }