/* *************************************** */
/* ********* TITULO Y SUBTITULO ************ */
/* *************************************** */

.listaspbbuscar {
    width: 996px; /* 830px */
    height: auto;
    padding: 1.25rem; /* 20px */
    gap: 1.2325rem; /* 19.72px → aproximado */
    opacity: 1;
    margin: 0 auto; /* centra horizontalmente */
    text-align: center;
    font-family: 'Quicksand', sans-serif;
  }
  
  
  
  .main-title {
    font-weight: 700;
    font-style: Bold;
    font-size: 57px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    color: #003899;
    font-family: 'Quicksand', sans-serif;
  }
  
  .main-desc {
    font-weight: 400;
    font-style: Regular;
    font-size: 26px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    color: #252525;
    font-family: 'Quicksand', sans-serif;
  }


  .videolpb{
    width: 996px;
    height: 645.82px;
  }


/* *************************************** */
/* ********* CAMPO DE BSUQUEDA ********** */
/* *************************************** */

::placeholder {
    font-family: 'Quicksand', sans-serif;
}

/* Contenedor principal para todos los campos (aproximadamente 996px de ancho) */
.search-fields-container {
    width: 100%;
    max-width: 996px; 
    margin: 0 auto; /* Centra el bloque de campos */
    display: flex;
    flex-direction: column;
    gap: 24px; /* Separación entre el textarea, la fila de credenciales y el botón */
    padding: 20px 0; /* Padding vertical para separarlo del texto superior */
}

/* --- CUADRO GRANDE (textarea) --- */
.input-group-main {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 10.06px; /* Separación label/textarea */
    font-family: 'Quicksand', sans-serif;
}

.input-group-main label {
    font-size: 1rem;
    color: #000000;
    font-weight: 500;
}

.input-group-main textarea {
    /* Altura basada en la dimensión total 255px de Figma */
    height: 255.29px; 
    padding: 10px;
    border: 2.52px solid #003899;
    border-radius: 6px;
    resize: vertical; /* Permite redimensionar solo verticalmente */
    font-size: 1rem;
    box-sizing: border-box;
    width: 100%;
}

/* --- CAMPOS DE USUARIO Y CLAVE (Fila inferior) --- */
.credentials-row {
    display: flex;
    gap: 25px; /* Separación entre los dos campos (Usuario y Clave) */
    width: 100%;
}

/* Dimensiones de los cuadros de abajo (485px de ancho) */
.credential-field {
    width: 50%; /* 485px es aproximadamente la mitad de 996px */
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 10.06px;
}

.credential-field label {
    font-size: 1rem;
    color: #000000;
    font-weight: 500;
}

.credential-field input {
    height: 65.39px; 
    padding: 10px;
    border: 2.52px solid #003899;
    border-radius: 6px;
    font-size: 1rem;
    box-sizing: border-box;
}

/* --- BOTÓN DE BÚSQUEDA --- */
.button-container {
    text-align: center; 
    padding-top: 24px; /* Espacio para el gap entre campos y botón */
}

.btn-buscar {
    /* Dimensiones de Figma: width: 196; height: 43; border-radius: 10px; */
    width: 196px;
    height: 43px;
    background-color: #003899; /* Color de botón proporcionado */
    color: white;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s;
    /* Paddings internos definidos (11px top/bottom, 41px left/right) */
    padding: 11px 41px; 
    box-sizing: border-box; 
    display: inline-block;
}

.btn-buscar:hover {
    background-color: #004aad; /* Un tono ligeramente diferente al pasar el mouse */
}

/* ---------------------------------------------------------------- */
/* ------ CORRECCIÓN: ESTILOS AL HACER FOCO (CLIC/TAB) ------ */
/* ---------------------------------------------------------------- */

/* Aplica a ambos: textarea y input */
.input-group-main textarea:focus,
.credential-field input:focus {
    /* 1. Evita que el navegador aplique un borde negro o azul por defecto */
    outline: none; 
    
    /* 2. Mantiene tu borde azul original (puedes añadir un efecto de sombra sutil si quieres un indicador más claro) */
    border-color: #03245e;
    
    /* Opcional: añade un efecto de sombra azul para resaltar sutilmente sin cambiar el borde */
    box-shadow: 0 0 5px rgba(0, 56, 153, 0.5); 
}

/* ===========================
   RESPONSIVE LISTA PB BUSCAR
   =========================== */

/* Laptops y Desktops grandes (<= 1200px) */
@media (max-width: 1200px) {
    .listaspbbuscar {
        width: 95%;
        padding: 1rem;
        text-align: center; /* Asegura que títulos y párrafos estén centrados */
    }
    
    .title, .subtitle, .main-desc-26, .main-desc-22 {
        margin: 0.5rem auto; /* Espaciado consistente */
        text-align: center;
    }
}

/* Tablets grandes y medianas (<= 1024px) */
@media (max-width: 1024px) {
    .listaspbbuscar {
        width: 90%;
        padding: 1rem;
    }

    .search-fields-container {
        padding: 20px 15px;
    }

    .title {
        font-size: 3.2rem;
    }

    .subtitle {
        font-size: 1.8rem;
    }

    .main-desc-26 {
        font-size: 1.4rem;
    }

    .main-desc-22 {
        font-size: 1.2rem;
    }
}

/* Tablets pequeñas y móviles grandes (<= 768px) */
@media (max-width: 768px) {
    .listaspbbuscar {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }

    /* Centrar títulos y textos */
    .title, .subtitle, .main-desc-26, .main-desc-22 {
        text-align: center;
        margin: 0.4rem auto;
    }

    /* Apilar campos de usuario y clave */
    .credentials-row {
        flex-direction: column;
        gap: 12px;
    }

    .credential-field {
        width: 100%;
    }

    /* Ajustar textarea */
    .input-group-main textarea {
        height: 180px;
    }

    /* Botón centrado y tamaño adecuado */
    .btn-buscar {
        width: 160px;
        height: 40px;
        font-size: 0.95rem;
        padding: 10px 30px;
    }
}

/* Móviles pequeños (<= 480px) */
@media (max-width: 480px) {
    .main-desc{
        font-size: 14px;
        width: 319px;
        padding: 0;
    }
    .title {
        font-size: 22px;
        margin-bottom: 0.3rem;
    }

    .subtitle {
        font-size: 14px;
        margin-bottom: 0.5rem;
    }

    .main-desc-26 {
        font-size: 14px;
        margin-bottom: 0.3rem;
        width: 90%;
    }

    .main-desc-22 {
        font-size: 14px;
        margin-bottom: 0.5rem;
        width: 90%;
    }

    .input-group-main textarea {
        height: 140px;
    }

    .credential-field input {
        height: 45px;
        font-size: 0.95rem;
    }

    .btn-buscar {
        width: 100%;
        font-size: 0.9rem;
        padding: 8px 20px;
    }

    .search-fields-container {
        padding: 15px 10px;
    }

    .videolpb {
        width: 316px !important;
        height: 206.84px !important;
    }


    .input-group-main textarea {
        font-size: 14px !important;
    }
    .credential-field label{
        font-size: 14px !important;
    }
    .credentials-row{
        font-size: 14px;
    }

}



/* Móviles pequeños (<= 375px) */
@media (max-width: 375px) {
    .main-desc{
        font-size: 14px;
        width: 319px;
        padding: 0;
    }
    .title {
        font-size: 22px;
        margin-bottom: 0.3rem;
    }

    .subtitle {
        font-size: 14px;
        margin-bottom: 0.5rem;
    }

    .main-desc-26 {
        font-size: 14px;
        margin-bottom: 0.3rem;
        width: 90%;
    }

    .main-desc-22 {
        font-size: 14px;
        margin-bottom: 0.5rem;
        width: 90%;
    }

    .input-group-main textarea {
        height: 140px;
    }

    .credential-field input {
        height: 45px;
        font-size: 0.95rem;
    }

    .btn-buscar {
        width: 100%;
        font-size: 0.9rem;
        padding: 8px 20px;
    }

    .search-fields-container {
        padding: 15px 10px;
    }

    .videolpb {
        width: 316px !important;
        height: 206.84px !important;
    }


    .input-group-main textarea {
        font-size: 14px !important;
    }
    .credential-field label{
        font-size: 14px !important;
    }
    .credentials-row{
        font-size: 14px;
    }

}

/* Móviles muy pequeños (<= 360px) */
@media (max-width: 360px) {
    .title {
        font-size: 1.8rem;
    }

    .subtitle {
        font-size: 1.2rem;
    }

    .main-desc-26 {
        font-size: 1rem;
    }

    .main-desc-22 {
        font-size: 0.9rem;
    }

    .input-group-main textarea {
        height: 120px;
        font-size: 14px !important;
    }
    .credential-field label{
        font-size: 14px !important;
    }
    .credentials-row{
        font-size: 14px;
    }

    .btn-buscar {
        width: 130px;
        height: 34px;
        font-size: 0.85rem;
    }

    .credential-field input {
        height: 42px;
    }
}