/*
 * =====================================================
 * SW42 SOFTWARE PARA TI
 * Custom skin overrides for Roundcube Elastic
 * =====================================================
 *
 * Colores corporativos:
 *
 * Principal:   #082682
 * Secundario:  #143B93
 * Acento:      #285BAC
 */


/* =====================================================
 * ENLACES
 * ===================================================== */

a {
    color: #285BAC;
}

a:hover,
a:focus {
    color: #143B93;
}


/* =====================================================
 * LOGIN
 * ===================================================== */

#rcmloginsubmit {
    background-color: #082682 !important;
    border-color: #082682 !important;
    color: #ffffff !important;
}

#rcmloginsubmit:hover,
#rcmloginsubmit:focus,
#rcmloginsubmit:active {
    background-color: #143B93 !important;
    border-color: #143B93 !important;
}


/* =====================================================
 * BOTONES PRINCIPALES
 * ===================================================== */

.btn-primary {
    background-color: #082682 !important;
    border-color: #082682 !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #143B93 !important;
    border-color: #143B93 !important;
}


/* =====================================================
 * CAMPOS / FOCUS
 * ===================================================== */

.form-control:focus,
.custom-select:focus {
    border-color: #285BAC !important;

    box-shadow:
        0 0 0 .2rem rgba(40, 91, 172, .25) !important;
}


/* =====================================================
 * LISTADOS SELECCIONADOS - MODO CLARO
 * ===================================================== */

html:not(.dark-mode) .listing li.selected,
html:not(.dark-mode) .listing tr.selected td {
    background-color: #e8eefb !important;
}

html:not(.dark-mode) .listing li.selected > a,
html:not(.dark-mode) .listing tr.selected td,
html:not(.dark-mode) .listing tr.selected td a {
    color: #082682 !important;
}


/* =====================================================
 * LISTADOS SELECCIONADOS - MODO OSCURO
 * ===================================================== */

html.dark-mode .listing li.selected,
html.dark-mode .listing tr.selected td {
    background-color: #10275c !important;
}

html.dark-mode .listing li.selected > a,
html.dark-mode .listing tr.selected td,
html.dark-mode .listing tr.selected td a {
    color: #ffffff !important;
}


/* =====================================================
 * MENÚ PRINCIPAL
 * ===================================================== */

#layout-menu a.selected,
#layout-menu .button.selected,
#layout-menu a:hover {
    color: #285BAC !important;
}


/* =====================================================
 * PAGINACIÓN
 * ===================================================== */

.page-item.active .page-link {
    background-color: #082682 !important;
    border-color: #082682 !important;
}


/* =====================================================
 * MODO OSCURO
 * ===================================================== */

html.dark-mode a {
    color: #6f9bea;
}

html.dark-mode a:hover,
html.dark-mode a:focus {
    color: #91b1ef;
}


/* =====================================================
 * LOGIN FOOTER
 * ===================================================== */

#login-footer a {
    color: #5e8de2;
}

#login-footer a:hover {
    color: #8eace8;
}


/*
 * =====================================================
 * SW42 - CONTRASTE MODO OSCURO
 * =====================================================
 *
 * El azul corporativo oscuro funciona para botones,
 * pero sobre el taskmenu oscuro necesitamos una
 * variante más clara para mantener legibilidad.
 */


/* Menú lateral principal: Correo, Contactos, Configuración... */

html.dark-mode #layout-menu a.selected,
html.dark-mode #layout-menu a.button.selected,
html.dark-mode #layout-menu .button.selected {
    color: #78A7FF !important;
}


/* Hover del menú lateral */

html.dark-mode #layout-menu a:hover,
html.dark-mode #layout-menu a.button:hover {
    color: #91B5FF !important;
}


/* Iconos generados con :before */

html.dark-mode #layout-menu a.selected::before,
html.dark-mode #layout-menu a.button.selected::before,
html.dark-mode #layout-menu .button.selected::before {
    color: #78A7FF !important;
}


/* Focus de inputs en modo oscuro */

html.dark-mode .form-control:focus,
html.dark-mode .custom-select:focus,
html.dark-mode input:focus,
html.dark-mode textarea:focus {
    border-color: #4F82DF !important;

    box-shadow:
        0 0 0 .15rem rgba(79, 130, 223, .28) !important;
}


/* Selección de listas en modo oscuro */

html.dark-mode .listing li.selected,
html.dark-mode .listing tr.selected td {
    background-color: #10275C !important;
}


/* Links de la interfaz sobre fondo oscuro */

html.dark-mode a {
    color: #78A7FF;
}

html.dark-mode a:hover,
html.dark-mode a:focus {
    color: #A3C2FF;
}


/*
 * =====================================================
 * SW42 - PERSONALIZACION VISUAL FINAL
 * =====================================================
 */


/* =====================================================
 * CARPETAS
 * ===================================================== */

/* Carpeta seleccionada */

html.dark-mode #mailboxlist li.selected,
html.dark-mode .folderlist li.selected {
    background-color: #10275C !important;
}


/* Texto e icono de carpeta seleccionada */

html.dark-mode #mailboxlist li.selected > a,
html.dark-mode .folderlist li.selected > a {
    color: #ffffff !important;
}


/* Hover de carpetas */

html.dark-mode #mailboxlist li:hover,
html.dark-mode .folderlist li:hover {
    background-color: rgba(40, 91, 172, .18) !important;
}


/* =====================================================
 * MENSAJES
 * ===================================================== */

/* Mensaje seleccionado */

html.dark-mode #messagelist tr.selected td,
html.dark-mode .messagelist tr.selected td,
html.dark-mode .listing li.selected {
    background-color: #10275C !important;
}


/* Mantener texto visible */

html.dark-mode #messagelist tr.selected td,
html.dark-mode #messagelist tr.selected td a,
html.dark-mode .messagelist tr.selected td,
html.dark-mode .listing li.selected a {
    color: #ffffff !important;
}


/* Hover de mensajes */

html.dark-mode #messagelist tr:hover td,
html.dark-mode .messagelist tr:hover td {
    background-color: rgba(40, 91, 172, .10);
}


/* =====================================================
 * CONTADORES DE MENSAJES
 * ===================================================== */

html.dark-mode .badge,
html.dark-mode .unreadcount {
    background-color: #143B93 !important;
    color: #ffffff !important;
}


/* =====================================================
 * BARRAS SUPERIORES
 * ===================================================== */

html.dark-mode #layout-list > .header,
html.dark-mode #layout-content > .header,
html.dark-mode #layout-sidebar > .header {
    border-bottom-color: rgba(120, 167, 255, .20);
}


/* =====================================================
 * BOTONES TOOLBAR
 * ===================================================== */

html.dark-mode .toolbar a.button:hover,
html.dark-mode .toolbar .button:hover {
    color: #91B5FF !important;
}


/* Botón activo */

html.dark-mode .toolbar a.button.active,
html.dark-mode .toolbar .button.active {
    color: #78A7FF !important;
}


/* =====================================================
 * SWITCHES
 * ===================================================== */

.custom-switch .custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #143B93 !important;
    border-color: #285BAC !important;
}


/* Focus de switch */

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow:
        0 0 0 .15rem rgba(79, 130, 223, .25) !important;
}


/* =====================================================
 * SELECT / FORMULARIOS
 * ===================================================== */

html.dark-mode select:focus,
html.dark-mode .custom-select:focus {
    border-color: #4F82DF !important;
}


/* =====================================================
 * SCROLLBAR
 * ===================================================== */

html.dark-mode * {
    scrollbar-color: #285BAC #21292C;
}


/* Chrome / Edge */

html.dark-mode *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html.dark-mode *::-webkit-scrollbar-track {
    background: #21292C;
}

html.dark-mode *::-webkit-scrollbar-thumb {
    background-color: #285BAC;
    border-radius: 10px;
    border: 2px solid #21292C;
}

html.dark-mode *::-webkit-scrollbar-thumb:hover {
    background-color: #4F82DF;
}


/* =====================================================
 * LINKS DE SOPORTE / FOOTER
 * ===================================================== */

html.dark-mode #login-footer a,
html.dark-mode .support-link {
    color: #78A7FF !important;
}

html.dark-mode #login-footer a:hover,
html.dark-mode .support-link:hover {
    color: #A3C2FF !important;
}


/* =====================================================
 * TRANSICIONES SUAVES
 * ===================================================== */

#layout-menu a,
#mailboxlist li,
#messagelist tr td,
.btn,
button {
    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease;
}


/*
 * =====================================================
 * SW42 CALENDAR
 * Eliminar overlay gigante de Quick View
 * =====================================================
 */

body.quickview-active .fc-scroller {
    background-image: none !important;
}