/* ═══════════════════════════════════════════════════════════════════════ */
/* CÓMO SE VE UN CANAL EN LA WEB — reglas de presentación, en un solo sitio */
/* ═══════════════════════════════════════════════════════════════════════ */
/*
 * Aquí vive SOLO la presentación. Los datos de marca —trazo, color, nombre y
 * orden— no se escriben en la web: salen de la app
 * (`lib/widgets/common/canal_marca.dart`) y llegan por
 * `js/canales.datos.js`, que es un archivo GENERADO. Ningún color de marca ni
 * ningún trazo aparece en este archivo, y eso es el mecanismo, no una
 * costumbre: mientras la web tuvo su propia copia, Instagram salía en dos
 * rosas distintos y Messenger en gris "provisional" en un lado y en azul
 * oficial en el otro.
 *
 * Cada bloque dice qué regla de marca hace cumplir. El detalle y la
 * superficie donde aplica cada una está en
 * `docs/legal/USO_DE_MARCAS_DE_TERCEROS.md`.
 */

/* ── El fondo sobre el que se apoya el glifo ───────────────────────────── */
/*
 * NO es decoración: es el dato contra el que se mide el contraste de cada
 * color de marca. Está declarado como variable porque
 * `tools/sincronizar-canales.mjs` lo LEE de aquí y falla si algún canal baja
 * del umbral de la app (3:1, WCAG 1.4.11). Cambiar este valor a ojo puede
 * borrar un logo; cambiarlo con el guarda puesto, no.
 *
 * Es el `card` de la paleta de la landing (`tailwind.config` en index.html).
 * Si allá cambia, aquí también — y el guarda dirá si algún glifo dejó de
 * verse.
 */
:root {
  --canal-fondo-tarjeta: #2D2D2D;
  --canal-fondo-tarjeta-hover: #363636;
}

/* ── El componente <canal-marca> ───────────────────────────────────────── */

canal-marca {
  /* Tamaño del glifo. Se puede bajar por contexto, nunca por debajo del
     mínimo legible que impone `.canal-marca__glifo`. */
  --canal-tamano: 22px;

  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  line-height: 1;
}

/*
 * REGLA: el glifo va SIN modificar.
 * El color lo pone `js/canales.js` con el valor oficial de cada marca y
 * llega hasta aquí como `color`; el trazo se pinta con `currentColor`. No
 * hay `filter`, ni `opacity`, ni `mix-blend-mode`, ni `transform`: cualquiera
 * de esos alteraría el glifo.
 *
 * REGLA: el glifo NO se mete dentro de otra forma.
 * Por eso aquí no hay `background`, ni `border`, ni `border-radius`, ni
 * `box-shadow`. Va suelto sobre el fondo de la página.
 *
 * REGLA: área libre alrededor del glifo.
 * La da el `padding`, que es una proporción del propio glifo (25% de su
 * lado), con `box-sizing: content-box` para que el dibujo conserve su
 * tamaño y el aire se sume por fuera. Nada puede acercarse más que eso.
 */
.canal-marca__glifo {
  box-sizing: content-box;
  width: var(--canal-tamano);
  height: var(--canal-tamano);
  /* REGLA: tamaño mínimo legible. Por debajo de esto el glifo de Instagram
     y el rayo de Messenger dejan de distinguirse y se vuelven una mancha.
     La web pide MÁS que la app (allá el piso es 12 px) porque allá, por debajo
     del piso, se dibuja un ícono de respaldo; aquí no hay respaldo: o se ve el
     logo o no se ve nada. `tools/sincronizar-canales.mjs` comprueba que este
     número nunca quede por debajo del de la app. */
  min-width: 20px;
  min-height: 20px;
  padding: calc(var(--canal-tamano) * 0.25);
  flex: none;
  fill: currentColor;
  display: block;
}

.canal-marca__nombre {
  /* El nombre es de Tabblu, no de la marca: tipografía y color de la página. */
  font-size: 0.875rem;
  font-weight: 500;
  color: #E5E7EB;
  white-space: nowrap;
}

/* ── La fila de canales ────────────────────────────────────────────────── */
/*
 * PARIDAD PC / TABLET / MÓVIL: una sola fila que envuelve. En PC entran los
 * cuatro seguidos; en tablet y móvil bajan solos sin que el glifo encoja por
 * debajo del mínimo ni el nombre se parta.
 */
.canales-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.canales-fila canal-marca {
  /* La tarjeta es de Tabblu: fondo, borde y radio son los de la página, y
     envuelven al conjunto glifo + nombre. Nunca al glifo solo. */
  background: var(--canal-fondo-tarjeta);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0.75rem;
  padding: 0.4rem 0.9rem 0.4rem 0.55rem;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.canales-fila canal-marca:hover {
  background: var(--canal-fondo-tarjeta-hover);
  border-color: rgba(74, 144, 226, 0.3);
}

@media (max-width: 640px) {
  .canales-fila {
    gap: 0.5rem;
  }

  .canales-fila canal-marca {
    /* En móvil cada canal ocupa su propia fila completa y se lee como una
       lista. Se probó de a dos por fila y no cabe: con el glifo en su tamaño
       mínimo legible, "Tienda online" ya no entra en media pantalla, y la
       salida sería encoger el glifo por debajo del mínimo o partir el nombre.
       Antes que eso, una fila por canal. */
    flex: 1 1 100%;
  }
}

/* ── La nota de marcas ─────────────────────────────────────────────────── */
/*
 * REGLA: nada que sugiera afiliación, patrocinio ni respaldo.
 * La nota va SIEMPRE que se muestren los glifos, en la misma vista y sin
 * tener que desplegar nada.
 */
.canales-nota {
  font-size: 0.75rem;
  line-height: 1.6;
  color: #6B7280;
}