/* public/css/laboratorio-theme.css */

/* Asegúrate de que la fuente Montserrat esté importada, idealmente en nexus-theme.css */
/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;900&display=swap'); */

html.theme-laboratorio {
    /* === PALETA Y VARIABLES PARA TEMA LABORATORIO (Inspirado en tu E-commerce Oscuro) === */
    --main-bg: #181818;                     /* Fondo principal muy oscuro (de tu tienda) */
    --main-text: #e0e0e0;                   /* Texto principal blanco/gris muy claro */
    --muted-text: #a0a0a0;                  /* Gris medio para texto secundario */
    --heading-text: #ffffff;                /* Blanco puro para títulos */
    --subtle-text: #6c757d;                 /* Para placeholders o detalles aún más sutiles */
    
    --light-text-on-dark-bg: #ffffff;       /* Texto blanco sobre fondos oscuros/acentos */
    --dark-text-on-light-bg: #181818;       /* Texto oscuro si usaras un fondo de acento claro */

    /* Tarjetas .glassmorphism: estilo más sólido, menos "vidrio", como tu tienda */
    --card-bg: #2a2a2a;                     /* Gris oscuro, ligeramente más claro que el fondo */
    --card-border: rgba(255, 255, 255, 0.1);/* Borde blanco muy sutil */
    --card-hover-bg: #333333; 
    
    --card-light-bg: #383838;               /* Para variaciones, un gris un poco más claro */
    --card-light-border: rgba(255, 255, 255, 0.15);
    
    /* Inputs: similar al newsletter de tu tienda */
    --input-bg: #303030;                    /* Fondo de input gris oscuro */
    --input-border: #444444;                /* Borde gris un poco más claro */
    --input-text: #e0e0e0;                  /* Texto de input claro */
    --input-placeholder: #888888;           /* Placeholder gris */
    
    /* Color de Foco Principal (el azul de tus botones "COMPRAR") */
    --focus-ring-color: #3498db;            
    --focus-shadow-color: rgba(52, 152, 219, 0.3); /* Sombra de foco azul */

    /* Efecto Aurora: Desactivado o muy sutil para un look limpio */
    --aurora-opacity: 0; /* 0 para desactivar, o un valor muy bajo (ej. 0.02) para un brillo casi imperceptible */                
    --aurora-1-color: #3498db;              
    --aurora-2-color: #1f2937; /* Un gris azulado oscuro para el brillo sutil si se activa */

    /* Colores de Acento para Laboratorio (inspirados en tu tienda) */
    --accent-blue: #3498db;                 /* Azul principal (botones "COMPRAR") */
    --accent-green: #27ae60;                /* Verde para éxito (un poco más brillante) */
    --accent-purple: #5269d4;               /* Púrpura (puedes usar un azul más oscuro o un gris si no lo necesitas) */
    --accent-amber: #f39c12;                /* Ámbar para advertencias o destaques secundarios */
    --accent-lime: #84cc16;                 
    --accent-red: #c0392b;                  /* Rojo para errores (un poco menos brillante que el de la tienda) */
    --accent-yellow: #f1c40f;               
    --accent-orange: #d35400;               
    --accent-teal: #16a085;                 
    --accent-rose: #c0392b;                 

    /* Texto sobre el color de acento principal (azul) */
    --text-on-accent-primary: #ffffff;      /* Texto blanco para el botón azul */
}

/* === AJUSTES ESTRUCTURALES PARA EL TEMA LABORATORIO (Estilo E-commerce) === */

/* Ajuste para las tarjetas glassmorphism para que se parezcan más a las de tu tienda (más sólidas) */
html.theme-laboratorio .glassmorphism,
html.theme-laboratorio .glassmorphism-light {
    backdrop-filter: none; /* Sin efecto blur para un look más plano y sólido */
    -webkit-backdrop-filter: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); /* Sombra un poco más definida en fondo oscuro */
    border-radius: 0.375rem; /* rounded-md, un poco menos redondeado si tu tienda los tiene así */
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
}

/* Inputs más planos */
html.theme-laboratorio .input-nexus {
    box-shadow: none; /* Sin sombra interna */
}
html.theme-laboratorio .input-nexus:focus {
    border-color: var(--focus-ring-color); 
    box-shadow: 0 0 0 2px var(--focus-shadow-color); /* Ajusta el grosor del anillo de foco */
}

/* Botón Primario (estilo "COMPRAR" de tu tienda) */
html.theme-laboratorio .btn-primary,
html.theme-laboratorio .btn-nexus[style*="var(--accent-blue)"], /* Para botones con el azul como color de fondo explícito */
html.theme-laboratorio .btn-nexus[style*="var(--accent-green)"], /* Para botones con verde (canjear ahora) */
html.theme-laboratorio .btn-nexus[style*="var(--accent-lime)"], /* Para botones con lima (cargar compra) */
html.theme-laboratorio .btn-nexus[style*="var(--accent-yellow)"] /* Para botones con amarillo (verificar en admin) */
 {
    background-color: var(--accent-blue); /* Todos los primarios usarán el azul como base */
    color: var(--text-on-accent-primary);
    border-radius: 0.25rem; /* rounded-sm, más cuadrado */
    text-transform: uppercase;
    font-weight: bold;
    padding-top: 0.6rem; /* Un poco más de padding vertical */
    padding-bottom: 0.6rem;
    border: none; /* Sin borde por defecto si el fondo es sólido */
}
html.theme-laboratorio .btn-primary:hover,
html.theme-laboratorio .btn-nexus[style*="var(--accent-blue)"]:hover,
html.theme-laboratorio .btn-nexus[style*="var(--accent-green)"]:hover,
html.theme-laboratorio .btn-nexus[style*="var(--accent-lime)"]:hover,
html.theme-laboratorio .btn-nexus[style*="var(--accent-yellow)"]:hover {
    background-color: color-mix(in srgb, var(--accent-blue) 85%, #000000 15%); /* Se oscurece un poco al pasar el mouse */
}

/* Si tienes botones secundarios que deben destacar pero no ser el azul principal */
html.theme-laboratorio .btn-secondary {
    background-color: var(--muted-text); /* Un gris para acciones secundarias */
    color: var(--main-bg); /* Texto oscuro sobre el gris */
    border-radius: 0.25rem;
    text-transform: uppercase;
    font-weight: bold;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    border: none;
}
html.theme-laboratorio .btn-secondary:hover {
     background-color: color-mix(in srgb, var(--muted-text) 85%, #000000 15%);
}


/* Botón de cambio de tema */
html.theme-laboratorio #theme-toggle {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    color: var(--main-text);
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}