@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap');


/* styles nuevos =============================================================================================================*/


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

/* Animación de rebote y crecimiento para resultados */
/* Define una animación que combina rebote y crecimiento para elementos de resultado */
@keyframes bounceAndGrow {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2) translateY(-10px); }
}

/* Aplica la animación a elementos con clase resultado-animado */
.resultado-animado {
    display: inline-block;
    animation: bounceAndGrow 0.5s ease-in-out;
}

/* Personaliza el aspecto del placeholder en campos de entrada */
#capital::placeholder {
    color: #999;
}

/* ==================== TICKER DE COTIZACIONES ==================== */

/* Contenedor principal del ticker con fondo degradado y borde inferior */
.ticker-wrap {
    height: 40px;
    overflow: hidden;
    background: linear-gradient(45deg, #000000, #1a1a1a);
    border-bottom: 2px solid #B8860B;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* Animación del ticker para desplazamiento horizontal continuo */
.ticker {
    display: inline-block;
    white-space: nowrap;
    padding-right: 100%;
    animation: ticker 30s linear infinite;
}

/* Define el movimiento de la animación del ticker */
@keyframes ticker {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

/* Estilo de cada elemento individual dentro del ticker */
.ticker-item {
    display: inline-block;
    padding: 8px 20px;
    border-right: 1px solid rgba(184,134,11,0.3);
    color: #CCC5B9;
}

/* Estilo para las insignias dentro de los elementos del ticker */
.ticker-item .badge {
    margin-right: 10px;
    border: 1px solid #B8860B;
}

/* Colores para valores positivos y negativos en el ticker */
.ticker-item .text-success,
.ticker-item .text-warning {
    margin: 0 10px;
}

/* Pausa la animación al pasar el mouse */
.ticker:hover {
    animation-play-state: paused;
}

/* Ajustes responsive del ticker para pantallas pequeñas */
@media (max-width: 768px) {
    .ticker {
        animation: ticker 20s linear infinite;
    }
    
    .ticker-item {
        font-size: 0.75rem;
        padding: 8px 10px;
    }
}

/* ==================== POPOVERS ==================== */

/* Estilo base para los popovers con fondo semitransparente */
.popover {
    background-color: rgba(28, 28, 28, 0.95);
    border: 1px solid #B8860B;
    box-shadow: 0 0 15px rgba(184, 134, 11, 0.2);
    max-width: 250px;
}

/* Estilo del encabezado del popover */
.popover-header {
    background-color: rgba(184, 134, 11, 0.15);
    color: #B8860B;
    border-bottom: 1px solid #B8860B;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

/* Estilo del cuerpo del popover */
.popover-body {
    color: #e0e0e0;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
}

/* Elimina margen inferior en listas dentro del popover */
.popover-body ul {
    margin-bottom: 0;
}

/* Espaciado entre elementos de lista en el popover */
.popover-body ul li {
    margin-bottom: 0.25rem;
}

/* Estilo de la flecha del popover */
.popover .popover-arrow::after {
    border-right-color: rgba(28, 28, 28, 0.95);
}

.popover .popover-arrow::before {
    border-right-color: #B8860B;
}

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

/* Personalización de la barra de desplazamiento horizontal */
.table-responsive::-webkit-scrollbar {
    height: 8px;
}

/* Fondo de la barra de desplazamiento */
.table-responsive::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
}

/* Estilo del "pulgar" de la barra de desplazamiento */
.table-responsive::-webkit-scrollbar-thumb {
    background: #B8860B;
    border-radius: 4px;
}

/* Efecto hover en la barra de desplazamiento */
.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #DAA520;
}

/* Contenedor de la flecha indicadora de scroll */
.scroll-arrow-container {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 10;
    pointer-events: none;
}

/* Estilo de la flecha indicadora de scroll */
.scroll-arrow {
    background: rgba(184,134,11,0.2);
    color: #B8860B;
    padding: 12px;
    border-radius: 50%;
    border: 1px solid rgba(184,134,11,0.3);
    animation-duration: 2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tamaño del icono de la flecha */
.scroll-arrow i {
    font-size: 1.2rem;
}

/* Ocultar flecha en pantallas grandes */
@media (min-width: 992px) {
    .scroll-arrow-container {
        display: none;
    }
}

/* ESTYLES SIMULADOR DE INVERSIONES ------------------------------------------- */


    /* Mantener diseño original en móviles */
    .simulador-card {
        transition: max-width 0.3s ease-in-out;
    }

    /* Expandir en pantallas grandes */
    @media (min-width: 992px) {
        .simulador-card {
            max-width: 920px !important;
        }

        /* Ajustar el layout interno para mantener proporciones */
        .simulador-card .card-body {
            padding: 2rem 6rem !important;
        }

        /* Hacer los inputs más anchos */
        .simulador-card .input-group {
            max-width: 700px;
            margin: 0 auto;
        }

        /* Ajustar tamaños de texto */
        .simulador-card .text-gradient {
            font-size: 1.8rem !important;
        }

        .simulador-card small {
            font-size: 0.85rem !important;
        }

        /* Hacer los botones más anchos pero centrados */
        .simulador-card .btn {
            max-width: 700px;
            margin: 1rem auto;
        }

        /* Ajustar los contenedores de resultado */
        .simulador-card #resultado,
        .simulador-card #ganancia {
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

        /* Nuevo estilo para el contenedor de resultados */
        .resultados-wrapper {
            display: flex;
            gap: 2rem;
            justify-content: center;
            margin-top: 2rem;
        }

        /* Ajustar los contenedores de resultado */
        .simulador-card #resultado,
        .simulador-card #ganancia {
            flex: 1;
            max-width: 340px;
            margin: 0;
            padding: 1.5rem;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        /* Efectos hover para los resultados */
        .simulador-card #resultado:hover,
        .simulador-card #ganancia:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0,0,0,0.2);
        }

        /* Mejorar la visualización de los valores */
        .simulador-card .resultado-valor,
        .simulador-card .resultado-ganancia {
            display: block;
            margin-top: 0.5rem;
            font-size: 1.2rem;
            letter-spacing: 0.5px;
        }

        /* Mejorar la barra de progreso */
        .simulador-card .progress {
            height: 8px;
            margin-top: 1rem;
            border-radius: 4px;
        }

        /* Iconos más grandes en pantallas grandes */
        .simulador-card #resultado i,
        .simulador-card #ganancia i {
            font-size: 1.2rem;
            margin-right: 0.5rem;
        }
    }


/* FIN ESTILOS SIMULADOR DE INVERSIONES ----------------------------------------*/


/* ESTYLES PROYECCION MENSUAL ------------------------------------ */

            /* Estilos para las filas ocultas */
            .hidden-row {
              display: none;
              transition: all 0.3s ease;
          }

          /* Estilos mejorados para el nombre de la inversión */
          .investment-name {
              color: #E5DED5;
              font-size: clamp(0.65rem, 2vw, 0.8rem);
              font-weight: 500;
              white-space: normal;
              overflow: visible;
              text-overflow: clip;
              max-width: 150px;
              display: block;
              line-height: 1.2;
          }

          /* Estilos para los inputs */
          .input-capital {
              background-color: #1a1a1a !important;
              color: #ffffff !important;
              border: 1px solid rgba(184,134,11,0.3) !important;
          }

          /* Estilos para la ganancia */
          .gain-badge {
              color: #20c997;
          }

          /* Estilos mejorados para el botón expandir */
          .expand-section {
              display: flex;
              justify-content: center;
              padding: 1rem 0 0.5rem;
          }

          .expand-button {
              background: linear-gradient(45deg, #1a1a1a, #2a2a2a);
              border: 1px solid rgba(184,134,11,0.3);
              color: #FFD700;
              padding: 0.6rem 1.5rem;
              border-radius: 25px;
              font-size: 0.85rem;
              font-weight: 500;
              letter-spacing: 0.5px;
              cursor: pointer;
              transition: all 0.3s ease;
              position: relative;
              overflow: hidden;
              display: flex;
              align-items: center;
              gap: 0.5rem;
          }

          .expand-button::before {
              content: '';
              position: absolute;
              top: -2px;
              left: -2px;
              right: -2px;
              bottom: -2px;
              background: linear-gradient(45deg, #FFD700, #B8860B);
              border-radius: 26px;
              z-index: -1;
              opacity: 0;
              transition: opacity 0.3s ease;
          }

          .expand-button:hover::before {
              opacity: 0.3;
          }

          .expand-button:hover {
              transform: translateY(-2px);
              box-shadow: 0 4px 15px rgba(184,134,11,0.2);
          }

          .button-content {
              display: flex;
              align-items: center;
              gap: 0.5rem;
              position: relative;
              z-index: 1;
          }

          .toggle-icon {
              transition: transform 0.4s ease;
              font-size: 0.8rem;
          }

          .rotate-icon {
              transform: rotate(180deg);
          }

          /* Efecto de brillo en el botón */
          .expand-button::after {
              content: '';
              position: absolute;
              top: -50%;
              left: -50%;
              width: 200%;
              height: 200%;
              background: radial-gradient(circle, rgba(255,215,0,0.1), transparent 70%);
              transform: rotate(45deg);
              transition: all 0.3s ease;
          }

          .expand-button:hover::after {
              left: 100%;
          }

          /* Ajustes responsive */
          @media (max-width: 767px) {
              .investment-name {
                  max-width: 100px;
              }
              
              .expand-button {
                  padding: 0.5rem 1.2rem;
                  font-size: 0.75rem;
              }
          }

                          /* Estilos específicos para el botón calcular */
                          .calcular-btn {
                            background: rgba(40, 167, 69, 0.1) !important;
                            border: 1px solid #28a745 !important;
                            color: #28a745 !important;
                        }
        
                        .calcular-btn i,
                        .calcular-btn span {
                            color: #28a745 !important;
                        }
        
                        .calcular-btn:hover {
                            box-shadow: 0 4px 15px rgba(40, 167, 69, 0.2) !important;
                        }
        
                        .calcular-btn::before {
                            background: linear-gradient(45deg, #28a745, #20c997) !important;
                        }
        
                        .calcular-btn::after {
                            background: radial-gradient(circle, rgba(40, 167, 69, 0.1), transparent 70%) !important;
                        }

/* FIN ESTILOS PROYECCION MENSUAL ------------------------------------ */


/* STYLE CURSOS Y SUSCRIPCIONES ------------------------------------ */

.hover-lift-3d {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift-3d:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  border-color: rgba(184,134,11,0.4);
}

.hover-lift-sm:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Mantener el diseño original en pantallas pequeñas */
@media (max-width: 767px) {
  .row-cols-2 > * {
      flex: 0 0 auto;
      width: 50%;
      padding: 0.25rem; /* Reducido aún más el padding en móviles */
  }
  
  .card {
      max-width: none; /* Eliminar max-width en móviles para usar todo el espacio disponible */
  }

  .show-on-desktop {
      display: none;
  }

  .show-on-desktop.show {
      display: block;
  }
}

/* Ajustes para pantallas más grandes */
@media (min-width: 768px) {
  .container-fluid {
      max-width: 1200px; /* Ajustado al mismo ancho que proyección mensual */
      margin: 0 auto;
      padding: 0 0.5rem;
  }
  
  .row-cols-md-2 > * {
      padding: 0 0.5rem;
  }

  /* Mostrar descripción automáticamente */
  .show-on-desktop {
      display: block !important;
  }

  /* Ocultar botón de más información */
  .btn-tech {
      display: none !important;
  }

  /* Ajustar contenedor de descripción */
  .description-content {
      font-size: 0.85rem !important;
      padding: 1rem !important;
      margin-top: 1rem !important;
  }

  /* Ajustar imagen */
  .card-img-top {
      height: 300px !important;
      object-fit: contain !important;
      padding: 1rem !important;
      background-color: rgba(0,0,0,0.5);
  }

  /* Ajustar el contenedor de la imagen */
  .position-relative {
      background-color: rgba(0,0,0,0.5);
      border-radius: 15px 15px 0 0;
  }

  /* Ajustar el ancho de las cards individuales */
  .card.h-100 {
      max-width: none; /* Eliminar el max-width anterior de 600px */
  }
}



/* FIN STYLE CURSOS Y SUSCRIPCIONES ------------------------------------ */









/* FIN STYLES NUEVOS =============================================================================================================*/





/* ----------------------- MEDIA QUERIES ----------------------- */

/* @media (max-width: 576px) {
  body {
    font-size: 14px;
  }
  .container {
    padding: 0.5rem;
  }
  h1, h2, h3, h4 {
    font-size: 1.2rem;
  }
  .logo {
    height: 60px;
  }
  .navbar-nav .nav-link {
    font-size: 0.8rem;
  }
  .card {
    margin-bottom: 1rem;
  }
  .card-title {
    font-size: 1rem;
  }
  .card-text {
    font-size: 0.8rem;
  }
  button, .btn {
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
  }
  iframe {
    max-width: 100%;
    height: 200px;
  }
}


@media (min-width: 992px) {
  .container-fluid {
      max-width: 1400px;
      margin: 0 auto;
  }

  .row-cols-3 {
      --bs-gutter-x: 2rem;
  }

  .card-img-top {
      height: 120px !important;
  }

  .card-body {
      padding: 1rem !important;
  }

  .h6.card-title {
      font-size: 1rem !important;
  }

  .card-text {
      font-size: 0.9rem !important;
  }

  .btn-sm {
      font-size: 0.9rem !important;
      padding: 0.375rem 0.75rem !important;
  }

  .hovergreen-green {
      font-size: 1.1rem !important;
      padding: 12px 24px !important;
  }

  .table .btn-outline-light {
      font-size: 0.5rem; 
  }
  .table .text-center.align-middle {
      font-size: 1rem; 
  }
} */

/* ----------------------- ESTILOS GENERALES ----------------------- */

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

body {
  font-family: "Roboto", sans-serif;
}

a {
  text-decoration: none;
  color: white;
} */

/* ----------------------- TIPOGRAFÍA ----------------------- */

h1, h2 {
  text-align: center;
  color: #CCC5B9;
}

h2 {
  text-shadow: 1px 1px 1px #fbff02;
}

h3 {
  text-align: center;
  color: #1efa01;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

h4 {
  text-align: center;
  color: yellow;
}

.text {
  color: #CCC5B9;
  font-family: 'Arial', sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  margin-bottom: 1rem;
  text-align: justify;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* fin tipografia */


/* ----------------------- NAVEGACIÓN ----------------------- */

/* .navbar-nav .nav-item .nav-link {
  font-size: 0.9rem;
  text-transform: uppercase;
  color: #e0e0e0;
}

.navbar-nav .nav-item .nav-link:hover {
  color: #CCC5B9;
}

.navbar {
  padding: 10px 0;
}

.navbar-toggler {
  background-color: #4b3a02e1;
  border: var(--bs-border-width) solid #ffd9009d !important;
}

.navbar-toggler-icon {
  width: 1rem !important;
  height: 1rem !important;
  vertical-align: inherit;
  background-color: #ffd9006b;
} */

/* ----------------------- FONDOS ----------------------- */

 .fondo-todo {
  background-image: url(/capitalizarte/assets/img/fondos/blackabstract1.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.fondo-todo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.425);
  backdrop-filter: blur(4px);
  z-index: 0;
}

.fondo-todo > * {
  position: relative;
  z-index: 1;
}

/* .fondo-claro-onda {
  background-image: url(/capitalizarte/assets/img/fondos/ondas\ fondo\ .jpeg);
}

.fondo-claro {
  background-image: url(/capitalizarte/assets/img/fondos/fondoclarobody3.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.fondo-claro-vertical {
  background-image: url(/capitalizarte/assets/img/fondos/fondo-claro-ondavertical.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.fondo-nav {
  background-image: url(/capitalizarte/assets/img/fondos/fondo-nav.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.fondo-logo {
  background-color: rgba(0, 197, 13, 0.034);
  padding: 5px;
}

.fondo-main {
  background-image: url(/);
  background-position: center;
  background-size: cover;
}

.fondo-titulo {
  background-color: rgba(116, 99, 3, 0.13);
  padding: 5px;
  border-radius: 7px;
}  */

/* ----------------------- EFECTOS HOVER ----------------------- */

/* .hover:hover {
  transform: scale(1.1);
  background-color: rgba(1, 65, 5, 0);
  border-radius: 10px;
}

.hover_titulo:hover {
  transform: scale(1.05);
  background-color: rgba(64, 65, 1, 0.171);
  border-radius: 10px;
}

.hovergreen:hover {
  transform: scale(1.0);
  background-color: rgba(0, 255, 0, 0.089);
  border-radius: 10px;
  border: 2px solid #00ff004d;
  box-shadow: 0 0 10px #00ff009c;
}

.hovergreen-green:hover {
  transform: scale();
  background-color: rgba(0, 255, 0, 0.418);
  border-radius: 10px;
  border: 2px solid #00ff00a9;
  box-shadow: 0 0 10px #00ff00ad;
}

.hoverwhite:hover {
  transform: scale();
  background-color: rgba(255, 255, 255, 0.048);
  border-radius: 10px;
  border: 2px solid #fcfcfc59;
  box-shadow: 0 0 10px #ffffff;
}

.hoverblack:hover {
  transform: scale(1.1);
  background-color: rgba(5, 5, 5, 0);
  border-radius: 10px;
}

.hovergold:hover {
  transform: scale(1);
  background-color: rgba(83, 85, 31, 0.137);
  border-radius: 10px;
  border: 2px solid rgba(255, 217, 0, 0.5);
  box-shadow: 0 0 10px rgba(255, 217, 0, 0.6);
}


.hoverred:hover {
  transform: scale(1.03);
  background-color: rgba(255, 0, 0, 0.13);
  border-radius: 10px;
  color: #ff7b00;
  border: 2px solid #f7000063;
  box-shadow: 0 0 10px #ff000098;
}

.hoverblue:hover {
  transform: scale();
  background-color: rgba(255, 255, 255, 0.116);
  border-radius: 10px;
  border: 2px solid #0026ff77;
  box-shadow: 0 0 10px #003cff;
} */

/* ----------------------- BOTONES ----------------------- */

/* button, .btn-green {
  background-color: #312f1b9f;
  color: #ffffff;
  border: none;
  padding: 15px;
  font-size: 18px;
  cursor: pointer;
  margin: 5px auto;
  border-radius: 5px;
  backdrop-filter: blur(5px);
  transition: all 300ms;
  display: block;
  text-align: center;
}

.btn-green {
  background-color: #3b6606d0;
}

button:hover, .btn-green:hover {
  transform: scale(1.07);
  background-color: #8672017e;
} */

/* ----------------------- CARDS ----------------------- */

/* .container__cards {
  width: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.cards:hover {
  transform: translateY(-10px);
}

.cover__cards {
  width: 100%;
  height: 180px;
  border-radius: 14px;
  overflow: hidden;
}

.footer__cards {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

.user_name {
  color: chocolate;
}

.cards-medio-pago {
  width: 330px;
  margin: 20px;
  padding: 20px;
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
  border-radius: 15px;
  border-left: 1px solid rgba(255, 255, 255, 0.342);
  border-top: 1px solid rgba(255, 255, 255, 0.342);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  transition: all 300ms;
}

.cards-calculadolar {
  width: 500px;
  margin: 20px;
  padding: 50px;
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
  border-radius: 15px;
  border-left: 1px solid rgba(255, 255, 255, 0.342);
  border-top: 1px solid rgba(255, 255, 255, 0.342);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  transition: all 300ms;
}

.cards-ancho {
  width: auto;
  margin: 10px;
  padding: 10px;
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
  border-radius: 15px;
  border-left: 1px solid rgba(255, 255, 255, 0.342);
  border-top: 1px solid rgba(255, 255, 255, 0.342);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  transition: all 300ms;
}

.cards-cover {
  width: 60%;
  margin: 1px auto;
  padding: 20px;
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
  border-radius: 15px;
  border-left: 1px solid rgba(255, 255, 255, 0.342);
  border-top: 1px solid rgba(255, 255, 255, 0.342);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  transition: all 300ms;
}

@media (max-width: 768px) {
  .cards-cover {
    width: 100%;
  }
}

.row.productos {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.cards {
  width: 500px;
  margin: 10px;
  padding: 20px;
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
  border-radius: 15px;
  border-left: 1px solid rgba(255, 255, 255, 0.342);
  border-top: 1px solid rgba(255, 255, 255, 0.342);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  transition: all 300ms;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}

.card-img-top {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  background-color: #000203;
}

.card-footer {
  margin-top: auto;
} */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background: rgba(255, 255, 255, 0.1);
  background-clip: border-box;
  border: 1px solid rgba(0,0,0,.125);
  border-radius: .25rem;
  color: #CCC5B9;
}

/* ----------------------- UTILIDADES ----------------------- */

/* .h-100 {
  height: 100%!important;
}

.card-body {
  flex: 1 1 auto;
  padding: 1.25rem;
}

.d-flex {
  display: flex!important;
}

.flex-column {
  flex-direction: column!important;
}

.blur {
  background-color: #5246001e;
  backdrop-filter: blur(5px);
  transition: all 300ms;
}

.ok {
  text-align: center;
  width: 100%;
  padding: 12px;
  background-color: #1e6;
  color: #fff;
}

.bad {
  text-align: center;
  width: 100%;
  padding: 12px;
  background-color: #a22;
  color: #fff;
}

.mensaje-exito {
  background-color: black;
  color: green;
  text-align: center;
  padding: 10px;
  margin: 20px 0;
  border-radius: 5px;
} */

/* ----------------------- TÍTULOS ESPECIALES ----------------------- */

/* .titulo-tech {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #e0e0e0;
  background-color: rgba(116, 99, 3, 0.13);
  text-align: center;
  padding: 15px 30px;
  margin: 20px 0;
  border-left: 4px solid #ffd9006b;
  box-shadow: 0 4px 6px rgba(150, 128, 2, 0.199);
  position: relative;
  overflow: hidden;
}

.titulo-tech::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background-color: #ffd9006b;
  transition: left 0.5s ease-in-out;
}

.titulo-tech:hover::before {
  left: 0;
}

.titulo-tech::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background-color: #ffd9006b;
  transition: right 0.5s ease-in-out;
}

.titulo-tech:hover::after {
  right: 0;
}


.resultado-animado {
    animation: bounceAndGrow 0.5s ease-in-out;
}

@keyframes bounceAndGrow {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2) translateY(-10px); }
}


.inversion-card {
    background: linear-gradient(145deg, #1a1a1a, #1f1f1f);
    border: 1px solid rgba(184,134,11,0.2);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.inversion-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(184,134,11,0.15);
}


.progress-custom {
    height: 4px;
    background: rgba(184,134,11,0.1);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #28a745, #34d058);
    transition: width 0.3s ease;
} */

/* Agregar estos estilos a tu archivo CSS */
.btn-warning {
    background-color: #ffd700;
    border-color: #ffd700;
    color: #000;
}

.btn-warning:hover {
    background-color: #ffed4a;
    border-color: #ffed4a;
    color: #000;
}

.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

.btn-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

.table td {
    vertical-align: middle;
}

.precio-compra, .valor-total {
    font-family: monospace;
    font-size: 1.1em;
}

/* Estilo para los totales */
.card h3 {
    font-size: 2em;
    font-weight: bold;
    margin: 0;
}

.text-gold {
    color: #ffd700 !important;
}

/* Estilo para los gráficos */
.card-body canvas {
    max-height: 300px;
}

/* Estilos para la tabla de activos */
.table {
    margin-top: 2rem;
}

.table thead th {
    background-color: #1a1a1a;
    color: #ffd700;
    border-color: #333;
}

.table tbody tr {
    transition: background-color 0.2s;
}

.table tbody tr:hover {
    background-color: rgba(255, 215, 0, 0.1);
}

.table td {
    vertical-align: middle;
    border-color: #333;
}

/* Estilos para los totales */
.total-card {
    background-color: #1a1a1a;
    border: 1px solid #ffd700;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.total-card h3 {
    color: #ffd700;
    margin: 0;
}

.total-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: #00ff00;
}

/* Variables de colores */
:root {
    --primary-color: #2196F3;      /* Azul tecnológico */
    --accent-color: #00BCD4;       /* Cyan para acentos */
    --success-color: #4CAF50;      /* Verde suave */
    --warning-color: #FF9800;      /* Naranja suave */
    --danger-color: #F44336;       /* Rojo suave */
    --background-dark: #1E1E1E;    /* Fondo oscuro */
    --surface-dark: #2D2D2D;       /* Superficie de cards */
    --text-primary: #E0E0E0;       /* Texto principal */
    --text-secondary: #9E9E9E;     /* Texto secundario */
    --border-color: rgba(255, 255, 255, 0.1);
}

/* Estilos generales */
body {
    background-color: var(--background-dark);
    color: var(--text-primary);
}

/* Cards y contenedores */
.card {
    background: var(--surface-dark);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

.card:hover {
    transform: translateY(-2px);
}

/* Totales por moneda */
.total-card {
    background: linear-gradient(145deg, var(--surface-dark), var(--background-dark));
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
}

.total-card h3 {
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.total-value {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--primary-color);
    font-family: 'Roboto Mono', monospace;
}

/* Tabla de activos */
.table {
    background: var(--surface-dark);
    border-radius: 8px;
    overflow: hidden;
}

.table thead th {
    background-color: var(--background-dark);
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--border-color);
    padding: 1rem;
}

.table tbody tr {
    transition: background-color 0.2s;
}

.table tbody tr:hover {
    background-color: rgba(33, 150, 243, 0.05);
}

.table td {
    border-color: var(--border-color);
    padding: 1rem;
    color: var(--text-primary);
}

/* Botones */
.btn-primary {
    background-color: var(--primary-color);
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-primary:hover {
    background-color: var(--accent-color);
    transform: translateY(-1px);
}

/* Gráficos de distribución */
.chart-container {
    background: var(--surface-dark);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}

/* Indicadores y badges */
.badge-success {
    background-color: var(--success-color);
    color: white;
}

.badge-warning {
    background-color: var(--warning-color);
    color: white;
}

/* Valores monetarios */
.precio-compra, .valor-total {
    font-family: 'Roboto Mono', monospace;
    color: var(--text-primary);
}

.valor-positivo {
    color: var(--success-color);
}

.valor-negativo {
    color: var(--danger-color);
}

/* Acciones */
.btn-action {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.4rem 0.8rem;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.btn-action:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Responsive */
@media (max-width: 768px) {
    .total-card {
        margin-bottom: 1rem;
    }
    
    .table-responsive {
        border-radius: 8px;
        overflow-x: auto;
    }
}