@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');





/* ====== ESTILO GLOBAL (CORREGIDO) ====== */

/* 1. Quitamos la fuente del selector global para no romper los iconos */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 2. Aplicamos Montserrat SOLO a los elementos de texto y formularios */
body, h1, h2, h3, h4, h5, h6, p, a, span, label, li, 
input, button, select, textarea {
    font-family: "Montserrat", sans-serif !important;
}

/* 3. Protección extra para los iconos (asegura que usen su propia fuente) */
i, [class*="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome", sans-serif !important;
}

body {
  min-height: 100vh;
  background: url("imagenes/fondoinicio.jpg") no-repeat center center fixed;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow-x: hidden;
}



/* Asegura que todo el contenido quede por encima del fondo */
section,
header,
.wrap,
.welcome-text,
.footer-text {
  position: relative;
  z-index: 1;
}



/* ====== CONTENEDOR ====== */
.wrap {
  width: 100%;
  max-width: 620px;
  /* antes 420px — más ancho */
  background: rgba(5, 15, 10, 0.75);
  border: 1px solid rgba(0, 255, 132, 0.15);
  border-radius: 16px;
  padding: 40px 50px;
  box-shadow: 0 0 25px rgba(0, 255, 106, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: 0.3s;
  margin-top: 120px;
  /* baja el formulario */
}

.wrap:hover {
  box-shadow: 0 0 35px rgba(0, 255, 106, 0.4);
}


h2 {
  text-align: center;
  color: #fff;
  font-size: 26px;
  margin-bottom: 10px;
  font-weight: 700;
}

p.muted {
  text-align: center;
  color: #c5f2df;
  opacity: 0.85;
  margin-bottom: 20px;
}

/* ====== FORMULARIOS ====== */
form {
  display: none;
}

form.active {
  display: block;
}

label {
  color: #fff;
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}

input {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: 8px;
  border: 1px solid #274f3f;
  background: #0e2019;
  color: #e6fff2;
  outline: none;
}

input::placeholder {
  color: #e8fff6;
  opacity: 1;
}

input:focus {
  border-color: #3cd983;
  box-shadow: 0 0 0 2px rgba(60, 217, 131, 0.15) inset;
}

button {
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #20a35a, #138a49);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: all 0.2s ease;
}

button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}

/* ====== MENSAJE DE ALERTA ====== */
#alert {
  display: none;
  margin: 12px 0 16px;
  padding: 10px 12px;
  border-radius: 8px;
  font-weight: 600;
}

#alert.ok {
  background: rgba(0, 255, 106, 0.1);
  border: 1px solid rgba(0, 255, 106, 0.5);
  color: #b7ffce;
  font-weight: 600;
  text-align: center;
  display: block;
}

#alert.err {
  background: rgba(255, 75, 75, 0.1);
  border: 1px solid rgba(255, 75, 75, 0.5);
  color: #ffbfbf;
  font-weight: 600;
  text-align: center;
  display: block;
}


/* ====== LINKS ====== */
.toggle {
  text-align: center;
  margin-top: 14px;
}

.toggle a {
  color: #7de0ab;
  text-decoration: none;
  font-weight: 500;
}

.toggle a:hover {
  text-decoration: underline;
}

/* ====== RESPONSIVE ====== */

/* ====== 🔁 RESPONSIVE LOGIN (TODOS LOS TAMAÑOS) ====== */

/* 🖥️ Monitores grandes (Full HD y 4K) */
@media (min-width: 1441px) {
  .wrap {
    max-width: 720px;
    padding: 60px 70px;
  }

  h2 {
    font-size: 32px;
  }

  input,
  button {
    font-size: 17px;
    padding: 14px 18px;
  }
}

/* 💻 Laptops y pantallas medianas (1025px–1440px) */
@media (max-width: 1440px) and (min-width: 1025px) {
  .wrap {
    max-width: 620px;
    padding: 45px 55px;
  }

  h2 {
    font-size: 28px;
  }

  p.muted {
    font-size: 15px;
  }
}

/* 🧾 Tablets horizontales y pantallas medianas (769px–1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
  body {
    background-attachment: scroll;
  }

  .wrap {
    max-width: 500px;
    padding: 35px 40px;
  }

  h2 {
    font-size: 24px;
  }

  p.muted {
    font-size: 14px;
  }

  input,
  button {
    font-size: 15px;
    padding: 10px 14px;
  }
}

/* 📱 Tablets verticales y teléfonos grandes (481px–768px) */
@media (max-width: 768px) and (min-width: 481px) {
  body {
    justify-content: flex-start;
    padding-top: 60px;
    background-attachment: scroll;
  }

  .wrap {
    width: 85%;
    max-width: 400px;
    padding: 28px 22px;
    margin: 0 auto;
  }

  h2 {
    font-size: 22px;
  }

  p.muted {
    font-size: 14px;
  }

  input,
  button {
    font-size: 14px;
    padding: 10px 12px;
  }

  .toggle {
    font-size: 13px;
  }
}

/* 📲 Teléfonos pequeños (hasta 480px, iPhone SE, Galaxy Mini, etc.) */
@media (max-width: 480px) {
  body {
    background-attachment: scroll;
    justify-content: flex-start;
    padding-top: 40px;
  }

  .wrap {
    width: 90%;
    max-width: 340px;
    margin: 30px auto;
    padding: 20px 18px;
  }

  h2 {
    font-size: 20px;
  }

  p.muted {
    font-size: 13px;
  }

  input,
  button {
    font-size: 13px;
    padding: 9px 10px;
  }

  .toggle {
    font-size: 13px;
  }
}

/* 📞 Teléfonos extra pequeños (menos de 360px) */
@media (max-width: 360px) {
  .wrap {
    width: 95%;
    padding: 15px 14px;
  }

  h2 {
    font-size: 18px;
  }

  input,
  button {
    font-size: 12px;
  }
}


/*
  .topbar {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 60px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 40px;
    border: 2px solid #1aff6c;
    box-shadow: 0 0 15px #00ff6a70;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }

  .logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .logo {
    height: 45px;
    filter: drop-shadow(0 0 6px #00ff6a80);
  }
  */

/* ====== TEXTO PRINCIPAL ======
  .welcome-text {
    color: #ffffff;
    text-align: center;
    font-size: 38px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-top: 120px; 
    margin-bottom: 25px;
    text-shadow: 0 0 12px #00ff6a60;
  }*/

/* ====== TEXTO INFERIOR ======
  .footer-text {
    text-align: center;
    color: #b3f5d2;
    font-size: 15px;
    font-weight: 400;
    margin-top: 25px;
    opacity: 0.9;
  } */


/* ====== CAMPOS CON ICONOS PROFESIONALES ====== */
.input-box {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.input-box .icon {
  position: absolute;
  left: 14px;
  color: #ffffff;
  font-size: 18px;
  pointer-events: none;
  transition: 0.2s;
}

.input-box input {
  width: 100%;
  padding: 12px 14px 12px 42px;
  /* más espacio para el icono */
  border-radius: 8px;
  border: 1px solid #274f3f;
  background: #0e2019;
  color: #e6fff2;
  font-size: 15px;
  outline: none;
  transition: all 0.3s ease;
}

.input-box input::placeholder {
  color: #c8e8d3;
  opacity: 0.9;
}

.input-box input:focus {
  border-color: #45e189;
  box-shadow: 0 0 0 2px rgba(69, 225, 137, 0.25) inset;
}

.input-box input:focus+.icon,
.input-box .icon.active {
  color: #00ff95;
}

/* ====== BOTÓN CON ICONO ====== */
button {
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(180deg, #20a35a, #138a49);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
}


.user-info {
  position: fixed;
  top: 20px;
  right: 25px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 8px 15px;
  border-radius: 20px;
  font-family: 'Segoe UI', sans-serif;
  font-size: 14px;
  z-index: 1000;
}

.user-info i {
  font-size: 18px;
  color: #7de0ab;
  /* verde del tema */
}

.user-info span {
  font-weight: 500;
}


.logout-btn {
  background: none;
  border: none;
  color: #ff5555;
  cursor: pointer;
  font-size: 16px;
  transition: color 0.2s;
}

.logout-btn:hover {
  color: #ff7777;
}


/* Para Visorintegral*/


/* ===== VISOR INTEGRAL ===== */
body.visor-page {
  min-height: 100vh;
  height: auto;
  color: white;
  background-image: url('imagenes/ProaBienvenida.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  font-family: 'Segoe UI', sans-serif;
  overflow-x: hidden;
  overflow-y: auto;
  padding-top: 150px;
  /* mantiene separación superior */
}



/* ===== BARRA SUPERIOR ===== */
.topbar {
  position: fixed;
  top: 70px;
  /* antes era 30px, bajamos la barra */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.85);
  border: 2px solid #a8ffc9;
  /* verde-blanco suave */
  box-shadow: 0 0 12px #a8ffc9, 0 0 24px rgba(168, 255, 201, 0.4);
  border-radius: 50px;
  width: 80%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  animation: glowPulse 10s ease-in-out infinite;
}


/* Suavizamos el resplandor verde-blanco */
@keyframes glowPulse {
  0% {
    box-shadow: 0 0 1px #a8ffc9, 0 0 20px rgba(168, 255, 201, 0.4);
  }

  30% {
    box-shadow: 0 0 2px #caffdd, 0 0 30px rgba(168, 255, 201, 0.6);
  }

  40% {
    box-shadow: 0 0 1px #a8ffc9, 0 0 20px rgba(168, 255, 201, 0.4);
  }
}

.topbar img {
  height: 65px;
  transition: transform 0.3s ease;
}

/* 🔥 Esta regla tiene más prioridad */
.topbar .logo-progan {
  height: 38px !important;
  /* Fuerza el tamaño solo de este logo */
}

.topbar img:hover {
  transform: scale(1.05);
}

/* ====== 🔁 RESPONSIVE VISOR INTEGRAL ====== */

/* ===== TÍTULO PRINCIPAL ===== */
.welcome-title {
  font-size: 60px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-top: 5px;
  /* antes 140px → lo subimos */
  color: #ffffff;
}

.welcome-title b {
  font-style: normal; /* 👈 CORRECCIÓN: Quita la cursiva (italic) */
  font-weight: 600;   /* Mismo grosor que el resto del título */
  color: #ffffff;     
}


/* ===== TEXTO SECUNDARIO ===== */
.welcome-subtext {
  font-size: 16px;
  margin-top: 20px;
  color: #ffffff;
  max-width: 600px;
  line-height: 1.6;
}


.texto {
  font-size: 28px;
  margin-top: 20px;
  color: #ffffff;
  max-width: 600px;
  line-height: 1.6;
}

/* ===== PAGINA EMPRESAS ===== */
.topbar {
  background: linear-gradient(to right, #0d1304, #0d1304);
  padding: 8px;
  border-radius: 40px;
}

.logo-texto {
  border-radius: 0px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.texto-principal {
  color: white;
  font-weight: 900;
  font-size: 28px;
  margin-right: 15px;
}

.separador {
  color: white;
  font-size: 28px;
  margin-right: 15px;
}

.logo {
  height: 45px;
  /* ajusta según el tamaño de tu logo */
  object-fit: contain;
}

.texto-superpuesto {
  position: absolute;
  top: 40%;
  /* ajusta verticalmente según tu diseño */
  right: 30%;
  /* ajusta horizontalmente */
  width: 25%;
  /* ancho del cuadro de texto */
  color: #111;
  font-family: "Poppins", Arial, sans-serif;
  z-index: 10;
  /* asegúrate que esté por encima de las imágenes */
}

.texto-superpuesto p {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.0em;
}

.texto-superpuesto .linea1 {
  font-weight: 400;
}

.texto-superpuesto .linea2 {
  font-weight: 700;
  font-style: italic;
  margin: 5px 0;
}

.texto-superpuesto .linea3 {
  font-weight: 400;
}

@media (max-width: 1024px) {
  .texto-superpuesto {
    top: 25%;
    right: 8%;
    width: 60%;
  }

  .texto-superpuesto p {
    font-size: 1.1rem;
  }
}

/* Sección principal con imagen de fondo */
.portada {
  background: linear-gradient(to right, #6dc42a, #d2ce2f);
  /* verde degradado */
  background-image: url('imagenes/portadaCamiones.png');
  /* cambia por tu imagen */
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  height: 350px;
  /* ajusta a la altura que necesites */
  padding: 40px;
  position: relative;
}

/* Contenedor del texto */
.overlay-texto {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 600px;
  /* controla el ancho del bloque de texto */
  margin-top: 80px;
}

/* Línea vertical blanca */
.linea-vertical {
  width: 4px;
  background-color: white;
  margin-right: 15px;
}

/* Estilos de texto */
.texto-portada {
  color: white;
  font-family: 'Arial', sans-serif;
  /* o Roboto, Open Sans si usas Google Fonts */
  text-align: left;
  line-height: 1.0;
}

.linea-1 {
  font-size: 20px;
  margin-bottom: 5px;
}

.linea-2 {
  font-size: 24px;
  font-weight: bold;
  font-style: italic;
  margin-bottom: 5px;
}

.linea-3 {
  font-size: 20px;
}

/* ===== USUARIO ACTIVO ===== */
.user-info {
  position: fixed;
  top: 20px;
  right: 30px;
  background: rgba(0, 0, 0, 0.6);
  padding: 8px 15px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #fff;
  box-shadow: 0 0 10px rgba(0, 255, 132, 0.4);
}

.user-info i {
  color: #00ff84;
}

.logout-btn {
  color: #ff6666;
  margin-left: 8px;
  text-decoration: none;
  font-size: 16px;
  transition: color 0.3s ease;
}

.logout-btn:hover {
  color: #ff0000;
}

/* ===== PIE DE PÁGINA ===== */


/* ===== FILA DE BOTONES CIRCULARES ===== */
.button-row {
  margin-top: 20px;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  /* separación entre imágenes */
  flex-wrap: nowrap;
}

/* ===== FILA DE BOTONES CIRCULARES PAGINA EMPRESAS ===== */
.menu-circular {
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: nowrap;
  margin-top: -155px;
  /* 👈 sube el bloque */
}


/* ===== IMÁGENES SIN BORDE ===== */
.img-circle {
  display: inline-block;
  width: 250px;
  /* tamaño total */
  height: 250px;
  border-radius: 50%;
  /* mantiene forma redonda */
  overflow: hidden;
  background: transparent;
  border: none;
  /* sin borde */
  box-shadow: none;
  /* sin brillo por defecto */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Imagen ocupa TODO el círculo */
.img-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  transition: transform 0.3s ease;
  /* animación de zoom */
}

/* Aumenta solo la imagen */
.img-circle img:hover {
  transform: scale(1.08);
}

/* El brillo se aplica al contenedor al pasar el cursor */
.img-circle:hover {
  box-shadow: 0 0 25px rgba(0, 255, 132, 0.6);
  /* resplandor verde neón */
}


/* Texto debajo */
/*.button-item p {
    margin-top: 12px;      
    font-size: 18px;
    font-weight: 500;
    color: white;           
  }*/


/* ===== BOTÓN VOLVER (corrige color verde) ===== */
/* === BOTÓN VOLVER PROFESIONAL === */
.btn-volver {
  position: absolute;
  /* 👈 CAMBIO: de fixed a absolute */
  top: 20px;
  left: 30px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 8px;

  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  padding: 8px 18px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;

  box-shadow: 0 0 10px rgba(0, 255, 132, 0.4);
  border: 1px solid rgba(0, 255, 132, 0.3);

  transition: all 0.3s ease;
}

/* Icono */
.btn-volver i {
  color: #00ff84;
  font-size: 15px;
}

/* Efecto hover */
.btn-volver:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(0, 255, 132, 0.6);
  border-color: rgba(0, 255, 132, 0.5);
}



/* ===== PROGAN ===== */
body.progan {
  height: 100vh;
  /* altura igual al alto visible de la pantalla */
  width: 100%;
  color: white;
  background-image: url('imagenes/fondoproa2.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
  /* mantiene la imagen fija */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  font-family: 'Segoe UI', sans-serif;
  overflow-y: auto;
  /* Permite scroll vertical */
  overflow-x: hidden;
  /* Solo oculta el scroll horizontal */
  /* 👈 elimina scroll horizontal y vertical */
  padding-left: 100px;
  /* separa del borde izquierdo */
  margin: 0;
  /* elimina márgenes del body */
}


.contenedor {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 60px;
}

.bloque {
  position: relative;
  width: 1200px;
  height: 520px;
  /* 🔥 ajusta la altura general del bloque */
}

/* === Recuadro verde detrás === */
.recuadro-texto {
  position: absolute;
  top: 50%;
  left: 35%;
  transform: translate(-37%, -30%);

  /* 💎 Fondo translúcido con brillo */
  background: linear-gradient(145deg,
      rgba(210, 230, 140, 0.25) 0%,
      /* tono verde amarillento claro */
      rgba(70, 100, 55, 0.35) 100%
      /* verde más oscuro translúcido */
    );

  border: 2px solid rgba(0, 100, 50, 0.8);
  border-radius: 18px;
  padding: 40px 60px;
  color: black;
  width: 1015px;
  height: 234px;

  /* 🌫 efecto vidrio y brillo */
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);

  /* 🌟 Sombra + brillo interno */
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.25),
    inset 0 1px 25px rgba(255, 255, 255, 0.1);

  z-index: 1;
  transition: all 0.3s ease;
}

/* opcional: realce al pasar el mouse */
.recuadro-texto:hover {
  background: linear-gradient(145deg,
      rgba(220, 240, 160, 0.3) 0%,
      rgba(60, 90, 50, 0.4) 100%);
  box-shadow:
    0 6px 25px rgba(0, 0, 0, 0.3),
    inset 0 1px 28px rgba(255, 255, 255, 0.15);
}

.recuadro-texto::before {
  content: "";
  position: absolute;
  left: 413px;
  top: 73px;
  width: 2px;
  height: 80px;
  background-color: rgba(0, 0, 0, 0.85);
  border-radius: 2px;
}

/* === Imagen encima === */
.imagen-animales {
  position: absolute;
  top: 51%;
  left: 0;
  transform: translate(-15%, -40%) rotateY(0deg);
  width: 470px;
  height: auto;
  z-index: 2;
  transform-style: preserve-3d;
  transition: transform 0.5s ease-in-out;
}

/* 🔁 Animación de balanceo al pasar el mouse */
.imagen-animales:hover {
  animation: rotar-lados 2s ease-in-out infinite alternate;
}

@keyframes rotar-lados {
  0% {
    transform: translate(-15%, -40%) rotateY(0deg);
  }

  50% {
    transform: translate(-15%, -40%) rotateY(25deg);
    /* gira a la derecha */
  }

  100% {
    transform: translate(-15%, -40%) rotateY(-20deg);
    /* gira a la izquierda */
  }
}

/* === Contenedor del texto === */
.recuadro-texto {
  padding-left: 430px;
  /* mueve todo el bloque hacia la derecha */
  padding-top: 70px;
  /* 👈 mueve TODO el bloque hacia abajo */
  position: relative;
}

/* === Texto dentro del recuadro === */
.recuadro-texto p {
  margin: 0;
  /* elimina espacios verticales extra */
  line-height: 1;
  /* compacta las líneas */
}

.linea1 {
  font-size: 18px;
}

.linea2 {
  font-size: 26px;
  font-weight: bold;
}

.linea3 {
  font-size: 20px;
}

.linea4 {
  font-size: 20px;
}







/* ===== CARGAPRO ===== */
body.cargapro {
  min-height: 100vh;
  width: 100%;
  color: white;
  background-image: url('imagenes/fondocargapro.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: scroll;
  /* 👈 importante */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 👈 alinea el contenido a la izquierda */
  justify-content: flex-start;
  text-align: left;
  /* 👈 justifica el texto a la izquierda */
  font-family: 'Segoe UI', sans-serif;
  overflow-x: hidden;
  overflow-y: auto;
  padding-left: 100px;
  /* opcional para separarlo del borde */
}

/* === Línea vertical blanca === */
body.cargapro::before {
  content: "";
  position: absolute;
  left: 140px;
  /* 👈 distancia desde el borde izquierdo */
  top: 190px;
  /* 👈 posición vertical (ajústalo a tu gusto) */
  width: 2px;
  /* grosor de la línea */
  height: 80px;
  /* largo de la línea */
  background-color: white;
  border-radius: 2px;
  opacity: 0.9;
  /* un poco translúcida */
}






/* ===== G4 ===== */
body.g4 {
  min-height: 100vh;
  width: 100%;
  color: white;
  background-image: url('imagenes/fondog4.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: scroll;
  /* 👈 importante */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 👈 alinea el contenido a la izquierda */
  justify-content: flex-start;
  text-align: left;
  /* 👈 justifica el texto a la izquierda */
  font-family: 'Segoe UI', sans-serif;
  overflow-x: hidden;
  overflow-y: auto;
  padding-left: 100px;
  /* opcional para separarlo del borde */
}


/* === Línea vertical blanca === */
body.g4::before {
  content: "";
  position: absolute;
  left: 140px;
  /* 👈 distancia desde el borde izquierdo */
  top: 190px;
  /* 👈 posición vertical (ajústalo a tu gusto) */
  width: 2px;
  /* grosor de la línea */
  height: 80px;
  /* largo de la línea */
  background-color: white;
  border-radius: 2px;
  opacity: 0.9;
  /* un poco translúcida */
}




/* ===== CI ===== */
body.ci {
  min-height: 100vh;
  width: 100%;
  color: white;
  background-image: url('imagenes/fondoci.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: scroll;
  /* 👈 importante */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 👈 alinea el contenido a la izquierda */
  justify-content: flex-start;
  text-align: left;
  /* 👈 justifica el texto a la izquierda */
  font-family: 'Segoe UI', sans-serif;
  overflow-x: hidden;
  overflow-y: auto;
  padding-left: 100px;
  /* opcional para separarlo del borde */


  /* === Recuadro marron detrás === */

  /* 📌 Línea vertical */
  .recuadro-textoci {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);

    background: rgba(90, 60, 30, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 30px 50px;
    color: white;
    width: 650px;
    height: 200px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.25);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 20px;
  }

  /* 📌 Línea vertical */
  .recuadro-textoci::before {
    content: "";
    display: block;
    width: 2px;
    height: 70px;
    background-color: white;
    opacity: 0.8;
    border-radius: 2px;

    position: absolute;
    top: 50%;
    left: 160px;
    transform: translateY(-50%);
  }

  /* ✍️ Estilo del texto */
  .recuadro-textoci p {
    color: white;
    font-family: 'Arial', sans-serif;
    text-align: left;
    line-height: 0.8;

    /* 👇 Mueve el texto hacia la derecha */
    padding-left: 130px;
    /* o usa margin-left si prefieres */
    /* margin-left: 50px; */
  }

  .recuadro-textoci .linea-1 {
    font-size: 18px;
    font-weight: 400;
  }

  .recuadro-textoci .linea-2 {
    font-size: 25px;
    font-weight: 900;
  }

  .recuadro-textoci .linea-3 {
    font-size: 22px;
    font-weight: 400;
  }



}



body.BI {
  min-height: 100vh;
  width: 100%;
  color: white;
  background-image: url('imagenes/fondobi.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: scroll;
  /* 👈 importante */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  font-family: 'Segoe UI', sans-serif;
  overflow-x: hidden;
  overflow-y: auto;
  /* 👈 permite desplazamiento normal */
}






.contenedor-botones {
  margin-top: 450px;
  /* controla la distancia desde arriba */
  margin-bottom: 10px;
  /* agrega espacio antes del footer */
  display: flex;
  justify-content: center;
  width: 100%;
}

/* ===== MENÚ DE BOTONES ===== */
.menu-botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* ✅ Centra los botones */
  gap: 25px 40px;
  padding: 20px;
  max-width: 10000px;
  position: fixed;
  /* ✅ Siempre visible al final */
  bottom: 80px;
  /* 📌 Ajusta la distancia antes del footer */
  left: 0;
  width: 100%;
  /* ✅ Ocupa todo el ancho */
  z-index: 998;
  /* ✅ Delante de los demás elementos */
}

/* ===== MENÚ DE BOTONES PROGAN (nueva clase) ===== */
.menu-botonesp {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px 40px;
  padding: 20px;
  max-width: 1000px;
  margin-top: -130px;
  margin-bottom: 60px;
  margin-left: auto;
  /* 📌 AGREGA ESTO */
  margin-right: auto;
  /* 📌 AGREGA ESTO */
  position: relative;
  z-index: 998;
}







/* ===== ESTILO DE CADA BOTÓN ===== */
.btn-menu {
  background: rgba(0, 0, 0, 0.9);
  color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 25px;
  padding: 10px 30px;
  font-weight: 700;
  text-decoration: none;
  font-size: 15px;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.btn-menu:hover {
  background: #ffffff;
  color: #000000;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
  transform: translateY(-4px);
}

footer {
  width: 100%;
  padding: 35px 0;
  font-size: 14px;
  text-align: center;
  position: relative;
}

.footer-fixed {
  width: 100%;
  padding: 35px 0;
  font-size: 14px;
  text-align: center;
  position: fixed;
  bottom: 0px;
  left: 0;
  z-index: 999;
  background: transparent;
}


.user-info2 {
  position: fixed;
  /* ya no es fixed */
  top: 20px;
  right: 25px;
  margin-top: 0px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 8px 15px;
  border-radius: 20px;
  font-family: 'Segoe UI', sans-serif;
  font-size: 14px;
  width: fit-content;
  /* ocupa solo el espacio necesario */
  margin-left: auto;
  /* lo mantiene alineado a la derecha */
  margin-right: 25px;
}





/* ======= PÁGINA POWER BI ======= */

body.bi-page {
  min-height: 100vh;
  background: #000;
  /* Fondo oscuro profesional */
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  font-family: 'Segoe UI', sans-serif;
  padding-top: 100px;
}


.bi-container {
  width: 95%;
  max-width: 1400px;
  text-align: center;
}

.bi-title {
  font-size: 28px;
  color: #ffb300;
  /* color dorado similar al de tu ejemplo */
  margin-bottom: 20px;
  letter-spacing: 1px;
  font-weight: 700;
}




/* ======= PÁGINA POWER BI ======= */
body.bi-page {
  min-height: 100vh;
  background: #000;
  /* Fondo oscuro profesional */
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  font-family: 'Segoe UI', sans-serif;
  padding-top: 100px;
}

.bi-container {
  width: 95%;
  max-width: 1400px;
  text-align: center;
}

.bi-title {
  font-size: 28px;
  color: #ffb300;
  /* color dorado similar al de tu ejemplo */
  margin-bottom: 20px;
  letter-spacing: 1px;
  font-weight: 700;
}

.bi-frame-wrapper {
  width: 100%;
  background: #111;
  border: 2px solid #2c2c2c;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.1);
}


body.Gerentes {
  min-height: 100vh;
  margin: 0;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  color: #fff;
  background: url("imagenes/fondoproa2.png") center/cover no-repeat fixed;
  display: flex;
  flex-direction: column;
}

body.Gerentes1 {
  min-height: 100vh;
  margin: 0;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  color: #fff;
  background: url("imagenes/fondocargapro.png") center/cover no-repeat fixed;
  display: flex;
  flex-direction: column;
}

body.Gerentes2 {
  min-height: 100vh;
  margin: 0;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  color: #fff;
  background: url("imagenes/fondog4.png") center/cover no-repeat fixed;
  display: flex;
  flex-direction: column;
}


/* 👇 Fondo negro desde el informe */
.bi-container1 {
  width: 100%;
  background: #000;
  /* 👈 Fondo negro */
  padding: 40px 20px;
  /* 👈 Espaciado interno */
  margin: 0;
  /* 👈 Sin márgenes */
}

.bi-title1 {
  font-size: 28px;
  color: #ffb300;
  margin-bottom: 20px;
  letter-spacing: 1px;
  font-weight: 700;
  text-align: center;
}

.bi-frame-wrapper1 {
  width: 95%;
  max-width: 1400px;
  margin: 0 auto;
  /* 👈 Centra el iframe */
  background: #111;
  border: 2px solid #2c2c2c;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.1);
}


.footerbig {
  width: 100%;
  padding: 20px 0;
  font-size: 14px;
  text-align: center;
  background: #000;
  /* 👈 Fondo negro */
  color: #bfbfbf;
  margin: 0;
  /* 👈 Sin márgenes */
  position: relative;
}


















.volverG {
  position: absolute;
  /* 👈 Cambia de fixed a absolute */
  top: 20px;
  left: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  padding: 8px 18px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 0 10px rgba(0, 255, 132, 0.4);
  border: 1px solid rgba(0, 255, 132, 0.3);
  transition: all 0.3s ease;
  z-index: 1000;
}

/* Icono */
.volverG i {
  color: #00ff84;
  font-size: 15px;
  margin-right: 6px;
}

/* Efecto hover */
.volverG:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(0, 255, 132, 0.6);
  border-color: rgba(0, 255, 132, 0.5);
}

.espaciador {
  height: 600px;
  /*Ajusta el tamaño*/
  width: 100%;
}

/* ====== 🔁 RESPONSIVE VISOR INTEGRAL (NUEVO BLOQUE) ====== */

/* 🖥️ Tablets horizontales y pantallas medianas (769px–1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
  body.visor-page {
    padding-top: 120px;
    /* Reduce padding superior para más espacio */
  }

  .topbar {
    width: 90%;
    /* Ancho más ajustado */
    height: 50px;
    /* Altura menor */
  }

  .topbar img {
    height: 50px;
    /* Logo más pequeño */
  }

  .welcome-title {
    font-size: 48px;
    /* Título más compacto */
    margin-top: 10px;
  }

  .texto {
    font-size: 22px;
    /* Texto principal más pequeño */
    max-width: 500px;
  }

  .button-row {
    gap: 8px;
    /* Menos separación entre botones */
  }

  .img-circle {
    width: 200px;
    /* Botones más pequeños */
    height: 200px;
  }

  .button-item p {
    font-size: 14px;
    /* Etiquetas más pequeñas */
  }

  .welcome-subtext {
    font-size: 14px;
    max-width: 500px;
  }
}

/* 📱 Tablets verticales y móviles grandes (481px–768px) */
@media (max-width: 768px) and (min-width: 481px) {
  body.visor-page {
    padding-top: 100px;
    align-items: center;
    /* Centra todo */
    text-align: center;
  }

  .topbar {
    width: 95%;
    height: 45px;
    top: 60px;
    /* Ajusta posición si es necesario */
  }

  .topbar img {
    height: 40px;
  }

  .welcome-title {
    font-size: 40px;
    margin-top: 5px;
  }

  .texto {
    font-size: 20px;
    max-width: 400px;
    margin: 0 auto;
    /* Centra el texto */
  }

  .button-row {
    flex-wrap: wrap;
    /* Envuelve en 2 filas */
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
  }

  .img-circle {
    width: 150px;
    height: 150px;
  }

  .button-item p {
    font-size: 13px;
    margin-top: 5px;
  }

  .welcome-subtext {
    font-size: 13px;
    max-width: 350px;
    margin: 0 auto;
  }

  footer {
    font-size: 12px;
    padding: 10px;
  }
}

/* 📲 Móviles pequeños (hasta 480px) */
@media (max-width: 480px) {
  body.visor-page {
    padding-top: 80px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .btn-volver {
    top: 10px;
    left: 10px;
    font-size: 12px;
    padding: 6px 12px;
  }

  .user-info {
    top: 10px;
    right: 10px;
    font-size: 12px;
    padding: 6px 10px;
  }

  .topbar {
    width: 100%;
    height: 40px;
    top: 50px;
    border-radius: 20px;
  }

  .topbar img {
    height: 35px;
  }

  .welcome-title {
    font-size: 32px;
    margin-top: 0;
    line-height: 1.2;
  }

  .texto {
    font-size: 16px;
    max-width: 300px;
    margin: 10px auto;
  }

  .button-row {
    flex-direction: column;
    /* Apila en columna */
    align-items: center;
    gap: 20px;
    margin-top: 5px;
  }

  .img-circle {
    width: 120px;
    /* Botones más compactos */
    height: 120px;
  }

  .button-item p {
    font-size: 12px;
    margin-top: 3px;
  }

  .welcome-subtext {
    font-size: 12px;
    max-width: 280px;
    margin: 10px auto 20px;
  }

  footer {
    font-size: 11px;
    padding: 5px;
    margin-top: 20px;
  }
}

/* 📞 Móviles extra pequeños (menos de 360px) */
@media (max-width: 360px) {
  .welcome-title {
    font-size: 28px;
  }

  .texto {
    font-size: 14px;
  }

  .img-circle {
    width: 100px;
    height: 100px;
  }

  .button-item p {
    font-size: 11px;
  }
}

/* ====== 🔁 RESPONSIVE PROGAN DASHBOARD (NUEVO BLOQUE) ====== */

/* 🖥️ Tablets horizontales y pantallas medianas (769px–1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
  body.progan {
    padding-top: 100px;
    /* Reduce padding superior para más espacio */
  }

  .topbar {
    width: 90%;
    /* Ancho más ajustado */
    height: 50px;
    /* Altura menor */
  }

  .topbar .logo {
    height: 40px;
    /* Logo más pequeño */
  }

  .contenedor {
    max-width: 800px;
    /* Contenedor más compacto */
    margin: 20px auto;
  }

  .recuadro-texto {
    font-size: 18px;
    /* Texto del eslogan más pequeño */
  }

  .linea1,
  .linea2,
  .linea3,
  .linea4 {
    font-size: 16px;
  }

  .imagen-animales {
    width: 300px;
    /* Imagen más pequeña */
    height: auto;
  }

  .contenedor-botones {
    padding: 20px;
  }

  .menu-botones {
    gap: 15px;
    /* Menos separación entre botones */
  }

  .btn-menu {
    padding: 12px 20px;
    /* Botones más compactos */
    font-size: 16px;
  }

  .user-info2 {
    font-size: 14px;
  }
}

/* 📱 Tablets verticales y móviles grandes (481px–768px) */
@media (max-width: 768px) and (min-width: 481px) {
  body.progan {
    padding-top: 80px;
    align-items: center;
    /* Centra todo */
    text-align: center;
  }

  .topbar {
    width: 95%;
    height: 45px;
    top: 50px;
    /* Ajusta posición si es necesario */
  }

  .topbar .logo {
    height: 35px;
  }

  .contenedor {
    max-width: 90%;
    margin: 15px auto;
  }

  .recuadro-texto {
    font-size: 16px;
    max-width: 400px;
    margin: 0 auto;
    /* Centra el texto */
  }

  .linea1,
  .linea2,
  .linea3,
  .linea4 {
    font-size: 14px;
  }

  .imagen-animales {
    width: 250px;
    height: auto;
    margin: 10px auto;
  }

  .contenedor-botones {
    padding: 15px;
  }

  .menu-botones {
    flex-direction: column;
    /* Apila botones en columna */
    gap: 10px;
    align-items: center;
  }

  .btn-menu {
    width: 80%;
    padding: 10px;
    font-size: 14px;
  }

  .user-info2 {
    font-size: 13px;
    top: 50px;
    right: 10px;
  }

  .btn-volver {
    top: 50px;
    left: 10px;
    font-size: 13px;
  }

  footer {
    font-size: 12px;
    padding: 10px;
  }
}

/* 📲 Móviles pequeños (hasta 480px) */
@media (max-width: 480px) {
  body.progan {
    padding-top: 60px;
    padding-left: 5px;
    padding-right: 5px;
  }

  .btn-volver {
    top: 10px;
    left: 10px;
    font-size: 12px;
    padding: 6px 12px;
  }

  .user-info2 {
    top: 10px;
    right: 10px;
    font-size: 12px;
    padding: 6px 10px;
  }

  .topbar {
    width: 100%;
    height: 40px;
    top: 40px;
    border-radius: 15px;
  }

  .topbar .logo {
    height: 30px;
  }

  .logo-texto .texto-principal {
    font-size: 18px;
  }

  .contenedor {
    max-width: 100%;
    margin: 10px auto;
  }

  .recuadro-texto {
    font-size: 14px;
    max-width: 300px;
    margin: 10px auto;
  }

  .linea1,
  .linea2,
  .linea3,
  .linea4 {
    font-size: 13px;
    line-height: 1.3;
  }

  .imagen-animales {
    width: 200px;
    height: auto;
  }

  .contenedor-botones {
    padding: 10px;
    margin-top: 10px;
  }

  .menu-botones {
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }

  .btn-menu {
    width: 90%;
    padding: 8px;
    font-size: 13px;
  }

  footer {
    font-size: 11px;
    padding: 5px;
    margin-top: 15px;
  }
}

/* 📞 Móviles extra pequeños (menos de 360px) */
@media (max-width: 360px) {
  .recuadro-texto {
    font-size: 13px;
  }

  .linea1,
  .linea2,
  .linea3,
  .linea4 {
    font-size: 12px;
  }

  .imagen-animales {
    width: 150px;
  }

  .btn-menu {
    font-size: 12px;
    padding: 6px;
  }

  .logo-texto .texto-principal {
    font-size: 16px;
  }
}

/* ===== TOPBAR ESPECÍFICO PARA PROGAN ===== */
.topbar-progan {
  position: absolute !important;
  /* Cambia de fixed a absolute */
  top: 80px !important;
  /* Ajusta la posición según necesites */
}

/* ===== USER-INFO2 ESPECÍFICO PARA PROGAN ===== */
.user-info2-progan {
  position: absolute !important;
  /* Cambia de fixed a absolute */
  top: 20px !important;
}

/* ===== TOPBAR ESPECÍFICO PARA VISOR INTEGRAL ===== */
.topbar-visor {
  position: absolute !important;
  /* Se mantiene fijo */
  top: 45px !important;
  /* Ajusta según necesites */
}

/* ===== USER-INFO ESPECÍFICO PARA VISOR INTEGRAL ===== */
.user-info-visor {
  position: absolute !important;
  /* Se mantiene fijo */
  top: 20px !important;
  right: 25px !important;
}

/* ===== MENÚ HAMBURGUESA EN TOPBAR PROGAN ===== */
.menu-hamburguesa {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
}

.btn-hamburguesa {
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 24px;
  cursor: pointer;
  padding: 8px 12px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-hamburguesa:hover {
  color: #00ff84;
  transform: scale(1.1);
}

/* Menú desplegable */
.menu-desplegable {
  position: absolute;
  top: 50px;
  right: 0;
  background: rgba(0, 0, 0, 0.95);
  border: 2px solid rgba(0, 255, 132, 0.3);
  border-radius: 12px;
  min-width: 220px;
  box-shadow: 0 4px 20px rgba(0, 255, 132, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 2000;
}

.menu-desplegable.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.menu-desplegable a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  color: #ffffff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.menu-desplegable a:last-child {
  border-bottom: none;
}

.menu-desplegable a:hover {
  background: rgba(0, 255, 132, 0.15);
  color: #00ff84;
  padding-left: 25px;
}

.menu-desplegable a i {
  color: #00ff84;
  font-size: 18px;
  width: 20px;
}

/* === BEGIN AUTO-RESPONSIVE MATRIX === */

/* =====================================================================
   🔧 RESPONSIVE MATRIX (Auto-generated)
   - Adds a root scale variable (--S) and overrides key components
     using calc() so sizes adapt across 50 breakpoints.
   - Default scale = 1; media queries progressively reduce it.
   ===================================================================== */

:root {
  --S: 1;
}

/* === Scalable overrides tied to --S ================================ */
.wrap {
  max-width: calc(620px * var(--S));
  padding: calc(40px * var(--S)) calc(50px * var(--S));
}

h2 {
  font-size: calc(26px * var(--S));
}

p.muted {
  font-size: calc(14px * var(--S));
}

.input-box input,
input {
  padding: calc(12px * var(--S)) calc(14px * var(--S));
  font-size: calc(15px * var(--S));
}

button {
  padding: calc(12px * var(--S)) calc(16px * var(--S));
  font-size: calc(15px * var(--S));
  border-radius: calc(10px * var(--S));
}

.topbar {
  height: calc(60px * var(--S));
  border-radius: calc(50px * var(--S));
  width: min(90%, calc(1200px * var(--S)));
}

.topbar img {
  height: calc(45px * var(--S));
}

.welcome-title {
  font-size: calc(60px * var(--S));
}

.welcome-subtext {
  font-size: calc(16px * var(--S));
}

.texto {
  font-size: calc(28px * var(--S));
}

.img-circle {
  width: calc(250px * var(--S));
  height: calc(250px * var(--S));
}

.recuadro-texto {
  padding: calc(40px * var(--S)) calc(60px * var(--S));
  width: calc(1015px * var(--S));
  height: calc(234px * var(--S));
  border-radius: calc(18px * var(--S));
}

.imagen-animales {
  width: calc(470px * var(--S));
}

.menu-botones .btn-menu,
.menu-botonesp .btn-menu,
.btn-menu {
  padding: calc(10px * var(--S)) calc(30px * var(--S));
  font-size: calc(15px * var(--S));
  border-radius: calc(25px * var(--S));
}

.user-info,
.user-info2 {
  font-size: calc(14px * var(--S));
  padding: calc(8px * var(--S)) calc(15px * var(--S));
  border-radius: calc(20px * var(--S));
}

.btn-volver,
.volverG {
  padding: calc(8px * var(--S)) calc(18px * var(--S));
  font-size: calc(14px * var(--S));
  border-radius: calc(25px * var(--S));
}

.footer-fixed,
footer {
  font-size: calc(14px * var(--S));
  padding: calc(20px * var(--S)) 0;
}

.bi-title,
.bi-title1 {
  font-size: calc(28px * var(--S));
}

.bi-frame-wrapper,
.bi-frame-wrapper1 {
  border-radius: calc(10px * var(--S));
  border-width: calc(2px * var(--S));
  box-shadow: 0 0 calc(25px * var(--S)) rgba(255, 255, 255, 0.1);
}

.linea1 {
  font-size: calc(18px * var(--S));
}

.linea2 {
  font-size: calc(26px * var(--S));
}

.linea3 {
  font-size: calc(20px * var(--S));
}

.linea4 {
  font-size: calc(20px * var(--S));
}

.img-circle img {
  border-radius: 50%;
}

/* === Ajuste específico: alineación del texto en PROGAN === */
body.progan .recuadro-texto {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* ✅ alinea todo a la derecha */
  text-align: right;
  /* ✅ texto hacia la derecha */
  padding-right: 80px;
  /* ajusta la separación interna */
}

body.progan .recuadro-texto::before {
  /* Mueve la línea vertical al lado derecho */
  left: auto;
  right: 60px;
}

body.progan .recuadro-texto p {
  text-align: right;
  margin: 0;
}

body.progan .linea1,
body.progan .linea2,
body.progan .linea3,
body.progan .linea4 {
  text-align: right;
}

/* === PROGAN: línea vertical a la derecha, centrada y con separación correcta === */

body.progan .recuadro-texto {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* texto a la derecha */
  text-align: right;
  padding-right: 120px;
  padding-left: 90px;
  /* espacio para la línea izquierda */
}

body.progan .recuadro-texto::before {
  content: "";
  position: absolute;
  left: 480px;
  /* ✅ vuelve al lado izquierdo */
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 120px;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 2px;
  z-index: 0;
}

body.progan .recuadro-texto p {
  position: relative;
  z-index: 1;
  text-align: right;
}

/* 📱 Ajustes para pantallas más pequeñas */
@media (max-width: 768px) {
  body.progan .recuadro-texto {
    padding-right: 90px;
    padding-left: 70px;
  }

  body.progan .recuadro-texto::before {
    left: 45px;
    height: 90px;
  }
}

@media (max-width: 480px) {
  body.progan .recuadro-texto {
    padding-right: 70px;
    padding-left: 55px;
  }

  body.progan .recuadro-texto::before {
    left: 35px;
    height: 80px;
  }
}

/* =====================================================================
   200 MEDIA QUERIES (AUTO-GENERATED)
   - From 1920px down to 320px, linear scale from 1.00 to 0.70
   ===================================================================== */

@media (max-width: 1920px) {
  :root {
    --S: 1.0;
  }
}

@media (max-width: 1912px) {
  :root {
    --S: 0.9985;
  }
}

@media (max-width: 1904px) {
  :root {
    --S: 0.997;
  }
}

@media (max-width: 1896px) {
  :root {
    --S: 0.9955;
  }
}

@media (max-width: 1888px) {
  :root {
    --S: 0.994;
  }
}

@media (max-width: 1880px) {
  :root {
    --S: 0.9925;
  }
}

@media (max-width: 1872px) {
  :root {
    --S: 0.991;
  }
}

@media (max-width: 1864px) {
  :root {
    --S: 0.9894;
  }
}

@media (max-width: 1856px) {
  :root {
    --S: 0.9879;
  }
}

@media (max-width: 1848px) {
  :root {
    --S: 0.9864;
  }
}

@media (max-width: 1840px) {
  :root {
    --S: 0.9849;
  }
}

@media (max-width: 1832px) {
  :root {
    --S: 0.9834;
  }
}

@media (max-width: 1824px) {
  :root {
    --S: 0.9819;
  }
}

@media (max-width: 1815px) {
  :root {
    --S: 0.9804;
  }
}

@media (max-width: 1807px) {
  :root {
    --S: 0.9789;
  }
}

@media (max-width: 1799px) {
  :root {
    --S: 0.9774;
  }
}

@media (max-width: 1791px) {
  :root {
    --S: 0.9759;
  }
}

@media (max-width: 1783px) {
  :root {
    --S: 0.9744;
  }
}

@media (max-width: 1775px) {
  :root {
    --S: 0.9729;
  }
}

@media (max-width: 1767px) {
  :root {
    --S: 0.9714;
  }
}

@media (max-width: 1759px) {
  :root {
    --S: 0.9698;
  }
}

@media (max-width: 1751px) {
  :root {
    --S: 0.9683;
  }
}

@media (max-width: 1743px) {
  :root {
    --S: 0.9668;
  }
}

@media (max-width: 1735px) {
  :root {
    --S: 0.9653;
  }
}

@media (max-width: 1727px) {
  :root {
    --S: 0.9638;
  }
}

@media (max-width: 1719px) {
  :root {
    --S: 0.9623;
  }
}

@media (max-width: 1711px) {
  :root {
    --S: 0.9608;
  }
}

@media (max-width: 1703px) {
  :root {
    --S: 0.9593;
  }
}

@media (max-width: 1695px) {
  :root {
    --S: 0.9578;
  }
}

@media (max-width: 1687px) {
  :root {
    --S: 0.9563;
  }
}

@media (max-width: 1679px) {
  :root {
    --S: 0.9548;
  }
}

@media (max-width: 1671px) {
  :root {
    --S: 0.9533;
  }
}

@media (max-width: 1663px) {
  :root {
    --S: 0.9518;
  }
}

@media (max-width: 1655px) {
  :root {
    --S: 0.9503;
  }
}

@media (max-width: 1647px) {
  :root {
    --S: 0.9487;
  }
}

@media (max-width: 1639px) {
  :root {
    --S: 0.9472;
  }
}

@media (max-width: 1631px) {
  :root {
    --S: 0.9457;
  }
}

@media (max-width: 1623px) {
  :root {
    --S: 0.9442;
  }
}

@media (max-width: 1614px) {
  :root {
    --S: 0.9427;
  }
}

@media (max-width: 1606px) {
  :root {
    --S: 0.9412;
  }
}

@media (max-width: 1598px) {
  :root {
    --S: 0.9397;
  }
}

@media (max-width: 1590px) {
  :root {
    --S: 0.9382;
  }
}

@media (max-width: 1582px) {
  :root {
    --S: 0.9367;
  }
}

@media (max-width: 1574px) {
  :root {
    --S: 0.9352;
  }
}

@media (max-width: 1566px) {
  :root {
    --S: 0.9337;
  }
}

@media (max-width: 1558px) {
  :root {
    --S: 0.9322;
  }
}

@media (max-width: 1550px) {
  :root {
    --S: 0.9307;
  }
}

@media (max-width: 1542px) {
  :root {
    --S: 0.9291;
  }
}

@media (max-width: 1534px) {
  :root {
    --S: 0.9276;
  }
}

@media (max-width: 1526px) {
  :root {
    --S: 0.9261;
  }
}

@media (max-width: 1518px) {
  :root {
    --S: 0.9246;
  }
}

@media (max-width: 1510px) {
  :root {
    --S: 0.9231;
  }
}

@media (max-width: 1502px) {
  :root {
    --S: 0.9216;
  }
}

@media (max-width: 1494px) {
  :root {
    --S: 0.9201;
  }
}

@media (max-width: 1486px) {
  :root {
    --S: 0.9186;
  }
}

@media (max-width: 1478px) {
  :root {
    --S: 0.9171;
  }
}

@media (max-width: 1470px) {
  :root {
    --S: 0.9156;
  }
}

@media (max-width: 1462px) {
  :root {
    --S: 0.9141;
  }
}

@media (max-width: 1454px) {
  :root {
    --S: 0.9126;
  }
}

@media (max-width: 1446px) {
  :root {
    --S: 0.9111;
  }
}

@media (max-width: 1438px) {
  :root {
    --S: 0.9095;
  }
}

@media (max-width: 1430px) {
  :root {
    --S: 0.908;
  }
}

@media (max-width: 1422px) {
  :root {
    --S: 0.9065;
  }
}

@media (max-width: 1413px) {
  :root {
    --S: 0.905;
  }
}

@media (max-width: 1405px) {
  :root {
    --S: 0.9035;
  }
}

@media (max-width: 1397px) {
  :root {
    --S: 0.902;
  }
}

@media (max-width: 1389px) {
  :root {
    --S: 0.9005;
  }
}

@media (max-width: 1381px) {
  :root {
    --S: 0.899;
  }
}

@media (max-width: 1373px) {
  :root {
    --S: 0.8975;
  }
}

@media (max-width: 1365px) {
  :root {
    --S: 0.896;
  }
}

@media (max-width: 1357px) {
  :root {
    --S: 0.8945;
  }
}

@media (max-width: 1349px) {
  :root {
    --S: 0.893;
  }
}

@media (max-width: 1341px) {
  :root {
    --S: 0.8915;
  }
}

@media (max-width: 1333px) {
  :root {
    --S: 0.8899;
  }
}

@media (max-width: 1325px) {
  :root {
    --S: 0.8884;
  }
}

@media (max-width: 1317px) {
  :root {
    --S: 0.8869;
  }
}

@media (max-width: 1309px) {
  :root {
    --S: 0.8854;
  }
}

@media (max-width: 1301px) {
  :root {
    --S: 0.8839;
  }
}

@media (max-width: 1293px) {
  :root {
    --S: 0.8824;
  }
}

@media (max-width: 1285px) {
  :root {
    --S: 0.8809;
  }
}

@media (max-width: 1277px) {
  :root {
    --S: 0.8794;
  }
}

@media (max-width: 1269px) {
  :root {
    --S: 0.8779;
  }
}

@media (max-width: 1261px) {
  :root {
    --S: 0.8764;
  }
}

@media (max-width: 1253px) {
  :root {
    --S: 0.8749;
  }
}

@media (max-width: 1245px) {
  :root {
    --S: 0.8734;
  }
}

@media (max-width: 1237px) {
  :root {
    --S: 0.8719;
  }
}

@media (max-width: 1229px) {
  :root {
    --S: 0.8704;
  }
}

@media (max-width: 1221px) {
  :root {
    --S: 0.8688;
  }
}

@media (max-width: 1212px) {
  :root {
    --S: 0.8673;
  }
}

@media (max-width: 1204px) {
  :root {
    --S: 0.8658;
  }
}

@media (max-width: 1196px) {
  :root {
    --S: 0.8643;
  }
}

@media (max-width: 1188px) {
  :root {
    --S: 0.8628;
  }
}

@media (max-width: 1180px) {
  :root {
    --S: 0.8613;
  }
}

@media (max-width: 1172px) {
  :root {
    --S: 0.8598;
  }
}

@media (max-width: 1164px) {
  :root {
    --S: 0.8583;
  }
}

@media (max-width: 1156px) {
  :root {
    --S: 0.8568;
  }
}

@media (max-width: 1148px) {
  :root {
    --S: 0.8553;
  }
}

@media (max-width: 1140px) {
  :root {
    --S: 0.8538;
  }
}

@media (max-width: 1132px) {
  :root {
    --S: 0.8523;
  }
}

@media (max-width: 1124px) {
  :root {
    --S: 0.8508;
  }
}

@media (max-width: 1116px) {
  :root {
    --S: 0.8492;
  }
}

@media (max-width: 1108px) {
  :root {
    --S: 0.8477;
  }
}

@media (max-width: 1100px) {
  :root {
    --S: 0.8462;
  }
}

@media (max-width: 1092px) {
  :root {
    --S: 0.8447;
  }
}

@media (max-width: 1084px) {
  :root {
    --S: 0.8432;
  }
}

@media (max-width: 1076px) {
  :root {
    --S: 0.8417;
  }
}

@media (max-width: 1068px) {
  :root {
    --S: 0.8402;
  }
}

@media (max-width: 1060px) {
  :root {
    --S: 0.8387;
  }
}

@media (max-width: 1052px) {
  :root {
    --S: 0.8372;
  }
}

@media (max-width: 1044px) {
  :root {
    --S: 0.8357;
  }
}

@media (max-width: 1036px) {
  :root {
    --S: 0.8342;
  }
}

@media (max-width: 1028px) {
  :root {
    --S: 0.8327;
  }
}

@media (max-width: 1019px) {
  :root {
    --S: 0.8312;
  }
}

@media (max-width: 1011px) {
  :root {
    --S: 0.8296;
  }
}

@media (max-width: 1003px) {
  :root {
    --S: 0.8281;
  }
}

@media (max-width: 995px) {
  :root {
    --S: 0.8266;
  }
}

@media (max-width: 987px) {
  :root {
    --S: 0.8251;
  }
}

@media (max-width: 979px) {
  :root {
    --S: 0.8236;
  }
}

@media (max-width: 971px) {
  :root {
    --S: 0.8221;
  }
}

@media (max-width: 963px) {
  :root {
    --S: 0.8206;
  }
}

@media (max-width: 955px) {
  :root {
    --S: 0.8191;
  }
}

@media (max-width: 947px) {
  :root {
    --S: 0.8176;
  }
}

@media (max-width: 939px) {
  :root {
    --S: 0.8161;
  }
}

@media (max-width: 931px) {
  :root {
    --S: 0.8146;
  }
}

@media (max-width: 923px) {
  :root {
    --S: 0.8131;
  }
}

@media (max-width: 915px) {
  :root {
    --S: 0.8116;
  }
}

@media (max-width: 907px) {
  :root {
    --S: 0.8101;
  }
}

@media (max-width: 899px) {
  :root {
    --S: 0.8085;
  }
}

@media (max-width: 891px) {
  :root {
    --S: 0.807;
  }
}

@media (max-width: 883px) {
  :root {
    --S: 0.8055;
  }
}

@media (max-width: 875px) {
  :root {
    --S: 0.804;
  }
}

@media (max-width: 867px) {
  :root {
    --S: 0.8025;
  }
}

@media (max-width: 859px) {
  :root {
    --S: 0.801;
  }
}

@media (max-width: 851px) {
  :root {
    --S: 0.7995;
  }
}

@media (max-width: 843px) {
  :root {
    --S: 0.798;
  }
}

@media (max-width: 835px) {
  :root {
    --S: 0.7965;
  }
}

@media (max-width: 827px) {
  :root {
    --S: 0.795;
  }
}

@media (max-width: 818px) {
  :root {
    --S: 0.7935;
  }
}

@media (max-width: 810px) {
  :root {
    --S: 0.792;
  }
}

@media (max-width: 802px) {
  :root {
    --S: 0.7905;
  }
}

@media (max-width: 794px) {
  :root {
    --S: 0.7889;
  }
}

@media (max-width: 786px) {
  :root {
    --S: 0.7874;
  }
}

@media (max-width: 778px) {
  :root {
    --S: 0.7859;
  }
}

@media (max-width: 770px) {
  :root {
    --S: 0.7844;
  }
}

@media (max-width: 762px) {
  :root {
    --S: 0.7829;
  }
}

@media (max-width: 754px) {
  :root {
    --S: 0.7814;
  }
}

@media (max-width: 746px) {
  :root {
    --S: 0.7799;
  }
}

@media (max-width: 738px) {
  :root {
    --S: 0.7784;
  }
}

@media (max-width: 730px) {
  :root {
    --S: 0.7769;
  }
}

@media (max-width: 722px) {
  :root {
    --S: 0.7754;
  }
}

@media (max-width: 714px) {
  :root {
    --S: 0.7739;
  }
}

@media (max-width: 706px) {
  :root {
    --S: 0.7724;
  }
}

@media (max-width: 698px) {
  :root {
    --S: 0.7709;
  }
}

@media (max-width: 690px) {
  :root {
    --S: 0.7693;
  }
}

@media (max-width: 682px) {
  :root {
    --S: 0.7678;
  }
}

@media (max-width: 674px) {
  :root {
    --S: 0.7663;
  }
}

@media (max-width: 666px) {
  :root {
    --S: 0.7648;
  }
}

@media (max-width: 658px) {
  :root {
    --S: 0.7633;
  }
}

@media (max-width: 650px) {
  :root {
    --S: 0.7618;
  }
}

@media (max-width: 642px) {
  :root {
    --S: 0.7603;
  }
}

@media (max-width: 634px) {
  :root {
    --S: 0.7588;
  }
}

@media (max-width: 626px) {
  :root {
    --S: 0.7573;
  }
}

@media (max-width: 617px) {
  :root {
    --S: 0.7558;
  }
}

@media (max-width: 609px) {
  :root {
    --S: 0.7543;
  }
}

@media (max-width: 601px) {
  :root {
    --S: 0.7528;
  }
}

@media (max-width: 593px) {
  :root {
    --S: 0.7513;
  }
}

@media (max-width: 585px) {
  :root {
    --S: 0.7497;
  }
}

@media (max-width: 577px) {
  :root {
    --S: 0.7482;
  }
}

@media (max-width: 569px) {
  :root {
    --S: 0.7467;
  }
}

@media (max-width: 561px) {
  :root {
    --S: 0.7452;
  }
}

@media (max-width: 553px) {
  :root {
    --S: 0.7437;
  }
}

@media (max-width: 545px) {
  :root {
    --S: 0.7422;
  }
}

@media (max-width: 537px) {
  :root {
    --S: 0.7407;
  }
}

@media (max-width: 529px) {
  :root {
    --S: 0.7392;
  }
}

@media (max-width: 521px) {
  :root {
    --S: 0.7377;
  }
}

@media (max-width: 513px) {
  :root {
    --S: 0.7362;
  }
}

@media (max-width: 505px) {
  :root {
    --S: 0.7347;
  }
}

@media (max-width: 497px) {
  :root {
    --S: 0.7332;
  }
}

@media (max-width: 489px) {
  :root {
    --S: 0.7317;
  }
}

@media (max-width: 481px) {
  :root {
    --S: 0.7302;
  }
}

@media (max-width: 473px) {
  :root {
    --S: 0.7286;
  }
}

@media (max-width: 465px) {
  :root {
    --S: 0.7271;
  }
}

@media (max-width: 457px) {
  :root {
    --S: 0.7256;
  }
}

@media (max-width: 449px) {
  :root {
    --S: 0.7241;
  }
}

@media (max-width: 441px) {
  :root {
    --S: 0.7226;
  }
}

@media (max-width: 433px) {
  :root {
    --S: 0.7211;
  }
}

@media (max-width: 425px) {
  :root {
    --S: 0.7196;
  }
}

@media (max-width: 416px) {
  :root {
    --S: 0.7181;
  }
}

@media (max-width: 408px) {
  :root {
    --S: 0.7166;
  }
}

@media (max-width: 400px) {
  :root {
    --S: 0.7151;
  }
}

@media (max-width: 392px) {
  :root {
    --S: 0.7136;
  }
}

@media (max-width: 384px) {
  :root {
    --S: 0.7121;
  }
}

@media (max-width: 376px) {
  :root {
    --S: 0.7106;
  }
}

@media (max-width: 368px) {
  :root {
    --S: 0.709;
  }
}

@media (max-width: 360px) {
  :root {
    --S: 0.7075;
  }
}

@media (max-width: 352px) {
  :root {
    --S: 0.706;
  }
}

@media (max-width: 344px) {
  :root {
    --S: 0.7045;
  }
}

@media (max-width: 336px) {
  :root {
    --S: 0.703;
  }
}

@media (max-width: 328px) {
  :root {
    --S: 0.7015;
  }
}

@media (max-width: 320px) {
  :root {
    --S: 0.7;
  }
}

/* === END AUTO-RESPONSIVE MATRIX === */
/* === FIX: Separación entre iconos y texto en el login === */
.input-box {
  position: relative;
  display: flex;
  align-items: center;
}

.input-box .icon {
  position: absolute;
  left: calc(14px * var(--S));
  /* espacio relativo al escalado */
  color: #ffffff;
  font-size: calc(18px * var(--S));
  pointer-events: none;
  transition: 0.2s;
}

.input-box input {
  padding-left: calc(45px * var(--S)) !important;
  /* ✅ más espacio para el icono */
  padding-right: calc(14px * var(--S));
  border-radius: calc(8px * var(--S));
  font-size: calc(15px * var(--S));
}

/* Cuando la pantalla es muy pequeña, reducir un poco la separación */
@media (max-width: 480px) {
  .input-box .icon {
    left: 12px;
  }

  .input-box input {
    padding-left: 40px !important;
  }
}

/* ==============================================
   CORRECCIONES RESPONSIVE PROA (Móviles)
   Agrega esto al FINAL de tu style.css
   ============================================== */

@media (max-width: 768px) {

  /* 1. Ajuste General del Body en Dashboard */
  body.progan {
    height: auto !important;
    /* Permitir que la página crezca hacia abajo */
    padding: 80px 20px 20px 20px !important;
    /* Espacio para no chocar con bordes */
    align-items: center !important;
    overflow-x: hidden;
    /* Evitar scroll horizontal */
  }

  /* 2. Arreglo del Bloque de Texto (Slogan) */
  .bloque {
    width: 100% !important;
    height: auto !important;
    display: flex;
    flex-direction: column-reverse;
    /* Pone el texto abajo y animales arriba */
    align-items: center;
  }

  body.progan .recuadro-texto {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    padding: 20px !important;
    text-align: center !important;
    /* Centrar texto */
    align-items: center !important;
    margin-top: 20px;

    /* Quitar padding excesivo que tenías para escritorio */
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Ocultar la línea vertical decorativa en móviles */
  body.progan .recuadro-texto::before {
    display: none !important;
  }

  /* Ajustar textos para que se lean bien */
  .linea1,
  .linea2,
  .linea3,
  .linea4 {
    text-align: center !important;
    font-size: 16px !important;
  }

  .linea2 {
    font-size: 20px !important;
  }

  /* 3. Arreglo de la Imagen de Animales */
  .imagen-animales {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    /* Quitar rotación 3D en móvil */
    width: 80% !important;
    /* Tamaño adaptable */
    max-width: 300px;
    margin: 0 auto !important;
    display: block;
  }

  /* Quitar la animación de rotación en móvil para mejorar rendimiento */
  .imagen-animales:hover {
    animation: none !important;
  }

  /* 4. Arreglo del Menú de Botones */
  .menu-botonesp {
    margin-top: 30px !important;
    /* Quitar el margen negativo (-130px) */
    margin-bottom: 50px !important;
    width: 100% !important;
    justify-content: center !important;
    gap: 15px !important;
  }

  .img-circle {
    width: 120px !important;
    height: 120px !important;
  }

  /* 5. Ajuste para los IFRAMES (Power BI) */
  .bi-frame-wrapper iframe {
    height: 80vh !important;
    /* 80% de la altura de la pantalla del celular */
  }

  .bi-title {
    font-size: 20px !important;
    margin-top: 20px;
  }

  /* 6. Ajuste de Barra Superior y Usuario */
  .topbar-progan {
    position: absolute !important;
    top: 20px !important;
    width: 90% !important;
  }

  .user-info2-progan {
    top: 85px !important;
    /* Mover info usuario debajo del header */
    right: 50% !important;
    transform: translateX(50%) !important;
    /* Centrarlo */
  }
}

/* =======================================================
   SOLUCIÓN CHOQUE DE BARRAS (VISOR INTEGRAL Y OTRAS)
   Agrega esto al final de tu style.css
   ======================================================= */

/* =======================================================
   SOLUCIÓN CHOQUE DE BARRAS (RANGO AMPLIADO)
   Reemplaza el bloque anterior con este
   ======================================================= */

/* 🔥 Aumentamos el rango de detección a 1400px para cubrir laptops */
@media (max-width: 1400px) {

  /* 1. USUARIO: Se queda arriba y compacto */
  .user-info-visor,
  .user-info2-progan,
  .user-info {
    top: 10px !important;
    right: 15px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    z-index: 1001 !important;
  }

  /* 2. BARRA PRINCIPAL: Se baja para dejar espacio al usuario */
  .topbar-visor,
  .topbar-progan {
    top: 60px !important;
    /* Bajamos la barra */
    width: 90% !important;
    height: 50px !important;
  }

  /* Ajuste de logo */
  .topbar-visor img,
  .topbar-progan img {
    height: 40px !important;
  }

  /* 3. CONTENIDO: Empujamos el título/contenido para que la barra no lo tape */
  .welcome-title,
  .bi-container,
  .contenedor {
    margin-top: 60px !important;
    /* Espacio extra de seguridad */
  }
}

/* =======================================================
   AJUSTE PARA MÓVILES PEQUEÑOS (Sin cambios, se mantiene igual)
   ======================================================= */
@media (max-width: 500px) {

  .topbar-visor,
  .topbar-progan {
    top: 75px !important;
  }

  .welcome-title {
    margin-top: 80px !important;
    font-size: 32px !important;
  }
}

/* =======================================================
   LOGO "POP-OUT" (Más grande que la barra)
   Agrega esto al final de tu style.css
   ======================================================= */

/* =======================================================
   LOGO "POP-OUT" (SOLO PARA VISOR INTEGRAL)
   Reemplaza el bloque anterior con este.
   Solo afecta si el body tiene la clase "visor-page"
   ======================================================= */

/* 1. Estilo base SOLO para Visor Integral */
body.visor-page .topbar img {
  height: 180px !important;
  /* Tamaño grande */
  width: auto !important;

  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;

  z-index: 2000 !important;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
  transition: transform 0.3s ease;
}

/* 2. Efecto Hover SOLO para Visor Integral */
body.visor-page .topbar img:hover {
  transform: translate(-50%, -50%) scale(1.1) !important;
}

/* 3. Ajuste Móvil SOLO para Visor Integral */
@media (max-width: 768px) {
  body.visor-page .topbar img {
    height: 90px !important;
  }
}

/* =======================================================
   CORRECCIÓN FINAL: TEXTO ALINEADO IZQ (RESPETANDO IMAGEN)
   Agrega esto al final para arreglar el solapamiento
   ======================================================= */

@media (min-width: 769px) {
  /* Solo aplica en computadoras para no romper el celular */
  
  body.progan .recuadro-texto {
    /* 1. EMPUJAMOS el texto a la derecha (520px) para librar la imagen */
    padding-left: 520px !important; 
    padding-right: 30px !important; 
    
    /* 2. Alineamos el contenido a la izquierda DENTRO de ese espacio libre */
    align-items: flex-start !important; 
    text-align: left !important;
  }

  /* 3. Forzamos que las líneas de texto miren a la izquierda */
  body.progan .recuadro-texto p,
  body.progan .linea1, 
  body.progan .linea2, 
  body.progan .linea3, 
  body.progan .linea4 {
    text-align: left !important;
  }

  /* 4. Colocamos la línea vertical justo entre la imagen y el texto */
  body.progan .recuadro-texto::before {
    display: block !important;
    left: 490px !important; /* La ponemos en la "frontera" (después de la imagen) */
    right: auto !important; /* Quitamos la posición derecha antigua */
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

/* =======================================================
   ESTILOS PARA PÁGINA FINANCIERA (jdafinanciera.php)
   Agrega esto al final de style.css
   ======================================================= */

body.financiera {
  min-height: 100vh;
  width: 100%;
  color: white;
  /* Usamos el mismo fondo que Progan */
  background-image: url('imagenes/fondoproa2.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
  
  /* Centramos el contenido (los botones) vertical y horizontalmente */
  display: flex;
  flex-direction: column;
  align-items: center; 
  justify-content: center; /* Esto pone los botones al medio de la pantalla */
  
  font-family: 'Segoe UI', sans-serif;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
}

/* Ajuste específico para el contenedor de botones en Financiera */
body.financiera .menu-botonesp {
  margin-top: 0 !important; /* Quitamos el margen negativo (-130px) de Progan */
  margin-bottom: 0 !important;
  
  display: flex;
  flex-wrap: wrap;       /* Si no caben, bajan a la siguiente línea */
  justify-content: center;
  gap: 30px;             /* Espacio entre las esferas */
  max-width: 1200px;
  width: 90%;
}

/* Ajuste para que las esferas sean iguales */
body.financiera .img-circle {
  width: 220px;   /* Tamaño estándar */
  height: 220px;
  margin: 10px;
}

/* RESPONSIVE: Ajustes para móviles en página Financiera */
@media (max-width: 768px) {
  body.financiera .menu-botonesp {
    gap: 15px;
  }
  
  body.financiera .img-circle {
    width: 140px; /* Un poco más pequeños en celular */
    height: 140px;
  }
  
  /* Aseguramos que el header no tape los botones en pantallas chicas */
  body.financiera {
    padding-top: 100px; 
    justify-content: flex-start; /* En celular, mejor que empiecen arriba */
  }
}


/* =======================================================
   CORRECCIÓN VISUAL PARA LIDERPROGAN (body.Gerentes)
   Agrega esto al final de tu style.css
   ======================================================= */

/* --- VERSIÓN ESCRITORIO (Computadoras) --- */
@media (min-width: 769px) {
  
  /* 1. Creamos el espacio para la imagen y alineamos a la izquierda */
  body.Gerentes .recuadro-texto {
    padding-left: 520px !important;  /* Empuja el texto a la derecha para no tapar la imagen */
    padding-right: 30px !important;
    align-items: flex-start !important; /* Alineación flex al inicio */
    text-align: left !important;        /* Texto a la izquierda */
  }

  /* 2. Forzamos la alineación de cada línea de texto */
  body.Gerentes .linea1,
  body.Gerentes .linea2,
  body.Gerentes .linea3,
  body.Gerentes .linea4 {
    text-align: left !important;
  }

  /* 3. Colocamos la línea vertical en el medio */
  body.Gerentes .recuadro-texto::before {
    display: block !important;
    left: 490px !important;    /* La ponemos justo después de la imagen */
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

/* --- VERSIÓN MÓVIL (Celulares) --- */
@media (max-width: 768px) {
  
  /* 1. En celular, permitimos que la página crezca */
  body.Gerentes {
    height: auto !important;
    min-height: 100vh;
    padding-bottom: 20px;
  }

  /* 2. Centramos el texto y quitamos el padding lateral excesivo */
  body.Gerentes .recuadro-texto {
    padding: 20px !important;
    text-align: center !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    transform: none !important;
    left: 0 !important;
    top: 0 !important;
    margin-top: 20px;
  }
  
  /* 3. Acomodamos la imagen de los animales */
  body.Gerentes .imagen-animales {
    position: relative !important;
    display: block !important;
    margin: 0 auto !important;
    transform: none !important;
    width: 80% !important;
    max-width: 300px;
  }

  /* 4. Ocultamos la línea decorativa en celular */
  body.Gerentes .recuadro-texto::before {
    display: none !important;
  }
}

/* =======================================================
   CORRECCIÓN NOMBRES LARGOS (EVITAR CHOQUE)
   Corta el nombre con "..." si es demasiado largo
   Agrega esto al final de style.css
   ======================================================= */

.user-info span,
.user-info2 span,
.user-info-visor span,
.user-info2-progan span {
    display: inline-block !important; /* Necesario para que respete el ancho */
    max-width: 150px !important;      /* 🔥 Ancho máximo permitido para el nombre */
    
    white-space: nowrap !important;   /* Obliga a que sea una sola línea */
    overflow: hidden !important;      /* Oculta lo que se salga del ancho */
    text-overflow: ellipsis !important; /* Agrega los "..." al final */
    
    vertical-align: middle !important; /* Alinea verticalmente con el icono */
}

/* OPCIONAL: En pantallas muy grandes, permitimos nombres más largos */
@media (min-width: 1600px) {
    .user-info span,
    .user-info2 span,
    .user-info-visor span,
    .user-info2-progan span {
        max-width: 300px !important; /* Aquí sí dejamos que se vea todo */
    }
}


/* =======================================================
   CORRECCIÓN DEFINITIVA DE CHOQUE DE BARRAS
   Reducimos el ancho de la barra central para dejar hueco
   al usuario y al botón de regresar.
   ======================================================= */

/* Aplicamos esto a todas las barras superiores (Visor, Progan, etc.) */
.topbar, 
.topbar-progan, 
.topbar-visor {
    /* ANTES: width: 80%; (Esto causaba el choque) */
    
    /* AHORA: Calculamos el 100% menos 450px de espacio libre (225px a cada lado) */
    width: calc(100% - 450px) !important;
    
    /* Ponemos un límite máximo para que no se vea gigante en pantallas 4K */
    max-width: 1000px !important;
    
    /* Y un mínimo para que no desaparezca en pantallas chicas */
    min-width: 300px !important;
}

/* --- AJUSTE PARA PANTALLAS DE LAPTOP PEQUEÑAS (1200px - 1400px) --- */
@media (max-width: 1440px) {
    .topbar, 
    .topbar-progan, 
    .topbar-visor {
        /* En laptops, reducimos el margen de seguridad un poco */
        width: calc(100% - 380px) !important;
    }
}

/* --- AJUSTE PARA TABLETS (Donde ya bajamos la barra en pasos anteriores) --- */
@media (max-width: 1024px) {
    .topbar, 
    .topbar-progan, 
    .topbar-visor {
        /* Aquí volvemos al ancho casi completo porque la barra ya se movió abajo */
        width: 90% !important;
    }
}

/* ===== TOPBAR ESPECÍFICO PARA VISOR INTEGRAL ===== */
.topbar-visor {
  position: absolute !important;
  top: 45px !important; /* Ajusta esto si quieres subirla o bajarla */

  /* 👇 ESTO ES LO NUEVO: Hace todo transparente solo en esta página */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  animation: none !important; /* Detiene el parpadeo de luz */
}
/* ===== SELECTOR DE BANDERAS (Versión Emojis) ===== */
.flag-selector-container {
  text-align: center;
  margin-top: 15px;
  margin-bottom: 25px;
}

.flag-label {
  color: #c5f2df; /* El mismo color "muted" de tu diseño */
  font-size: 14px;
  margin-bottom: 10px;
}

.flag-selector {
  display: flex;
  justify-content: center;
  gap: 40px; /* Separación entre banderas */
}

.flag-option {
  position: relative;
  cursor: pointer;
}

/* Ocultamos el radio button feo */
.flag-option input[type="radio"] {
  display: none; 
}

/* Estilo del Emoji */
.flag-emoji {
  font-size: 50px; /* Tamaño grande para el emoji */
  display: inline-block;
  transition: all 0.3s ease;
  filter: grayscale(80%); /* Apagado si no está seleccionado */
  opacity: 0.6;
  /* Un pequeño truco para que los emojis se vean planos en Windows */
  font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif;
}

/* --- ESTADO SELECCIONADO --- */
/* Cuando el radio está checked, aplicamos estilo al emoji que le sigue */
.flag-option input[type="radio"]:checked + .flag-emoji {
  filter: grayscale(0%); /* Color completo */
  opacity: 1;
  transform: scale(1.2); /* Crece un poco */
  /* Sombra de texto verde neón */
  text-shadow: 0 0 20px rgba(0, 255, 132, 0.8); 
}

/* Hover */
.flag-option:hover .flag-emoji {
  opacity: 0.9;
  transform: scale(1.1);
}

/* Estilo para el selector de banderas alineado */
.flag-selector-container {
  display: flex;
  align-items: center;     /* Centrar verticalmente */
  justify-content: center; /* Centrar horizontalmente */
  gap: 15px;               /* Espacio entre texto y banderas */
  margin: 15px 0 25px 0;
  background: rgba(255,255,255,0.05); /* Fondo sutil opcional */
  padding: 10px;
  border-radius: 10px;
}

.flag-text {
  color: #c5f2df;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.5px;
}

.flag-options {
  display: flex;
  gap: 20px;
}

.flag-label {
  cursor: pointer;
  position: relative;
}

.flag-label input {
  display: none; /* Ocultar el radio button nativo */
}

.flag-emoji {
  font-size: 28px; /* Tamaño de bandera */
  filter: grayscale(100%);
  opacity: 0.5;
  transition: all 0.3s ease;
}

/* Efecto al seleccionar */
.flag-label input:checked + .flag-emoji {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.2);
  text-shadow: 0 0 10px rgba(0, 255, 132, 0.5);
}

.flag-label:hover .flag-emoji {
  opacity: 0.8;
}
/* =======================================================
   SELECTOR DE BANDERAS (Versión Ajustada: Texto Blanco y Fondo Claro)
   Reemplaza esto en style.css
   ======================================================= */

/* Contenedor principal */
.flag-selector-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin: 15px 0 25px 0;
  
  /* CAMBIO AQUÍ: Fondo mucho más suave (efecto vidrio claro) */
  background: rgba(255, 255, 255, 0.1); 
  
  padding: 8px 20px;
  border-radius: 50px; /* Bordes más redondeados para que se vea moderno */
  
  /* Borde muy sutil */
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Texto "REGIÓN:" */
.flag-text {
  /* CAMBIO AQUÍ: Color Blanco Puro */
  color: #ffffff; 
  
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Contenedor de opciones */
.flag-options {
  display: flex;
  gap: 20px;
}

.flag-label {
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
}

.flag-label input {
  display: none; 
}

/* === ESTILO DE LA IMAGEN === */
.flag-img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  
  object-fit: cover; 
  object-position: center;

  /* Inactivo: un poco gris */
  filter: grayscale(100%);
  opacity: 0.6;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

/* === ESTADO SELECCIONADO === */
.flag-label input:checked + .flag-img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.2);
  
  /* Borde verde neón */
  border-color: #00ff84; 
  box-shadow: 0 0 15px rgba(0, 255, 132, 0.5);
}

/* Hover */
.flag-label:hover .flag-img {
  opacity: 0.9;
  transform: scale(1.1);
}

/* =======================================================
   SELECTOR DE IDIOMA/REGIÓN EN NAVBAR
   ======================================================= */

.lang-switch {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 8px; /* Separación con el nombre del usuario */
  cursor: pointer;
}

/* La bandera principal que se ve siempre */
.nav-flag {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

/* El contenedor del menú desplegable (oculto por defecto) */
.lang-dropdown {
  position: absolute;
  top: 100%; /* Justo debajo de la bandera */
  left: 50%;
  transform: translateX(-50%);
  
  margin-top: 10px; /* Espacio separador */
  background: rgba(0, 0, 0, 0.8);
  padding: 8px;
  border-radius: 50%; /* Redondo porque solo es un botón */
  border: 1px solid rgba(0, 255, 132, 0.3);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 2000;
}

/* La bandera dentro del menú desplegable */
.nav-flag-drop {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  filter: grayscale(40%); /* Un poco apagada hasta que le pases el mouse */
  transition: all 0.2s;
}

.nav-flag-drop:hover {
  filter: grayscale(0%);
  transform: scale(1.15);
}

/* === EFECTO HOVER === */
/* Al pasar el mouse sobre el contenedor, aparece el dropdown */
.lang-switch:hover .lang-dropdown {
  opacity: 1;
  visibility: visible;
  margin-top: 5px; /* Pequeña animación de subida */
}

.lang-switch:hover .nav-flag {
  border-color: #00ff84; /* Borde verde al activar menú */
}

/* =======================================================
   NUEVA BARRA DE NAVEGACIÓN (NAVBAR PRO)
   Agrega esto al final de tu style.css
   ======================================================= */

.navbar-pro {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: #000000; /* Fondo negro sólido */
    border-bottom: 2px solid #2c2c2c; /* Línea sutil abajo */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    z-index: 5000; /* Por encima de todo */
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 30px;
}

.brand-text {
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 1px;
    margin-right: 10px;
}

/* === MENÚ HORIZONTAL === */
.nav-menu {
    list-style: none;
    display: flex;
    gap: 5px; /* Espacio entre botones */
    margin: 0;
    padding: 0;
}

.nav-link {
    text-decoration: none;
    color: #b0b0b0; /* Gris claro */
    font-size: 14px;
    font-weight: 600;
    padding: 10px 15px;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Hover y Activo */
.nav-link:hover, 
.nav-link.active {
    background: rgba(255, 255, 255, 0.1);
    color: #00ff84; /* Tu verde característico */
}

.nav-link i {
    font-size: 16px;
}

/* === SECCIÓN DERECHA (USUARIO) === */
.nav-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.user-pill {
    background: rgba(255, 255, 255, 0.08);
    padding: 6px 16px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.logout-btn-nav {
    color: #ff5555;
    font-size: 18px;
    transition: transform 0.2s;
}

.logout-btn-nav:hover {
    color: #ff0000;
    transform: scale(1.2);
}

/* === RESPONSIVE PARA EL MENÚ === */
@media (max-width: 900px) {
    .navbar-pro {
        padding: 0 15px;
        height: auto;
        flex-direction: column;
        padding-bottom: 10px;
    }

    .nav-left {
        flex-direction: column;
        gap: 10px;
        width: 100%;
        margin-top: 10px;
    }

    .nav-menu {
        flex-wrap: wrap;
        justify-content: center;
    }

    .nav-right {
        width: 100%;
        justify-content: flex-end;
        padding-right: 10px;
        position: absolute; /* Usuario flotante arriba a la derecha en móvil */
        top: 15px;
        right: 10px;
        width: auto;
    }
    
    /* Ocultamos el nombre de la marca en movil para ahorrar espacio */
    .brand-text {
        display: none;
    }
    
    /* Ajustamos el espaciador del body */
    body { padding-top: 100px; }
}
/* =========================================
   ESTILOS MENU LATERAL + POWERBI
   ========================================= */

.dashboard-layout {
    display: flex;
    gap: 20px;
    width: 95%;
    max-width: 1600px;
    margin: 0 auto;
    align-items: stretch;
}

.side-menu-panel {
    width: 250px;             /* Ancho fijo del menú */
    background: #111;         /* Fondo oscuro */
    border: 1px solid #333;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
    flex-shrink: 0;
}

.menu-header h3 {
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
    border-bottom: 2px solid #00ff84;
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-weight: 700;
}

.menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-list li {
    margin-bottom: 10px;
}

.menu-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    color: #ccc;
    text-decoration: none;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    font-size: 15px;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.menu-link i {
    width: 20px;
    text-align: center;
    color: #00ff84; /* Icono verde */
}

.menu-link:hover {
    background: rgba(0, 255, 132, 0.1);
    color: #fff;
    border-left: 3px solid #00ff84;
    transform: translateX(5px);
}

/* El Iframe ocupa el resto del espacio */
.dashboard-content.bi-frame-wrapper1 {
    width: 100%;
    margin: 0;
    flex-grow: 1;
}

/* RESPONSIVE (Celular: Menú arriba, mapa abajo) */
@media (max-width: 900px) {
    .dashboard-layout {
        flex-direction: column;
    }
    .side-menu-panel {
        width: 100%;
        margin-bottom: 20px;
    }
}
/* =======================================================
   ESTILOS MENÚ LATERAL COMPACTO (GLASSMORPHISM)
   Agrega esto al final de style.css
   ======================================================= */

.siigo-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    
    /* ANCHO COLAPSADO (Muy delgado) */
    width: 50px; 
    
    background: rgba(255, 255, 255, 0.03); 
    backdrop-filter: blur(15px);            
    -webkit-backdrop-filter: blur(15px);    
    
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 20px rgba(0, 198, 255, 0.1);
    
    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    
    /* Ubicación vertical del icono */
    padding-top: 150px; 
}

/* Efecto al pasar el mouse (Expandir) */
.siigo-sidebar:hover {
    /* ANCHO EXPANDIDO (Más pequeño como pediste) */
    width: 160px; 
    
    background: rgba(0, 0, 0, 0.85);
    box-shadow: 0 0 30px rgba(0, 198, 255, 0.25);
    border-right: 1px solid rgba(0, 198, 255, 0.3);
}

/* Estilo del enlace contenedor */
.siigo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #ffffff;
    
    /* Padding lateral ajustado para centrar el icono de 18px en barra de 50px */
    padding: 0 16px; 
    
    height: 50px;
    transition: all 0.3s ease;
    white-space: nowrap;
    position: relative;
    border-left: 3px solid transparent;
}

.siigo-link:hover {
    background: linear-gradient(90deg, rgba(0, 198, 255, 0.15) 0%, transparent 100%);
    border-left: 3px solid #00c6ff; 
}

/* === ÍCONO GEOMÉTRICO PEQUEÑO === */
.icon-blue-logo {
    min-width: 18px; /* Ancho reservado */
    font-size: 18px; /* TAMAÑO DEL ÍCONO (Más pequeño) */
    
    text-align: center;
    margin-right: 15px; 
    
    /* Gradiente Azul Neón */
    background: -webkit-linear-gradient(45deg, #00c6ff, #0072ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    
    filter: drop-shadow(0 0 5px rgba(0, 114, 255, 0.6));
    transition: transform 0.3s ease;
}

.siigo-link:hover .icon-blue-logo {
    transform: scale(1.1);
    filter: drop-shadow(0 0 10px rgba(0, 198, 255, 0.9));
}

/* === TEXTO (CAPTURE) === */
.link-text {
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    font-family: "Segoe UI", sans-serif;
    font-size: 14px; /* Letra discreta */
    font-weight: 500;
    letter-spacing: 0.5px;
    color: #e0e0e0;
}

.siigo-link:hover .link-text {
    color: #00c6ff;
}

.siigo-sidebar:hover .link-text {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.1s;
}

/* === AJUSTE DEL BODY PARA QUE NO SE TAPE === */
body.bi-page {
    /* Mueve el contenido solo 50px a la derecha */
    padding-left: 50px; 
    transition: padding-left 0.4s ease;
}

/* =======================================================
   CORRECCIÓN SOLO PARA PÁGINA DASHBOARD (BI-PAGE)
   ======================================================= */

/* 1. Mover el botón "Regresar" para que no choque con la barra */
body.bi-page .btn-volver {
    /* La barra mide 50px. Ponemos el botón a 70px u 80px */
    left: 80px !important; 
    
    /* Aseguramos que si la barra se expande, pase por ENCIMA del botón (no debajo) */
    z-index: 900; 
}

/* 2. (Opcional) Si quieres que el botón baje un poquito para alinearse con el icono */
body.bi-page .btn-volver {
    top: 25px; /* Ajuste visual vertical */
}

/* =======================================================
   ANIMACIÓN "GIRO" (ROTACIÓN) PARA EL ÍCONO
   Agrega esto al final de tu style.css
   ======================================================= */

/* 1. Definimos la rotación (De 0 a 360 grados) */
@keyframes spinIcon {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 2. Aplicamos la animación al pasar el mouse */
.siigo-link:hover .icon-blue-logo {
    /* Mantenemos el brillo azul intenso */
    filter: drop-shadow(0 0 15px rgba(0, 198, 255, 1));
    
    /* Explicación de la animación:
       spinIcon: nombre de la animación
       2s: tarda 2 segundos en dar una vuelta completa (ajústalo si lo quieres más rápido)
       linear: velocidad constante (sin acelerar ni frenar)
       infinite: nunca se detiene mientras tengas el mouse encima
    */
    animation: spinIcon 2s linear infinite;
}

/*Nueva modificacion para barra lateral de PROA*/

.menu-hamburguesav {
  position: fixed;
  top: 35px;
  left: 30px;
  z-index: 3000;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-desplegablev {
  position: fixed;
  top: 0;
  left: 0;
  width: 100px;
  height: 100vh;
  background: #000000;
  border-right: 1px solid rgba(0, 255, 132, 0.2);
  box-shadow: 4px 0 30px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 120px;
  transform: translateX(-100%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2999;
}

.menu-desplegablev.active {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.menu-desplegablev a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  margin-bottom: 15px;
  border-radius: 12px;
  color: #888;
  text-decoration: none;
  border-bottom: none;
  transition: all 0.3s ease;
  position: relative;
}

.menu-desplegablev a i {
  font-size: 24px;
  color: #ffffff;
  width: auto;
  margin-bottom: 4px;
  transition: color 0.3s ease;
}

.menu-desplegablev a span {
  font-size: 10px;
  text-align: center;
  display: none;
}

.menu-desplegablev a:hover {
  background: rgba(0, 255, 132, 0.15);
  transform: translateX(5px);
  padding-left: 0;
}

.menu-desplegablev a:hover i { color: #00ff84; }

/* === BOTÓN DE PARTÍCULAS (CORREGIDO) === */
.particle-button {
  position: relative; /* Aquí estaba el error, ahora es relativo a .menu-hamburguesa */
  width: 10px;
  height: 10px;
  top: auto;
  left: auto;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  border: none;
  z-index: 3001;
}

.particle-button .dot {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -2.5px;
  margin-left: -2.5px;
  width: 8px;
  height: 8px;
  background-color: white;
  border-radius: 100%;
}

.particle-button .dot:nth-child(1) { animation: swarm1 3s infinite ease-in-out; }
.particle-button .dot:nth-child(2) { animation: swarm2 3s infinite ease-in-out; }
.particle-button .dot:nth-child(3) { animation: swarm3 3s infinite ease-in-out; }
.particle-button .dot:nth-child(4) { animation: swarm1 4s infinite ease-in-out reverse; }
.particle-button .dot:nth-child(5) { animation: swarm2 4s infinite ease-in-out reverse; }
.particle-button .dot:nth-child(6) { animation: swarm3 2.5s infinite ease-in-out; }
.particle-button .dot:nth-child(7) { animation: swarm1 3.5s infinite ease-in-out; }
.particle-button .dot:nth-child(8) { animation: swarm2 3.5s infinite ease-in-out reverse; }

@keyframes swarm1 {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(4px, -10px); }
  66% { transform: translate(-2px, 4px); }
}
@keyframes swarm2 {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(-10px, -2px); }
  66% { transform: translate(3px, 3px); }
}
@keyframes swarm3 {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(2px, 5px); }
  66% { transform: translate(-10px, -2px); }
}

.particle-button:hover .dot {
  animation: none;
  background-color: #00ff84;
  box-shadow: 0 0 8px rgba(0, 255, 132, 0.8);
}

.particle-button:hover .dot:nth-child(1) { transform: translate(0px, -14px); }
.particle-button:hover .dot:nth-child(2) { transform: translate(10px, -10px); }
.particle-button:hover .dot:nth-child(3) { transform: translate(14px, 0px); }
.particle-button:hover .dot:nth-child(4) { transform: translate(10px, 10px); }
.particle-button:hover .dot:nth-child(5) { transform: translate(0px, 14px); }
.particle-button:hover .dot:nth-child(6) { transform: translate(-10px, 10px); }
.particle-button:hover .dot:nth-child(7) { transform: translate(-14px, 0px); }
.particle-button:hover .dot:nth-child(8) { transform: translate(-10px, -10px); }

.particle-button:hover { transform: rotate(180deg); }


/* Modificación para efecto vidrio en el menú lateral */
.menu-desplegablev {
    background: rgba(0, 0, 0, 0.85); /* 85% opacidad */
    backdrop-filter: blur(15px);     /* Desenfoque del fondo */
    -webkit-backdrop-filter: blur(15px);
    border-right: 1px solid rgba(0, 255, 132, 0.1); /* Borde sutil */
}

/* Tooltips flotantes */
.menu-desplegablev a {
    overflow: visible; /* Permitir que el texto salga del cuadro */
}

.menu-desplegablev a span {
    display: block; /* Hacemos que exista */
    position: absolute;
    left: 70px; /* Lo movemos a la derecha del icono */
    background: #00ff84; /* Fondo verde neón */
    color: #000; /* Texto negro */
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 12px;
    opacity: 0; /* Oculto por defecto */
    visibility: hidden;
    transition: all 0.3s ease;
    white-space: nowrap; /* Que no se rompa el texto */
    box-shadow: 0 0 10px rgba(0, 255, 132, 0.4);
    pointer-events: none; /* Para que no interfiera con el click */
}

/* Flechita del tooltip */
.menu-desplegablev a span::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent #00ff84 transparent transparent;
}

/* Mostrar al pasar el mouse */
.menu-desplegablev a:hover span {
    opacity: 1;
    visibility: visible;
    left: 80px; /* Pequeña animación de desplazamiento */
}

/* =======================================================
   ACTUALIZACIÓN A DORADO PROGAN
   Reemplaza las reglas correspondientes en tu CSS actual
   ======================================================= */

/* 1. La línea de separación de la barra (border-right) */
.menu-desplegablev {
  position: fixed;
  top: 0;
  left: 0;
  width: 100px;
  height: 100vh;
  background: #000000; /* Si quieres el efecto vidrio, usa el código de mi respuesta anterior */
  
  /* ⭐ CAMBIO DORADO: Borde sutil dorado */
  border-right: 1px solid rgba(212, 175, 55, 0.3); 
  
  box-shadow: 4px 0 30px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 120px;
  transform: translateX(-100%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2999;
}

/* 2. El fondo y el ícono al pasar el cursor (hover) */
.menu-desplegablev a:hover {
  /* ⭐ CAMBIO DORADO: Fondo dorado translúcido */
  background: rgba(212, 175, 55, 0.15); 
  transform: translateX(5px);
  padding-left: 0;
}

.menu-desplegablev a:hover i { 
    /* ⭐ CAMBIO DORADO: Ícono color oro sólido */
    color: #D4AF37; 
    /* Opcional: Un pequeño brillo dorado */
    filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.5));
}

/* --- BONUS: Para que el botón de hamburguesa también sea dorado --- */

.particle-button:hover .dot {
  animation: none;
  /* ⭐ CAMBIO DORADO */
  background-color: #D4AF37;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.8);
}
/* =======================================================
   NUEVO: TOOLTIPS (TEXTOS FLOTANTES) DORADOS
   Pega esto al final de tu style.css
   ======================================================= */

/* Aseguramos que el enlace permita mostrar contenido fuera de él */
.menu-desplegablev a {
    overflow: visible; 
}

/* Estilo base del texto flotante */
.menu-desplegablev a span {
    display: block; 
    position: absolute;
    left: 70px; /* Posición inicial a la derecha del icono */
    
    /* ⭐ CAMBIO DORADO: Fondo dorado sólido para el texto */
    background: #D4AF37; 
    
    color: #000000; /* Texto negro para buen contraste */
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 700; /* Texto más grueso */
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase; /* Opcional: mayúsculas se ve más premium */
    
    opacity: 0; /* Oculto por defecto */
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Sombra para profundidad */
    pointer-events: none; 
    z-index: 3005;
}

/* La pequeña flechita que apunta al icono */
.menu-desplegablev a span::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px;
    border-style: solid;
    
    /* ⭐ CAMBIO DORADO: La flecha también es dorada */
    border-color: transparent #D4AF37 transparent transparent;
}

/* Animación al pasar el mouse */
.menu-desplegablev a:hover span {
    opacity: 1;
    visibility: visible;
    left: 85px; /* Se desplaza un poco más a la derecha suavemente */
}

/* === BOTÓN DE PARTÍCULAS (ACTUALIZADO: HOVER + ACTIVO) === */

/* 1. Color dorado y detención de animación */
.particle-button:hover .dot,
.particle-button.active .dot {  /* <--- AQUI AGREGAMOS .active */
  animation: none;
  background-color: #D4AF37; /* Dorado */
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.8);
}

/* 2. Posiciones para formar el círculo (Aplica a Hover Y Active) */
.particle-button:hover .dot:nth-child(1), .particle-button.active .dot:nth-child(1) { transform: translate(0px, -14px); }
.particle-button:hover .dot:nth-child(2), .particle-button.active .dot:nth-child(2) { transform: translate(10px, -10px); }
.particle-button:hover .dot:nth-child(3), .particle-button.active .dot:nth-child(3) { transform: translate(14px, 0px); }
.particle-button:hover .dot:nth-child(4), .particle-button.active .dot:nth-child(4) { transform: translate(10px, 10px); }
.particle-button:hover .dot:nth-child(5), .particle-button.active .dot:nth-child(5) { transform: translate(0px, 14px); }
.particle-button:hover .dot:nth-child(6), .particle-button.active .dot:nth-child(6) { transform: translate(-10px, 10px); }
.particle-button:hover .dot:nth-child(7), .particle-button.active .dot:nth-child(7) { transform: translate(-14px, 0px); }
.particle-button:hover .dot:nth-child(8), .particle-button.active .dot:nth-child(8) { transform: translate(-10px, -10px); }

/* 3. Rotación del botón */
.particle-button:hover,
.particle-button.active {
  transform: rotate(180deg);
}

.menu-desplegablev {
  position: fixed;
  top: 0;
  left: 0;
  width: 100px;
  height: 100vh;
  
  /* --- FONDO CON BRILLO REDUCIDO --- */
  /* Ahora empieza mucho más oscuro (casi negro) arriba */
  background: linear-gradient(
      180deg, 
      rgba(25, 25, 25, 0.9) 0%,    /* <--- Más oscuro y menos transparente arriba */
      rgba(0, 0, 0, 0.8) 20%,      /* <--- Transición rápida al negro */
      rgba(0, 0, 0, 0.6) 100%      /* <--- Mantiene la transparencia abajo */
  );
  
  /* Mantenemos el desenfoque */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  
  /* Borde derecho dorado */
  border-right: 1px solid rgba(212, 175, 55, 0.3);
  
  /* --- SOMBRAS SUAVIZADAS --- */
  box-shadow: 
      /* Reduje la luz blanca del borde (0.03 es muy sutil) */
      inset 1px 1px 0px rgba(255, 255, 255, 0.03),
      /* Sombra negra externa */
      4px 0 30px rgba(0, 0, 0, 0.5);
  
  /* Resto de propiedades (iguales) */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 120px;
  transform: translateX(-100%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2999;
}


.menu-desplegablev {
  position: fixed;
  top: 0;
  left: 0;
  width: 100px;
  height: 100vh;
  
  /* --- FONDO CON BRILLO REDUCIDO --- */
  /* Ahora empieza mucho más oscuro (casi negro) arriba */
  background: linear-gradient(
      180deg, 
      rgba(25, 25, 25, 0.9) 0%,    /* <--- Más oscuro y menos transparente arriba */
      rgba(0, 0, 0, 0.8) 20%,      /* <--- Transición rápida al negro */
      rgba(0, 0, 0, 0.6) 100%      /* <--- Mantiene la transparencia abajo */
  );
  
  /* Mantenemos el desenfoque */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  
  /* Borde derecho dorado */
  border-right: 1px solid rgba(212, 175, 55, 0.3);
  
  /* --- SOMBRAS SUAVIZADAS --- */
  box-shadow: 
      /* Reduje la luz blanca del borde (0.03 es muy sutil) */
      inset 1px 1px 0px rgba(255, 255, 255, 0.03),
      /* Sombra negra externa */
      4px 0 30px rgba(0, 0, 0, 0.5);
  
  /* Resto de propiedades (iguales) */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 120px;
  transform: translateX(-100%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2999;
}

.menu-desplegablev {
  position: fixed;
  top: 0;
  left: 0;
  width: 100px;
  height: 100vh;
  
  /* --- TRANSPARENCIA EXTREMA (90% Transparente) --- */
  /* Usamos 0.1 (10% visible) y bajamos a 0.05 (5% visible) */
  background: linear-gradient(
      180deg, 
      rgba(0, 0, 0, 0.15) 0%,    /* Apenas visible arriba */
      rgba(0, 0, 0, 0.05) 100%   /* Casi invisible abajo */
  );
  
  /* Aumentamos el desenfoque para que se note que "ahí hay algo" */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  
  /* Borde dorado muy fino para delimitar */
  border-right: 1px solid rgba(212, 175, 55, 0.2);
  
  /* Sombra suave pero necesaria para separarlo del fondo */
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
  
  /* Resto de propiedades */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 120px;
  transform: translateX(-100%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2999;
}



/* =======================================================
   ESTILOS EXCLUSIVOS: MESA DE AYUDA (FINAL - TÍTULOS BLANCOS)
   ======================================================= */

body.soporte-page {
    background-image: url('imagenes/fondoproa2.png');
    background-size: cover;
    background-attachment: fixed;
    background-position: center top;
    
    display: block !important; 
    height: auto !important;
    min-height: 100vh;
    padding: 0 !important;
    overflow-x: hidden;
    font-family: "Montserrat", sans-serif;
}

body.soporte-page form { display: block !important; }

/* Contenedor Principal */
.soporte-main-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 140px;
    padding-bottom: 60px;
}

/* Cabecera */
.soporte-header { text-align: center; margin-bottom: 40px; }
.soporte-header h1 {
    color: white;
    font-size: 36px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 10px;
    text-shadow: 0 4px 15px rgba(0,0,0,0.6);
}

/* Grid de dos columnas */
.soporte-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 40px;
    align-items: start;
}

/* Tarjetas */
.soporte-card {
    background: rgba(10, 15, 25, 0.9);
    border: 1px solid rgba(43, 125, 233, 0.3);
    border-radius: 20px;
    padding: 30px;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    position: relative;
}

/* --- CAMBIO: TÍTULOS DE TARJETAS A BLANCO --- */
.soporte-card h2 {
    color: #ffffff; /* Antes era azul, ahora blanco */
    font-size: 18px;
    margin-bottom: 25px;
    border-bottom: 2px solid rgba(43, 125, 233, 0.3);
    padding-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: left;
}

/* Inputs */
.soporte-card input, 
.soporte-card select, 
.soporte-card textarea {
    background: #0f1724;
    border: 1px solid #2a3b55;
    color: white;
    padding: 12px;
    border-radius: 8px;
    width: 100%;
}

.soporte-card input:focus, 
.soporte-card select:focus, 
.soporte-card textarea:focus {
    border-color: #2b7de9;
    outline: none;
    box-shadow: 0 0 10px rgba(43, 125, 233, 0.2);
}

/* Botón Enviar */
.btn-soporte-submit {
    background: linear-gradient(135deg, #2b7de9, #1a5bb8);
    color: white;
    border: none;
    padding: 15px;
    width: 100%;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    text-transform: uppercase;
    margin-top: 15px;
    transition: transform 0.2s, box-shadow 0.2s;
    letter-spacing: 1px;
}
.btn-soporte-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(43, 125, 233, 0.4);
    background: linear-gradient(135deg, #449bf2, #2b7de9);
}

/* Tabla */
.soporte-table { width: 100%; border-collapse: separate; border-spacing: 0 10px; }
.soporte-table th {
    text-align: left;
    color: #449bf2; /* Encabezados de tabla se mantienen azules para contraste */
    padding: 10px;
    font-size: 12px;
    text-transform: uppercase;
    opacity: 0.9;
}
.soporte-table tbody tr {
    background: rgba(255,255,255,0.02);
    transition: background 0.2s;
}
.soporte-table tbody tr:hover { background: rgba(43, 125, 233, 0.08); }

.soporte-table td {
    padding: 15px;
    color: #ddd;
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    vertical-align: middle;
}
.soporte-table td:first-child { border-left: 1px solid rgba(255,255,255,0.05); border-radius: 10px 0 0 10px; }
.soporte-table td:last-child { border-right: 1px solid rgba(255,255,255,0.05); border-radius: 0 10px 10px 0; }

/* Botón Ver */
.btn-ver-detalle {
    background: transparent;
    border: 1px solid #4a5d75;
    color: #8da2b5;
    width: 38px; height: 38px;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.btn-ver-detalle:hover {
    background: #2b7de9;
    color: white;
    border-color: #2b7de9;
    box-shadow: 0 0 10px rgba(43, 125, 233, 0.5);
}

/* Badges */
.badge { padding: 5px 12px; border-radius: 20px; font-size: 11px; font-weight: 800; text-transform: uppercase; display: inline-block; letter-spacing: 0.5px; }
.badge-Pendiente { background: rgba(255, 193, 7, 0.15); color: #FFC107; border: 1px solid rgba(255, 193, 7, 0.3); }
.badge-En, .badge-Revision { background: rgba(43, 125, 233, 0.15); color: #449bf2; border: 1px solid rgba(43, 125, 233, 0.3); }
.badge-Resuelto { background: rgba(0, 230, 118, 0.15); color: #00E676; border: 1px solid rgba(0, 230, 118, 0.3); }
.badge-Cancelado { background: rgba(255, 82, 82, 0.15); color: #FF5252; border: 1px solid rgba(255, 82, 82, 0.3); }

/* Modal */
.soporte-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: none; justify-content: center; align-items: center;
    opacity: 0; transition: opacity 0.3s;
}
.soporte-modal-overlay.active { display: flex; opacity: 1; }

.soporte-modal-content {
    background: #0f1724;
    border: 1px solid #2a3b55;
    width: 90%; max-width: 600px;
    border-radius: 16px;
    padding: 0;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
    overflow: hidden;
    transform: translateY(20px); transition: transform 0.3s;
}
.soporte-modal-overlay.active .soporte-modal-content { transform: translateY(0); }

/* Cabecera del Modal */
.modal-header-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    padding: 25px;
    background: rgba(43, 125, 233, 0.1);
    border-bottom: 1px solid rgba(43, 125, 233, 0.2);
    gap: 15px;
}

/* --- CAMBIO: TÍTULO DEL MODAL A BLANCO --- */
.modal-title-box h2 {
    margin: 0;
    color: #ffffff; /* Ahora blanco */
    font-size: 20px;
    line-height: 1.4;
    word-break: break-word;
}

.soporte-modal-close {
    background: transparent;
    border: none;
    color: #6c7a89;
    font-size: 28px;
    cursor: pointer;
    line-height: 0.8;
    padding: 0;
    transition: color 0.3s;
}
.soporte-modal-close:hover { color: #ff5252; }

.modal-body { padding: 30px; }
.modal-label { color: #449bf2; font-size: 11px; font-weight: 700; text-transform: uppercase; margin-bottom: 8px; letter-spacing: 1px; }
.modal-desc-box { background: #162030; border: 1px solid #2a3b55; padding: 15px; border-radius: 8px; color: #e2e8f0; font-size: 14px; line-height: 1.6; margin-bottom: 25px; }

@media (max-width: 900px) {
    .soporte-grid { grid-template-columns: 1fr; }
    .soporte-main-container { padding-top: 100px; }
}



/* =======================================================
   AGREGAR AL FINAL DE TU STYLE.CSS
   (Estilos para Pestañas y Botones Alineados)
   ======================================================= */

/* --- 1. CONTENEDOR DE PESTAÑAS --- */
.tabs-header {
    display: flex;
    gap: 20px;
    border-bottom: 1px solid rgba(43, 125, 233, 0.3);
    margin-bottom: 25px;
    padding-bottom: 10px;
}

.tab-btn {
    background: transparent;
    border: none;
    color: #6c7a89; /* Gris apagado */
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    padding: 8px 15px;
    border-radius: 8px;
    transition: all 0.3s;
    position: relative;
}

.tab-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

/* Estado Activo (La pestaña seleccionada) */
.tab-btn.active {
    color: #449bf2; /* Azul brillante */
    background: rgba(43, 125, 233, 0.15);
}

/* Línea decorativa debajo de la activa */
.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -11px; /* Ajustado para pegar con el borde del contenedor */
    left: 0;
    width: 100%;
    height: 2px;
    background: #449bf2;
    box-shadow: 0 0 10px #449bf2;
}

/* --- 2. CONTENIDO DE LAS PESTAÑAS --- */
.tab-content {
    display: none; /* Oculto por defecto */
    animation: fadeIn 0.4s ease;
}
.tab-content.active {
    display: block; /* Visible si tiene la clase active */
}

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

/* --- 3. CORRECCIÓN DE BOTONES (OJO Y X) --- */
/* Esta clase unifica el tamaño de ambos botones */
.btn-action-circle {
    width: 36px;       /* Ancho fijo */
    height: 36px;      /* Alto fijo */
    border-radius: 50%;
    display: inline-flex; /* Centrado perfecto flex */
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent; /* Base */
    background: transparent;
}

/* Estilo específico Ver (Ojo) */
.btn-view {
    border-color: #4a5d75;
    color: #8da2b5;
}
.btn-view:hover {
    background: #2b7de9;
    border-color: #2b7de9;
    color: white;
    box-shadow: 0 0 10px rgba(43, 125, 233, 0.5);
}

/* Estilo específico Cancelar (X) */
.btn-cancel {
    border-color: #ff5252;
    color: #ff5252;
    margin-left: 8px; /* Separación con el ojo */
}
.btn-cancel:hover {
    background: #ff5252;
    color: white;
    box-shadow: 0 0 10px rgba(255, 82, 82, 0.5);
}

/* Iconos dentro */
.btn-action-circle i {
    font-size: 14px; /* Tamaño unificado del icono */
    line-height: 0;
}


/* =======================================================
   ESTILOS EXCLUSIVOS: MESA DE AYUDA (FINAL Y ALINEADO)
   ======================================================= */

body.soporte-page {
    background-image: url('imagenes/fondoproa2.png');
    background-size: cover;
    background-attachment: fixed;
    background-position: center top;
    
    display: block !important; 
    height: auto !important;
    min-height: 100vh;
    padding: 0 !important;
    overflow-x: hidden;
    font-family: "Montserrat", sans-serif;
}

/* --- REGLA IMPORTANTE: VISIBILIDAD DE FORMULARIOS --- */
/* 1. Formulario Principal (Crear): Debe ser bloque */
body.soporte-page form { 
    display: block !important; 
}

/* 2. Formulario de Tabla (Cancelar): Debe ser inline para no desalinear el botón */
.soporte-table form {
    display: inline-block !important;
    margin: 0;
    padding: 0;
    width: auto;
    background: transparent;
    border: none;
}

/* Contenedor Principal */
.soporte-main-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 140px;
    padding-bottom: 60px;
}

/* Cabecera */
.soporte-header { text-align: center; margin-bottom: 40px; }
.soporte-header h1 {
    color: white;
    font-size: 36px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 10px;
    text-shadow: 0 4px 15px rgba(0,0,0,0.6);
}

/* Grid de dos columnas */
.soporte-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 40px;
    align-items: start;
}

/* Tarjetas */
.soporte-card {
    background: rgba(10, 15, 25, 0.9);
    border: 1px solid rgba(43, 125, 233, 0.3);
    border-radius: 20px;
    padding: 30px;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    position: relative;
}

.soporte-card h2 {
    color: #ffffff; 
    font-size: 18px;
    margin-bottom: 25px;
    border-bottom: 2px solid rgba(43, 125, 233, 0.3);
    padding-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: left;
}

/* Inputs */
.soporte-card input, 
.soporte-card select, 
.soporte-card textarea {
    background: #0f1724;
    border: 1px solid #2a3b55;
    color: white;
    padding: 12px;
    border-radius: 8px;
    width: 100%;
}

.soporte-card input:focus, 
.soporte-card select:focus, 
.soporte-card textarea:focus {
    border-color: #2b7de9;
    outline: none;
    box-shadow: 0 0 10px rgba(43, 125, 233, 0.2);
}

/* Botón Enviar */
.btn-soporte-submit {
    background: linear-gradient(135deg, #2b7de9, #1a5bb8);
    color: white;
    border: none;
    padding: 15px;
    width: 100%;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    text-transform: uppercase;
    margin-top: 15px;
    transition: transform 0.2s, box-shadow 0.2s;
    letter-spacing: 1px;
}
.btn-soporte-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(43, 125, 233, 0.4);
    background: linear-gradient(135deg, #449bf2, #2b7de9);
}

/* PESTAÑAS (TABS) */
.tabs-header {
    display: flex;
    gap: 15px;
    border-bottom: 1px solid rgba(43, 125, 233, 0.3);
    margin-bottom: 20px;
    padding-bottom: 0;
}

.tab-btn {
    background: transparent;
    border: none;
    color: #6c7a89;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    padding: 10px 15px;
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
}

.tab-btn:hover { color: #fff; }

.tab-btn.active {
    color: #449bf2;
    border-bottom: 2px solid #449bf2;
}

.tab-content {
    display: none;
    animation: fadeIn 0.4s ease;
}
.tab-content.active { display: block; }

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

/* Tabla */
.soporte-table { width: 100%; border-collapse: separate; border-spacing: 0 10px; }
.soporte-table th {
    text-align: left;
    color: #449bf2;
    padding: 10px;
    font-size: 11px;
    text-transform: uppercase;
    opacity: 0.9;
    letter-spacing: 0.5px;
}
.soporte-table tbody tr {
    background: rgba(255,255,255,0.02);
    transition: background 0.2s;
}
.soporte-table tbody tr:hover { background: rgba(43, 125, 233, 0.08); }

.soporte-table td {
    padding: 12px 15px;
    color: #ddd;
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    vertical-align: middle;
}
.soporte-table td:first-child { border-left: 1px solid rgba(255,255,255,0.05); border-radius: 10px 0 0 10px; }
.soporte-table td:last-child { border-right: 1px solid rgba(255,255,255,0.05); border-radius: 0 10px 10px 0; }

/* === BOTONES DE ACCIÓN (GEMELOS ALINEADOS) === */
.btn-action-circle {
    width: 34px;       /* Tamaño Fijo */
    height: 34px;      /* Tamaño Fijo */
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
    padding: 0;
    vertical-align: middle;
    margin: 0 4px;     /* Separación horizontal */
    text-decoration: none;
}

.btn-action-circle i {
    font-size: 14px;
    line-height: 1;
    display: block;
}

/* Estilo Botón Ver */
.btn-view { border: 1px solid #4a5d75; color: #8da2b5; }
.btn-view:hover {
    background: #2b7de9; border-color: #2b7de9; color: white;
    box-shadow: 0 0 10px rgba(43, 125, 233, 0.5);
}

/* Estilo Botón Cancelar */
.btn-cancel { border: 1px solid #ff5252; color: #ff5252; }
.btn-cancel:hover {
    background: #ff5252; border-color: #ff5252; color: white;
    box-shadow: 0 0 10px rgba(255, 82, 82, 0.5);
}

/* Badges */
.badge { padding: 5px 12px; border-radius: 20px; font-size: 10px; font-weight: 800; text-transform: uppercase; display: inline-block; letter-spacing: 0.5px; }
.badge-Pendiente { background: rgba(255, 193, 7, 0.15); color: #FFC107; border: 1px solid rgba(255, 193, 7, 0.3); }
.badge-En, .badge-Revision { background: rgba(43, 125, 233, 0.15); color: #449bf2; border: 1px solid rgba(43, 125, 233, 0.3); }
.badge-Resuelto { background: rgba(0, 230, 118, 0.15); color: #00E676; border: 1px solid rgba(0, 230, 118, 0.3); }
.badge-Cancelado { background: rgba(255, 82, 82, 0.15); color: #FF5252; border: 1px solid rgba(255, 82, 82, 0.3); }

/* Modal */
.soporte-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: none; justify-content: center; align-items: center;
    opacity: 0; transition: opacity 0.3s;
}
.soporte-modal-overlay.active { display: flex; opacity: 1; }

.soporte-modal-content {
    background: #0f1724;
    border: 1px solid #2a3b55;
    width: 90%; max-width: 600px;
    border-radius: 16px;
    padding: 0;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
    overflow: hidden;
    transform: translateY(20px); transition: transform 0.3s;
}
.soporte-modal-overlay.active .soporte-modal-content { transform: translateY(0); }

.modal-header-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    padding: 25px;
    background: rgba(43, 125, 233, 0.1);
    border-bottom: 1px solid rgba(43, 125, 233, 0.2);
    gap: 15px;
}

.modal-title-box h2 {
    margin: 0; color: #ffffff; font-size: 20px; line-height: 1.4; word-break: break-word;
}

.soporte-modal-close {
    background: transparent; border: none; color: #6c7a89; font-size: 28px;
    cursor: pointer; line-height: 0.8; padding: 0; transition: color 0.3s;
}
.soporte-modal-close:hover { color: #ff5252; }

.modal-body { padding: 30px; }
.modal-label { color: #449bf2; font-size: 11px; font-weight: 700; text-transform: uppercase; margin-bottom: 8px; letter-spacing: 1px; }
.modal-desc-box { background: #162030; border: 1px solid #2a3b55; padding: 15px; border-radius: 8px; color: #e2e8f0; font-size: 14px; line-height: 1.6; margin-bottom: 25px; }

@media (max-width: 900px) {
    .soporte-grid { grid-template-columns: 1fr; }
    .soporte-main-container { padding-top: 100px; }
}

/* =======================================================
   CORRECCIÓN FINAL: BOTONES LADO A LADO (HORIZONTAL)
   Pega esto al final de tu style.css
   ======================================================= */

/* 1. Forzamos a la celda de acciones a ser una fila flexible */
.soporte-table td:last-child {
    display: flex !important;           /* Activa Flexbox */
    flex-direction: row !important;     /* Dirección Horizontal obligatoria */
    justify-content: center !important; /* Centrados horizontalmente */
    align-items: center !important;     /* Centrados verticalmente */
    gap: 12px !important;               /* Espacio entre el Ojo y la X */
    white-space: nowrap !important;     /* Evita que se bajen si falta espacio */
    height: 100%;                       /* Asegura altura completa */
}

/* 2. Anulamos el comportamiento de bloque del formulario */
.soporte-table form {
    display: flex !important;           /* Se comporta como caja flexible */
    margin: 0 !important;               /* Sin márgenes extraños */
    padding: 0 !important;
}

/* 3. Aseguramos que los botones mantengan su forma circular perfecta */
.btn-action-circle {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important; /* Evita que se aplasten */
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin: 0 !important; /* Quitamos márgenes individuales */
}

/* =======================================================
   CENTRO DE CONTROL (ADMIN DASHBOARD)
   ======================================================= */

.control-container {
    width: 95%;
    max-width: 1400px;
    margin: 0 auto;
    padding-top: 120px;
    padding-bottom: 50px;
}

.control-section {
    margin-bottom: 50px;
    animation: fadeIn 0.5s ease;
}

.control-title {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    border-left: 5px solid #00ff84; /* Verde PROA */
    padding-left: 15px;
    margin-bottom: 25px;
    text-shadow: 0 0 10px rgba(0, 255, 132, 0.3);
}

/* GRID DE TARJETAS */
.control-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
}

/* TARJETA DE CONTROL */
.control-card {
    background: rgba(15, 20, 25, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 25px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
}

/* Efecto Hover: Levantar y Brillar */
.control-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-color: rgba(0, 255, 132, 0.5);
}

/* Icono Grande */
.control-card i {
    font-size: 32px;
    margin-bottom: 15px;
    color: #00ff84; /* Verde por defecto */
    transition: color 0.3s;
}

/* Título de la Tarjeta */
.control-card h3 {
    color: #fff;
    font-size: 18px;
    margin-bottom: 8px;
    font-weight: 700;
}

/* Descripción */
.control-card p {
    color: #aaa;
    font-size: 13px;
    line-height: 1.4;
}

/* --- VARIANTES DE COLOR POR SECCIÓN --- */

/* Administración (Azul) */
.card-admin:hover { border-color: #2b7de9; }
.card-admin i { color: #2b7de9; }
.card-admin:hover i { text-shadow: 0 0 15px rgba(43, 125, 233, 0.6); }

/* Negocios (Verde PROA) */
.card-business:hover { border-color: #00ff84; }
.card-business i { color: #00ff84; }
.card-business:hover i { text-shadow: 0 0 15px rgba(0, 255, 132, 0.6); }

/* Áreas de Apoyo (Amarillo/Dorado) */
.card-support:hover { border-color: #FFC107; }
.card-support i { color: #FFC107; }
.card-support:hover i { text-shadow: 0 0 15px rgba(255, 193, 7, 0.6); }

/* Badge de "Solo Admin" */
.admin-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    color: #aaa;
    text-transform: uppercase;
}

/* =======================================================
   ESTILO "TECH-ADMIN": CENTRO DE COMANDO FUTURISTA
   ======================================================= */

/* 1. FONDO ANIMADO "LUCES EN MOVIMIENTO" */
@keyframes tech-plasma {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

body.tech-admin {
    /* Fondo degradado profundo que se mueve */
    background: linear-gradient(-45deg, #050a14, #001f3f, #0a0a0a, #002b36);
    background-size: 400% 400%;
    animation: tech-plasma 15s ease infinite;
    
    /* Malla digital superpuesta (Grid) */
    background-image: 
        linear-gradient(rgba(0, 255, 132, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 132, 0.03) 1px, transparent 1px);
    background-size: 40px 40px, 40px 40px; /* Tamaño de la cuadrícula */
    
    min-height: 100vh;
    font-family: 'Orbitron', 'Segoe UI', sans-serif; /* Fuente tecnológica si está disponible */
    color: #e0f2f1;
    overflow-x: hidden;
    padding: 0;
    margin: 0;
    display: block !important;
}

/* 2. ENCABEZADO TECNOLÓGICO */
.tech-header {
    text-align: center;
    padding-top: 80px;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.tech-title {
    font-size: 45px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #fff;
    text-shadow: 
        0 0 10px rgba(0, 255, 132, 0.8),
        0 0 20px rgba(0, 255, 132, 0.4);
    margin: 0;
}

.tech-subtitle {
    color: #00bcd4; /* Cian eléctrico */
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 10px;
    font-family: monospace; /* Estilo código */
}

/* 3. GRID Y TARJETAS HOLOGRÁFICAS */
.tech-grid-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    padding: 20px;
    padding-bottom: 80px;
}

.tech-card {
    position: relative;
    background: rgba(10, 20, 30, 0.6); /* Vidrio oscuro */
    backdrop-filter: blur(10px);        /* Desenfoque fondo */
    border: 1px solid rgba(0, 255, 255, 0.1);
    border-radius: 12px;
    padding: 30px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efecto rebote suave */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Decoración de esquinas tecnológicas */
.tech-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 20px; height: 20px;
    border-top: 2px solid rgba(0, 255, 255, 0.5);
    border-left: 2px solid rgba(0, 255, 255, 0.5);
    border-top-left-radius: 12px;
    transition: all 0.3s;
}
.tech-card::after {
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    width: 20px; height: 20px;
    border-bottom: 2px solid rgba(0, 255, 255, 0.5);
    border-right: 2px solid rgba(0, 255, 255, 0.5);
    border-bottom-right-radius: 12px;
    transition: all 0.3s;
}

/* === ANIMACIÓN HOVER (LA MAGIA) === */
.tech-card:hover {
    transform: translateY(-10px) scale(1.03);
    background: rgba(10, 20, 30, 0.8);
    box-shadow: 
        0 0 30px rgba(0, 255, 132, 0.2), /* Resplandor verde */
        inset 0 0 20px rgba(0, 255, 255, 0.1); /* Resplandor interno */
    border-color: #00ff84;
}

.tech-card:hover::before,
.tech-card:hover::after {
    width: 100%; height: 100%; /* Las esquinas se expanden para cubrir todo el borde */
    border-color: #00ff84;
    opacity: 0.3;
}

/* Iconos */
.tech-icon {
    font-size: 40px;
    margin-bottom: 20px;
    background: -webkit-linear-gradient(45deg, #00ff84, #00bcd4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 5px rgba(0,255,132,0.5));
    transition: transform 0.3s;
}

.tech-card:hover .tech-icon {
    transform: scale(1.2) rotate(5deg);
    filter: drop-shadow(0 0 15px rgba(0,255,255,0.8));
}

/* Textos */
.tech-card h3 {
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 10px 0;
    letter-spacing: 1px;
}

.tech-card p {
    color: #a0c0d0;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
}

/* Badge Neon */
.tech-badge {
    position: absolute;
    top: 15px; right: 15px;
    background: rgba(0, 255, 255, 0.1);
    color: #00ff84;
    padding: 4px 8px;
    font-size: 10px;
    border-radius: 4px;
    border: 1px solid #00ff84;
    text-transform: uppercase;
    box-shadow: 0 0 10px rgba(0, 255, 132, 0.2);
}

/* Botón Regresar Flotante */
.tech-back-btn {
    position: fixed;
    top: 30px; left: 30px;
    background: rgba(0,0,0,0.5);
    border: 1px solid #00bcd4;
    color: #00bcd4;
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    backdrop-filter: blur(5px);
    transition: all 0.3s;
    z-index: 100;
}
.tech-back-btn:hover {
    background: #00bcd4;
    color: #000;
    box-shadow: 0 0 20px #00bcd4;
}

/* Info Usuario Esquina */
.tech-user {
    position: fixed;
    top: 30px; right: 30px;
    color: #00ff84;
    font-family: monospace;
    background: rgba(0,0,0,0.6);
    padding: 8px 15px;
    border-radius: 5px;
    border: 1px dashed #00ff84;
}

/* =======================================================
   ESTILO "TECH-ADMIN": CENTRO DE COMANDO (CORREGIDO)
   ======================================================= */

/* Animación de fondo vivo */
@keyframes tech-plasma {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- BODY REFORZADO (Para eliminar el fondo blanco) --- */
body.tech-admin {
    /* 1. Fondo base sólido (negro azulado) por si falla la imagen */
    background-color: #050a14 !important;
    
    /* 2. Degradado animado (Ciberpunk) */
    background: linear-gradient(-45deg, #050a14, #001f3f, #0a0a0a, #002b36) !important;
    background-size: 400% 400% !important;
    
    /* 3. Animación */
    animation: tech-plasma 15s ease infinite !important;
    
    /* 4. Propiedades de texto y layout */
    min-height: 100vh !important;
    width: 100% !important;
    font-family: 'Orbitron', 'Segoe UI', sans-serif !important;
    color: #e0f2f1 !important;
    overflow-x: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important; /* Anula flexbox de otros layouts */
}

/* 2. ENCABEZADO TECNOLÓGICO */
.tech-header {
    text-align: center;
    padding-top: 80px;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.tech-title {
    font-size: 45px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #fff !important;
    text-shadow: 
        0 0 10px rgba(0, 255, 132, 0.8),
        0 0 20px rgba(0, 255, 132, 0.4);
    margin: 0;
}

.tech-subtitle {
    color: #00bcd4 !important;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 10px;
    font-family: monospace;
}

/* 3. GRID Y TARJETAS */
.tech-grid-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    padding: 20px;
    padding-bottom: 80px;
}

.tech-card {
    position: relative;
    background: rgba(10, 20, 30, 0.6) !important; /* Vidrio oscuro forzado */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 255, 255, 0.1);
    border-radius: 12px;
    padding: 30px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Esquinas decorativas */
.tech-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 20px; height: 20px;
    border-top: 2px solid rgba(0, 255, 255, 0.5);
    border-left: 2px solid rgba(0, 255, 255, 0.5);
    border-top-left-radius: 12px; transition: all 0.3s;
}
.tech-card::after {
    content: ''; position: absolute; bottom: 0; right: 0; width: 20px; height: 20px;
    border-bottom: 2px solid rgba(0, 255, 255, 0.5);
    border-right: 2px solid rgba(0, 255, 255, 0.5);
    border-bottom-right-radius: 12px; transition: all 0.3s;
}

/* Hover */
.tech-card:hover {
    transform: translateY(-10px) scale(1.03);
    background: rgba(10, 20, 30, 0.9) !important;
    box-shadow: 0 0 30px rgba(0, 255, 132, 0.2), inset 0 0 20px rgba(0, 255, 255, 0.1);
    border-color: #00ff84;
}
.tech-card:hover::before, .tech-card:hover::after {
    width: 100%; height: 100%; border-color: #00ff84; opacity: 0.3;
}

/* Iconos (Con prefijos webkit para compatibilidad) */
.tech-icon {
    font-size: 40px;
    margin-bottom: 20px;
    background: linear-gradient(45deg, #00ff84, #00bcd4); /* Estándar */
    background: -webkit-linear-gradient(45deg, #00ff84, #00bcd4); /* Safari/Chrome */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #00ff84; /* Fallback por si falla el gradiente */
    filter: drop-shadow(0 0 5px rgba(0,255,132,0.5));
    transition: transform 0.3s;
    display: inline-block;
}

.tech-card:hover .tech-icon {
    transform: scale(1.2) rotate(5deg);
    filter: drop-shadow(0 0 15px rgba(0,255,255,0.8));
}

.tech-card h3 {
    color: #ffffff !important;
    font-size: 20px; font-weight: 700; margin: 0 0 10px 0; letter-spacing: 1px;
}

.tech-card p {
    color: #a0c0d0 !important;
    font-size: 13px; line-height: 1.5; margin: 0; font-family: 'Segoe UI', sans-serif;
}

.tech-badge {
    position: absolute; top: 15px; right: 15px;
    background: rgba(0, 255, 255, 0.1); color: #00ff84;
    padding: 4px 8px; font-size: 10px; border-radius: 4px;
    border: 1px solid #00ff84; text-transform: uppercase;
}

.tech-back-btn {
    position: fixed; top: 30px; left: 30px;
    background: rgba(0,0,0,0.5); border: 1px solid #00bcd4; color: #00bcd4;
    padding: 10px 20px; border-radius: 30px; text-decoration: none; font-weight: bold;
    backdrop-filter: blur(5px); transition: all 0.3s; z-index: 100;
}
.tech-back-btn:hover { background: #00bcd4; color: #000; box-shadow: 0 0 20px #00bcd4; }

.tech-user {
    position: fixed; top: 30px; right: 30px;
    color: #00ff84; font-family: monospace; background: rgba(0,0,0,0.6);
    padding: 8px 15px; border-radius: 5px; border: 1px dashed #00ff84; z-index: 100;
}

/* =======================================================
   COHETE FUTURISTA (DRONE GUARDIÁN)
   ======================================================= */

#cyber-rocket {
    position: fixed;
    z-index: 9999;
    width: 50px;
    height: 50px;
    pointer-events: auto; /* Para detectar el mouse */
    cursor: pointer;
    transition: transform 0.2s linear; /* Rotación suave */
    filter: drop-shadow(0 0 10px #00ff84);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* El cuerpo del cohete */
#rocket-icon {
    font-size: 40px;
    color: #fff;
    transform: rotate(45deg); /* Ajuste inicial del icono */
}

/* Fuego del motor (Animado) */
.rocket-engine {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 20px;
    background: linear-gradient(to bottom, #00ff84, transparent);
    border-radius: 50%;
    animation: engine-pulse 0.1s infinite alternate;
    opacity: 0.8;
    z-index: -1;
}

@keyframes engine-pulse {
    from { height: 15px; opacity: 0.6; }
    to { height: 25px; opacity: 1; }
}

/* Globo de texto (Hola) */
.rocket-speech {
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 255, 132, 0.9);
    color: #000;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    font-family: 'Orbitron', monospace;
    white-space: nowrap;
    opacity: 0; /* Oculto por defecto */
    transition: opacity 0.3s;
    pointer-events: none;
    box-shadow: 0 0 15px rgba(0, 255, 132, 0.6);
}

/* Flechita del globo */
.rocket-speech::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #00ff84 transparent transparent transparent;
}

/* Clase para mostrar el saludo */
.rocket-speech.visible {
    opacity: 1;
}

/* =======================================================
   COHETE FUTURISTA (DRONE GUARDIÁN - TUNING v2)
   ======================================================= */

#cyber-rocket {
    position: fixed;
    z-index: 9999;
    width: 60px;  /* Un poco más grande */
    height: 60px;
    pointer-events: auto;
    cursor: pointer;
    transition: transform 0.1s linear; /* Movimiento fluido */
    filter: drop-shadow(0 0 15px rgba(0, 255, 132, 0.6));
    display: flex;
    justify-content: center;
    align-items: center;
}

/* El cuerpo del cohete (Lo rotamos para que apunte ARRIBA) */
#rocket-icon {
    font-size: 40px;
    color: #fff;
    transform: rotate(45deg); /* Esto endereza el icono fa-rocket */
    z-index: 2; /* Encima del fuego */
}

/* Fuego del motor (Visible y Brillante) */
.rocket-engine {
    position: absolute;
    bottom: 5px; /* Ajustado para salir de la cola */
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 35px; /* Llama más larga */
    
    /* Gradiente de fuego espacial (Blanco -> Verde -> Transparente) */
    background: linear-gradient(to bottom, #ffffff, #00ff84, transparent);
    
    border-radius: 50%;
    animation: engine-pulse 0.1s infinite alternate;
    opacity: 0.9;
    z-index: 1; /* Detrás del cohete */
    filter: blur(2px); /* Efecto de calor */
}

@keyframes engine-pulse {
    from { height: 30px; opacity: 0.7; }
    to { height: 45px; opacity: 1; }
}

/* Globo de texto */
.rocket-speech {
    position: absolute;
    top: -50px; /* Más arriba */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: #00ff84;
    border: 1px solid #00ff84;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    font-family: 'Orbitron', monospace;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(0, 255, 132, 0.3);
}

.rocket-speech.visible { opacity: 1; }

/* =======================================================
   COHETE V3 (ESTABILIZADO Y ALINEADO)
   ======================================================= */

#cyber-rocket {
    position: fixed;
    z-index: 9999;
    width: 60px;
    height: 60px;
    pointer-events: auto;
    cursor: pointer;
    /* El origen del giro es el centro */
    transform-origin: center center;
    transition: transform 0.1s linear; /* Suavizado de giro */
    filter: drop-shadow(0 0 10px rgba(0, 255, 132, 0.8));
    
    /* Flex para centrar */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Cuerpo del cohete */
#rocket-icon {
    font-size: 40px;
    color: #fff;
    /* FontAwesome fa-rocket apunta 45 grados arriba-derecha.
       Le sumamos 45deg para que apunte totalmente a la DERECHA (90deg visuales) */
    transform: rotate(45deg);
    position: relative;
    z-index: 2;
}

/* Fuego del motor */
.rocket-engine {
    position: absolute;
    /* Lo colocamos a la IZQUIERDA del centro (la cola) */
    left: 5px; 
    top: 50%;
    
    width: 25px; /* Largo de la llama */
    height: 8px; /* Grosor */
    
    /* Gradiente horizontal (Verde -> Transparente) */
    background: linear-gradient(to left, #ffffff, #00ff84, transparent);
    
    border-radius: 50%;
    animation: engine-pulse 0.1s infinite alternate;
    opacity: 0.9;
    z-index: 1;
    transform: translateY(-50%); /* Centrado vertical perfecto */
}

@keyframes engine-pulse {
    from { width: 20px; opacity: 0.6; }
    to { width: 35px; opacity: 1; }
}

/* Globo de texto (Siempre horizontal) */
.rocket-speech {
    position: absolute;
    /* Lo sacamos del flujo de rotación en el JS, 
       pero aquí lo posicionamos inicialmente */
    top: -40px;
    left: 50%;
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid #00ff84;
    color: #00ff84;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-family: 'Orbitron', monospace;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    font-weight: bold;
}
.rocket-speech.visible { opacity: 1; }

/* === CORRECCIÓN SCROLL (ELEMENTOS NO FLOTANTES) === */

/* El botón volver ahora se queda arriba */
.tech-back-btn {
    position: absolute; /* Antes era fixed */
    top: 30px; 
    left: 30px;
    /* El resto sigue igual */
}

/* Las alertas aparecen arriba y se quedan ahí */
.tech-alert {
    position: absolute; /* Antes era fixed */
    top: auto; 
    right: auto; 
    margin: 20px auto; /* Centrado */
    width: 20%;
    text-align: center;
    z-index: 10;
    /* Animación y estilo visual se mantienen */
}


/* =======================================================
   CORRECCIÓN FINAL: BARRA LATERAL HÍBRIDA
   (Sirve para Visor oculto y Sidebar fijo)
   ======================================================= */

/* 1. ESTADO BASE (Oculto por defecto - Para Visor Integral) */
.menu-desplegablev {
  position: fixed;
  top: 0;
  left: 0;
  width: 90px;
  height: 100vh;
  
  /* Estilo Visual (Dorado/Negro) */
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.98), rgba(0, 0, 0, 0.95));
  border-right: 1px solid rgba(212, 175, 55, 0.3);
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
  
  /* Layout */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 120px;
  z-index: 2000;
  
  /* 🔥 AQUÍ ESTÁ LA CORRECCIÓN: Oculto por defecto */
  transform: translateX(-100%); 
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. ESTADO VISIBLE (Para Sidebar.php O cuando activas el botón en Visor) */
/* Sidebar.php ya trae esta clase puesta en el HTML, por eso se verá siempre */
.menu-desplegablev.active {
  transform: translateX(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* === ESTILO DE LOS ENLACES (Igual que antes) === */
.menu-desplegablev a {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 60px;
  height: 60px;
  margin-bottom: 15px;
  border-radius: 15px;
  color: #888;
  text-decoration: none;
  transition: all 0.3s ease;
  background: transparent;
}

.menu-desplegablev a i {
  font-size: 24px;
  transition: all 0.3s ease;
}

/* Efecto Hover Dorado */
.menu-desplegablev a:hover,
.menu-desplegablev a.current-page {
  background: rgba(212, 175, 55, 0.15);
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.1);
}

.menu-desplegablev a:hover i,
.menu-desplegablev a.current-page i {
  color: #D4AF37;
  filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.6));
}

/* === TOOLTIPS (TEXTOS FLOTANTES) === */
.menu-desplegablev a span {
  position: absolute;
  left: 75px;
  top: 50%;
  transform: translateY(-50%);
  background: #D4AF37;
  color: #000000;
  padding: 8px 15px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  width: max-content;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  pointer-events: none;
  box-shadow: 0 4px 15px rgba(0,0,0,0.4);
  z-index: 3000;
}

/* Flechita del Tooltip */
.menu-desplegablev a span::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent #D4AF37 transparent transparent;
}

.menu-desplegablev a:hover span {
  opacity: 1;
  visibility: visible;
  left: 85px;
}

/* =======================================================
   AJUSTES FINALES: MENÚ DESPLEGABLE (NO FIJO)
   ======================================================= */

/* 1. RESTAURAR EL CONTENIDO AL CENTRO (Quitar padding gigante) */
body.bi-page, 
body.visor-page, 
body.progan { 
    /* Quitamos el 130px y dejamos un margen normal */
    padding-left: 0 !important; 
}

/* 2. POSICIÓN DEL BOTÓN "REGRESAR" */
/* Como el botón de partículas está en left:30px, movemos el "Regresar" un poco más allá */
.btn-volver, 
.volverG, 
.tech-back-btn {
    left: 90px !important; /* Espacio suficiente para no chocar con las partículas */
    top: 35px !important;  /* Alineado verticalmente con el botón de partículas */
    z-index: 1000;
    transition: left 0.3s ease;
}

/* 3. ASEGURAR QUE EL MENÚ ESTÉ OCULTO AL INICIO */
/* Esto ya está en tu CSS anterior, pero confirmamos */
.menu-desplegablev {
    transform: translateX(-100%); /* Oculto a la izquierda */
}
.menu-desplegablev.active {
    transform: translateX(0);     /* Visible */
}

/* =======================================================
   BOTÓN Y MODAL PROA APPS (EFECTO VIDRIO AZUL)
   ======================================================= */

/* Botón Azul PRO APPS */
.btn-pro-apps {
    width: 100%;
    padding: 12px 16px;
    margin-top: 15px; /* Separación con el botón verde de login */
    border: 1px solid rgba(0, 198, 255, 0.4);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(0, 114, 255, 0.8), rgba(0, 80, 200, 0.8));
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 6px 18px rgba(0, 114, 255, 0.25);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-pro-apps:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 198, 255, 0.4);
    background: linear-gradient(180deg, rgba(0, 130, 255, 0.9), rgba(0, 90, 220, 0.9));
}

/* Overlay del Modal (Fondo oscuro borroso) */
.pro-apps-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.75); /* Fondo oscuro */
    backdrop-filter: blur(10px); /* Desenfoque elegante */
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    
    /* Oculto por defecto con animación suave */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.pro-apps-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Cuadro de Cristal (Glassmorphism Azul) */
.pro-apps-glass {
    background: rgba(10, 25, 45, 0.65);
    border: 1px solid rgba(0, 198, 255, 0.3);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(0, 198, 255, 0.1);
    position: relative;
    
    /* Animación de entrada (rebote) */
    transform: scale(0.8) translateY(20px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    max-width: 650px;
    width: 90%;
}

.pro-apps-overlay.active .pro-apps-glass {
    transform: scale(1) translateY(0);
}

/* Botón Cerrar (La X) */
.close-pro-apps {
    position: absolute;
    top: 15px;
    right: 20px;
    background: transparent;
    border: none;
    color: #00c6ff;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    box-shadow: none;
    width: auto;
}

.close-pro-apps:hover {
    color: #fff;
    transform: rotate(90deg);
    text-shadow: 0 0 10px #00c6ff;
}

/* Título del Modal */
.pro-apps-glass h3 {
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 35px;
    text-shadow: 0 0 15px rgba(0, 198, 255, 0.6);
}

/* Contenedor de los círculos */
.apps-container {
    display: flex;
    justify-content: center;
    gap: 35px;
    flex-wrap: wrap;
}

/* Círculos de Apps (Efecto Vidrio) */
.app-glass-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    
    /* Vidrio azul */
    background: linear-gradient(135deg, rgba(0, 198, 255, 0.1) 0%, rgba(0, 114, 255, 0.2) 100%);
    border: 1px solid rgba(0, 198, 255, 0.3);
    text-decoration: none;
    color: #e0f7fa;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.app-glass-circle i {
    font-size: 36px;
    margin-bottom: 12px;
    color: #00c6ff;
    transition: all 0.3s ease;
}

.app-glass-circle span {
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    padding: 0 10px;
}

/* Efecto Hover Mágico de los Círculos */
.app-glass-circle:hover {
    transform: translateY(-8px);
    background: linear-gradient(135deg, rgba(0, 198, 255, 0.25) 0%, rgba(0, 114, 255, 0.5) 100%);
    border-color: #00c6ff;
    box-shadow: 0 15px 30px rgba(0, 198, 255, 0.4), inset 0 0 15px rgba(0, 198, 255, 0.3);
    color: #fff;
}

.app-glass-circle:hover i {
    color: #fff;
    transform: scale(1.15);
    filter: drop-shadow(0 0 8px #00c6ff);
}

/* Adaptación para celulares */
@media (max-width: 550px) {
    .apps-container {
        gap: 15px;
    }
    .app-glass-circle {
        width: 100px;
        height: 100px;
    }
    .app-glass-circle i {
        font-size: 26px;
        margin-bottom: 8px;
    }
    .app-glass-circle span {
        font-size: 11px;
    }
    .pro-apps-glass {
        padding: 30px 20px;
    }
}

/* =======================================================
   MAP HOTSPOTS (EFECTO RADAR EN EL FONDO)
   ======================================================= */

/* Contenedor invisible que ocupa toda la pantalla */
.map-hotspots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Deja que los clics pasen a través del espacio vacío */
  z-index: 0; /* Lo mantiene detrás de tu formulario wrap (z-index: 1) */
  overflow: hidden;
}

/* El punto interactivo base */
.hotspot {
  position: absolute;
  width: 16px;
  height: 16px;
  background: #00ff84; /* Tu verde neón característico */
  border-radius: 50%;
  transform: translate(-50%, -50%); /* Centra el punto en su coordenada */
  pointer-events: auto; /* Hace que el punto sí reciba el mouse */
  cursor: pointer;
  box-shadow: 0 0 10px #00ff84, 0 0 20px #00ff84;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* El texto flotante al lado del punto */
.hotspot-text {
  position: absolute;
  left: 25px;
  top: 50%;
  transform: translateY(-50%);
  color: #00ff84;
  font-family: 'Orbitron', 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  opacity: 0.7;
  transition: all 0.3s ease;
  text-shadow: 0 0 10px rgba(0, 255, 132, 0.8);
}

/* Efecto de Onda/Pulso (Radar) que titila infinitamente */
.hotspot .pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 2px solid #00ff84;
  border-radius: 50%;
  animation: radar-ping 2s infinite cubic-bezier(0, 0, 0.2, 1);
}

/* Animación del radar */
@keyframes radar-ping {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  75%, 100% {
    transform: scale(4); /* Qué tan grande se hace la onda */
    opacity: 0;
  }
}

/* === EFECTO HOVER: AL PASAR EL MOUSE === */
.hotspot:hover {
  background: #ffffff; /* Se vuelve blanco intenso */
  box-shadow: 0 0 20px #ffffff, 0 0 40px #00ff84, 0 0 60px #00ff84;
  transform: translate(-50%, -50%) scale(1.5); /* Crece */
  z-index: 10;
}

.hotspot:hover .pulse {
  border-color: #ffffff;
  animation-duration: 1s; /* Late más rápido al pasar el mouse */
}

.hotspot:hover .hotspot-text {
  color: #ffffff;
  opacity: 1;
  left: 30px; /* Se separa un poco */
  font-size: 14px;
}

/* =======================================================
   COORDENADAS (AJÚSTALAS SEGÚN TU IMAGEN DE FONDO)
   ======================================================= */
/* Cambia estos porcentajes (top / left) hasta que caigan 
   exactamente encima de los países en tu imagen */

.hotspot-usa {
  top: 30%; 
  left: 20%; 
}

.hotspot-colombia {
  top: 50%; 
  left: 28%; 
}

.hotspot-ecuador {
  top: 55%; 
  left: 26%; 
}

/* Ocultar en móviles muy pequeños para que no estorbe */
@media (max-width: 768px) {
  .map-hotspots {
    display: none;
  }
}
/* =======================================================
   FONDO PERFECTO Y PUNTOS CALIENTES RESPONSIVE (16:9)
   ======================================================= */

/* Este contenedor simula un "background-size: cover" pero bloqueando 
   el ratio a 16:9 para que los porcentajes jamás se desfasen */
.map-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 56.25vw; /* Mantener proporción 16:9 */
  min-height: 100vh;
  min-width: 177.77vh; /* Mantener proporción 16:9 */
  background: url("imagenes/fondoinicio.jpg") no-repeat center center;
  background-size: 100% 100%;
  z-index: 0;
  pointer-events: none; /* Que no bloquee clics accidentales */
}

/* El punto interactivo base */
.hotspot {
  position: absolute;
  width: 18px;
  height: 18px;
  background: #00ff84; 
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto; /* El punto sí es clickeable */
  cursor: pointer;
  box-shadow: 0 0 10px #00ff84, 0 0 20px #00ff84;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Efecto de Onda/Pulso (Radar) */
.hotspot .pulse {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: transparent;
  border: 2px solid #00ff84;
  border-radius: 50%;
  animation: radar-ping 2s infinite cubic-bezier(0, 0, 0.2, 1);
}

@keyframes radar-ping {
  0% { transform: scale(1); opacity: 1; }
  75%, 100% { transform: scale(4); opacity: 0; }
}

/* Hover (Al pasar el ratón) */
.hotspot:hover {
  background: #ffffff;
  box-shadow: 0 0 20px #ffffff, 0 0 40px #00ff84, 0 0 60px #00ff84;
  transform: translate(-50%, -50%) scale(1.5);
  z-index: 10;
}
.hotspot:hover .pulse {
  border-color: #ffffff;
  animation-duration: 1s;
}

/* =======================================================
   COORDENADAS EXACTAS (Basadas en tu imagen final)
   ======================================================= */

.hotspot-usa {
  top: 48%;   
  left: 19.5%; 
}

.hotspot-colombia {
  top: 61.5%; 
  left: 28.5%; 
}

.hotspot-ecuador {
  top: 66.5%; 
  left: 27.5%; 
}

.hotspot-brazil {
  top: 72.5%; 
  left: 36%; 
}

.hotspot-netherlands {
  top: 36%; 
  left: 51.5%; 
}

/* En móviles pequeños los ocultamos para mantenerlo limpio */
@media (max-width: 768px) {
  .hotspot { display: none; }
}


/* =======================================================
   COORDENADAS EXACTAS (Ajustadas)
   ======================================================= */

.hotspot-usa {
  top: 48%;   
  left: 22.5%; 
}

.hotspot-colombia {
  top: 67.5%;   /* Lo bajamos (antes 61.5%) */
  left: 30.3%;  /* Lo movimos a la derecha (antes 28.5%) */
}

.hotspot-ecuador {
  top: 72.5%;   /* Lo bajamos (antes 66.5%) */
  left: 33%;    /* Lo movimos un pelín a la derecha (antes 27.5%) */
}

.hotspot-brazil {
  top: 72.5%; 
  left: 36%; 
}

.hotspot-netherlands {
  top: 39%; 
  left: 53.5%; 
}
/* El punto interactivo base */
.hotspot {
  position: absolute;
  width: 18px;
  height: 18px;
  background: #ffffff; /* <-- AHORA ES BLANCO */
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto; 
  cursor: pointer;
  box-shadow: 0 0 10px #ffffff, 0 0 20px rgba(255, 255, 255, 0.8); /* <-- BRILLO BLANCO */
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Efecto de Onda/Pulso (Radar) */
.hotspot .pulse {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: transparent;
  border: 2px solid #ffffff; /* <-- ONDA BLANCA */
  border-radius: 50%;
  animation: radar-ping 2s infinite cubic-bezier(0, 0, 0.2, 1);
}

/* Hover (Al pasar el ratón) */
.hotspot:hover {
  background: #ffffff;
  box-shadow: 0 0 20px #ffffff, 0 0 40px rgba(255, 255, 255, 0.8), 0 0 60px rgba(255, 255, 255, 0.5); /* <-- RESPLANDOR BLANCO AL PASAR EL MOUSE */
  transform: translate(-50%, -50%) scale(1.5);
  z-index: 10;
}
/* El punto interactivo base */
.hotspot {
  position: absolute;
  width: 18px;
  height: 18px;
  background: #ffffff; /* <-- AHORA ES BLANCO */
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto; 
  cursor: pointer;
  box-shadow: 0 0 10px #ffffff, 0 0 20px rgba(255, 255, 255, 0.8); /* <-- BRILLO BLANCO */
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Efecto de Onda/Pulso (Radar) */
.hotspot .pulse {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: transparent;
  border: 2px solid #ffffff; /* <-- ONDA BLANCA */
  border-radius: 50%;
  animation: radar-ping 2s infinite cubic-bezier(0, 0, 0.2, 1);
}

/* Hover (Al pasar el ratón) */
.hotspot:hover {
  background: #ffffff;
  box-shadow: 0 0 20px #ffffff, 0 0 40px rgba(255, 255, 255, 0.8), 0 0 60px rgba(255, 255, 255, 0.5); /* <-- RESPLANDOR BLANCO AL PASAR EL MOUSE */
  transform: translate(-50%, -50%) scale(1.5);
  z-index: 10;
}

/* CAMBIO 1*/

/* =======================================================
   ASISTENTE VIRTUAL (CHATBOT WIDGET)
   ======================================================= */

/* =======================================================
   ASISTENTE VIRTUAL (CHATBOT WIDGET) - TEMA AZUL ELEGANTE
   ======================================================= */

/* --- 1. Botón Flotante (Toggle con brillo elegante) --- */
.chatbot-toggle-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #0066ff, #0044cc); /* Azul elegante */
  color: #ffffff;
  border: none;
  border-radius: 50%;
  font-size: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  /* Brillo "fosforescente" elegante y sutil */
  box-shadow: 0 4px 15px rgba(0, 102, 255, 0.3), 0 0 15px rgba(0, 102, 255, 0.4);
  z-index: 10000;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.chatbot-toggle-btn:hover {
  transform: scale(1.08);
  /* Aumenta el resplandor sutilmente al pasar el mouse */
  box-shadow: 0 6px 20px rgba(0, 102, 255, 0.4), 0 0 25px rgba(0, 102, 255, 0.5);
}

.chatbot-toggle-btn.active {
  background: linear-gradient(135deg, #0056ff, #0033aa); 
}

/* --- 2. Contenedor de la Ventana de Chat --- */
.chatbot-window {
  position: fixed;
  bottom: 105px;
  right: 30px;
  width: 360px;
  height: 550px;
  max-height: 85vh;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 0 20px rgba(0, 102, 255, 0.1); /* Sombra suave con tinte azul */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 9999;
  
  /* Animación de entrada */
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  pointer-events: none;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.chatbot-window.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
}

/* --- 3. Cabecera (Header) --- */
.chatbot-header {
  background: linear-gradient(135deg, #0056ff, #0044cc); /* Azul corporativo */
  color: #ffffff;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chatbot-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chatbot-avatar-sm {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: #ffffff;
  object-fit: contain;
  border: 2px solid rgba(255, 255, 255, 0.8);
}

.chatbot-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
}

/* Botón de Cerrar (X) más pequeño y elegante */
.chatbot-close-header {
  background: rgba(255, 255, 255, 0.1); /* Fondo sutil translúcido */
  border: none;
  color: #ffffff;
  font-size: 14px; /* Tamaño reducido */
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chatbot-close-header:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.1);
}

/* --- 4. Cuerpo del Chat (Mensajes) --- */
.chatbot-body {
  flex: 1;
  background-color: #fdfdfd; /* Blanco casi puro */
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Fila del mensaje */
.chat-msg-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 90%;
}

.chat-msg-row.bot-msg {
  align-self: flex-start;
}

.msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffffff;
  object-fit: contain;
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Burbuja de texto */
.msg-bubble {
  background-color: #f2f4f7; /* Gris azulado muy claro */
  color: #333333;
  padding: 12px 16px;
  border-radius: 12px 12px 12px 0; /* Punta abajo a la izquierda */
  font-family: 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.4;
  border: 1px solid #e6e9ef;
}

/* Alineación cuando el bot manda 2 mensajes seguidos */
.msg-bubble.no-avatar {
  margin-left: 42px; /* Espacio exacto del avatar + gap */
}

/* --- 5. Botones de Opciones (Respuestas Rápidas) --- */
.chat-options-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: 42px; 
  margin-top: 5px;
}

.chat-option-btn {
  background: #ffffff;
  border: 1px solid #0056ff; /* Borde azul fino */
  color: #0056ff; /* Texto azul */
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Segoe UI', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  width: fit-content;
  box-shadow: 0 2px 5px rgba(0, 86, 255, 0.05);
}

.chat-option-btn:hover {
  background-color: #0056ff;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 86, 255, 0.2);
  transform: translateY(-2px);
}

/* --- 6. Footer (Caja de Texto) --- */
.chatbot-footer {
  border-top: 1px solid #eef0f5;
  padding: 15px 20px 12px 20px;
  background-color: #ffffff;
}

.chat-input-container {
  display: flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 25px;
  padding: 4px 15px;
  background-color: #f9fafb;
  transition: border-color 0.3s;
}

.chat-input-container:focus-within {
  border-color: #0056ff; /* El borde se pinta de azul al escribir */
  background-color: #ffffff;
}

.chat-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 0;
  font-size: 14px;
  color: #333;
  outline: none;
  box-shadow: none;
  margin-bottom: 0;
}

.chat-send-btn {
  background: transparent;
  border: none;
  color: #9ca3af;
  font-size: 18px;
  cursor: pointer;
  padding: 5px;
  transition: color 0.2s, transform 0.2s;
  box-shadow: none;
  width: auto;
}

.chat-send-btn:hover {
  color: #0056ff; /* Azul elegante */
  transform: translateX(2px) scale(1.1); /* Efecto de que "sale volando" */
}

.chat-spam-protect {
  text-align: center;
  font-size: 11px;
  color: #9ca3af;
  margin-top: 8px;
  font-family: 'Segoe UI', sans-serif;
}

/* === RESPONSIVE PARA MÓVILES === */
@media (max-width: 480px) {
  .chatbot-window {
    width: 90vw;
    right: 5vw;
    bottom: 90px;
    height: 75vh;
  }
  
  .chatbot-toggle-btn {
    bottom: 20px;
    right: 20px;
    width: 55px;
    height: 55px;
    font-size: 24px;
  }
}

/* --- Burbuja del Usuario --- */
.chat-msg-row.user-msg {
  align-self: flex-end;
  flex-direction: row-reverse; /* El avatar (si hubiera) va a la derecha */
}


.chat-msg-row.user-msg .msg-bubble {
  background: linear-gradient(135deg, #0056ff, #0044cc) !important; /* Azul corporativo forzado */
  color: #ffffff !important; /* 🔥 El !important asegura que la letra sea blanca sí o sí */
  border-radius: 12px 12px 0 12px !important; 
  border: none !important;
  box-shadow: 0 4px 10px rgba(0, 86, 255, 0.2);
}



/* --- Avatar en la Cabecera (Header) --- */
.chatbot-avatar-sm {
  width: 50px; /* Lo hicimos más grande (antes 38px) */
  height: 50px;
  background-color: transparent; /* Fondo transparente */
  object-fit: contain;
  border: none; /* Quitamos el borde blanco circular */
  border-radius: 0; /* Ya no forzamos el círculo CSS */
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3)); /* Sombra elegante solo a la silueta */
}

/* --- Avatar en los mensajes del Chat --- */
.msg-avatar {
  width: 42px; /* Lo hicimos más grande (antes 32px) */
  height: 42px;
  background: transparent; /* Fondo transparente */
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 0;
  box-shadow: none; /* Quitamos la sombra de caja circular */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)); /* Sombra sutil a la silueta */
}

/* Alineación cuando el bot manda 2 mensajes seguidos */
.msg-bubble.no-avatar {
  margin-left: 52px; /* Ajustamos el espacio (42px del avatar + 10px de separación) */
}

/* Modificaciones de prueba 06.03.2026 */

/* 1. Contenedor Padre (Sin perspectiva 3D) */
.apps-container {
    display: flex;
    justify-content: center;
    gap: 35px;
    flex-wrap: wrap;
}

/* 2. Círculo Base */
.app-glass-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    
    /* Vidrio azul en reposo */
    background: linear-gradient(135deg, rgba(0, 198, 255, 0.1) 0%, rgba(0, 114, 255, 0.2) 100%);
    border: 1px solid rgba(0, 198, 255, 0.3);
    color: #e0f7fa;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    text-decoration: none;
    
    /* Propiedades para el destello */
    position: relative; 
    overflow: hidden;   
    transition: all 0.4s ease; /* Transición rápida y ágil */
}

/* 3. El Destello de Luz (Shine) */
.app-glass-circle::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-25deg);
    transition: left 0.6s ease-in-out;
    z-index: 1;
    pointer-events: none; /* CRUCIAL: Evita que el destello trabe el cursor */
}

/* 4. Efecto Hover Principal */
.app-glass-circle:hover {
    transform: translateY(-8px); /* Solo se eleva, sin girar */
    background: linear-gradient(135deg, rgba(0, 198, 255, 0.25) 0%, rgba(0, 114, 255, 0.5) 100%);
    border-color: #00c6ff;
    box-shadow: 0 15px 30px rgba(0, 198, 255, 0.4), inset 0 0 15px rgba(0, 198, 255, 0.3);
    color: #fff;
}

/* Cuando pases el mouse, la luz cruza */
.app-glass-circle:hover::before {
    left: 150%;
}

/* 5. Comportamiento Interno (Icono y Texto) */
.app-glass-circle i,
.app-glass-circle span {
    pointer-events: none; /* Ignora el cursor para evitar tartamudeos */
    transition: all 0.3s ease;
}

.app-glass-circle i {
    font-size: 36px;
    margin-bottom: 12px;
    color: #00c6ff;
}

/* Efecto del icono al pasar el mouse */
.app-glass-circle:hover i {
    color: #fff;
    transform: scale(1.15); /* Solo crece ligeramente */
    filter: drop-shadow(0 0 8px #00c6ff);
}

.app-glass-circle span {
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    padding: 0 10px;
}

/* Adaptación para celulares */
@media (max-width: 550px) {
    .apps-container {
        gap: 15px;
    }
    .app-glass-circle {
        width: 100px;
        height: 100px;
    }
    .app-glass-circle i {
        font-size: 26px;
        margin-bottom: 8px;
    }
    .app-glass-circle span {
        font-size: 11px;
    }
}


/* =======================================================
   ANIMACIÓN DE CARGA (GALEÓN IMPONENTE Y OLAS AZULES)
   ======================================================= */
/* =======================================================
   ANIMACIÓN DE CARGA (BUQUE FRONTAL IMPONENTE)
   ======================================================= */
.proa-loader-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100vh;
    background: rgba(2, 8, 15, 0.92); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.proa-loader-overlay.active {
    opacity: 1;
    visibility: visible;
}

.proa-loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Lente de Cristal */
.proa-ship-glass {
    position: relative;
    width: 240px; /* Un poco más grande para que el barco luzca imponente */
    height: 240px;
    border-radius: 50%;
    
    background: radial-gradient(circle at 50% 0%, rgba(0, 198, 255, 0.15) 0%, rgba(0, 5, 15, 0.7) 80%);
    border: 1px solid rgba(0, 198, 255, 0.3);
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.8),
        inset 0 0 30px rgba(0, 198, 255, 0.15),
        inset 0 2px 5px rgba(255, 255, 255, 0.2); 
        
    overflow: hidden; 
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- EL OLEAJE (Totalmente oculto en reposo) --- */
.proa-water {
    position: absolute;
    bottom: -150%; 
    left: -50%;
    width: 200%;
    height: 120%;
    background: rgba(0, 114, 255, 0.5); 
    
    /* SEGURIDAD CONTRA LÍNEAS FANTASMAS */
    opacity: 0; 
    visibility: hidden; 
    
    transition: transform 1.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, visibility 0s linear 1.8s;
    z-index: 1;
}

.proa-loader-overlay.loading .proa-water {
    transform: translateY(-85%); 
    opacity: 1; 
    visibility: visible; 
    transition: transform 1.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, visibility 0s linear 0s;
}

/* Figuras rotatorias para simular olas */
.proa-water::before,
.proa-water::after {
    content: '';
    position: absolute;
    width: 250vw;
    height: 250vw;
    top: -245vw; 
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 1);
    animation: wave-spin 6s infinite linear;
}

.proa-water::before {
    border-radius: 42%;
    background: rgba(5, 15, 25, 0.9);
    animation: wave-spin 5s infinite linear;
}
.proa-water::after {
    border-radius: 40%;
    background: rgba(2, 8, 15, 0.85);
    animation: wave-spin 7s infinite linear;
}

@keyframes wave-spin {
    0% { transform: translateX(-50%) rotate(0deg); }
    100% { transform: translateX(-50%) rotate(360deg); }
}

/* --- EL BUQUE (VISTA FRONTAL) --- */
.proa-ship-svg {
    width: 170px; 
    height: 170px;
    position: relative;
    z-index: 2; 
    margin-top: 15px; 
    filter: drop-shadow(0 15px 20px rgba(0, 0, 0, 0.9)); 
    
    /* Animación de navegación frontal (Sube y avanza) */
    animation: ship-navigate-front 4s ease-in-out infinite;
}

@keyframes ship-navigate-front {
    0%   { transform: translateY(0) scale(1); }
    50%  { transform: translateY(-4px) scale(1.02); } /* Sube en la ola y parece acercarse */
    100% { transform: translateY(0) scale(1); }
}

/* Texto de Carga */
.proa-loading-text {
    margin-top: 30px;
    color: #00c6ff;
    font-family: 'Orbitron', 'Segoe UI', monospace;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 6px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.5s ease;
}

.proa-loader-overlay.loading .proa-loading-text {
    opacity: 1;
    transform: translateY(0);
    animation: text-glitch 2s infinite;
}

@keyframes text-glitch {
    0%, 100% { opacity: 0.8; text-shadow: 0 0 10px rgba(0, 198, 255, 0.5); }
    50% { opacity: 1; text-shadow: 0 0 20px rgba(0, 198, 255, 0.9), 0 0 40px rgba(0, 114, 255, 0.6); }
}

/* 1. Tamaño del avatar en la barra azul (Encabezado) */
.chatbot-avatar-sm {
    width: 70px !important;  /* Sube o baja este número para el tamaño ideal */
    height: auto !important; /* Esto hace que crezca sin deformarse */
    border-radius: 10% !important; /* Quitamos el círculo feo */
    margin-right: 10px;
}

/* 2. Tamaño del avatar al lado de cada mensaje de Angie */
.msg-avatar {
    width: 60px !important;  /* Un poco más pequeña que la del encabezado */
    height: auto !important; /* Mantiene la proporción original */
    border-radius: 10% !important; /* Quitamos el círculo feo */
    margin-right: 12px;
}

/* Animación "Angie está escribiendo..." */
.typing-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    background-color: #f1f5f9;
    border-radius: 15px 15px 15px 0;
    width: fit-content;
}

.typing-dot {
    width: 6px;
    height: 6px;
    background-color: #94a3b8;
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}





/* =======================================================
   REEMPLAZO: CÍRCULO DE CRISTAL BASE (PREPARADO PARA EFECTO LUZ)
   Busca y reemplaza la regla .proa-ship-glass existente
   ======================================================= */
.proa-ship-glass {
    position: relative;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    
    /* Fondo y sombras internas se mantienen */
    background: radial-gradient(circle at 50% 0%, rgba(0, 198, 255, 0.1) 0%, rgba(0, 5, 15, 0.8) 80%);
    
    /* CAMBIO: Quitamos el borde sólido antiguo y mantenemos solo la sombra externa sutil */
    border: none; 
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8);
        
    overflow: hidden; 
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1; /* Asegura un contexto de apilamiento */
}


/* =======================================================
   NUEVO EFECTO: RASTRO DE LUZ GIRATORIO Y PUNTOS (Glow Trail)
   Agrega esto al final de style.css
   ======================================================= */

/* 1. Definimos la animación de rotación */
@keyframes spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 2. Contenedor del efecto de luz (Filtro de desenfoque para el rastro) */
/* Lo aplicamos a .proa-ship-glass cuando el loader está .loading */
.proa-loader-overlay.loading .proa-ship-glass::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    /* Un poco más grande que el círculo para que el borde sobresalga */
    width: 105%; 
    height: 105%;
    border-radius: 50%;
    
    /* ⭐ ESTA ES LA MAGIA: Un gradiente cónico */
    /* Crea un punto blanco intenso y una estela azul que se apaga */
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(0, 198, 255, 0) 10deg,    /* Empieza invisible */
        rgba(0, 198, 255, 0.5) 180deg, /* Rastro azul translúcido */
        rgba(255, 255, 255, 1) 350deg, /* Punto blanco intenso (Cabeza) */
        transparent 360deg             /* Corte limpio detrás de la cabeza */
    );
    
    /* 🌫️ EFECTO DE RASTRO: Desenfoque para suavizar el gradiente y simular luz que se apaga */
    filter: blur(8px); 
    -webkit-filter: blur(8px);
    
    /* 🔄 ANIMACIÓN: Gira infinitamente */
    animation: spin 2s linear infinite;
    
    z-index: -1; /* Se dibuja DETRÁS del contenido (barco/agua) pero actúa como borde */
    pointer-events: none;
}

/* 3. CAPA DE PUNTOS BLANCOS ELEGANTES (Partículas giratorias) */
/* Usamos ::after para crear una textura de puntos sobre la luz */
.proa-loader-overlay.loading .proa-ship-glass::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 102%; 
    height: 102%;
    border-radius: 50%;
    
    /* ⭐ TEXTURA DE PUNTOS: Usamos una imagen radial repetida como máscara */
    /* Puntos blancos pequeños y nítidos */
    background-image: radial-gradient(#ffffff 1px, transparent 1px);
    background-size: 15px 15px; /* Espaciado entre puntos */
    
    /* 🔄 ANIMACIÓN: Gira a la misma velocidad que la luz para "texturizarla" */
    animation: spin 2s linear infinite;
    
    /* Desenfoque muy sutil para que los puntos parezcan luz y no un dibujo */
    filter: blur(1px);
    
    /* 😷 MÁSCARA: Usamos la luz (::before) como máscara para que los puntos solo se vean donde hay luz */
    /* Esto es avanzado y puede no funcionar en todos los navegadores antiguos, 
       pero en modernos crea el efecto exacto de puntos brillando en la estela. 
       Si no te gusta, puedes quitar esta línea y verás los puntos en todo el círculo. */
    -webkit-mask-image: conic-gradient(from 0deg, transparent 60deg, black 350deg);
    mask-image: conic-gradient(from 0deg, transparent 60deg, black 350deg);

    z-index: 0; /* Entre la luz y el contenido */
    pointer-events: none;
}

/* 4. AJUSTE DE SEGURIDAD PARA EL AGUA Y EL BARCO */
/* Aseguramos que el contenido principal esté por encima de los efectos de luz */
.proa-water, .proa-ship-svg {
    z-index: 2 !important;
}


/* =======================================================
   NUEVO EFECTO: ÓRBITA DE PUNTOS (CABEZA BLANCA Y ESTELA AZUL)
   ======================================================= */

/* 1. Preparamos el contenedor para poder centrar la órbita perfectamente */
.proa-loader-content {
    position: relative;
}

/* 2. El anillo principal (Cabezas blancas y estelas que se vuelven azules) */
.proa-loader-content::before {
    content: '';
    position: absolute;
    top: 120px; 
    left: 50%;
    
    /* Tamaño amplio (660px) para que no choque con los bordes */
    width: 660px; 
    height: 660px;
    margin-top: -330px;
    margin-left: -330px;
    border-radius: 50%;
    
    /* GRADIENTE BLANCO A AZUL: 
       Termina en blanco puro (1), el medio es azul cian (0.6) y la cola azul oscuro transparente (0.1) */
    background: conic-gradient(
        from 0deg,
        transparent 5%, rgba(0, 114, 255, 0.1) 15%, rgba(0, 198, 255, 0.6) 28%, rgba(255, 255, 255, 1) 33.33%, transparent 33.34%,
        transparent 38%, rgba(0, 114, 255, 0.1) 48%, rgba(0, 198, 255, 0.6) 61%, rgba(255, 255, 255, 1) 66.66%, transparent 66.67%,
        transparent 71%, rgba(0, 114, 255, 0.1) 81%, rgba(0, 198, 255, 0.6) 94%, rgba(255, 255, 255, 1) 100%
    );
    
    /* Línea central definida */
    -webkit-mask-image: radial-gradient(circle, transparent 318px, black 319px, black 321px, transparent 322px);
    mask-image: radial-gradient(circle, transparent 318px, black 319px, black 321px, transparent 322px);
    
    /* Velocidad: 4 segundos */
    animation: spin-orbit 4s linear infinite;
    z-index: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
}

/* 3. El resplandor (Glow) con la misma transición de color */
.proa-loader-content::after {
    content: '';
    position: absolute;
    top: 120px;
    left: 50%;
    
    width: 660px;
    height: 660px;
    margin-top: -330px;
    margin-left: -330px;
    border-radius: 50%;
    
    /* GRADIENTE DE BRILLO: Mismos tonos pero con un poco más de opacidad para que brille fuerte */
    background: conic-gradient(
        from 0deg,
        transparent 5%, rgba(0, 114, 255, 0.3) 15%, rgba(0, 198, 255, 0.8) 28%, rgba(255, 255, 255, 1) 33.33%, transparent 33.34%,
        transparent 38%, rgba(0, 114, 255, 0.3) 48%, rgba(0, 198, 255, 0.8) 61%, rgba(255, 255, 255, 1) 66.66%, transparent 66.67%,
        transparent 71%, rgba(0, 114, 255, 0.3) 81%, rgba(0, 198, 255, 0.8) 94%, rgba(255, 255, 255, 1) 100%
    );
    
    /* Máscara difuminada para que el aura azul y blanca se expanda suavemente */
    -webkit-mask-image: radial-gradient(circle, transparent 310px, black 315px, black 325px, transparent 330px);
    mask-image: radial-gradient(circle, transparent 310px, black 315px, black 325px, transparent 330px);
    
    /* Desenfoque del brillo */
    filter: blur(8px); 
    -webkit-filter: blur(8px);
    
    animation: spin-orbit 4s linear infinite;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
}

/* 4. Mostrar la órbita de luz exactamente al mismo tiempo que el loader */
.proa-loader-overlay.loading .proa-loader-content::before,
.proa-loader-overlay.loading .proa-loader-content::after {
    opacity: 1;
    visibility: visible;
}

/* 5. Keyframe para la rotación */
@keyframes spin-orbit {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



/* =======================================================
   ESTILOS EXCLUSIVOS PARA PÁGINA KPRO
   Guíado por la Paleta de Colores de image_0.png
   No afecta a otras páginas corporativas.
   ======================================================= */

/* --- 1. FONDO DEL CUERPO (Fondo limpio y claro) --- */
body.kpro-page {
    /* Gris muy claro (#e0e0db - 10%) */
    background-color: #e0e0db !important;
    background-image: none !important; /* Quitamos la imagen de fondo global */
    color: #333 !important; /* Texto oscuro para contraste */
}

/* --- 2. BARRA LATERAL (SIDEBAR) --- */
/* Cambiamos el fondo verde oscuro por el gris oscuro de la paleta */
.kpro-page .menu-desplegablev {
    /* Gris oscuro (#575756) */
    background: #575756 !important;
    border-right: 1px solid #797978 !important; /* Borde gris medio */
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3) !important; /* Sombra más suave */
}

/* Iconos y hovers en Sidebar */
.kpro-page .menu-desplegablev a:hover,
.kpro-page .menu-desplegablev a.current-page {
    /* Naranja quemado (#ed7004 - hover de botones principales) */
    background: rgba(237, 112, 4, 0.15) !important;
    color: #ed7004 !important;
    border-color: #ed7004 !important;
}

.kpro-page .menu-desplegablev a:hover i {
    color: #ed7004 !important;
    filter: drop-shadow(0 0 5px rgba(237, 112, 4, 0.6)) !important;
}

/* Tooltips (Textos flotantes) del Sidebar */
.kpro-page .menu-desplegablev a span {
    background: #ed7004 !important;
    color: #fff !important;
}

.kpro-page .menu-desplegablev a span::before {
    border-color: transparent #ed7004 transparent transparent !important;
}

/* Botón de Partículas (Hamburguesa) */
.kpro-page .particle-button:hover .dot {
    background-color: #ed7004 !important;
    box-shadow: 0 0 8px rgba(237, 112, 4, 0.8) !important;
}

/* --- 3. SECCIÓN SUPERIOR: BOTÓN VOLVER Y USUARIO --- */

/* Botón Volver */
.kpro-page .btn-volver {
    /* Usamos gris oscuro para el fondo */
    background: rgba(87, 87, 86, 0.7) !important;
    border: 1px solid rgba(121, 121, 120, 0.5) !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(87, 87, 86, 0.4) !important;
}

.kpro-page .btn-volver i {
    /* Naranja/Amarillo fuerte (#fab500) para el icono */
    color: #fab500 !important;
}

.kpro-page .btn-volver:hover {
    /* Hover con naranja quemado */
    background: rgba(237, 112, 4, 0.8) !important;
    border-color: #ed7004 !important;
}

/* Sección de Información de Usuario */
.kpro-page .user-info2 {
    /* Fondo gris oscuro con transparencia */
    background: rgba(87, 87, 86, 0.7) !important;
    color: #fff !important;
}

.kpro-page .user-info2 i {
    /* Icono de usuario en naranja fuerte */
    color: #fab500 !important;
}

/* Botón Logout (Regresar) */
.kpro-page .logout-btn {
    /* Usamos naranja quemado para la X */
    color: #ed7004 !important;
}

.kpro-page .logout-btn:hover {
    /* Hover naranja fuerte */
    color: #fab500 !important;
}

/* --- 4. TÍTULO PRINCIPAL (INFORME COMPRAS) --- */
.kpro-page .bi-title {
    /* Usamos el naranja fuerte para el título */
    color: #fab500 !important;
    text-shadow: none !important; /* Quitamos el resplandor de fondo oscuro */
    margin-top: 100px !important; /* Ajuste para que se vea bien en el fondo claro */
}

/* --- 5. CONTENEDOR DEL IFRAME (POWER BI) --- */
.kpro-page .bi-frame-wrapper {
    /* Panel de control de cristal gris oscuro */
    background: #575756 !important;
    border: 2px solid #797978 !important; /* Borde gris medio */
    box-shadow: 0 0 25px rgba(121, 121, 120, 0.1) !important;
}

/* --- 6. PIE DE PÁGINA (FOOTER) --- */
.kpro-page footer {
    /* Texto gris oscuro para contraste */
    color: #575756 !important;
    background-color: transparent !important;
    border-top: none !important;
    margin-top: 50px !important; /* Separación con el iframe */
}

/* =======================================================
   FIN DE ESTILOS EXCLUSIVOS PARA PÁGINA KPRO
   ======================================================= */



/* =======================================================
   MEJORAS DEL CHATBOT (Icono de Angie y Saludo)
   ======================================================= */

/* Contenedor principal del área del chatbot */
.chatbot-area {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 15px; /* Espacio entre la burbuja y el botón */
}

/* --- Actualización del Botón Flotante --- */
.chatbot-toggle-btn {
    /* Quitamos posición fixed antigua, ahora la maneja el contenedor .chatbot-area */
    position: relative; 
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #0056ff, #0044cc); /* Azul corporativo */
    color: #ffffff;
    border: none;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden; /* Importante para que la imagen no se salga */
}

.chatbot-toggle-btn:hover {
    transform: scale(1.08);
}

/* Imagen de Angie dentro del botón */
.toggle-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover; /* Asegura que la imagen llene el círculo sin deformarse */
    display: block;
}

/* --- Burbuja de Saludo (Nuevo) --- */
.chatbot-greeting-bubble {
    background-color: #0056ff; /* Azul corporativo */
    color: #ffffff;
    padding: 12px 18px;
    border-radius: 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    position: relative;

    /* Lógica de ocultado inicial (para animación) */
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px); /* Efecto de deslizado */
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
}

/* Estado visible (se activa con JS) */
.chatbot-greeting-bubble.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Flechita de la burbuja de texto (apuntando al icono) */
.chatbot-greeting-bubble::after {
    content: '';
    position: absolute;
    right: -10px; /* Posición de la flecha */
    top: 50%;
    transform: translateY(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #0056ff; /* Flecha azul */
}

/* --- Ajuste de la Ventana de Chat --- */
/* Quitamos el fixed antiguo y la posicionamos relativa al contenedor .chatbot-area */
.chatbot-window {
    position: absolute;
    bottom: 75px; /* Justo encima del botón */
    right: 0;
    width: 360px;
    height: 550px;
    /* ... rest of your chatbot-window styles ... */
}



/* =======================================================
   ESTILOS GEMINI LAVA FLOW PARA ANGIE CHATBOT
   Puntos 1, 2 y 3.
   ======================================================= */

/* --- 0. Definición de la Animación de Lava Flow --- */
@keyframes geminiLavaFlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* --- 1. Botón Flotante con Efecto Lava Gemini (Novedoso) --- */
.chatbot-toggle-btn.gemini-lava {
    /* Gradiente complejo con colores inspirados en Gemini: Azul, Turquesa, Magenta, Naranja suave */
    background: linear-gradient(-45deg, #0088cc, #00cccc, #cc33cc, #ff9933);
    background-size: 400% 400%; /* Importante para el efecto de movimiento */
    animation: geminiLavaFlow 15s ease infinite; /* Duración larga para que sea suave */
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
}

.chatbot-toggle-btn.gemini-lava:hover {
    transform: scale(1.08) translateY(-3px);
    box-shadow: 0 6px 25px rgba(204, 51, 204, 0.4); /* Sombra con tinte magenta al hover */
}

/* Icono de cierre dentro del botón flotante (oculto por defecto) */
.toggle-close-icon {
    font-size: 32px;
    color: white;
    font-weight: 300;
    line-height: 1;
}

/* --- 2. Fondo Animado Lava Flow en la Ventana de Chat --- */
.chatbot-body.gemini-lava-bg {
    /* Aplicamos el mismo efecto lava al fondo del cuerpo del chat */
    background: linear-gradient(-45deg, rgba(0, 136, 204, 0.3), rgba(0, 204, 204, 0.3), rgba(204, 51, 204, 0.3), rgba(255, 153, 51, 0.3));
    background-size: 400% 400%;
    animation: geminiLavaFlow 20s ease infinite; /* Más lenta para que no distraiga al leer */
}

/* Estilo para las burbujas del bot sobre este fondo nuevo (opcional para mejor contraste) */
.msg-bubble.bot-bubble-gemini {
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: #333 !important;
    border: 1px solid rgba(0, 136, 204, 0.1);
}

/* --- 3. Lógica para Ocultar el Avatar del Botón al Abrir --- */

/* Cuando la ventana del chat está activa, el botón flotante recibe la clase 'chat-open' vía JS */
.chatbot-toggle-btn.chat-open #chatbot-toggle-avatar {
    display: none !important; /* Desaparece el avatar (Punto 3) */
}

.chatbot-toggle-btn.chat-open #chatbot-toggle-close-icon {
    display: block !important; /* Aparece el icono de cierre */
}


/* =======================================================
   MEJORAS UI CHATBOT: BOTÓN CERRAR FLOTANTE Y SIN HEADER
   ======================================================= */

/* Nuevo botón de cerrar transparente flotando arriba a la derecha */
.chatbot-close-floating {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.6); /* Fondo semi-transparente para que destaque sobre la lava */
    border: none;
    color: #333;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    cursor: pointer;
    z-index: 100; /* Asegura que esté por encima de los mensajes */
    backdrop-filter: blur(5px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

.chatbot-close-floating:hover {
    background: #ffffff;
    transform: scale(1.1);
    color: #ff3366; /* Un rojo suave al pasar el mouse */
}

/* Ajuste al cuerpo del chat para compensar que ya no hay cabecera */
.chatbot-body.gemini-lava-bg {
    padding-top: 45px; /* Da espacio arriba para que los mensajes no queden detrás de la X */
}



/* 1. Busca el botón y asegúrate de BORRAR o comentar el overflow: hidden */
.chatbot-toggle-btn {
    position: relative; 
    width: 60px; /* El tamaño de la burbuja sigue siendo el mismo */
    height: 60px;
    background: linear-gradient(135deg, #0056ff, #0044cc);
    color: #ffffff;
    border: none;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* overflow: hidden; 🔥 BÓRRALO para que Angie pueda sobresalir */
}

/* 2. Busca la imagen de Angie y agrégale el transform */
.toggle-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    transform: scale(1.4); /* 🔥 ESTA ES LA LÍNEA MÁGICA. 1.3 significa 30% más grande. Súbelo a 1.4 o bájalo a 1.2 a tu gusto */
}


/* =======================================================
   CORRECCIÓN: ANGIE EN PORTÁTILES (EVITAR CHOQUE CON POWER BI)
   ======================================================= */

/* Para pantallas de laptop/portátil (1440px o menos) */
@media (max-width: 1440px) {
    /* 1. Acercamos el área más a la esquina extrema */
    .chatbot-area {
        bottom: 15px !important;
        right: 15px !important;
        gap: 10px !important;
    }
    
    /* 2. Botón más pequeño y semi-transparente (efecto cristal) */
    .chatbot-toggle-btn {
        width: 50px !important;
        height: 50px !important;
        opacity: 0.65; /* Permite ver el reporte de BI a través de ella */
    }
    
    /* 3. Al pasar el mouse, Angie recobra su color 100% y se acerca */
    .chatbot-toggle-btn:hover {
        opacity: 1 !important;
        transform: scale(1.15) !important;
    }
    
    /* 4. Ajustamos la ventana de chat para que no quede flotando tan alto */
    .chatbot-window {
        bottom: 70px !important; 
    }

    /* 5. Reducimos un poco el globo de texto del saludo */
    .chatbot-greeting-bubble {
        padding: 8px 12px !important;
        font-size: 11px !important;
    }
}

/* Para Celulares y Tablets pequeñas */
@media (max-width: 768px) {
    .chatbot-area {
        bottom: 10px !important;
        right: 10px !important;
    }
    
    .chatbot-toggle-btn {
        width: 45px !important;
        height: 45px !important;
        opacity: 0.6; /* Aún más transparente en celular para no estorbar */
    }
    
    .chatbot-window {
        bottom: 60px !important; 
        right: 5vw !important; /* Centrado en móviles */
    }
}


/* =========================================
   BOTÓN DE SOPORTE FLOTANTE (Esquina inferior derecha)
   ========================================= */
.floating-support-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #004e92, #000428); /* Azul elegante */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0, 4, 40, 0.4);
    z-index: 999999; /* Z-index altísimo para que nada lo cubra */
    transition: all 0.3s ease;
}

/* Icono de los auriculares */
.floating-support-btn i {
    font-size: 28px;
    z-index: 2; /* Por encima de la ola */
}

/* Comportamiento al pasar el mouse */
.floating-support-btn:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 12px 25px rgba(0, 78, 146, 0.6);
    color: #ffffff;
}

/* Efecto de olas blancas brillosas */
.wave-ripple {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9); /* Blanco brilloso */
    border-radius: 50%;
    z-index: 1;
    opacity: 0;
    animation: ripple-animation 2s infinite ease-out;
}

/* Animación de la ola expandiéndose */
@keyframes ripple-animation {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(1.7);
        opacity: 0;
    }
}

/* =========================================
   BOTÓN DE SOPORTE FLOTANTE (Esquina inferior derecha)
   ========================================= */
.floating-support-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #004e92, #000428);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0, 4, 40, 0.4);
    z-index: 999999;
    
    /* MODIFICACIÓN: Oculto por defecto y desplazado ligeramente hacia abajo */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efecto rebote suave */
}

/* NUEVA CLASE: Estado visible cuando el modal está abierto */
.floating-support-btn.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* El resto de las reglas (hover, icono, wave-ripple, keyframes) se quedan exactamente igual */