/* Identidad visual de IberCall.IA (docs/call_center/marca/identidad.html).
 * Letra: Source Sans 3 (fuentes.css, servida desde aquí). Logotipo: símbolo + «Iber» 800,
 * «Call» 600 y «.IA» siempre naranja; sobre marino en cabeceras. Turquesa = lo que entra,
 * naranja = lo que sale, también en paneles y gráficas. Nada de girar, degradados ni sombras.
 * Marca blanca: si la cuenta pone otro nombre (o la instalación trae assets/marca/iso.png),
 * se usa su isotipo o su inicial con su color en --marca, sin el símbolo de IberCall.IA.
 */
h1, h2, .acceso-marca strong, .nota-grande { font-weight: 700; }

/* ---- logotipo ---- */
.logotipo { display: inline-flex; align-items: center; gap: 9px; min-width: 0; color: inherit; }
.logotipo .simbolo { flex: none; display: block; }
.logotipo-palabra { font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.logotipo-call { font-weight: 600; }
.logotipo-ia { color: var(--sale-texto); }
.logotipo-blanca { gap: 10px; }

/* Cabecera lateral: placa marino con el logotipo (versión principal de la marca). */
.lateral-marca { border-bottom: 3px solid var(--marca); padding-bottom: 12px; margin-bottom: 4px; }
.lateral-marca-producto { background: var(--marino); color: #fff; border-bottom: 0; margin: 8px 8px 6px; padding: 12px 14px; border-radius: var(--r-l); --simbolo-entra: var(--entra); --simbolo-sale: var(--sale); }
.lateral-marca-producto .logotipo-ia { color: var(--sale); }
.lateral-nombre { letter-spacing: -0.01em; }

/* Isotipo propio de la instalación en lugar de la inicial. */
.sello-logo { width: 28px; height: 34px; object-fit: contain; flex: none; display: block; }
.nav-enlace[aria-current="page"] { box-shadow: inset 3px 0 0 var(--marca); }

/* Entrada: franja (marino con el logotipo, o el color de la cuenta con su logo en blanco). */
.acceso-banda { background: var(--marca); border-radius: var(--r-l) var(--r-l) 0 0; padding: 18px 22px; margin: -28px -28px 24px; display: flex; align-items: center; }
.acceso-banda img { height: 52px; width: auto; display: block; }
.acceso-banda-producto { background: var(--marino); color: #fff; --simbolo-entra: var(--entra); --simbolo-sale: var(--sale); }
.acceso-banda-producto .logotipo-palabra { font-size: 1.75rem; }
.acceso-banda-producto .logotipo-ia { color: var(--sale); }
.acceso-caja.con-banda { background: var(--hoja); border: 1px solid var(--trazo); border-radius: var(--r-l); padding: 28px; overflow: hidden; }
.acceso-caja.con-banda h1 { color: var(--tinta); }

/* ---- sentido de la llamada: turquesa entra, naranja sale ---- */
.sentido { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sentido i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--tinta-4); }
.sentido-entrante i { background: var(--entra); }
.sentido-saliente i { background: var(--sale); }
.texto-entra { color: var(--entra-texto); }
.texto-sale { color: var(--sale-texto); }

/* Cifras que cambian (contadores, cronómetros): tabulares para que no bailen. */
.cifra, .num, .puente-valor, .cifra-bloque dd, .reloj, [data-desde] { font-variant-numeric: tabular-nums; }

@media (forced-colors: active) {
  .sentido i, .logotipo .simbolo { forced-color-adjust: none; }
}