/* ========================================================
   SISTEMA DE DISEÑO OFICIAL - BASE Y VARIABLES
   ======================================================== */
:root {
  --bg-base: #0a1628;      
  --bg-panel: #0d1f3c; 
  --bg-card: color-mix(in srgb, var(--bg-base) 85%, white);      
  --bg-hover: color-mix(in srgb, var(--bg-base) 75%, white);    
  --accent: #2dd4a0;      
  --accent-hover: color-mix(in srgb, var(--accent) 85%, black); 
  --secondary: #4a90d9;
  --info: #4a90d9; 
  --text-main: #ffffff;    
  --text-muted: rgba(255, 255, 255, 0.5); 
  --border-color: rgba(74, 144, 217, 0.2); 
  --error: #ff6b6b;      
  --success: var(--accent);      
  --warning: #f59e0b;
  --disabled-bg: #1e293b; 
  --disabled-text: #475569;
}

body.light-mode {
  --bg-base: #f3f4f6;      
  --bg-panel: #ffffff;    
  --bg-card: #f9fafb;      
  --bg-hover: #e5e7eb;    
  --text-main: #1e293b;    
  --text-muted: #64748b;  
  --border-color: rgba(0, 0, 0, 0.1);
  --error: #ef4444; 
  --disabled-bg: #e2e8f0; 
  --disabled-text: #94a3b8;
}

* { 
  box-sizing: border-box; 
  transition: background-color 0.3s, border-color 0.3s; 
}

html, body { 
  margin: 0; 
  padding: 0; 
  background: var(--bg-base); 
  font-family: system-ui, -apple-system, sans-serif; 
  color: var(--text-main); 
  overflow: hidden; 
  height: 100vh; 
  height: 100dvh; 
}

.ct-layout-liquido { 
  display: grid; 
  grid-template-columns: 1fr 2fr; 
  gap: 25px; 
  width: 100%; 
  max-width: 1150px; 
  margin: 0 auto; 
  align-items: start; 
}

@media (max-width: 900px) { 
  .ct-layout-liquido { grid-template-columns: 1.2fr 2fr; gap: 15px; } 
}

.watermark-global { 
  position: fixed; 
  bottom: 10px; 
  right: 20px; 
  font-size: 0.7rem; 
  opacity: 0.4; 
  color: white; 
  z-index: 999999; 
  pointer-events: none; 
}