/*IMPORTACION DE FUENTE PRINCIPAL */
@font-face {
    font-family: "Nunito Sans";
    src:
        url("../FONT/NunitoSans-VariableFont.ttf") format("truetype-variations"),
        url("../FONT/NunitoSans-VariableFont.ttf") format("truetype");
    font-weight: 200 1000;
    font-stretch: 75% 100%;
    font-style: normal;
    font-display: swap;
}

@keyframes vibrar {
    0% {
        transform: translateX(0);
    }

    5% {
        transform: translateX(-16px);
    }

    10% {
        transform: translateX(16px);
    }

    15% {
        transform: translateX(-13px);
    }

    20% {
        transform: translateX(13px);
    }

    25% {
        transform: translateX(-10px);
    }

    30% {
        transform: translateX(10px);
    }

    35% {
        transform: translateX(-7px);
    }

    40% {
        transform: translateX(7px);
    }

    45% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(5px);
    }

    55% {
        transform: translateX(-3px);
    }

    60% {
        transform: translateX(3px);
    }

    65% {
        transform: translateX(-4px);
    }

    70% {
        transform: translateX(4px);
    }

    75% {
        transform: translateX(-2px);
    }

    80% {
        transform: translateX(2px);
    }

    85% {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(0);
    }
}

/* 
@keyframes vibrar-suave {
    0% {
        transform: translateX(0);
    }

    10% {
        transform: translateX(-10px);
    }

    20% {
        transform: translateX(10px);
    }

    35% {
        transform: translateX(-8px);
    }

    50% {
        transform: translateX(8px);
    }

    65% {
        transform: translateX(-5px);
    }

    80% {
        transform: translateX(5px);
    }

    90% {
        transform: translateX(-2px);
    }

    100% {
        transform: translateX(0);
    }
} */

@keyframes mover-suave {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(10px);
    }

    100% {
        transform: translateX(0);
    }
}


@keyframes fade-in {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-sin-movimiento {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-zoom {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes bgZoomOut {
    0% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}


:root {
    /* rgb(0, 188, 112) */
    --color-primario: hsl(156, 100%, 37%);
    --color-secundario: hsl(228, 0%, 18%);
    --color-terciario: hsl(192, 0%, 86%);
    --color-aviso: #eab308;

    --gris-oscuro: hsl(0, 0%, 30%);
    --gris-header: hsl(0, 0%, 50%);

    /*Ref a font principal */
    --font-ui: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --negrita: 700;

    /* Animación ease-in-out */
    --suave: 0.17s ease-in-out;
    --vibrar: vibrar 0.8s ease-out;
    --vibrar-suave: mover-suave 0.6s ease-in-out;
    --fade: fade-in 0.4s ease-out forwards;
    --fade-zoom: fade-zoom 0.25s ease;
    --fade-sin-movimiento: fade-sin-movimiento 0.40s ease;
    --bgZoomOut: bgZoomOut 7s ease-out forwards;

    --gap-div-dispositivo: 20px;
}

/* MODO OSCURO */
body.light {
    --white: hsl(0, 0%, 100%);
    --black: hsl(0, 0%, 0%);
    --gris-claro: hsl(0, 0%, 95%);
    --gris-neutro: hsl(0, 0%, 50%);
    /*fondo de tarjetas ST*/
    --gris-tarjeta-st: hsl(0, 0%, 88%);
    /*hover de inputs, textareas, etc*/
    --gris-80: hsl(0, 0%, 80%);
    /* --overlay: hsla(0, 0%, 0%, 0.35); */
    --overlay: hsla(0, 0%, 100%, 0.7);
    --gris-toolbar: #F4F4F4;
    --gris-top-tabs: var(--color-terciario);
    --gris-top-tabs-text: #232323;
    --device-card-fondo: hsl(0, 0%, 100%);
    --input-unselected: hsl(0, 0%, 25%);
    --bg-btn-cancelar: #BCBCBC;
    --drag-and-drop-topologia: hsla(0, 0%, 0%, 0.35);
    --drag-and-drop-project: hsl(0, 0%, 100%, 0.7);
    --hover-iconos: hsla(156, 100%, 37%, 0.15);
    --titulo-proyecto: hsl(0, 0%, 30%);
    --tooltip: hsl(0, 0%, 80%);
    /* ~65% negro en modo claro */
}

body.dark {
    /* hsl(0, 0%, 0%); negro por defecto  DE MOMENTO COMENTADO */
    --white: #1F1F1F;
    --black: hsl(0, 0%, 100%);
    --gris-claro: hsl(0, 0%, 10%);
    --gris-neutro: hsl(0, 0%, 50%);
    /*fondo de tarjetas ST*/
    --gris-tarjeta-st: hsl(0, 0%, 20%);
    /*hover de inputs, textareas, etc*/
    --gris-80: hsl(0, 0%, 25%);
    --overlay: hsla(0, 0%, 0%, 0.5);
    --gris-toolbar: #262626;
    --gris-top-tabs: #5B5D66;
    --gris-top-tabs-text: hsla(0, 0%, 100%, 0.65);
    --device-card-fondo: #262626;
    --input-unselected: hsl(0, 0%, 83%);
    --bg-btn-cancelar: #636363;
    --drag-and-drop-topologia: hsla(0, 0%, 100%, 0.35);
    --drag-and-drop-project: hsla(0, 0%, 100%, 0.04);
    --hover-iconos: hsla(156, 100%, 37%, 0.35);
    --titulo-proyecto: hsl(0, 0%, 65%);
    --tooltip: #333232;
    /* ~75% blanco en modo oscuro */
}

/* ESTILO PERSONALIZADO DE BARRAS DE SCROLL */


* {
    scrollbar-width: auto;
    scrollbar-color: var(--gris-neutro) var(--gris-claro);
}