/* ============================================================
   malagadive-pages.css
   Estilos de páginas: catálogo, ficha producto, paginación
   ============================================================ */

/* ── Variables heredadas del megamenú ── */
:root {
    --color-accent: #0086c3;
    --color-accent-dark: #006a9e;
    --color-text: #1a1a1a;
    --color-text-muted: #666;
    --color-border: #e0e0e0;
    --color-bg: #ffffff;
    --color-bg-soft: #f7f8fa;
    --color-success: #2ecc71;
    --radius: 8px;
    --shadow: 0 2px 8px rgba(0,0,0,0.08);
    --transition: 0.2s ease;
}

/* ══════════════════════════════════════════════════════════
   CATÁLOGO — seccion.aspx / Productos_Catalogo_new.ascx
   ══════════════════════════════════════════════════════════ */

.catalogo-div {
    padding: 20px 0 40px;
}

.h1_seccion {
    font-family: samspro, sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--color-accent);
    letter-spacing: 0.5px;
}

/* Barra de filtros */
.filtros-catalogo {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.ordernacion {
    background: var(--color-bg-soft);
    border-bottom: 1px solid var(--color-border);
    padding: 12px 0;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.precio {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: samspro, sans-serif;
    font-size: 14px;
    color: var(--color-text-muted);
}

/* Cards de producto */
.producto {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .producto:hover {
        box-shadow: 0 6px 24px rgba(0,0,0,0.12);
        transform: translateY(-2px);
    }

    .producto img {
        width: 100%;
        object-fit: contain;
        background: #fafafa;
        aspect-ratio: 1 / 1;
        transition: transform var(--transition);
    }

    .producto:hover img {
        transform: scale(1.04);
    }

.link-p {
    text-decoration: none;
    color: inherit;
    display: block;
}

.producto-caption {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 6px;
}

    .producto-caption .titulo {
        font-family: samspro, sans-serif;
        font-size: 13px;
        font-weight: 600;
        color: var(--color-text);
        line-height: 1.4;
        min-height: 36px;
    }

h3.producto-titulo {
    font-family: samspro, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 4px;
    line-height: 1.3;
}

.producto-tipo {
    font-size: 12px;
    color: var(--color-text-muted);
}

    .producto-tipo .det {
        font-size: 11px;
    }

.producto-precios {
    margin-top: auto;
    padding-top: 8px;
}

.producto-pvp {
    font-family: samspro, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-accent);
}

    .producto-pvp strong {
        font-weight: 800;
    }

.precio-tachado {
    font-size: 13px;
    color: var(--color-text-muted);
    text-decoration: line-through;
    margin-right: 6px;
}

/* Botones de catálogo */
.btn-verde,
.btn-azul,
a.btn-verde,
a.btn-azul {
    display: inline-block;
    background: var(--color-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-family: samspro, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
    width: auto !important;
    margin-top: 8px !important;
}

    .btn-verde:hover,
    .btn-azul:hover,
    a.btn-verde:hover,
    a.btn-azul:hover {
        background: var(--color-accent-dark) !important;
        transform: none !important;
        color: #fff !important;
    }

/* ══════════════════════════════════════════════════════════
   PAGINACIÓN — control Paginacion.vb
   Genera: <ul class='estiloLista'><li class='activa|inactiva|separador'>
   ══════════════════════════════════════════════════════════ */

.paginacion {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0 12px;
    gap: 8px;
}

    /* ul generado por el control */
    .paginacion ul,
    ul.paginacion-list {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        list-style: none;
        margin: 0;
        padding: 0;
        align-items: center;
        justify-content: center;
    }

        .paginacion ul li,
        ul.paginacion-list li {
            display: inline-flex;
        }

            .paginacion ul li a,
            ul.paginacion-list li a {
                display: flex;
                align-items: center;
                justify-content: center;
                min-width: 36px;
                height: 36px;
                padding: 0 8px;
                border: 1px solid var(--color-border);
                border-radius: 6px;
                background: var(--color-bg);
                color: var(--color-text);
                font-family: samspro, sans-serif;
                font-size: 14px;
                font-weight: 500;
                text-decoration: none;
                transition: all var(--transition);
            }

                .paginacion ul li a:hover,
                ul.paginacion-list li a:hover {
                    border-color: var(--color-accent);
                    color: var(--color-accent);
                    background: rgba(0,134,195,0.06);
                }

            /* Página activa */
            .paginacion ul li.activa a,
            ul.paginacion-list li.activa a {
                background: var(--color-accent);
                border-color: var(--color-accent);
                color: #fff;
                font-weight: 700;
            }

            /* Separador ... */
            .paginacion ul li.separador,
            ul.paginacion-list li.separador {
                color: var(--color-text-muted);
                padding: 0 4px;
                align-items: center;
                font-size: 16px;
            }

/* Botones anterior/siguiente legacy */
.button_pag,
.button_pag_min,
a.button_pag,
a.button_pag_min {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg);
    color: var(--color-text) !important;
    font-family: samspro, sans-serif;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition);
    width: auto !important;
    margin-top: 0 !important;
}

    .button_pag:hover,
    .button_pag_min:hover {
        border-color: var(--color-accent);
        color: var(--color-accent) !important;
    }

/* ══════════════════════════════════════════════════════════
   FICHA DE PRODUCTO — vista_producto / producto_normal / producto_maestro
   ══════════════════════════════════════════════════════════ */

.container-centrado {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 16px 60px;
}

.hero-feature {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 20px 0;
}

.sitemap {
    display: block;
    font-family: samspro, sans-serif;
    font-size: 13px;
    color: var(--color-text-muted);
    margin-bottom: 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
}

    .sitemap a {
        color: var(--color-accent);
        text-decoration: none;
    }

        .sitemap a:hover {
            text-decoration: underline;
        }

.div_caracteristicas {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 20px;
}

.producto-titulo {
    font-family: samspro, sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 8px;
    line-height: 1.3;
}

.producto-modelo {
    font-family: samspro, sans-serif;
    font-size: 13px;
    color: var(--color-text-muted);
    font-weight: 500;
}

.producto-detalle {
    font-family: samspro, sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text);
}

.producto-iva {
    font-family: samspro, sans-serif;
    font-size: 12px;
    color: var(--color-text-muted);
    display: block;
    margin-bottom: 4px;
}

.detalle_largo {
    font-family: samspro, sans-serif;
    font-size: 15px;
    color: var(--color-text);
    line-height: 1.7;
}

.infotext {
    margin-bottom: 16px;
}

.span_tit {
    font-family: samspro, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: block;
    margin-top: 16px;
    margin-bottom: 4px;
}

.attr {
    font-size: 14px;
    color: var(--color-text-muted);
}

.prop {
    font-size: 14px;
    color: var(--color-text);
    font-weight: 600;
}

.tab_panel_content {
    padding: 20px;
    font-family: samspro, sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 16px;
}

/* ══════════════════════════════════════════════════════════
   HOMEPAGE — Default.aspx
   ══════════════════════════════════════════════════════════ */

.intro-table {
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    min-height: 280px;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    transition: transform var(--transition);
}

    .intro-table:hover {
        transform: scale(1.01);
    }

.intro-alargada {
    min-height: 320px;
}

.intro-table .bottom {
    background: linear-gradient(transparent, rgba(0,0,0,0.75));
    width: 100%;
    padding: 20px 16px 16px;
}

    .intro-table .bottom h4 {
        color: #fff;
        font-family: samspro, sans-serif;
        margin: 0 0 8px;
    }

.black.heading.small-heading {
    font-size: 16px;
    font-weight: 700;
}

.black.heading.small-pt.expand {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}

.intro-productos {
    display: inline-block;
    background: var(--color-accent);
    color: #fff !important;
    padding: 7px 18px;
    border-radius: 6px;
    font-family: samspro, sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 8px;
    transition: background var(--transition);
    width: auto !important;
    margin-top: 8px !important;
}

    .intro-productos:hover {
        background: var(--color-accent-dark);
        color: #fff !important;
    }

/* ══════════════════════════════════════════════════════════
   MISC
   ══════════════════════════════════════════════════════════ */

.tagcloud05 {
    padding: 24px;
    background: var(--color-bg-soft);
    border-radius: var(--radius);
    margin: 24px 0;
}

    .tagcloud05 ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }

        .tagcloud05 ul li a {
            display: inline-block;
            padding: 5px 14px;
            background: var(--color-bg);
            border: 1px solid var(--color-border);
            border-radius: 20px;
            font-family: samspro, sans-serif;
            font-size: 13px;
            color: var(--color-text-muted);
            text-decoration: none;
            transition: all var(--transition);
        }

            .tagcloud05 ul li a:hover {
                border-color: var(--color-accent);
                color: var(--color-accent);
            }

/* Contenedor catálogo */
.container_catalogo {
    width: 100%;
}

/* Responsive cards */
@media (max-width: 768px) {
    .hero-feature {
        flex-direction: column;
    }

    .container-centrado {
        padding: 16px;
    }

    .producto-titulo {
        font-size: 18px;
    }

    .filtros-catalogo {
        flex-direction: column;
    }

    .h1_seccion {
        font-size: 20px;
    }
}