.skin-calipso {
  /*  Colores principales */
  --color-primario: #00E5FF;       /* Azul calipso base */
  --color-secundario: #00F7FF;     /* Más claro, flúor */
  --color-fondo: #1F1C1B;          /* Fondo negro */
  --color-texto: #FFFFFF;          /* Texto principal */
  --color-acento: #1F650F;         /* Verde de acción / éxito */
  --color-borde: #36A9E1;          /* Azul más suave para bordes */
  --color-cursor: white;          /* color claro */
  --color-placeholder: #888 ;
  
  /*  Sombras y efectos */ 
  --text-shadow: 0 0 5px #00E5FF;
  --sombra-neon: 0 0 10px var(--color-primario),
                 0 0 20px var(--color-secundario) inset;
				 
  --sombra-neon-suave: 0 0 5px var(--color-primario),
                 0 0 10px var(--color-secundario) inset;
				 
  --hover-neon:  0 0 20px var(--color-secundario),
                 0 0 30px var(--color-primario) inset;
				 
   --hover-neon-suave: 0 0 10px var(--color-secundario),
                0 0 15px var(--color-primario) inset;

  /*  Estilos globales */
  --radio-borde: 0.3em;
  --transicion: 0.3s ease;
  
  
}



.skin-claro{
  /*  Colores principales */
  --color-primario: #7F00FF;       /* Azul violeta base */
  --color-secundario: #B266FF;     /* Más claro, flúor violeta */
  --color-fondo: #FFFFFF;          /* Fondo blanco */
  --color-fondo-suave:  #E6E1F5;   /* Más claro,  violeta */
  --color-texto: #000000;          /* Texto principal negro */
  --color-texto-claro: #FFFFFF;          /* Texto principal negro */
  --color-acento: #1F650F;         /* Verde de acción / éxito */
  --color-borde: #7F00FF;          /* Azul violeta más suave para bordes */
  --color-borde-suave: #E6E1F5;          /* Azul violeta más suave para bordes */
  --color-cursor: #000000;         /* Cursor oscuro sobre fondo blanco */
  --color-placeholder: #555555;    /* Placeholder gris medio */
  --color-pestana-activa: #FFFFFF;          /* Fondo blanco */
  --color-pestana-hover:#7F00FF;
  --color-pestana-texto-hover:#FFFFFF; 
  --color-pestana-texto:#7F00FF;
  /*  Sombras y efectos */ 
  --text-shadow: 0 0 5px #00E5FF;
  --sombra-neon: 0 0 5px var(--color-primario),
                 0 0 10px var(--color-secundario) inset;
				 
 --sombra-neon-suave: 0 0 1px var(--color-primario),
                 0 0 5px var(--color-secundario) inset;
                 
  --hover-neon: 0 0 10px var(--color-secundario),
                0 0 15px var(--color-primario) inset;
				
  --hover-neon-suave: 0 0 3px var(--color-secundario),
                0 0 6px var(--color-primario) inset;

  /*  Estilos globales */
  --radio-borde: 0.3em;
  --transicion: 0.3s ease;
}