/* Torta del resultado final.
   Colores por eje, validados sobre --surface en modo oscuro: contraste 3:1 y separación para daltonismo. */
:root { --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70; --serie-4: #c98500; --serie-5: #d55181; }

.pie { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.pie-figure { position: relative; width: 100%; max-width: 260px; aspect-ratio: 1; }
.pie-svg { width: 100%; height: 100%; display: block; overflow: visible; }

.pie-slice { stroke: var(--surface); stroke-width: 2; stroke-linejoin: round; cursor: pointer; outline: none; transition: opacity .15s, transform .15s; transform-origin: 100px 100px; }
.pie.is-hover .pie-slice:not(.is-active) { opacity: .35; }
.pie-slice.is-active { transform: scale(1.03); }
.pie-slice:focus-visible { stroke: var(--ink); }

/* Número dentro de la porción: tinta oscura, entre 4,9:1 y 6,3:1 sobre los cinco colores (el blanco no llega a 4,5:1) */
.pie-label { fill: #0A0D17; font-family: var(--font); font-size: 13px; font-weight: 700; pointer-events: none; transition: opacity .15s; }
.pie.is-hover .pie-label { opacity: .85; }

.pie-tip { position: absolute; transform: translate(-50%, calc(-100% - 12px)); background: #0B0E1A; border: 1px solid var(--line); color: var(--ink); font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); z-index: 2; }

.pie-legend { list-style: none; width: 100%; display: grid; gap: 2px; margin: 0; padding: 0; }
.pie-row { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; font-size: 15px; transition: background .15s, opacity .15s; }
.pie-row.is-top { font-weight: 700; }
.pie-row.is-active { background: rgba(255, 255, 255, .06); }
.pie.is-hover .pie-row:not(.is-active) { opacity: .55; }
.pie-swatch { width: 12px; height: 12px; border-radius: 4px; }
.pie-name { color: var(--ink); }
.pie-val { color: var(--muted); font-variant-numeric: tabular-nums; }
.pie-row.is-top .pie-val { color: var(--ink); }