/*==================================================
  HOJA DE ESTILOS PRINCIPAL (style_tel.css)
==================================================*/

/* 1. GLOBALES Y TIPOGRAFÍA
--------------------------------------------------*/
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400; 
  font-display: swap; 
  src: url('./fonts/inter-v20-latin-regular.woff2') format('woff2');
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  background: #E9ECEF;
}

h1, h3 { color: black; font-weight: bold; }
h2 { text-transform: uppercase; font-weight: bold; font-size: 22px; }
.h4 {
  text-transform: uppercase; color: white; font-size: 15px; font-weight: bold;
  margin: 0; padding: 0;
}
label { font-weight: bold; }

/* 2. CLASES DE UTILIDAD (HELPERS)
--------------------------------------------------*/
.columna-acciones { width: 170px; }
.columna-acciones2 { width: 350px; }

.texto-animado {
  font-size: 2.5rem; 
  font-weight: 900;
  text-align: center;
  padding: 10px;
  background: linear-gradient(120deg, #825AD9, #38B2AC, #ECC94B, #4299E1);
  background-size: 400% 400%;
  animation: cambiarFondo 10s ease infinite; 
  color: transparent; 
  -webkit-background-clip: text; 
  background-clip: text; 
}

/* 3. COMPONENTE: BARRA DE NAVEGACIÓN (NAVBAR)
--------------------------------------------------*/
.navbar-custom {
  background: linear-gradient(to top, #101010, #2D3748); 
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  margin: 20px 30px 0 30px !important; 
  border-radius: 12px !important;
}

.navbar-custom .mi_logo {
    height: 60px; 
    transition: height 0.3s ease;
}

.navbar-custom .nav-item .nav-link {
  position: relative;
  padding-bottom: 5px !important;
  transition: color 0.3s ease-in-out;
  color: white !important;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  margin-right: 5px;
  font-weight: bold;
}
.navbar-custom .nav-item .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; width: 100%; height: 3px; 
  transform: scaleX(0);
  transition: transform 0.3s ease-out, background-color 0.3s ease-out; 
  border-radius: 5px; 
}
.navbar-custom .nav-item .nav-link:hover::after { transform: scaleX(1); }
.navbar-custom .nav-item .nav-link.active::after { transform: scaleX(1); }
.navbar-custom .nav-item .nav-link.active { font-weight: bold; color: #fff !important; }

.navbar-custom .nav-item:nth-child(1) .nav-link::after { background-color: #ffc107; }
.navbar-custom .nav-item:nth-child(2) .nav-link::after { background-color: #28a745; }
.navbar-custom .nav-item:nth-child(3) .nav-link::after { background-color: #6f42c1; }
.navbar-custom .nav-item:nth-child(4) .nav-link::after { background-color: #17a2b8; }
.navbar-custom .nav-item:nth-child(5) .nav-link::after { background-color: #dc3545; }
.navbar-custom .nav-item:nth-child(6) .nav-link::after { background-color: #1d00ff; }

/* 4. COMPONENTE: BANNER Y CONTENEDORES
--------------------------------------------------*/
.banner-placeholder {
  background-image: url('../imagenes/ddicars.svg'); 
  background-size: cover; background-position: center; background-repeat: no-repeat; 
  height: 500px;
}
.container { padding-top: 20px; }

/* 5. COMPONENTE: TARJETAS (CARDS)
--------------------------------------------------*/
.card {
  background-color: #ffffff !important; 
  color: #212529 !important; 
  border: 1px solid #dee2e6; 
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.card-body { font-size: 15px; }
.card .card-body h5 { color: black; font-weight: bold; font-size: 15px; }
.card .precio-display { color: #df0000; font-size: 20px; font-weight: bold; }

/* IMAGEN DEL CATÁLOGO */
.img-card {
  border-bottom: 1px solid black;
  
  /* Forzar que llene el espacio disponible */
  object-fit: cover;   
  background-color: #f8f9fa; 
  
  display: block;
  margin-left: auto;
  margin-right: auto;
  
  }

.card-title-1, .card-header-1 { background: linear-gradient(to top, #101010, #2D3748); }

/* 6. COMPONENTE: FORMULARIOS Y ALERTAS
--------------------------------------------------*/
.form-rl, .form-control, .form-select {
  background-color: #ffffff !important; color: #212529 !important; border-radius: 5px;
}
.alert-success { background-color: #d4edda; border-color: #c3e6cb; color: #155724; }
.alert-danger { background-color: #f8d7da; border-color: #f5c6cb; color: #721c24; }

.btn-rl{
   background: linear-gradient(to top, #101010, #2D3748);
   color: white;
}

.btn-rl:hover{
   background: linear-gradient(to bottom, #101010, #2D3748);
   color: white;
}
.btn-rl:active{
   background: linear-gradient(to bottom, #101010, #2D3748);
   color: white;
}
/*==================================================
  11. ARREGLO PARA BOTONES DE CARGA PERSONALIZADOS
==================================================*/

/* * Esto se aplica a CUALQUIER botón con la clase .btn-loader
 * cuando el JavaScript lo deshabilita.
*/
.btn-rl:disabled {
    /* * 1. Mantenemos el fondo oscuro que usas en tu navbar/footer.
     * ¡Asegúrate de que este sea el 'background' de tu botón!
     */
    background: linear-gradient(to top, #101010, #2D3748);
    
    /* 2. Le damos opacidad para que se vea "deshabilitado" */
    opacity: 0.75; 
    
    /* 3. Evitamos que Bootstrap cambie el color del borde */
    border-color: transparent;
}

/*
 * Arreglo para el SPINNER.
 * Esto fuerza al spinner (que está dentro del botón deshabilitado)
 * a ser visible y a tener color blanco.
*/
.btn-rl:disabled .spinner-border {
    /* * 'display: inline-block' fuerza a que se muestre,
     * anulando la clase 'd-none' de Bootstrap.
     */
    display: inline-block !important; 
    
    /* Forzamos el color blanco del spinner */
    color: #fff;
    
    /* Ajuste vertical (opcional, pero ayuda) */
    vertical-align: text-bottom;
}

/*
 * Arreglo para el TEXTO.
 * Esto asegura que el texto (ej. "Procesando...")
 * también sea visible y blanco.
*/
.btn-rl:disabled .btn-text {
    color: #fff;
    opacity: 0.9; /* Le damos una opacidad ligera */
    vertical-align: middle;
    margin-left: 0.5rem; /* Espacio entre el spinner y el texto */
}

/* 7. COMPONENTE: TABLAS
--------------------------------------------------*/
.table-custom {
  background-color: #ffffff; color: #212529; border-radius: 8px; overflow: hidden;
}
.table-custom tr td { font-size: 14px; }
.card-title-1, .card-header-1, .table-custom tr th {
     background: linear-gradient(to top, #101010, #2D3748); color: white;
}
.table-custom tr th { text-transform: uppercase; font-size: 14px; }

/* 8. ANIMACIONES
--------------------------------------------------*/
@keyframes cambiarFondo {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 9. NUEVA CLASE: Etiqueta de Precio Flotante (Móvil) 
--------------------------------------------------*/
.mobile-price-badge {
    position: absolute;
    bottom: 5px;      
    right: 5px;       
    background-color: rgba(0, 0, 0, 0.75); 
    color: #fff;      
    padding: 2px 8px; 
    border-radius: 12px; 
    font-size: 0.75rem; 
    font-weight: bold;
    z-index: 10;        
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    pointer-events: none; /* Permite hacer clic "a través" de la etiqueta */
}

/*==================================================
  10. COMPONENTE: FOOTER
==================================================*/
.footer-custom {
    /* Copiamos el estilo "flotante" de la navbar */
    background: linear-gradient(to top, #101010, #2D3748); 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border-radius: 12px !important;
    
    /* Márgenes para que "flote" (20px abajo) */
    margin: 40px 30px 20px 30px !important; 
    
    color: #fff;
    padding: 20px 0; /* Espacio interno */
}

.footer-custom p {
    margin: 0;
    color: #adb5bd; /* Un blanco más suave (gris claro) */
    font-size: 0.9rem;
}

/*==================================================
  11. ESTILOS RESPONSIVOS (PARA MÓVILES)
==================================================*/
@media (max-width: 767.98px) {
    .navbar-custom { margin: 0 !important; border-radius: 0 !important; }
    .navbar-custom .mi_logo { height: 40px; }
    .texto-animado { font-size: 1.4rem; }
    .columna-acciones, .columna-acciones2 { width: auto; }

    /* "Look Instagram" para móviles */
    .row-cols-3 .card {
        border: none;
        box-shadow: none;
        background-color: transparent !important;
        padding: 0; 
    }
    .row-cols-3 .img-card {
        border-bottom: none;
        border-radius: 4px; 
    }
    /* Asegurar que el cuerpo de la tarjeta esté oculto en móvil */
    .row-cols-3 .card-body {
        display: none !important;
    }

    .img-card{
    border-bottom: none;
    border-radius: 5px;
  }
  .footer-custom {
        margin: 20px 0 0 0 !important; /* Quitamos márgenes laterales */
        border-radius: 0 !important;
    }
}