/* Esta hoja no se sirve desde aquí sino como
   uploads/conexcol-aplicaciones/catalogo.<8 hex del md5>.css (inc/derivados.php,
   tarjeta xrgiQqxE): un nombre nuevo por contenido, para que la caché de nginx
   no pueda servir la versión anterior bajo la URL nueva. */
/* Catálogo de aplicaciones — Conexcol.
   Los colores salen de las variables del tema (Avada) para que el catálogo cambie
   con el sitio y no haya una paleta paralela que mantener. Los valores tras la
   coma son el respaldo por si el tema deja de exponerlas. */
.cxl-cat{--cxl-b:var(--awb-color3,#dfe7ee);--cxl-t:var(--awb-color8,#333c45);--cxl-a:var(--awb-custom_color_2,#0070c9);--cxl-bg:var(--awb-color1,#fff)}
.cxl-cat *{box-sizing:border-box}
.cxl-cat .cxl-tools{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:0 0 20px}
.cxl-cat input[type=search]{flex:1 1 260px;min-width:220px;padding:13px 16px;border:1px solid var(--cxl-b);border-radius:10px;font-size:16px;font-family:inherit;color:var(--cxl-t);background:var(--cxl-bg)}
.cxl-cat select{padding:13px 16px;border:1px solid var(--cxl-b);border-radius:10px;font-size:16px;font-family:inherit;color:var(--cxl-t);background:var(--cxl-bg)}
.cxl-cat .cxl-count{font-size:14px;color:var(--cxl-t);opacity:.75;width:100%}
.cxl-cat .cxl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.cxl-cat .cxl-it{border:1px solid var(--cxl-b);border-radius:12px;padding:14px 16px;background:var(--cxl-bg);display:flex;flex-direction:column;gap:7px}
.cxl-cat .cxl-it b{font-size:16px;line-height:1.3;color:var(--cxl-t)}
.cxl-cat .cxl-it a{text-decoration:none;font-weight:700;color:var(--cxl-a)}
.cxl-cat .cxl-it a:hover{text-decoration:underline}
.cxl-cat .cxl-tags{display:flex;gap:6px;flex-wrap:wrap}
.cxl-cat .cxl-tg{font-size:11px;font-weight:700;letter-spacing:.3px;border-radius:100px;padding:3px 9px;border:1px solid var(--cxl-b);color:var(--cxl-t);white-space:nowrap}
.cxl-cat .cxl-tg-h{border-color:rgba(0,112,201,.45);background:rgba(0,112,201,.08)}
.cxl-cat .cxl-tg-c{border-color:rgba(62,195,0,.5);background:rgba(62,195,0,.10)}
.cxl-cat .cxl-cat-n{font-size:12px;opacity:.7;color:var(--cxl-t)}
.cxl-cat .cxl-vacio,p.cxl-vacio{padding:26px;border:1px dashed var(--cxl-b,#dfe7ee);border-radius:12px;text-align:center;color:var(--cxl-t,#333c45)}
.cxl-cat [hidden]{display:none!important}
@media(max-width:600px){.cxl-cat .cxl-grid{grid-template-columns:1fr}}

/* Logotipos. Los de la colección se tiñen con el color de la marca vía
   currentColor; los que no existen llevan una marca de letra con un tono
   derivado del nombre, para que cada aplicación tenga siempre el mismo. */
.cxl-cat .cxl-it-cab{display:flex;align-items:center;gap:10px}
.cxl-cat .cxl-it-nom{min-width:0}
.cxl-cat .cxl-logo{flex:0 0 28px;width:28px;height:28px;display:flex;align-items:center;justify-content:center}
.cxl-cat .cxl-logo svg{width:22px;height:22px;display:block}
.cxl-cat .cxl-logo-letra{border-radius:8px;font-weight:800;font-size:14px;line-height:1;
  color:hsl(var(--cxl-tono,210) 55% 32%);background:hsl(var(--cxl-tono,210) 55% 94%);
  border:1px solid hsl(var(--cxl-tono,210) 40% 85%)}

/* Aviso de versión empaquetada antigua. Ámbar, no rojo: es una advertencia para
   decidir, no un error. Y lleva texto, no sólo color. */
.cxl-cat .cxl-tg-v{border-color:rgba(217,139,0,.5);background:rgba(217,139,0,.10);color:#7a4e00}


/* Tarjeta qZSLeNqD: tarjetas de lista de tienda. Icono en baldosa de color, nombre,
   subtítulo y valoración; con ficha, toda la tarjeta enlaza. */
.cxl-cat .cxl-grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.cxl-cat .cxl-it{position:relative;gap:10px;padding:14px;border-radius:16px;border-color:#e1e6eb;transition:box-shadow .15s,border-color .15s}
.cxl-cat .cxl-it-cab{align-items:flex-start;gap:12px}
.cxl-cat .cxl-it-ico{flex:0 0 52px;width:52px;height:52px;border-radius:14px;background:var(--icono,#0070c9);color:#fff;display:flex;align-items:center;justify-content:center}
.cxl-cat .cxl-it-ico svg{width:30px;height:30px;display:block}
.cxl-cat .cxl-it-ico b{font-size:24px;font-weight:800;line-height:1}
.cxl-cat .cxl-it-nom{display:flex;flex-direction:column;min-width:0;padding-top:2px}
.cxl-cat .cxl-it-n{font-size:16px;font-weight:700;line-height:1.25;color:#0b0f14;text-decoration:none!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cxl-cat .cxl-it a.cxl-it-n{color:#0b0f14}
.cxl-cat .cxl-it a.cxl-it-n::after{content:"";position:absolute;inset:0;border-radius:16px}
.cxl-cat .cxl-it-sub{font-size:13px;line-height:1.35;color:#4a5560;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cxl-cat .cxl-it-val{margin-top:2px;font-size:12px;color:#6b7680}
.cxl-cat .cxl-it-ficha:hover{border-color:#b9d3ea;box-shadow:0 10px 24px rgba(10,30,60,.1)}
.cxl-cat .cxl-it-ficha:hover .cxl-it-n{color:#0070c9}
.cxl-cat .cxl-it-ficha:focus-within{outline:2px solid #0070c9;outline-offset:2px}
.cxl-cat .cxl-it a:hover{text-decoration:none}
@media (prefers-reduced-motion:reduce){.cxl-cat .cxl-it{transition:none}}

/* Tarjeta psDBrOZi: orden, ocultar detenidas y filtros por etiqueta. */
.cxl-cat .cxl-ocultar{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:#333c45;cursor:pointer}
.cxl-cat .cxl-ocultar input{width:18px;height:18px;accent-color:#0070c9}
.cxl-cat .cxl-chips{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.cxl-cat .cxl-chip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 14px;border-radius:100px;border:1px solid #d5dde6;
  background:#fff;color:#0b0f14;font:600 14px/1 inherit;cursor:pointer;transition:background-color .15s,border-color .15s}
.cxl-cat .cxl-chip span{font-weight:500;color:#6b7680;font-size:12px}
.cxl-cat .cxl-chip:hover{border-color:#0070c9}
.cxl-cat .cxl-chip[aria-pressed="true"]{background:#0070c9;border-color:#0070c9;color:#fff}
.cxl-cat .cxl-chip[aria-pressed="true"] span{color:rgba(255,255,255,.8)}
.cxl-cat .cxl-chip:focus-visible{outline:2px solid #0b0f14;outline-offset:2px}
/* Rótulos de estado: gris para descontinuada, ámbar para detenida. Con texto, no sólo color. */
.cxl-cat .cxl-tg-e.cxl-estado-detenida{border-color:rgba(217,139,0,.5);background:rgba(217,139,0,.10);color:#7a4e00}
.cxl-cat .cxl-tg-e.cxl-estado-descontinuada{border-color:#c5ccd3;background:#eef1f4;color:#3d4650}
.cxl-cat .cxl-it:has(.cxl-estado-descontinuada) .cxl-it-ico{filter:grayscale(1);opacity:.7}

/* Tarjeta fbyGhyYY: icono original, con sus colores, sobre su baldosa. Llena el hueco del
   glifo (rejilla, póster, cabecera de producto, estanterías) sin teñirse. */
.cxl-glifo-original{display:flex;align-items:center;justify-content:center;width:100%;height:100%;box-sizing:border-box;
  padding:12%;background:#fff;border-radius:22%;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.cxl-glifo-original.cxl-glifo-oscuro{background:#1b2230}
.cxl-glifo-original svg{width:100%;height:100%;display:block}
.cxl-poster-glifo-agua .cxl-glifo-original{opacity:.18;filter:grayscale(1);box-shadow:none}