@font-face {
    font-family: 'Inter';
    src: url('paquetesDescargados/Inter/static/Inter_18pt-Light.ttf') format('truetype');
}


@font-face {
    font-family: 'Inter_Logo';
    src: url('paquetesDescargados/Inter_Logo/static/Inter_18pt-Light.ttf') format('truetype');
}


* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Inter';
}



a {
    text-decoration: none;
    color: #000;
}


/* Todo des-seleccionable */
html, body, * {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}


/* Pero estos sí se pueden seleccionar */
input,
textarea {
  user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
}



/* velocidad de transicion dark/light*/


:root {
  --transition:        0.3s;


  --color-azul-oscuro: #285260;
  --color-azul-medio:  #548C92;
  --color-azul-claro:  #B4D7D8;
  --color-crema:       #E0D7CF;
  --color-arena:       #AB9072;


  --color-positivo:    #188038;
  --color-negativo:    #d93025;
  --color-neutro:      #666666;


  --color-texto-gen:   #1a1a1a;
  --color-texto-prin:  #2C3E50;
  --color-texto-sec:   #BDC3C7;
  --color-fondo:       #ffffff;
}


.positivo {
    color: #188038;
}


.negativo {
    color: #d93025;
}


.neutro {
    color: #666666;
}



/* Seccion de prerecarga------------ */
.loader {
    position: fixed;
    top: 0;
    bottom: 0;
    background-color: white;  /* Cambiar para PNG!!!!!!!!!!!!-------------------------------- */
    height: 100%;
    width: 100%;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
}


 /* Cambiar demensiones de logo en loader !!!!!!!!!-------------------------------- */
.loader img{
    width: 50%;
}


@media (max-width: 700px)  {
    .loader img{
        width: 100%;
    }
}


.disapear {
    animation: vanish 1.5s forwards;
}


@keyframes vanish {
    100%{
        opacity: 0;
        visibility: hidden;
    }
}


/* Contenedor del home --------------------------------------------------------------------------------------------------------------- */


body {
    overflow: hidden
}


.homeContainer {
    height: 100vh;
    display: grid;
    align-items: center;
    justify-items: center;
    grid-template-columns: 100%;
    grid-template-rows: 5% 9% 86%;
    grid-template-areas:
        'arriba'
        'indices'
        'main';
    background-color: rgb(255, 252, 255);
    transition: var(--transition) ease all;
    overflow: hidden;
}


/* Secion de arriba ----------------------------------------------------------------------------- */


.homeContainer .arriba {
    grid-area: arriba;
    margin-top: 30px;
    width: 98%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.homeContainer .contenedorLogo {
    height: 80px;
}


.homeContainer .logo::selection{ 
    background-color: rgb(200, 200, 200); 
}


.homeContainer .arriba .logo {
    height: 100%;
}


.homeContainer .arriba .contenedorBotonLogin {
    display: flex;
    align-items: center;
}


.homeContainer .arriba .contenedorLogin {
    font-size: 40px;
    display: flex;
    align-items: center;
    color: #548C92;
}


.perfilUsuario {
    display: flex;
    align-items: center;
    gap: 8px; /* menos espacio entre ícono y nombre */
    padding: 4px 8px; /* más compacto */
    border-radius: 8px;
    background-color: #f8f9fa;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    margin-right: 50px;
    margin-top: 30px;
}


.perfilUsuario:hover {
    background-color: #e6f0f2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}


.perfilCirculo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-azul-medio, #548C92);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(84,140,146,0.2);
    transition: transform 0.2s ease;
}


.perfilUsuario:hover .perfilCirculo {
    transform: scale(1.1);
}


.nombreUsuario {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
}



/* Secion de contenido ----------------------------------------------------------------------------- */


.homeContainer .contenido {
    width: 70%;
    height: 100%;
    max-width: 1300px;
    max-height: 1000px;
    display: flex;
    flex-flow: column;
    align-items: center;
    grid-area: main;
}


/* === Alpha / Finance: layout robusto y sin traslapes === */
/* === Alpha centrado + Finance al lado (sin desplazar el centro) === */
.Titulado {
  width: 100%;
  text-align: center; /* centra el bloque "brand" */
}


.Titulado .brand {
  display: inline-block;   /* ancho se ajusta al de "Alpha" */
  position: relative;      /* referencia para posicionar "Finance" */
  line-height: 1;
  --gap: clamp(8px, 1.5vw, 16px); /* separación entre Alpha y Finance */
}


.Titulado .brand .titulo {
  margin: 0;
  font-family: 'Inter_Logo';
  font-size: clamp(64px, 12vw, 150px);
  color: #548C92;
}


/* Posiciona "Finance" pegado a la derecha de "Alpha" y alineado abajo */
.Titulado .brand .subTitulo {
  position: absolute !important; /* neutraliza estilos previos */
  top: auto !important;
  margin: 0 !important;
  width: auto !important;


  left: calc(100% + var(--gap)); /* justo al lado de "Alpha" */
  bottom: 0;                     /* alineado a la base de "Alpha" */
  font-size: clamp(16px, 2.5vw, 25px);
  color: #548C92;
  white-space: nowrap;           /* evita salto raro en desktop */
}


/* En pantallas angostas, que "Finance" baje centrado */
@media (max-width: 600px) {
  .Titulado .brand .subTitulo {
    position: static !important;
    display: block;
    text-align: center;
    margin-top: 8px !important;
    text-align: right;
  }
}



.homeContainer .contenido .baraBusqueda {
    position: relative;
    width: 700px;
    height: 45px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    background-color: rgb(255, 255, 255);
    border-radius: 20px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(100, 100, 100, 0.1);
    margin-top: 30px;
}


.homeContainer .contenido .baraBusquedaactivada {
    border-radius: 20px 20px 0px 0px;
    box-shadow: none;
}


/* No fuerces la altura desde .lupa */
.homeContainer .contenido .baraBusqueda .lupa {
  height: auto;
}


/* Tamaño y padding del icono de búsqueda */
.homeContainer .contenido .baraBusqueda .logo-busqueda {
  height: 80%;
  width: auto;
  padding: 0 10px;
  flex-shrink: 0;
  object-fit: contain;
}


@media (max-width: 1000px) {
  .homeContainer .contenido .baraBusqueda .logo-busqueda {
    height: 80%;
    padding: 0 8px;
  }


    /* 🔒 Que el body y html NO puedan hacer scroll en móvil */
  html, body {
    height: 100%;
    overflow: hidden;
  }


  /* 🔒 El contenedor principal ocupa exactamente el alto de la pantalla */
  .homeContainer {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
  }


  /* 🧱 El main se vuelve un flex column que reparte espacio */
  .homeContainer .contenido {
    height: 100%;
    max-height: none;      /* quitamos límite de 1000px */
    display: flex;
    flex-direction: column;
    min-height: 0;         /* CLAVE para permitir overflow interno */
  }


  /* El título y la barra de búsqueda ocupan su sitio pero no crecen */
  .homeContainer .contenido .Titulado,
  .homeContainer .contenido .baraBusqueda {
    flex-shrink: 0;
  }


  /* 📈 Aquí es donde se permite scroll interno */
  .homeContainer .contenido .widgetsAcciones {
    flex: 1;                      /* ocupa todo el espacio restante */
    min-height: 0;                /* permite que el scroll funcione bien */
    overflow-y: auto;             /* solo vertical */
    -webkit-overflow-scrolling: touch; /* scroll suave en iOS */
    padding-bottom: 100px !important; /* ✅ FIX: Espacio para el último widget */
  }

  /* Método alternativo: margen al último widget */
  .homeContainer .contenido .widgetsAcciones .widget:last-child {
    margin-bottom: 80px !important;
  }

}



.homeContainer .contenido .baraBusqueda .input {
    outline: none;
    border: none;
    height: 80%;
    width: 60%;
    font-size: 25px;
    font-weight: normal;
    margin-left: 2px;
    background-color: inherit;
    text-transform: uppercase
}


.homeContainer .contenido .baraBusqueda .input::placeholder {
    text-transform: none;
    font-size: 25px;
    font-weight: normal;
}


/* Caja conteniendo opciones autocomplete */
.autocomplete-items {
  position: absolute;
  z-index: 99;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: -1px; /* quita la línea entre barra y lista */
  border: 1px solid rgba(100, 100, 100, 0.1);
  border-top: none;
  border-radius: 0 0 20px 20px; /* solo esquinas inferiores */
  overflow: hidden;
}


/* Cada elemento individual de opciones */
.autocomplete-items div,
.posibleResult {
  padding: 10px 7%;
  cursor: pointer;
  background-color: #ffffff;
}


/* Último elemento con sombra como Google */
.autocomplete-items div:last-child,
.posibleResult:last-child {
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
}


/* Opción seleccionada con flechas + hover */
.autocomplete-items .autocomplete-active,
.posibleResult.autocomplete-active,
.autocomplete-items div:hover {
  background-color: #e9e9e9;
}


/* Cuando hay lista abierta, la barra solo redondea arriba */
.homeContainer .contenido .baraBusquedaactivada {
  border-radius: 20px 20px 0 0;
  box-shadow: none;
}







.homeContainer .contenido .widgetsAcciones {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-items: center;
    width: 980px;
    margin-top: 50px;
}


.homeContainer .contenido .widgetsAcciones .widget {
    height: 210px;
    width: 220px;
    border-radius: 30px;
    padding: 0px 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    display: grid;
    grid-template-rows: 50% 50%;
    grid-template-columns: 50% 50%;
    grid-template-areas:
        'identidad    logo'
        'precios      puntuacion';
    transition: 1s;
    background-color: rgb(255, 255, 255);
    margin: 10px;
    transition: var(--transition) ease all;
}


/* Animacion de cajas en hover general */


.homeContainer .contenido .widgetsAcciones .widget:hover {
    transform: scale(1.15);
    margin: 0px 20px;
}


.homeContainer .widget .identidad {
    grid-area: identidad;
    display: flex;
    flex-flow: column;
    justify-content: center;
}


.homeContainer .widget .identidad .ticker {
    font-weight: 1000;
    color: #171010;
    font-size: 25px;
    transition: var(--transition) ease all;
}


.homeContainer .widget .identidad .nombre {
    color: #423f3e;
    font-size: 10px;
    transition: var(--transition) ease all;
}


.homeContainer .widget .precios {
    grid-area: precios;
    display: flex;
    flex-flow: column;
    justify-content: center;
}


.homeContainer .widget .precios .precio {
    color: #232323;
    font-size: 20px;
    transition: var(--transition) ease all;
}


.homeContainer .widget .precios .cambio {
    display: flex;
    flex-flow: column;
    font-size: 17px;
    transition: var(--transition) ease all;
}


.homeContainer .widget .precios .cambio .cambioNominal {
    margin-left: 0px;
}



.homeContainer .widget .precios .cambio .cambioPorcentual {
    margin-left: 0px;
}



.homeContainer .widget .contenedorImagen {
    grid-area: logo;
    display: flex;
    justify-content: center;
    align-items: center;
}


.homeContainer .widget .contenedorImagen .imagen {
    width: 80%;
}


.homeContainer .widget .contenedorIndicador {
    grid-area: puntuacion;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}


.homeContainer .widget .contenedorIndicador .contenedorGraficaWidget {
    width: 100%;
}


.homeContainer .widget .contenedorIndicador .puntuacion {
    position: absolute;
    font-size: 15px !important;
    font-weight: 600;
    color: rgb(30, 30, 30);
    transition: var(--transition) ease all;
}




/* Modificacion para compus abjao de una altura de 960 */


@media only screen and (min-height: 800px) and (max-height: 960px) {
    .homeContainer {
        height: 95vh;
        grid-template-rows: 5% 10% 85%;
    }


    .homeContainer .switch {
        margin-right: 11px;
        width: 53px;
    }


    .homeContainer .switch span {
        width: 22px;
        height: 22px;
        line-height: 22px;
    }


    .homeContainer .switch::after {
        width: 26px;
        height: 26px;
        top: -1.5px;
        left: -1px;
    }



    .homeContainer .indices {
        align-items: flex-start;
    }


    .homeContainer .contenido .Titulado .titulo {
        font-size: 126px;
    }


    .homeContainer .contenido .Titulado .subTitulo {
        font-size: 18px;
    }


    .homeContainer .contenido .baraBusqueda {
        width: 560px;
        height: 36px;
    }


    .homeContainer .contenido .baraBusqueda .input {
        font-size: 20px;
    }


    .homeContainer .contenido .baraBusqueda .input::placeholder {
        font-size: 20px;
    }


    .homeContainer .contenido .widgetsAcciones {
        width: 784px;
        margin-top: 24px;
    }


    .homeContainer .contenido .widgetsAcciones .widget {
        height: 168px;
        width: 176px;
        border-radius: 30px;
        padding: 0px 16px;
        margin: 8px;
    }


    /* Animacion de cajas en hover general */


    .homeContainer .contenido .widgetsAcciones .widget:hover {
        transform: scale(1.1);
        margin: 10px;
    }


    .homeContainer .widget .identidad .ticker {
        font-size: 20px;
    }


    .homeContainer .widget .identidad .nombre {
        font-size: 8px;
    }


    .homeContainer .widget .precios .precio {
        font-size: 16px;
    }


    .homeContainer .widget .precios .cambio {
        font-size: 14px;
    }


    .homeContainer .widget .precios .cambio .cambioPorcentual {
        margin-left: 2.4px;
    }


    .homeContainer .widget .contenedorImagen .imagen {
        width: 80%;
    }


    .homeContainer .widget .contenedorIndicador .contenedorGraficaWidget {
        width: 100%;
    }


    .homeContainer .widget .contenedorIndicador .puntuacion {
        font-size: 16px;
    }
}


/* Modificacion para compus abjao de una altura de 800 */


@media only screen and (max-height: 800px) {
    .homeContainer {
        grid-template-rows: 5% 11% 86%;
    }


    .homeContainer .switch {
        margin-right: 10px;
        width: 48px;
    }


    .homeContainer .switch span {
        width: 20px;
        height: 20px;
        line-height: 20px;
    }


    .homeContainer .switch::after {
        width: 22px;
        height: 22px;
        top: -1px;
        left: -1px;
    }



    .homeContainer .indices {
        align-items: flex-start;
    }


    .homeContainer .contenido .Titulado .titulo {
        font-size: 100px;
    }


    .homeContainer .contenido .Titulado .subTitulo {
        font-size: 14px;
    }


    .homeContainer .contenido .baraBusqueda {
        width: 448px;
        height: 29px;
    }


    .homeContainer .contenido .baraBusqueda .input {
        font-size: 16px;
    }


    .homeContainer .contenido .baraBusqueda .input::placeholder {
        font-size: 16px;
    }


    .homeContainer .contenido .widgetsAcciones {
        width: 627px;
        margin-top: 19px;
    }


    .homeContainer .contenido .widgetsAcciones .widget {
        height: 134px;
        width: 141px;
        padding: 0px 13px;
        margin: 6px;
        border-radius: 24px;
    }


    /* Animacion de cajas en hover general */


    .homeContainer .contenido .widgetsAcciones .widget:hover {
        transform: scale(1.09);
        margin: 10px;
    }


    .homeContainer .widget .identidad .ticker {
        font-size: 16px;
    }


    .homeContainer .widget .identidad .nombre {
        font-size: 6px;
    }


    .homeContainer .widget .precios .precio {
        font-size: 13px;
    }


    .homeContainer .widget .precios .cambio {
        font-size: 11px;
    }


    .homeContainer .widget .precios .cambio .cambioPorcentual {
        margin-left: 1.92px;
    }


    .homeContainer .widget .contenedorImagen .imagen {
        width: 80%;
    }


    .homeContainer .widget .contenedorIndicador .contenedorGraficaWidget {
        width: 90%;
    }


    .homeContainer .widget .contenedorIndicador .puntuacion {
        font-size: 13px;
    }
}


/* Diseño para el telefono/ Tablet----------------------------------------------------------------------------- */


@media only screen and (max-width: 1000px) {
    .homeContainer {
        grid-template-rows: 5% 12% 83%;
    }


    .homeContainer .contenido {
        width: 100%;
    }


    .homeContainer .switch {
        border-radius: 1000px;
        margin-right: 10px;
        width: 48px;
    }


    .homeContainer .switch span {
        width: 20px;
        height: 20px;
        line-height: 20px;
    }


    .homeContainer .switch::after {
        width: 22px;
        height: 22px;
        top: -1px;
        left: -1px;
        border-radius: 100px;
    }



    /* Modificar log in boton para altura inferior a 750px */


    @media only screen and (max-height: 750px) {
        .homeContainer .switch {
            margin-right: 8px;
            width: 43px;
        }


        .homeContainer .switch span {
            width: 17px;
            height: 17px;
            line-height: 17px;
        }


        .homeContainer .switch::after {
            width: 18px;
            height: 18px;
            top: -0.85px;
            left: -0.85px;
        }


    }


    .homeContainer .indices {
        align-items: flex-start;
    }


    .indices::after,
    .indices::before {
        width: 100px;
    }


    .homeContainer .contenido .Titulado .titulo {
        font-size: 75px;
    }


    .homeContainer .contenido .Titulado .subTitulo {
        font-size: 12.5px;
    }


    .homeContainer .contenido .baraBusqueda {
        width: 75%;
        max-width: 500px;
        height: 35px;
        border-radius: 20px;
    }


    .homeContainer .contenido .baraBusquedaactivada {
        border-radius: 20px 20px 0px 0px;
    }


    .homeContainer .contenido .baraBusqueda .input {
        font-size: 17px;
        font-weight: 900;
        width: 80%;
    }


    .homeContainer .contenido .baraBusqueda .input::placeholder {
        font-size: 17px;
    }


    .homeContainer .contenido .widgetsAcciones {
        width: 100%;
        max-width: 600px;
        margin-top: 20px;
        overflow: auto;
    }


    ::-webkit-scrollbar {
        width: 0px;
    }


    .homeContainer .contenido .widgetsAcciones .widget {
        height: 150px;
        width: 90%;
        border-radius: 30px;
        padding: 10px 20px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
        /* background-color: rgb(255, 255, 255); */
        display: grid;
        grid-template-rows: 30% 70%;
        grid-template-columns: 50% 50%;
        grid-template-areas:
            'identidad   logo'
            'puntuacion      puntuacion';
        transition: 1s;
        background-color: rgb(255, 255, 255);
        margin: 10px 5px;
    }


    /* Animacion de cajas en hover general */


    .homeContainer .contenido .widgetsAcciones .widget:hover {
        transform: scale(1.07);
        margin: 5px 0px;
    }


    .homeContainer .widget .identidad {
        grid-area: identidad;
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        align-items: flex-end;
    }


    .homeContainer .widget .identidad .ticker {
        font-weight: 1000;
        color: #171010;
        font-size: 22px;
        line-height: 1;
    }


    .homeContainer .widget .identidad .nombre {
        color: #423f3e;
        font-size: 10px;
        margin-left: 5px;
        vertical-align: text-bottom;
        line-height: 1.5;
    }


    .homeContainer .widget .precios {
        grid-area: puntuacion;
        align-self: flex-end;
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        align-content: center;
        width: 35%;
        height: 50%;
    }


    .homeContainer .widget .precios .precio {
        color: #232323;
        font-size: 18px;
        margin-right: 5px;
        line-height: 1;
    }


    .homeContainer .widget .precios .cambio {
        display: flex;
        flex-flow: row wrap;
        font-size: 14px;
        color: rgb(73, 199, 77);
        line-height: 1.3;
    }


    .homeContainer .widget .precios .cambio .cambioPorcentual {
        margin-left: 3px;
    }


    .homeContainer .widget .contenedorImagen {
        grid-area: logo;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
    }


    .homeContainer .widget .contenedorImagen .imagen {
        height: 90%;
        object-fit: contain;
        width: auto;
    }


    .homeContainer .widget .contenedorIndicador {
        grid-area: puntuacion;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: center;
        align-items: flex-end;
    }


    /* Centrar "puntuacion" dentro del círculo cuando los widgets se apilan */
    .homeContainer .widget .contenedorIndicador {
    display: grid !important;
    place-items: center;          /* centra el contenido en ambas direcciones */
    }


    .homeContainer .widget .contenedorIndicador .contenedorGraficaWidget,
    .homeContainer .widget .contenedorIndicador .puntuacion {
    grid-area: 1 / 1;             /* ambos elementos se superponen en la misma celda */
    }


    .homeContainer .widget .contenedorIndicador .contenedorGraficaWidget {
    width: 85px;                   /* conserva tu tamaño en móvil */
    left: 0 !important;            /* quita el corrimiento lateral */
    }


    .homeContainer .widget .contenedorIndicador .puntuacion {
    position: static !important;   /* elimina offsets relativos */
    right: auto !important;
    bottom: auto !important;
    margin: 0;
    display: grid;
    place-items: center;           /* centrado perfecto del número */
    font-size: 20px;
    }


}


/* =============================================
   PRESENCIA (ONLINE/OFFLINE)
   ============================================= */
.user-status-container {
  display: flex;
  align-items: center;
  margin-left: auto;   
  margin-right: 50px;   /* separa un poco del bloque de botones */
}
.user-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 0.9em;
  font-weight: 600;
  background: #eee;
  color: #555;
  border: 1px solid #ddd;
  transition: background 0.3s, color 0.3s;
}
.user-status.online {
  background: #d2fbe4;
  color: #05984c;
  border-color: #41e17b;
}
.user-status.offline {
  background: #fbe2e2;
  color: #ce1d1d;
  border-color: #e15a5a;
}


.contenedorBotonLogin {
    display: flex;
    align-items: center;
    gap: 10px;
}


.botonesAuth {
    display: flex;
    align-items: center;
    gap: 10px;
}


.botonLogin, .botonSignin {
    padding: 8px 16px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 2px solid var(--color-azul-medio);
}


.botonLogin {
    background-color: var(--color-azul-medio);
    color: white;
}


.botonLogin:hover {
    background-color: var(--color-azul-oscuro);
    border-color: var(--color-azul-oscuro);
    color: white;
}


.botonSignin {
    background-color: transparent;
    color: var(--color-azul-medio);
}


.botonSignin:hover {
    background-color: var(--color-azul-medio);
    color: white;
}


.perfilUsuario {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-left: 5px;
}


.nombreUsuario {
    font-size: 12px;
    color: var(--color-azul-medio);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    text-align: center;
}


.contenedorLogin i {
    font-size: 28px;
    color: var(--color-azul-medio);
    transition: color 0.3s ease;
}


.contenedorLogin:hover i {
    color: var(--color-azul-oscuro);
}


@media (max-width: 600px) {
    .contenedorBotonLogin {
        flex-direction: column;
        align-items: flex-end;
        gap: 5px;
    }
    .botonesAuth {
        gap: 5px;
    }
    .botonLogin, .botonSignin {
        padding: 6px 10px;
        font-size: 12px;
    }
    .perfilUsuario {
        gap: 2px;
    }
    .nombreUsuario {
        font-size: 10px;
    }
    .contenedorLogin i {
        font-size: 22px;
    }
}


/* Bloque oculto por defecto; lo muestra auth-ui.js si hay sesión */
.perfilUsuario {
  display: none;           /* <- importante para evitar FOUC */
  flex-direction: column;  /* si en fila, usa 'row' */
  align-items: center;
  gap: 5px;
  margin-left: 5px;
}
.nombreUsuario {
  font-size: 12px;
  color: var(--color-azul-medio);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  text-align: center;
}


/* Icono del usuario */
.contenedorLogin i {
  font-size: 28px;
  color: var(--color-azul-medio);
  transition: color 0.3s ease;
}
.contenedorLogin:hover i { color: var(--color-azul-oscuro); }


/* Responsive */
@media (max-width: 600px) {
  .contenedorBotonLogin { flex-direction: column; align-items: flex-end; gap: 5px; }
  .botonesAuth { gap: 5px; }
  .botonLogin, .botonSignin { padding: 6px 10px; font-size: 12px; }
  .perfilUsuario { gap: 2px; }
  .nombreUsuario { font-size: 10px; }
  .contenedorLogin i { font-size: 22px; }
}


/* No fuerces la altura desde .lupa */
.homeContainer .contenido .baraBusqueda .lupa { height: auto; }


/* Tamaño y padding del icono de búsqueda */
.homeContainer .contenido .baraBusqueda .logo-busqueda {
  height: 80%;
  width: auto;
  padding: 0 10px;
  flex-shrink: 0;
  object-fit: contain;
}


/* === Bloqueo por presencia: widgets de la home === */
.grafica-lock-wrapper { position: relative; }


.avg-lock-img {
  position: absolute;
  inset: 0;
  z-index: 20;                
  display: none;               
  pointer-events: none;       
  border-radius: 50px;         
  transition: transform .2s ease, box-shadow .2s ease;
}
.avg-lock-img:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.avg-lock-img > a { position: absolute; inset: 0; display: block; }
.avg-lock-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; border: 0; display: block;
}


body[data-online="0"] .avg-lock-img {
  display: flex !important;
  pointer-events: auto !important;
}


body[data-online="1"] .avg-lock-img {
  display: none !important;
  pointer-events: none !important;
}