@import "https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css";
@import "../styles/components.css";

:root{
    --color-white: #fff;
    --color-ghost-gray: #f1f0f0;
    --color-light-gray: #a8a8a8;
    --color-ultralight-gray: #d9d9d9;
    --color-dark-gray: #444;
    --color-orange: #f38222;
    --color-ghost-orange: #f8ac6a;
    --color-red: #fc554f;
    --color-ghost-red: #f89b98;
    --color-green: #99d4ad;
    --color-dark-green: #a2c4a4;
    --color-ghost-green: #c9dfce;
    --color-purple: #e36fee;
    --color-light-purple: #e9a0ff;
    --color-ghost-purple: #eec0fc;
    --color-blue: #6eb5f0;
    --color-cian: #78e0ee;
    font-family: 'instrument';
}

/* Estilos para el formulario de inicio de sesión */
@font-face {
    font-family: 'fonticon';
    src: url("fonts/webfont.ttf");
}

@font-face {
    font-family: 'instrument';
    src: url("fonts/InstrumentSans.ttf");
}

body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: #f9fafb;
}

/* MODAL WINDOW */
.modalContainer{
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.modalBox{
    width: 20vw;
    padding: 1vw 2vw;
    box-sizing: border-box;
    background: var(--color-white);
    border-radius: .5vw;
}

.modalBoxTitle{
    font-size: 1vw;
    font-family: 'instrument';
    color: var(--color-dark-gray);
}

.modalBoxButtons{
    display: flex;
    margin-top: 1vw;
    gap: .5vw;
    justify-content: left;
    align-items: center;
}

.modalYesBtn{
    display: inline-flex;
    padding: .5vw 1.5vw;
    font-family: 'instrument';
    font-size: 1vw;
    border-radius: .5vw;
    background-color: var(--color-orange);
    color: var(--color-white);
    cursor: pointer;
}

.modalNoBtn{
    display: inline-flex;
    padding: .5vw 1.5vw;
    font-family: 'instrument';
    font-size: 1vw;
    border-radius: .5vw;
    background-color: var(--color-ghost-gray);
    color: var(--color-dark-gray);
    cursor: pointer;
}

.modalLoading{
    font-family: 'fonticon';
    font-size: 2vw;
    color: var(--color-white);
    animation: loading infinite 1s;
}

@keyframes loading{
    0% {
        transform: rotateX(0deg);
    }

    100% {
        transform: rotateZ(360deg);
    }
}

/* CONTAINERS */
.supercontainer{
    width: 90vw;
    min-height: 100vh;
    max-width: 90vw;
    min-width: 90vw;
    margin: auto;
    padding-top: 7vw;
    box-sizing: border-box;
}

/* TITLES */
.view_title{
    font-family: 'instrument';
    font-size: 2.5vw;
    color: var(--color-dark-gray);
    /*letter-spacing: .1vw;*/
    margin-bottom: 2vw;
}

/* FILTER */
.filter_menu{
    display: flex;
    max-width: 100%;
    min-width: 100%;
    overflow: auto;
    margin-bottom: 1vw;
    flex-wrap: wrap;
    gap: 1vw;

}
.filter_option{
    font-family: 'instrument';
    font-size: 1.2vw;
    color: var(--color-dark-gray);
    border-bottom: .1vw solid transparent;
    cursor: pointer;
}
.filter_option:hover{
    color: var(--color-light-gray);
}
.filter_focus{
    border-bottom: .2vw solid var(--color-orange);
}

.main_action_button{
    font-family: 'instrument';
    font-size: 1vw;
    display: flex;
    align-items: center;
    gap: 0.3vw;
    background: var(--color-orange);
    border-radius: 0.5vw;
    padding: .5vw 1vw;
    box-sizing: border-box;
    color: var(--color-white);
    border: 0.1vw solid var(--color-orange);
    cursor: pointer;
    text-decoration: none;
    text-wrap: nowrap;
}

.main_action_button > span{
    font-family: 'fonticon';
    font-size: 1.2vw;
}

.main_action_button:hover{
    background: var(--color-white);
    color: var(--color-orange);
}



/*RESPONSIVE STYLES*/
@media screen and (max-width: 1200px) {
    
    /* CONTAINERS */
    .supercontainer{
        padding-top: 80px;
    }

    /* TITLES */
    .view_title{
        font-size: 25px;
        margin-bottom: 15px;
    }

    /* FILTER */
    .filter_menu{
        margin-bottom: 20px;
        gap: 10px;
    }
    .filter_option{
        font-size: 15px;
    }

    .main_action_button{
        font-size: 12px;
        padding: 5px 10px;
        gap: 5px;
        border-radius: 1vw;
    }

    .main_action_button > span{
        font-size: 15px;
    }

}


/* ///////// COMPLEMENTOS BULMA ////////////*/

/* =========== CLASES DEl COMPONENTE MENU ============*/

/* Agrega visualmente el hacer hover a la etiqueta del objeto menu */
.menu-label.is-hoverable{
    cursor: pointer;
    transition: filter 0.1s ease-in-out;
}
.menu-label.is-hoverable:hover{
    filter: brightness(0.5);
}

/* Oculta a la lista del menu, esto se hace debido a que su naturalesa es estar siempre visible */
.menu-list.is-inactive{
    display: none;
}


/* =========== CLASES DEL COMPONENTE ICON =========== */

/* Le dice al contenedor que usara una fuente de iconos */
.icon.is-font{
    font-family: 'fonticon';
}



/* =========== CLASES DEL COMPONENTE TABLE =========== */
.table.is-content-nowrapable th, td{
    white-space: nowrap;
}

.table.is-sticky-first-column tr td:first-child{
    position: sticky; 
    left:0;
    z-index: 10;
}

.table.is-sticky-first-row thead{
    position: sticky; 
    top:0;
    z-index: 11;
}






/* ///////// FONDO CON PATRON PARA INICIO ////////////*/
.grid-background {
    position: absolute;
    inset: 0;
    z-index: 0;
  
    background-image:
      linear-gradient(to right, rgba(0, 60, 130, 0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(0, 60, 130, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
  
    mask-image: radial-gradient(
      ellipse 60% 80% at 50% 100%,
      black 60%,
      transparent 100%
    );
    -webkit-mask-image: radial-gradient(
      ellipse 60% 80% at 50% 100%,
      black 60%,
      transparent 100%
    );
  }