/* Personalizar el Panel, el Resumen y el Inicio (tarjetas.js) y mosaico sin huecos (mosaico.js). */
/* Personalizar: tarjetas que se arrastran, se mueven con flechas o se ocultan */
.tj-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
.tj-grid > .tj-ancho {
  grid-column: 1 / -1;
}
@media (max-width: 900px) {
  .tj-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.tj {
  border: 2px dashed var(--accent);
  border-radius: var(--r);
  padding: 6px;
  background: var(--accent-soft);
  cursor: grab;
  min-width: 0;
}
.tj > :not(.tj-ctl) {
  pointer-events: none;
}
.tj-ctl {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.tj-asa {
  color: var(--muted);
  font-size: 16px;
}
.tj-nombre {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tj-oculta {
  border-color: var(--line);
  background: var(--surface-2);
}
.tj-oculta > :not(.tj-ctl) {
  opacity: 0.35;
}
.tj.arrastrando {
  opacity: 0.5;
}
.tj.sobre {
  border-style: solid;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.tj-aviso {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
html.movil .tj-grid {
  grid-template-columns: minmax(0, 1fr);
}
html.movil .tj {
  cursor: default;
}
/* Al personalizar, las cifras se hacen un poco más anchas para que quepan los controles */
.kpis:has(> .tj) {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.tj-ctl .btn {
  flex: none;
}
html.movil .kpis:has(> .tj) {
  grid-template-columns: minmax(0, 1fr);
}
/* Bloque a todo el ancho dentro de las columnas (p. ej. el gráfico del Resumen) */
.cols > .tj-ancho {
  grid-column: 1 / -1;
}
/* Cifras en el móvil (2 columnas): si queda una sola en la última fila, ocupa todo el ancho para no dejar hueco */
html.movil .kpis > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
/* Mosaico (mosaico.js): los bloques se apilan sin dejar huecos bajo los más bajos */
.mosaico {
  grid-auto-rows: 4px;
  row-gap: 0;
  align-items: start;
}
@media print {
  .mosaico {
    grid-auto-rows: auto;
    row-gap: 20px;
  }
  .mosaico > * {
    grid-row-end: auto !important;
  }
}
/* En los bloques estrechos de las rejillas, las etiquetas pasan debajo del texto para no pisarlo */
.mosaico .sec {
  container-type: inline-size;
}
@container (max-width: 640px) {
  .item {
    grid-template-columns: 5.6rem minmax(0, 1fr);
  }
  .item > .side {
    grid-column: 2;
    justify-content: flex-start;
  }
}
.main b {
  overflow-wrap: anywhere;
}