:root {
    /* sidebar */
    --sidebar-bg: #f3f4f6;
    --sidebar-hover: #e5e7eb;
    --sidebar-border: #d1d5db;
    --sidebar-text: #1f2937;
    --sidebar-muted: #6b7280;

    /* escala neutra */
    --neutral-100: #f9fafb;
    --neutral-200: #f3f4f6;
    --neutral-300: #e5e7eb;
    --neutral-400: #d1d5db;
    --neutral-500: #9ca3af;
    --neutral-600: #6b7280;
    --neutral-700: #4b5563;
    --neutral-800: #374151;
    --neutral-900: #1f2937;

    --tour-tooltip-bg: #fff;
    --tour-tooltip-title-text: #1f2937;
    --tour-tooltip-text: #374151;
    --tour-tooltip-step-text: #6b7280;
    --tour-tooltip-arrow-color: #fff;

    --tour-btn-prev-bg: #e5e7eb;
    --tour-btn-prev-text: #1f2937;
    --tour-btn-prev-hover-bg: #d1d5db;

    --tour-btn-next-bg: #2563eb;
    --tour-btn-next-text: #fff;
    --tour-btn-next-hover-bg: #1d4ed8;

    --tour-btn-end-text: #6b7280;
    --tour-btn-end-hover-text: #1f2937;

    --tour-element-highlight-bg: transparent;
    --tour-highlighter-border: #bfdbfe;

    --card-bg: #ffffff;
    --card-border: #e5e7eb;
    --card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --card-text-primary: #111827;
    --card-text-secondary: #6b7280;
    --card-button-bg: #ffffff;
    --card-button-border: #d1d5db;
    --card-button-text: #374151;
    --card-button-hover-bg: #f9fafb;
}

/* ------ Variables modo oscuro ------ */
.dark {
    --sidebar-bg: #23272e;
    --sidebar-hover: #2d313a;
    --sidebar-border: #3a3e46;
    --sidebar-text: #f1f5f9;
    --sidebar-muted: #cbd5e1;

    --dark-neutral-100: #181b20;
    --dark-neutral-200: #23272e;
    --dark-neutral-300: #2d313a;
    --dark-neutral-400: #3a3e46;
    --dark-neutral-500: #4c5058;
    --dark-neutral-600: #5f636b;
    --dark-neutral-700: #73777f;
    --dark-neutral-800: #8e9299;
    --dark-neutral-900: #cbd5e1;

    --gray-900: var(--dark-neutral-100);
    --gray-800: var(--dark-neutral-200);
    --gray-700: var(--dark-neutral-300);
    --gray-600: var(--dark-neutral-400);
    --gray-500: var(--dark-neutral-500);
    --gray-400: var(--dark-neutral-600);
    --gray-300: var(--dark-neutral-700);
    --gray-200: var(--dark-neutral-800);
    --gray-100: var(--dark-neutral-900);

    --tour-tooltip-bg: #1f2937;
    --tour-tooltip-title-text: #f1f5f9;
    --tour-tooltip-text: #d1d5db;
    --tour-tooltip-step-text: #9ca3af;
    --tour-tooltip-arrow-color: #1f2937;

    --tour-btn-prev-bg: #374151;
    --tour-btn-prev-text: #e5e7eb;
    --tour-btn-prev-hover-bg: #4b5563;

    --tour-btn-next-bg: #3b82f6;
    --tour-btn-next-text: #fff;
    --tour-btn-next-hover-bg: #2563eb;

    --tour-btn-end-text: #9ca3af;
    --tour-btn-end-hover-text: #e5e7eb;

    --tour-element-highlight-bg: transparent;

    --card-bg: #23272e;
    --card-border: #374151;
    --card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --card-text-primary: #f9fafb;
    --card-text-secondary: #9ca3af;
    --card-button-bg: #374151;
    --card-button-border: #4b5563;
    --card-button-text: #e5e7eb;
    --card-button-hover-bg: #4b5563;
}

#sidebar {
    background: var(--sidebar-bg) !important;
    color: var(--sidebar-text) !important;
}

#sidebar a,
#sidebar button {
    color: var(--sidebar-muted);
}

#sidebar a:hover,
#sidebar button:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-text);
}

header {
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    border-bottom: 1px solid var(--sidebar-border);
}

/* ajustes rápidos en modo oscuro */
.dark .bg-white,
.dark .bg-gray-100,
.dark .bg-gray-200 {
    background: var(--dark-neutral-100) !important;
}

.dark .border-gray-200,
.dark .border-gray-300 {
    border-color: var(--sidebar-border) !important;
}

.dark .text-gray-700,
.dark .text-gray-600 {
    color: var(--sidebar-muted) !important;
}


/* overlay solo captura clics */
#tour-overlay {
    background: transparent !important;
}

/* highlighter: sombra afuera + borde */
#tour-highlighter {
    pointer-events: none;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35),
        0 0 0 2px var(--tour-highlighter-border);
    border-radius: 6px;
}

/* tooltip */
#tour-tooltip {
    background: var(--tour-tooltip-bg);
}

#tour-tooltip-title {
    color: var(--tour-tooltip-title-text);
}

#tour-tooltip-content {
    color: var(--tour-tooltip-text);
}

#tour-tooltip-step {
    color: var(--tour-tooltip-step-text);
}

/* flechas tooltip */
.tour-tooltip-arrow::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

.tour-tooltip-arrow-top::before {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 8px 8px 8px;
    border-color: transparent transparent var(--tour-tooltip-arrow-color) transparent;
}

.tour-tooltip-arrow-bottom::before {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px 8px 0 8px;
    border-color: var(--tour-tooltip-arrow-color) transparent transparent transparent;
}

.tour-tooltip-arrow-left::before {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-width: 8px 8px 8px 0;
    border-color: transparent var(--tour-tooltip-arrow-color) transparent transparent;
}

.tour-tooltip-arrow-right::before {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-width: 8px 0 8px 8px;
    border-color: transparent transparent transparent var(--tour-tooltip-arrow-color);
}

/* botones tooltip */
#tour-prev-btn {
    background: var(--tour-btn-prev-bg);
    color: var(--tour-btn-prev-text);
}

#tour-prev-btn:hover {
    background: var(--tour-btn-prev-hover-bg);
}

#tour-next-btn {
    background: var(--tour-btn-next-bg);
    color: var(--tour-btn-next-text);
}

#tour-next-btn:hover {
    background: var(--tour-btn-next-hover-bg);
}

#tour-end-btn {
    color: var(--tour-btn-end-text);
}

#tour-end-btn:hover {
    color: var(--tour-btn-end-hover-text);
}

/* Clases de utilidad para la tarjeta */
.bg-card {
    background-color: var(--card-bg);
}

.border-card {
    border-color: var(--card-border);
}

.shadow-card {
    box-shadow: var(--card-shadow);
}

.text-card-primary {
    color: var(--card-text-primary);
}

.text-card-secondary {
    color: var(--card-text-secondary);
}

.bg-card-button {
    background-color: var(--card-button-bg);
}

.border-card-button {
    border-color: var(--card-button-border);
}

.text-card-button {
    color: var(--card-button-text);
}

.hover\:bg-card-button-hover:hover {
    background-color: var(--card-button-hover-bg);
}

/* Estilos para el panel lateral del carrito */
#cart-sidebar {
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text);
    box-shadow: var(--sidebar-shadow);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
    z-index: 50;
}

#cart-sidebar.open {
    transform: translateX(0);
    visibility: visible;
}

/* Estilos para el overlay */
#cart-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    z-index: 40;
}

#cart-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* Estilos para los botones y elementos dentro del carrito */
#cart-sidebar .divide-y> :not([hidden])~ :not([hidden]) {
    border-color: var(--sidebar-border);
}

#cart-sidebar .btn-primary {
    background-color: var(--ring);
    color: white;
}

#cart-sidebar .btn-primary:hover {
    opacity: 0.9;
}

/* Estilo para el botón deshabilitado */
#cart-sidebar .btn-primary:disabled {
    background-color: var(--sidebar-muted);
    opacity: 0.7;
    cursor: not-allowed;
}