/* ============================================
   DESIGN X AI — Twenty CRM Custom Theme
   designxai.com.mx | dark-tech aesthetic
   Version 1.0
   ============================================ */

/* ---- FUENTES ---- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* ---- VARIABLES DE MARCA ---- */
:root {
  --dxai-bg:         #050508;
  --dxai-bg2:        #0d0d14;
  --dxai-glass:      rgba(12, 12, 22, 0.80);
  --dxai-cyan:       #00f5ff;
  --dxai-teal:       #00d4aa;
  --dxai-purple:     #7c3aed;
  --dxai-purple-l:   #a855f7;
  --dxai-grad:       linear-gradient(135deg,#00f5ff 0%,#7c3aed 100%);
  --dxai-grad-bg:    linear-gradient(135deg,rgba(0,245,255,.06) 0%,rgba(124,58,237,.06) 100%);
  --dxai-border:     rgba(0,245,255,.14);
  --dxai-border-h:   rgba(0,245,255,.38);
  --dxai-glow:       0 0 18px rgba(0,245,255,.18);
  --dxai-glow2:      0 0 36px rgba(0,245,255,.32);
  --dxai-text:       #e8eaf0;
  --dxai-text-s:     rgba(200,205,220,.70);
  --dxai-font:       'Space Grotesk','Inter',system-ui,sans-serif;
}

/* ---- BASE ---- */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--dxai-font) !important;
  background:  var(--dxai-bg)   !important;
  background-image:
    radial-gradient(ellipse at 18% 55%, rgba(0,245,255,.025) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 20%, rgba(124,58,237,.035) 0%, transparent 55%) !important;
  color: var(--dxai-text) !important;
}

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar        { width:4px; height:4px }
::-webkit-scrollbar-track  { background:transparent }
::-webkit-scrollbar-thumb  { background:var(--dxai-grad); border-radius:2px }

/* ============================================
   SIDEBAR / LEFT PANEL
   ============================================ */
nav,
[class*="LeftPanel"],
[class*="leftPanel"],
[class*="NavigationDrawer"],
[class*="Sidebar"],
[class*="sidebar"] {
  background: var(--dxai-bg2) !important;
  border-right: 1px solid var(--dxai-border) !important;
}

/* Workspace header dentro del sidebar */
[class*="WorkspaceName"],
[class*="NavWorkspace"],
[class*="workspaceName"] {
  background: var(--dxai-grad-bg) !important;
  border-bottom: 1px solid var(--dxai-border) !important;
}

/* Items de navegación */
[class*="NavItem"],
[class*="NavLink"],
[class*="navItem"],
[class*="SidebarItem"],
[class*="sidebarItem"] {
  border-radius: 8px !important;
  color: var(--dxai-text-s) !important;
  transition: all .2s ease !important;
}
[class*="NavItem"]:hover,
[class*="NavLink"]:hover,
[class*="SidebarItem"]:hover {
  background: rgba(0,245,255,.07) !important;
  color: var(--dxai-cyan) !important;
}
[class*="active"][class*="NavItem"],
[class*="Active"][class*="NavItem"],
[class*="NavItem"][aria-selected="true"],
[class*="NavLink"][aria-current="page"] {
  background: linear-gradient(90deg,rgba(0,245,255,.13),transparent) !important;
  color: var(--dxai-cyan) !important;
  border-left: 2px solid var(--dxai-cyan) !important;
}

/* ============================================
   TOPBAR / HEADER
   ============================================ */
header,
[class*="TopBar"],
[class*="topBar"],
[class*="PageHeader"],
[class*="pageHeader"] {
  background: rgba(5,5,8,.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--dxai-border) !important;
}

/* ============================================
   CARDS / KANBAN CARDS (GLASSMORPHISM)
   ============================================ */
[class*="Card"],
[class*="card"],
[class*="BoardCard"],
[class*="boardCard"],
[class*="RecordBoardCard"],
[class*="EntityCard"] {
  background: var(--dxai-glass) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid var(--dxai-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.45), var(--dxai-glow) !important;
  transition: all .25s ease !important;
}
[class*="Card"]:hover,
[class*="BoardCard"]:hover,
[class*="RecordBoardCard"]:hover {
  border-color: var(--dxai-border-h) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.55), var(--dxai-glow2) !important;
  transform: translateY(-2px) !important;
}

/* ============================================
   TABLA / LIST VIEW
   ============================================ */
thead,
[class*="TableHeader"],
[class*="tableHeader"] {
  background: rgba(0,245,255,.04) !important;
  border-bottom: 1px solid var(--dxai-border) !important;
}
tbody tr,
[class*="TableRow"],
[class*="tableRow"] {
  border-bottom: 1px solid rgba(0,245,255,.06) !important;
  transition: background .15s ease !important;
}
tbody tr:hover,
[class*="TableRow"]:hover { background: rgba(0,245,255,.05) !important; }

/* ============================================
   BOTONES
   ============================================ */
/* --- Primario --- */
button[class*="Primary"],
[class*="ButtonPrimary"],
[class*="AccentButton"],
button[class*="accent"] {
  background: var(--dxai-grad) !important;
  border: none !important;
  border-radius: 8px !important;
  color: #050508 !important;
  font-weight: 600 !important;
  font-family: var(--dxai-font) !important;
  box-shadow: 0 4px 16px rgba(0,245,255,.28) !important;
  transition: all .2s ease !important;
}
button[class*="Primary"]:hover,
[class*="ButtonPrimary"]:hover { box-shadow: 0 6px 24px rgba(0,245,255,.45) !important; transform: translateY(-1px) !important; }

/* --- Secundario / ghost --- */
button:not([class*="Primary"]):not([class*="Accent"]) {
  border-color: var(--dxai-border) !important;
  color: var(--dxai-text-s) !important;
  background: rgba(12,12,22,.55) !important;
  border-radius: 8px !important;
  transition: all .2s ease !important;
}
button:not([class*="Primary"]):not([class*="Accent"]):hover {
  border-color: var(--dxai-cyan) !important;
  color: var(--dxai-cyan) !important;
  background: rgba(0,245,255,.05) !important;
}

/* ============================================
   INPUTS / CAMPOS
   ============================================ */
input,
textarea,
select,
[contenteditable="true"] {
  background: rgba(10,10,20,.8) !important;
  border: 1px solid var(--dxai-border) !important;
  border-radius: 8px !important;
  color: var(--dxai-text) !important;
  font-family: var(--dxai-font) !important;
  transition: border-color .2s, box-shadow .2s !important;
}
input:focus,
textarea:focus,
[contenteditable="true"]:focus {
  border-color: var(--dxai-cyan) !important;
  box-shadow: 0 0 0 3px rgba(0,245,255,.10), var(--dxai-glow) !important;
  outline: none !important;
}
input::placeholder,
textarea::placeholder { color: rgba(200,205,220,.4) !important; }

/* ============================================
   MODALES / DIALOGS (GLASSMORPHISM)
   ============================================ */
[role="dialog"],
[class*="Modal"],
[class*="modal"],
[class*="Dialog"],
[class*="dialog"] {
  background: rgba(8,8,18,.90) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid var(--dxai-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.75), var(--dxai-glow) !important;
}
/* Overlay de modal */
[class*="Backdrop"],
[class*="backdrop"],
[class*="Overlay"]:not([class*="scroll"]) {
  background: rgba(0,0,0,.72) !important;
  backdrop-filter: blur(4px) !important;
}

/* ============================================
   DROPDOWNS / POPOVERS / CONTEXT MENUS
   ============================================ */
[class*="Dropdown"],
[class*="dropdown"],
[class*="Popover"],
[class*="popover"],
[role="menu"],
[class*="ContextMenu"],
[class*="contextMenu"] {
  background: rgba(10,10,20,.96) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid var(--dxai-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.65) !important;
}
[role="menuitem"]:hover,
[class*="DropdownItem"]:hover {
  background: rgba(0,245,255,.07) !important;
  color: var(--dxai-cyan) !important;
}

/* ============================================
   BADGES / CHIPS / TAGS
   ============================================ */
[class*="Badge"],
[class*="Chip"],
[class*="Tag"],
[class*="Label"] {
  background: rgba(0,245,255,.10) !important;
  border: 1px solid rgba(0,245,255,.22) !important;
  color: var(--dxai-cyan) !important;
  border-radius: 20px !important;
}

/* ============================================
   KANBAN COLUMNS
   ============================================ */
[class*="Column"],
[class*="KanbanColumn"],
[class*="kanbanColumn"] {
  background: rgba(8,8,16,.60) !important;
  border: 1px solid var(--dxai-border) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(10px) !important;
}
[class*="ColumnHeader"],
[class*="columnHeader"] {
  border-bottom: 1px solid var(--dxai-border) !important;
}

/* ============================================
   TIPOGRAFÍA
   ============================================ */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--dxai-font) !important;
  color: var(--dxai-text) !important;
  letter-spacing: -.01em !important;
}
p, span, label, li, a {
  font-family: var(--dxai-font) !important;
}

/* ============================================
   DIVIDERS
   ============================================ */
hr, [class*="Divider"], [class*="divider"] {
  border-color: var(--dxai-border) !important;
}

/* ============================================
   COLORES DE ESTADO
   ============================================ */
[class*="success"],[class*="Success"] { color: var(--dxai-teal) !important; }
[class*="error"],[class*="Error"]     { color: #ff4d6d !important; }
[class*="warning"],[class*="Warning"] { color: #ffd60a !important; }
[class*="info"],[class*="Info"]       { color: var(--dxai-cyan) !important; }

/* ============================================
   PROGRESS / PIPELINE
   ============================================ */
[class*="Progress"] > [class*="bar"],
[class*="progress"] > div {
  background: var(--dxai-grad) !important;
}

/* ============================================
   TOOLTIPS
   ============================================ */
[role="tooltip"],
[class*="Tooltip"],
[class*="tooltip"] {
  background: rgba(5,5,15,.96) !important;
  border: 1px solid var(--dxai-border) !important;
  color: var(--dxai-text) !important;
  border-radius: 8px !important;
  font-family: var(--dxai-font) !important;
  font-size: 12px !important;
}

/* ============================================
   WATERMARK SUTIL
   ============================================ */
body::after {
  content: 'DESIGN X AI';
  position: fixed;
  bottom: 14px;
  right: 18px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2.5px;
  color: rgba(0,245,255,.20);
  pointer-events: none;
  z-index: 99999;
  text-transform: uppercase;
}