@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{
    --bg-void:#0a0d12; --bg-surface:#0a0d12; --bg-card:#161b22; --bg-elevated:#1f2630;
    --border-subtle:rgba(232,236,240,0.06); --border-medium:rgba(232,236,240,0.11);
    --text-primary:#e8ecf0; --text-secondary:rgba(232,236,240,0.65);
    --emerald:#5eb88e; --emerald-light:#7ac9a3; --blue:#6b8caf; --purple:#8a7bb3;
    --amber:#c4923a; --red:#b85450; --cyan:#6ba8a8;
}

html, body{
    background-color:#0a0d12;
    color:#e8ecf0;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(232,236,240,0.10); border-radius:4px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(232,236,240,0.20); }

button{

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: white;
    font-weight: 600;

}

.marco_banner{
    
    border:0.25vh solid #1f2630;
    border-radius:1.2vh;
    background:#0a0d12;
    height:5.25vh;
    margin: 1vh 0.4vh;
    margin-bottom: 0.4vh;
    
}

.estructura_banner{
    
    display:grid;
    grid-template-columns:2% 20.75% 77%;
    
}

.texto_banner{

    font-size: 2.2vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 2vh;

}

.iconos{

    display: flex;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    color: white;
    margin: 0 0.8vh;

}

.iconos_desp{

    display: flex;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    color: white;
    padding: 1vh 0.5vw;

}

.iconos2{

    height: 2.7vh;
    width: 2.7vh;

}

.iconos2_desp{

    height: 2.1vh;
    width: 2.1vh;

}

.iconos_desplegable{

    height: 2vh;
    width: 2vh;

}

.marco_fecha_hora{

    border:0.2vh solid #1f2630;
    border-radius:0.7vh;
    background:#0a0d12;
    height: 3.4vh;
    margin: 0.6vh;
    margin-right: 0;
    padding: 0 0.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.7vh;
    color: #d4dae0;
    
}

.marco_fecha{

    border:0.2vh solid #7d8690;
    border-radius:0.7vh;
    background:#161b22;
    height: 3.5vh;
    margin: 0.6vh;
    margin-right: 0;
    margin-top: -0.45vh;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.fecha{

    border: 0.25vh solid #161b22;
    background-color: #161b22;
    color: white;
    height: 2.5vh;
    width: 14vh;
    font-size: 1.7vh;
    font-weight: 600;
    margin: 0 0.5vh;

}

.desplegables_banner{

    border: none !important;
    border-radius:0.6vh;
    background: #1f2630 !important;
    padding-right: 0.75vw !important;
    margin: -0.5vh 0.25vw;
    display: flex;
    height: 3.5vh;
    justify-content: center;
    align-items: center;
    font-size: 1.7vh !important;
    font-weight: bold !important;
    max-width: 22vw !important;
    white-space: nowrap;
    text-overflow: ellipsis;

}


.desplegado_banner{

    background:#1f2630 !important;
    color: white !important;
    font-weight: bold !important;
    border: 0.1vh solid #1a2029;
    cursor: pointer;
    font-size: 0.85vw !important;


}

.dropdown-menu.desplegado_banner {
    width: 2.5vw !important;
    min-width: 2.5vw !important;
    max-width: 2.5vw !important;
}