/* ==========================================================================
   CTA - MENU LATERAL DE LA TIENDA  (tienda.css)
   --------------------------------------------------------------------------
   Lo unico que hace falta para la columna de la izquierda que pinta
   menu_tienda.asp. Se carga en ver_catalogo.asp y en catalogocuerpo.asp,
   DESPUES de moderno.css, de donde salen los colores (--cta-blue y compania).

   Sin acentos en el fichero a proposito: lo cargan dos paginas con juegos de
   caracteres distintos y en CSS los comentarios tampoco hacen falta bonitos.
   ========================================================================== */

.cta-tienda-nav {
    background: #ffffff;
    border: 1px solid #e5eaf2;
    border-radius: 10px;
    padding: 18px 16px 8px;
    margin-bottom: 34px;
}

/* El titulo de cada bloque: Productos destacados, Catalogo completo, Zona
   Gamer. No es un enlace, es el rotulo de lo que viene debajo. */
.cta-tienda-titulo {
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #0c5adb;
    border-bottom-color: var(--cta-blue, #0c5adb);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #0c5adb;
    color: var(--cta-blue, #0c5adb);
}

.cta-tienda-bloque { margin-bottom: 22px; }
.cta-tienda-bloque:last-child { margin-bottom: 10px; }

.cta-tienda-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cta-tienda-nav li { margin: 0; }

.cta-tienda-nav li a {
    display: block;
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 600;
    color: #4d5b73;
    color: var(--cta-body, #4d5b73);
    transition: background .18s ease, color .18s ease;
}
.cta-tienda-nav li a:hover,
.cta-tienda-nav li a:focus {
    background: #f4f7fc;
    background: var(--cta-soft, #f4f7fc);
    color: #0c5adb;
    color: var(--cta-blue, #0c5adb);
    text-decoration: none;
}

/* La seccion en la que estas. Se marca con la barrita azul de la izquierda
   para que se vea de un golpe donde esta uno sin tener que leer. */
.cta-tienda-nav li a.activo {
    background: #eaf0fb;
    background: var(--cta-soft-2, #eaf0fb);
    color: #0c5adb;
    color: var(--cta-blue, #0c5adb);
    box-shadow: inset 3px 0 0 #0c5adb;
    box-shadow: inset 3px 0 0 var(--cta-blue, #0c5adb);
}

.cta-tienda-nav li a i { color: inherit; }

/* De escritorio para arriba la columna se queda pegada al hacer scroll: la
   lista de familias es corta y la rejilla de la derecha es larga, asi que sin
   esto el menu se pierde por arriba en cuanto bajas dos filas.
   El 110px es para que no se meta debajo de la cabecera, que se queda fija. */
@media (min-width: 992px) {
    .cta-tienda-nav {
        position: -webkit-sticky;
        position: sticky;
        top: 110px;
    }
}

/* Titulo de la seccion que se esta viendo a la derecha (el nombre de la
   familia, o "Todos los destacados"). Va alineado a la izquierda, no
   centrado, porque ahora comparte fila con el menu lateral. */
.cta-tienda-cabecera {
    margin-bottom: 26px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e5eaf2;
}
.cta-tienda-cabecera h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1.25;
}
.cta-tienda-cabecera p {
    margin: 6px 0 0;
    color: #64728c;
    color: var(--cta-muted, #64728c);
    font-size: 15px;
}

/* La nota de debajo del buscador del catalogo publico: por que no hay precios
   y como pedirlos. Va justo pegada al buscador, sin el margen de abajo de
   este, para que se lea como parte de el y no como un aviso suelto. */
.cta-nota-catalogo {
    margin: -20px 0 30px;
    padding: 14px 18px;
    background: #f4f7fc;
    background: var(--cta-soft, #f4f7fc);
    border-left: 4px solid #0c5adb;
    border-left-color: var(--cta-blue, #0c5adb);
    border-radius: 0 6px 6px 0;
    font-size: 15px;
    line-height: 1.65;
    color: #4d5b73;
    color: var(--cta-body, #4d5b73);
}
.cta-nota-catalogo i {
    color: #0c5adb;
    color: var(--cta-blue, #0c5adb);
    margin-right: 6px;
}
.cta-nota-catalogo a {
    font-weight: 700;
    color: #0c5adb;
    color: var(--cta-blue, #0c5adb);
    white-space: nowrap;
}
.cta-nota-catalogo b { color: #0f1b33; color: var(--cta-ink, #0f1b33); }

/* ==========================================================================
   LA FICHA DE detalle_catalogo.asp
   --------------------------------------------------------------------------
   El grueso de la ficha (foto, precio, botones, ficha tecnica, impresion) sale
   de catalogoproductos.css, que es la misma que viste la ficha del catalogo
   completo: son la misma ficha y se arreglan una vez. Aqui abajo solo va lo
   que esa no tiene, porque el catalogo del proveedor da una foto por producto
   y estos productos nuestros traen varias, ademas de ficheros para descargar.
   ========================================================================== */

/* Las fotos que no son la principal, debajo de la grande. Se envuelven solas
   segun quepan; no hace falta decidir cuantas por fila. */
.cta-ficha-miniaturas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}
.cta-ficha-miniaturas a {
    display: block;
    width: 88px;
    height: 88px;
    padding: 6px;
    border: 1px solid #e5eaf2;
    border-radius: 8px;
    background: #ffffff;
    transition: border-color .18s ease;
}
.cta-ficha-miniaturas a:hover {
    border-color: #0c5adb;
    border-color: var(--cta-blue, #0c5adb);
}
.cta-ficha-miniaturas img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Los ficheros para descargar. Antes eran una tira de <font color> con dos
   <br> detras de cada uno. */
.cta-ficha-adjuntos { list-style: none; margin: 0; padding: 0; }
.cta-ficha-adjuntos li { margin-bottom: 10px; }
.cta-ficha-adjuntos a {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: #4d5b73;
    color: var(--cta-body, #4d5b73);
}
.cta-ficha-adjuntos a:hover { color: #0c5adb; color: var(--cta-blue, #0c5adb); }

/* En papel las miniaturas sobran: la foto grande ya sale, y estas sin poder
   pincharlas no son mas que sellos gastando tinta. */
@media print {
    .cta-ficha-miniaturas { display: none !important; }
}

/* Cuando una familia no tiene ningun producto destacado publicado. Antes esto
   era una rejilla vacia sin una sola palabra, que parece la web rota. */
.cta-tienda-vacio {
    padding: 40px 20px;
    text-align: center;
    background: #f4f7fc;
    background: var(--cta-soft, #f4f7fc);
    border-radius: 10px;
}
.cta-tienda-vacio h4 { margin-bottom: 10px; }
.cta-tienda-vacio p { margin: 0; color: #64728c; color: var(--cta-muted, #64728c); }