@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@700&display=swap');

/* Paleta de colores oficial para el modo oscuro */
:root {
    --bg-main: #1e1e24;      /* Fondo de la zona de trabajo (Background general) */
    --bg-sidebar: #18181e;   /* Color de la Barra Lateral (Sidebar) */
    --border-color: #2a2a35; /* Color sutil para separar secciones */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

body {
    background-color: var(--bg-main);
    display: flex;
    min-height: 100vh;
}

/* ====== CONTENEDOR PRINCIPAL ====== */
.app-container {
    width: 100%;
}

/* ====== SCROLLBAR PERSONALIZADO (Modo Oscuro) ====== */
/* Para navegadores WebKit (Chrome, Edge, Safari, Opera) */
::-webkit-scrollbar {
    width: 8px;  /* Ancho de la barra vertical */
    height: 8px; /* Alto de la barra horizontal (si llegara a existir) */
}

::-webkit-scrollbar-track {
    background: var(--bg-main); /* Fondo de la pista oscuro */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #2c2c35; /* Color del "pulgar" (igual a nuestro botón primario) */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #E63946; /* ¡El toque mágico! Se vuelve rojo al pasar el mouse */
}

/* Para navegadores Firefox (soporte más limitado, pero funcional) */
* {
    scrollbar-width: thin;
    scrollbar-color: #2c2c35 var(--bg-main);
}

/* ====== SIDEBAR (PANEL LATERAL) ====== */
.sidebar {
    width: 260px;
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    padding: 20px 10px;
    /* Añadimos Flexbox para controlar el orden interno */
    display: flex;
    flex-direction: column;
}

/* Contenedor y Estilo del Logo */
.logo-container {
    width: 100%;
}

.logo-img {
    max-width: 180px;        /* Tamaño solicitado */
    height: auto;
    display: block;          /* Para permitir el uso de margin auto */
    margin: 0 auto;          /* Centrado horizontal */
    padding: 20px 0;         /* Separación superior e inferior */
}

/* ====== CONTENIDO PRINCIPAL ====== */
.main-content {
    /* Ajustado a 260px para que el sidebar no lo tape */
    margin-left: 260px; 
    padding: 40px;
    width: calc(100% - 260px);
}

/* ====== PANTALLA DE LOGIN ====== */
.login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: var(--bg-main);
}

.login-box {
    background-color: var(--bg-sidebar);
    padding: 40px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    width: 350px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

.login-logo {
    max-width: 140px;
    margin-bottom: 20px;
}

.login-box h2 {
    color: #fff;
    margin-bottom: 25px;
    font-size: 20px;
}

.login-box input {
    width: 100%;
    padding: 14px;
    margin-bottom: 15px;
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
    color: white;
    border-radius: 6px;
    outline: none;
}

.error-msg {
    color: #ff5252;
    margin-top: 15px;
    font-size: 14px;
    height: 20px; /* Mantiene el espacio aunque esté vacío */
}

/* ====== FOOTER DEL SIDEBAR (Usuarios activos y Logout) ====== */
.sidebar-footer {
    /* Quitamos el position: absolute y usamos margin-top: auto */
    margin-top: auto; 
    width: 100%;
    padding: 10px; /* Ajustamos el padding para que no se desborde */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* Contenedor de avatares */
.active-users-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px; 
}

/* Estilo de cada círculo (Avatar) */
.user-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 16px;
    position: relative;
    border: 2px solid #18181e; /* Borde oscuro exacto solicitado */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    text-transform: uppercase;
}

/* Efecto apilado de corte a partir del segundo avatar */
.user-avatar ~ .user-avatar {
    margin-left: -10px;
}

/* Puntito verde de estado "Online" */
.status-dot {
    width: 11px;
    height: 11px;
    background-color: #2ecc71; 
    border-radius: 50%;
    position: absolute;
    bottom: -2px;
    right: -2px;
    border: 2px solid #18181e; /* Borde oscuro exacto solicitado */
}

/* ====== NAVEGACIÓN DEL SIDEBAR ====== */
.sidebar-nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
    padding: 0 10px; /* Separación de los bordes laterales */
}

/* Estilo base de los enlaces del menú */
.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #a0a0b0; /* Color gris para inactivos */
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.nav-link:hover {
    color: #ffffff;
    background-color: #2a2a35; /* Fondo tenue al pasar el mouse */
}

/* Tamaño del icono de Google Fonts */
.nav-link .material-symbols-outlined {
    font-size: 22px;
    transition: color 0.3s ease;
}

/* ====== ESTILO DEL BOTÓN ACTIVO ====== */
/* Replicando el estilo visual de tu imagen */
.nav-link.active {
    color: #ffffff;
    /* Degradado oscuro a transparente de izquierda a derecha */
    background: linear-gradient(90deg, rgba(211, 47, 47, 0.15) 0%, transparent 100%);
    border-left: 4px solid #d32f2f; /* Borde rojo */
    border-radius: 4px 8px 8px 4px;
    /* Ajustamos el padding izquierdo para que no se vea movido por culpa del borde */
    padding-left: 12px; 
}

/* Icono rojo cuando está activo */
.nav-link.active .material-symbols-outlined {
    color: #d32f2f; 
}

/* ====== MAIN CONTENT HEADER ====== */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    width: 100%; /* <-- Esta es la magia para mantener los botones a la derecha */
}

.main-header h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
    color: #fff;
}

/* ====== MODALES (Diseño unificado y moderno) ====== */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Fondo oscuro transparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background-color: #18181e; /* Fondo oscuro elegante */
    width: 600px;
    max-width: 90%;
    max-height: 85vh;
    border-radius: 20px; /* Bordes súper redondeados de tus ejemplos */
    border: 1px solid #2a2a35;
    display: flex;
    flex-direction: column;
    box-shadow: 0 15px 40px rgba(0,0,0,0.6);
}

.modal-header {
    padding: 25px 25px 10px 25px;
    position: relative; /* Clave para poder colocar la X a la derecha sin dañar el centro */
    display: flex;
    justify-content: center; /* Título perfectamente centrado */
    align-items: center;
    border-bottom: none; /* Sin línea divisoria */
}

.modal-header h2 { 
    font-size: 22px; 
    color: #E63946; /* Título Rojo Gamer */
    font-weight: bold;
    text-align: center;
}

.btn-close-icon {
    position: absolute;
    right: 25px;
    top: 25px;
    background: transparent;
    border: none;
    color: #a0a0b0;
    cursor: pointer;
    transition: color 0.3s;
}
.btn-close-icon:hover { color: #E63946; }

.modal-body {
    padding: 15px 25px;
    overflow-y: auto; 
}

.modal-footer {
    padding: 10px 25px 25px 25px;
    border-top: none; /* Sin línea divisoria */
    display: flex;
    justify-content: center; /* Botones centrados */
    gap: 15px;
}

/* ====== FORMULARIOS INTERNOS ====== */
.form-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 14px;
    color: #a0a0b0;
    font-weight: 500;
}

.modal-content input {
    background-color: #141419;
    border: 1px solid #2a2a35;
    color: white;
    padding: 12px;
    border-radius: 6px;
    outline: none;
    transition: border-color 0.3s;
}

.modal-content input:focus { border-color: #d32f2f; }

.modal-divider {
    border: 0;
    border-top: 1px solid #2a2a35;
    margin: 25px 0;
}

.opciones-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.opciones-header h3 { font-size: 16px; color: #fff; }

/* Estilo para las filas dinámicas de opciones */
.opcion-fila {
    display: flex;
    gap: 10px;
    background-color: #141419;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #2a2a35;
    margin-bottom: 10px;
    align-items: center;
}

.opcion-fila input { flex: 1; padding: 10px; }
.opcion-fila .input-precio { max-width: 100px; }

.btn-remove-opcion {
    background-color: transparent;
    color: #ff5252;
    border: none;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
}
.btn-remove-opcion:hover { background-color: rgba(255, 82, 82, 0.1); }

/* ====== FILA PARA FORMULARIOS COMPACTOS ====== */
.form-row {
    display: flex;
    gap: 15px; /* Espacio entre la columna del nombre y la imagen */
    margin-bottom: 10px;
    align-items: flex-start; /* Alinea los elementos por arriba por si el texto del archivo es largo */
}

.form-row .form-group {
    flex: 1; /* Hace que ambas columnas midan exactamente el 50% */
    margin-bottom: 0; /* Quitamos el margen inferior porque ya lo controla la fila */
}

/* Aseguramos que el botón de subir imagen mida lo mismo de alto que el input de texto */
.file-upload-label {
    height: 43px; /* Igualamos la altura con el input */
}

/* ====== CONTENEDOR DE PRODUCTOS ====== */
.productos-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start; /* Evita que las tarjetas se estiren verticalmente */
}

/* ====== TARJETA DE PRODUCTO ====== */
.producto-card {
    width: 480px;      
    max-width: 100%;   
    background-color: #18181e;
    
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M0,10 L10,0 L20,10 L10,20 Z' fill='none' stroke='rgba(255, 255, 255, 0.01)' stroke-width='1'/%3E%3C/svg%3E");

    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
}

/* Portada del juego (Estilo Flotante - Máxima Calidad) */
.producto-img-container {
    width: calc(100% - 24px); 
    height: 170px;
    margin: 12px auto 0 auto; 
    
    border-radius: 16px; 
    box-shadow: 0 6px 15px rgba(0,0,0,0.5); 
    background-color: #141419;
    
    /* Clave: Oculta los picos de la imagen cuadrada para mantener la curva */
    overflow: hidden; 
    position: relative;
}

/* La imagen real incrustada */
.producto-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    
    /* Forzamos la nitidez máxima */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
}

/* Título del juego */
.producto-titulo {
    font-family: 'Rajdhani', sans-serif; /* Aplica la nueva fuente */
    text-transform: uppercase; /* Lo pone todo en mayúsculas (muy gamer) */
    font-size: 28px; /* Lo hacemos un pelín más grande */
    text-align: center;
    color: #ffffff; /* Un rojo mucho más brillante y encendido */
    font-size: 26px; /* Aumentamos el tamaño significativamente */
    font-weight: 900; /* El grosor máximo de la fuente Roboto */
    letter-spacing: 1px; /* Separamos un poco las letras para que respiren */
    padding: 15px 10px 15px 10px;
    background-color: transparent; 
}

/* Cuadrícula de precios (Opciones) */
.opciones-grid {
    padding: 0 20px 20px 20px;
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 12px;
}

.opcion-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.opcion-info .nombre {
    font-size: 12px;
    color: #ffffff; /* Nombre en blanco */
    font-weight: bold; /* En negritas */
}

.opcion-info .precio {
    font-size: 14px;
    color: #2ecc71; /* Precio en verde esmeralda */
    font-weight: bold;
}

/* ====== BOTONES DE ACCIÓN INFERIORES ====== */
.acciones-card {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Crea exactamente 3 columnas del mismo tamaño */
    gap: 8px; /* Reduje un poco el espacio para que respiren mejor los botones */
    padding: 0 20px 20px 20px;
    margin-top: auto;
}

/* ====== BOTÓN DE SUBIDA DE ARCHIVOS ====== */
.file-upload-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #141419;
    border: 1px dashed #d32f2f; /* Borde punteado rojo */
    color: #d32f2f;
    padding: 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: bold;
}

.file-upload-label:hover {
    background-color: rgba(211, 47, 47, 0.1);
}

.file-name-preview {
    color: #a0a0b0;
    font-size: 13px;
    margin-top: 5px;
    text-align: center;
}

/* ====== BOTÓN DE SUBIDA PARA ICONOS DE OPCIONES ====== */
.file-upload-opcion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background-color: #1e1e24;
    border: 1px solid #2a2a35;
    color: #a0a0b0;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.3s;
    /* Evita que el botón se estire demasiado si el nombre del archivo es largo */
    max-width: 150px; 
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.file-upload-opcion:hover {
    border-color: #d32f2f;
    color: #fff;
}

/* =========================================
   SISTEMA DE DISEÑO GLOBAL: BOTONES
========================================= */

/* 1. BOTÓN PRINCIPAL (Oscuro que se enciende en Rojo Gamer al pasar el mouse) */
.btn-primario {
    background-color: #2c2c35;
    color: #e0e0e0;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    font-size: 13px;
    transition: all 0.3s ease;
    /* Añadido para que los iconos y el texto queden alineados */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: fit-content; /* Para que se adapte al texto */
}
.btn-primario:hover {
    background-color: #E63946;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(230, 57, 70, 0.4);
}

/* 2. BOTÓN SECUNDARIO (Blanco Elegante que pasa a Rojo al pasar el mouse) */
.btn-secundario {
    background-color: #e0e0e0;
    color: #18181e; 
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    font-size: 13px;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: fit-content;
}
.btn-secundario:hover {
    background-color: #E63946;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(230, 57, 70, 0.4);
}

/* 3. BOTÓN FANTASMA / CANCELAR (Transparente con bordes, sutil) */
.btn-fantasma {
    background-color: transparent;
    color: #888;
    border: 1px solid #444;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    font-size: 13px;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: fit-content;
}
.btn-fantasma:hover {
    background-color: #2c2c35;
    color: #ffffff;
    border-color: #888;
}

/* Ajustes especiales para botones que necesitan abarcar todo el ancho */
#btn-login { width: 100%; margin-top: 10px; }
#btn-logout-sidebar { margin: 0 auto; }

/* ====== ESTILOS PARA PRECIOS Y DESCUENTOS ====== */
.precio-container {
    display: flex;
    flex-direction: column; /* Apila el precio base arriba y la oferta abajo */
    align-items: flex-start; /* Los alinea a la izquierda */
    gap: 1px; /* Separación mínima para que se vean como un grupo */
    margin-top: 2px; /* Separación sutil del nombre del paquete */
}

.precio-original {
    color: #888; 
    font-size: 11px; 
    font-weight: normal;
    text-decoration: line-through; /* ¡MAGIA! Tacha el número */
    opacity: 0.7; /* Lo hace un poco más transparente para darle protagonismo al verde */
}

.precio-final {
    color: #2ecc71; 
    font-size: 14px; 
    font-weight: bold;
    /* MAGIA NEÓN RECARGADA: 3 capas de luz para que resista la captura 4K */
    text-shadow: 
        0 0 4px rgba(46, 204, 113, 0.3),   /* Núcleo brillante pegado al texto */
        0 0 10px rgba(46, 204, 113, 0.2),  /* Resplandor medio */
        0 0 20px rgba(46, 204, 113, 0.2);  /* Luz difusa lejana */
}

/* Ajuste para que quepan 2 inputs de precio en el modal */
.opcion-fila .input-precio {
    max-width: 85px; 
}

/* Hace que el botón borrar ocupe 1 sola columna como los demás */
.btn-borrar {
    grid-column: span 1;
}

/* Obligar a los botones de la tarjeta a estirarse al 100% de su columna */
.acciones-card .btn-primario {
    width: 100%;
    padding: 10px 0; /* Quitamos el padding lateral para que se autoajusten perfecto */
}

.opcion-contenido-izq {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ====== ETIQUETA DE DESCUENTO (Estilo Inventario Top-Left) ====== */
.badge-descuento {
    position: absolute; 
    top: -1px;   /* Se mantiene anclada arriba */
    left: -1px;  /* MAGIA: La mudamos a la esquina izquierda */
    
    background: linear-gradient(135deg, #ff416c, #ff4b2b); /* Degradado rojo vibrante */
    box-shadow: 0 3px 8px rgba(255, 65, 108, 0.4); /* Le damos un ligero resplandor rojo */
    color: #ffffff;
    
    padding: 3px 8px; /* Un pelín más compacta para no tapar tanto el icono */
    font-size: 11px;
    font-weight: 900;
    
    /* Invertimos las curvas para que encaje perfecto en la NUEVA esquina */
    border-top-left-radius: 10px;    /* Se funde con la curva externa de la caja */
    border-bottom-right-radius: 10px; /* Curva interna suave hacia el centro */
    box-shadow: 2px 2px 6px rgba(0,0,0,0.2); /* Sombra proyectada hacia abajo y derecha */
    
    /* Aseguramos que la etiqueta siempre flote por encima del icono de la moneda/cofre */
    z-index: 5; 
}

/* Ajuste de botones para que sean iguales y ocupen todo el ancho */
.acciones-card .btn-primario {
    width: 100%;
    padding: 10px 0;
}

/* ====== DISEÑO DEFINITIVO DE LAS CAJAS (Captura Perfecta) ====== */
.opcion-item {
    background: linear-gradient(145deg, #1e1e24 0%, #15151a 100%); 
    border: 1px solid #383844; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 10px 15px;
    
    display: flex;
    align-items: center; /* Mantiene el icono y el texto centrados */
    height: 75px;
    
    /* MAGIA: Permite colocar la etiqueta en la esquina sin empujar el texto */
    position: relative; 
    /* Añade esta línea: Un borde superior muy fino y semi-transparente */
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* 1. La caja inteligente (Mide 35x35 y centra lo que tenga adentro) */
.icono-opcion {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

/* 2. La imagen real (Se adapta a la caja sin deformarse) */
.icono-opcion img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

/* 2. Agrupamos el icono y los textos a la izquierda */
.opcion-contenido-izq {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 3. Acomodamos el nombre y los precios */
.opcion-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.opcion-info .nombre {
    font-size: 12px;
    color: #ffffff; 
    font-weight: bold; 
}

/* ====== BUSCADOR HEADER ====== */
.header-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* Espacio entre el buscador y el botón */
}

.search-container {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 12px;
    color: #a0a0b0;
    font-size: 20px;
    pointer-events: none; /* Evita que el click en el icono bloquee el input */
}

.search-container input {
    background-color: #141419;
    border: 1px solid #2a2a35;
    color: white;
    padding: 10px 10px 10px 40px; /* El 40px hace espacio para el icono de lupa */
    border-radius: 10px;
    outline: none;
    transition: all 0.3s;
    font-size: 14px;
    width: 250px; /* Ancho del buscador */
}

.search-container input:focus {
    border-color: #d32f2f; /* Borde rojo al seleccionar */
    box-shadow: 0 0 8px rgba(211, 47, 47, 0.2);
}

/* ====== PANEL DE TASAS (SIDEBAR) ====== */
.sidebar-tasas {
    background-color: #1e1e24; /* Un poco más claro que el sidebar para resaltar */
    margin: 10px;
    border-radius: 12px;
    padding: 15px;
    border: 1px solid #2a2a35;
}

.tasas-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 15px;
}

.tasas-subtitle {
    display: block;
    font-size: 11px;
    color: #a0a0b0;
    font-weight: 900;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.form-group-tasa {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #2a2a35;
    padding: 8px 0;
}

.form-group-tasa label {
    color: #fff;
    font-size: 13px;
    font-weight: 500;
}

.form-group-tasa input {
    background-color: transparent;
    border: none;
    color: #fff;
    text-align: right;
    width: 80px;
    outline: none;
    font-size: 13px;
}

#btn-save-tasas {
    background-color: #d32f2f; /* Botón rojo oscuro */
    width: 100%;
    margin-top: 15px;
    padding: 8px;
}

/* ====== CHOICES.JS DARK OVERRIDE ====== */
.choices { 
    margin-bottom: 0; 
    min-width: 100px; 
}

/* La caja principal donde dice "VES" */
.choices__inner {
    background-color: #141419 !important;
    border: 1px solid #2a2a35 !important;
    border-radius: 10px !important;
    color: white !important;
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 5px 15px !important;
}

/* El contenedor de la lista desplegable (El que salía blanco) */
.choices__list--dropdown, 
.choices__list[aria-expanded] {
    background-color: #18181e !important;
    border: 1px solid #2a2a35 !important;
    border-radius: 8px !important;
    margin-top: 5px !important; /* Lo separa un poquito de la caja principal */
}

/* Los items individuales dentro de la lista (USD, VES, PEN) */
.choices__list--dropdown .choices__item, 
.choices__list[aria-expanded] .choices__item {
    color: #a0a0b0 !important; /* Texto gris claro por defecto */
    font-size: 14px;
    padding: 10px 15px !important;
}

/* Cuando pasas el mouse por encima de una moneda */
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: #2a2a35 !important; 
    color: #ffffff !important; /* El texto se vuelve blanco brillante */
}

/* La flechita gris a la derecha */
.choices[data-type*="select-one"]::after {
    border-color: #a0a0b0 transparent transparent transparent !important;
}
/* La flechita cuando el menú está abierto */
.choices[data-type*="select-one"].is-open::after {
    border-color: transparent transparent #a0a0b0 transparent !important;
}

/* =========================================
   DISEÑO RESPONSIVO (MÓVILES Y TABLETS)
========================================= */
@media screen and (max-width: 768px) {
    /* 1. Mostrar el botón de menú */
    #btn-menu-movil {
        display: flex !important;
    }

    /* 2. Ocultar el Sidebar y prepararlo para deslizarse */
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 2000;
        box-shadow: 5px 0 15px rgba(0,0,0,0.5);
    }

    /* Clase que activaremos con JS para mostrar el menú */
    .sidebar.abierto {
        transform: translateX(0);
    }

    /* 3. Ajustar el contenedor principal */
    .main-content {
        margin-left: 0;
        width: 100%;
        padding: 20px 15px; /* Menos espacio a los lados en el celular */
    }

    /* 4. Apilar los botones del header superior */
    .main-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .header-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch; /* Estira los botones al 100% */
    }

    .search-container input {
        width: 100%; /* Buscador a pantalla completa */
    }

    /* 5. Ajustar la tarjeta de producto */
    .productos-grid {
        justify-content: center; /* Centrar las tarjetas */
    }

    .producto-card {
        width: 100%; /* La tarjeta ocupa el 100% del ancho del cel */
        max-width: 400px;
    }

    /* Las opciones a 1 sola columna en pantallas muy estrechas */
    .opciones-grid {
        grid-template-columns: 1fr; 
    }

    /* 6. Ajustar los Modales (Formularios) */
    .modal-content {
        width: 95%;
        padding: 10px;
        max-height: 90vh;
    }

    .form-row {
        flex-direction: column; /* Apilar input de nombre y botón de imagen */
        gap: 15px;
    }

    .opcion-fila {
        flex-wrap: wrap; /* Permitir que los inputs bajen de línea si no caben */
    }
}

/* =========================================
   FORZAR DISEÑO DE PC DURANTE LA CAPTURA
========================================= */
.producto-card.modo-captura {
    width: 480px !important;
    max-width: 480px !important;
    min-width: 480px !important;
}

.producto-card.modo-captura .opciones-grid {
    grid-template-columns: 1fr 1fr !important; /* Fuerza las 2 columnas */
}