/* ARMALL · widgets del panel: gráfico, ranking, bitácora, matriz y paginación. */

.chart { display: flex; align-items: flex-end; gap: var(--sp-2); height: 180px; }
.chart__col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    gap: 4px; height: 100%; }
.chart__value { font-size: 10px; color: var(--text-muted); }
.chart__bar { width: 100%; min-height: 3px; border-radius: 6px 6px 0 0;
    background: linear-gradient(180deg, var(--champagne), var(--burgundy)); }
.chart__label { font-size: var(--fs-xs); color: var(--text-muted); }

.rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.rank__row { display: grid; grid-template-columns: 12px minmax(150px, 1fr) minmax(80px, 2fr) auto;
    gap: var(--sp-3); align-items: center; }
.rank__dot { width: 12px; height: 12px; border-radius: 50%; }
.rank__name { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); }
.rank__bar { height: 8px; border-radius: var(--radius-pill); background: var(--surface-raised); overflow: hidden; }
.rank__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--burgundy), var(--champagne)); }
.rank__value { font-size: var(--fs-sm); font-weight: 600; }

.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.timeline__item { display: flex; gap: var(--sp-3); align-items: flex-start; }
.timeline__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-pill);
    background: var(--surface-raised); border: 1px solid var(--line); color: var(--champagne); flex: 0 0 auto; }
.timeline__body { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); min-width: 0; }
.timeline__body em { font-size: var(--fs-xs); }

.role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3); }
.role-grid__item { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-3);
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.role-grid__item--current { border-color: var(--champagne); }
.role-grid__item strong { font-size: var(--fs-lg); }
.identity { display: flex; align-items: center; gap: var(--sp-4); }
.identity strong { display: block; }
.roles-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4); }
.role-card { min-height: 100%; }

.siblings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.siblings__item { display: flex; align-items: center; gap: var(--sp-3); justify-content: space-between;
    padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.siblings__item--current { border-color: var(--champagne); background: var(--champagne-soft); }

.switch { width: 44px; height: 24px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong);
    background: var(--surface-raised); position: relative; cursor: pointer; }
.switch span { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--text-muted); transition: all 0.15s ease; }
.switch--on { background: var(--champagne-soft); border-color: var(--champagne); }
.switch--on span { left: 22px; background: var(--champagne); }
.dot { color: var(--text-muted); font-size: var(--fs-xs); }
.dot--on { color: var(--ok); font-weight: 600; }

.pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    flex-wrap: wrap; color: var(--text-muted); font-size: var(--fs-sm); }
.pagination__links { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.pagination__link { padding: 6px var(--sp-3); border-radius: var(--radius-sm); border: 1px solid var(--line);
    color: var(--text-soft); display: inline-flex; align-items: center; gap: 4px; }
.pagination__link--current { background: var(--champagne-soft); border-color: var(--champagne);
    color: var(--text); font-weight: 600; }
.pagination__link--disabled { opacity: 0.5; }
.pagination__link:last-child .icon { transform: rotate(180deg); }
.pagination__empty { color: var(--text-muted); font-size: var(--fs-sm); }