/* =================================
   1. ESTILOS CAMBIO ENTRE FORMULARIO CLAVE-NOMBRE
   ================================= */
.switch-pills {
    display: inline-flex;
    background: rgba(255,255,255,0.15); /* Hago el fondo un poco más sutil */
    backdrop-filter: blur(10px);
    border-radius: 50px;
    padding: 6px; /* Aumentar un poco el padding da más 'cuerpo' al borde */
    /* *** Cambio Clave para Profundidad y 'Encendido' *** */
    /* Sombra exterior más suave y una sombra interior para el efecto 'hundido' */
    box-shadow: 
        0 8px 15px rgba(0,0,0,0.2), /* Sombra exterior para la profundidad */
        inset 0 0 10px rgba(0, 255, 0, 0.05); /* Toque tenue de iluminación verde (casi invisible) */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Borde sutil */
}

.switch-pills .nav-link {
    border-radius: 50px;
    padding: 0.7rem 1.8rem; /* Ajuste ligero para que se vea mejor */
    font-weight: 600;
    font-size: 1.1rem;
    color: #444;
    background: transparent;
    transition: all 0.3s ease, box-shadow 0.1s; /* Agrego box-shadow para el efecto press */
    /* *** Nuevo: Sombra sutil por defecto para que no se vea plano *** */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Estado Activo: Agrega Realismo, Iluminación de 'Encendido' y Efecto 3D */
.switch-pills .nav-link.active {
    background: linear-gradient(145deg, #28a745, #34d058);
    color: #fff;
    /* *** Cambios Clave: Efecto 3D y Glow Verde *** */
    box-shadow: 
        0 6px 15px rgba(40, 167, 69, 0.6), /* Sombra principal más fuerte para la elevación */
        0 0 15px rgba(52, 208, 88, 0.7), /* 🟢 **Glow de Encendido (Iluminación Tenue Verde)** 🟢 */
        inset 0 -2px 4px rgba(0,0,0,0.3); /* Sombra interior para dar la forma convexa */
    transform: translateY(-2px);
}

/* Opcional: Efecto al presionar (Press Down) */
.switch-pills .nav-link:not(.active):active {
    transform: translateY(1px); /* Mueve hacia abajo un poco */
    box-shadow: 0 1px 2px rgba(0,0,0,0.15), inset 0 0 3px rgba(0,0,0,0.1); /* Aplana la sombra */
}
/* =================================
   1. ESTILOS FORMULARIO BUSQUEDA POR CLAVE INDEX
   ================================= */

/* Inputs compactos: ancho justo según caracteres */
.input-compact {
  width: 80px; /* ajusta según el campo */
  padding-left: 0.3rem;
  padding-right: 0.3rem;
  font-size: 1.1rem;
}

/* En escritorio los campos se muestran en una sola línea */
@media (min-width: 992px) {
  #search-by-id-form .row {
    flex-wrap: nowrap;
  }
}

/* Mejor presentación en pantallas pequeñas */
@media (max-width: 991px) {
  .input-compact {
    width: 100%;
  }

  /* En móviles los botones ocupan todo el ancho */
  #search-by-id-form .btn {
    width: 100%;
  }
}

/* Botones centrados con ancho automático en escritorio */
#search-by-id-form .btn {
  width: auto;
  min-width: 200px;
  text-align: center;
  border-radius: 10px;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* Contenedor del formulario con sombra ligera */
#search-by-id-form .border {
  border-color: #dee2e6 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
/* =================================
   1.1. ESTILOS FORMULARIO BUSQUEDA POR NOMBRE INDEX
   ================================= */
.input-wide {
  width: 100%;
  padding: 0.5rem 0.6rem;
  font-size: 1.1rem;
}

/* Placeholders más tenues y modernos */
.input-wide::placeholder {
  color: #adb5bd;
  opacity: 0.8;
}

/* Sombra ligera y borde uniforme */
#search-by-name-form .border {
  border-color: #dee2e6 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Responsive para pantallas pequeñas */
@media (max-width: 991px) {
  #form-busqueda-nombre .row {
    flex-direction: column;
  }

  #form-busqueda-nombre .btn {
    width: 100%;
  }
}