/* =====================================================
   BUSCADOR DE ACCESORIOS
   Diseño estilo Apple / Tesla
   Archivo: style.css
===================================================== */


/* ------------------------------
   Configuración general
------------------------------ */

* {
    box-sizing: border-box;
}


body {

    margin: 0;

    padding: 20px;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    background: #f7f8fa;

    color: #111827;

}



/* ------------------------------
   Caja principal
------------------------------ */

.buscador-container {

    max-width: 1000px;

    margin: 40px auto;

    background: white;

    padding: 40px;

    border-radius: 24px;

    box-shadow:
        0 15px 40px rgba(0,0,0,0.08);

}



/* ------------------------------
   Títulos
------------------------------ */


h2 {

    text-align: center;

    margin-top: 0;

    font-size: 32px;

    letter-spacing: -0.5px;

}



.descripcion {

    text-align: center;

    color: #6b7280;

    margin-bottom: 35px;

}



/* ------------------------------
   Selectores
------------------------------ */


.selectores {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr auto;

    gap: 20px;

    align-items: end;

}

.campo label {

    display:block;

    font-size:14px;

    font-weight:600;

    margin-bottom:8px;

}



select {

    width: 100%;

    height: 48px;

    padding: 0 15px;

    border-radius: 14px;

    border: 1px solid #d1d5db;

    background: white;

    font-size: 16px;

    cursor: pointer;

    transition: .25s ease;

}


select:hover {


    border-color:#2563eb;

}



select:focus {


    outline:none;

    border-color:#2563eb;

    box-shadow:
    0 0 0 4px rgba(37,99,235,.15);

}



/* ------------------------------
   Botón
------------------------------ */


button {

    width: auto;

    height: 48px;

    padding: 0 22px;

    margin-top: 0;

    border: none;

    border-radius: 10px;

    background: #2563eb;

    color: white;

    font-size: 17px;

    font-weight: 600;

    cursor: pointer;

    transition: .25s ease;

    white-space: nowrap;

}



button:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 18px rgba(0,0,0,.12);

}


/* ------------------------------
   Mensajes
------------------------------ */


#mensaje {


    text-align:center;

    margin-top:20px;

    font-size:14px;

    color:#6b7280;

}



/* ------------------------------
   Móviles
------------------------------ */


@media(max-width:700px){


    .buscador-container {


        padding:25px;

        margin:15px auto;

    }


    h1 {

        font-size:18px;

    }


    .selectores {

        grid-template-columns:1fr;

    }


}

.buscador-container h2 {

    text-align: center !important;

    margin: 0 auto 25px auto;

    font-size: 20px;

    letter-spacing: -0.5px;

}

/* =====================================================
   BUSCADOR MINI CABECERA
===================================================== */

.buscador-container-mini{
    max-width:none !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    border-radius:0 !important;
    box-shadow:none !important;
}

.buscador-container-mini .selectores{
    display:flex !important;
    width:100% !important;
    gap:5px !important;
    align-items:center !important;
}

.buscador-container-mini .campo{
    flex:1 !important;
    width:25% !important;
}

.buscador-container-mini .campo label{
    display:none !important;
}

.buscador-container-mini select{
    width:100% !important;
    height:30px !important;
    min-height:30px !important;
    padding:0 6px !important;
    font-size:13px !important;
    font-weight:500 !important;
    color:#222 !important;
    border-radius:8px !important;
}

.buscador-container-mini #buscar{
    flex:1 !important;
    width:25% !important;
    height:30px !important;
    padding:0 12px !important;
    font-size:13px !important;
    font-weight:600 !important;
    border-radius:8px !important;
}

@media (max-width:700px){

    .site-header .widget-area{
        display:block !important;
        visibility:visible !important;
    }

    .site-header .widget-area .widget{
        display:block !important;
    }

    .buscador-container-mini select{
        font-size:12px !important;
    }

    .buscador-container-mini #buscar{
        flex:0 0 18% !important;
        font-size:0 !important;
    }

    .buscador-container-mini #buscar::before{
        content:"Buscar";
        font-size:11px;
        font-weight:600;
    }

}
.buscador-container h4{
    text-align:center;
    margin:0 0 22px;
    font-size:18px;
    font-weight:700;
    color:#111827;
}