/* === ESTILOS GENERALES === */


body {
    font-family: Arial, sans-serif;
    background-color: #f3f3f3;
    color: #333;
    margin: 0;
    padding: 0;
  }
  
  /* Centrar el contenido principal */
  main {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 120px;
  }
  
  /* Título central */
  main h2 {
    font-size: 28px;
    margin-bottom: 20px;
  }
  
  /* Formulario: input + botón */
  form {
    display: flex;
    gap: 10px;
  }
  
  input[type="text"] {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 10px;
    width: 300px;
  }
  
  button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #e6d5f7;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease, opacity 0.3s ease;
  }
  
  /* Estilo cuando el botón está desactivado */
  button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  
  /* Tendencias */
  .tendencias,
  .personas-buscando {
    margin-top: 50px;
    text-align: center;
  }
  

  

  .tendencias ul,
  .personas-buscando ul {
    list-style: none;
    padding: 0;
  }
  
  .tendencias li,
  .personas-buscando li {
    
    margin: 6px 0;   /* ajusta el margen vertical */
    
  }
  
  .tendencias li a,
  .personas-buscando li a {
    display: block;
    background-color: #e0e0e0;
    padding: 8px 14px;
    border-radius: 20px;
    color: inherit; /* Mantiene el color de texto del contenedor */
    text-decoration: none; /* Quita el subrayado */
    transition: all 0.2s ease-in-out;
    /* Evitar desbordes de texto */
    max-width: 190px;        /* <-- ajustá el ancho máximo del "chip" */
    overflow: hidden;
    
    text-overflow: ellipsis; /* <-- convierte en "..." cuando se pasa */
  }

  .tendencias li a:hover,
  .personas-buscando li a:hover {
    background-color: #d0d0d0;
    transform: scale(1.05);
  }
  /* Header */
  header {
    position: relative; /* o fixed/sticky si es necesario */
    z-index: 10;        /* mayor que los elementos que podrían superponerse */
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    height: 85px; /* altura fija */
    padding: 0 40px; /* solo padding lateral */
    position: fixed;
    top: 0;
    width: 100%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
  
  
  .logo {
    font-size: 24px;
    font-weight: bold;
    margin-left: -20px;
    display: block;
  }

  .header-menu {
    display: flex;
    gap: 25px; /* espacio entre botones */
    margin-right: 80px
  }

  .menu-btn {
    text-decoration: none;  /* sin subrayado */
    color: #333;            /* color discreto, se puede cambiar */
    font-weight: 500;       /* un poco más visible, pero no llamativo */
    padding: 0;             /* sin padding extra */
    line-height: 1.2;
    transition: color 0.2s; /* suaviza efecto hover */
    
  }

  .menu-btn:hover {
    color: #007bff;         /* color al pasar el mouse */
    cursor: pointer;
  }

  /* Primer botón */
  .header-menu a:nth-child(1) {
    transform: translateY(0px); /* ajusta hacia abajo o arriba */
  }

  /* Segundo botón */
  .header-menu a:nth-child(2) {
    transform: translateY(0px); /* diferente ajuste si está más desalineado */
  }

  /* Hamburger por defecto oculto */
  .hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
    
    position: absolute; /* ahora la posicionamos de forma absoluta dentro del header */
    right: 64px;        /* margen desde el borde derecho */
    top: 50%;           /* centrado vertical */
    transform: translateY(-50%); /* exacto centro vertical */
  }

  .hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #333;
  }

  /* Menú móvil oculto por defecto */
  .mobile-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: absolute;
    top: 85px; /* debajo del header */
    right: 35px;
    max-width: 90vw;     /* nunca más ancho que la pantalla */
    overflow-x: auto;    /* scroll horizontal si el texto es muy largo */
    background-color: white;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 1000;   /* sobre otros elementos */
    

    /* animación inicial */
    transform-origin: top right; /* punto de origen para la animación */
    transform: scaleY(0);        /* colapsado inicialmente */
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    white-space: nowrap;     /* evita que el texto se rompa en varias líneas */
  }

  /* clase que activa el menú */
  .mobile-menu.open {
    transform: scaleY(1);
    opacity: 1;
  }

  .mobile-menu a {
    min-width: 100px;        /* ancho mínimo para cada enlace */
    padding: 5px 10px;
    overflow-x: auto;        /* scroll interno si un enlace es muy largo */
    text-overflow: ellipsis; /* opcional: muestra "..." si sigue siendo largo */
  }


  /* Media query para móviles */
  @media (max-width: 768px) {
    .header-menu {
      display: none; /* oculta menú web */
    }
    .hamburger {
      display: flex; /* muestra hamburger */
    }
  }


  .volver-atras {
    font-size: 24px;
    font-weight: bold;
    margin-right: 1380px;
    color:#9d40db
  }
  
  .perfil a {
    font-size: 24px;
    text-decoration: none;
    color: #333;
  }
  
  /* === ESTILOS PARA CELULARES === */
@media (max-width: 600px) {
    main {
      margin-top: 100px;
      padding: 0 20px;     
    }
    main h2 {
        text-align: center;
      }
      
  
    form {
      flex-direction: column;
      width: 100%;
    }
  
    input[type="text"],
    button {
      width: 100%;
      box-sizing: border-box;
    }
  
    .tendencias li {
      display: block;
      margin: 6px 0;
    }
  
    header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        height: 85px;
        padding: 0 20px;
      }
      
  
    .perfil {
      align-self: flex-end;
    }

    
  }

  


/* === MODAL DE SOLEDAD === */
#modal-soledad {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  animation: fadeIn 0.3s ease-in-out;
}

#modal-soledad .contenido-modal {
  background: white;
  padding: 30px 20px;
  border-radius: 12px;
  max-width: 400px;
  margin: 120px auto;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  animation: slideUp 0.3s ease;
}

#modal-soledad p {
  font-size: 18px;
  margin-bottom: 20px;
  color: #333;
}



/* Modal de SOLEDAD BOTONES*/
#btn-salir {
  background-color: #e57373;
  color: white;
}

#btn-salir:hover {
  background-color: #ce5252;
}

#btn-buscar-otro {
  background-color: #b593ec;
  color: #ffffff;
}

#btn-buscar-otro:hover {
  background-color: #9e7ee3;
}

/* Animaciones */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}


.input-chat {
  padding: 8px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  width: 70%;
}



.btn-chat {
  padding: 8px 16px;
  font-size: 15px;
  background-color: #9c6ee8;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.btn-chat:hover {
  background-color: #7a4dd8;
}


/* === ESTILOS PARA LA SALA DE ESPERA === */
.mensaje-espera {
  font-size: 22px;
  margin-bottom: 20px;
  text-align: center;
}

#cancelar {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #ccc;
  color: rgb(0, 0, 0);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#cancelar:hover {
  background-color: rgb(149, 149, 149);
}

/* === ADAPTACIÓN PARA CELULARES === */
@media (max-width: 600px) {
  .mensaje-espera {
    font-size: 20px;
    padding: 0 10px;
  }

  main button#cancelar {
    width: 90%;
    max-width: 300px;
  }
}


.puntos-cargando span {
  animation: saltar 1.2s infinite;
  display: inline-block;
  font-weight: bold;
  font-size: 24px;
  margin-left: 2px;
  opacity: 0.2;
}

.puntos-cargando span:nth-child(1) { animation-delay: 0s; }
.puntos-cargando span:nth-child(2) { animation-delay: 0.2s; }
.puntos-cargando span:nth-child(3) { animation-delay: 0.4s; }

@keyframes saltar {
  0%, 100% { transform: translateY(0); opacity: 0.2; }
  50% { transform: translateY(-5px); opacity: 1; }
}



#btn-salir-chat {
  background-color: #f66;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 17px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative; /* necesario para moverlo */
  top: -150px;          /* lo desplaza hacia abajo */
  left: 0;   
}



#btn-salir-chat:hover {
  background-color: #d44;
}

#btn-buscar-otro-panel {
  position: relative; /* necesario para moverlo */
  top: -250px;          /* lo desplaza hacia abajo */
  left: 0;            /* opcional, para mover horizontalmente */
}

@media (max-width: 768px) {
  /* Solo en mobile, mover los botones dentro del panel derecho */
  #btn-salir-chat {
    position: relative;
    top: -520px;   /* desplaza hacia abajo */
    left: 0;     /* opcional, para mover horizontalmente */
  }

  #btn-buscar-otro-panel {
    position: relative;
    top: -610px;   /* más abajo que salir, por ejemplo */
    left: 0;     /* opcional */
  }
}


#modal-confirmar-salida button {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
}

#confirmar-salida {
  background-color: #e57373; /* rojo claro */
  color: white;
  
}

#confirmar-salida:hover {
  background-color: #dc4040;
}

#cancelar-salida {
  background-color: #ccc;
  color: #333;
}

#cancelar-salida:hover {
  background-color: #a1a1a1;
}


/* 🧱 Layout general del chat */
.contenedor-chat {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 20px;
  gap: 35px;
}

/* 📦 Paneles */
.panel {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  height: fit-content;
}

.panel-izquierdo,
.panel-derecho {
  width: 350px;
  min-height: 400px;
}

.panel-central {
  width: 380px;
  min-height: 400px;
  max-height: 400px; 
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%; /* ocupa todo el alto disponible */
}

/* 📝 Título lateral */
.titulo-chat-lateral {
  white-space: nowrap;
  font-size: 20px;
  margin: 0;
  text-align: center;
}

/* 💬 Recuadro de mensajes */
.chat-mensajes {
  flex: 1; /* ocupa todo el espacio sobrante */
  overflow-y: auto;  
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  max-height: 400px; /* o lo que uses */
  overflow-y: auto;
}

.mensaje {
  max-width: 70%;
  padding: 8px 12px;
  border-radius: 16px;
  position: relative;
  word-wrap: break-word;
}

/* Mis mensajes (izquierda) */
.mensaje-propio {
  align-self: flex-start;
  background-color: #dcf8c6; /* verde clarito tipo WhatsApp */
}

/* Mensajes del otro (derecha) */
.mensaje-ajeno {
  align-self: flex-end;
  background-color: #fff;
  border: 1px solid #ddd;
}

/* Puntita de globo (solo visual, opcional) */
.mensaje-propio::after {
  content: "";
  position: absolute;
  left: -6px;
  top: 10px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent #dcf8c6 transparent transparent;
}

.mensaje-ajeno::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 10px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
}

/* Mensajes de sistema */
.mensaje-sistema {
  text-align: center;
  font-size: 0.9em;
  color: #777;
}

/* 📨 Formulario de envío */
.form-chat {
  display: flex;
  gap: 8px;
  padding: 10px;
   
  
}



.input-chat {
  flex: 1;
  padding: 8px;
  font-size: 16px;
  border-radius: 8px;
  border: 1px solid #ccc;
}

.btn-chat {
  padding: 8px 16px;
  background-color: #bc8ced;
  border: none;
  color: white;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
}

.btn-chat-lateral {
  padding: 10px 20px;
  width: 100%;
  background-color: #bc8ced;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  
}




.btn-chat-lateral:hover {
  background-color: #a060e1;
}

.panel-derecho {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* podés cambiar a center o space-between */
  gap: 20px; /* ← Espaciado vertical entre botones, podés ajustar */
  
}

.contenedor-boton-salir {
  margin-top: auto;
  padding-bottom: 30px;
}


.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 1000;
}

.modal-contenido {
  background: white;
  padding: 30px 20px;
  border-radius: 12px;
  max-width: 400px;
  margin: 150px auto;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.modal-contenido p {
  font-size: 18px;
  margin-bottom: 20px;
  color: #333;
}



/* Modal de BUSCAR */
.btn-confirmar-buscar {
  background-color: #bc8ced; /* celeste */
  color: white;
  margin-right: 10px;
}

.btn-confirmar-buscar:hover {
  background-color: #a060e1;
}

.btn-cancelar-buscar {
  background-color: #ccc;
  color: #333;
}

.btn-cancelar-buscar:hover {
  background-color: #959595;
}

/* Temporizador */
.temporizador {
  font-size: 24px;
  font-weight: bold;
  margin-top: 10px;
  text-align: center;
  color: #333;
}

/* Estilo general de modales */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1001;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.3s ease-in-out;
}

.oculto {
  display: none;
}

.modal .contenido-modal {
  background: white;
  padding: 30px 20px;
  border-radius: 12px;
  text-align: center;
  max-width: 400px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  animation: slideUp 0.3s ease;
}

.modal .contenido-modal p {
  font-size: 18px;
  margin-bottom: 20px;
}

.modal .contenido-modal button {
  margin: 8px 4px;
  padding: 10px 18px;
  font-size: 15px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}

/* Botones individuales */
#reiniciar-btn {
  background-color: #9c6ee8;
  color: white;
}
#reiniciar-btn.esperando {
  background-color: #ccc;
  color: #555;
  cursor: default;
}

#buscar-btn,
#buscar-btn-premium {
  background-color: #9c6ee8;
  color: white;
}

#salir-btn,
#salir-btn-premium {
  background-color: #f44336;
  color: white;
}


@font-face {
    font-family: 'G7_Segment7_S5';
    src: url('fonts/G7_Segment7_S5.ttf') format('truetype');
}

.temporizador-rectangulo {
    background-color: black;
    color: #00FF00;
    font-family: 'G7_Segment7_S5', monospace;
    font-size: var(--temporizador-font-size, 48px);
    width: var(--temporizador-width, 100%);
    height: var(--temporizador-height, 100px);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    margin: var(--temporizador-margin, 20px auto);
    padding: 10px;
    box-sizing: border-box;
}

/* Botón de reinicio del temporizador */
#reiniciarTemporizadorBtn {
  background-color: #47a0ff; /* azul/celeste */
  color: white;
  border: none;
  padding: 10px 20px;
  margin-top: 20px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  width: 100%;
  transition: background-color 0.2s ease;
}

#reiniciarTemporizadorBtn:hover {
  background-color: #0687ff;
}



/* Texto de advertencia */
#advertencia-reinicio {
  color: #383838;
  font-size: 12px;
  margin-top: 10px;
  text-align: center;
  padding: 0 10px;
}

.modalRes {
  display: none; /* Oculto por defecto */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro semitransparente */
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-content {
  background-color: white;
  padding: 20px 30px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.btn-confirm {
  background-color: #bc8ced;
  color: white;
  border: none;
  padding: 10px 20px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
}

.btn-cancel {
  background-color: #ccc;
  color: rgb(0, 0, 0);
  border: none;
  padding: 10px 20px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
}

/* Opcional: hover para mejorar UX */
.btn-confirm:hover {
  background-color: #a060e1;
}

.btn-cancel:hover {
  background-color: #a5a5a5;
}


.acp-reinicio {
  background-color: #bc8ced;
  color: white;
  border: none;
  padding: 10px 20px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
}

.rech-reinicio {
  background-color: #ccc;
  color: rgb(0, 0, 0);
  border: none;
  padding: 10px 20px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
}

/* Opcional: hover para mejorar UX */
.acp-reinicio:hover {
  background-color: #a060e1;
}

.rech-reinicio:hover {
  background-color: #a5a5a5;
}


#reiniciarTemporizadorBtn.desactivado {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none; /* Impide clics */
}

.ver-todas {
  margin-top: 10px;
  text-align: center;
}

.ver-todas a {
  font-size: 14px;
  color: #007BFF;
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
}

.ver-todas a:hover {
  text-decoration: underline;
}


/* Página de todas las tendencias */
.tendencias-pagina,
.personas-buscando-pagina  {
  margin-top: 10px;
  text-align: center;
}




.tendencias-pagina h2 {
  font-size: 28px;
  margin-bottom: 20px;
}

.tendencias-pagina ul,
.personas-buscando-pagina  {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Estilo para cada enlace de tendencia */
.tendencias-pagina li a,
.personas-buscando-pagina li a {
    display: block;
    width: 250px;           /* todas igual de anchas */
    background-color: #e0e0e0;
    padding: 8px 14px;
    border-radius: 20px;
    color: inherit; /* Mantiene el color de texto del contenedor */
    text-decoration: none; /* Quita el subrayado */
    transition: all 0.2s ease-in-out;
    /* Evitar desbordes de texto */
    max-width: 190px;        /* <-- ajustá el ancho máximo del "chip" */
    overflow: hidden;
    margin-top: 10px;
    text-overflow: ellipsis; /* <-- convierte en "..." cuando se pasa */
  }




/* Hover */
.tendencias-pagina li a:hover,
.personas-buscando-pagina li a:hover  {
  background-color: #d0d0d0;
  transform: scale(1.05);
}



/* Adaptación a celulares */
@media (max-width: 600px) {
  .tendencias-pagina ul {
    flex-direction: column;
    align-items: center;
  }
  .tendencias-pagina li a {
    display: block;
    width: 250px;  
    max-width: 100%; 
    text-align: center;
  }
}


/* Buscador de tendencias - Desktop y Mobile */
.tendencias-pagina input[type="text"] {
  width: 300px;       /* mismo ancho que los enlaces de tendencias */
  max-width: 100%;    /* para que no se pase de la pantalla en móviles */
  padding: 8px 14px;
  border-radius: 9px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Contenedor general de tendencias y personas buscando en Home */
.home-secciones {
  display: flex;
  gap: 100px; /* separación entre Tendencias y Personas buscando */
  justify-content: center; /* opcional: centra las secciones en la página */
  flex-wrap: wrap; /* para que en móvil vuelvan a estar en columna */
  margin-bottom: 240px;
  margin-top: 20px;
}

.home-secciones section h3 {
  margin-bottom: 3px; /* antes era más grande */
}

.home-secciones section ul {
  margin-bottom: 3px; /* reduce el espacio entre lista y botón */
}

.home-secciones section {
  display: flex;
  flex-direction: column; /* cada sección apila sus hijos verticalmente */
  align-items: center;    /* centra h3, lista y botón horizontalmente */
}

/* Versión mobile: mantener columna */
@media (max-width: 600px) {
  .home-secciones {
    flex-direction: column;
    align-items: center;
    margin-bottom: 250px;
  }

  .home-secciones section {
    margin-bottom: -140px; /* reduce el espacio entre secciones en móvil */
  }

 
}

.visually-hidden {
  position: absolute;
  left: -9999px;
}

.logo {
  height: 60px; /* Ajustá al tamaño de tu header */
}

/* 🔹 Por defecto oculto en desktop */
.cinta-izquierda,
.cinta-derecha,
.volver-izquierda,
.volver-derecha {
  display: none;
}

/* 🔹 Solo para pantallas pequeñas */
@media (max-width: 768px) {
  /* Paneles laterales deslizables */
  .panel-izquierdo,
  .panel-derecho {
    position: fixed;
    top: 0;
    height: 100%;
    width: 70%;
    transition: transform 0.3s ease;
    z-index: 150;
  }

  .panel-izquierdo {
    left: 0;
    transform: translateX(-100%);
    padding-top: 60px; 
  }

  .panel-derecho {
    right: 0;
    transform: translateX(100%);
    padding-top: 60px; 
  }

  /* Cintas dentro del panel, arriba del borde superior */
  .cinta-izquierda,
  .cinta-derecha {
    display: block;
    position: fixed;  /* 🔑 absoluta dentro del panel */
    top: 0px;          /* sobresale hacia arriba del panel */
    height: 30px;
    line-height: 30px;
    width: 160px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    z-index: 100;
    background: #4caf50;
    color: white;
  }

  .cinta-izquierda { left: -20px; border-radius: 0 12px 12px 0; 
  position: fixed;
  z-index: 100; /* mayor que cualquier panel */
 }
  .cinta-derecha { right: 0px; border-radius: 12px 0 0 12px; }

  /* Botones volver dentro del panel */
  .volver-izquierda,
  .volver-derecha {
    position: absolute;
    top: 10px;  /* un poco debajo de la cinta */
    display: none;
    z-index: 25;
    padding: 0px 12px;
    background: #4caf50;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    width: 120px; 
    text-align: center;
    line-height: 30px; 
  }

  .volver-izquierda { left: 10px; }
  .volver-derecha { right: 10px; }
}

@media (max-width: 768px) {
  /* Mantener el botón a la derecha del input en mobile */
  .form-chat {
    display: flex;       /* asegúrate de que siga siendo flex */
    flex-direction: row; /* fila en lugar de columna */
    gap: 8px;            /* espacio entre input y botón */
  }

  .input-chat {
    flex: 1;             /* ocupa todo el espacio restante */
  }

  .btn-chat {
    flex: 0;             /* no se expande, se queda a la derecha */
  }
}

/* Solo mobile */
@media (max-width: 768px) {
  /* Todos los botones dentro de los modales */
  #modal-confirmar-salida button,
  #modal-soledad button,
  #modal-confirmar-buscar button,
  #modal-reiniciar-tiempo button,
  #modal-tiempo-final-premium button,
  #restartRequestModal button,
  #modal-confirmar-reinicio button,
  #modal-rechazado button,
  #modal-reinicio-aceptado button {
    display: block;          /* se apilan */
    width: 100%;             /* ocupan todo el ancho */
    margin-bottom: 12px;     /* separación entre botones */
  }

  /* El último botón de cada modal sin margen */
  #modal-confirmar-salida button:last-child,
  #modal-soledad button:last-child,
  #modal-confirmar-buscar button:last-child,
  #modal-reiniciar-tiempo button:last-child,
  #modal-tiempo-final-premium button:last-child,
  #restartRequestModal button:last-child,
  #modal-confirmar-reinicio button:last-child,
  #modal-rechazado button:last-child,
  #modal-reinicio-aceptado button:last-child {
    margin-bottom: 0;
  }
}

.tema-espera {
  display: inline-block;
  max-width: 200px;   /* ajustá según el espacio que quieras */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: bottom; /* para que quede alineado con el texto */
}

.titulo-chat-lateral {
  display: flex;           /* para que el texto y el tema se adapten mejor */
  justify-content: center;  /* ✅ centra horizontalmente */
  text-align: center;       /* refuerzo por si acaso */
  align-items: center;
  gap: 4px;                /* pequeño espacio entre "Chat sobre:" y el tema */
  max-width: 100%;         /* no se salga del panel */
}

.titulo-chat-lateral .tema-chat {
  display: inline-block;
  max-width: 180px;        /* ajusta según el ancho disponible de tu panel izquierdo */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Estilo del LOGO solo para móviles */
@media (max-width: 768px) {
  .logo {
    margin-left: -10px; /* ajusta según lo que necesites */
    height: 60px;      /* opcional: cambiar tamaño en móvil */
  }
}

.flash-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none; /* solo se activa con JS */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.4);
  z-index: 2000;
}

.flash-content {
  background: #4caf50; /* verde éxito */
  color: white;
  padding: 20px 30px;
  border-radius: 10px;
  font-size: 16px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  animation: fadeIn 0.3s ease-out;
}

/* animación simple */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}


.feedback-container {
  max-width: 500px;
  margin: 60px auto;
  padding: 30px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  text-align: center;
}

.feedback-container h1 {
  margin-bottom: 10px;
  font-size: 24px;
  color: #333;
}

.feedback-container p {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

.feedback-container textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 15px;
  transition: border-color 0.2s;
}

.feedback-container textarea:focus {
  border-color: #4caf50;
  outline: none;
}

.feedback-container button {
  padding: 10px 20px;
  background: #4caf50;
  border: none;
  color: white;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.feedback-container button:hover {
  background: #43a047;
}

.back-link {
  display: block;
  margin-top: 15px;
  text-decoration: none;
  font-size: 14px;
  color: #555;
  transition: color 0.2s;
}

.back-link:hover {
  color: #000;
}

/* === Adaptación a móviles === */
@media (max-width: 768px) {
  .feedback-container {
    margin: 20px 15px; /* menos espacio arriba y lateral */
    padding: 20px;     /* menos padding interno */
  }
  .feedback-container h1 {
    font-size: 20px;
  }
  .feedback-container p {
    font-size: 13px;
  }
  .feedback-container textarea {
    min-height: 100px;
    font-size: 13px;
    width: 100%;         /* ocupa todo el ancho del contenedor */
    max-width: 100%;     /* no puede exceder el contenedor */
    box-sizing: border-box; /* incluye padding dentro del ancho */
  }
  .feedback-container button {
    width: 100%; /* botón ocupa todo el ancho */
    padding: 10px 0;
    font-size: 15px;
  }
}

/* H1 principal de home SEO */
main h1 {
    font-size: 28px; /* desktop por defecto */
    text-align: center;    /* Centrar el texto */
    font-weight: bold;     /* Negrita */
    margin: 20px 0;        /* Espacio arriba y abajo */
    line-height: 1.3;      /* Altura de línea para mejor lectura */
}


@media (max-width: 600px) {
    main h1 {
        font-size: 24px; /* mobile más pequeño */
    }
}

h1 span {
    display: inline; /* default inline, todo en la misma línea */
}

@media (min-width: 768px) {
    h1 span {
        display: block; /* en desktop, cada span ocupa su línea */
    }
}

.h3-simulado {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.subtitulo-tendencias {
    font-weight: normal;        /* quita la negrita */
    font-size: 0.9rem;          /* más pequeño que el H3 por defecto */
    margin-top: -5px;            /* sube el subtítulo un poco hacia arriba */
    margin-bottom: 10px;        /* espacio inferior con la lista */
    color: #333;                /* color más suave si querés */
}

.faq {
  margin: 7rem auto;
  max-width: 800px; /* Limita ancho de la sección FAQ */
  padding: 0 1rem;
  text-align: center; /* Centra el título principal */
}

.faq h2 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
}

.faq-item {
  margin-bottom: 1rem;
  border-bottom: none;
  text-align: left; /* Pregunta y respuesta alineadas a la izquierda */
  display: inline-block;
  width: 100%;
  max-width: 600px; /* Limita ancho de cada pregunta */
  margin: 0 auto; /* Centrado horizontal */
}

.faq-item h3.faq-question {
  color: #363636 !important; /* Color de las preguntas */
  width: 100%;
  text-align: left;
  padding: 0.75rem 1rem;
  background: #f7f7f7;
  border: none;
  outline: none;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
  border-radius: 8px;
}

.faq-item h3.faq-question:hover {
  background: #b8b8b8;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 1rem;
  text-align: left;
}

.faq-answer.open {
  padding: 0.75rem 1rem;
}

/* Para móviles */
@media (max-width: 768px) {
  .faq {
    margin-top: 4rem; /* más separación en mobile */
  }
}


html {
  scroll-behavior: smooth;
}


/* Plantilla de H1 reutilizable */
.page-h1 {
  margin: 2rem auto 1rem;
  max-width: 50ch;              /* limita el ancho para mejor lectura */
  text-align: center;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-size: clamp(1.5rem, 2.5vw + 0.8rem, 2.25rem); /* responsivo y preciso */
  color:rgb(56, 56, 56)
}

/* Control de salto de línea solo en desktop (opcional) */
.page-h1 .h1-line {
  display: inline;              /* en mobile queda en la misma línea si entra */
}
@media (min-width: 768px) {
  .page-h1 .h1-line {
    display: block;             /* en desktop forzamos salto de línea */
  }
}


.h1-link {
  color: inherit;               /* mismo color que el H1 */
  text-decoration: none;   /* opcional, para destacar */
  text-decoration-thickness: 2px;
  font-weight: inherit;         /* mantiene el peso */
  color: #6b46c1;   
}

.h1-link:hover {
  color: #512ca7;               /* o un color de tu paleta al pasar el mouse */
  text-decoration: none;        /* efecto hover más limpio */
}

/* Plantilla de H2 reutilizable */
.page-h2 {
  margin: 2rem auto 0.1rem;
  max-width: 50ch;              /* limita el ancho para mejor lectura */
  text-align: center;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-size: clamp(1rem, 2.5vw + 0.8rem, 2.25rem); /* responsivo y preciso */
  color:rgb(56, 56, 56)
}

/* Control de salto de línea solo en desktop (opcional) */
.page-h2 .h2-line {
  display: inline;              /* en mobile queda en la misma línea si entra */
}
@media (min-width: 768px) {
  .page-h2 .h2-line {
    display: block;             /* en desktop forzamos salto de línea */
  }
}


.cta-text {
  font-size: 1.2rem;
  margin-top: 1rem;
  text-align: center;
  color: #444; 
}

.cta-text span {
  display: block;
}

.cta-text .text-line {
  display: inline;              /* en mobile queda en la misma línea si entra */
}
@media (min-width: 768px) {
  .cta-text .text-line {
    display: block;             /* en desktop forzamos salto de línea */
  }
}

.cta-text2 {
  font-size: 1.2rem;
  margin-top: 1rem;
  text-align: center;
  color: #444; 
  max-width: 1000px; 

}

.cta-text2 span {
  display: block;
}

.cta-text2 .text-line {
  display: inline;              /* en mobile queda en la misma línea si entra */
}

@media (min-width: 768px) {
  .cta-text2 .text-line {
    display: block;             /* en desktop forzamos salto de línea */
  }
}

.cta-text3 {
  font-size: 1.2rem;
  margin-top: -10px;
  margin-bottom: 10px;
  text-align: center;
  color: #444; 
  max-width: 700px; 

}

.cta-text3 span {
  display: block;
}

.cta-text3 .text-line {
  display: inline;              /* en mobile queda en la misma línea si entra */
}

@media (min-width: 768px) {
  .cta-text3 .text-line {
    display: block;             /* en desktop forzamos salto de línea */
  }
}

.fake-search-link {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}

.fake-search {
  display: flex;
  justify-content: center;
  max-width: 500px;
  margin: 1rem auto;
  padding: 0.5rem;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  pointer-events: none;  /* bloquea clicks internos */
  margin-top: 1px;
}

.fake-search input {
  flex: 1;
  border: none;
  padding: 0.7rem;
  border-radius: 8px;
  background: #f7f7f7;
  color: #888;
  cursor: pointer;
}

.fake-search button {
  margin-left: 0.5rem;
  padding: 0.7rem 1rem;
  border: none;
  background: #b963ff !important;
  border-radius: 8px;
  color: #ffffff;
  cursor: pointer;
}

/* Para que parezca inactivo */
.fake-search input:disabled,
.fake-search button:disabled {
  opacity: 0.7;
}

/* Versión Mobile */
@media (max-width: 768px) {
  .fake-search {
    max-width: 90%;         /* más angosto que en desktop */
    padding: 0.4rem;        /* menos padding para que ocupe menos espacio */
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    gap: 0.5rem; /* espacio entre input y botón */
  }

  .fake-search input,
  .fake-search button {
    box-sizing: border-box;  /* para que padding no rompa la altura */
    height: 40px;            /* altura consistente */
    font-size: 14px;
    line-height: 1.2;
  }

  .fake-search input {
    flex: 1;            /* ocupa todo el espacio disponible */
    padding: 0 12px;         /* espacio para el texto */
    border-radius: 8px;
    background: #f7f7f7;
    color: #000000;
    cursor: pointer;
  }

  .fake-search button {
    flex: 0 0 100px;    /* ancho fijo del botón */
    margin-left: 0.5rem;
    padding: 0 10px;
    border-radius: 8px;
    background: #b963ff;
    color: #fff;
    cursor: pointer;
  }

  /* Para simular que todo el buscador redirige */
  .fake-search-link {
    display: block;
    width: 100%;
  }
}

.cta-button {
  display: inline-block;
  margin: 1.5rem auto 1.5rem;
  padding: 0.8rem 1.5rem;
  background: #b963ff; /* mismo color que usaste en el botón del buscador */
  color: #fff;
  font-size: 1.1rem;
  font-weight: bold;
  text-decoration: none;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: background 0.3s ease;
}

.cta-button:hover {
  background: #9a4ad6;
}

.volver-boton {
  display: inline-block;
  margin: 1.5rem auto 1.5rem;
  padding: 0.8rem 1.5rem;
  background: #e6e6e6; /* mismo color que usaste en el botón del buscador */
  color: #333333;
  font-size: 1.1rem;
  font-weight: bold;
  text-decoration: none;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: background 0.3s ease;
  margin-left: 0px;
  padding: 10px 22px; 
}

.volver-boton:hover {
  background: #c7c7c7;
}


/* Hacemos que body ocupe toda la altura y use flexbox */
html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* El main ocupa todo el espacio disponible */
main {
    flex: 1;
}

/* Footer siempre al final de la página */
.footer {
    text-align: center;
    padding: 15px 0;
    font-size: 14px;
    
    
}

/* Estilo del link dentro del footer */
.footer-link {
    color: #555;
    text-decoration: none;
}

.footer-link:hover {
    text-decoration: underline;
}


/* Sección general */
.articulos {
  max-width: 1100px;
  margin: 0.1rem auto;
  padding: 0 1rem;
  
}

.articulos__title {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
}

/* Grid responsive */
.articulos__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.articulos__grid2 {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  justify-content: center; /* centra horizontalmente */ 
  margin-bottom: 70px;
}
.articulos__grid2 > * {
  max-width: 400px;
}

.articulos__grid2 a {
  font-size: 1.2rem;
  margin-top: 1rem;
  text-align: center;
  color: #444; 
}

@media (min-width: 640px) {
  .articulos__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    
  }
 
}

@media (min-width: 1024px) {
  .articulos__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Tarjeta clickeable */
.articulo-card {
  display: block;               /* Hace clickeable toda la tarjeta */
  background: #ffffff;
  border: 1px solid #e9e9e9;
  border-radius: 16px;
  padding: 1rem 1.1rem;
  text-decoration: none;        /* Quita subrayado del <a> */
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  color: inherit;               /* Hereda color del body */
  
}

.articulo-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  border-color: #d9d9d9;
}

.articulo-card:focus-visible {
  outline: 3px solid #b963ff;   /* Accesible al tab */
  outline-offset: 3px;
}

/* Contenido de la tarjeta */
.articulo-card__title {
  margin: 0 0 0.35rem 0;
  font-size: 1.05rem;
  line-height: 1.3;
}

.articulo-card__desc {
  margin: 0 0 0.75rem 0;
  font-size: 0.95rem;
  color: #555;
}

.articulo-card__cta {
  display: inline-block;
  font-size: 0.92rem;
  font-weight: 600;
  opacity: 0.85;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.articulo-card:hover .articulo-card__cta {
  opacity: 1;
  transform: translateX(2px);
}

/* Dropdown */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Contenedor del menú desplegable */
.dropdown-content {
  display: none;
  position: absolute;
  left: -100px;
  top: 100%;
  margin-top: 10px;
  background: #fff;         /* fondo blanco */
  border: 1px solid #ddd;   /* borde muy sutil */
  border-radius: 4px;       /* esquinas suaves */
  padding: 4px 0;           /* espacio interno */
  min-width: 160px;         /* ancho mínimo para que no quede raro */
  z-index: 1000;            /* que quede arriba de todo */
}

.dropdown-content::before {
  content: "";
  position: absolute;
  top: -10px;      /* extiende 8px hacia arriba */
  left: 0;
  width: 100%;
  height: 8px;
}


/* Links del dropdown */
.dropdown-content .menu-btn {
  display: block;
  padding: 6px 12px;       /* más área clickeable */
  white-space: nowrap;
}

/* Hover en los items */
.dropdown-content .menu-btn:hover {
  background: #f8f8f8;     /* fondo gris claro al pasar */
  color: #007bff;
}

/* Mostrar al pasar por el contenedor completo */
.dropdown:hover .dropdown-content {
  display: block;
}