/* Paleta del sitio aplicada al popover de driver.js (tour del cuadro), scoped a
   .cb-tour-popover (ver popoverClass en scripts/cuadroTour.js) para no afectar
   a otros posibles usos futuros de driver.js con otro look. */
.cb-tour-popover {
    background: var(--primary);
    color: var(--color, whitesmoke);
    border: 1px solid var(--secondary);
}

.cb-tour-popover .driver-popover-title {
    color: var(--secondary);
}

.cb-tour-popover .driver-popover-description {
    color: var(--color, whitesmoke);
}

.cb-tour-popover .driver-popover-progress-text {
    color: var(--secondary);
}

.cb-tour-popover .driver-popover-close-btn {
    color: var(--secondary);
}

.cb-tour-popover .driver-popover-footer-btn {
    background: var(--secondary);
    color: var(--primary-dark);
    border: none;
    text-shadow: none;
}

.cb-tour-popover .driver-popover-footer-btn:hover {
    background: var(--secondary);
    opacity: 0.85;
}

/* La flecha del popover es un div con border-color a 4 lados, 3 puestos a
   transparente según el lado (ver driver.css) para dejar solo un triángulo
   visible -- hay que repintar ese triángulo Y volver a poner transparentes
   los otros 3 lados (si no, sale un rombo en vez de un triángulo). */
.cb-tour-popover .driver-popover-arrow {
    border-color: var(--primary);
}

.cb-tour-popover .driver-popover-arrow-side-left {
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-right-color: transparent;
}

.cb-tour-popover .driver-popover-arrow-side-right {
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.cb-tour-popover .driver-popover-arrow-side-top {
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
}

.cb-tour-popover .driver-popover-arrow-side-bottom {
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
}