/* ==========================================================================
   ⚡ UNIKORE MEDIA OS 2.0 — SISTEMA DE DISEÑO NEO-BRUTALISTA (FIGMA PIPELINE)
   Estándar Silicon Valley 1% · Tokens oficiales, táctiles y reactivos
   ========================================================================== */

:root {
  /* Cuaterna Cromática Oficial Unikore Media */
  --nb-green: #00E575;     /* Métricas de éxito, botones primarios, activos */
  --nb-magenta: #FF007F;   /* Badges de producción, palabras de énfasis */
  --nb-purple: #7928CA;    /* Sync-Stream, comandos de teclado, ERP */
  --nb-orange: #FF5500;    /* Hover de navegación, alertas de cobro, FAQ */
  --nb-black: #08090C;     /* Fondo principal oscuro */
  --nb-panel-dark: #101216;
  --nb-panel-darker: #141720;
  
  /* Superficie Diurna (Light Mode) */
  --nb-white: #FFFFFF;
  --nb-bg: #F8FAFC;
  --nb-surface: #FFFFFF;
  --nb-text: #0F172A;
  --nb-text-muted: #475569;
  
  /* Reglas Estéticas Neo-Brutalistas de Componentes (Figma Extraction) */
  --nb-border: 2.5px solid #000000;
  --nb-border-sm: 1.5px solid #000000;
  --nb-shadow: 4px 6px 0px #000000;
  --nb-shadow-sm: 2px 3px 0px #000000;
  --nb-shadow-lg: 6px 9px 0px #000000;
  
  /* Radios */
  --nb-radius: 14px;
  --nb-radius-card: 20px;
  --nb-radius-modal: 24px;
  --nb-radius-pill: 999px;
  
  --nb-transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

body {
  overflow-x: hidden !important;
}

/* ==========================================================================
   TIPOGRAFÍA NEO-BRUTALISTA
   ========================================================================== */
.nb-h1 {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: #000000 !important;
  line-height: 1.15;
}

.nb-h2 {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--nb-green);
}

.nb-h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--nb-magenta);
}

/* ==========================================================================
   BOTONES NEO-BRUTALISTAS (FIGMA COMPONENTS)
   ========================================================================== */
.nb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius);
  box-shadow: var(--nb-shadow-sm) !important;
  cursor: pointer;
  text-decoration: none;
  transition: var(--nb-transition);
  outline: none;
}

.nb-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--nb-shadow-lg) !important;
}

.nb-btn:active {
  transform: translate(2px, 3px) !important;
  box-shadow: 1px 1px 0px #000000 !important;
}

/* Variantes de Botón */
.nb-btn-primary {
  background: var(--nb-green) !important;
  color: #000000 !important;
}

.nb-btn-secondary {
  background: var(--nb-purple) !important;
  color: #FFFFFF !important;
}

.nb-btn-accent {
  background: var(--nb-magenta) !important;
  color: #FFFFFF !important;
}

.nb-btn-destructive {
  background: var(--nb-orange) !important;
  color: #FFFFFF !important;
}

.nb-btn-outline {
  background: var(--nb-white) !important;
  color: #000000 !important;
}

.nb-btn-pill {
  border-radius: var(--nb-radius-pill) !important;
}

.nb-btn-sm { padding: 6px 14px; font-size: 12.5px; }
.nb-btn-md { padding: 10px 20px; font-size: 14.5px; }
.nb-btn-lg { padding: 14px 28px; font-size: 16.5px; }

/* ==========================================================================
   BADGES & CHIPS (FIGMA)
   ========================================================================== */
.nb-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--nb-radius-pill);
  border: var(--nb-border-sm) !important;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  box-shadow: 2px 2px 0px #000000 !important;
}

.nb-badge-green { background: var(--nb-green); color: #000000; }
.nb-badge-magenta { background: var(--nb-magenta); color: #FFFFFF; }
.nb-badge-purple { background: var(--nb-purple); color: #FFFFFF; }
.nb-badge-orange { background: var(--nb-orange); color: #FFFFFF; }

/* ==========================================================================
   TARJETAS KPI Y CONTENEDORES NEO-BRUTALISTAS (.stat-card, .nb-card)
   ========================================================================== */
.stat-card {
  background: #12151E !important;
  color: #FFFFFF !important;
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius-card) !important;
  box-shadow: var(--nb-shadow) !important;
  padding: 20px 24px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
}

.stat-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 6px 9px 0px #000000 !important;
}

.stat-card:active {
  transform: translate(2px, 3px) !important;
  box-shadow: 1px 1px 0px #000000 !important;
}

.nb-card {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius-card) !important;
  box-shadow: var(--nb-shadow) !important;
  padding: 22px;
  transition: var(--nb-transition) !important;
}

.nb-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--nb-shadow-lg) !important;
}

.nb-card:active {
  transform: translate(2px, 3px) !important;
  box-shadow: 1px 1px 0px #000000 !important;
}

/* Modales */
.modal-container, .modal-box, .modal-body, .nb-modal {
  width: 92vw !important;
  max-width: 520px !important;
  max-height: 85vh !important;
  overflow-y: auto !important;
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius-card) !important;
  box-shadow: 6px 10px 0px #000000 !important;
}

/* ==========================================================================
   RETÍCULA 4:5 ADAPTATIVA Y FLUIDA
   ========================================================================== */
.pieces-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}

@media (max-width: 1024px) {
  .pieces-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .pieces-grid,
  .feed-grid-ig,
  .piku-media-grid,
  .grid-4-5 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
  }
}

/* ==========================================================================
   FASE 1: SIDEBAR CAPSULES & INUNDACIÓN TOTAL DE COLOR (PIKU MASTER)
   ========================================================================== */
.sidebar .nav-btn,
.nav-btn {
  border-radius: 12px !important;
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: center !important;
  text-transform: none !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  margin-bottom: 6px !important;
  cursor: pointer !important;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
  width: 100% !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  height: auto !important;
  background: #F8FAFC !important;
  color: #0F172A !important;
}

.sidebar .nav-btn:hover,
.nav-btn:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 4px 4px 0px #000000 !important;
  background: var(--uk-orange, #FF5500) !important;
  color: #FFFFFF !important;
}

.sidebar .nav-btn:active,
.nav-btn:active,
.sidebar .nav-btn.active,
.nav-btn.active {
  background: var(--uk-orange, #FF5500) !important;
  color: #FFFFFF !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 4px 4px 0px #000000 !important;
  border: 2px solid #000000 !important;
}

/* Icono Libre y Flotante a la Izquierda */
.nav-btn .nav-icon,
.nav-btn .nb-nav-icon-box {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  margin-right: 12px !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  color: inherit !important;
}

.nav-btn .nav-icon svg,
.nav-btn .nb-nav-icon-box svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  color: inherit !important;
}

#btn-sitio-publico, a[data-tooltip="Ver Sitio Público"] {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 2px solid #000000 !important;
}
#btn-sitio-publico:hover, a[data-tooltip="Ver Sitio Público"]:hover {
  background: #00E575 !important;
  color: #000000 !important;
}
#btn-logout {
  background: #FFFFFF !important;
  color: #DC2626 !important;
  border: 2px solid #DC2626 !important;
}
#btn-logout:hover {
  background: #DC2626 !important;
  color: #FFFFFF !important;
}

/* Sidebar Collapsed (<74px) */
body.sidebar-collapsed .nav-btn {
  justify-content: center !important;
  padding: 12px !important;
  width: 48px !important;
  height: 48px !important;
  margin: 0 auto 10px auto !important;
  border-radius: 50% !important;
}
body.sidebar-collapsed .nav-btn .nav-icon,
body.sidebar-collapsed .nav-btn .nb-nav-icon-box {
  margin-right: 0 !important;
}
body.sidebar-collapsed .nav-btn .nav-label {
  display: none !important;
}

/* ==========================================================================
   FASE 2: HEADER MÓVIL SUPERIOR INVERTIDO (< 900px)
   ========================================================================== */
#mobile-header-suite,
#mobile-top-bar-container,
#mobile-top-bar {
  display: none;
}

@media (max-width: 900px) {
  #mobile-header-suite {
    display: block !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 99990 !important;
    background: transparent !important;
  }

  body:has(#auth-wall:not(.hidden)) #mobile-header-suite,
  body:has(#login-screen:not(.hidden)) #mobile-header-suite,
  #auth-wall:not(.hidden) ~ #mobile-header-suite,
  #login-screen:not(.hidden) ~ #mobile-header-suite {
    display: none !important;
  }

  /* 1. Ticker continuo tipo marcador deportivo de 34px en fondo negro */
  .mobile-ticker-bar {
    height: 34px !important;
    background: #000000 !important;
    color: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #000000 !important;
    width: 100% !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  .mobile-ticker-track {
    display: inline-block !important;
    white-space: nowrap !important;
    animation: tickerScroll 25s linear infinite !important;
    padding-left: 100% !important;
  }

  @keyframes tickerScroll {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
  }

  /* 2. Barra cápsula flotante centrada */
  .navbar-mobile-capsule {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: calc(100% - 32px) !important;
    max-width: 520px !important;
    margin: 12px auto !important;
    border-radius: 999px !important;
    border: 2.5px solid #000000 !important;
    box-shadow: 3px 5px 0px #000000 !important;
    background: #FFFFFF !important;
    padding: 8px 16px !important;
    box-sizing: border-box !important;
  }

  /* Esquina Izquierda: Botón hamburguesa circular [ ☰ ] (42×42px) en Verde Neón */
  .mobile-btn-hamburger {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 50% !important;
    background: #00E575 !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
    box-shadow: 2px 2px 0px #000000 !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  }
  .mobile-btn-hamburger:hover {
    transform: translate(-1px, -1px) !important;
    box-shadow: 3px 3px 0px #000000 !important;
  }

  /* Centro-Izquierda: Botón píldora [ ⚡ Cotizador ] */
  .mobile-btn-cotizador {
    border-radius: 999px !important;
    border: 2px solid #000000 !important;
    box-shadow: 2px 2px 0px #000000 !important;
    background: #00DFA1 !important;
    color: #000000 !important;
    padding: 7px 13px !important;
    font-weight: 900 !important;
    font-size: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s !important;
  }
  .mobile-btn-cotizador:hover {
    background: #00BF8A !important;
    transform: translate(-1px, -1px) !important;
    box-shadow: 3px 3px 0px #000000 !important;
  }

  /* Centro-Derecha: Botón buscador [ 🔍 ⌘K ] */
  .mobile-btn-search {
    border-radius: 999px !important;
    border: 2px solid #000000 !important;
    box-shadow: 2px 2px 0px #000000 !important;
    background: #F8FAFC !important;
    color: #000000 !important;
    padding: 6px 10px !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  }
  .mobile-btn-search:hover {
    transform: translate(-1px, -1px) !important;
    box-shadow: 3px 3px 0px #000000 !important;
  }
  .mobile-kbd-cmd {
    background: #7928CA !important;
    color: #FFFFFF !important;
    border-radius: 4px !important;
    padding: 1px 5px !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    border: 1px solid #000000 !important;
  }

  /* Esquina Derecha: Logotipo Unikore Media oficial (30px) */
  .mobile-brand-logo {
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
  }

  /* Drawer Off-Canvas Móvil (< 900px) */
  #sidebar,
  .sidebar {
    display: none !important;
  }

  #sidebar.drawer-open,
  #sidebar.open,
  .sidebar.drawer-open,
  .sidebar.open,
  body.sidebar-open #sidebar,
  body.sidebar-open .sidebar {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 280px !important;
    max-width: 85vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    border-top-right-radius: 24px !important;
    border-bottom-right-radius: 24px !important;
    border: 2.5px solid #000000 !important;
    box-shadow: 6px 0px 0px #000000 !important;
    background: #101216 !important;
    margin: 0 !important;
    padding: 20px 16px !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    transform: translateX(0) !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  #sidebar-backdrop {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 999998 !important;
  }

  #sidebar-backdrop.active,
  #sidebar-backdrop.show {
    display: block !important;
  }

  .main-content {
    margin-left: 0 !important;
    padding: 16px 14px !important;
  }
}

/* ==========================================================================
   ASISTENTE NIKO AI INBOX FLOTANTE
   ========================================================================== */
#btn-niko-trigger {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #00E575 0%, #7928CA 100%) !important;
  color: #000000 !important;
  border: 2.5px solid #000000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  box-shadow: 4px 6px 0px #000000 !important;
  cursor: pointer !important;
  z-index: 99999 !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
}

#btn-niko-trigger:hover {
  transform: translateY(-2px) !important;
  box-shadow: 6px 9px 0px #000000 !important;
}

#btn-niko-trigger:active {
  transform: translate(2px, 3px) !important;
  box-shadow: 1px 1px 0px #000000 !important;
}

#ai-copilot-drawer {
  position: fixed !important;
  bottom: 92px !important;
  right: 24px !important;
  width: 360px !important;
  max-width: calc(100vw - 48px) !important;
  height: 500px !important;
  max-height: calc(100vh - 120px) !important;
  border-radius: 20px !important;
  background: #0E1017 !important;
  color: #FFFFFF !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 6px 10px 0px #000000 !important;
  display: none;
  flex-direction: column !important;
  overflow: hidden !important;
  z-index: 99999 !important;
}

#ai-copilot-drawer.show {
  display: flex !important;
}

/* ==========================================================================
   DESKTOP NAVBAR: OCULTAR OBLIGATORIAMENTE BOTÓN HAMBURGUESA (> 900px)
   ========================================================================== */
@media (min-width: 901px) {
  .hamburger,
  .btn-hamburger,
  .btn-mobile-menu,
  #btn-mobile-toggle,
  .navbar-mobile-toggle,
  .mobile-menu-toggle,
  #btn-mobile-hamburger,
  button[aria-label="Abrir menú"],
  button[aria-label="Abrir Menú"],
  button[aria-label="Menú Móvil"],
  button[onclick*="toggleMobile"],
  button[onclick*="toggleMobileNav"],
  button[onclick*="toggleMobileSidebar"] {
    display: none !important;
  }
}

/* ==========================================================================
   CRM PIPELINE KANBAN INTERACTIVO DRAG & DROP + POPUP
   ========================================================================== */
.crm-kanban-card {
  cursor: grab;
  user-select: none;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s ease;
}
.crm-kanban-card:hover {
  transform: translateY(-2px);
  box-shadow: 3px 4px 0px #000000 !important;
}
.crm-kanban-card:active {
  cursor: grabbing;
}
.crm-kanban-card.dragging {
  opacity: 0.4;
  transform: scale(0.96);
  border-style: dashed !important;
}
.crm-stage-col-body {
  transition: background 0.15s ease, border-color 0.15s ease;
  min-height: 140px;
}
.crm-stage-col-body.drag-over {
  background: #E6FBF2 !important;
  border: 2px dashed #00E575 !important;
  border-radius: 8px;
}

/* ==========================================================================
   GALERÍA: SELECCIÓN DE FILAS Y FILTROS ACTIVOS REACTIVOS
   ========================================================================== */
.meta-table-row.selected {
  background: #EBF5FF !important;
}
.filter-active {
  background: #F0FDF4 !important;
  border-color: #00A854 !important;
  color: #000000 !important;
  box-shadow: 2.5px 2.5px 0px #000000 !important;
}

/* ==========================================================================
   PERFIL: AVATAR INTERACTIVO Y FOTO UPLOAD
   ========================================================================== */
.profile-avatar-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border-radius: 50%;
}
.profile-avatar-wrapper:hover .avatar-hover-overlay {
  opacity: 1;
}
.avatar-hover-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
  opacity: 0;
  transition: opacity 0.2s ease;
  border: 2px solid #000000;
}