/* QueComo – Libre de (mobile-first)
   Prefijo obligatorio: .qc-librede
*/

.qc-librede{
  border:2px solid #8d8d8d;
  border-radius:6px;
  background:#fff;
  --qc-librede-base-font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --qc-librede-base-font-size: 12px;
  --qc-librede-base-color: #222;

  --qc-librede-title-font-family: var(--qc-librede-base-font-family);
  --qc-librede-title-font-size: 13px;
  --qc-librede-title-color: #222;

  --qc-librede-label-font-family: var(--qc-librede-base-font-family);
  --qc-librede-label-font-size: 12px;
  --qc-librede-label-color: #444;

  --qc-librede-debug-font-family: var(--qc-librede-base-font-family);
  --qc-librede-debug-font-size: 11px;
  --qc-librede-debug-color: #444;

  font-family: var(--qc-librede-base-font-family);
  font-size: var(--qc-librede-base-font-size);
  color: var(--qc-librede-base-color);
  overflow:hidden;
  margin:18px 0;
}

.qc-librede__header{
  background:#efefef;
  padding:10px 12px;
  border-bottom:2px solid #8d8d8d;
}

.qc-librede__title{
  margin:0;
  font-family: var(--qc-librede-title-font-family);
  color: var(--qc-librede-title-color);
  font-size: var(--qc-librede-title-font-size);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.6px;
  line-height:1.2;
}

.qc-librede__body{
  padding:12px;
}

.qc-librede__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px 14px;
  align-items:center;
}

.qc-librede__item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

.qc-librede__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--qc-icon, 44px);
  height:var(--qc-icon, 44px);
}

.qc-librede__icon img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.qc-librede__label{
  font-family: var(--qc-librede-label-font-family);
  font-size: var(--qc-librede-label-font-size);
  color: var(--qc-librede-label-color);
  text-align:center;
  line-height:1.2;
}

/* Debug */
.qc-librede__debug{
  margin:12px 0 0;
  padding:10px;
  border:1px dashed #b9b9b9;
  background:#fafafa;
  font-family: var(--qc-librede-debug-font-family);
  color: var(--qc-librede-debug-color);
  font-size: var(--qc-librede-debug-font-size);
  overflow:auto;
}

/* Desktop: más columnas */
@media (min-width: 768px){
  .qc-librede__grid{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 1024px){
  .qc-librede__grid{ grid-template-columns:repeat(8, minmax(0, 1fr)); }
}