/* Oculta todo el contenido al imprimir */
@media print {
  body {
    display: none;
  }
}

/*
************** CUERPO DE LA APP **************
*/

body {
  font-family: "Oxanium", sans-serif;
  font-weight: 500;

  /* Fondo base (glows + viñeteado) */
  background-color: #050819;
  /* fallback */
  background-image:
    /* Viñeteado (oscurece bordes) */
    radial-gradient(circle at center, rgba(10, 25, 70, 0.18) 0%, rgba(5, 8, 25, 0.98) 70%),

    /* Glow suave cian */
    radial-gradient(circle at 30% 20%, rgba(0, 255, 200, 0.10), transparent 55%),

    /* Glow suave azul */
    radial-gradient(circle at 80% 70%, rgba(120, 140, 255, 0.10), transparent 55%);

  background-size: cover, cover, cover;
  background-attachment: fixed;

  /* Necesario para overlays */
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Enlaces de la aplicación */
.container a {
  text-decoration: none;
}

.container a:hover {
  font-weight: bold;
}

/* Conocimientos de la aplicación */
.conocimiento {
  text-decoration: none;
  color: #ffffff;
}

.conocimiento:hover {
  color: #ffc008;
}

/* Citas de la aplicación */
.container blockquote {
  background: #fff3cd;
  border: 1px solid #ffc003;
  border-radius: 10px;
  padding: 10px;
}

.container cite {
  color: #ff0000;
}

.container pre {
  border-radius: 5px;
  background: #ecffdd;
  border: 1px solid #0af418;
}

.container code img {
  float: left;
}

/* Títulos de los conocimientos h1, h2 y h3 */
.container h1 {
  color: #2563eb;
  font-weight: bold;
  text-transform: uppercase;
}

.container h2 {
  color: #ffffff;
  background: #212529;
  padding: 5px;
  padding-left: 15px;
  margin-top: 30px;
  border-radius: 5px;
  font-size: 20px;
  text-transform: uppercase;
  font-weight: bold;
}

.container h3 {
  color: #174bfd;
  padding: 5px;
  padding-left: 15px;
  border-bottom: 2px solid #174bfd;
  font-size: 20px;
  text-transform: uppercase;
  font-weight: bold;

}

.container .panel-block:hover {
  background-color: #fff3cd;
}

.container .icon-book {
  color: #0061ff;
}

/* Iconos de los conocimientos */
.col.app {
  width: 150px;
  height: auto;
  text-align: center;
  margin-top: 20px;
}

/*
************** BARRA DE NAVEGACIÓN SUPERIORDE LA APP **************
*/
.navbar-copbot {
  background-color: rgba(5, 8, 25, 0.94) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 190, 255, 0.4);
  background-image:
    radial-gradient(circle at 20% 100%, rgba(0, 190, 255, 0.15), transparent 50%),
    radial-gradient(circle at 80% 100%, rgba(0, 190, 255, 0.10), transparent 50%);
  background-size: auto, auto;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.6),
    inset 0 -1px 0 rgba(0, 190, 255, 0.1);

  /* ESTO CORRIGE EL PROBLEMA: Elevamos la navbar sobre el contenido */
  position: relative;
  z-index: 1050 !important;
}

/* 2. ESTILO DEL MENÚ DESPLEGABLE: Cristal Táctico */
.navbar-copbot .dropdown-menu {
  background-color: rgba(7, 10, 22, 0.96) !important;
  backdrop-filter: blur(15px);
  border: 1px solid rgba(0, 190, 255, 0.5);
  border-radius: 4px;
  /* Esquinas más técnicas/rectas */
  margin-top: 10px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 190, 255, 0.1);
  padding: 8px 0;

  /* Aseguramos que el menú también esté por encima */
  z-index: 1100 !important;
}

/* 3. ITEMS DEL MENÚ: Resaltado de datos */
.navbar-copbot .dropdown-item {
  color: rgba(255, 255, 255, 0.8) !important;
  transition: all 0.2s ease;
  padding: 10px 20px;
  letter-spacing: 0.5px;
}

.navbar-copbot .dropdown-item:hover {
  background-color: rgba(0, 190, 255, 0.15) !important;
  color: #00beff !important;
  padding-left: 25px;
  /* Efecto de desplazamiento técnico al pasar el ratón */
  text-shadow: 0 0 8px rgba(0, 190, 255, 0.5);
}

/* Divisores internos del menú */
.navbar-copbot .dropdown-divider {
  border-top: 1px solid rgba(0, 190, 255, 0.2);
  margin: 5px 0;
}

/* 4. BOTÓN DE MENÚ (TOGGLER): Estética Verde Táctico */
.navbar-copbot .navbar-toggler {
  /* Aplicamos el verde que pediste */
  border: 1px solid rgba(60, 255, 140, 0.75) !important;
  background-color: rgba(60, 255, 140, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0.5rem 0.75rem;
  /* Sombra sutil en el mismo tono verde */
  box-shadow: 0 0 12px rgba(60, 255, 140, 0.2);
}

/* Cambiar el color de las 3 rayitas (icono) al mismo verde */
.navbar-copbot .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(60, 255, 140, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/*
************** BARRA DE NAVEGACIÓN INFERIOR DE LA APP **************
*/
.navbar.fixed-bottom {
  /* 1. Base y Transparencia Premium */
  background-color: rgba(5, 8, 25, 0.94) !important;
  backdrop-filter: blur(12px);
  /* Mayor desenfoque para un look más "glassy" */
  -webkit-backdrop-filter: blur(12px);

  /* 2. Borde Superior Táctico */
  /* Reducimos un poco la opacidad para que no "corte" la pantalla bruscamente */
  border-top: 1px solid rgba(0, 190, 255, 0.4);

  /* 3. Sombra y Resplandor */
  box-shadow:
    0 -12px 40px rgba(0, 0, 0, 0.7),
    /* Sombra externa profunda */
    inset 0 1px 0 rgba(0, 190, 255, 0.1);
  /* Brillo interno sutil en el borde */

  /* 4. Iluminación Atmosférica (Sin líneas) */
  background-image:
    radial-gradient(circle at 20% 0%, rgba(0, 190, 255, 0.15), transparent 50%),
    radial-gradient(circle at 80% 0%, rgba(0, 190, 255, 0.10), transparent 50%);

  background-size: auto, auto;
}

/* Boton adjuntar archivos a la consulta */
#attachBtn {
  background: rgba(0, 190, 255, .14) !important;
  color: rgba(210, 245, 255, .95) !important;
  border: 1px solid rgba(0, 190, 255, .70) !important;

  /* Quitamos el radio de la derecha para unirlo al input */
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-top-left-radius: 12px !important;
  border-bottom-left-radius: 12px !important;

  box-shadow: 0 0 18px rgba(0, 190, 255, .12);
  transition: all .12s ease;
}

/*
************** VISOR PREVIEW IMÁGENES (HUD) **************
*/
#imagePreviewContainer {
  display: none;
  /* lo controlas por JS */
  background-color: rgba(0, 10, 25, .55) !important;
  border: 1px solid rgba(0, 190, 255, .45);
  box-shadow: 0 0 16px rgba(0, 190, 255, .10);
  border-radius: 10px !important;

  /* Grid suave */
  background-image:
    linear-gradient(to right, rgba(0, 190, 255, .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 190, 255, .06) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* Botón quitar imágenes */
#removeImagesBtn {
  border: 1px solid rgba(255, 80, 80, .85) !important;
  box-shadow: 0 0 14px rgba(255, 80, 80, .15);
}

form input {
  font-weight: 600 !important;
}

form textarea {
  font-weight: 600 !important;
}

/*
************** MENU INFERIOR CHAT COPBOT **************
*/
.navbar.fixed-bottom .input-group {
  background: rgba(0, 0, 0, .10);
  border: 1px solid rgba(0, 190, 255, .55);
  border-radius: 14px;
  padding: 6px;
  box-shadow:
    0 0 0 1px rgba(0, 190, 255, .10) inset,
    0 0 18px rgba(0, 190, 255, .08);
}

#userInput.form-control {
  /* Fondo más profundo y limpio */
  background-color: rgba(7, 10, 22, 0.6) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  color: #16fe34 !important;
  font-weight: 600;

  /* Bordes tácticos: mantenemos solo superior e inferior */
  border: none !important;
  border-top: 1px solid rgba(0, 190, 255, 0.65) !important;
  border-bottom: 1px solid rgba(0, 190, 255, 0.65) !important;
  border-radius: 0 !important;

  /* Eliminamos el focus visual por CSS */
  outline: none !important;

  /* Resplandor táctico refinado */
  box-shadow:
    inset 0 0 15px rgba(0, 190, 255, 0.05),
    0 5px 15px rgba(0, 0, 0, 0.4);

  /* HUD: Solo degradados de luz atmosférica, sin grid de líneas */
  background-image:
    radial-gradient(circle at 10% 50%, rgba(0, 190, 255, 0.12), transparent 50%),
    radial-gradient(circle at 90% 50%, rgba(0, 190, 255, 0.08), transparent 50%);
  background-size: auto, auto;
  background-position: center;

  caret-color: #16fe34;
}

#userInput.form-control:disabled {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

#userInput.form-control::placeholder {
  color: rgba(210, 245, 255, .55);
}

/* Focus más táctico */
#userInput.form-control:focus {
  box-shadow:
    0 0 0 1px rgba(0, 190, 255, .18) inset,
    0 0 22px rgba(0, 190, 255, .18);
  border-color: rgba(0, 190, 255, .90) !important;
}

/* Botón enviar consulta a COPBOT */
#sendBtn {
  background: rgba(0, 190, 255, .14) !important;
  color: rgba(210, 245, 255, .95) !important;
  border: 1px solid rgba(0, 190, 255, .70) !important;
  border-radius: 12px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 12px !important;
  border-bottom-right-radius: 12px !important;

  /* Quitamos el borde izquierdo para que no choque con el input */
  border-left: none !important;

  box-shadow:
    0 0 0 1px rgba(0, 190, 255, .10) inset,
    0 0 18px rgba(0, 190, 255, .12);

  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

#sendBtn:hover {
  filter: brightness(1.1);
  box-shadow:
    0 0 0 1px rgba(0, 190, 255, .14) inset,
    0 0 26px rgba(0, 190, 255, .18);
}

#sendBtn:active {
  transform: translateY(1px);
}

/* Si quieres que el icono sea más “HUD” */
#sendBtn i {
  text-shadow: 0 0 12px rgba(0, 190, 255, .25);
}

/* Botón completar consulta a COPBOT */
#skipTypingBtn .btn {
  background: rgba(5, 8, 25, .92) !important;
  color: #16fe34 !important;
  border: 1px solid #16fe34 !important;
  box-shadow:
    0 0 18px rgba(255, 120, 120, .12),
    0 0 0 1px rgba(255, 120, 120, .10) inset;
  border-radius: 999px;
  padding: .6rem 1rem;
  transform: translateY(-20px);
}

/* Quitar el recuadro envolvente del input-group */
.navbar.fixed-bottom .input-group {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Que parezca una pieza, sin añadir marco externo */
#userInput.form-control {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

#sendBtn {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.navbar.fixed-bottom .input-group .btn:first-child {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.copbot-btn-iconitos {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Iconos de la barra de navegación inferior */
.copbot-btn-iconitos i {
  color: rgba(210, 245, 255, .95) !important;
}

/* Marca de agua en el centro de la pantalla */
.watermark {
  position: fixed;
  /* Fija la imagen en la posición especificada en la ventana */
  top: 50%;
  /* Centra verticalmente */
  left: 50%;
  /* Centra horizontalmente */
  transform: translate(-50%, -50%);
  /* Ajusta la imagen para que el centro exacto quede en el punto definido */
  opacity: 0.05;
  /* Hace la imagen semitransparente */
  z-index: 1000;
  /* Asegura que la imagen esté sobre otros elementos */
  pointer-events: none;
  /* Permite hacer clic en elementos bajo la imagen */
}

/* Animación de parpadeo */
@-moz-keyframes parpadeo {
  0% {
    opacity: 1.0;
  }

  50% {
    opacity: 0.0;
  }

  100% {
    opacity: 1.0;
  }
}

@-webkit-keyframes parpadeo {
  0% {
    opacity: 1.0;
  }

  50% {
    opacity: 0.0;
  }

  100% {
    opacity: 1.0;
  }
}

@keyframes parpadeo {
  0% {
    opacity: 1.0;
  }

  50% {
    opacity: 0.0;
  }

  100% {
    opacity: 1.0;
  }
}

/* Input deshabilitado */
.form-control:disabled {
  background-color: transparent;
  color: #ffffff;
  border-color: #2d54e8;
  border-width: 0px;
  animation: blink 2s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

a img:hover {
  filter: brightness(1.2) saturate(1.5);
  transition: filter 0.3s ease;
}

.chat-container {
  max-width: 100%;
  margin: auto;
  padding: 20px;
}

.chat-message {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
}

.chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.chat-bubble {
  max-width: 100%;
  padding: 10px 15px;
  border-radius: 15px;
  position: relative;
}

/*
CHAT DE USUARIO (izquierda)
*/

.chat-message-left .chat-bubble {
  margin-left: 5px;
  border-top-left-radius: 0;

  /* Usuario: gris/blanco hielo tipo briefing táctico */
  background-color: rgba(8, 12, 18, 0.40);
  color: rgba(235, 245, 255, 0.92);

  border: 1px solid rgba(200, 230, 255, 0.55);

  box-shadow:
    0 0 10px rgba(180, 220, 255, 0.12),
    inset 0 0 8px rgba(200, 230, 255, 0.06);

  /* patrón sutil frío (sin grid fuerte) */
  background-image:
    radial-gradient(circle at 25% 30%, rgba(200, 230, 255, 0.10), transparent 55%),
    linear-gradient(to bottom, rgba(200, 230, 255, 0.06), transparent 65%);

  background-size: auto;
  background-position: center;
}

/*
CHAT DE COPBOT (derecha)
*/

.chat-message-right {
  display: flex;
  /* Asegura que justify-content funcione */
  justify-content: flex-end;
  margin-bottom: 10px;
}

.chat-message-right .chat-bubble {
  position: relative;
  background-color: #070a16;
  margin-left: 5px;
  padding: 12px 18px;
  /* Un poco de aire para el texto */
  color: #ffffff;
  border: 1px solid rgba(60, 255, 140, .75);
  border-radius: 10px;
  border-top-right-radius: 0;

  /* HUD: Mantenemos solo los difuminados de luz, eliminamos el grid */
  background-image:
    radial-gradient(circle at 30% 20%, rgba(60, 255, 140, .14), transparent 55%),
    radial-gradient(circle at 80% 75%, rgba(60, 255, 140, .10), transparent 60%);

  background-size: auto, auto;
  background-position: center;

  /* Efecto de cristal sutil */
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.chat-message-right .chat-bubble strong,
.chat-message-right .chat-bubble b {
  font-weight: bold;
  color: #ffe38a;
  /* Tono arena militar */
  text-shadow: 0 0 5px rgba(255, 227, 138, 0.2);
}

/*
Animación de puntos suspensivos mientras COPBOT escribe
*/
@keyframes chat-typing-dots {
  0% {
    content: ".";
    opacity: 0.2;
    color: black;
  }

  20% {
    content: ".";
    opacity: 1;
    color: black;
  }

  40% {
    content: "..";
    opacity: 1;
    color: #666;
  }

  60% {
    content: "...";
    opacity: 1;
    color: #aaa;
  }

  80% {
    content: "....";
    opacity: 1;
    color: #ccc;
  }

  100% {
    content: ".....";
    opacity: 0.2;
    color: black;
  }
}

/*****************************************
ESTILOS DE HABLAR.PHP
******************************************* */

.chat-waiting-response .chat-bubble {
  display: flex;
  align-items: center;
  /* Centra los puntos verticalmente */
  justify-content: center;
  /* Centra los puntos horizontalmente */
  min-height: 20px;
  /* Altura mínima para evitar cajas demasiado grandes */
  padding: 5px 10px;
  /* Ajuste del relleno */
}

.chat-waiting-response .chat-bubble::after {
  content: "...";
  display: inline-block;
  font-size: 32px;
  /* Mantiene los puntos grandes */
  font-weight: bold;
  /* Resalta los puntos */
  letter-spacing: 8px;
  /* Espaciado entre los puntos */
  line-height: 1;
  /* Reduce la altura de la caja */
  animation: chat-typing-dots 1.5s infinite ease-in-out;
}

/* =========================================
   BOTÓN GRABACIÓN (HUD TÁCTICO)
   ========================================= */
#recordButton {
  position: relative;
  overflow: hidden;

  background: rgba(5, 10, 18, 0.92);
  color: rgba(60, 255, 140, 0.95);

  border: 1px solid rgba(60, 255, 140, 0.65);
  border-radius: 20px;

  padding: 15px 30px;
  font-size: 120px;
  cursor: pointer;

  user-select: none;

  box-shadow:
    0 0 18px rgba(60, 255, 140, 0.14),
    inset 0 0 0 1px rgba(60, 255, 140, 0.12),
    inset 0 0 16px rgba(60, 255, 140, 0.06);

  transition: transform .12s ease, filter .2s ease, box-shadow .2s ease;
}

/* scanlines HUD */
#recordButton::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .10;
  background: repeating-linear-gradient(to bottom,
      rgba(255, 255, 255, .12) 0px,
      rgba(255, 255, 255, .12) 1px,
      transparent 1px,
      transparent 6px);
}

/* barrido luminoso */
#recordButton::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -35%;
  width: 70%;
  height: 180%;
  transform: rotate(20deg);
  pointer-events: none;

  background: linear-gradient(to right,
      transparent,
      rgba(60, 255, 140, .16),
      transparent);

  opacity: 0;
  transition: opacity .18s ease, transform .35s ease;
}

#recordButton:hover {
  transform: translateY(-1px);
  filter: brightness(1.12);
  box-shadow:
    0 0 24px rgba(60, 255, 140, 0.20),
    inset 0 0 0 1px rgba(60, 255, 140, 0.18),
    inset 0 0 18px rgba(60, 255, 140, 0.08);
}

#recordButton:hover::before {
  opacity: 1;
  transform: rotate(20deg) translateX(22%);
}

#recordButton:active {
  transform: translateY(0) scale(.98);
  filter: brightness(1.02);
}

/* ESTADO GRABANDO (ROJO OPERATIVO) */
@keyframes rec-pulse {

  0%,
  100% {
    box-shadow:
      0 0 10px rgba(255, 70, 70, 0.20),
      inset 0 0 0 1px rgba(255, 70, 70, 0.20),
      inset 0 0 18px rgba(255, 70, 70, 0.08);
    filter: brightness(1.0);
  }

  50% {
    box-shadow:
      0 0 20px rgba(255, 70, 70, 0.45),
      0 0 38px rgba(255, 70, 70, 0.18),
      inset 0 0 0 1px rgba(255, 70, 70, 0.35),
      inset 0 0 22px rgba(255, 70, 70, 0.12);
    filter: brightness(1.15);
  }
}

#recordButton.recording {
  background: rgba(16, 6, 10, 0.92);
  color: rgba(255, 120, 120, 0.95);

  border: 1px solid rgba(255, 70, 70, 0.75);

  animation: rec-pulse 1.1s ease-in-out infinite;
}


/* ****************************************
IMAGENES EN MINIATURA
******************************************* */

.historial-miniatura {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  float: left;
  /* Hace que el texto fluya alrededor de la imagen */
  margin-right: 5px;
  /* Añade espacio entre la imagen y el texto */
}

.imagen-titulo-miniatura {
  width: 50px;
  height: 50px;
  object-fit: cover;
  float: right;
  /* Hace que el texto fluya alrededor de la imagen */
  margin-left: 5px;
  /* Añade espacio entre la imagen y el texto */
}

/* IA */
@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-5px);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translateX(5px);
  }
}

.input-error-shake {
  animation: shake 0.5s ease-in-out;
}

.chat-bubble .typing-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 5px 10px;
}

.chat-bubble .typing-indicator span {
  height: 9px;
  width: 9px;
  border-radius: 50%;
  margin: 0 4px;
  animation: wave 1.3s infinite ease-in-out;
}

.chat-bubble .typing-indicator span:nth-child(2) {
  animation-delay: .15s;
}

.chat-bubble .typing-indicator span:nth-child(3) {
  animation-delay: .30s;
}

/* ****************************************
PUNTOS DE ESPERA MIENTRAS COPBOT PIENSA (TÁCTICO HUD, SIN CAJA)
******************************************* */
.chat-bubble .typing-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 2px;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  position: relative;
  overflow: visible !important;
}

.chat-bubble .typing-indicator::before,
.chat-bubble .typing-indicator::after {
  content: none !important;
}

.chat-bubble .typing-indicator span {
  display: inline-block;
  vertical-align: middle;

  height: 8px;
  width: 8px;
  border-radius: 50%;

  background-color: rgba(60, 255, 140, 0.55);

  animation: tactical-wave 1.1s infinite ease-in-out !important;
  will-change: transform, opacity, box-shadow;
  transform: translate3d(0, 0, 0);
}

.chat-bubble .typing-indicator span:nth-child(2) {
  animation-delay: 0.12s !important;
}

.chat-bubble .typing-indicator span:nth-child(3) {
  animation-delay: 0.24s !important;
}

@keyframes tactical-wave {

  0%,
  60%,
  100% {
    transform: translate3d(0, 0, 0) scale(0.95);
    opacity: 0.55;
    box-shadow: none;
    background-color: rgba(60, 255, 140, 0.45);
  }

  30% {
    transform: translate3d(0, -8px, 0) scale(1.15);
    opacity: 1;
    background-color: rgba(60, 255, 140, 0.95);
    box-shadow:
      0 0 8px rgba(60, 255, 140, 0.55),
      0 0 16px rgba(60, 255, 140, 0.25);
  }
}

/* ****************************************
EFECTO MATRIX MIENTRAS COPBOT ESCRIBE
******************************************* */
@keyframes matrix-fade {
  0% {
    color: #87ff2d;
    text-shadow: 0 0 10px #87ff2d;
  }

  100% {
    color: inherit;
    text-shadow: none;
  }
}

.matrix-char {
  animation: matrix-fade 1.5s forwards;
}

@keyframes blink-caret {

  from,
  to {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.matrix-cursor {
  display: inline-block;
  margin-left: 2px;
  vertical-align: middle;
  animation: blink-caret 0.75s step-end infinite;
  /* Mantenemos la animación de parpadeo */
  color: #87ff2d;
  /* Mantenemos el color verde para la letra */
  font-weight: bold;
}

.matrix-cursor:has(+ .mi-bateria) {
  display: none;
}

.mi-bateria>*:empty {
  display: none;
}