/***********************************************************/

/*NO DEBERÍA NECESITARSE MODIFICAR ESTA HOJA DE VARIABLES,
        a no ser que se requiera un cambio de estilos o añadir otra variable
*/


/***********************************************************/

:root {
    /**********************************************************
                    BOTONES
    *************************************/
    /*BOTÓN CLARO*/
    --bg-button-clear: transparent;
    --color-button-clear: var(--color2, rgb(42 39 38));
    --border-button-clear: var(--color2, rgb(42 39 38));
    --bg-button-clear-hover: rgb(42 39 38 / 50%); /*gris oscuro transparente*/
    --color-button-clear-hover: var(--color0, rgb(255 255 255));
    --border-button-clear-hover: rgb(42 39 38 / 50%); /*gris oscuro transparente*/
    /*BOTÓN SÓLIDO*/
    --bg-button-solid: var(--color2, rgb(42 39 38));
    --color-button-solid: var(--color0, rgb(255 255 255));
    --border-button-solid: var(--color2, rgb(42 39 38));
    --bg-button-solid-hover: var(--color5, rgb(248 248 248));
    --color-button-solid-hover: var(--color-font, rgb(42 39 38));
    --border-button-solid-hover: var(--color2, rgb(42 39 38));
    /*BOTÓN SÓLIDO COLOR*/
    --bg-button-color: var(--color-corporativo-principal); /*rojo*/
    --color-button-color: var(--color0, rgb(255 255 255));
    --border-button-color: var(--color-corporativo-principal); /*rojo*/
    --bg-button-color-hover: var(--color5, rgb(248 248 248));
    --color-button-color-hover: var(--color-font, rgb(42 39 38));
    --border-button-color-hover: var(--color2, rgb(42 39 38));
    /*BOTÓN DISPONIBLE*/
    --bg-button-available: var(--bg-available, rgba(4, 180, 95, 0.1));
    --color-button-available: var(--color-available, rgb(4, 180, 95));
    --border-button-available: var(--color-available, rgb(4, 180, 95));
    --bg-button-available-hover: var(--color-available, rgb(4, 180, 95));
    --color-button-available-hover: var(--color0, rgb(255 255 255));
    --border-button-available-hover: var(--color-available, rgb(4, 180, 95));
    /*BOTÓN AYUDA*/
    --bg-button-help: var(--bg-info, rgb(0 106 175 / 10%));
    --color-button-help: var(--color-info, rgb(0 106 175));
    --border-button-help: var(--color-info, rgb(0 106 175));
    --bg-button-help-hover: var(--color-info, rgb(0 106 175));
    --color-button-help-hover: var(--color0, rgb(255 255 255));
    --border-button-help-hover: var(--color-info, rgb(0 106 175));
    /*BOTÓN DANGER*/
    --bg-button-danger: var(--danger-transparent, rgb(217 83 79 / 15%));
    --color-button-danger: var(--color-danger, rgb(217 83 79));
    --border-button-danger: var(--color-danger, rgb(217 83 79));
    --bg-button-danger-hover: var(--color-danger, rgb(217 83 79));
    --color-button-danger-hover: var(--color0, rgb(255 255 255));
    --border-button-danger-hover: var(--color-danger, rgb(217 83 79));
    /*BOTÓN CHANGE*/
    --bg-button-change: var(--bg-change, rgba(126, 19, 139, 0.1));
    --color-button-change: var(--border-change, rgb(136 19 139));
    --border-button-change: var(--border-change, rgb(136 19 139));
    --bg-button-change-hover: var(--color-change, rgb(195 76 210));
    --color-button-change-hover: var(--color0, rgb(255 255 255));
    --border-button-change-hover: var(--border-change, rgb(136 19 139));
    /**********************************************************
                    TABS
    *************************************/
    /*TAB CLARO*/
    --bg-tab-clear: var(--color3, rgb(142 142 142));
    --color-tab-clear: var(--color0, rgb(255 255 255));
    --border-tab-clear: var(--color3, rgb(142 142 142));
    --bg-tab-clear-active: var(--color0, rgb(255 255 255));
    --color-tab-clear-active: var(--color3, rgb(142 142 142));
    --border-tab-clear-active: var(--color3, rgb(142 142 142));
    /**********************************************************
                    NUEVAS VARIABLES
    *************************************/
    /*COLORES*/
    --color-primary: #196278;
    --color-secondary: #FFD02F;
    --color-success: #1B8625;
    --color-disabled: #848484;
    --color-waiting: #FFD02F;
    --color-danger-delete: #B45757;
    --color-alter: #861B7B;
    --color-gradient1: #0b3542;
    --color-gradient2: #ff9c08;
    --color-text: #333;
    /*colores fondo*/
    --color-bg: #e7e7e7;
    --color-bg2: #E2ECEF;
    --color-bg3: #C8D9DF;
    --color-bg4: #E7FFD9;
    --color-bg5: #F3F3F3;
    --color-bg6: #FAFFD9;
    --color-bg7: #FFF5F5;
    --color-bg8: #F5D9FF;
    /*GRADIENTES*/
    --gradient-1: linear-gradient( to bottom right, var(--color-primary)46%, var(--color-gradient1));
    --gradient-2: linear-gradient(to bottom right, var(--color-secondary)46%, var(--color-gradient2));
    /*FUENTES*/
    --size-small: 12px;
    --size-medium: 14px;
    --size-medium-big: 16px;
    --size-big: 20px;
    --bold: 600;
    /*BOTONES*/
    --btn-padding-1: 6px 20px;
    --btn-radius-1: 70px
}