/* El Legado · estructura: marco, barra lateral con submenús, encabezado, rejilla y tarjeta.
   Capas (de lejos a cerca): lienzo con atmósfera → marco blanco con la barra lateral → pozo gris →
   tarjetas blancas → mosaicos grises. La profundidad sale de alternar fondos; la sombra es para lo que flota. */

/* ---------- Marco ---------- */
.app { background: var(--atmosphere), var(--canvas); background-attachment: fixed; }
.shell {
  display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100dvh;
  background: var(--frame);
}
.content { min-width: 0; padding: var(--space-5) var(--space-5) var(--space-7); background: var(--well); }

/* En pantallas amplias la app flota en un marco. Recorte con clip: hidden o auto romperían el sticky. */
@media (min-width: 1100px) {
  .shell {
    margin: var(--frame-gap); min-height: calc(100dvh - 2 * var(--frame-gap));
    border-radius: var(--radius-xl); box-shadow: var(--shadow-frame); overflow: clip;
  }
  .content { margin: var(--frame-gap) var(--frame-gap) var(--frame-gap) 0; border-radius: var(--radius-lg); }
}

/* ---------- Barra lateral ---------- */
.sidebar {
  position: sticky; top: 0; z-index: var(--z-sticky); height: 100dvh;
  display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-5) var(--space-4);
}
@media (min-width: 1100px) {
  .sidebar { top: var(--frame-gap); height: calc(100dvh - 2 * var(--frame-gap)); }
}
.sidebar-head {
  position: relative;
  margin: 0 calc(-1 * var(--space-4));
  padding: var(--space-1) var(--space-5) var(--space-5);
  border-bottom: 1px solid var(--line);
}
.sidebar-brand { display: block; color: var(--ink); border-radius: var(--radius-sm); }
.sidebar-brand .logo { display: block; width: 100%; height: auto; }
.sidebar-brand .logo-marca { display: none; }
.sidebar-icon { width: var(--icon-md); height: var(--icon-md); }
/* Comprimir o expandir: pastilla flotante en el borde entre la barra lateral y el contenido, sobre la línea divisoria. */
.sidebar-toggle {
  position: absolute; right: 0; bottom: 0; transform: translate(50%, 50%);
  display: inline-grid; place-items: center;
  width: var(--control-height-row); height: var(--control-height-row); padding: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2); color: var(--text-2); font: inherit; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}
.sidebar-toggle .sidebar-icon { width: var(--icon-sm); height: var(--icon-sm); }
.sidebar-toggle:hover { color: var(--text); background: var(--surface-2); border-color: var(--line-strong); }

/* Menú: secciones con su submenú. La ubicación actual es una sola píldora de tinta: va en el renglón del submenú; su
   sección se queda en negritas. Con un submenú abierto las cuatro secciones siempre se ven: si no cabe, solo se
   desplaza por dentro el submenú. */
.sidebar-nav {
  flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--space-1);
  overflow-y: auto; scrollbar-width: none;
  /* Aire para que la sombra de la píldora y el foco no se recorten. */
  padding: 2px; margin: -2px;
}
.sidebar-nav::-webkit-scrollbar { display: none; }
.menu-seccion { position: relative; flex: 0 1 auto; min-height: var(--control-height); display: flex; flex-direction: column; gap: var(--space-1); }
/* Con varias abiertas se reparten el alto sin quedar en menos de dos renglones; si ni así caben, se desplaza el menú. */
.menu-seccion:has(> .submenu:not([hidden])) { min-height: calc(var(--control-height) + 2 * var(--control-height-row)); }
.menu-enlace {
  flex: none; display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-height);
  padding: 0 calc(var(--control-height-row) + var(--space-1)) 0 var(--space-3);
  border-radius: var(--radius-pill); color: var(--text); font-weight: 500; text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.menu-enlace .sidebar-icon { color: var(--text-2); }
.menu-enlace:hover { background: var(--fill); }
.menu-enlace.is-active { background: var(--ink); color: var(--on-ink); box-shadow: var(--shadow-ink); }
.menu-enlace.is-active .sidebar-icon { color: inherit; }
.menu-seccion.is-current > .menu-enlace { font-weight: 600; }

/* Flecha para abrir el submenú sin salir de la pantalla: a la derecha del renglón, centrada en su alto. */
.menu-abrir {
  position: absolute; top: var(--space-1); right: var(--space-1);
  display: inline-grid; place-items: center; width: var(--control-height-row); height: var(--control-height-row); padding: 0;
  background: none; border: 0; border-radius: 50%; color: var(--text-2); font: inherit; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.menu-flecha { transform: rotate(90deg); transition: transform var(--duration-fast) var(--ease); }
[aria-expanded="true"] > .menu-flecha { transform: rotate(-90deg); }
.menu-abrir:hover { background: var(--fill-hover); color: var(--text); }
.menu-enlace.is-active + .menu-abrir { color: var(--on-ink-2); }
.menu-enlace.is-active + .menu-abrir:hover { background: var(--ink-soft); color: var(--on-ink); }

/* El submenú es un árbol: la línea baja del ícono de la sección y cada renglón se conecta con un codo redondeado.
   El último tramo se desvanece: si hay más renglones abajo, se nota sin una barra que le quite ancho a los nombres.
   Sin renglones de más, lo que se desvanece es el relleno de abajo. */
.submenu {
  position: relative; flex: 0 1 auto; min-height: 0; display: grid; align-content: start; gap: 2px; overflow-y: auto; scrollbar-width: none;
  margin: calc(-1 * var(--space-1)) 0 0 calc(var(--space-3) + var(--icon-md) / 2); padding: 0 2px var(--space-4) 0;
  list-style: none;
  mask-image: linear-gradient(to bottom, var(--ink) calc(100% - var(--space-4)), transparent);
}
.submenu::-webkit-scrollbar { display: none; }
.submenu[hidden] { display: none; }
.submenu li { --menu-rama: 1.5px solid var(--line-hover); position: relative; padding-left: var(--space-4); }
/* El codo, hasta la mitad del renglón. */
.submenu li::before {
  content: ""; position: absolute; left: 0; top: 0; width: var(--space-3); height: calc(var(--control-height-row) / 2);
  border-left: var(--menu-rama); border-bottom: var(--menu-rama); border-bottom-left-radius: var(--radius-sm);
}
/* La línea sigue hacia los renglones de abajo (el último termina en su codo). */
.submenu li:not(:last-child)::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: -2px; border-left: var(--menu-rama);
}
.submenu a, .submenu-abrir {
  display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-height-row); padding: 0 var(--space-2);
  border-radius: var(--radius-pill); color: var(--text-2); font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.submenu a:hover, .submenu-abrir:hover { background: var(--fill); color: var(--text); }
.submenu a.is-active { background: var(--ink); color: var(--on-ink); box-shadow: var(--shadow-ink); }
.submenu a.is-active .marca { color: inherit; }
/* Los tipos de anuncio sin inversión en el periodo: un renglón plegable con su propia rama, bajo su ícono. */
.submenu-abrir { width: 100%; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.submenu-abrir .menu-flecha { margin-left: auto; }
.submenu-cuenta { font-size: var(--text-xs); font-weight: 400; }
.submenu-vacios { display: grid; gap: 2px; margin: 2px 0 0 var(--space-4); padding: 0; list-style: none; }
.submenu-vacios[hidden] { display: none; }

/* Pie: estado de las fuentes y tarjeta del usuario, alineados en dos mosaicos del mismo ancho. */
.sidebar-foot { margin-top: auto; display: grid; gap: var(--space-2); }
.sidebar-sources { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-2); }
.source { display: flex; align-items: center; gap: var(--space-2); font-weight: 500; }
.source small { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: auto; font-size: var(--text-xs); font-weight: 400; color: var(--text-2); }
.sidebar-sync { padding-top: var(--space-2); border-top: 1px solid var(--line); font-size: var(--text-xs); color: var(--text-2); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-2); flex-shrink: 0; }
.dot-ok { background: var(--good-500); }
.dot-watch { background: var(--watch-500); }
/* Sin datos: aro vacío, no solo otro color. */
.dot-off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-3); }

.sidebar-user {
  display: flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
  border-radius: var(--radius-md); background: var(--surface-2);
}
.sidebar-user form { margin-left: auto; display: flex; }
/* Avatar y nombre abren «Tu perfil» (modal); cerrar sesión va aparte. */
.sidebar-profile {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-2); border: 0; border-radius: var(--radius-sm); background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease);
}
.sidebar-profile:hover { background: var(--fill); }
.sidebar-avatar {
  flex: none; display: grid; place-items: center; width: var(--control-height-row); height: var(--control-height-row);
  border-radius: 50%; background: var(--blue-100); color: var(--blue-700); font-size: var(--text-xs); font-weight: 600;
}
/* Foto: recortada en círculo con un aro de 1px (el contorno se pinta encima de la imagen; la sombra no). */
img.sidebar-avatar { object-fit: cover; outline: 1px solid var(--line-soft); outline-offset: -1px; }
.sidebar-name { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-logout {
  flex: none; display: inline-grid; place-items: center;
  width: var(--control-height-row); height: var(--control-height-row); padding: 0;
  background: none; border: 0; border-radius: 50%; color: var(--text-2); font: inherit; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.sidebar-logout .sidebar-icon { width: var(--icon-sm); height: var(--icon-sm); }
.sidebar-logout:hover { color: var(--text); background: var(--fill); }

/* Barra comprimida (solo en escritorio; en el celular la barra va arriba). */
@media (min-width: 761px) {
  .menu-comprimido { --sidebar-width: var(--sidebar-width-collapsed); }
  .menu-comprimido .sidebar { padding-left: var(--space-3); padding-right: var(--space-3); align-items: center; }
  .menu-comprimido .sidebar-head {
    align-self: stretch; display: grid; place-items: center;
    margin: 0 calc(-1 * var(--space-3)); padding: var(--space-1) var(--space-3) var(--space-5);
  }
  .menu-comprimido .sidebar-brand { padding: 0; }
  .menu-comprimido .sidebar-brand .logo { display: none; }
  .menu-comprimido .sidebar-brand .logo-marca { display: block; width: var(--control-height); }
  .menu-comprimido .sidebar-sources { display: none; }
  .menu-comprimido .sidebar-nav { align-self: stretch; align-items: center; }
  /* Sin flechas no se podrían cerrar: comprimido solo se ve el submenú de la sección actual. */
  .menu-comprimido .menu-seccion:not(.is-current) { min-height: 0; }
  .menu-comprimido .menu-seccion:not(.is-current) .submenu { display: none; }
  .menu-comprimido .menu-enlace { justify-content: center; width: var(--control-height); height: var(--control-height); padding: 0; }
  .menu-comprimido .menu-abrir { display: none; }
  /* Solo íconos: el submenú de la sección actual es una cápsula bajo su ícono (el nombre sale como globo). */
  .menu-comprimido .submenu {
    margin: 0; padding: var(--space-1); border-left: 0; border-radius: var(--radius-pill); background: var(--surface-2);
    mask-image: none;
  }
  .menu-comprimido .submenu li { padding-left: 0; }
  .menu-comprimido .submenu li::before, .menu-comprimido .submenu li:not(:last-child)::after { content: none; }
  .menu-comprimido .submenu a, .menu-comprimido .submenu-abrir { justify-content: center; width: var(--control-height-row); padding: 0; }
  .menu-comprimido .submenu-abrir .menu-flecha { display: none; }
  .menu-comprimido .submenu-vacios { margin-left: 0; }
  .menu-comprimido .sidebar-foot { justify-items: center; }
  .menu-comprimido .sidebar-user { flex-direction: column; gap: var(--space-2); padding: 0; background: none; }
  .menu-comprimido .sidebar-user form { margin-left: 0; }
  .menu-comprimido .sidebar-profile { flex: none; justify-content: center; padding: var(--space-1); border-radius: 50%; }
  .menu-comprimido .sidebar-avatar { width: var(--control-height-compact); height: var(--control-height-compact); font-size: var(--text-sm); }
  .menu-comprimido .sidebar-logout { width: var(--control-height); height: var(--control-height); }
  .menu-comprimido .sidebar-logout .sidebar-icon { width: var(--icon-md); height: var(--icon-md); }
  .menu-comprimido .sidebar-toggle .sidebar-icon { transform: rotate(180deg); }
  /* Ocultos a la vista, no a los lectores de pantalla (igual que .visually-hidden). */
  .menu-comprimido .sidebar-text {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* ---------- Encabezado ----------
   Tres zonas: el título (crece), las acciones o filtros y la campana, siempre arriba a la derecha.
   Si los filtros no caben junto al título, bajan a su propio renglón (la campana se queda arriba). */
.topbar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "titulo acciones campana";
  align-items: start; gap: var(--space-4) var(--space-3);
}
.topbar-title { grid-area: titulo; display: grid; gap: var(--space-1); min-width: 0; }
.topbar > :not(.topbar-title, .campana) { grid-area: acciones; }
.topbar > .campana { grid-area: campana; }
.topbar-title h1 { font-size: var(--text-3xl); font-weight: 500; letter-spacing: var(--tracking-tighter); line-height: var(--leading-tight); }
/* Título con el ícono de lo que se ve (un grupo: su origen), en el mismo círculo que las tarjetas. */
.title-with-icon { display: flex; align-items: center; gap: var(--space-3); }
.topbar-meta { color: var(--text-2); }
.topbar-meta strong { color: var(--text); font-weight: 500; }
.topbar-meta abbr { text-decoration: none; cursor: help; }
.topbar-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* Control segmentado: pista gris y la opción elegida en un chip blanco (selección, no ubicación). */
.segmented {
  display: inline-flex; align-items: stretch; gap: 2px; height: var(--control-height);
  padding: var(--space-1); background: var(--fill); border-radius: var(--radius-pill);
}
.segmented a {
  display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--space-3);
  border-radius: var(--radius-pill); text-decoration: none; color: var(--text-2); font-weight: 500;
  transition: color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
}
.segmented a:hover { color: var(--text); }
.segmented a.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-2); }
.segmented-solid a { min-width: var(--control-height); text-align: center; }
.segmented a .icon { margin-right: var(--space-2); }
.segmented a .icon:last-child { margin-right: 0; }
/* Logotipos como opciones: en gris hasta elegirlos (el elegido lleva su color de marca). */
.segmented-brands a:not(.is-active) .marca { color: var(--text-3); }
.segmented-brands a:not(.is-active):hover .marca { color: var(--text-2); }

/* Periodo: un selector del alto de los segmentados. Las fechas personalizadas se eligen en un modal (modal.css). */
.period-form { position: relative; display: flex; }
/* El calendario va dentro del selector, a la izquierda (no recibe clics: el selector los toma). */
.period-form .icon { position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%); color: var(--text-2); pointer-events: none; }
.period-form select {
  height: var(--control-height); padding-top: 0; padding-bottom: 0;
  padding-left: calc(var(--space-4) + var(--icon-sm) + var(--space-2));
  border-color: transparent; border-radius: var(--radius-pill); background-color: var(--fill);
  box-shadow: none; font-weight: 500;
}
.period-form select:hover { background-color: var(--fill-hover); border-color: transparent; }

/* ---------- Resumen de la pantalla ----------
   Bajo el encabezado. Sin resumen no mide nada: sus márgenes se juntan y queda el aire de siempre (por eso es de
   bloque: en un flex no se juntarían). */
.summary-row { margin: var(--space-5) 0; }

.tab-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-5); margin: 0; }
.tab-stats > div { display: flex; align-items: baseline; gap: var(--space-2); }
.tab-stats dt { color: var(--text-2); }
.tab-stats dd { margin: 0; font-weight: 600; white-space: nowrap; }
.tab-stats-change { font-size: var(--text-xs); font-weight: 500; color: var(--text-2); margin-left: 2px; }
.tab-note { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-xs); color: var(--text-2); }

/* ---------- Rejilla del dashboard ----------
   Contenido + panel derecho (solo en General). Dentro, una rejilla de 12 columnas tipo bento. */
.dash { display: grid; grid-template-columns: minmax(0, 1fr) var(--side-panel-width); gap: var(--gap); align-items: start; }
/* Sin panel derecho (todas las pestañas menos General): el contenido usa todo el ancho. */
.dash-wide { grid-template-columns: minmax(0, 1fr); }
.dash-main { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.dash-main > * { grid-column: span 4; }
.dash-main > .card-trend { grid-column: span 8; }
.dash-main > .card-full, .dash-main > .card-trend-full { grid-column: 1 / -1; }
/* El panel derecho va con el scroll de la página (no tiene uno propio). Si cabe en la pantalla, se queda arriba; si es
   más alto, sube con la página hasta que se ve su final y ahí se queda mientras el contenido sigue. El `top` negativo
   sale de su alto (`--panel-alto`, que mide static/js/panel_lateral.js); sin JS se queda arriba como antes. */
.dash-side {
  display: grid; gap: var(--gap); position: sticky;
  top: min(var(--space-5), 100dvh - var(--panel-alto, 0px) - var(--space-5));
}

/* ---------- Tarjeta ----------
   Blanca sobre el pozo gris, casi sin sombra. Título 18/500; la meta va debajo, chica y gris. */
.card { background: var(--surface); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-1); min-width: 0; }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-5); }
.card-head h2 { font-size: var(--text-lg); font-weight: 500; letter-spacing: var(--tracking-tight); }
.card-head h2 .muted { display: block; margin-top: 2px; font-size: var(--text-xs); letter-spacing: 0; }
.card-head > .muted { font-size: var(--text-xs); }
.footnote { color: var(--text-2); font-size: var(--text-xs); margin-top: var(--space-3); max-width: var(--measure); }
/* En tarjetas a todo el ancho la nota usa ese ancho: con --measure dejaba un hueco a la derecha. */
.card-full > .footnote { max-width: none; }

/* ---------- Responsivo de la estructura ---------- */
@media (max-width: 1239px) {
  .topbar:has(> .topbar-filters) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titulo campana" "acciones acciones"; }
}

@media (max-width: 1280px) {
  .dash { grid-template-columns: minmax(0, 1fr); }
  .dash-side { position: static; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
}

@media (max-width: 980px) {
  .dash-main > *, .dash-main > .card-trend { grid-column: 1 / -1; }
}

/* Celular: la barra lateral va arriba (marca y usuario) con el menú desplazable debajo. */
@media (max-width: 760px) {
  :root { --gap: var(--space-4); }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line);
  }
  .sidebar-head { margin: 0; padding: 0; border-bottom: 0; }
  .sidebar-brand { flex: none; width: 160px; padding: 0; }
  .sidebar-foot { margin: 0 0 0 auto; }
  .sidebar-sources, .sidebar-toggle { display: none; }
  .sidebar-user { padding: 0; background: none; }
  .sidebar-profile { padding: var(--space-1); border-radius: 50%; }
  /* Oculto a la vista, no a los lectores de pantalla: es el nombre del botón del perfil. */
  .sidebar-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* Dos renglones: las secciones (solo texto, para que quepan las cuatro) y, debajo, las pantallas de la actual, que
     se desplazan a lo ancho. */
  .sidebar-nav {
    order: 3; flex: none; flex-direction: row; flex-wrap: wrap; gap: var(--space-2) var(--space-1); overflow: visible;
    margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-4); width: calc(100% + 2 * var(--space-4));
  }
  .menu-seccion { display: contents; }
  .menu-enlace { min-height: var(--control-height-compact); padding: 0 var(--space-2); }
  .menu-enlace .sidebar-icon, .menu-abrir { display: none; }
  .menu-seccion.is-current > .menu-enlace { background: var(--fill); }
  .menu-seccion.is-current > .menu-enlace.is-active { background: var(--ink); }
  .menu-seccion:not(.is-current) .submenu { display: none; }
  .submenu {
    order: 1; flex: none; display: flex; gap: var(--space-1); overflow-x: auto;
    margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-4) 2px; width: calc(100% + 2 * var(--space-4));
    border-left: 0; mask-image: none;
  }
  .submenu li { flex: none; padding-left: 0; }
  .submenu li::before, .submenu li:not(:last-child)::after { content: none; }
  .submenu a, .submenu-abrir { min-height: var(--control-height-compact); padding: 0 var(--space-3); }
  /* A lo ancho, el grupo Sin datos se abre en la misma fila, a la derecha de su renglón. */
  .submenu-abrir { flex: none; width: auto; }
  .submenu-plegable, .submenu-vacios { display: contents; }
  .submenu-vacios[hidden] { display: none; }
  .content { padding: var(--space-4) var(--space-4) var(--space-6); }
  .card { padding: var(--space-4); }
  .topbar-title h1 { font-size: var(--text-2xl); }
  /* Título y campana en el primer renglón; las acciones o filtros, debajo a todo el ancho. */
  .topbar { display: flex; flex-wrap: wrap; }
  .topbar-title { flex: 1 1 0; }
  .topbar > .campana { order: 1; }
  .topbar > :not(.topbar-title, .campana) { order: 2; width: 100%; }
  .dash-side { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
  .topbar-meta .meta-attribution { display: none; }
}