/* DASHBOARD MENSUAL (función estrella de Estándar, 28/09/2026) · lo pinta panel-mensual.js.
   Colores de las series validados con el validador de paleta (dataviz): ingresos/gastos, claro y oscuro.
   Pasada de diseño (29/09/2026): tarjetas con cifra grande y ficha de variación, selector de mes propio,
   gráfico con rejilla, barras redondeadas y ficha de detalle, alertas con icono. Tokens de estilos.css. */
:root { --pm-ingreso: #5673FF; --pm-gasto: #B87A0A; --pm-sube: #F2B85C; --pm-baja: #8FA6FF;
  --pm-bien: #4ADE94; --pm-bien-fondo: rgba(74, 222, 148, 0.12); --pm-mal: #FF8A7E; --pm-mal-fondo: rgba(255, 138, 126, 0.13); }
:root[data-tema="claro"] { --pm-ingreso: #3358FF; --pm-gasto: #C98A12; --pm-sube: #8A5200; --pm-baja: #2440C4;
  --pm-bien: #13703F; --pm-bien-fondo: rgba(19, 112, 63, 0.10); --pm-mal: #B42318; --pm-mal-fondo: rgba(180, 35, 24, 0.09); }
@media (prefers-color-scheme: light) { :root:not([data-tema="oscuro"]) { --pm-ingreso: #3358FF; --pm-gasto: #C98A12; --pm-sube: #8A5200; --pm-baja: #2440C4;
  --pm-bien: #13703F; --pm-bien-fondo: rgba(19, 112, 63, 0.10); --pm-mal: #B42318; --pm-mal-fondo: rgba(180, 35, 24, 0.09); } }
:root { --pm-ico-sube: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 2.2 10 7.4H2z' fill='black'/%3E%3C/svg%3E");
  --pm-ico-alerta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.3 2.8 17.2A2 2 0 0 0 4.5 20h15a2 2 0 0 0 1.7-2.8L13.7 4.3a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4M12 16.8v.1'/%3E%3C/svg%3E"); }

.hoja-overlay.pm-hoja { width: min(740px, 100vw); }
.pm-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.pm-cabecera > .letra-pequena-clara { flex: 1 1 260px; }
.pm-nota { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--papel-tenue); }

/* ---------------------------------------------------------------- selector de mes */
.pm-mes-selector { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--superficie); border: 1px solid var(--costura); border-radius: 12px; box-shadow: var(--sombra-1); }
.pm-mes-paso, .pm-mes-boton { font: inherit; color: var(--papel); background: transparent; border: 0; border-radius: 9px; min-height: 36px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color .15s; }
.pm-mes-paso { width: 36px; color: var(--papel-apagado); }
.pm-mes-paso:hover:not(:disabled), .pm-mes-boton:hover { background: var(--costura); color: var(--papel); }
.pm-mes-paso:disabled { opacity: .35; cursor: default; }
.pm-mes-paso svg, .pm-mes-boton svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pm-mes-boton { gap: 8px; padding: 0 10px 0 12px; font-size: .9rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pm-mes-boton[aria-expanded="true"] { background: var(--costura); }
.pm-mes-boton[aria-expanded="true"] svg { transform: rotate(180deg); }
.pm-mes-boton svg { color: var(--papel-tenue); transition: transform .2s cubic-bezier(.16, 1, .3, 1); }
.pm-mes-menu { position: relative; }
.pm-meses-lista { position: absolute; right: 0; top: calc(100% + 8px); z-index: 6; min-width: 100%; width: max-content; max-width: min(300px, 86vw); max-height: 300px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: var(--superficie); border: 1px solid var(--costura-fuerte); border-radius: 12px; box-shadow: var(--sombra-3); transform-origin: 90% 0; }
.pm-meses-lista[hidden] { display: none; }
.pm-meses-lista:focus { outline: none; }
.pm-meses-lista:focus-visible { box-shadow: var(--sombra-3), var(--anillo-foco); }
.pm-meses-lista [role="option"] { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; padding: 0 10px; border-radius: 8px; font-size: .88rem; color: var(--papel-apagado); cursor: pointer; }
.pm-meses-lista [role="option"] svg { width: 14px; height: 14px; fill: none; stroke: var(--cobalto-claro); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.pm-meses-lista [aria-selected="true"] { color: var(--papel); font-weight: 600; }
.pm-meses-lista [aria-selected="true"] svg { visibility: visible; }
.pm-meses-lista .pm-activa { background: var(--costura); color: var(--papel); }

/* ---------------------------------------------------------------- tarjetas de cifras */
.pm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.pm-kpi { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 16px 18px 14px; border: 1px solid var(--costura); border-radius: var(--r-panel); background: var(--superficie); box-shadow: var(--sombra-1); transition: transform .22s cubic-bezier(.16, 1, .3, 1), box-shadow .22s; }
.pm-kpi:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.pm-kpi-etiqueta { order: 0; margin: 0; display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; color: var(--papel-apagado); }
.pm-kpi-etiqueta::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--papel-tenue); flex: none; }
.pm-kpi-ingresos .pm-kpi-etiqueta::before { background: var(--pm-ingreso); }
.pm-kpi-gastos .pm-kpi-etiqueta::before { background: var(--pm-gasto); }
.pm-kpi-beneficio .pm-kpi-etiqueta::before { background: var(--papel); }
.pm-kpi-valor { order: 1; margin: 10px 0 8px; font-size: clamp(1.45rem, 1.1rem + 1vw, 1.9rem); font-weight: 760; line-height: 1.05; letter-spacing: -0.025em; color: var(--papel); font-variant-numeric: tabular-nums; font-variation-settings: 'wdth' 106; overflow-wrap: anywhere; }
.pm-kpi-valor.pm-sin { font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--papel-apagado); }
.pm-kpi-detalle { order: 2; margin: 0; font-size: .8rem; line-height: 1.5; color: var(--papel-tenue); }
.pm-kpi .mv-spark { order: 3; margin: 12px 0 0; }
/* La variación, como ficha: el color dice hacia dónde, el signo va en el texto. */
.pm-delta { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 6px; margin-right: 2px; border-radius: 999px; font-size: .78rem; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--papel-apagado); background: var(--grafito-panel); }
.pm-delta::before { content: ''; width: 9px; height: 9px; background: currentColor; -webkit-mask: var(--pm-ico-sube) center / contain no-repeat; mask: var(--pm-ico-sube) center / contain no-repeat; }
.pm-delta.pm-igual::before { display: none; }
/* El COLOR dice si es bueno o malo para esa cifra (variacion.js); la FLECHA, hacia dónde va. */
.pm-delta.pm-bien { color: var(--pm-bien); background: var(--pm-bien-fondo); }
.pm-delta.pm-mal { color: var(--pm-mal); background: var(--pm-mal-fondo); }
.pm-delta.pm-neutro { color: var(--papel-apagado); background: var(--grafito-panel); }
.pm-delta.pm-baja::before { transform: rotate(180deg); }
.pm-delta.pm-neutro::before { opacity: .7; }

/* ---------------------------------------------------------------- secciones */
.pm-seccion { display: grid; gap: 10px; }
.pm-seccion h3 { margin: 8px 0 0; font-size: .95rem; font-weight: 700; letter-spacing: -0.01em; color: var(--papel); }
.pm-leyenda { display: flex; gap: 16px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-size: .82rem; color: var(--papel-apagado); }
.pm-leyenda li { display: inline-flex; align-items: center; gap: 7px; }
.pm-muestra { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.pm-muestra.ingreso, .pm-barra-ingreso { background: var(--pm-ingreso); fill: var(--pm-ingreso); }
.pm-muestra.gasto, .pm-barra-gasto { background: var(--pm-gasto); fill: var(--pm-gasto); }

/* ---------------------------------------------------------------- gráfico */
.pm-grafico-caja { position: relative; padding: 14px 14px 8px; border: 1px solid var(--costura); border-radius: var(--r-panel); background: var(--superficie); box-shadow: var(--sombra-1); }
.pm-grafico { width: 100%; height: auto; display: block; overflow: visible; }
.pm-grafico .pm-eje { stroke: var(--costura-fuerte); stroke-width: 1; }
.pm-grafico .pm-rejilla { stroke: var(--costura); stroke-width: 1; stroke-dasharray: 2 4; }
.pm-grafico text { fill: var(--papel-tenue); font-size: 13px; font-family: inherit; }
.pm-grafico text.pm-eje-valor { font-size: 12px; font-variant-numeric: tabular-nums; }
.pm-grafico text.pm-valor { fill: var(--papel); font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.pm-grafico g.pm-elegido text.pm-mes-nombre { fill: var(--papel); font-weight: 650; }
.pm-grafico rect.pm-hueco { fill: transparent; transition: fill .15s; }
.pm-grafico g.pm-mes { outline: none; }
.pm-grafico g.pm-abrible { cursor: pointer; }
.pm-grafico g.pm-mes.pm-activo rect.pm-hueco, .pm-grafico g.pm-mes:hover rect.pm-hueco { fill: var(--costura); }
.pm-grafico g.pm-mes:focus-visible rect.pm-hueco { fill: var(--costura); stroke: var(--cobalto-claro); stroke-width: 2; }
/* El mes elegido manda: los demás, un punto más suaves (con fill-opacity, que no pelea con el crecer). */
.pm-grafico g.pm-mes:not(.pm-elegido):not(.pm-activo) rect.pm-barra-ingreso, .pm-grafico g.pm-mes:not(.pm-elegido):not(.pm-activo) rect.pm-barra-gasto { fill-opacity: .62; }
.pm-tip { position: absolute; left: 0; top: 0; z-index: 4; min-width: 176px; padding: 10px 12px; pointer-events: none; background: var(--superficie); border: 1px solid var(--costura-fuerte); border-radius: 10px; box-shadow: var(--sombra-3); opacity: 0; transition: opacity .16s ease-out, transform .24s cubic-bezier(.16, 1, .3, 1); }
.pm-tip.pm-tip-quieto { transition: opacity .16s ease-out; }
.pm-tip.pm-tip-visible { opacity: 1; }
.pm-tip p { margin: 0; display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--papel-apagado); }
.pm-tip p + p { margin-top: 4px; }
.pm-tip p b { margin-left: auto; padding-left: 12px; color: var(--papel); font-weight: 650; font-variant-numeric: tabular-nums; }
.pm-tip .pm-tip-mes { display: block; margin-bottom: 6px; font-weight: 700; color: var(--papel); }
.pm-tip .pm-tip-mes::first-letter { text-transform: uppercase; }

/* ---------------------------------------------------------------- listas con barra */
.pm-lista { display: grid; gap: 4px; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--costura); border-radius: var(--r-panel); background: var(--superficie); box-shadow: var(--sombra-1); }
.pm-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; padding: 8px 10px; border-radius: 8px; font-size: .88rem; color: var(--papel); transition: background-color .15s; }
.pm-fila:hover { background: var(--costura); }
.pm-fila .pm-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.pm-fila .pm-cifra { font-variant-numeric: tabular-nums; font-weight: 650; }
.pm-fila .pm-sub { grid-column: 1 / -1; font-size: .78rem; color: var(--papel-tenue); }
/* Las barras se estiran en horizontal (preserveAspectRatio=none): sin rx (se deformaría) y la pista
   redondeada la hace el propio SVG recortado. */
.pm-fila svg { grid-column: 1 / -1; width: 100%; height: 6px; display: block; border-radius: 999px; overflow: hidden; }
.pm-fila svg rect { rx: 0; ry: 0; }
.pm-fila svg .pm-pista { fill: var(--grafito-panel); }

/* ---------------------------------------------------------------- alertas */
.pm-alertas { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pm-alertas li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; font-size: .88rem; line-height: 1.5; color: var(--papel); border: 1px solid color-mix(in srgb, var(--ambar) 38%, transparent); border-radius: var(--r-panel); background: var(--ambar-tenue); }
.pm-alertas li::before { content: ''; flex: none; width: 18px; height: 18px; margin-top: 1px; background: var(--ambar-texto); -webkit-mask: var(--pm-ico-alerta) center / contain no-repeat; mask: var(--pm-ico-alerta) center / contain no-repeat; }

.pm-previa { display: grid; gap: 8px; padding: 14px 16px; border: 1px dashed var(--cobalto-claro); border-radius: var(--r-panel); background: var(--cobalto-tenue); }
.pm-previa p { margin: 0; font-size: .88rem; color: var(--papel); }
.pm-bloqueado { position: relative; display: grid; gap: 10px; padding: 16px; border: 1px solid var(--costura); border-radius: var(--r-panel); background: var(--superficie); box-shadow: var(--sombra-1); overflow: hidden; }
.pm-bloqueado .pm-fantasma { display: grid; gap: 8px; filter: blur(3px); opacity: .55; }
.pm-bloqueado .pm-fantasma span { display: block; height: 12px; border-radius: 3px; background: var(--costura-fuerte); }
.pm-bloqueado .pm-fantasma span:nth-child(2) { width: 80%; } .pm-bloqueado .pm-fantasma span:nth-child(3) { width: 62%; } .pm-bloqueado .pm-fantasma span:nth-child(4) { width: 45%; }
.pm-bloqueado-texto { margin: 0; font-size: .9rem; font-weight: 600; color: var(--papel); }

/* ---------------------------------------------------------------- tabla */
.pm-tabla { width: 100%; border-collapse: collapse; font-size: .84rem; font-variant-numeric: tabular-nums; margin-top: 6px; }
.pm-tabla th, .pm-tabla td { padding: 9px 8px; text-align: right; border-bottom: 1px solid var(--costura); color: var(--papel-apagado); }
.pm-tabla thead th { font-size: .76rem; font-weight: 650; color: var(--papel-tenue); border-bottom-color: var(--costura-fuerte); }
.pm-tabla tbody tr:hover td { background: var(--costura); color: var(--papel); }
.pm-tabla tbody tr:last-child td { border-bottom: 0; }
.pm-tabla th:first-child, .pm-tabla td:first-child { text-align: left; }
.pm-detalles summary { cursor: pointer; font-size: .84rem; font-weight: 550; color: var(--cobalto-claro); min-height: 36px; display: inline-flex; align-items: center; border-radius: 6px; }
.pm-detalles summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.pm-pie { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--costura); font-size: .8rem; color: var(--papel-tenue); }
.pm-pie p, .pm-pie ul { margin: 0; }
.pm-pie ul { padding-left: 18px; }
.pm-acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.pm-acciones a.pulsador { text-decoration: none; display: inline-flex; align-items: center; }
.pm-acciones input { font: inherit; min-height: 40px; padding: 0 10px; flex: 1 1 180px; color: var(--papel); background: var(--superficie); border: 1px solid var(--costura-fuerte); border-radius: var(--r-control); }
.pm-tabla select { font: inherit; font-size: .85rem; min-height: 36px; max-width: 100%; color: var(--papel); background: var(--superficie); border: 1px solid var(--costura-fuerte); border-radius: var(--r-control); }

/* ---------------------------------------------------------------- pestañas (segmento: estilos.css) */
@media (max-width: 640px) {
  .pm-kpis { grid-template-columns: 1fr; }
  .pm-cabecera { align-items: stretch; }
  .pm-mes-selector { width: 100%; justify-content: space-between; }
  .pm-mes-menu { flex: 1; display: flex; justify-content: center; }
  .pm-mes-boton { width: 100%; justify-content: center; }
  .pm-meses-lista { left: 0; right: 0; margin-inline: auto; }
  .pm-grafico-caja { padding: 10px 6px 4px; }
  .nav-boton#abrir-panel-mensual::before { content: '▦'; font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pm-kpi, .pm-tip, .pm-mes-boton svg, .pm-fila, .pm-grafico rect.pm-hueco { transition: none; }
  .pm-kpi:hover { transform: none; }
}