/* ===========================================================
   BUSCADOR RETENES BRUCE v2.0
=========================================================== */

*{
    box-sizing:border-box;
}

#buscador-bruce{
    width:100%;
    margin:30px auto;
    font-family:Arial,Helvetica,sans-serif;
    color:#333;
}

.bruce-layout{
    display:flex;
    align-items:flex-start;
    gap:30px;
}

/* ===================================
   SIDEBAR
=================================== */

.bruce-sidebar{
    width:320px;
    flex-shrink:0;
    position:sticky;
    top:20px;
}

.bruce-content{
    flex:1;
    min-width:0;
}

/* ===================================
   TARJETAS
=================================== */

.bruce-card{

    background:#ffffff;

    border:1px solid #e5e5e5;

    border-radius:10px;

    padding:24px;

    box-shadow:0 2px 10px rgba(0,0,0,.08);

}

.bruce-card h3{

    margin:0;

    margin-bottom:18px;

    font-size:24px;

    color:#222;

}

.bruce-subtitle{

    margin-top:-10px;

    margin-bottom:25px;

    color:#777;

    font-size:14px;

}

/* ===================================
   FORMULARIO
=================================== */

.bruce-row{

    margin-bottom:18px;

}

.bruce-row label{

    display:block;

    margin-bottom:6px;

    font-weight:600;

    color:#555;

}

.bruce-row input,

.bruce-row select{

    width:100%;

    padding:11px 12px;

    border:1px solid #d7d7d7;

    border-radius:6px;

    font-size:15px;

    transition:.20s;

    background:#fff;

}

.bruce-row input:focus,

.bruce-row select:focus{

    outline:none;

    border-color:#f58220;

    box-shadow:0 0 0 3px rgba(245,130,32,.15);

}

/* ===================================
   BOTONES
=================================== */

.bruce-buttons{

    display:flex;

    gap:12px;

    margin-top:28px;

}

.bruce-btn{

    flex:1;

    padding:12px;

    border:none;

    border-radius:6px;

    cursor:pointer;

    font-weight:bold;

    font-size:15px;

    transition:.20s;

}

.bruce-btn:hover{

    transform:translateY(-1px);

}

.bruce-btn-primary{

    background:#f58220;

    color:white;

}

.bruce-btn-primary:hover{

    background:#df6d08;

}

#bruce-limpiar-btn{

    background:#efefef;

    color:#444;

}

#bruce-limpiar-btn:hover{

    background:#dddddd;

}
/* ===================================
   RESULTADOS
=================================== */

.bruce-results-info{

    margin-bottom:20px;

    font-size:14px;

    color:#666;

}

#resultado-busqueda{

    width:100%;

    overflow-x:auto;

}

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

table.bruce-resultados{

    width:100%;

    border-collapse:collapse;

    background:#fff;

    border:1px solid #ececec;

}

table.bruce-resultados thead{

    background:#f58220;

}

table.bruce-resultados th{

    color:#fff;

    padding:13px 10px;

    text-align:left;

    font-size:14px;

    white-space:nowrap;

    font-weight:bold;

}

table.bruce-resultados td{

    padding:11px 10px;

    border-bottom:1px solid #ececec;

    font-size:14px;

    vertical-align:top;

}

table.bruce-resultados tbody tr{

    transition:.15s;

}

table.bruce-resultados tbody tr:nth-child(even){

    background:#fafafa;

}

table.bruce-resultados tbody tr:hover{

    background:#fff5eb;

}

table.bruce-resultados td:nth-child(5){

    width:55%;

    white-space:normal;

}

/* ===================================
   PAGINACIÓN
=================================== */

.bruce-pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    flex-wrap:wrap;

    margin-top:25px;

}

.bruce-page-btn{

    min-width:42px;

    height:40px;

    padding:0 14px;

    border:1px solid #d8d8d8;

    background:#fff;

    border-radius:6px;

    cursor:pointer;

    font-size:14px;

    font-weight:bold;

    transition:.15s;

}

.bruce-page-btn:hover{

    background:#f58220;

    border-color:#f58220;

    color:#fff;

}

.bruce-page-btn.active{

    background:#f58220;

    border-color:#f58220;

    color:#fff;

}

.bruce-page-btn:disabled{

    opacity:.35;

    cursor:not-allowed;

}

/* ===================================
   MENSAJES
=================================== */

#resultado-busqueda p{

    margin:12px 0;

    line-height:1.5;

}

#resultado-busqueda .loading{

    color:#777;

    font-style:italic;

}

/* ===================================
   SCROLL HORIZONTAL TABLA
=================================== */

.bruce-table-wrapper{

    width:100%;

    overflow-x:auto;

}

.bruce-table-wrapper table{

    min-width:700px;

}
/* ===================================
   RESPONSIVE
=================================== */

@media (max-width:1200px){

    .bruce-sidebar{
        width:290px;
    }

}

@media (max-width:992px){

    .bruce-layout{

        flex-direction:column;

    }

    .bruce-sidebar{

        width:100%;
        position:relative;
        top:auto;

    }

    .bruce-content{

        width:100%;

    }

}

@media (max-width:768px){

    .bruce-card{

        padding:18px;

    }

    .bruce-card h3{

        font-size:22px;

    }

    .bruce-buttons{

        flex-direction:column;

    }

    .bruce-btn{

        width:100%;

    }

    table.bruce-resultados{

        min-width:680px;

    }

}

@media (max-width:480px){

    #buscador-bruce{

        margin:15px auto;

    }

    .bruce-card{

        padding:15px;

    }

    .bruce-card h3{

        font-size:20px;

    }

    .bruce-row{

        margin-bottom:15px;

    }

    .bruce-row input{

        font-size:16px;

    }

}

/* ===================================
   DETALLES VISUALES
=================================== */

#resultado-busqueda table{

    border-radius:8px;
    overflow:hidden;

}

#resultado-busqueda::-webkit-scrollbar{

    height:10px;

}

#resultado-busqueda::-webkit-scrollbar-track{

    background:#efefef;

}

#resultado-busqueda::-webkit-scrollbar-thumb{

    background:#f58220;
    border-radius:20px;

}

#resultado-busqueda::-webkit-scrollbar-thumb:hover{

    background:#d96d0c;

}

/* ===================================
   EFECTOS
=================================== */

.bruce-card{

    transition:.25s;

}

.bruce-card:hover{

    box-shadow:0 8px 20px rgba(0,0,0,.10);

}

.bruce-btn{

    transition:
        background .20s,
        color .20s,
        border .20s,
        transform .15s;

}

.bruce-page-btn{

    transition:
        background .20s,
        color .20s,
        border .20s;

}

/* ===================================
   UTILIDADES
=================================== */

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}

.mt-10{

    margin-top:10px;

}

.mt-20{

    margin-top:20px;

}

.mb-20{

    margin-bottom:20px;

}