@charset "UTF-8";

:root{
    /* La combinación reina: Inter como principal, seguida de la nativa del sistema */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';

    /* Para darle ese toque de "clase" en títulos, una Serif moderna */
    --font-display: 'Playfair Display', Georgia, serif;
}

body,
html {
    background-color: var(--color-carbon-deep);
    font-family: var(--font-family), serif;
    color: var(--color-azure);
}
.modal,
.modal .modal-footer,
.divMenuPanelLateral,
.divMenuCabecera,
.divPanelDash,
.divFormBlock,
.divHeaderDash,
.frmCssBlock,
.modal > div,
div > div {
    background-color: var(--color-asfalto) !important;
    animation: panelEntrance 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.divTit,
.chips .input,
.lbWhite,
.character-counter,
td,
.file-path-wrapper > input {
    color: #fff !important;
}
.lbAzure {
    color: var(--color-azure);
}
.lbRed {
    color: var(--color-rojo);
}
.lbBlue {
    color: var(--color-azul);
}
.lbPurple {
    color: var(--color-purpura);
}
input:not([type]),
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="time"],
input[type="date"],
input[type="number"],
input[type="tel"],
textarea.materialize-textarea,
.select-wrapper input.select-dropdown {
    color: #fff !important;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
input:focus,
textarea:focus,
.select-wrapper input.select-dropdown:focus {
    border-bottom: 0.1rem solid var(--color-azure) !important;
    box-shadow: 0 0.1rem 0 0 var(--color-azure) !important;
    transform: translateY(-0.1rem);
}
.divMenuPanelLateral > ul > li:hover,
.divMenuPanelLateral > a:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--color-azure) !important;
    border-left: 0.2rem solid var(--color-azure);
    transition: all 0.2s ease;
}
button,
.btn {
    border-radius: 0.5rem;
    border: none;
    font-weight: 700;
    letter-spacing: 0.05rem;
    padding: 0.6rem 1.2rem;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
}
button:hover {
    transform: translateY(-0.15rem);
    filter: brightness(1.1);
}
.btnAzure,
.btnAzureFlat {
    background: var(--color-azure) !important;
    color: var(--color-asfalto) !important;
}
.btnBlue,
.btnBlueFlat {
    background: var(--color-azul) !important;
    color: #fff !important;
}
.btnRed,
.btnRedFlat {
    background: var(--color-rojo) !important;
    color: #fff !important;
}
.btnGreen,
.btnGreenFlat {
    background: var(--color-verde) !important;
    color: var(--color-asfalto) !important;
}
.btnPurple,
.btnPurpleFlat {
    background: var(--color-purpura) !important;
    color: #fff !important;
}
i {
    transition:
            color 0.3s ease,
            transform 0.3s ease;
}
i:hover {
    color: var(--color-azure);
    transform: scale(1.2);
}
.btnLogoutSession,
.btnHelpDash,
.btnSpeakerDash {
    color: var(--color-azure);
    transition: opacity 0.3s ease;
}
.btnLogoutSession:hover {
    color: var(--color-rojo);
}
@keyframes panelEntrance {
    0% {
        opacity: 0;
        transform: translateY(1rem);
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}