/* Fold · LAS HOJAS «EN CALMA» (PC-C, 06/10/2026) · el DASHBOARD (#overlay-panel-mensual; lo pintan panel-mensual.js,
   informe-semanal.js y sedes.js). Encargo de David vía PC-A: «quiero que el programa sea visual, intuitivo y profesional».
   Reglas: docs/context/interfaz-calma.md. Sin paleta nueva: los tokens de estilos.css, la escala de calma.css
   (--calma-t-*, --calma-alto, --calma-bien) y las series del dashboard de panel-mensual.css (--pm-ingreso, --pm-gasto).
   Lo nuevo lleva el prefijo hj-. Se carga después de panel-mensual.css y movimiento.css (index.html, justo antes de
   calma.css, que no toca nada del Dashboard): por eso retoca los .pm-… sin «!important».
   Qué cambia, en una línea: arriba el resultado del mes en grande con su comparación y de dónde sale; luego lo que ha
   cambiado, la evolución y el desglose; abajo cómo se ha calculado. Sin candados, sin scroll dentro, tablas que en el
   móvil son fichas, :active y foco en todo lo que se pulsa. */

/* ==================================================================== 0 · TOKENS
   El ámbar de los gastos en el tema CLARO (#C98A12) daba 2,95:1 sobre la tarjeta blanca y 2,80:1 sobre la hoja: por debajo
   del 3:1 de WCAG 1.4.11 para gráficos (y WARN en el validador de paleta de dataviz). #B57A0C da 3,65:1 y 3,47:1, y sigue
   separándose del cobalto con daltonismo (ΔE 34 protan). En oscuro no cambia (#B87A0A ya daba 4,88:1). */
:root[data-tema="claro"] { --pm-gasto: #B57A0C; }
@media (prefers-color-scheme: light) { :root:not([data-tema="oscuro"]) { --pm-gasto: #B57A0C; } }
:root {
  --hj-ico-archivo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3.5H7.5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3.5V8h4.5M9 13h6M9 16.5h4'/%3E%3C/svg%3E");
  --hj-ico-visto: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.7 2.7L16 9.8'/%3E%3C/svg%3E");
  --hj-ico-mas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E");
  --hj-ico-grafico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 20h17'/%3E%3Crect x='5.5' y='12' width='3' height='8' rx='1'/%3E%3Crect x='10.5' y='7' width='3' height='13' rx='1'/%3E%3Crect x='15.5' y='10' width='3' height='10' rx='1'/%3E%3C/svg%3E");
  --hj-ico-correo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='2'/%3E%3Cpath d='M4 7l8 6 8-6'/%3E%3C/svg%3E");
}

/* ==================================================================== 1 · LA HOJA
   Un poco más ancha y con más aire entre bloques; las pestañas que el plan no trae ni se ven (informe-semanal.js). */
.hoja-overlay.pm-hoja { width: min(760px, 100vw); }
#overlay-panel-mensual .cuerpo-overlay { gap: 28px; padding: 20px 24px 32px; }
.pm-pestanas[hidden] { display: none; }
.pm-pestanas button:active { transform: scale(.975); }
/* Una fila de mandos arriba, que manda sobre todo lo de abajo: el mes. */
.hj-barra { justify-content: flex-start; }
.pm-mes-paso:active:not(:disabled), .pm-mes-boton:active { transform: scale(.96); background: var(--costura-fuerte); }
.pm-meses-lista { max-height: 500px; }   /* los 13 meses caben enteros: sin scroll dentro del menú */
.pm-meses-lista [role="option"]:active { background: var(--costura-fuerte); }
@media (pointer: coarse) { .pm-mes-paso, .pm-mes-boton, .pm-meses-lista [role="option"] { min-height: 44px; } .pm-mes-paso { width: 44px; } }

/* ==================================================================== 2 · EL RESULTADO DEL MES
   Una sola jerarquía: la cifra principal (el beneficio) ocupa la fila entera y es la más grande de la hoja; a su lado,
   de lo que ha entrado, lo que se ha ido en gastos y lo que queda. Debajo, ingresos y gastos, cada uno con su
   comparación y de dónde sale (la frase y el archivo). Las tarjetas no se levantan al pasar: no se pulsan. */
.hj-kpis { display: flex; flex-wrap: wrap; gap: 12px; }
.hj-kpis > .pm-kpi { flex: 1 1 200px; }
.hj-kpis .pm-kpi { padding: 16px 18px; }
.hj-kpis .pm-kpi:hover { transform: none; box-shadow: var(--sombra-1); }
.hj-kpi-cifras { display: flex; flex-direction: column; min-width: 0; }
.hj-kpis .pm-kpi-etiqueta { font-size: var(--calma-t-menor); font-weight: 600; }
.hj-kpis .pm-kpi-valor { margin: 8px 0 8px; font-size: 1.6rem; }
.hj-kpis .pm-kpi-detalle { font-size: var(--calma-t-nota); color: var(--papel-apagado); }
.hj-kpis .pm-kpi .mv-spark { order: 3; height: 28px; margin: 10px 0 0; }
.hj-fuente { order: 4; display: flex; flex-direction: column; gap: 3px; margin: 10px 0 0; font-size: var(--calma-t-nota); line-height: 1.45; color: var(--papel-tenue); }
/* P19: «De dónde sale esto» (porque.js) va al final de la tarjeta, debajo de su fuente, y su panel justo detrás. P19b: también en
   las tarjetas del informe semanal (sin .hj-kpi-cifras: el enlace salía entre el título y la cifra, visto en captura). */
.hj-kpi-cifras > .fp-linea, .hj-kpi-cifras > .fp-panel, .hj-kpis .pm-kpi > .fp-linea, .hj-kpis .pm-kpi > .fp-panel { order: 5; }
.hj-archivo { display: flex; align-items: flex-start; gap: 6px; min-width: 0; color: var(--papel-apagado); overflow-wrap: anywhere; }
.hj-archivo::before { content: ''; flex: none; width: 13px; height: 13px; margin-top: 2px; background: currentColor; -webkit-mask: var(--hj-ico-archivo) center / contain no-repeat; mask: var(--hj-ico-archivo) center / contain no-repeat; }
.hj-kpi-sin { background: transparent; box-shadow: none; border-style: dashed; }
.hj-kpi-sin .pm-kpi-valor.pm-sin { margin: 8px 0 4px; font-size: var(--calma-t-texto); }
/* La principal */
.hj-kpis .hj-kpi-principal { flex-basis: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 18px 36px; padding: 22px 24px; }
.hj-kpi-principal .pm-kpi-valor { margin: 6px 0 10px; font-size: clamp(2.3rem, 1.7rem + 1.6vw, 3rem); font-weight: 760; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: normal; }
.hj-kpi-principal .pm-kpi-detalle { font-size: var(--calma-t-menor); }
.hj-kpi-principal .mv-spark { max-width: 240px; }
.hj-kpi-principal:not(:has(.hj-reparto)) { grid-template-columns: minmax(0, 1fr); }
/* De lo que ha entrado: una barra (los ingresos enteros) partida en gastos y beneficio, con 3 px de aire entre los dos. */
.hj-reparto { display: grid; gap: 10px; min-width: 0; margin: 0; }
.hj-reparto-titulo { font-size: var(--calma-t-menor); font-weight: 600; color: var(--papel-apagado); }
.hj-reparto-barra { display: block; width: 100%; height: 16px; border-radius: 5px; overflow: hidden; }
.hj-seg-gasto { fill: var(--pm-gasto); background: var(--pm-gasto); }
.hj-seg-beneficio, .hj-seg-ingreso { fill: var(--pm-ingreso); background: var(--pm-ingreso); }
.hj-seg-perdida { fill: var(--pm-mal); background: var(--pm-mal); }
.hj-reparto-leyenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: var(--calma-t-nota); color: var(--papel-apagado); }
.hj-reparto-leyenda li { display: inline-flex; align-items: center; gap: 7px; }
.hj-muestra { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
/* LO COBRADO al lado de los ingresos (PC-C, 07/10/2026, F2): el mismo cobalto de los ingresos, pero hueco (borde de 1,5 px
   y un velo del 18 %): es parte de lo facturado, no otra cifra que se sume. */
.pm-kpi-cobrado .pm-kpi-etiqueta::before { background: color-mix(in srgb, var(--pm-ingreso) 18%, transparent); box-shadow: inset 0 0 0 1.5px var(--pm-ingreso); }
/* Las notas de cómo se cuentan las cifras (lo que no se suma para no contarlo dos veces), pegadas a las tarjetas. */
.hj-notas { display: grid; gap: 6px; margin-top: -14px; }
.hj-notas .pm-nota { font-size: var(--calma-t-nota); }

/* ==================================================================== 3 · LAS SECCIONES */
/* Todos los títulos de la hoja (también los de Semanal, Sedes, Gestoría y Ficha de relevo), con el mismo tamaño y peso. */
#overlay-panel-mensual .pm-seccion { gap: 12px; }
#overlay-panel-mensual .cuerpo-overlay h3 { margin: 0; font-size: var(--calma-t-texto); font-weight: 650; letter-spacing: -0.005em; color: var(--papel); }
.hj-seccion-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
#overlay-panel-mensual .pm-nota { font-size: var(--calma-t-nota); }
/* Alertas: lo único que pide atención en la hoja. Sin alertas, una línea tranquila. */
#overlay-panel-mensual .pm-alertas li { padding: 12px 14px; font-size: var(--calma-t-menor); }
/* El texto de un aviso (los del informe semanal traen un párrafo largo) se parte dentro de su caja: sin esto, en 500 px
   empujaba la hoja 28 px a la derecha (medido con herramientas/capturar-dashboard.js). */
#overlay-panel-mensual .pm-alertas li > span { min-width: 0; overflow-wrap: anywhere; }
.hj-sin-alertas { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--calma-t-menor); color: var(--papel-apagado); }
.hj-sin-alertas::before { content: ''; flex: none; width: 18px; height: 18px; background: var(--calma-bien); -webkit-mask: var(--hj-ico-visto) center / contain no-repeat; mask: var(--hj-ico-visto) center / contain no-repeat; }

/* ==================================================================== 4 · EL GRÁFICO
   Rejilla y eje de línea fina y continua (la discontinua se lee como «previsión»), la leyenda dentro de la caja, barras
   de 24 px como mucho con la punta redondeada y 2 px entre la de ingresos y la de gastos. */
#overlay-panel-mensual .pm-grafico-caja { display: grid; gap: 8px; padding: 14px 14px 6px; }
#overlay-panel-mensual .pm-grafico-caja .pm-leyenda { padding-left: 4px; }
.pm-grafico .pm-rejilla { stroke-dasharray: none; stroke: var(--costura); }
.pm-grafico .pm-eje { stroke: var(--costura-fuerte); }
.pm-grafico g.pm-abrible:active rect.pm-hueco { fill: var(--costura-fuerte); }
.pm-detalles summary { min-height: 40px; padding: 0 4px; }
.pm-detalles summary:active { transform: scale(.98); }
@media (pointer: coarse) { .pm-detalles summary { min-height: 44px; } }

/* ==================================================================== 5 · LISTAS CON BARRA (desglose)
   Una fila por cosa: el nombre y su importe arriba; debajo, la barra y el cambio frente al mes anterior. */
#overlay-panel-mensual .pm-lista { gap: 2px; }
#overlay-panel-mensual .pm-fila { padding: 10px 12px; }
/* La segunda columna tiene el MISMO ancho en todas las filas: así la pista de la barra mide lo mismo en todas y las
   longitudes se pueden comparar (con «auto», una fila con «+100,3 %» tenía la pista más corta y su barra mentía). */
#overlay-panel-mensual .pm-fila:has(> svg) { grid-template-columns: minmax(0, 1fr) 10.5rem; grid-template-areas: "nombre cifra" "barra sub"; align-items: center; gap: 6px 14px; }
#overlay-panel-mensual .pm-fila:has(> svg) .pm-nombre { grid-area: nombre; }
#overlay-panel-mensual .pm-fila:has(> svg) .pm-cifra { grid-area: cifra; text-align: right; }
#overlay-panel-mensual .pm-fila:has(> svg) > svg { grid-area: barra; height: 8px; }
#overlay-panel-mensual .pm-fila:has(> svg) .pm-sub { grid-area: sub; justify-self: end; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
#overlay-panel-mensual .pm-fila .pm-delta { font-size: .74rem; }
/* La pista de la barra se ve también en oscuro (antes, #181B21 sobre #16191F: no se veía dónde acababa el 100 %). */
#overlay-panel-mensual .pm-fila svg .pm-pista { fill: var(--costura); }
/* Lo que no se puede sacar de vuestros archivos, junto y al final, diciendo qué haría falta. */
.hj-faltan ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hj-faltan li { position: relative; padding: 12px 14px 12px 42px; font-size: var(--calma-t-menor); line-height: 1.5; color: var(--papel-apagado); border: 1px dashed var(--costura-fuerte); border-radius: var(--r-panel); }
.hj-faltan li::before { content: ''; position: absolute; left: 14px; top: 13px; width: 18px; height: 18px; background: var(--papel-tenue); -webkit-mask: var(--hj-ico-mas) center / contain no-repeat; mask: var(--hj-ico-mas) center / contain no-repeat; }

/* ==================================================================== 6 · CÓMO SE HA CALCULADO, EL PLAN Y EL CORREO */
#overlay-panel-mensual .hj-calculo { gap: 8px; padding-top: 18px; font-size: var(--calma-t-nota); line-height: 1.5; }
#overlay-panel-mensual .hj-calculo > h3 { margin: 0 0 2px; font-size: var(--calma-t-menor); font-weight: 650; color: var(--papel-apagado); }
#overlay-panel-mensual .hj-origen { display: grid; gap: 4px; padding: 0; list-style: none; }
.hj-origen li { display: flex; align-items: flex-start; gap: 7px; overflow-wrap: anywhere; }
.hj-origen li::before { content: ''; flex: none; width: 13px; height: 13px; margin-top: 3px; background: currentColor; -webkit-mask: var(--hj-ico-archivo) center / contain no-repeat; mask: var(--hj-ico-archivo) center / contain no-repeat; }
.hj-ajuste { display: grid; gap: 6px; margin: 4px 0; padding: 12px 14px; font-size: var(--calma-t-menor); color: var(--papel-apagado); background: var(--superficie); border: 1px solid var(--costura); border-radius: var(--r-panel); }
.hj-ajuste label { font-weight: 650; color: var(--papel); }
.hj-ajuste p { margin: 0; font-size: var(--calma-t-nota); }
/* Los desplegables de la hoja (el ajuste de la fuente; el mes y la sede de Sedes y Gestoría), con la misma altura y borde
   que los demás controles: antes, los de Sedes y Gestoría salían con el aspecto del sistema y de 20 px de alto. */
#overlay-panel-mensual .cuerpo-overlay select { font: inherit; font-size: var(--calma-t-menor); min-height: var(--calma-alto); max-width: 100%; padding: 0 10px; color: var(--papel); background: var(--superficie); border: 1px solid var(--costura-fuerte); border-radius: var(--r-control); cursor: pointer; }
#vista-sedes .pm-cabecera, #vista-gestoria .pm-cabecera { justify-content: flex-start; }
#sd-panel { display: grid; gap: 12px; }
#vista-sedes .pm-cabecera select, #vista-gestoria .pm-cabecera select { flex: 1 1 180px; min-width: 0; }
@media (pointer: coarse) { #overlay-panel-mensual .cuerpo-overlay select { min-height: 44px; } }
/* Lo que el plan no trae: UNA línea neutra que lleva a la pantalla del plan. Ni candado, ni borroso, ni color de aviso. */
.hj-plan { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 12px 0; font-size: var(--calma-t-menor); line-height: 1.5; color: var(--papel-apagado); border-top: 1px solid var(--costura); }
.hj-plan .calma-texto { padding: 0 6px; margin-left: -6px; }
.hj-acciones { display: flex; justify-content: flex-start; }
.hj-boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: var(--calma-t-menor); font-weight: 600; min-height: var(--calma-alto); padding: 0 16px; color: var(--papel); background: var(--superficie); border: 1px solid var(--costura-fuerte); border-radius: var(--r-control); cursor: pointer; transition: background-color .15s, border-color .15s, transform .12s; }
.hj-boton::before { content: ''; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--hj-ico-correo) center / contain no-repeat; mask: var(--hj-ico-correo) center / contain no-repeat; }
.hj-boton:hover { background: var(--superficie-hover); border-color: var(--papel-tenue); }
.hj-boton:active:not(:disabled) { transform: scale(.975); background: var(--grafito-panel); }
.hj-boton:disabled { opacity: .55; cursor: default; }
@media (pointer: coarse) { .hj-boton { min-height: 44px; } }

/* ==================================================================== 7 · SIN CIFRAS: un solo estado vacío que dice qué hacer */
.hj-vacio { display: grid; justify-items: start; gap: 10px; padding: 28px 24px 26px; background: var(--superficie); border: 1px dashed var(--costura-fuerte); border-radius: var(--r-panel); }
.hj-vacio::before { content: ''; width: 40px; height: 40px; background: var(--papel-tenue); -webkit-mask: var(--hj-ico-grafico) center / contain no-repeat; mask: var(--hj-ico-grafico) center / contain no-repeat; }
.hj-vacio-titulo { margin: 0; font-size: var(--calma-t-titulo); font-weight: 700; letter-spacing: -0.01em; color: var(--papel); }
.hj-vacio-titulo::first-letter { text-transform: uppercase; }
.hj-vacio-texto { margin: 0; max-width: 54ch; font-size: .95rem; line-height: 1.55; color: var(--papel-apagado); }
.hj-vacio-accion { margin: 6px 0 0; }

/* ==================================================================== 8 · TABLAS QUE EN EL MÓVIL SON FICHAS
   La tabla de la evolución y las de sedes, gestoría y ficha de relevo: en estrecho no se comprimen, cada fila es una
   ficha con el título de cada dato delante (data-etq). Las cabeceras siguen ahí para un lector de pantalla. */
@media (max-width: 560px) {
  .hj-tabla-fichas, .hj-tabla-fichas tbody, .hj-tabla-fichas tr, .hj-tabla-fichas td { display: block; width: 100%; }
  .hj-tabla-fichas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hj-tabla-fichas tr { margin: 0 0 8px; padding: 10px 14px; background: var(--superficie); border: 1px solid var(--costura); border-radius: 10px; }
  .hj-tabla-fichas tbody tr:hover td { background: transparent; }
  .hj-tabla-fichas td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; text-align: right; color: var(--papel); border: 0; }
  .hj-tabla-fichas td:first-child { display: block; padding-bottom: 6px; font-weight: 650; text-align: left; color: var(--papel); }
  .hj-tabla-fichas td[data-etq]::before { content: attr(data-etq); flex: none; font-weight: 400; text-align: left; color: var(--papel-tenue); }
}

/* ==================================================================== 9 · ESTRECHO (500 px): todo con el pulgar */
@media (max-width: 640px) {
  #overlay-panel-mensual .cuerpo-overlay { gap: 24px; padding: 16px 16px 28px; }
  .hj-kpis .hj-kpi-principal { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 18px; }
  .hj-kpis .pm-kpi:not(.hj-kpi-principal) { padding: 14px; }
  .hj-kpis .pm-kpi:not(.hj-kpi-principal) .pm-kpi-valor { font-size: 1.32rem; }
  .hj-kpi-principal .mv-spark { max-width: none; }
  .hj-acciones .hj-boton { width: 100%; min-height: 48px; }
  .hj-vacio { padding: 22px 18px; }
  .hj-vacio-accion, .hj-vacio-accion .pulsador { width: 100%; }
}
@media (max-width: 520px) {
  #overlay-panel-mensual .pm-fila:has(> svg) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nombre cifra" "barra barra" "sub sub"; }
  #overlay-panel-mensual .pm-fila:has(> svg) .pm-sub { justify-self: start; }
}
@media (max-width: 440px) { .hj-kpis > .pm-kpi { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .pm-pestanas button:active, .pm-mes-paso:active, .pm-mes-boton:active, .pm-detalles summary:active, .hj-boton:active { transform: none; }
}