/* =====================================================================
 * movil.css — acq en un teléfono (≤ 45em / 720 px). Ficha #379.
 *
 * Se carga con `media="(max-width: 45em)"` desde `base.html.j2` y
 * `base_minimal.html.j2`: NINGUNA regla de este fichero llega a escritorio,
 * así que aquí no hace falta envolver nada en `@media`.
 *
 * El diseño está en el lienzo «acq en móvil» de Claude Design (59 pantallas
 * + tablero de sistema + handoff). Se implementa por PIEZAS, no por pantalla:
 *
 *   1. Barra de 56 px y menú a pantalla completa
 *   2. Pestañas de sección desplazables (+ la miga «Admin · Auditoría»)
 *   3. Filtros resumidos en chips + hoja (con `movil.js`)
 *   4. KPI en rejilla de 2
 *   5. Tabla → filas (`table:is(.m-rows, [data-m-rows])` + clases `m-*` en las celdas)
 *   6. Pivot por mes (`table.m-pivot`, con `movil.js`)
 *   7. Barra de acción fija (`.m-actionbar`)
 *   8. Avisos y estados
 *   9. Formulario de una columna
 *
 * Tras las piezas van los ajustes de cada pantalla que ninguna pieza cubre.
 *
 * Ojo con la raíz: `html { font-size: 75% }`, o sea 1rem = 12 px. Aquí se
 * mide en px, que es lo que dice el diseño.
 * ===================================================================== */

:root {
  --m-ink: #2B2B34;
  --m-ground: #F4F4F6;
  --m-line: #ECECEF;
  --m-line-2: #F0F0F2;
  --m-muted: #6B6B73;
  --m-muted-2: #55555E;
  --m-brand: #06B8AD;
  /* Verde para rellenos con texto blanco y para enlaces: 5,2:1. El de marca
   * con blanco da 2,5:1 y queda para trazos (subrayados, barras, sparklines). */
  --m-strong: #047A73;
  --m-tint: #E3F6F4;
  --m-warn-bg: #FBF1DF;
  --m-warn-ink: #5E3E0C;
  --m-err-bg: #FCEBEA;
  --m-err-ink: #7E2018;
  --m-ok-bg: #E3F4EA;
  --m-ok-ink: #1E6B42;
  --m-radius: 16px;
  --m-gutter: 16px;
}

/* ---------------------------------------------------------------- base */
body.topbar-shell { background: var(--m-ground); }

.content {
  padding: 16px var(--m-gutter) 28px;
}

.content h1 {
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
/* Solo los títulos de sección de primer nivel: hay componentes que usan
 * h2/h3 como rótulo pequeño (KPI de la ficha de artista). */
.content > h2,
.option-section > .head > h2 { font-size: 19px; line-height: 1.2; }
.content > h3 { font-size: 16px; }

/* Campos a 16 px: por debajo, Safari en iPhone hace zoom al tocarlos, y la
 * raíz de la app está al 75 % (los campos salían a 12-14 px). */
.content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
.content select,
.content textarea,
.hero input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.hero select {
  font-size: 16px;
}

/* ============================================================ 1 · BARRA */
.topbar {
  height: 56px;
  padding: 0 4px 0 16px;
  gap: 4px;
}
.topbar .brand img { height: 20px; }
.topbar-actions { gap: 0; }

/* Lo que va DENTRO del menú sale de la barra: idioma, usuario, «Ver como». */
.topbar-actions > .lang-toggle,
.topbar-actions > .user-chip,
.topbar-actions > .viewas-chip { display: none; }

.topbar .gsearch-trigger {
  order: 1;
  width: 44px;
  height: 44px;
  padding: 0;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #fff;
}
.topbar .gsearch-trigger svg { width: 22px; height: 22px; }
.topbar .mobile-nav { order: 2; position: static; }
.topbar .mobile-nav > summary,
.topbar .mobile-nav > summary:not([role]) {
  width: 44px;
  height: 44px;
  justify-content: center;
  padding: 0;
  border-radius: 12px;
}
.topbar .mobile-nav > summary svg { width: 24px; height: 24px; }

/* Durante un «ver como» la píldora se queda (es el único aviso del estado)
 * pero compacta: ojo + nombre corto + salir. */
.impersonation-pill { order: 0; max-width: 150px; }
.impersonation-pill-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================ 1 · MENÚ */
.topbar .mobile-nav[open] > summary { background: rgba(255, 255, 255, 0.12); }

/* Con el menú abierto la página de debajo no se desplaza. */
body:has(.mobile-nav[open]) { overflow: hidden; }

.mobile-nav-panel {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  max-height: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 max(12px, env(safe-area-inset-bottom));
  background: #FFFFFF;
  color: var(--m-ink);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mobile-nav-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}
.mobile-nav-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex: 0 0 auto;
  background: var(--m-ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
}
.mobile-nav-who { min-width: 0; display: flex; flex-direction: column; }
.mobile-nav-name {
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile-nav-mail {
  font-size: 13px;
  color: var(--m-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Filas del menú: 52 px las de primer nivel, 46 las de dentro. */
.mobile-nav-panel .mobile-nav-link,
.mobile-nav .mobile-nav-panel .mobile-nav-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 0 16px;
  margin: 0;
  border-radius: 0;
  border-top: 1px solid var(--m-line-2);
  color: var(--m-ink);
  font-size: 16px;
  font-weight: 600;
}
.mobile-nav-panel .mobile-nav-link:hover,
.mobile-nav .mobile-nav-panel .mobile-nav-group > summary:hover {
  background: #FAFAFB;
  color: var(--m-ink);
}
.mobile-nav .mobile-nav-panel .mobile-nav-group > summary::after {
  content: "";
  width: 20px;
  height: 20px;
  opacity: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  transition: transform 0.15s ease;
}
.mobile-nav .mobile-nav-panel .mobile-nav-group[open] > summary::after {
  content: "";
  transform: rotate(180deg);
}
.mobile-nav-panel .mobile-nav-group .mobile-nav-link {
  min-height: 46px;
  padding-left: 28px;
  border-top: 0;
  font-size: 15px;
  font-weight: 400;
}
.mobile-nav-panel .mobile-nav-link--nested { padding-left: 28px; }
.mobile-nav-panel .mobile-nav-sublabel {
  margin: 0;
  padding: 10px 16px 4px 28px;
  font-size: 11px;
  color: var(--m-muted);
  letter-spacing: 0.08em;
}
.mobile-nav-panel .mobile-nav-link[data-current] {
  background: #F2FBFA;
  color: #035E58;
  font-weight: 600;
}
.mobile-nav-panel .mobile-nav-link[data-current]::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: var(--m-brand);
  margin-left: -10px;
  margin-right: 6px;
  flex: 0 0 auto;
}
.mobile-nav-panel .mobile-nav-link { justify-content: flex-start; }
/* Pico: `details[open] > summary` lleva margen inferior y color apagado. */
.mobile-nav .mobile-nav-panel .mobile-nav-group > summary,
.mobile-nav .mobile-nav-panel .mobile-nav-group[open] > summary,
.topbar .mobile-nav > summary,
.topbar .mobile-nav[open] > summary {
  margin: 0;
}
.mobile-nav .mobile-nav-panel .mobile-nav-group[open] > summary { color: var(--m-ink); }
.mobile-nav-panel .mobile-nav-group { margin: 0; }

.mobile-nav-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 12px 16px 4px;
  border-top: 1px solid var(--m-line-2);
}
.topbar .mobile-nav-foot nav.lang-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  width: auto;
  height: 44px;
  gap: 2px;
  padding: 3px;
  margin: 0;
  border-radius: 12px;
  background: #E8E8EC;
  justify-content: flex-start;
}
.topbar .mobile-nav-foot .lang-toggle .lang-sep { display: none; }
.topbar .mobile-nav-foot .lang-toggle .lang-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 38px;
  border-radius: 10px;
  color: #4A4A53;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
}
.topbar .mobile-nav-foot .lang-toggle .lang-opt.active {
  background: #FFFFFF;
  color: var(--m-ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.mobile-nav-action {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: 12px;
  border: 1px solid #D4D4DA;
  background: #FFFFFF;
  color: var(--m-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.mobile-nav-action:hover { color: var(--m-ink); background: #FAFAFB; }
.mobile-nav-panel { display: flex; flex-direction: column; }

/* ============================================================ 2 · PESTAÑAS */
/* La pill de sección se vuelve una tira blanca a sangre pegada a la barra,
 * de una fila y con scroll lateral; el título sale de la tira y pasa a la
 * miga `.m-crumb` encima del h1. */
.content > .subnav-pill,
.subnav-pill {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 20px;
  height: 48px;
  margin: -16px calc(-1 * var(--m-gutter)) 14px;
  padding: 0 var(--m-gutter);
  border-radius: 0;
  background: #FFFFFF;
  border-bottom: 1px solid #E5E5E8;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.subnav-pill::-webkit-scrollbar { display: none; }
.subnav-pill .subnav-pill-title { display: none; }
.subnav-pill .subnav-pill-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 0;
  white-space: nowrap;
  color: var(--m-muted-2);
  font-size: 14px;
  font-weight: 500;
}
.subnav-pill .subnav-pill-tab:hover,
.subnav-pill .subnav-pill-tab:focus-visible { color: var(--m-ink); }
.subnav-pill .subnav-pill-tab.active {
  color: var(--m-ink);
  font-weight: 600;
}
.subnav-pill .subnav-pill-tab.active::after {
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--m-brand);
}
.subnav-pill .subnav-pill-tab.disabled { color: #A2A2AA; }

/* Dos pills seguidas (Admin + Auditoría, Royalties + Adelantos…): en el
 * teléfono solo la última; la primera sigue a un toque en el menú. */
.subnav-pill:has(+ .m-crumb + .subnav-pill),
.m-crumb:has(+ .subnav-pill) { display: none; }

.m-crumb {
  display: block;
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--m-muted);
}

/* ---------------------------------------------------------------- cabecera */
.page-head {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 14px;
}
.page-head h1 { margin: 0; }
.page-head .sub,
.content h1 + p.sub,
.content h1 + .sub {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--m-muted-2);
}
.page-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.page-head-filter { max-width: 100%; }
/* El chip de Sello: sin su etiqueta «Sello», como una píldora de 44 px. */
.page-head-filter .filter-field-label { display: none; }
.multi-chip-field.multi-chip--compact .multi-chip-summary {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 22px;
  font-size: 14px;
}

/* ============================================================ 3 · FILTROS */
.m-fbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 calc(-1 * var(--m-gutter)) 14px;
  padding: 0 var(--m-gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.m-fbar::-webkit-scrollbar { display: none; }
.m-fchips { display: flex; gap: 8px; }
.m-fbtn,
.m-fchip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto;
  height: 44px;
  margin: 0;
  padding: 0 14px;
  border-radius: 22px;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.m-fbtn { background: var(--m-ink); border: 0; color: #fff; font-weight: 600; }
.m-fbtn:hover, .m-fbtn:focus { background: #1F1F27; color: #fff; }
.m-fcount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--m-brand);
  color: #10302D;
  font-size: 11px;
}
.m-fcount[hidden] { display: none; }
.m-fchip {
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #fff;
  border: 1px solid #DCDCE1;
  color: var(--m-ink);
  font-weight: 500;
}
.m-fchip:hover, .m-fchip:focus { background: #fff; color: var(--m-ink); border-color: #BDBDC6; }

/* Cerrada: el formulario no se ve… salvo el campo que la pantalla deja
 * fuera (`data-m-keep`, el buscador de Releases o Pistas). */
form.m-filtros:not(.is-open):not(:has([data-m-keep])) { display: none !important; }
form.m-filtros:not(.is-open):has([data-m-keep]) {
  display: block !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
form.m-filtros:not(.is-open) :not([data-m-keep]):not(:has([data-m-keep])):not([data-m-keep] *) {
  display: none !important;
}
form.m-filtros:not(.is-open) :has(> [data-m-keep]),
form.m-filtros:not(.is-open) :has([data-m-keep]) {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}

/* Abierta: hoja inferior blanca con cabecera y pie fijos. */
body.m-sheet-open { overflow: hidden; }
.m-sheet-bd {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(20, 20, 26, 0.55);
}
.m-sheet-bd[hidden] { display: none; }
form.m-filtros.is-open {
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  z-index: 200;
  max-height: calc(100dvh - 64px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 14px;
  margin: 0 !important;
  padding: 0 var(--m-gutter) !important;
  border: 0 !important;
  border-radius: 22px 22px 0 0 !important;
  background: #FFFFFF !important;
  color: var(--m-ink) !important;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18) !important;
}
form.m-filtros.is-open > * { max-width: 100%; }
.m-filtros .m-sheet-head,
.m-filtros .m-sheet-foot { display: none; }
form.m-filtros.is-open .m-sheet-head {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 3;
  align-items: center;
  justify-content: space-between;
  margin: 0 calc(-1 * var(--m-gutter));
  padding: 16px 8px 4px var(--m-gutter);
  background: #FFFFFF;
}
.m-sheet-head strong { font-size: 19px; font-weight: 700; color: var(--m-ink); }
.m-sheet-grab {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 40px;
  height: 5px;
  margin-left: -20px;
  border-radius: 3px;
  background: #D4D4DA;
}
.m-sheet-close {
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--m-ink);
}
.m-sheet-close:hover { background: #F4F4F6; color: var(--m-ink); }
form.m-filtros.is-open .m-sheet-foot {
  display: flex;
  position: sticky;
  bottom: 0;
  z-index: 3;
  gap: 10px;
  margin: auto calc(-1 * var(--m-gutter)) 0;
  padding: 10px var(--m-gutter) max(16px, env(safe-area-inset-bottom));
  background: #FFFFFF;
  border-top: 1px solid #E5E5E8;
}
.m-sheet-reset,
.m-sheet-apply {
  flex: 1;
  height: 48px;
  margin: 0;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.m-sheet-reset { background: #fff; color: var(--m-ink); border: 1px solid #D4D4DA; }
.m-sheet-apply { background: var(--m-strong); color: #fff; border: 0; }
.m-sheet-reset:hover { background: #FAFAFB; color: var(--m-ink); }
.m-sheet-apply:hover { background: #03675F; color: #fff; }
/* El submit original lo sustituye «Aplicar»; los demás botones (exportar) se
 * quedan dentro de la hoja. */
form.m-filtros.is-open .m-sheet-main { display: none !important; }
/* Etiquetas y campos pensados para el fondo verde, sobre la hoja blanca. */
form.m-filtros.is-open label,
form.m-filtros.is-open .fb-label,
form.m-filtros.is-open .field-label,
form.m-filtros.is-open .filter-field-label,
form.m-filtros.is-open .report-filter-label {
  color: var(--m-muted-2) !important;
}
form.m-filtros.is-open input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
form.m-filtros.is-open select {
  min-height: 48px;
  border: 1px solid #D4D4DA !important;
  border-radius: 12px !important;
  background-color: #fff;
  color: var(--m-ink);
}

/* ============================================================ 4 · KPI */
.kpi-grid,
.kpi-grid--tercios,
.kpi-grid--months {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.kpi-grid > :last-child:nth-child(odd),
.kpi-grid > .m-kpi-wide { grid-column: 1 / -1; }
.kpi-card {
  align-items: flex-start;
  text-align: left;
  gap: 3px;
  padding: 13px 14px;
  border-radius: var(--m-radius);
  border: 1px solid var(--m-line);
  background: #FFFFFF;
  color: var(--m-ink);
  box-shadow: none;
}
.kpi-card .kpi-header,
.kpi-card .kpi-tag,
.kpi-card .kpi-month-name {
  color: var(--m-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.kpi-card .kpi-header svg,
.kpi-card .kpi-icon { width: 14px; height: 14px; color: var(--m-muted); }
.kpi-card .kpi-value {
  color: var(--m-ink);
  font-size: 21px;
  font-weight: 700;
}
.kpi-card .kpi-unit { color: var(--m-muted); font-size: 13px; }
.kpi-card .kpi-footer,
.kpi-card .kpi-footer small {
  color: var(--m-muted);
  font-size: 12.5px;
  line-height: 1.35;
  text-align: left;
}
.kpi-card .kpi-delta { font-size: 12.5px; }
.kpi-card.kpi-card--selected {
  background: var(--m-tint);
  border-color: #BFE9E4;
}
.kpi-card.kpi-card--selected .kpi-value,
.kpi-card.kpi-card--selected .kpi-month-name,
.kpi-card.kpi-card--selected .kpi-tag { color: var(--m-ink); }
.kpi-value--alerta { color: #9E2A1F !important; }

/* ============================================================ 5 · TABLA → FILAS
 * `table:is(.m-rows, [data-m-rows])` y, en cada celda, su papel:
 *   m-t  título (una línea, elipsis)      m-n   la cifra, a la derecha
 *   m-d  meta (se une con «·»)            m-n2  cifra secundaria, bajo la meta
 *   m-c  chips / estado (fila entera)     m-a   acciones (fila entera)
 *   m-l  miniatura / casilla a la izquierda
 * Una celda sin papel no se pinta en el teléfono. */
table:is(.m-rows, [data-m-rows]),
table:is(.m-rows, [data-m-rows]) > tbody {
  display: block;
  width: 100%;
}
table:is(.m-rows, [data-m-rows]) {
  margin: 0 0 16px;
  background: #FFFFFF;
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius);
  overflow: hidden;
  font-size: 15px;
}
.card > table:is(.m-rows, [data-m-rows]),
.card.t-scroll > table:is(.m-rows, [data-m-rows]),
.t-scroll > table:is(.m-rows, [data-m-rows]),
.table-wrapper > table:is(.m-rows, [data-m-rows]) { margin-bottom: 0; }
.card > table:is(.m-rows, [data-m-rows]) { border: 0; border-radius: 0; }
table:is(.m-rows, [data-m-rows]) > thead,
table:is(.m-rows, [data-m-rows]) > tfoot { display: none; }
table:is(.m-rows, [data-m-rows]) > tbody > tr {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  position: relative;
  min-height: 58px;
  padding: 11px var(--m-gutter);
  border-top: 1px solid var(--m-line-2);
  background: transparent;
}
table:is(.m-rows, [data-m-rows]) > tbody > tr:first-child { border-top: 0; }
table:is(.m-rows, [data-m-rows]) > tbody > tr::after {
  content: "";
  order: 3;
  flex-basis: 100%;
  height: 0;
}
table:is(.m-rows, [data-m-rows]) > tbody > tr > td,
table:is(.m-rows, [data-m-rows]) > tbody > tr > th {
  display: none;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  white-space: normal;
  position: static;
  width: auto;
  min-width: 0;
  max-width: none;
}
table:is(.m-rows, [data-m-rows]) > tbody > tr > .m-t {
  display: block;
  order: 1;
  /* Base de 1 px, no 0: con 0 el salto de línea (`::after`, 100 %) cabía en
   * la primera fila y el título se quedaba sin ancho. */
  flex: 1 1 1px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--m-ink);
}
table:is(.m-rows, [data-m-rows]) > tbody > tr > .m-t a { color: var(--m-ink); text-decoration: none; }
table:is(.m-rows, [data-m-rows]) > tbody > tr > .m-t.m-wrap {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
table:is(.m-rows, [data-m-rows]) > tbody > tr > .m-n {
  display: block;
  order: 2;
  flex: 0 0 auto;
  margin-left: 12px;
  text-align: right;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--m-ink);
}
table:is(.m-rows, [data-m-rows]) > tbody > tr > :is(.m-d, [data-m-d]) {
  display: block;
  order: 4;
  flex: 0 1 auto;
  min-width: 0;
  margin-top: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  line-height: 1.35;
  color: var(--m-muted);
}
table:is(.m-rows, [data-m-rows]) > tbody > tr > :is(.m-d, [data-m-d]) ~ :is(.m-d, [data-m-d])::before { content: "·"; margin: 0 5px; }
table:is(.m-rows, [data-m-rows]) > tbody > tr > .m-n2 {
  display: block;
  order: 6;
  margin: 2px 0 0 auto;
  padding-left: 10px;
  font-size: 12px;
  color: var(--m-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
table:is(.m-rows, [data-m-rows]) > tbody > tr > .m-c {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  order: 6;
  flex-basis: 100%;
  margin-top: 6px;
}
table:is(.m-rows, [data-m-rows]) > tbody > tr > .m-a {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  order: 7;
  flex-basis: 100%;
  margin-top: 10px;
}
table:is(.m-rows, [data-m-rows]) > tbody > tr > .m-a > *,
table:is(.m-rows, [data-m-rows]) > tbody > tr > .m-a form > button { margin: 0; }
table:is(.m-rows, [data-m-rows]) > tbody > tr:has(> .m-l > *) { padding-left: calc(var(--m-gutter) + 56px); }
table:is(.m-rows, [data-m-rows]) > tbody > tr > .m-l {
  display: block;
  position: absolute;
  left: var(--m-gutter);
  top: 12px;
  width: 44px;
}
table:is(.m-rows, [data-m-rows]) > tbody > tr > .m-l input[type="checkbox"] { width: 22px; height: 22px; margin: 0; }
/* Fila entera como enlace: el primer enlace del título cubre la fila. */
table:is(.m-rows, [data-m-rows]) > tbody > tr:has(> .m-t a) { padding-right: calc(var(--m-gutter) + 24px); }
table:is(.m-rows, [data-m-rows]) > tbody > tr > .m-t a::after {
  content: "";
  position: absolute;
  inset: 0;
}
table:is(.m-rows, [data-m-rows]) > tbody > tr:has(> .m-t a)::before {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A2A2AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / 18px no-repeat;
}
/* Filas de grupo (el «ACQUSTIC» del listado de Releases). */
table:is(.m-rows, [data-m-rows]) > tbody > tr:is(.m-group, [data-m-group]) {
  min-height: 0;
  padding: 14px var(--m-gutter) 4px;
  background: var(--m-ground);
}
table:is(.m-rows, [data-m-rows]) > tbody > tr:is(.m-group, [data-m-group]) > * {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--m-muted);
}
/* Una tabla hecha filas no necesita scroll propio: la página ya desplaza. */
.t-scroll:has(> table:is(.m-rows, [data-m-rows])),
.t-scroll-y:has(> table:is(.m-rows, [data-m-rows])),
.table-wrapper:has(> table:is(.m-rows, [data-m-rows])) {
  max-height: none;
  overflow: visible;
}

/* ============================================================ 6 · PIVOT */
.m-mchips {
  display: flex;
  gap: 6px;
  margin: 0 calc(-1 * var(--m-gutter)) 12px;
  padding: 0 var(--m-gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.m-mchips::-webkit-scrollbar { display: none; }
.m-mchips button {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 58px;
  width: auto;
  height: 44px;
  margin: 0;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid #DCDCE1;
  background: #fff;
  color: var(--m-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;
  text-transform: capitalize;
}
.m-mchips button small { font-size: 10.5px; font-weight: 500; color: var(--m-muted); }
.m-mchips button[aria-pressed="true"] { background: var(--m-ink); border-color: var(--m-ink); color: #fff; }
.m-mchips button[aria-pressed="true"] small { color: #C9C9D1; }
.pivot-table-wrapper:has(table.m-pivot-on),
.table-wrapper:has(> table.m-pivot-on),
.t-scroll:has(> table.m-pivot-on) {
  overflow: visible;
  max-height: none;
}
table.m-pivot-on,
table.m-pivot-on > tbody {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
}
table.m-pivot-on {
  margin: 0 0 16px;
  background: #FFFFFF;
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius);
  overflow: hidden;
  font-size: 15px;
  table-layout: auto;
}
table.m-pivot-on > thead,
table.m-pivot-on > tfoot { display: none; }
table.m-pivot-on > tbody > tr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  min-height: 58px;
  padding: 10px var(--m-gutter);
  border-top: 1px solid var(--m-line-2);
  background: transparent;
  cursor: pointer;
}
table.m-pivot-on > tbody:first-of-type > tr:first-child { border-top: 0; }
table.m-pivot-on > tbody > tr > * {
  display: none;
  position: static !important;
  left: auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0;
  /* !important: el separador de grupo de escritorio
   * (`.artistas-pivot-table … tr.artist-group:not(:first-child) > *`) pesa
   * más y pintaba un trozo de raya encima de cada celda de la fila. */
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
table.m-pivot-on > tbody > tr > .m-pv-label {
  display: block;
  flex: 1 1 0;
  min-width: 0 !important;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  color: var(--m-ink);
}
.m-pv-meta {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 400;
  color: var(--m-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}
table.m-pivot-on > tbody > tr > .m-pv-spark { display: block; flex: 0 0 auto; }
table.m-pivot-on > tbody > tr > .m-sel {
  display: block;
  flex: 0 0 auto;
  min-width: 84px !important;
  text-align: right;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--m-ink);
}
table.m-pivot-on > tbody > tr > .m-sel::after {
  content: attr(data-m-short);
  display: block;
  margin-top: 1px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--m-muted);
  text-transform: lowercase;
}
table.m-pivot-on > tbody > tr.m-open { background: #FAFAFB; }
table.m-pivot-on > tbody > tr.m-open > .m-pv-mes:not(.m-sel) {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  order: 10;
  flex-basis: 100%;
  padding: 5px 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--m-ink);
}
table.m-pivot-on > tbody > tr.m-open > .m-pv-mes:not(.m-sel)::before {
  content: attr(data-m-label);
  font-weight: 400;
  color: var(--m-muted-2);
  text-transform: lowercase;
}
table.m-pivot-on > tbody > tr > .m-pv-label button { flex: 0 0 auto; }
table.m-pivot-on .pivot-row-subfila > .m-pv-label,
table.m-pivot-on tr[data-parent] > .m-pv-label,
table.m-pivot-on tr.m-child > .m-pv-label {
  padding-left: 14px;
  font-size: 14px;
  font-weight: 500;
}
table.m-pivot-on .pivot-row-total-general { background: var(--m-ground); }

/* ============================================================ 7 · ACCIÓN FIJA */
.m-actionbar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px calc(-1 * var(--m-gutter)) 0;
  padding: 10px var(--m-gutter) max(16px, env(safe-area-inset-bottom));
  background: #FFFFFF;
  border-top: 1px solid #E5E5E8;
}
.m-actionbar > *,
.m-actionbar > form > button {
  flex: 1 1 0;
  min-width: 0;
  margin: 0 !important;
}
.m-actionbar .btn,
.m-actionbar button,
.m-actionbar a[role="button"] {
  height: 48px;
  width: 100%;
  justify-content: center;
}
.m-actionbar-info {
  flex-basis: 100% !important;
  font-size: 12.5px;
  color: var(--m-muted);
}

/* ============================================================ 8 · AVISOS */
.alert {
  border-left: 0;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.45;
}

/* ============================================================ 9 · FORMULARIOS Y BOTONES */
.content .btn,
.content button.btn,
.content button.btn-dark,
.content .btn-ghost,
.content .btn-primary {
  min-height: 44px;
}
.content .btn-ghost { height: 44px; }
.card { padding: 16px; border-radius: var(--m-radius); }
.option-section { margin-top: 20px; }

/* KPI por gravedad (`kpi(..., tono=)` / `alerta=`): dinero perdido en rojo,
 * trabajo pendiente en ámbar, todo en orden en verde (solo la cifra). */
.kpi-card.kpi-card--tono-alerta { background: var(--m-err-bg); border-color: #F6CFCB; }
.kpi-card.kpi-card--tono-alerta .kpi-value { color: #8E241B !important; }
.kpi-card.kpi-card--tono-aviso { background: var(--m-warn-bg); border-color: #F3E0BA; }
.kpi-card.kpi-card--tono-aviso .kpi-value { color: #6E470C; }
.kpi-card.kpi-card--tono-ok .kpi-value { color: var(--m-ok-ink); }

/* Plegables de detector / sección: una tarjeta por fila, cifra a la derecha. */
details.fold-section {
  margin-top: 10px;
  background: #FFFFFF;
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius);
  overflow: hidden;
}
details.fold-section > .fold-section-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  margin: 0;
  padding: 12px var(--m-gutter);
}
details.fold-section > .fold-section-summary > span:first-child {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 2px;
  font-size: 15px;
  line-height: 1.3;
}
details.fold-section > .fold-section-summary small { font-size: 13px; color: var(--m-muted); }
details.fold-section .fold-section-kpi {
  flex: 0 0 auto;
  max-width: 42%;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: normal;
}
details.fold-section > .fold-section-body { padding: 0 var(--m-gutter) 14px; }
details.fold-section .card.t-scroll { margin: 0 calc(-1 * var(--m-gutter)); border: 0; border-top: 1px solid var(--m-line-2); border-radius: 0; }

/* Tabla → filas: dos papeles más.
 *   m-p   la celda es un estado corto: se pinta como píldora (fila de chips)
 *   data-m-suf="…" en una m-n2: sufijo tras la cifra («1.845,10 € reciente») */
table:is(.m-rows, [data-m-rows]) > tbody > tr > .m-p {
  display: inline-flex;
  align-items: center;
  order: 5;
  height: 22px;
  margin: 6px 6px 0 0;
  padding: 0 8px;
  border-radius: 11px;
  background: #EEEEF1;
  color: #4A4A53;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
table:is(.m-rows, [data-m-rows]) > tbody > tr > .m-n2[data-m-suf]::after { content: " " attr(data-m-suf); }
.m-actionbar small,
.m-actionbar .muted { flex-basis: 100% !important; order: -1; font-size: 12.5px; }

/* Filtro por categoría de Ventas sin titular: chips en una fila que desplaza. */
nav.filtro-categorias {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0 calc(-1 * var(--m-gutter)) 12px;
  padding: 0 var(--m-gutter);
  overflow-x: auto;
  scrollbar-width: none;
  justify-content: flex-start;
}
nav.filtro-categorias::-webkit-scrollbar { display: none; }
nav.filtro-categorias a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 14px;
  border-radius: 22px;
  border: 1px solid #DCDCE1;
  background: #fff;
  color: var(--m-ink);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}
nav.filtro-categorias a small { color: var(--m-muted); font-size: 12.5px; }
nav.filtro-categorias a[aria-current] { background: var(--m-ink); border-color: var(--m-ink); color: #fff; }
nav.filtro-categorias a[aria-current] small { color: #C9C9D1; }

/* Fila de acciones de una sección (descargar / subir): botones a partes
 * iguales. Con `.m-actionbar` además queda fija abajo. */
.accion-lote {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.accion-lote > .btn,
.accion-lote > .btn-ghost,
.accion-lote > a,
.accion-lote > button {
  flex: 1 1 0;
  min-width: 0;
  height: 44px;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1.15;
}
/* «No es nuestra» y otras acciones de fila que se despliegan. */
table:is(.m-rows, [data-m-rows]) details.row-action { width: 100%; }
table:is(.m-rows, [data-m-rows]) details.row-action > summary {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #D4D4DA;
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
}
table:is(.m-rows, [data-m-rows]) .row-action-body { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

/* ---------------------------------------------------------------- Admin · Auditoría */
/* Buscadores de una sola caja (Lanzamientos): caja + botón, sin banda verde. */
.filter-banner-teal.filter-banner-teal--2col {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 0;
  border-radius: 0;
  background: none;
  align-items: end;
}
.filter-banner-teal.filter-banner-teal--2col .fb-label { display: none; }
.filter-banner-teal.filter-banner-teal--2col .fb-submit { width: auto; height: 48px; padding: 0 18px; border-radius: 14px; }
.filter-banner-teal .fb-input,
.filter-banner-teal .fb-select { min-height: 48px; border-radius: 12px; }
.filter-banner-teal { border-radius: 20px; padding: 16px; }
.toggle-form label { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; }
.toggle-form input[type="checkbox"] { width: 22px; height: 22px; flex: 0 0 auto; margin: 0; }
/* Formularios en línea (Herencia: vincular a mano) → una columna. */
form.form-inline { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
form.form-inline label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
form.form-inline .btn { width: 100%; height: 48px; }
table:is(.m-rows, [data-m-rows]) > tbody > tr.herencia-master-row { background: #FAFAFB; }
table:is(.m-rows, [data-m-rows]) .inline-edit { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
table:is(.m-rows, [data-m-rows]) .inline-edit input[type="text"],
table:is(.m-rows, [data-m-rows]) .inline-edit select { flex: 1 1 100%; min-height: 44px; margin: 0; }
table:is(.m-rows, [data-m-rows]) .inline-edit .btn-ghost,
table:is(.m-rows, [data-m-rows]) .inline-edit .btn { flex: 1 1 0; height: 40px; justify-content: center; }
/* Tarjetas plegables de lanzamiento (Lanzamientos consolidados). */
details.lanz-group { background: #fff; border: 1px solid var(--m-line); border-radius: var(--m-radius); overflow: hidden; }
details.lanz-group > summary.lanz-group-head { padding: 12px var(--m-gutter); min-height: 52px; }
/* Lo interactivo de una fila queda POR ENCIMA del enlace que la cubre. */
table:is(.m-rows, [data-m-rows]) > tbody > tr > :is(.m-a, .m-c, .m-p),
table:is(.m-rows, [data-m-rows]) > tbody > tr > .m-d a,
table:is(.m-rows, [data-m-rows]) > tbody > tr > .m-n a { position: relative; z-index: 1; }
table:is(.m-rows, [data-m-rows]) > tbody > tr > .m-l { z-index: 1; }
form.m-filtros:not(.is-open) [data-m-keep] label { display: none !important; }
form.form-inline input[type="text"] { width: 100%; min-height: 48px; }

/* ---------------------------------------------------------------- Admin · Usuarios */
/* Título de varias líneas (nombre + email + chips): sin recorte. */
table:is(.m-rows, [data-m-rows]) > tbody > tr > .m-t.m-block { white-space: normal; overflow: visible; }
table:is(.m-rows, [data-m-rows]) > tbody > tr > .m-n.m-n-sm { font-size: 12px; font-weight: 500; color: var(--m-muted); }
/* Varias `m-c` seguidas comparten la fila de chips. */
table:is(.m-rows, [data-m-rows]) > tbody > tr > .m-c { flex-basis: auto; margin-right: 6px; }
table:is(.m-rows, [data-m-rows]) > tbody > tr > .m-c:first-of-type { margin-left: 0; }
.admin-who { display: flex; flex-direction: column; gap: 2px; }
.admin-who small { font-size: 13px; font-weight: 400; color: var(--m-muted); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
table:is(.m-rows, [data-m-rows]) .btn.btn-small,
table:is(.m-rows, [data-m-rows]) .inline-form .btn { height: 40px; padding: 0 14px; }
table:is(.m-rows, [data-m-rows]) .inline-form { margin: 0; }
/* Filtros por rol (Usuarios, Titulares): chips que desplazan. */
.filter-pills {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0 calc(-1 * var(--m-gutter)) 12px;
  padding: 0 var(--m-gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.filter-pills::-webkit-scrollbar { display: none; }
.filter-pills .filter-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 14px;
  border-radius: 22px;
  font-size: 14px;
  white-space: nowrap;
}
.pending-approval-item { flex-wrap: wrap; gap: 10px; }
.pending-approval-item .btn { width: 100%; height: 44px; justify-content: center; }
.mini-kpis { gap: 10px; }
.mini-kpis .mini-kpi { flex: 1 1 calc(50% - 5px); min-width: 0; border-radius: 14px; }
/* Subclientes de Paid: artistas, visibilidad y Guardar, uno bajo otro. */
table:is(.m-rows, [data-m-rows]) .inline-form { display: contents; }
/* Acciones de fila: botones a partes iguales en una línea; los campos, a
 * línea entera (Subclientes: artistas, visibilidad y Guardar). */
table:is(.m-rows, [data-m-rows]) > tbody > tr > .m-a > *,
table:is(.m-rows, [data-m-rows]) > tbody > tr > .m-a > .inline-form > * { flex: 1 1 0; min-width: 0; }
table:is(.m-rows, [data-m-rows]) > tbody > tr > .m-a :is(input[type="text"], input[type="password"], select) {
  flex-basis: 100%;
  width: 100%;
  min-height: 44px;
  margin: 0;
}
table:is(.m-rows, [data-m-rows]) > tbody > tr > .m-a :is(.btn, .btn-ghost, .btn-small) {
  height: 40px;
  justify-content: center;
  width: auto;
}
table:is(.m-rows, [data-m-rows]) > tbody > tr > .m-a small { flex-basis: 100%; }

/* Formularios de ficha (usuarios, perfil): la fila de botones es la barra de
 * acción fija; el principal a la derecha. */
.form-card { padding: 16px; }
.form-card > .form-actions {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  gap: 10px;
  margin: 16px -16px -16px;
  padding: 10px 16px max(16px, env(safe-area-inset-bottom));
  background: #FFFFFF;
  border-top: 1px solid #E5E5E8;
  border-radius: 0 0 var(--m-radius) var(--m-radius);
}
.form-card > .form-actions > * { flex: 1 1 0; height: 48px; justify-content: center; margin: 0; }
.form-card > .form-actions > .btn-primary,
.form-card > .form-actions > button[type="submit"] { order: 2; }
.form-card .form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-card .form-row label { font-size: 13px; font-weight: 600; }
.form-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.form-card select { min-height: 48px; border-radius: 12px; }

/* ============================================================ BOTONES (sistema)
 * El diseño móvil: 48 px, radio 14, frase normal, verde fuerte con blanco.
 * En escritorio siguen siendo píldoras en mayúsculas. */
.content .btn,
.content a.btn,
.content button.btn,
.content .btn-primary,
.content .fb-submit,
.hero .btn {
  height: 48px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 14px;
  background: var(--m-strong);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.content .btn:hover,
.content .btn-primary:hover,
.content .fb-submit:hover { background: #03675F; color: #fff; }
.content .btn-dark,
.content button.btn-dark {
  height: 48px;
  border-radius: 14px;
  letter-spacing: 0;
  text-transform: none;
  font-size: 15px;
}
.content .btn-ghost,
.content .btn.btn-ghost {
  height: 44px;
  border-radius: 12px;
  background: #fff;
  color: var(--m-ink);
  border: 1px solid #D4D4DA;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.content .btn-small,
.content .btn.btn-small {
  height: 40px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 14px;
}
.content .btn-small:not(.btn-primary) { background: #fff; color: var(--m-ink); border: 1px solid #D4D4DA; }
.content .page-head-actions .btn { height: 44px; min-height: 44px; font-size: 14px; }
.content a.btn,
.content a.btn-ghost,
.content a.btn-small,
.content a.fbtn { text-decoration: none; }
.form-card > .form-actions > a.btn:not(.btn-primary) {
  background: #fff;
  color: var(--m-ink);
  border: 1px solid #D4D4DA;
}
table:is(.m-rows, [data-m-rows]) > tbody > tr > .m-a > details { flex-basis: 100%; }
table:is(.m-rows, [data-m-rows]) > tbody > tr > .m-a > details > summary { width: 100%; justify-content: center; }
/* Tarjeta de sello en los formularios de usuario: la casilla dentro. */
fieldset.tenant-card {
  padding: 4px 16px;
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius);
  background: #FFFFFF;
}
fieldset.tenant-card > legend {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
}
fieldset.tenant-card > legend + * { clear: both; }
fieldset.tenant-card .tenant-card-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  font-size: 15px;
  font-weight: 600;
}
fieldset.tenant-card .tenant-card-toggle input { width: 22px; height: 22px; margin: 0; }
fieldset.tenant-card .tenant-card-body { padding-bottom: 12px; }
.segmented-control { display: flex; background: #E8E8EC; border-radius: 12px; padding: 3px; gap: 2px; }
.segmented-control .segmented-option { flex: 1; min-height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 14px; }

/* ---------------------------------------------------------------- Admin · Archivos */
/* Zona de subida: caja discontinua táctil. */
.drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 16px;
  border: 1.5px dashed #9FD9D3;
  border-radius: var(--m-radius);
  background: #F2FBFA;
  text-align: center;
  color: #035E58;
}
.drop-zone .dz-label { font-size: 15px; font-weight: 600; color: var(--m-ink); }
.drop-zone .dz-help { font-size: 13px; color: var(--m-muted-2); line-height: 1.4; }
.check-row-group { border: 1px solid var(--m-line); border-radius: var(--m-radius); background: #fff; padding: 0 var(--m-gutter); }
.check-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--m-line-2); }
.check-row:first-child, .check-row-group > legend + .check-row { border-top: 0; }
.check-row input[type="checkbox"] { width: 22px; height: 22px; flex: 0 0 auto; margin: 1px 0 0; }
.check-row .ck-body strong { display: block; font-size: 15px; font-weight: 500; line-height: 1.35; }
.check-row .ck-body small { display: block; margin-top: 3px; font-size: 13px; color: var(--m-muted); line-height: 1.4; }
/* En la barra de subida, la vista previa (secundaria) va a la izquierda. */
.m-actionbar > .btn-ghost { order: -1; }
/* Backups: filas de fecha + qué deshace + tamaño, con «Restaurar» a la derecha. */
.backup-list { border-radius: var(--m-radius); }
.backup-list > .backup-row.head { display: none; }
.backup-list > .backup-row,
.backup-list.backup-list-4col > .backup-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  padding: 11px var(--m-gutter);
  min-height: 58px;
}
.backup-list .backup-when { order: 1; flex: 1 1 1px; min-width: 0; font-size: 15px; font-weight: 600; }
.backup-list .backup-actions { order: 2; flex: 0 0 auto; }
.backup-list > .backup-row::after { content: ""; order: 3; flex-basis: 100%; height: 0; }
.backup-list .backup-note { order: 4; font-size: 13px; color: var(--m-muted); }
.backup-list .backup-size { order: 5; font-size: 13px; color: var(--m-muted); }
.backup-list .backup-size::before { content: "·"; margin-right: 6px; }
.backup-list .backup-actions button { height: 40px; padding: 0 14px; border-radius: 12px; font-size: 14px; margin: 0; width: auto; }
.backup-list > .backup-row.head { display: none !important; }
.drop-zone input[type="file"] { max-width: 100%; font-size: 13px; color: var(--m-muted-2); }
.drop-zone input[type="file"]::file-selector-button {
  height: 40px;
  margin-right: 10px;
  padding: 0 14px;
  border: 1px solid #D4D4DA;
  border-radius: 12px;
  background: #fff;
  color: var(--m-ink);
  font-size: 14px;
  font-weight: 600;
}

/* ---------------------------------------------------------------- Admin · Adelantos */
table:is(.m-rows, [data-m-rows]) { min-width: 0 !important; }
/* Formularios de alta en línea con estilos fijos (Añadir tramo, Nueva
 * exclusión, Devoluciones): una columna, con los dos campos cortos a pares. */
.lanz-group > form.card,
.content > form.card[style*="flex-wrap"] {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px !important;
  padding: 16px !important;
  border: 0;
  border-radius: 0;
}
.lanz-group > form.card > label,
.content > form.card[style*="flex-wrap"] > label {
  flex: 1 1 100%;
  font-size: 13px;
  font-weight: 600;
}
.lanz-group > form.card > label:has(input[name="tramo"]),
.lanz-group > form.card > label:has(input[name="importe"]) { flex: 1 1 40%; }
.lanz-group > form.card input,
.lanz-group > form.card select,
.content > form.card[style*="flex-wrap"] input,
.content > form.card[style*="flex-wrap"] select {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px;
}
.lanz-group > form.card > button,
.content > form.card[style*="flex-wrap"] > button {
  flex: 1 1 100%;
  height: 48px;
  border-radius: 14px;
  background: var(--m-strong);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}
/* Tramos editables: cada fila se lee como el diseño (artista, titular,
 * tramo · fecha, importe) y cada dato se edita tocándolo. */
table.m-edit input[type="text"],
table.m-edit input[type="number"] {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 36px;
  margin: 0;
  padding: 0 6px;
  border: 0 !important;
  border-bottom: 1px dashed #C9C9D1 !important;
  border-radius: 0 !important;
  background: transparent;
  box-shadow: none;
}
table.m-edit input:focus { border-bottom: 2px solid var(--m-brand) !important; background: #F2FBFA; }
table.m-edit > tbody > tr > .m-t input[name="artista"] { font-size: 16px; font-weight: 600; padding-left: 0; }
table.m-edit > tbody > tr > .m-n { min-width: 120px; }
table.m-edit > tbody > tr > .m-n input { text-align: right; font-weight: 700; }
table.m-edit > tbody > tr > .m-full { flex-basis: 100%; }
table.m-edit > tbody > tr > .m-c { flex: 1 1 30%; margin-top: 8px; }
table.m-edit > tbody > tr > .m-c input[name="tramo"] { max-width: 70px; }
table.m-edit .suggestion-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
table.m-edit > tbody > tr > .m-n { flex: 0 0 130px; min-width: 0; }
.content .lanz-group > form.card > button.btn-small,
.content .lanz-group > form.card > button {
  background: var(--m-strong);
  color: #fff;
  border: 0;
  height: 48px;
  border-radius: 14px;
  font-size: 15px;
}

/* `m-dp`: meta con el rótulo de su columna delante (lo pone movil.js). */
table:is(.m-rows, [data-m-rows]) > tbody > tr > .m-dp {
  display: block;
  order: 4;
  flex: 0 1 auto;
  min-width: 0;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--m-muted);
  white-space: nowrap;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
table:is(.m-rows, [data-m-rows]) > tbody > tr > .m-dp[data-m-pre]::before {
  content: attr(data-m-pre) " ";
  color: #8A8A93;
}
table:is(.m-rows, [data-m-rows]) > tbody > tr > :is(.m-d, .m-dp) ~ .m-dp[data-m-pre]::before {
  content: "· " attr(data-m-pre) " ";
  margin: 0 0 0 5px;
}
table:is(.m-rows, [data-m-rows]) > tbody > tr > :is(.m-d, .m-dp) ~ .m-dp:not([data-m-pre])::before { content: "·"; margin: 0 5px; }
table:is(.m-rows, [data-m-rows]) > tbody > tr.report-total { background: var(--m-ground); }
table:is(.m-rows, [data-m-rows]) > tbody > tr.report-total > * { font-weight: 700; }

/* ---------------------------------------------------------------- Royalties · informe */
/* Con resultados: identidad, evolución, el segmento Pistas / Plataformas /
 * Redes / Países y el panel elegido (el TOC de anclas es de escritorio). */
#report-results[data-m-tabs] { display: flex; flex-direction: column; }
#report-results > #evolucion { order: 1; }
#report-results > .m-seg { order: 2; }
#report-results > section[data-m-tab] { order: 3; }
.report-sticky { position: static; padding: 0; margin: 4px 0 10px; background: none; box-shadow: none; }
.report-sticky .display-name { font-size: 22px; margin: 0; }
.report-sticky .toc-tabs { display: none; }
#report-results section { margin: 0 0 16px; }
#report-results section > h3 { font-size: 17px; margin: 6px 0 10px; }
/* Sin informe cargado, las cifras «—» no dicen nada: fuera. */
.report-kpi-aside[data-m-vacio] { display: none; }
.report-filter-row { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
/* El total del informe, como tarjeta destacada. */
.report-kpi-aside {
  min-width: 0;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--m-radius);
  background: var(--m-ink);
  color: #fff;
  box-shadow: none;
}
.report-kpi-aside .report-kpi-row { padding: 8px 0; border-color: rgba(255,255,255,.12); }
.report-kpi-aside .report-kpi-row:last-child { border-bottom: 0; }
.report-kpi-aside dt { color: #C9C9D1; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.report-kpi-aside dd { color: #fff; font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; margin: 0; }
.report-kpi-aside .report-kpi-row:last-child dd { font-size: 28px; }
/* Segmento (el que pinta movil.js). */
.m-seg { display: flex; gap: 2px; padding: 3px; margin: 16px 0 12px; border-radius: 12px; background: #E8E8EC; }
.m-seg button {
  flex: 1;
  height: 38px;
  margin: 0;
  padding: 0 6px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #4A4A53;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-seg button.on { background: #fff; color: var(--m-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.m-tab-off { display: none !important; }
/* Barra de exportar que pinta movil.js (Excel / PDF de los informes). */
.m-exportbar { margin-top: 20px; }
.m-exportbar > button { height: 48px; border-radius: 14px; font-size: 15px; font-weight: 600; background: #fff; color: var(--m-ink); border: 1px solid #D4D4DA; }
.m-exportbar > button:last-child { background: var(--m-strong); color: #fff; border: 0; }

/* ---------------------------------------------------------------- Royalties · adelantos */
/* Panel de saldos: el saldo pendiente manda (tarjeta oscura arriba); el resto
 * en la rejilla de 2, con sus pies recortados a dos líneas. */
.adel-panel-kpis > .kpi-card:nth-child(2) {
  order: -1;
  grid-column: 1 / -1;
  background: var(--m-ink);
  border-color: var(--m-ink);
}
.adel-panel-kpis > .kpi-card:nth-child(2) .kpi-header,
.adel-panel-kpis > .kpi-card:nth-child(2) .kpi-header svg,
.adel-panel-kpis > .kpi-card:nth-child(2) .kpi-footer,
.adel-panel-kpis > .kpi-card:nth-child(2) .kpi-footer small { color: #C9C9D1; }
.adel-panel-kpis > .kpi-card:nth-child(2) .kpi-value { color: #fff; font-size: 28px; }
.adel-panel-kpis .kpi-footer small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Tabla de adelantos (panel, «Mis adelantos», dashboard del titular):
 * artista y saldo; titular y total adelantado; barra; tramos. Solo CSS sobre
 * las clases `adel-cell-*` que ya tiene la tabla. */
table.adel-table,
table.adel-table > tbody { display: block; width: 100%; }
table.adel-table { background: #fff; border: 1px solid var(--m-line); border-radius: var(--m-radius); overflow: hidden; }
table.adel-table > thead { display: none; }
table.adel-table > tbody > tr,
table.adel-table > tfoot > tr {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  padding: 12px var(--m-gutter);
  border-top: 1px solid var(--m-line-2);
}
table.adel-table > tbody > tr:first-child { border-top: 0; }
table.adel-table > tbody > tr::after { content: ""; order: 3; flex-basis: 100%; height: 0; }
table.adel-table > tbody > tr > td { display: none; padding: 0; border: 0; background: none; text-align: left; }
table.adel-table .adel-cell-artista { display: block; order: 1; flex: 1 1 1px; min-width: 0; font-size: 15px; font-weight: 600; }
table.adel-table .adel-cell-total { display: contents; }
table.adel-table .adel-total-value { order: 2; margin-left: 12px; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
table.adel-table .adel-cell-titular { display: block; order: 4; flex: 1 1 1px; min-width: 0; margin-top: 2px; font-size: 13px; color: var(--m-muted); }
table.adel-table .adel-cell-total-adelanto { display: block; order: 5; margin: 2px 0 0 12px; font-size: 12px; color: var(--m-muted); font-variant-numeric: tabular-nums; }
table.adel-table .adel-cell-total-adelanto::before { content: "/ "; }
table.adel-table .adel-bar { order: 6; flex-basis: 100%; margin-top: 8px; }
table.adel-table .adel-bar-caption { order: 7; flex-basis: 100%; margin-top: 3px; font-size: 12px; color: var(--m-muted); }
table.adel-table .adel-cell-tramos { display: block; order: 8; flex-basis: 100%; margin-top: 8px; }
table.adel-table .adel-tramo-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
table.adel-table .adel-tramo-item { font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 4px; }
table.adel-table .adel-tramo-estado { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
table.adel-table > tfoot { display: block; }
table.adel-table > tfoot > tr { background: var(--m-ground); }
table.adel-table > tfoot > tr > * { display: none; }
table.adel-table > tfoot > tr > th:first-child { display: block; flex: 1; font-weight: 700; }
table.adel-table > tfoot > tr > .adel-cell-total { display: contents; }
table.adel-table:has(> tbody > tr:only-child) > tfoot { display: none; }
table.m-pivot-on > tbody > tr.report-total > .m-pv-spark { visibility: hidden; }
/* Las filas plegadas (`hidden`) siguen plegadas: el `display: flex` de
 * arriba ganaba al `[hidden]` de la hoja base. */
table.m-pivot-on > tbody > tr[hidden],
table:is(.m-rows, [data-m-rows]) > tbody > tr[hidden] { display: none; }
table.m-pivot-on tr[data-sub-row] > .m-pv-label { padding-left: 14px; font-size: 14px; font-weight: 500; }
table.m-pivot-on .row-toggle {
  display: inline;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
}
table.m-pivot-on .row-caret { display: inline-block; width: 14px; color: var(--m-muted); }

/* ---------------------------------------------------------------- Analíticas */
/* La rejilla de 10 columnas del filtro, en dos: mes | año, mes | año, y el
 * resto a fila entera (los `span N` vienen en línea desde la plantilla). */
.filter-grid-primary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
.filter-grid-primary > * { grid-column: 1 / -1 !important; }
.filter-grid-primary > [style*="span 1"] { grid-column: span 1 !important; }
.filter-grid-primary .field-label,
.filter-grid-primary .filter-field-label { white-space: normal; }
.filter-grid-primary .field > select,
.filter-grid-primary .field > input { min-height: 48px; }
.filter-advanced, .filter-meta { margin-top: 4px; }
.filter-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* El resumen «Aplicado…» de escritorio repite los chips de la barra. */
.pivot-summary { display: none; }
/* KPI en mosaico (RH, GRA): dos columnas, cifras a 19 px. */
.report-kpi-aside--tiles .report-kpi-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
.report-kpi-aside--tiles .report-kpi-row { flex-direction: column; align-items: flex-start; gap: 2px; border: 0; padding: 6px 0; }
.report-kpi-aside--tiles .report-kpi-row dd,
.report-kpi-aside--tiles .report-kpi-row:last-child dd { font-size: 19px; }
.report-kpi-aside dd { white-space: nowrap; }
/* /analytics/rh: las tres vistas van en pestañas; el mismo aire bajo el
 * control en las tres (la primera hereda 2rem de escritorio, las otras 2,5). */
.report-kpi-aside + .rh-vistas > section.rh-section { margin-top: 20px; }
/* GRA: barra apilada del reparto del bruto (Believe · Acqustic · titulares). */
/* El aside es una fila flex (escritorio): la barra baja a su propia línea a
 * ancho completo; sin esto se queda con ancho 0 al final de la fila. */
.report-kpi-aside--tiles:has(> .gra-stack) { flex-wrap: wrap; }
.gra-stack { flex: 0 0 100%; display: flex; height: 14px; margin-top: 12px; border-radius: 7px; overflow: hidden; background: rgba(255,255,255,.12); }
.gra-stack i { display: block; height: 100%; }
.gra-stack-believe { background: #8A8A93; }
.gra-stack-acq { background: var(--m-brand); }
.gra-stack-rh { background: #9FD9D3; }
.report-kpi-aside--tiles .report-kpi-row:nth-child(n+2) dt::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-radius: 2px;
  vertical-align: 0;
}
.report-kpi-aside--tiles .report-kpi-row:nth-child(2) dt::before { background: #8A8A93; }
.report-kpi-aside--tiles .report-kpi-row:nth-child(3) dt::before { background: var(--m-brand); }
.report-kpi-aside--tiles .report-kpi-row:nth-child(4) dt::before { background: #9FD9D3; }
.reparto-pct-muted { color: #C9C9D1; font-size: 13px; font-weight: 500; }
table.m-pivot-on > tfoot { display: block; background: var(--m-ground); }
table.m-pivot-on > tfoot > tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; min-height: 52px; padding: 10px var(--m-gutter); }
table.m-pivot-on > tfoot > tr > * { display: none; padding: 0; border: 0; background: none; }
table.m-pivot-on > tfoot > tr > .m-pv-label { display: block; flex: 1 1 0; font-weight: 700; }
table.m-pivot-on > tfoot > tr > .m-sel { display: block; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
table.m-pivot-on > tfoot > tr > .m-pv-spark { display: block; visibility: hidden; }
table.m-pivot-on > * > tr.m-open > .m-pv-mes:empty { display: none !important; }
table.m-pivot-on > * > tr > td.heat-cell,
table.m-pivot-on > * > tr > td.heat-empty { color: var(--m-ink); background: none !important; }
/* En la hoja, el borde lo lleva la caja `.field` (el desplegable de dentro es
 * transparente y tiene su chevron al lado). */
.filter-grid-primary .field { height: 48px; font-size: 16px; border: 1px solid #D4D4DA; background: #fff; }
form.m-filtros.is-open .filter-grid-primary .field > select,
form.m-filtros.is-open .filter-grid-primary .field > input {
  min-height: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent;
  font-size: 16px;
}
.reparto-pct-muted { display: block; margin-top: 1px; }

/* ---------------------------------------------------------------- Releases */
/* Portada a la izquierda de título y meta (Releases, Pistas). */
table:is(.m-rows, [data-m-rows]).releases-table > tbody > tr:has(.cell-product-thumb) { padding-left: calc(var(--m-gutter) + 56px); min-height: 68px; }
table:is(.m-rows, [data-m-rows]).releases-table .cell-product-thumb {
  position: absolute;
  left: var(--m-gutter);
  top: 12px;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
}
table:is(.m-rows, [data-m-rows]).releases-table .cell-release { display: block; }
table:is(.m-rows, [data-m-rows]).releases-table .cell-release-text { display: block; min-width: 0; }
table:is(.m-rows, [data-m-rows]).releases-table .cell-release-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  font-size: 15px;
  font-weight: 600;
  color: var(--m-ink);
  text-decoration: none;
}
table:is(.m-rows, [data-m-rows]).releases-table .cell-release-sub { display: none; }
table:is(.m-rows, [data-m-rows]).releases-table .badge-video { margin-right: 6px; }
table:is(.m-rows, [data-m-rows]).releases-table .hover-pop-trigger { padding: 0; border: 0; background: none; color: inherit; font: inherit; }
table:is(.m-rows, [data-m-rows]).releases-table .hover-pop-panel { display: none; }
/* Nueva pista: «Cancelar» como botón secundario en la barra fija. */
.m-actionbar > a.t-muted {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border: 1px solid #D4D4DA;
  border-radius: 14px;
  background: #fff;
  color: var(--m-ink);
  font-weight: 600;
  text-decoration: none;
}
.m-actionbar > .btn-primary { order: 2; }
/* Ficha de artista: tres KPI pequeños en fila. */
.perfil-estado { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px; }
.perfil-kpi { padding: 10px 12px; border-radius: 14px; min-width: 0; }
.perfil-kpi-t { font-size: 11px !important; letter-spacing: 0.06em; margin: 0; }
.perfil-kpi-v { font-size: 20px; margin: 2px 0 0; }
.perfil-kpi-s { font-size: 11.5px; line-height: 1.3; margin: 2px 0 0; }
/* Selector de sello que no es chip (Releases, Pistas): con forma de píldora. */
.page-head-filter select { width: auto; min-width: 150px; height: 44px; min-height: 44px; padding: 0 36px 0 14px; border-radius: 22px; font-size: 14px; }

/* ---------------------------------------------------------------- Marketing */
/* Campañas de Paid: tarjeta por campaña, cifras en rejilla de 3 con su rótulo. */
table.marketing-campaign-table,
table.marketing-campaign-table > tbody {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
}
table.marketing-campaign-table > colgroup,
table.marketing-campaign-table > thead { display: none; }
table.marketing-campaign-table > tbody > tr {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 10px;
  padding: 12px var(--m-gutter);
  border-top: 1px solid var(--m-line-2);
}
table.marketing-campaign-table > tbody > tr:first-child { border-top: 0; }
table.marketing-campaign-table > tbody > tr > td {
  display: block;
  padding: 0;
  border: 0;
  text-align: left;
  white-space: normal;
  font-size: 13.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 0;
  overflow-wrap: anywhere;
}
table.marketing-campaign-table > tbody > tr > td.paid-cell-campaign,
table.marketing-campaign-table > tbody > tr > td[colspan] {
  grid-column: 1 / -1;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
}
table.marketing-campaign-table > tbody > tr > td[data-m-pre]::before {
  content: attr(data-m-pre);
  display: block;
  margin-bottom: 1px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--m-muted);
}
table.marketing-campaign-table > tbody > tr > td:empty { display: none; }
.marketing-kpis-grouped { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
table.marketing-campaign-table > tbody > tr > td { text-align: left !important; background: none !important; }
table.marketing-campaign-table > tbody > tr.marketing-reference-row { background: #F2FBFA; }
/* Editor de Smart links: las cifras siempre arriba; debajo, Editar o la
 * vista previa del teléfono (el segmento lo pinta movil.js). */
.sl-editor > .m-seg { order: 0; }
.sl-editor > .sl-editor-lado { order: -1; }
.sl-editor > .sl-editor-lado.m-tab-off { display: block !important; }
.sl-editor > .sl-editor-lado.m-tab-off > :not(.sl-cifras) { display: none !important; }
.sl-cifras { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px; }

/* ---------------------------------------------------------------- Dashboard */
/* El año primero (tarjeta oscura), luego los meses y los rankings. */
.dashboard-content { display: flex; flex-direction: column; }
.dashboard-content > .dash-anual { order: -1; }
.content:has(> .dash-anual) { display: flex; flex-direction: column; }
.content:has(> .dash-anual) > .subnav-pill,
.content:has(> .dash-anual) > .m-crumb,
.content:has(> .dash-anual) > .page-head { order: -3; }
.content:has(> .dash-anual) > .alert { order: -2; }
.content:has(> .dash-anual) > .dash-anual { order: -1; }
.dashboard-section-header { margin: 8px 0 8px; }
.dashboard-section-header h2 { font-size: 17px; }
/* Filtros del dashboard (sello, artista, mes) en una fila que desplaza. */
.page-head-filter.dashboard-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0 calc(-1 * var(--m-gutter));
  padding: 0 var(--m-gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.page-head-filter.dashboard-filters::-webkit-scrollbar { display: none; }
.dashboard-filters > form { flex: 0 0 auto; margin: 0; }
.dashboard-filters .dashboard-artist-filter { flex: 0 0 220px !important; width: 220px !important; }
.dashboard-filters .dashboard-month-filter { flex: 0 0 170px !important; width: 170px !important; }
.dashboard-filters .filter-field-label { display: none; }
/* Meses: 2×2 aunque la cifra lleve «streams» (va a su línea). */
.kpi-grid--months .kpi-value { font-size: 19px; white-space: normal; }
.kpi-grid--months .kpi-unit { display: block; font-size: 12px; }
.kpi-grid--months > .m-kpi-wide { grid-column: auto; }
.dashboard-hero-grid { grid-template-columns: 1fr; gap: 10px; }
.ytd-hero { border-radius: var(--m-radius); padding: 16px; }
/* Rankings: una tabla a la vez tras el segmento; filas con puesto, nombre,
 * cifra y % debajo. */
.top-grid { display: block; }
.top-card { padding: 0; border-radius: var(--m-radius); overflow: hidden; }
.top-card-head { padding: 12px var(--m-gutter) 4px; font-size: 13px; }
table.top-table, table.top-table > tbody { display: block; width: 100%; }
table.top-table > thead { display: none; }
table.top-table > tbody > tr {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px var(--m-gutter);
  border-top: 1px solid var(--m-line-2);
}
table.top-table > tbody > tr > td { display: block; padding: 0; border: 0; }
table.top-table .rank { flex: 0 0 18px; color: var(--m-muted); font-size: 13px; text-align: right; }
table.top-table .top-name { flex: 1 1 1px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; font-size: 14.5px; }
table.top-table td.num:not(.top-pct) { font-weight: 700; font-variant-numeric: tabular-nums; }
table.top-table .top-pct { flex: 0 0 52px; text-align: right; font-size: 12px; color: var(--m-muted); }
table.top-table .top-name { max-width: none !important; width: auto !important; display: flex; align-items: center; gap: 6px; }
.kpi-card.kpi-card--selected .kpi-delta.is-up { color: var(--m-ok-ink); }
.kpi-card.kpi-card--selected .kpi-delta.is-down { color: #9E2A1F; }
.kpi-card.kpi-card--selected .kpi-delta { color: var(--m-muted-2); }

/* ---------------------------------------------------------------- Acceso y errores */
.m-err-code { margin: 24px 0 16px; font-size: 64px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: #D4D4DA; }
a.m-err-cta,
.m-err-actions > * {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  margin: 8px 0 0;
  border-radius: 14px;
  background: var(--m-strong);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.m-err-actions > .secondary { background: #fff; color: var(--m-ink); border: 1px solid #D4D4DA; }
.empty-state { text-align: left; }
/* Login: a pantalla completa sobre la foto, sin tarjeta; Google es la
 * entrada principal (staff) y la de titulares la secundaria. */
.hero { min-height: 100dvh; padding: 0; align-items: stretch; }
.hero-content { width: 100%; padding: 0; display: flex; }
.hero-card.hero-card-dark {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 40px 20px max(24px, env(safe-area-inset-bottom));
  border: 0;
  border-radius: 0;
  background: rgba(22, 22, 28, 0.82);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.hero-card .login-form { display: flex; flex-direction: column; gap: 10px; }
.hero-card .login-select,
.hero-card input.login-select { height: 52px; border-radius: 12px; font-size: 16px; }
.hero-card .btn-login {
  height: 52px;
  border-radius: 14px;
  background: #fff;
  color: var(--m-ink);
  border: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.hero-card .btn-login.btn-login-oauth { background: var(--m-strong); color: #fff; }
.hero-card .login-oauth-divider { font-size: 12px; letter-spacing: 0.08em; }
.hero-content { min-height: 100dvh; }
.hero-card.hero-card-dark { flex: 1; }
td.smartlink-contenido span,
td.smartlink-contenido small { display: inline; white-space: nowrap; }
td.smartlink-contenido small { margin-left: 4px; }
/* Botones de envío sin clase (Pico): mismo botón principal del diseño. */
.content button[type="submit"]:not([class]),
.content input[type="submit"]:not([class]) {
  height: 48px;
  border-radius: 14px;
  background: var(--m-strong);
  border: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}
/* Buscador global a pantalla completa. */
.gsearch-overlay { padding: 0; align-items: stretch; }
.gsearch-panel {
  width: 100%;
  height: 100dvh;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
}
.gsearch-input { height: 56px; font-size: 16px; padding: 0 16px; background: var(--m-ink); color: #fff; border: 0; }
.gsearch-input::placeholder { color: #C9C9D1; }
.gsearch-results { max-height: none; flex: 1; overflow-y: auto; background: var(--m-ground); padding: 8px 0 24px; }
.gsearch-group { padding: 14px 16px 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--m-muted); }
.gsearch-item { min-height: 56px; align-items: center; padding: 8px 16px; background: #fff; border-top: 1px solid var(--m-line-2); }
.gsearch-item-label { font-size: 15px; font-weight: 600; }
.gsearch-item-sub { font-size: 13px; }
.gsearch-head { display: flex; align-items: center; background: var(--m-ink); padding-right: 6px; }
.gsearch-head .gsearch-input { flex: 1; }
.gsearch-close { width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; }
/* Formularios de informe (Royalties, RH, GRA, TMR): mes | año a pares, el
 * resto a fila entera. */
.report-filter-row-top { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
.report-filter-row-top > * { grid-column: 1 / -1; min-width: 0; }
.report-filter-row-top > select[name^="mes_"],
.report-filter-row-top > select[name^="anio_"] { grid-column: span 1; }
.report-filter-row-top > select,
.report-filter-row-top > input:not([type="hidden"]) { min-height: 48px; }
.report-filter-row-top > button[type="submit"] { height: 48px; border-radius: 14px; font-size: 15px; letter-spacing: 0; text-transform: none; }
.report-filter-form { border-radius: 20px; padding: 16px; }

/* Formulario de fase (Nueva pista, Añadir fase): titular y % en una fila,
 * las fechas propias en otra; nada más ancho que la pantalla. */
.phase-form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.phase-form-row-rh { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.phase-form-row > label { min-width: 0; }
.phase-form-row > label:has(input[name$="_name"]),
.phase-form-row:not(.phase-form-row-rh) > label:only-child { grid-column: 1 / -1; }
.phase-form-holders { min-width: 0; padding: 12px; }
.phase-form input[type="text"],
.phase-form input[type="date"],
.phase-form select { width: 100%; min-width: 0; min-height: 48px; font-size: 16px; }
/* Accesible solo para lector de pantalla: sin ancho que se salga. */
.sr-only { width: 1px !important; height: 1px !important; }
/* Etiquetas de pivot en dos líneas si hace falta: el % de adelanto que va
 * al final del nombre no se corta. */
table.m-pivot-on > tbody > tr > .m-pv-label { white-space: normal; }

/* Textos que solo tienen sentido en escritorio (arrastrar, ⌘/Ctrl). */
[data-m-oculto] { display: none !important; }