@charset "utf-8";

/* =========================================================
   TICOJARRAS - CATALOGO 2026
   Capa visual independiente para tazas-personalizadas.php
   Se carga DESPUES de hojaestilos_full_2024.css.
   ========================================================= */

:root{
    --tj-cat-blue:#0b3f78;
    --tj-cat-red:#e30613;
    --tj-cat-text:#183653;
    --tj-cat-muted:#708198;
    --tj-cat-border:#e4ebf2;
    --tj-cat-bg:#f7f9fc;
    --tj-cat-white:#fff;
}

/* CONTENEDOR */
.tabla_contenido_pre{
    width:100%;
    background:var(--tj-cat-bg);
    padding:38px 0 55px;
}

.tabla_contenido{
    width:min(1300px, calc(100% - 48px));
    margin:0 auto;
}

/* TITULO */
.tabla_contenido > h1{
    margin:0;
    color:var(--tj-cat-blue);
    font-size:clamp(28px,3vw,42px);
    line-height:1.12;
    font-weight:800;
    letter-spacing:-.6px;
}

.tabla_contenido > .puntos{
    width:62px;
    height:4px;
    margin:13px 0 12px;
    background:var(--tj-cat-red);
    border-radius:10px;
}

/* MIGAS */
.escalonado{
    margin:0 0 30px;
    color:var(--tj-cat-muted);
    font-size:13px;
    line-height:1.5;
}

.escalonado a{
    color:var(--tj-cat-blue);
    text-decoration:none;
}

.escalonado a:hover{
    color:var(--tj-cat-red);
}

/* GRILLA
   !important es intencional porque el PHP actual escribe
   grid-template-columns como estilo inline.
*/
.grillajust{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:24px !important;
    align-items:stretch !important;
    justify-items:stretch !important;
    margin-top:0 !important;
}

/* TARJETA */
.producticos{
    width:100% !important;
    min-width:0;
    min-height:0 !important;
    margin:0 !important;
    display:flex !important;
    flex-direction:column;
    overflow:hidden;
    text-align:left !important;
    background:var(--tj-cat-white);
    border:1px solid var(--tj-cat-border) !important;
    border-radius:15px !important;
    box-shadow:0 5px 18px rgba(9,52,99,.055);
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

.producticos:hover{
    transform:translateY(-4px);
    border-color:#cbd9e8 !important;
    box-shadow:0 13px 30px rgba(9,52,99,.12);
}

/* IMAGEN */
.img_resultsUNDER,
.img_results{
    width:100% !important;
    height:auto !important;
    display:block !important;
    background-color:#fff !important;
    background-size:contain !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
}

.img_resultsUNDER{
    position:relative;
    overflow:hidden;
}

.img_results{
    transition:transform .35s ease !important;
}

.producticos:hover .img_results{
    transform:scale(1.025);
}

.img_results a,
.img_resultsUNDER a{
    display:block;
    width:100%;
    text-decoration:none;
}

.ciencien{
    display:block !important;
    width:100% !important;
    height:auto !important;
    aspect-ratio:1 / 1;
    object-fit:contain;
    background:#fff;
}

/* DESCRIPCION */
.producticos_descripcion_index{
    width:100% !important;
    min-height:112px;
    height:auto !important;
    padding:16px 17px 18px !important;
    display:flex !important;
    flex:1;
    background:#fff !important;
    border-top:1px solid #edf1f5;
    text-align:left !important;
}

.detals{
    width:100%;
    display:flex;
    flex-direction:column;
}

.r_titulo_index{
    min-height:42px;
    margin:0 0 7px;
    color:var(--tj-cat-text) !important;
    font-size:15px !important;
    font-weight:700 !important;
    line-height:1.38 !important;
    text-align:left !important;
}

.r_codigo_index{
    margin-top:auto;
    color:#8796a8 !important;
    font-size:11px !important;
    font-weight:500 !important;
    line-height:1.3;
    text-align:left !important;
}

.preciorojo,
.r_antes_index,
.r_preciosin{
    margin-top:7px;
    color:var(--tj-cat-red) !important;
    font-size:16px !important;
    font-weight:700 !important;
}

/* PAGINACION */
.paginacion_nueva{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:7px;
    margin:38px auto 0;
}

.paginacion_nueva a,
.paginacion_nueva span,
.pagina-activa{
    min-width:38px;
    min-height:38px;
    padding:8px 11px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--tj-cat-blue);
    background:#fff;
    border:1px solid #dce5ef;
    border-radius:8px;
    text-decoration:none;
    font-size:13px;
    font-weight:700;
}

.paginacion_nueva a:hover,
.pagina-activa{
    color:#fff !important;
    background:var(--tj-cat-blue) !important;
    border-color:var(--tj-cat-blue) !important;
}

/* TABLET */
@media (max-width:1050px){
    .grillajust{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:18px !important;
    }
}

/* TABLET PEQUEÑA */
@media (max-width:760px){
    .tabla_contenido_pre{
        padding:28px 0 42px;
    }

    .tabla_contenido{
        width:calc(100% - 30px);
    }

    .grillajust{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:14px !important;
    }

    .producticos{
        display:flex !important;
    }

    .producticos_descripcion_index{
        min-height:105px;
        padding:13px 13px 15px !important;
    }

    .r_titulo_index{
        min-height:39px;
        font-size:14px !important;
    }
}

/* MOVIL */
@media (max-width:480px){
    .tabla_contenido{
        width:calc(100% - 22px);
    }

    .tabla_contenido > h1{
        font-size:27px;
    }

    .escalonado{
        margin-bottom:22px;
        font-size:11px;
    }

    .grillajust{
        gap:10px !important;
    }

    .producticos{
        border-radius:11px !important;
    }

    .producticos_descripcion_index{
        min-height:96px;
        padding:11px 10px 13px !important;
    }

    .r_titulo_index{
        min-height:37px;
        margin-bottom:5px;
        font-size:12.5px !important;
        line-height:1.35 !important;
    }

    .r_codigo_index{
        font-size:10px !important;
    }

    .preciorojo,
    .r_antes_index,
    .r_preciosin{
        font-size:14px !important;
    }
}

@media (prefers-reduced-motion:reduce){
    .producticos,
    .img_results{
        transition:none !important;
    }
}


/* =========================================================
   CABECERA DE RESULTADOS 2026
   ========================================================= */

.tj-results-head{
    margin:4px 0 18px;
}

.tj-results-title{
    margin:0 !important;
    color:#102f54 !important;
    font-size:clamp(30px,3.1vw,44px) !important;
    line-height:1.08 !important;
    font-weight:800 !important;
    letter-spacing:-1px;
}

.tj-results-title span{
    color:#e30613;
}

.tj-results-subtitle{
    margin:7px 0 0;
    color:#73839a;
    font-size:14px;
    line-height:1.5;
}

.tj-results-toolbar{
    width:100%;
    margin:0 0 26px;
    padding:10px 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    background:linear-gradient(135deg,#fff7f7 0%,#fff 55%,#f7f9fc 100%);
    border:1px solid #f0d9dc;
    border-left:4px solid #e30613;
    border-radius:12px;
    box-shadow:0 5px 18px rgba(14,47,84,.06);
}

.tj-results-count{
    min-width:0;
    display:flex;
    align-items:center;
    gap:11px;
}

.tj-results-count__icon{
    width:39px;
    height:39px;
    flex:0 0 39px;
    display:grid;
    place-items:center;
    color:#fff;
    background:linear-gradient(145deg,#ff2837,#c9000d);
    border-radius:10px;
    box-shadow:0 5px 12px rgba(227,6,19,.20);
    font-size:18px;
}

.tj-results-count strong{
    display:block;
    color:#15385f;
    font-size:13px;
    line-height:1.25;
}

.tj-results-count small{
    display:block;
    margin-top:2px;
    color:#8390a1;
    font-size:11px;
    line-height:1.3;
}

.tj-results-order{
    display:flex;
    align-items:center;
    gap:10px;
    flex:0 0 auto;
}

.tj-results-order > span{
    color:#15385f;
    font-size:12px;
    font-weight:700;
}

.tj-results-order select{
    min-width:170px;
    height:40px;
    padding:0 38px 0 13px;
    color:#15385f;
    background:#fff;
    border:1px solid #dbe3ed;
    border-radius:9px;
    outline:none;
    font-family:inherit;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    box-shadow:0 2px 8px rgba(14,47,84,.04);
}

.tj-results-order select:focus{
    border-color:#e30613;
    box-shadow:0 0 0 3px rgba(227,6,19,.10);
}

/* La miga queda arriba del título, como en la propuesta */
.tabla_contenido .escalonado{
    margin:0 0 13px !important;
}

.tabla_contenido .escalonado span{
    margin:0 5px;
    color:#a3afbd;
}

/* Ya no necesitamos la vieja línea .puntos en esta pantalla */
.tabla_contenido .tj-results-head + .puntos{
    display:none;
}

@media (max-width:700px){
    .tj-results-title{
        font-size:29px !important;
    }

    .tj-results-subtitle{
        font-size:13px;
    }

    .tj-results-toolbar{
        padding:12px;
        align-items:stretch;
        flex-direction:column;
        gap:12px;
    }

    .tj-results-order{
        width:100%;
        justify-content:space-between;
    }

    .tj-results-order select{
        min-width:0;
        flex:1;
    }
}

@media (max-width:430px){
    .tj-results-title{
        font-size:26px !important;
    }

    .tj-results-order > span{
        display:none;
    }

    .tj-results-order select{
        width:100%;
    }
}