/**
 * HEADER UNIFICADO - CHAT.LOHMIA.COM
 *
 * Corrección crítica: Ancho completo edge-to-edge
 * Fecha: 2025-12-19
 * Versión: 2.0 - Solución definitiva con 100vw
 */

/* ============================================
   RESET GLOBAL - ELIMINAR MÁRGENES DEL VIEWPORT
   ============================================ */

html {
  width: 100% !important;
  overflow-x: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

body {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

/* ============================================
   CONTENEDOR DASHBOARD - SIN RESTRICCIONES
   ============================================ */

.dashboard {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================
   HEADER - ANCHO COMPLETO VIEWPORT (100vw)
   ============================================ */

header,
.main-header,
header.main-header {
  /* CLAVE: 100vw en lugar de 100% para compensar scrollbar */
  width: 100vw !important;
  max-width: none !important;

  /* Posicionamiento edge-to-edge */
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;

  /* Sin márgenes externos */
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;

  /* Height unificado */
  height: 73px !important;
  min-height: 73px !important;
  max-height: 73px !important;

  /* Z-index alto */
  z-index: 1000 !important;

  /* Padding interno (NO márgenes) */
  padding: 12px 16px !important;

  /* Visual */
  background-color: rgb(30, 41, 59) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;

  /* Layout */
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}

/* ============================================
   HEADERS DENTRO DE CONTENEDORES RESTRINGIDOS
   ============================================ */

.container > header,
.wrapper > header,
.dashboard > header,
main > header,
div > header.main-header {
  width: 100vw !important;
  position: sticky !important;
  left: 0 !important;
  right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}