/* =============================================================================
   app.css — Hilo · bandeja de atencion multicanal
   =============================================================================
   Contrato: ng-template. Este archivo NO declara ni un color de marca: consume
   los tokens de tokens.css y los slots de paletas.css. Cero hex fuera de esos
   dos archivos.

   Unidades: font-size en em, layout en rem, line-height sin unidad, un decimal.
   Grillas: repeat(auto-fit, minmax(min(100%, X), 1fr)) — la cantidad de columnas
   emerge del ancho, nunca se fija por viewport.
   Breakpoints del contrato: 600 / 960 / 1280 / 1920. En Angular esto NO son
   media queries: son las signals de BreakpointService (ver ANGULAR.md).
   ============================================================================= */

/* ---------------------------------------------------------------- 1. reset -- */
*, *::before, *::after { box-sizing: border-box; }
/* El documento no se desplaza nunca. Si el shell mide el alto de la ventana
   pero el documento no esta acotado, queda su barra ADEMAS de la interna: dos
   barras para un solo contenido. */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}
body {
  font-family: var(--secondary-font);
  font-weight: var(--font-regular);
  font-size: 1em;
  /* 1.875 es el line-height del body de ng-template, no una eleccion propia.
     Los modulos densos —fila de la bandeja, chips, sucesos— lo pisan, que es
     lo que hace Material con sus propios componentes. */
  line-height: 1.875;
  color: var(--theme-text);
  background: var(--theme-bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--primary-font);
  font-weight: var(--font-semibold);
  line-height: 1.2;
  margin: 0;
}
h1 { font-size: 1.5em; }
h2 { font-size: 1.2em; }
h3 { font-size: 1em; }
p { margin: 0; }
a { color: var(--app-primary); }
button { font: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 1.2em;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  flex: none;
}
.solo-lectores {
  position: absolute;
  width: 0.1rem; height: 0.1rem;
  padding: 0; margin: -0.1rem;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible {
  outline: 0.2rem solid var(--app-primary);
  outline-offset: 0.2rem;
}


/* -------------------------------------------------- 0. escala de alturas -- */
/* Un solo lugar donde vive el alto de cada componente. Antes todo media
   4.4rem —boton, chip, item de lista, campo— y por eso un filtro pesaba lo
   mismo que la accion principal.

   El minimo tactil de 4.4rem no se pierde: los controles chicos lo recuperan
   con un pseudo-elemento que extiende el area sin agrandar la caja visible.
   Es como Material resuelve el touch target de sus propios chips.

     item de lista del nav   4.8rem   la fila mas alta: es navegacion
     campo de texto          4.8rem   igual que la lista, para que alineen
     boton y toggle          4.0rem   accion
     chip de filtro          3.2rem   seleccion, no accion
     chip de estado          2.4rem   dato, no control
*/
/* El minimo tactil no se pierde en los controles chicos: un pseudo-elemento
   extiende el area sin agrandar la caja visible, que es como Material resuelve
   el touch target de sus propios chips. */
.mat-mdc-icon-button,
.mat-mdc-button,
.mat-mdc-outlined-button,
.mat-mdc-raised-button,
.mat-button-toggle,
.mat-mdc-chip-option,
.shell__nav a,
.muestra { position: relative; }

.mat-mdc-icon-button::after,
.mat-mdc-button::after,
.mat-mdc-outlined-button::after,
.mat-mdc-raised-button::after,
.mat-button-toggle::after,
.mat-mdc-chip-option::after,
.shell__nav a::after,
.muestra::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  min-width: 4.4rem;
  height: 4.4rem;
  transform: translate(-50%, -50%);
}

/* ------------------------------------------------------------- 2. el shell -- */
/* El header no se mueve NUNCA, en ningun ancho. El shell ocupa exactamente el
   alto de la ventana y no desborda: lo que scrollea es la region de contenido
   que corresponda (la lista de la bandeja, los mensajes del hilo, el lienzo de
   la ficha). `dvh` va apilada sobre `vh` de respaldo, como pide el contrato. */
.shell {
  display: grid;
  grid-template-rows: var(--header-height) 1fr;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* La barra es un mat-toolbar y la navegacion un mat-nav-list: los nombres
   salen del inventario del template, para que el port sea un intercambio y no
   una traduccion. */
.mat-toolbar {
  min-height: var(--header-height);
  background: var(--theme-header-bg);
  color: var(--theme-header-text);
}
.mat-nav-list { display: flex; flex-direction: column; gap: 0.2rem; }

.shell__header {
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0 1.2rem;
  background: var(--theme-header-bg);
  color: var(--theme-header-text);
  z-index: 30;
}
/* La barra mide 5rem. Una marca de 1.25em queda flotando en el medio sin
   ocupar el bloque: el lockup va en dos lineas —nombre grande, autoria en
   monoespaciada— y ocupa poco mas de la mitad del alto, que es donde una marca
   se lee como marca y no como un dato mas del header. */
.shell__marca {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  margin-right: auto;
  min-width: 0;
  font-family: var(--primary-font);
  font-weight: var(--font-semibold);
  font-size: 1.8em;
  line-height: 1;
  letter-spacing: -0.01em;
}
.shell__marca small {
  font-family: var(--monospace-font);
  font-weight: var(--font-regular);
  font-size: 0.4em;
  line-height: 1;
  opacity: 0.8;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.mat-mdc-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4rem;
  min-height: 4rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}
.mat-mdc-icon-button:hover { background: color-mix(in srgb, currentColor 14%, transparent); }

.shell__cuerpo {
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr;
  min-height: 0;
  overflow: hidden;
}
/* La navegación scrollea en TODO ancho, no sólo cuando entra en overlay.
   Con cuatro grupos abiertos mide más que una ventana de portátil, y sin
   `overflow-y` el shell la recorta en silencio: los últimos ítems dejan de
   existir sin que nada avise. */
.shell__nav {
  background: var(--theme-sidenav-bg);
  color: var(--theme-sidenav-text);
  border-right: 0.1rem solid var(--theme-border);
  padding: 1.2rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.shell__nav a, .mat-mdc-list-item {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  min-height: 4rem;
  padding: 0 1.2rem;
  border-radius: 0.5rem;
  color: inherit;
  text-decoration: none;
  font-size: 0.9em;
  transition: background-color 0.2s ease-in-out;
}
.shell__nav a:hover { background: var(--theme-sidenav-hover); }
.shell__nav a[aria-current='page'] {
  background: var(--theme-sidenav-active-bg);
  color: var(--theme-sidenav-active-text);
  font-family: var(--primary-font);
  font-weight: var(--font-medium);
}
.shell__nav-conteo {
  margin-left: auto;
  font-family: var(--monospace-font);
  font-size: 0.8em;
}
/* Los grupos son desplegables de verdad, no rótulos con aire alrededor. Un
   rótulo suelto ocupa lo mismo que una fila pero no hace nada; un <summary>
   es la misma altura y además pliega. Nativo: funciona sin JS. */
.nav-grupo { display: grid; }
.nav-grupo + .nav-grupo { margin-top: 0.4rem; }
.nav-grupo__titulo {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 3.2rem;
  padding: 0 1.2rem;
  border-radius: 0.5rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--monospace-font);
  font-size: 0.7em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--theme-text-secondary);
  transition: background-color 0.2s ease-in-out;
}
.nav-grupo__titulo::-webkit-details-marker { display: none; }
.nav-grupo__titulo:hover { background: var(--theme-sidenav-hover); }
.nav-grupo__titulo .material-symbols-outlined {
  margin-left: auto;
  font-size: 1.2em;
  transition: transform 0.2s ease-in-out;
}
.nav-grupo[open] > .nav-grupo__titulo .material-symbols-outlined { transform: rotate(180deg); }
/* el grupo de la pantalla actual se distingue aunque esté plegado */
.nav-grupo--actual > .nav-grupo__titulo { color: var(--app-primary); }
.shell__main { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }

/* nav en overlay por debajo de 960 — isSmallOrBelow en el contrato */
.shell__velo {
  display: none;
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.5);
  z-index: 40;
}
@media (max-width: 959.98px) {
  .shell__nav {
    position: fixed;
    inset: var(--header-height) auto 0 0;
    width: var(--navbar-width);
    max-width: 84vw;
    z-index: 41;
    transform: translateX(-102%);
    transition: transform 0.2s ease-in-out;
  }
  .shell[data-nav='abierto'] .shell__nav { transform: none; }
  .shell[data-nav='abierto'] .shell__velo { display: block; }
}
@media (min-width: 960px) {
  .shell__cuerpo { grid-template-columns: var(--navbar-width) 1fr; }
  .shell__abrir-nav { display: none; }
}

/* -------------------------------------------------- 3. ajustes en producto -- */
/* Selector de tema y de paleta: es una preferencia del agente que atiende,
   vive en el menu de la cuenta. No es un panel de disenador. */
.ajustes {
  position: relative;
}
.ajustes__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  width: min(28rem, 90vw);
  background: var(--theme-bg-elevated);
  color: var(--theme-text);
  border: 0.1rem solid var(--theme-border);
  border-radius: 0.5rem;
  box-shadow: 0 0.6rem 2.4rem rgb(0 0 0 / 0.2);
  padding: 1.2rem;
  z-index: 50;
}
.ajustes__panel[hidden] { display: none; }
.ajustes__titulo {
  font-family: var(--monospace-font);
  font-size: 0.7em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--theme-text-secondary);
  margin-bottom: 0.6rem;
}
.ajustes__titulo + * { margin-bottom: 1.6rem; }
.mat-button-toggle-group {
  display: flex;
  border: 0.1rem solid var(--theme-border);
  border-radius: 0.5rem;
  overflow: hidden;
}
.mat-button-toggle {
  flex: 1;
  min-height: 4rem;
  border: 0;
  background: var(--theme-bg-elevated);
  color: var(--theme-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-size: 0.9em;
  transition: background-color 0.2s ease-in-out;
}
.mat-button-toggle + button { border-left: 0.1rem solid var(--theme-border); }
.mat-button-toggle[aria-pressed='true'] {
  background: var(--app-primary-container);
  color: var(--app-primary-dark);
  font-family: var(--primary-font);
  font-weight: var(--font-medium);
}
.muestras { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.muestra {
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  border: 0.2rem solid var(--theme-border);
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--app-on-header);
  background: linear-gradient(135deg,
    var(--app-header) 0 50%, var(--app-secondary) 50% 100%);
}
.muestra:hover { border-color: var(--app-neutral-outline); }
.muestra[aria-pressed='true'] { border-color: var(--theme-text); }
.muestra .material-symbols-outlined { font-size: 1.2em; }
.muestra[aria-pressed='false'] .material-symbols-outlined { visibility: hidden; }

/* --------------------------------------------------------- 4. el monograma -- */
/* El canal es un ATRIBUTO, nunca una pantalla ni una piel. Se codifica con un
   monograma monoespaciado sobre chip neutro: se lee igual en claro, en oscuro,
   en impresion y sin color. Los slots de marca no se gastan en identificar
   canales, y success/warning/error quedan libres para el estado real. */
.canal {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--monospace-font);
  font-size: 0.7em;
  font-weight: var(--font-semibold);
  letter-spacing: 0.1em;
  color: var(--theme-text-secondary);
  flex: none;
}
.canal__marca {
  display: inline-grid;
  place-items: center;
  min-width: 3.4rem;
  height: 2.2rem;
  padding: 0 0.5rem;
  border: 0.1rem solid var(--app-neutral-outline);
  border-radius: 0.4rem;
  background: var(--theme-bg-surface);
  color: var(--theme-text);
  line-height: 1;
}
.canal--wa .canal__marca { border-style: solid; border-width: 0.2rem; }
.canal--ig .canal__marca { border-style: dashed; }
.canal--fb .canal__marca { border-style: dotted; }
.canal--ml .canal__marca { border-style: double; border-width: 0.3rem; }
.canal--sms .canal__marca { border-style: solid; border-radius: 1.6rem; }

/* El manifiesto de ng-template trae `.mat-mdc-select-trigger` y
   `.mat-mdc-select-arrow`: un select sin ellos queda con la apariencia nativa
   del sistema operativo — y encima con doble borde, porque la caja del campo
   ya dibuja el suyo. `appearance: none` apaga el control del navegador; la
   flecha la dibuja el contenedor, que es lo único que puede llevar un
   pseudo-elemento (un <select> no puede). */
.mat-mdc-form-field--select { position: relative; padding: 0; border: 0; background: transparent; }
/* La flecha sale de Material Symbols, igual que cualquier otro ícono de la
   app. Dibujarla con bordes CSS la deja en otra familia y otro peso: al lado
   de un botón con ícono se nota que son dos cosas distintas hechas de dos
   maneras distintas. */
.mat-mdc-form-field--select::after {
  content: 'expand_more';
  font-family: 'Material Symbols Outlined';
  font-size: 1.2em;
  line-height: 1;
  position: absolute;
  right: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--app-neutral-outline);
  pointer-events: none;
}
.mat-mdc-select-trigger {
  line-height: 1.2;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 4rem;
  padding: 0 3.6rem 0 1.2rem;
  border: 0.1rem solid var(--theme-border);
  border-radius: 0.5rem;
  background: var(--theme-bg-surface);
  color: var(--theme-text);
  font: inherit;
  font-size: 0.9em;
  cursor: pointer;
  transition: border-color 0.2s ease-in-out;
}
.mat-mdc-select-trigger:hover { border-color: var(--app-neutral-outline); }
.mat-mdc-select-trigger:focus-visible { border-color: var(--app-primary); }
.mat-mdc-select-trigger:disabled {
  color: var(--theme-text-disabled);
  background: transparent;
  cursor: not-allowed;
}

/* --------------------------------------------------------------- 5. chips --- */
.mat-mdc-chip {
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.4rem;
  padding: 0 1rem;
  border-radius: 2rem;
  font-size: 0.8em;
  font-family: var(--secondary-font);
  white-space: nowrap;
}
.mat-mdc-chip .material-symbols-outlined { font-size: 1.2em; }
.app-sin-asignar {
  background: var(--theme-bg-surface);
  color: var(--theme-text-secondary);
  border: 0.1rem dashed var(--app-neutral-outline);
}
.app-mia {
  background: var(--app-primary-container);
  color: var(--app-primary-dark);
  font-family: var(--primary-font);
  font-weight: var(--font-medium);
}
.app-otro {
  background: var(--theme-bg-surface);
  color: var(--theme-text-secondary);
  border: 0.1rem solid var(--theme-border);
}
.app-cerrada {
  background: transparent;
  color: var(--theme-text-secondary);
  border: 0.1rem solid var(--theme-divider);
}
.app-etiqueta {
  background: var(--app-tertiary-container);
  color: var(--app-tertiary-dark);
}
.app-consentido { background: var(--result-success-bg); color: var(--result-success-text); }
.app-sin-consentimiento { background: var(--result-failure-bg); color: var(--result-failure-text); }
.app-consentimiento-desconocido {
  background: var(--theme-bg-surface);
  color: var(--theme-text-secondary);
  border: 0.1rem dashed var(--app-neutral-outline);
}

/* -------------------------------------------------------- 6. hueco visible -- */
/* Regla dura: si el dato sale del blueprint y el blueprint no esta, va un hueco
   con nombre. Nunca un campo inventado. Cada uno tiene su entrada en CLAUDE.md. */
.hueco {
  border: 0.2rem dashed var(--app-neutral-outline);
  border-radius: 0.5rem;
  padding: 1.2rem;
  background: var(--theme-bg-surface);
  color: var(--theme-text-secondary);
  display: grid;
  gap: 0.4rem;
}
.hueco__rotulo {
  font-family: var(--monospace-font);
  font-size: 0.7em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--theme-text);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.hueco__rotulo .material-symbols-outlined { font-size: 1.2em; }
.hueco p { font-size: 0.8em; }
.hueco code {
  font-family: var(--monospace-font);
  font-size: 0.9em;
  color: var(--app-tertiary-dark);
}
[data-theme='dark'] .hueco code { color: var(--app-tertiary-light); }
.hueco--linea {
  display: inline-flex;
  padding: 0.2rem 0.8rem;
  border-width: 0.1rem;
  font-family: var(--monospace-font);
  font-size: 0.8em;
}

/* ----------------------------------------------------------- 7. superficie -- */
.barra {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding: 1.2rem 1.6rem;
  border-bottom: 0.1rem solid var(--theme-border);
  background: var(--theme-bg-elevated);
}
.barra h1 { margin-right: auto; }
.mat-mdc-form-field {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 4rem;
  padding: 0 1.2rem;
  border: 0.1rem solid var(--theme-border);
  border-radius: 0.5rem;
  background: var(--theme-bg-surface);
  flex: 1 1 24rem;
  min-width: 0;
}
.mat-mdc-form-field input,
.mat-mdc-input-element {
  line-height: 1.2;
  border: 0;
  background: transparent;
  color: var(--theme-text);
  font: inherit;
  font-size: 0.9em;
  flex: 1;
  min-width: 0;
}
.mat-mdc-form-field input:focus,
.mat-mdc-input-element:focus { outline: none; }
.mat-mdc-form-field:focus-within { border-color: var(--app-primary); }

/* Los filtros ENVUELVEN, no se desplazan de costado. Un carril horizontal
   suma una segunda barra a la vista y ademas esconde filtros a la derecha, que
   es justo lo que no se quiere de un control de seleccion: los cinco estados
   tienen que verse de una. */
.mat-mdc-chip-listbox {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.8rem 1.6rem;
  border-bottom: 0.1rem solid var(--theme-border);
  background: var(--theme-bg-elevated);
}
.mat-mdc-chip-option {
  min-height: 3.2rem;
  padding: 0 1.4rem;
  border: 0.1rem solid var(--theme-border);
  border-radius: 2rem;
  line-height: 1.2;
  background: transparent;
  color: var(--theme-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9em;
  transition: background-color 0.2s ease-in-out;
}
.mat-mdc-chip-option:hover { background: var(--theme-sidenav-hover); }
.mat-mdc-chip-option[aria-pressed='true'] {
  background: var(--app-primary-container);
  border-color: var(--app-primary);
  color: var(--app-primary-dark);
  font-family: var(--primary-font);
  font-weight: var(--font-medium);
}
.mat-mdc-chip-option__conteo { font-family: var(--monospace-font); font-size: 0.8em; }

/* Una `.pagina` es cualquier superficie de barra + lienzo: la barra y los
   filtros quedan clavados arriba y el lienzo es lo unico que se desplaza. Es
   una clase y no una consulta condicional a proposito: si el selector no
   resolviera, el contenido quedaria recortado en vez de desplazarse.
   La bandeja, el hilo y el maestro-detalle no la usan: resuelven su propio
   scroll con su propia region. */
.pagina {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}
.barra, .mat-mdc-chip-listbox { flex: none; }
.lienzo {
  padding: 1.6rem;
  display: grid;
  gap: 1.6rem;
  align-content: start;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mat-mdc-card {
  background: var(--theme-bg-elevated);
  border: 0.1rem solid var(--theme-border);
  border-radius: 0.5rem;
  padding: 1.6rem;
}
.mat-mdc-card > h2 { margin-bottom: 1.2rem; }
.rejilla { display: grid; gap: 1.6rem; grid-template-columns: var(--grid-container-width); }

/* La barra y los filtros están ANCLADOS: no se mueven, se mueve el lienzo. Eso
   es el contrato, pero sin señal se lee como un accidente —«¿por qué ese
   header quedó fijo?»—. La sombra aparece sólo cuando hay contenido corrido
   por debajo, que es cuando el anclaje significa algo. */
.barra,
.mat-mdc-chip-listbox,
.filtros-franja,
.hilo__encabezado {
  position: relative;
  z-index: 2;
  transition: box-shadow 0.2s ease-in-out;
}
.superficie--desplazada > .barra,
.superficie--desplazada > .mat-mdc-chip-listbox,
.superficie--desplazada > .filtros-franja,
.superficie--desplazada > .hilo__encabezado {
  box-shadow: 0 0.2rem 0.8rem rgb(0 0 0 / 0.1);
}

/* -------------------------------------------------------------- 8. botones -- */
.mat-mdc-button, .mat-mdc-outlined-button, .mat-mdc-raised-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  min-height: 4rem;
  padding: 0 1.8rem;
  border-radius: 0.5rem;
  border: 0.1rem solid transparent;
  font-family: var(--primary-font);
  font-weight: var(--font-medium);
  font-size: 0.9em;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.mat-mdc-raised-button.app-primary { background: var(--app-primary); color: var(--app-on-primary); }
.mat-mdc-raised-button.app-primary:hover { background: var(--app-primary-dark); }
.mat-mdc-outlined-button {
  background: transparent;
  border-color: var(--theme-border);
  color: var(--theme-text);
}
.mat-mdc-outlined-button:hover { background: var(--theme-sidenav-hover); }
.mat-mdc-button { background: transparent; color: var(--app-primary); padding: 0 1rem; }
.mat-mdc-button:hover { background: var(--app-primary-container); }