:root {
    --custom-text-color: #3e55a5;
    --custom-color: #1d5eaa;
    --custom-color-hover: #2769b5;
    --custom-light: #7ba2d6;
    --custom-lighter: #dde8ff;
    --custom-check: #1d5eaa;

    --guide-primary: var(--custom-color);
    --guide-secondary: var(--custom-lighter);
    --guide-text: var(--custom-text-color);
    --guide-check: var(--bs-success);
}

/* Generales */
#kt_body .border-custom {
    border-color: var(--custom-color);
}

#kt_body .bg-custom {
    background-color: var(--custom-color);
    color: #fff;
}

#kt_body .bg-light-custom {
    background-color: var(--custom-lighter);
    color: var(--custom-color);
}

#kt_body .btn-custom {
    background-color: var(--custom-color);
    color: #fff;
}

#kt_body .btn-custom:hover {
    background-color: var(--custom-color-hover);
    color: #fff;
}

#kt_body .btn-light-custom {
    background-color: var(--custom-lighter);
    color: var(--custom-color);
}

#kt_body .btn-light-custom:hover {
    background-color: var(--custom-lighter);
    color: var(--custom-color);
}

#kt_body .btn-outline-custom {
    color: var(--custom-color);
    border-color: var(--custom-color);
}

#kt_body .btn-outline-custom:hover {
    background-color: var(--custom-lighter);
}

#kt_body .badge-custom {
    background-color: var(--custom-color);
    color: #fff;
}

#kt_body .badge-light-custom {
    background-color: var(--custom-lighter);
    color: var(--custom-color);
}

#kt_body .text-custom {
    color: var(--custom-text-color);
}

#kt_body .text-light-custom {
    color: var(--custom-light);
}

/*chackbox - radio*/
#kt_body .form-check-input:checked {
    background-color: var(--custom-check);
    border-color: var(--custom-check);
}

/* Dashboard */
#kt_body .company_card {
    background-color: var(--custom-lighter);
    border: 1px solid var(--custom-color);
    color: var(--custom-color);
}

/* Dashboard company */
/*chart barras*/
.apexcharts-bar-series path {
    fill: var(--custom-color);
}

.btn-register {
    transition: all 0.3s ease-in-out;
}

.btn-register:hover {
    color: #fff;
    background-color: var(--custom-light) !important;
}

/* NAVBAR */
:root {
    --header-bg-color: var(--custom-color);
    --nav-text-color: #fff;
    --nav-hover-color: var(--custom-light);
    --submenu-bg-color: var(--custom-lighter);
    --submenu-text-color: var(--custom-color);
}

/* Cabecera */
.header {
    background-image: url("/media/misc/tucontadorweb2.jpg");
}

/* Menú cabecera */
.header .header-tabs .nav-link {
    color: var(--nav-text-color);
}

/* Hover menú */
.header .header-tabs .nav-link:hover {
    color: var(--nav-hover-color);
}

/* Active menú */
.header-extended .header .header-tabs .nav-link.active {
    background-color: transparent;
    color: var(--nav-hover-color);
}

/* Submenú */
.menu-state-primary .menu-item > .menu-link .menu-title,
.menu-state-primary .menu-item.show > .menu-link .menu-title,
.menu-state-primary .menu-item.here > .menu-link .menu-title {
    color: var(--header-bg-color);
}

/* Submenú activo */
.menu-root-here-bg-desktop > .menu-item.here > .menu-link,
.menu-state-primary .menu-item.here > .menu-link {
    background-color: var(--submenu-bg-color);
}

/* Submenú hover */
.menu-state-primary
    .menu-item:not(.here)
    .menu-link:hover:not(.disabled):not(.active):not(.here) {
    background-color: var(--submenu-bg-color);
}

.menu-state-primary
    .menu-item:not(.here)
    .menu-link:hover:not(.disabled):not(.active):not(.here)
    .menu-title {
    color: var(--header-bg-color);
}

/* Paginación */
.active > .page-link,
.page-link.active {
    background-color: var(--header-bg-color);
}

.page-link:hover {
    background-color: var(--submenu-bg-color);
    color: var(--header-bg-color);
}

/* GUIAS */
/*
Uso del borde parpadeante y tooltip:

1. Para crear un elemento con un borde parpadeante, añade la clase `guide-highlight` al elemento deseado. 
   Esto aplicará un borde animado que parpadea.

2. Si deseas que este elemento muestre un tooltip, agrega un elemento hijo con la clase `guide-tooltip` dentro del elemento con `guide-highlight`. 
   Por defecto, la tooltip aparecerá a la izquierda del elemento parpadeante.

Ejemplo de uso en HTML:

<div id="main-container">
    <div class="guide-highlight">
        <!-- Contenido del elemento resaltado -->
        <p>Este es un elemento con borde parpadeante.</p>

        <!-- Tooltip que aparecerá a la izquierda del elemento -->
        <div class="guide-tooltip">
            Este es un tooltip que aparece a la izquierda.
        </div>
    </div>
</div>
*/

/* Crea el tooltip para las guias */
#main-container .guide-tooltip {
    position: absolute;
    top: 50%;
    right: calc(100% + 25px);
    transform: translateY(-50%);
    background: var(--guide-secondary);
    color: var(--guide-text);
    font-size: 12px;
    font-weight: 600;
    padding: 10px;
    border-radius: 10px;
    min-width: 200px;
    white-space: wrap;
    border: 2px solid var(--guide-primary);
}

/* Tooltip aparece derecha */
#main-container .guide-tooltip-right {
    right: auto;
    left: calc(100% + 25px);
    top: 50%;
    transform: translateY(-50%);
}

/* Tooltip aparece arriba */
#main-container .guide-tooltip-top {
    top: auto;
    left: 50%;
    bottom: calc(100% + 25px);
    transform: translate(-50%, 0);
}

/* Tooltip aparece abajo */
#main-container .guide-tooltip-bottom {
    top: calc(100% + 25px);
    left: 50%;
    transform: translate(-50%, 0);
}

/* Añade borde parpadeante */
#main-container .guide-highlight {
    position: relative;
    border: 8px solid var(--guide-primary);
    animation: blink 1s infinite;
}

/* Borde mas fino */
#main-container .guide-highlight-thin {
    position: relative;
    border: 5px solid var(--guide-primary);
    animation: blink 1s infinite;
}

/* Borde circular */
#main-container .guide-highlight.circle {
    border-radius: 50%;
}

/* Borde circular mas fino */
#main-container .guide-highlight-thin.circle {
    border-radius: 50%;
}

/* si se añde hover hace efecto desaparecer y aparecer*/
#main-container .guide-highlight > .guide-tooltip.hover {
    display: none;
}

#main-container .guide-highlight:hover > .guide-tooltip.hover {
    display: block;
}

/* Efecto parpadeo */
@keyframes blink {
    0%,
    100% {
        border-color: var(--guide-secondary);
    }
    50% {
        border-color: var(--guide-primary);
    }
}

/* Guia Inicial ( Dashboard ) */
#guide-list .form-check-input:disabled {
    opacity: 1 !important;
}

#guide-list .form-check-input:checked {
    background-color: var(--guide-check);
    border: 1px solid transparent;
}