@layer base {
  /* 1. TEMA PREDETERMINADO (Deep Purple Glow - Onix Personal) */
  :root {
    color-scheme: dark;
    --bg-pagina: linear-gradient(180deg, #420f8e 0%, #621b85 50%, #6a2ca9 100%); 
    --bg-tarjeta: rgba(25, 10, 45, 1); 
    --borde-principal: #7e22ce; 
    --borde-secundario: #a855f7;
    --texto-principal: #ffffff; 
    --texto-secundario: #e9d5ff; 
    --color-acento: #c084fc;
    --color-info: #d8b4fe; 
    --bg-tag: rgba(126, 34, 206, 0.25); 
    --border-tag: #9333ea;
  }

  /* 2. TEMA ENTERPRISE (Corporativo Azul Elegante) - MODO PREDETERMINADO B2B */
  [data-theme="enterprise"] {
    color-scheme: dark;
    --bg-pagina: linear-gradient(180deg, #0f172a 0%, #1e3a8a 50%, #1e40af 100%);
    --bg-tarjeta: rgba(15, 23, 42, 1);
    --borde-principal: #3b82f6;
    --borde-secundario: #60a5fa;
    --texto-principal: #f8fafc;
    --texto-secundario: #bfdbfe;
    --color-acento: #3b82f6;
    --color-info: #93c5fd;
    --bg-tag: rgba(59, 130, 246, 0.15);
    --border-tag: #2563eb;
  }

  /* 3. TEMA OSCURO (Luxury) */
  [data-theme="dark"] {
    color-scheme: dark;
    --bg-pagina: #000000;
    --bg-tarjeta: #0a0a0a;
    --borde-principal: #D4AF37;
    --borde-secundario: #B8860B;
    --texto-principal: #F5F5F5;
    --texto-secundario: #D4AF37;
    --color-acento: #D4AF37;
    --color-info: #D4AF37; 
    --bg-tag: rgba(212, 175, 55, 0.15);
    --border-tag: #B8860B;
  }

  /* 4. TEMA CLARO (Light) */
  [data-theme="light"] {
    color-scheme: light;
    --bg-pagina: #F4E6C3;        
    --bg-tarjeta: #FAF4E1;       
    --borde-principal: #4B0082;  
    --borde-secundario: #D4AF37; 
    --texto-principal: #2c2c2c;  
    --texto-secundario: #4B0082; 
    --color-acento: #4B0082;
    --color-info: #4B0082;
    --bg-tag: rgba(75, 0, 130, 0.1); 
    --border-tag: #4B0082;     
  }

  /* 5. TEMA CUSTOM (Inyectado por el usuario con variables CSS puras) */
  [data-theme="custom"] {
    color-scheme: var(--custom-scheme, dark);
    --bg-pagina: var(--custom-bg, #111111);
    --bg-tarjeta: var(--custom-card, #1a1a1a);
    --borde-principal: var(--custom-border, #444444);
    --borde-secundario: var(--custom-border-alt, #666666);
    --texto-principal: var(--custom-text, #ffffff);
    --texto-secundario: var(--custom-text-alt, #cccccc);
    --color-acento: var(--custom-accent, #ffffff);
    --color-info: var(--custom-accent, #ffffff);
    --bg-tag: rgba(255, 255, 255, 0.1);
    --border-tag: var(--custom-border, #444444);
  }
}