/*
Theme Name: Tema Gamer Custom
Description: Tema personalizado con est茅tica oscura y ne贸n.
Author: Daniel
Version: 1.0
*/

:root {
    --fondo-principal: #262626;
    --fondo-tarjeta: #1a1a1a;
    --acento-neon: #39ff14;
    --texto-claro: #e0e0e0;
    --borde-oscuro: #333333;
}

body {
    background-color: var(--fondo-principal);
    color: var(--texto-claro);
    font-family: 'Orbitron', sans-serif;
    margin: 0;
    padding: 0;
}

/* Enlaces globales */
a {
    color: var(--acento-neon);
    text-decoration: none;
    transition: 0.3s;
}

a:hover {
    text-shadow: 0 0 8px rgba(57, 255, 20, 0.5);
}

/* Contenedor principal para que el contenido no pegue a los bordes */
.contenedor-principal {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}
/* --- ESTILOS GLOBALES Y CONTENEDOR --- */
:root {
    --fondo-principal: #262626;
    --fondo-tarjeta: #1a1a1a;
    --acento-neon: #39ff14;
    --texto-claro: #e0e0e0;
    --borde-oscuro: #333333;
}

body {
    background-color: var(--fondo-principal);
    color: var(--texto-claro);
    font-family: 'Orbitron', sans-serif;
    margin: 0;
    padding: 0;
    /* Esto ayuda a que el footer siempre baje */
    display: flex;
    flex-direction: column;
    min-height: 100vh; 
}

.contenedor-principal {
    flex: 1; /* Ocupa el espacio restante para empujar el footer */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    box-sizing: border-box;
}

/* --- GRID DE PRODUCTOS WOOCOMMERCE --- */
/* Forzar la cuadrícula */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Eliminar el comportamiento flotante por defecto de WooCommerce */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none !important;
}

/* --- TARJETAS DE PRODUCTO --- */
.woocommerce ul.products li.product {
    background-color: var(--fondo-tarjeta) !important;
    border: 1px solid var(--borde-oscuro) !important;
    border-radius: 8px !important;
    padding: 20px !important;
    text-align: center !important;
    width: 100% !important; 
    margin: 0 !important; 
    transition: all 0.3s ease;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box;
    position: relative;
}

.woocommerce ul.products li.product:hover {
    border-color: var(--acento-neon) !important;
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.15) !important;
    transform: translateY(-5px);
}

/* Títulos y Precios */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    color: #ffffff !important;
    font-size: 1.1rem !important;
    margin: 15px 0 10px !important;
    padding: 0 !important;
}

.woocommerce ul.products li.product .price {
    color: var(--acento-neon) !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}

/* Etiqueta de Oferta */
.woocommerce ul.products li.product .onsale {
    background-color: var(--acento-neon) !important;
    color: var(--fondo-principal) !important;
    border-radius: 4px !important;
    padding: 5px 10px !important;
    font-size: 0.8rem !important;
    font-weight: 900 !important;
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    margin: 0 !important;
    min-height: auto !important;
    min-width: auto !important;
    line-height: 1 !important;
}

/* --- ARREGLO DE LOS BOTONES ("Seleccionar opciones" / "Añadir al carrito") --- */
.woocommerce ul.products li.product .button {
    display: block !important;
    width: 100% !important;
    padding: 12px 10px !important; /* Espacio interno para que el texto respire */
    background: transparent !important; /* Quita el cuadro blanco */
    color: var(--acento-neon) !important;
    border: 2px solid var(--acento-neon) !important;
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    text-transform: uppercase !important;
    text-align: center !important;
    white-space: normal !important; /* Permite que el texto baje de línea si es largo */
    line-height: 1.2 !important;
    border-radius: 4px !important;
    margin-top: auto !important; /* Empuja el botón siempre al fondo de la tarjeta */
    box-sizing: border-box !important;
}

.woocommerce ul.products li.product .button:hover {
    background-color: var(--acento-neon) !important;
    color: var(--fondo-principal) !important;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.4) !important;
}

/* --- ESTILOS DEL MENÚ DE NAVEGACIÓN --- */
.navegacion-principal {
    display: flex;
    align-items: center;
}

.menu-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 30px;
    align-items: center;
}

.menu-items li a {
    color: var(--texto-claro);
    font-size: 0.9rem;
    text-transform: uppercase;
    font-weight: 700;
}

.menu-items li a:hover {
    color: var(--acento-neon);
}

/* Ocultar el botón de hamburguesa en PC */
.menu-toggle {
    display: none;
    background: transparent;
    color: var(--acento-neon);
    border: 1px solid var(--acento-neon);
    padding: 8px 15px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    border-radius: 4px;
}

/* --- CLASE ESPECIAL PARA CONVERTIR UN ENLACE EN BOTÓN --- */
.menu-items li.boton-neon a {
    display: inline-block;
    background-color: transparent;
    color: var(--acento-neon);
    border: 2px solid var(--acento-neon);
    padding: 8px 20px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.menu-items li.boton-neon a:hover {
    background-color: var(--acento-neon);
    color: var(--fondo-principal);
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.4);
    text-shadow: none; /* Quitamos el brillo del texto para que contraste con el fondo verde */
}

/* --- MODO CELULAR (Pantallas pequeñas) --- */
@media (max-width: 768px) {
    .menu-toggle {
        display: block; /* Mostramos el botón hamburguesa */
    }

    .menu-items {
        display: none; /* Ocultamos los enlaces por defecto */
        flex-direction: column;
        position: absolute;
        top: 100%; /* Justo debajo del header */
        left: 0;
        width: 100%;
        background-color: var(--fondo-tarjeta);
        padding: 20px 0;
        border-bottom: 2px solid var(--acento-neon);
        z-index: 999; /* Asegura que el menú flote por encima de los productos */
        text-align: center;
    }

    /* Esta clase se añadirá con JavaScript al tocar el botón */
    .menu-items.activo {
        display: flex; 
    }

    .menu-items li.boton-neon a {
        margin-top: 10px;
    }
}

/* --- ESTILOS PARA MENÚS DESPLEGABLES (VARIACIONES DE PRODUCTO) --- */

/* 1. Estilizar el contenedor de variaciones (tabla por defecto de WooCommerce) */
.woocommerce div.product form.cart .variations {
    border: none !important;
    margin-bottom: 25px !important;
    width: 100%;
}

.woocommerce div.product form.cart .variations td {
    padding: 10px 0 !important;
    display: block !important; /* Fuerza a que la etiqueta y el selector se apilen en celulares */
    border: none !important;
}

/* 2. Estilizar la etiqueta (Ej. "Monto de recarga") */
.woocommerce div.product form.cart .variations label {
    color: var(--texto-claro) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    display: block;
}

/* 3. El Menú Desplegable (Select) */
.woocommerce div.product form.cart .variations select {
    background-color: var(--fondo-tarjeta) !important; /* Fondo gris oscuro */
    color: #ffffff !important; /* Texto blanco puro para máxima legibilidad */
    border: 2px solid var(--borde-oscuro) !important;
    padding: 12px 40px 12px 15px !important; /* Espacio extra a la derecha para la flecha */
    font-family: 'Orbitron', sans-serif !important;
    font-size: 0.95rem !important;
    border-radius: 4px !important;
    width: 100% !important;
    max-width: 350px !important; /* Evita que sea gigante en monitores anchos */
    cursor: pointer !important;
    outline: none !important;
    transition: all 0.3s ease;
    
    /* Eliminar la flecha nativa del navegador */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    
    /* Crear una flecha personalizada en color verde neón usando SVG */
    background-image: url('data:image/svg+xml;utf8,<svg fill="%2339ff14" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 24px !important;
}

/* 4. Efecto Focus (Al hacer clic en el desplegable) */
.woocommerce div.product form.cart .variations select:focus {
    border-color: var(--acento-neon) !important;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.2) !important;
}

/* 5. Estilizar las opciones de adentro (El fondo de la lista al abrir) */
.woocommerce div.product form.cart .variations select option {
    background-color: var(--fondo-principal) !important;
    color: var(--texto-claro) !important;
    padding: 10px !important;
}

/* 6. Enlace de "Limpiar selección" que aparece al elegir una opción */
.woocommerce div.product form.cart .reset_variations {
    color: var(--acento-neon) !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    margin-top: 10px !important;
    display: inline-block !important;
}

/* =========================================
   ESTILOS PARA CAMPOS PERSONALIZADOS (MODO OSCURO)
   ========================================= */

/* Color de los títulos (Usuario, Contraseña, etc.) */
.dg-campos-producto label {
    color: #39ff14 !important; /* Verde fosforescente */
    font-size: 15px;
    letter-spacing: 0.5px;
}

/* El asterisco rojo de obligatorio */
.dg-campos-producto abbr.required {
    color: #ff3333 !important; 
}

/* Diseño de las cajas de texto y números */
.dg-campos-producto input[type="text"],
.dg-campos-producto input[type="number"] {
    background-color: #1a1a1a !important; 
    color: #39ff14 !important; 
    border: 1px solid #2b8a1c !important; 
    border-radius: 4px;
    padding: 10px 15px;
    transition: all 0.3s ease;
    width: 100%; /* Asegura que ocupe todo el ancho */
}

/* Efecto de brillo al hacer clic */
.dg-campos-producto input[type="text"]:focus,
.dg-campos-producto input[type="number"]:focus {
    outline: none !important;
    border-color: #39ff14 !important; 
    box-shadow: 0 0 8px rgba(57, 255, 20, 0.4) !important; 
    background-color: #000000 !important; 
}

/* Color del texto de ayuda (placeholder) */
.dg-campos-producto input[type="text"]::placeholder,
.dg-campos-producto input[type="number"]::placeholder {
    color: #555555 !important; 
}

/* --- CANTIDAD Y BOTÓN DE AÑADIR AL CARRITO (PÁGINA INDIVIDUAL) --- */

/* 1. Contenedor principal: alinea la cantidad y el botón lado a lado */
.woocommerce div.product form.cart {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important; /* Espacio exacto entre la caja y el botón */
    flex-wrap: wrap !important;
    margin-top: 25px !important;
}

/* 2. Caja de cantidad (Input) */
.woocommerce div.product form.cart div.quantity {
    margin: 0 !important;
}

.woocommerce div.product form.cart input.qty {
    background-color: var(--fondo-tarjeta) !important;
    color: #ffffff !important;
    border: 2px solid var(--borde-oscuro) !important;
    border-radius: 4px !important;
    height: 50px !important; /* Altura estricta para igualar al botón */
    width: 70px !important;
    padding: 0 !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

.woocommerce div.product form.cart input.qty:focus {
    border-color: var(--acento-neon) !important;
    outline: none !important;
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.2) !important;
}

/* Opcional: Ocultar las flechas nativas del navegador en el número para que se vea más limpio */
.woocommerce div.product form.cart input.qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.woocommerce div.product form.cart input.qty {
    -moz-appearance: textfield;
}

/* 3. Botón "Añadir al carrito" principal */
.woocommerce div.product form.cart .single_add_to_cart_button {
    background-color: transparent !important;
    color: var(--acento-neon) !important;
    border: 2px solid var(--acento-neon) !important;
    height: 50px !important; /* La misma altura que el input de cantidad */
    padding: 0 30px !important;
    border-radius: 4px !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important; 
    box-sizing: border-box !important;
}

/* Efecto hover del botón */
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
    background-color: var(--acento-neon) !important;
    color: var(--fondo-principal) !important;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.4) !important;
}

/* --- BOTÓN DE REALIZAR PEDIDO (PÁGINA DE CHECKOUT) --- */
.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
    background-color: transparent !important;
    color: var(--acento-neon) !important;
    border: 2px solid var(--acento-neon) !important;
    padding: 15px 30px !important;
    border-radius: 4px !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 1.2rem !important; /* Un poco más grande para que destaque en el checkout */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    width: 100% !important; /* Que ocupe todo el ancho disponible del contenedor */
    box-sizing: border-box !important;
    display: block !important;
    margin-top: 20px !important;
}

/* Efecto hover al pasar el ratón */
.woocommerce #payment #place_order:hover,
.woocommerce-page #payment #place_order:hover {
    background-color: var(--acento-neon) !important;
    color: var(--fondo-principal) !important;
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.4) !important;
}