/* Estilos generales */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}

/* Fondo general de la página */
body {
  background-color: #0A1931; /* Azul marino oscuro #0A1931*/
  font-family: Arial, sans-serif;
  color: white;
  text-align: center;
}



/* Contenedor principal */
.container {
  position: relative;
  height: 75vh; 
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

/* Imagen de la clase */
.image-container {
  position: absolute;
  top: 0;
  width: 100%;
  height: 65%;
  /*background: url('../img/clase1.webp') no-repeat center center/cover;*/

      /* Ajustes que controlan cómo se muestra la imagen de fondo */
      background-repeat: no-repeat; 
      background-position: center center; 
      background-size: cover; 
}


.espaciador {
  height: 55px; /* el tamaño que quieras, 
                   más o menos la altura de la barra */
}


/* Degradado para fusionar la imagen con el fondo */
.image-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 14%;
  background: linear-gradient(rgba(0, 0, 0, 0), #0A1931);
}

/* Título de la clase */
.titulo {
  position: absolute;
  top: 60%;
  width: 100%;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
}

/* Contenedor de botones
.botones {
  position: absolute;
  bottom: 20%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 80%;
}

/* Estilos generales de los botones */
.boton {
  padding: 12px;
  border-radius: 8px;
  border: none;
  font-size: 0.8rem;
  font-weight: bold;
  width: 100%;
  cursor: pointer;
}

/* Botón para reproducir clase */
.boton-reproducir {
  background-color: #F0F0F0;
  color: black;
}

/* Botón para el profesor IA */
.boton-copo {
  background-color: #1e3a8a;
  color: white;
}

/* Estilos para la sección de clases */
.clases-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}

.clase {
  width: 80%;
  max-width: 400px;
  text-align: center;
}

.clase img {
  width: 100%;
  border-radius: 10px;
}

.clase p {
  font-size: 1.2rem;
  font-weight: bold;
  color: white; /* Color blanco para el texto */
  margin-top: 5px;
}
/*APARTIR DE AQUI COMIENZA EL ESTILO DE HOME*/
/* Estilos generales */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Fondo general de la página */
body {
  background-color: #0A1931; /* Azul marino oscuro */
  font-family: Arial, sans-serif;
  color: white;
  text-align: center;
  overflow-x: hidden;
}

/* Contenedor principal de Home*/
.home-container {
  width: 100%;
  min-height: 100vh;
  padding-bottom: 35px; /* o la medida que decidas */
}

/* Sección de la primer impresión */

/* Estilos del encabezado con solo texto */
.header {
  position: absolute;
  top: 1px;  /* Distancia desde la parte superior */
  left: 2px; /* Distancia desde la izquierda */
  z-index: 10; /* Asegura que siempre esté visible */
}

/* Estilo del texto "Polart" */
.logo-text {
  font-size: 1.1rem; /* Tamaño del texto */
  font-weight: bold;
  color: white; /* Color del texto */
  font-family: Arial, sans-serif; /* Fuente */
}

/*boton de usuario*/



.hero-section {
  position: relative;
  height: 70vh;
  background: url('../img/home-bg.webp') no-repeat center center/cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  z-index: 1;
}
.hero-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%;
  background: linear-gradient(rgba(0, 0, 0, 0), #0A1931);
  z-index: 0; /* Poner el degradado detrás del texto */
}

.hero-text {
  font-size: 1.5rem;
  font-weight: bold;
  max-width: 80%;
  margin-top: auto;
  margin-bottom: 1vh;
  z-index: 2;
}

.subtitle {
  font-size: 1.2rem;
  font-weight: bold;
  text-align: left;
  width: 90%;
  margin-bottom: 2vh;
}

/* Sección de las materias */
.course-section {
  width: 100%;
  padding: 20px;
  text-align: left;
}

.course-title {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 15px;
  padding-left: 1%;
}

.course-slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 15px;
  padding: 0 0%;
  scrollbar-width: none;
  
}

.course-slider::-webkit-scrollbar {
  display: none;
}

.course {
  flex: 0 0 auto;
  width: 43%;
  max-width: 200px;
  height: 200px;
  background: #1E3A8A;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
  color: white;
  cursor: pointer;
  scroll-snap-align: center;
  transition: transform 0.3s ease-in-out;
}

.course:hover {
  transform: scale(1.05);
}
/* Asignar imágenes de fondo a cada materia */
.course:nth-child(1) { background: url('../img/historia.webp') no-repeat center center/cover; }
.course:nth-child(2) { background: url('../img/espanol.webp') no-repeat center center/cover; }
.course:nth-child(3) { background: url('../img/biologia.webp') no-repeat center center/cover; }
.course:nth-child(4) { background: url('../img/literatura.webp') no-repeat center center/cover; }
.course:nth-child(5) { background: url('../img/historiademexico.webp') no-repeat center center/cover; }
.course:nth-child(6) { background: url('../img/geografia.webp') no-repeat center center/cover; }
.course:nth-child(7) { background: url('../img/matematicas.webp') no-repeat center center/cover; }
.course:nth-child(8) { background: url('../img/quimica.webp') no-repeat center center/cover; }
.course:nth-child(9) { background: url('../img/fisica.webp') no-repeat center center/cover; }

/* Estilos para mejorar la legibilidad del texto dentro de los rectángulos */
.course span {
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
}
/* Degradado en la parte inferior de la imagen para fusionarse con el fondo */
.hero-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%;
  background: linear-gradient(rgba(0, 0, 0, 0), #0A1931);
}
.course-slider-alt .course:nth-child(1) { background: url('../img/biologia.webp') no-repeat center center/cover; }
.course-slider-alt .course:nth-child(2) { background: url('../img/quimica.webp') no-repeat center center/cover; }
.course-slider-alt .course:nth-child(3) { background: url('../img/literatura.webp') no-repeat center center/cover; }
.course-slider-alt .course:nth-child(4) { background: url('../img/espanol.webp') no-repeat center center/cover; }
.course-slider-alt .course:nth-child(5) { background: url('../img/historiademexico.webp') no-repeat center center/cover; }
.course-slider-alt .course:nth-child(6) { background: url('../img/historia.webp') no-repeat center center/cover; }
.course-slider-alt .course:nth-child(7) { background: url('../img/matematicas.webp') no-repeat center center/cover; }
.course-slider-alt .course:nth-child(8) { background: url('../img/geografia.webp') no-repeat center center/cover; }
.course-slider-alt .course:nth-child(9) { background: url('../img/fisica.webp') no-repeat center center/cover; }
/* Carrusel 3: Explorando la Historia */
.course-slider-history .course:nth-child(1) { background: url('../img/historia.webp') no-repeat center center/cover; }
.course-slider-history .course:nth-child(2) { background: url('../img/historiademexico.webp') no-repeat center center/cover; }
.course-slider-history .course:nth-child(3) { background: url('../img/literatura.webp') no-repeat center center/cover; }
.course-slider-history .course:nth-child(4) { background: url('../img/espanol.webp') no-repeat center center/cover; }
.course-slider-history .course:nth-child(5) { background: url('../img/geografia.webp') no-repeat center center/cover; }
.course-slider-history .course:nth-child(6) { background: url('../img/quimica.webp') no-repeat center center/cover; }
.course-slider-history .course:nth-child(7) { background: url('../img/biologia.webp') no-repeat center center/cover; }
.course-slider-history .course:nth-child(8) { background: url('../img/matematicas.webp') no-repeat center center/cover; }
.course-slider-history .course:nth-child(9) { background: url('../img/fisica.webp') no-repeat center center/cover; }

/* Carrusel 4: La magia de la literatura */
.course-slider-literature .course:nth-child(1) { background: url('../img/literatura.webp') no-repeat center center/cover; }
.course-slider-literature .course:nth-child(2) { background: url('../img/espanol.webp') no-repeat center center/cover; }
.course-slider-literature .course:nth-child(3) { background: url('../img/historiademexico.webp') no-repeat center center/cover; }
.course-slider-literature .course:nth-child(4) { background: url('../img/historia.webp') no-repeat center center/cover; }
.course-slider-literature .course:nth-child(5) { background: url('../img/geografia.webp') no-repeat center center/cover; }
.course-slider-literature .course:nth-child(6) { background: url('../img/biologia.webp') no-repeat center center/cover; }
.course-slider-literature .course:nth-child(7) { background: url('../img/quimica.webp') no-repeat center center/cover; }
.course-slider-literature .course:nth-child(8) { background: url('../img/matematicas.webp') no-repeat center center/cover; }
.course-slider-literature .course:nth-child(9) { background: url('../img/fisica.webp') no-repeat center center/cover; }
/*altura y espacio entre botones
.botones-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  top: -15px; /* Ajusta el valor negativo para subir los botones 
  gap: 15px; 
  width: 100%;
}
*/
.botones-container {
  position: absolute;  
  top: 68%;            
  left: 0;             
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-top: 20px;  /* Un margen para separar del elemento anterior */
}


.boton-examen {
  background-color: #1E3A8A; /* Color naranja, cámbialo al que prefieras */
  color: white; /* Color del texto */
  border: none; /* Elimina el borde */
  padding: 12px;
  font-size: 0.8rem;
  font-weight: bold;
  border-radius: 8px; /* Redondeado */
  width: 80%; /* Mantiene el tamaño uniforme */
  cursor: pointer;
  text-align: center;
}

/*Estilos del boton de usuario de la home*/

/* Botón de usuario */
.user-button {
  position: absolute;                  /* Se ubica en la pantalla de forma absoluta */
  top: 8px;                           /* Distancia desde la parte superior */
  right: 8px;                         /* Distancia desde el lado derecho */
  
  width: 30px;                         /* Ancho del botón */
  height: 30px;                        /* Alto del botón */
  border-radius: 50%;                  /* Hace el botón circular */
  
  background-image: url('../img/user-icon.webp'); /* Ruta de tu imagen de ícono */
  background-size: cover;              /* Ajusta la imagen para que ocupe todo el botón */
  background-position: center;         /* Centra la imagen en el botón */

  cursor: pointer;                     /* Cambia el cursor a 'mano' al pasar encima */
  z-index: 999;                        /* Asegura que quede encima de otros elementos */
  border: 1px solid rgb(255, 255, 255)          /* Contorno blanco alrededor del botón */

  
}



/* Pagina de Usuario */
/* Estilos generales de la página de usuario */
body {
  background-color: #0A1931;  /* Azul marino oscuro, igual que en la Home */
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  color: white;
  text-align: center;
  /* Pensando en móviles: ocupar todo el ancho */
}

/* Contenedor principal para centrar verticalmente si se desea */
.user-options-container {
  width: 100%;
  min-height: 100vh;  /* Ocupa toda la pantalla vertical en móviles */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* o center si deseas centrar verticalmente */
  padding-top: 30px;  /* Espacio superior para que la imagen no pegue con el borde */
}

/* Contenedor de la imagen de perfil */
.profile-pic-container {
  margin-bottom: 20px;  /* Espacio debajo de la imagen */
}

/* Imagen de perfil en círculo con contorno blanco */
.profile-pic {
  width: 100px;          /* Ajusta según el tamaño deseado */
  height: 100px;         /* Igual para mantener un círculo */
  object-fit: cover;     /* Asegura que la imagen llene el espacio */
  border-radius: 50%;    /* Círculo */
  border: 3px solid white; /* Contorno blanco */
}

/* Contenedor de botones/menú */
.menu-container {
  width: 90%;                  /* Para móviles: un ancho casi completo */
  max-width: 400px;            /* En pantallas más anchas, no crece demasiado */
  background-color: #192847;   /* Un tono un poco distinto al fondo para contraste */
  border-radius: 8px;
  overflow: hidden;            /* Para que las divisiones internas no se salgan */
}

/* Cada opción del menú */
.menu-option {
  display: block;           /* (1) Asegura que cada opción sea un bloque */
  padding: 15px 10px;
  text-align: left;         /* Texto a la izquierda para un estilo tipo menú */
  font-size: 1rem;
  border-bottom: 1px solid #aaa;  /* Línea gris separadora */
  cursor: pointer;          /* Cambia el cursor a manita */
  text-decoration: none;    /* Quita subrayado si es <a> */
  color: inherit;           /* Usa el color del padre (blanco) */
}

/* Quitar la línea del último elemento */
.menu-option:last-child {
  border-bottom: none;
}

/* Efecto hover en desktop */
.menu-option:hover {
  background-color: #1E3A8A;  /* Un azul medio */
  /* Si NO quieres ningún cambio de color al hover,
     puedes quitar o comentar esta propiedad */
}

/* Botom Bar */

.bottom-nav {
  position: fixed;                  /* Fija la barra en la pantalla sin importar el scroll */
  bottom: 0;                        /* La ancla en la parte inferior de la pantalla */
  left: 0;                          /* La extiende desde el borde izquierdo */
  right: 0;                         /* La extiende hasta el borde derecho */
  height: 50px;                     /* Establece la altura de la barra de navegación */
  background-color: rgba(0, 0, 0, 0.7); /* Aplica un fondo negro con transparencia del 70% */
  display: flex;                     /* Usa flexbox para organizar los elementos dentro de la barra */
  justify-content: space-around;     /* Distribuye los iconos de manera equitativa con espacios entre ellos */
  align-items: center;               /* Centra los iconos verticalmente dentro de la barra */
  z-index: 9999;                     /* Asegura que la barra esté por encima de otros elementos */
}

.bottom-nav .nav-item {
  display: inline-flex;              /* Permite que los elementos sean flexibles y se alineen horizontalmente */
  justify-content: center;           /* Centra los iconos horizontalmente dentro de cada enlace */
  align-items: center;               /* Centra los iconos verticalmente dentro de cada enlace */
  text-decoration: none;             /* Elimina el subrayado predeterminado de los enlaces */
  color: #ffffff;                    /* Establece el color blanco para los iconos y textos */
  flex: 1;                           /* Distribuye el ancho de manera uniforme entre los iconos */
}

.bottom-nav .nav-item svg {
  width: 24px;                        /* Define el ancho del icono SVG */
  height: 24px;                       /* Define la altura del icono SVG */
}

/* Iconos en imagen (Copito) dentro del bottom nav */
.bottom-nav .nav-item .nav-icon{
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

/* Copito un poco más pequeño que los SVG */
.bottom-nav .nav-item-copito .nav-icon{
  width: 21px;   /* prueba 20, 19 o 18 */
  height: 21px;
}


/*
    Añadimos las reglas para mostrar el icono de "play" al pasar sobre
    cada tarjeta de clase (.clase) igual que en el primer código
  */
  .clase {
      position: relative; /* Permite colocar el pseudo-elemento sobre la imagen */
      cursor: pointer;    /* Cambia el cursor a 'pointer' para indicar que es clicable */
      display: inline-block; /* Asegura que respete el contenido interno */
      margin: 0 10px 20px 0; /* Ajusta espaciados a tu gusto */
      vertical-align: top;   /* Para que no se desplacen las tarjetas */
    }

    .clase img {
      display: block;
      width: 100%;
      height: auto;
    }

    .clase::after {
      content: '';
      position: absolute;
      top: 40%;
      left: 50%;
      width: 35px;
      height: 35px;
      background-color: rgba(255, 255, 255, 0.9); /* Fondo semitransparente */
      /* Triángulo apuntando a la derecha (ícono Play) */
      clip-path: polygon(30% 20%, 30% 80%, 80% 50%);
      transform: translate(-50%, -50%);
    }

    /* ——————————————————————————————————————————
   LAYOUT DESKTOP / TABLET (pantallas ≥ 1024px)
   —————————————————————————————————————————— */
@media (min-width: 1024px) {

  /* 2.1 Botones en fila ------------------------------------------------- */
  .botones-container {
    position: relative !important;  /* anulamos cualquier absolute del móvil */
    top: auto !important;
    left: auto !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important;           /* separación entre botones */
    margin: 20px auto !important;   /* espacio arriba/abajo */
    width: auto !important;         /* que ocupe lo que necesite */
  }

  /* Cada botón toma su espacio flexible máximo 200px */
  .botones-container .boton {
    flex: 1 1 200px !important;    /* crecer y encoger con base 200px */
    max-width: 200px !important;
    width: auto !important;
    transition: transform .3s, box-shadow .3s;
  }

  /* Efecto hover sólo para desktop */
  .botones-container .boton:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(255,255,255,0.3);
  }


  /* 2.2 Clases en fila con scroll horizontal ---------------------------- */
  .clases-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    padding: 20px 0 !important;
    overflow-x: auto !important;
    scrollbar-width: thin;             /* Firefox */
    scrollbar-color: rgba(255,255,255,0.3) transparent;
  }
  /* Chrome/Safari scrollbar */
  .clases-container::-webkit-scrollbar {
    height: 8px;
  }
  .clases-container::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.3);
    border-radius: 4px;
  }
  .clases-container::-webkit-scrollbar-track {
    background: transparent;
  }

  /* Ajuste individual de .clase */
  .clase {
    flex: 0 0 auto !important;     /* no crece ni se encoge */
    width: 240px !important;        /* ancho fijo */
    margin: 0 !important;           /* anulamos márgenes verticales */
    cursor: pointer;
    transition: transform .3s, box-shadow .3s;
  }
  /* Hover sobre miniatura de clase */
  .clase:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(255,255,255,0.4);
  }

    /* ——————————————————————————————————————————
     AJUSTES FINALES
     —————————————————————————————————————————— */

  /* 1) Botones: mismo tamaño y más grandes */
  .botones-container .boton {
    /* Fijamos un ancho idéntico para los tres */
    flex: 0 0 240px !important;   /* No crece ni se encoge, base 240px */
    max-width: 240px !important;
    width: 240px !important;
    /* Más alto y texto un poco más grande */
    padding: 16px 0 !important;
    font-size: .8rem !important;
  }

  /* 2) Bajar la “cámara” sobre la imagen de fondo */
  .container {
    /* Reducimos la altura para que el contenedor inferior suba */
    height: 130vh !important;
  }
  .image-container {
    /* Desplazamos el punto focal de la imagen hacia abajo */
    background-position: center 50% !important;
  }

}


/* ============ BOTONES DE CARRUSEL (‹ y ›) • SOLO DESKTOP ============ */
.carousel-next,
.carousel-prev {
  display: none;               /* ocultos por defecto */
}

@media (min-width: 1024px) {
  .carousel-next,
  .carousel-prev {
    display: flex;             /* visibles solo en pantallas grandes */
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55); /* negro transparente */
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    transition: background 0.2s;
    z-index: 5;                /* por encima del contenido */
  }

  .carousel-next { right: 8px; }  /* botón derecho */
  .carousel-prev { left:  8px; }  /* botón izquierdo */

  .carousel-next:hover,
  .carousel-prev:hover {
    background: rgba(0, 0, 0, 0.8);  /* un poco más opaco al hover */
  }
}
/* ==================================================================== */

/* ——— ARREGLO FINAL DESKTOP (≥ 1024 px) ——— */
@media (min-width: 1024px) {

  /* 1) La imagen ocupa espacio real (60 vh) */
  .image-container{
    position: relative !important;   /* ← ya no absoluta */
    height: 80vh !important;         /* alto de la “hero” */
    background-position: center 30% !important;
  }

  /* 2) El contenedor ya no necesita altura fija */
  .container{
    display: block !important;
    height: auto !important;
  }

  /* 3) Título pegado al pie de la imagen */
  .titulo{
    position: absolute !important;
    top: calc(80vh - 2.5rem) !important;  /* justo sobre el degradado */
    font-size: 2rem !important;
  }

  /* 4) Botones debajo de la imagen, en fila */
  .botones-container{
    position: relative !important;   /* entra al flujo normal */
    top: 0 !important;
    margin: 1.5rem auto 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 1.25rem !important;
  }

  .botones-container .boton{
    flex: 0 0 230px !important;
    max-width: 230px !important;
    width: 230px !important;
    padding: 16px 0 !important;
    font-size: .85rem !important;
    transition: transform .25s, box-shadow .25s;
  }
  .botones-container .boton:hover{
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(255,255,255,.35);
  }

  /* 5) Carrusel un poco más abajo para respirar */
  .clases-container{
    margin-top: 2rem !important;
  }
}
/* ——— FIX LANDSCAPE MÓVIL (ancho ≤ 1023 px) ——— */
@media (orientation: landscape) and (max-width: 1023px) {

  /* 1) El hero se comporta como bloque normal */
  .container{
    display: block !important;
    height: auto !important;          /* ya no 75vh fijo */
  }

  .image-container{
    position: relative !important;    /* reserva espacio */
    height: 55vh !important;          /* un poco menos alto que portrait */
    background-position: center 35% !important;
  }

  /* 2) Título pegado al borde inferior del hero */
  .titulo{
    position: absolute !important;
    top: calc(55vh - 2.3rem) !important;  /* ajusta al nuevo 55vh */
    font-size: 1.6rem !important;         /* opcional bajar tamaño */
  }

  /* 3) Botones en fila, dentro del flujo normal */
  .botones-container{
    position: relative !important;   /* deja de flotar */
    top: 0 !important;
    margin: 1rem auto 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 0.8rem !important;
  }

  .botones-container .boton{
    flex: 1 1 30% !important;       /* ocupan ±30 % cada uno */
    max-width: 200px !important;
    font-size: .75rem !important;
    padding: 14px 0 !important;
  }

  /* 4) Carrusel arranca debajo de los botones */
  .clases-container{
    margin-top: 1.5rem !important;
  }
}
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ╔══════════════════════════════════════╗
   ║   Burbuja flotante de Copito (Home)  ║
   ╚══════════════════════════════════════╝ */

.copito-bubble-wrapper {
  position: fixed;
  left: 10px;
  bottom: 80px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  z-index: 10002;
  font-family: Arial, sans-serif;
  touch-action: none;

  transition:
    left 0.45s ease-out,
    right 0.45s ease-out,
    top 0.45s ease-out,
    bottom 0.45s ease-out,
    opacity 0.3s ease,
    transform 0.3s ease;
}



/* Cuando la burbuja se pega al lado derecho cambiamos el flujo:
   avatar contra el borde y globo hacia el centro */
.copito-bubble-wrapper.copito-right {
  flex-direction: row-reverse;
}

/* Ajustar la “flechita” del globo cuando está a la derecha */
.copito-bubble-wrapper.copito-right .copito-message::before {
  left: auto;
  right: -6px;
  border-color: transparent transparent transparent #1d4ed8;
}



/* Estados de visibilidad */
.copo-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}

.copo-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Avatar redondo de Copito */
.copito-avatar {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  cursor: pointer;
}

.copito-avatar img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

/* Badge rojo con "1" */
.copito-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ff3b30;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #0A1931; /* borde para separarse del fondo */
}

/* Globito de mensaje "Hola" */
.copito-message {
  background: #1d4ed8;  /* azul tipo botón */
  color: #fff;
  font-size: 0.85rem;
  padding: 8px 12px;
  border-radius: 14px;
  max-width: 180px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  cursor: pointer;
  position: relative;
}

/* Flechita del globito */
.copito-message::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent #1d4ed8 transparent transparent;
}

/* Ajustes ligeros en pantallas muy pequeñas */
@media (max-width: 480px) {
  .copito-bubble-wrapper {
    left: 8px;
    bottom: 75px;
  }
}



/* Ocultar SOLO el globito de mensaje (el azul) */
.copito-message.copo-message-hidden {
  display: none;
}

/* Ocultar SOLO el badge rojo de notificación */
.copito-badge.copo-badge-hidden {
  display: none;
}

/* Quitar recuadro azul / selección rara SOLO en Copito */
.copito-bubble-wrapper,
.copito-avatar,
.copito-message {
  outline: none;                       /* sin borde azul para Copito */
  user-select: none;                   /* que no se seleccione texto ahí */
  -webkit-tap-highlight-color: transparent; /* sin highlight solo en Copito */
}


/* Zona inferior para “guardar” a Copito (círculo con X) */
.copito-trash {
  position: fixed;
  left: 50%;
  bottom: 70px;                     /* un poco por encima de la bottom-nav */
  transform: translate(-50%, 20px); /* sale desde abajo */
  opacity: 0;
  pointer-events: none;             /* no recibe clics, solo es objetivo visual */
  z-index: 10001;                   /* debajo de Copito, encima de la barra */
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.copito-trash-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.copito-trash-inner {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  border: 2px solid rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: bold;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

/* Cuando Copito está encima, se ilumina la X */
.copito-trash.copito-trash-active .copito-trash-inner {
  background: rgba(220, 38, 38, 0.95);        /* rojo fuerte */
  box-shadow: 0 0 0 4px rgba(220, 38, 38, .4);
  transform: scale(1.08);
}