/* Elia · estilo común, el mismo que la app de Jaime (Finanzas):
   fondo casi blanco, tarjetas blancas de borde fino, cifras grandes, Century Gothic,
   blanco/negro/grises. Cuatro temas en Ajustes → Apariencia (Noche por defecto, Blanco, Arena y Pizarra). */
@font-face { font-family: "aurahome Century Gothic"; src: local("Century Gothic"), local("CenturyGothic"); font-weight: 400; font-display: swap; }
@font-face { font-family: "aurahome Century Gothic"; src: local("Century Gothic Bold"), local("CenturyGothic-Bold"); font-weight: 400; font-display: swap; }
/* Letras finas en toda la app, en línea con el trazo del logo (Jaime, 30/09/2026): sin negritas; la jerarquía la dan
   el tamaño, el gris y el espaciado de letras. Se conservan las mismas tipografías. */
h1, h2, h3, h4, h5, h6, b, strong, th, legend, summary, dt, label, button, .btn { font-weight: 400; }

/* ---------- Temas (Ajustes → Apariencia, web/temas.js): Noche (por defecto), Blanco, Arena y Pizarra ----------
   Cada tema define el juego completo: fondo, hoja/tarjeta (superficie, suave), texto, grises, líneas, acento,
   estados (peligro/ok/aviso y sus colores), insignias con número blanco (--*-insignia), selección, barra de
   desplazamiento, sombra y ondas del fondo. Tablas, chips, iconos, gráficas, el logo (currentColor) y la pantalla de
   carga salen de estas variables. Contraste AA comprobado en pruebas/test_temas.py (texto ≥ 7:1, gris y colores
   ≥ 4,5:1, gris2 ≥ 3:1 contra fondo, superficie y suave; acento-texto y el blanco de las insignias ≥ 4,5:1).
   [data-muestra="…"] pinta las tarjetas de muestra de Apariencia con los colores de cada tema. */
:root {
  --radio: 16px; --radio-p: 10px; --menu: 216px;
  --letra: "aurahome Century Gothic", "Century Gothic", "Questrial", "Avenir Next", "Futura", system-ui, sans-serif;
}
/* Blanco: el claro de siempre (también lo que se imprime) */
:root, [data-muestra="blanco"] {
  --fondo: #fafafa; --superficie: #ffffff; --suave: #f5f5f5; --borde: #e7e7e7; --linea: #e0e0e0; --texto: #171717;
  --gris: #6b6b6b; --gris2: #858585; --acento: #161616; --acento-texto: #ffffff; --peligro: #b3261e; --ok: #1e7b34;
  --aviso: #8a5a00; --azul: #1f5fbf; --verde: #1e7b34; --amarillo: #8a6a00; --naranja: #b4500e; --rojo: #b3261e;
  --v-turquesa: #0c7479; --v-morado: #7046b3; --rojo-insignia: #b3261e; --verde-insignia: #1e7b34; --azul-insignia: #1f5fbf; --amarillo-insignia: #856500;
  --naranja-insignia: #b4500e; --seleccion: rgb(23 23 23 / .14); --barra-scroll: #c9c9c9; --sombra: rgb(15 17 20 / .12); --fondo-ondas: .045;
  color-scheme: light;
}
/* Noche: negro profundo y grafito, letras marfil (data-theme="dark"; también Automático con el sistema en oscuro) */
:root[data-theme="dark"], [data-muestra="noche"] {
  --fondo: #0e0e10; --superficie: #161618; --suave: #1d1d20; --borde: #2a2a2e; --linea: #303035; --texto: #ece6da;
  --gris: #a39d92; --gris2: #7f7a72; --acento: #ece6da; --acento-texto: #0e0e10; --peligro: #ec8a7f; --ok: #7cc195;
  --aviso: #d9b866; --azul: #93b1e4; --verde: #7cc195; --amarillo: #d9b866; --naranja: #e3a173; --rojo: #ec8a7f;
  --v-turquesa: #6cc2c4; --v-morado: #bba6ec; --rojo-insignia: #b23a30; --verde-insignia: #2b7745; --azul-insignia: #3260ad; --amarillo-insignia: #856100;
  --naranja-insignia: #a24f1c; --seleccion: rgb(236 230 218 / .2); --barra-scroll: #3a3a40; --sombra: rgb(0 0 0 / .55); --fondo-ondas: .06;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --fondo: #0e0e10; --superficie: #161618; --suave: #1d1d20; --borde: #2a2a2e; --linea: #303035; --texto: #ece6da;
    --gris: #a39d92; --gris2: #7f7a72; --acento: #ece6da; --acento-texto: #0e0e10; --peligro: #ec8a7f; --ok: #7cc195;
    --aviso: #d9b866; --azul: #93b1e4; --verde: #7cc195; --amarillo: #d9b866; --naranja: #e3a173; --rojo: #ec8a7f;
    --v-turquesa: #6cc2c4; --v-morado: #bba6ec; --rojo-insignia: #b23a30; --verde-insignia: #2b7745; --azul-insignia: #3260ad; --amarillo-insignia: #856100;
    --naranja-insignia: #a24f1c; --seleccion: rgb(236 230 218 / .2); --barra-scroll: #3a3a40; --sombra: rgb(0 0 0 / .55); --fondo-ondas: .06;
    color-scheme: dark;
  }
}
/* Arena (lado claro) y Pizarra (lado oscuro): `html:root[data-tema]` gana a `:root[data-theme]` de app.css y de los
   módulos. Solo en pantalla: al imprimir, Blanco. */
@media screen {
  html:root[data-tema="arena"], [data-muestra="arena"] {
    --fondo: #f5f1e9; --superficie: #fbf9f5; --suave: #eee8dd; --borde: #e2dacb; --linea: #d9d0bf; --texto: #2b2722;
    --gris: #6a6258; --gris2: #857c70; --acento: #6f5638; --acento-texto: #fbf9f5; --peligro: #a2382c; --ok: #3b6a45;
    --aviso: #7d6012; --azul: #2f5a96; --verde: #3b6a45; --amarillo: #7d6012; --naranja: #9a5222; --rojo: #a2382c;
    --v-turquesa: #1d6a6e; --v-morado: #694a96; --rojo-insignia: #a2382c; --verde-insignia: #3b6a45; --azul-insignia: #2f5a96; --amarillo-insignia: #7d6012;
    --naranja-insignia: #9a5222; --seleccion: rgb(111 86 56 / .18); --barra-scroll: #d3c8b4; --sombra: rgb(60 44 24 / .14); --fondo-ondas: .05;
    color-scheme: light;
  }
  html:root[data-tema="pizarra"], [data-muestra="pizarra"] {
    --fondo: #1b212a; --superficie: #222a35; --suave: #29323e; --borde: #36404e; --linea: #3c4757; --texto: #e5eaf0;
    --gris: #a6b0bd; --gris2: #8794a5; --acento: #a9c1dc; --acento-texto: #1b212a; --peligro: #f19189; --ok: #82c9a0;
    --aviso: #e0c274; --azul: #93b8e8; --verde: #82c9a0; --amarillo: #e0c274; --naranja: #eda67c; --rojo: #f19189;
    --v-turquesa: #74cbd1; --v-morado: #c2acf0; --rojo-insignia: #b23a30; --verde-insignia: #2b7745; --azul-insignia: #3260ad; --amarillo-insignia: #856100;
    --naranja-insignia: #a24f1c; --seleccion: rgb(169 193 220 / .24); --barra-scroll: #465263; --sombra: rgb(5 10 18 / .55); --fondo-ondas: .07;
    color-scheme: dark;
  }
}
::selection { background: var(--seleccion); }
html { scrollbar-color: var(--barra-scroll) transparent; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fondo); color: var(--texto); font: 14px/1.45 var(--letra); }

/* Fondo: ondas de líneas finas, en gris casi blanco, como un fondo de pantalla que pasa desapercibido (detrás de todo) */
body { position: relative; isolation: isolate; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: var(--fondo-ondas, .045);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'><g fill='none' stroke='%23000' stroke-width='1'><path d='M0 120.0 Q40 132.3 80 143.5 Q120 152.7 160 159.1 Q200 162.6 240 163.0 Q280 160.9 320 156.8 Q360 151.7 400 146.3 Q440 141.4 480 137.5 Q520 134.8 560 133.1 Q600 132.1 640 131.2 Q680 129.7 720 127.0 Q760 122.7 800 116.6 Q840 108.8 880 99.9 Q920 90.7 960 82.0 Q1000 75.0 1040 70.3 Q1080 68.7 1120 70.6 Q1160 75.8 1200 83.8 Q1240 93.9 1280 105.2 Q1320 116.5 1360 126.8 Q1400 135.4 1440 141.7 Q1480 145.7 1520 147.4 Q1560 147.4 1600 146.4'/><path d='M0 184.8 Q40 196.7 80 205.9 Q120 212.0 160 214.8 Q200 214.4 240 211.3 Q280 206.3 320 200.2 Q360 194.0 400 188.2 Q440 183.3 480 179.4 Q520 176.3 560 173.6 Q600 170.8 640 167.1 Q680 162.2 720 155.8 Q760 147.7 800 138.5 Q840 128.7 880 119.2 Q920 111.0 960 105.1 Q1000 102.2 1040 102.9 Q1080 107.3 1120 115.1 Q1160 125.6 1200 138.0 Q1240 151.2 1280 164.0 Q1320 175.5 1360 184.9 Q1400 191.8 1440 196.1 Q1480 198.1 1520 198.4 Q1560 197.7 1600 196.6'/><path d='M0 249.7 Q40 258.2 80 263.2 Q120 264.6 160 262.8 Q200 258.3 240 252.0 Q280 244.8 320 237.5 Q360 230.8 400 225.0 Q440 220.1 480 215.8 Q520 211.8 560 207.5 Q600 202.3 640 195.8 Q680 187.9 720 178.8 Q760 169.0 800 159.1 Q840 150.2 880 143.3 Q920 139.2 960 138.6 Q1000 141.8 1040 148.8 Q1080 159.1 1120 171.9 Q1160 186.1 1200 200.6 Q1240 214.3 1280 226.2 Q1320 235.6 1360 242.3 Q1400 246.3 1440 248.0 Q1480 247.9 1520 246.8 Q1560 245.4 1600 244.1'/><path d='M0 306.7 Q40 309.7 80 309.2 Q120 305.5 160 299.4 Q200 291.8 240 283.7 Q280 275.7 320 268.5 Q360 262.3 400 257.1 Q440 252.5 480 248.0 Q520 243.0 560 237.2 Q600 230.2 640 221.9 Q680 212.8 720 203.2 Q760 194.2 800 186.7 Q840 181.5 880 179.5 Q920 181.3 960 186.9 Q1000 196.1 1040 208.2 Q1080 222.4 1120 237.5 Q1160 252.3 1200 265.7 Q1240 276.9 1280 285.3 Q1320 290.8 1360 293.5 Q1400 294.0 1440 293.0 Q1480 291.0 1520 288.9 Q1560 287.0 1600 285.6'/><path d='M0 349.9 Q40 347.1 80 341.6 Q120 334.1 160 325.7 Q200 317.3 240 309.4 Q280 302.6 320 296.9 Q360 292.3 400 288.3 Q440 284.4 480 279.9 Q520 274.5 560 267.8 Q600 260.1 640 251.7 Q680 243.2 720 235.6 Q760 229.7 800 226.4 Q840 226.4 880 230.1 Q920 237.5 960 248.0 Q1000 261.0 1040 275.4 Q1080 290.1 1120 303.9 Q1160 315.8 1200 325.0 Q1240 331.4 1280 334.8 Q1320 335.6 1360 334.4 Q1400 332.0 1440 329.1 Q1480 326.3 1520 324.0 Q1560 322.2 1600 320.8'/><path d='M0 379.4 Q40 372.5 80 364.3 Q120 355.8 160 347.9 Q200 341.0 240 335.5 Q280 331.4 320 328.3 Q360 325.8 400 323.2 Q440 319.9 480 315.5 Q520 309.9 560 303.2 Q600 295.9 640 288.7 Q680 282.5 720 278.1 Q760 276.5 800 278.0 Q840 282.9 880 291.1 Q920 302.0 960 314.8 Q1000 328.3 1040 341.4 Q1080 353.0 1120 362.4 Q1160 369.0 1200 372.6 Q1240 373.5 1280 372.1 Q1320 369.2 1360 365.6 Q1400 362.0 1440 358.9 Q1480 356.6 1520 355.2 Q1560 354.2 1600 353.1'/><path d='M0 401.1 Q40 393.0 80 385.3 Q120 378.6 160 373.4 Q200 369.9 240 367.8 Q280 366.8 320 366.1 Q360 365.1 400 363.3 Q440 360.1 480 355.6 Q520 349.9 560 343.7 Q600 337.6 640 332.5 Q680 329.3 720 328.7 Q760 331.1 800 336.6 Q840 344.9 880 355.3 Q920 367.0 960 378.8 Q1000 389.6 1040 398.6 Q1080 405.1 1120 408.7 Q1160 409.6 1200 408.1 Q1240 404.8 1280 400.6 Q1320 396.3 1360 392.5 Q1400 389.8 1440 388.2 Q1480 387.6 1520 387.6 Q1560 387.6 1600 386.8'/><path d='M0 423.5 Q40 417.0 80 411.9 Q120 408.7 160 407.3 Q200 407.3 240 408.1 Q280 409.0 320 409.4 Q360 408.5 400 406.2 Q440 402.4 480 397.4 Q520 391.8 560 386.4 Q600 382.1 640 379.7 Q680 379.8 720 382.8 Q760 388.5 800 396.5 Q840 406.1 880 416.4 Q920 426.3 960 434.9 Q1000 441.3 1040 445.1 Q1080 446.2 1120 444.7 Q1160 441.4 1200 436.8 Q1240 431.9 1280 427.5 Q1320 424.2 1360 422.2 Q1400 421.7 1440 422.4 Q1480 423.6 1520 424.6 Q1560 424.8 1600 423.6'/><path d='M0 452.4 Q40 448.8 80 447.2 Q120 447.3 160 448.7 Q200 450.7 240 452.5 Q280 453.4 320 452.9 Q360 450.8 400 447.1 Q440 442.3 480 437.0 Q520 432.2 560 428.6 Q600 426.9 640 427.8 Q680 431.3 720 437.3 Q760 445.3 800 454.4 Q840 463.7 880 472.2 Q920 478.9 960 483.3 Q1000 485.1 1040 484.2 Q1080 481.2 1120 476.7 Q1160 471.5 1200 466.4 Q1240 462.3 1280 459.6 Q1320 458.6 1360 459.0 Q1400 460.6 1440 462.6 Q1480 464.3 1520 464.9 Q1560 464.0 1600 461.0'/><path d='M0 488.3 Q40 487.4 80 488.3 Q120 490.1 160 492.3 Q200 494.0 240 494.7 Q280 493.8 320 491.3 Q360 487.4 400 482.6 Q440 477.7 480 473.5 Q520 470.8 560 470.3 Q600 472.4 640 477.1 Q680 484.0 720 492.5 Q760 501.7 800 510.7 Q840 518.4 880 524.1 Q920 527.2 960 527.6 Q1000 525.6 1040 521.5 Q1080 516.3 1120 510.8 Q1160 505.8 1200 502.0 Q1240 499.7 1280 499.2 Q1320 500.0 1360 501.8 Q1400 503.7 1440 505.1 Q1480 505.3 1520 503.7 Q1560 500.2 1600 494.9'/><path d='M0 527.3 Q40 527.8 80 529.2 Q120 530.8 160 531.7 Q200 531.5 240 529.9 Q280 526.8 320 522.7 Q360 518.2 400 514.0 Q440 511.0 480 509.9 Q520 511.2 560 515.2 Q600 521.8 640 530.4 Q680 540.2 720 550.2 Q760 559.5 800 567.1 Q840 572.2 880 574.6 Q920 574.1 960 571.2 Q1000 566.5 1040 560.7 Q1080 554.8 1120 549.6 Q1160 545.6 1200 543.2 Q1240 542.4 1280 542.8 Q1320 543.8 1360 544.8 Q1400 544.9 1440 543.6 Q1480 540.6 1520 535.8 Q1560 529.5 1600 522.4'/><path d='M0 564.6 Q40 565.0 80 565.5 Q120 565.4 160 564.3 Q200 562.0 240 558.7 Q280 554.8 320 551.1 Q360 548.2 400 547.1 Q440 548.3 480 552.2 Q520 558.9 560 567.9 Q600 578.6 640 590.1 Q680 601.4 720 611.2 Q760 618.9 800 623.7 Q840 625.4 880 624.1 Q920 620.2 960 614.6 Q1000 608.0 1040 601.4 Q1080 595.5 1120 590.8 Q1160 587.6 1200 585.8 Q1240 584.9 1280 584.4 Q1320 583.6 1360 581.8 Q1400 578.6 1440 573.8 Q1480 567.5 1520 560.2 Q1560 552.6 1600 545.7'/><path d='M0 598.2 Q40 597.8 80 597.0 Q120 595.3 160 592.8 Q200 589.8 240 586.8 Q280 584.4 320 583.6 Q360 584.9 400 588.9 Q440 595.8 480 605.3 Q520 616.9 560 629.8 Q600 642.9 640 655.0 Q680 665.2 720 672.6 Q760 676.7 800 677.4 Q840 674.9 880 669.8 Q920 662.8 960 655.1 Q1000 647.4 1040 640.4 Q1080 634.7 1120 630.3 Q1160 627.0 1200 624.6 Q1240 622.3 1280 619.5 Q1320 615.7 1360 610.6 Q1400 604.3 1440 596.8 Q1480 589.0 1520 581.6 Q1560 575.4 1600 571.5'/><path d='M0 630.7 Q40 629.6 80 628.0 Q120 625.9 160 623.7 Q200 621.9 240 621.4 Q280 622.8 320 626.8 Q360 633.5 400 643.0 Q440 655.0 480 668.7 Q520 683.1 560 697.0 Q600 709.4 640 719.1 Q680 725.6 720 728.3 Q760 727.4 800 723.2 Q840 716.4 880 708.0 Q920 698.9 960 690.0 Q1000 682.0 1040 675.2 Q1080 669.7 1120 665.3 Q1160 661.5 1200 657.7 Q1240 653.4 1280 648.2 Q1320 641.9 1360 634.6 Q1400 626.8 1440 619.2 Q1480 612.6 1520 607.9 Q1560 606.1 1600 607.5'/><path d='M0 666.5 Q40 665.3 80 664.0 Q120 662.8 160 662.5 Q200 663.7 240 667.1 Q280 673.1 320 682.0 Q360 693.4 400 706.9 Q440 721.5 480 736.3 Q520 749.9 560 761.4 Q600 769.8 640 774.4 Q680 775.2 720 772.2 Q760 766.1 800 757.6 Q840 747.9 880 737.7 Q920 728.1 960 719.5 Q1000 712.2 1040 706.3 Q1080 701.4 1120 697.1 Q1160 692.7 1200 687.8 Q1240 682.0 1280 675.4 Q1320 668.1 1360 660.7 Q1400 653.9 1440 648.8 Q1480 646.0 1520 646.4 Q1560 650.3 1600 657.9'/><path d='M0 708.8 Q40 708.1 80 707.8 Q120 708.5 160 710.9 Q200 715.5 240 722.7 Q280 732.6 320 744.7 Q360 758.5 400 772.9 Q440 786.7 480 799.0 Q520 808.6 560 814.7 Q600 817.0 640 815.4 Q680 810.4 720 802.5 Q760 792.8 800 782.2 Q840 771.8 880 762.2 Q920 754.0 960 747.3 Q1000 742.0 1040 737.7 Q1080 733.8 1120 729.8 Q1160 725.2 1200 719.8 Q1240 713.6 1280 706.9 Q1320 700.5 1360 695.0 Q1400 691.5 1440 690.5 Q1480 692.9 1520 698.7 Q1560 708.0 1600 720.2'/><path d='M0 757.2 Q40 757.1 80 758.1 Q120 760.8 160 765.8 Q200 773.2 240 782.9 Q280 794.6 320 807.5 Q360 820.5 400 832.6 Q440 842.6 480 849.7 Q520 853.3 560 853.1 Q600 849.4 640 842.6 Q680 833.6 720 823.4 Q760 813.0 800 803.2 Q840 794.8 880 788.0 Q920 782.9 960 779.2 Q1000 776.4 1040 773.8 Q1080 770.9 1120 767.2 Q1160 762.7 1200 757.4 Q1240 751.7 1280 746.3 Q1320 742.1 1360 739.9 Q1400 740.3 1440 744.0 Q1480 750.9 1520 760.9 Q1560 773.3 1600 787.2'/><path d='M0 807.9 Q40 808.5 80 810.8 Q120 815.3 160 822.1 Q200 831.0 240 841.5 Q280 852.8 320 863.9 Q360 873.7 400 881.2 Q440 885.8 480 886.9 Q520 884.6 560 879.2 Q600 871.4 640 862.1 Q680 852.3 720 842.9 Q760 834.8 800 828.4 Q840 823.9 880 821.0 Q920 819.5 960 818.6 Q1000 817.6 1040 816.1 Q1080 813.6 1120 810.0 Q1160 805.5 1200 800.6 Q1240 796.1 1280 792.7 Q1320 791.3 1360 792.5 Q1400 796.7 1440 803.8 Q1480 813.6 1520 825.3 Q1560 837.8 1600 850.3'/></g></svg>") no-repeat center / cover;
  -webkit-mask-image: linear-gradient(115deg, transparent 8%, #000 45%, #000 80%, transparent 100%);
          mask-image: linear-gradient(115deg, transparent 8%, #000 45%, #000 80%, transparent 100%); }
:root[data-theme="dark"] body::before { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] body::before { filter: invert(1); } }
@media print { body::before { display: none; } }
[hidden] { display: none !important; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 30px; font-weight: 400; letter-spacing: -.6px; }
h2 { font-size: 14px; font-weight: 400; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gris2); outline-offset: 3px; }
.logo { display: block; width: 160px; height: auto; }
:root[data-theme="dark"] :is(.logo, .logo-elia, .elia-firma img) { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] :is(.logo, .logo-elia, .elia-firma img) { filter: invert(1); } }
/* Elia (el producto): logotipo de trazo fino (web/elia-logo.svg). La empresa que lo usa pone el suyo arriba del menú. */
.logo-elia { display: block; height: 44px; width: auto; color: #171717; }
.logo-empresa { display: block; min-height: 30px; }
.logo-empresa img { display: block; max-width: 100%; max-height: 64px; width: auto; height: auto; object-fit: contain; object-position: left center; }
.logo-empresa .nombre-empresa-marca { display: block; font-size: 21px; line-height: 1.2; letter-spacing: -.3px; color: var(--texto); overflow-wrap: anywhere; }
/* el logo de la empresa respeta su transparencia; si es oscuro y sin color, en el tema oscuro se aclara (sin fondo blanco) */
:root[data-theme="dark"] .logo-empresa img.logo-oscuro { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .logo-empresa img.logo-oscuro { filter: invert(1); } }
.pie-salir { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.elia-firma { display: block; opacity: .4; }
.elia-firma img { display: block; height: 13px; width: auto; }

/* ---------- botones y campos ---------- */
.btn { border: 1px solid var(--linea); background: var(--superficie); border-radius: var(--radio-p); padding: 10px 14px; cursor: pointer; }
.btn:hover { border-color: var(--gris2); }
/* todos los botones iguales: blancos con borde fino (Jaime, 30/09/2026); «primario» ya no cambia el aspecto */
.btn.primario { background: var(--superficie); color: var(--texto); border-color: var(--linea); }
.btn.primario:hover:not(:disabled) { border-color: var(--gris2); }
.btn:disabled { opacity: .55; cursor: default; }
.enlace { background: none; border: 0; color: var(--gris); text-decoration: underline; cursor: pointer; padding: 0; }
input, select, textarea { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-p); padding: 10px 12px; width: 100%; }
label { display: grid; gap: 6px; font-size: 12px; color: var(--gris); }
.mensaje { min-height: 1.2em; color: var(--peligro); font-size: 13px; }
.mensaje.ok { color: var(--ok); }

/* ---------- entrada ---------- */
.entrar { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.entrar-caja { width: min(380px, 100%); display: grid; gap: 16px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 32px 28px; }
.entrar-caja .marca-entrada { display: grid; justify-items: center; gap: 8px; margin: 6px 0 14px; }
/* seguridad en dos pasos (web/dos-pasos.js) */
.entrar-caja.entrar-ancha { width: min(520px, 100%); }
.codigo-dos-pasos { font-size: 20px; letter-spacing: 6px; font-variant-numeric: tabular-nums; max-width: 11ch; }
.pasos-dos-pasos { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 16px; font-size: 14px; }
.pasos-dos-pasos p { margin: 0; }
.pasos-dos-pasos li > * + * { margin-top: 10px; }
.qr-dos-pasos { display: inline-block; background: #fff; padding: 8px; border-radius: var(--radio-p); border: 1px solid var(--borde); line-height: 0; }
.qr-dos-pasos img { width: 180px; height: 180px; image-rendering: pixelated; }
.clave-dos-pasos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.clave-dos-pasos code { font-size: 14px; letter-spacing: 1px; padding: 6px 8px; background: var(--suave); border-radius: var(--radio-p); overflow-wrap: anywhere; }
.fila-codigo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fila-codigo .codigo-dos-pasos { width: 11ch; }
.etiqueta.ok-dos-pasos { color: var(--ok); border-color: currentColor; }
.eyebrow { text-transform: uppercase; letter-spacing: 2.2px; font-size: 9px; color: var(--gris); }

/* ---------- carcasa: menú lateral + área de trabajo ---------- */
.app { display: grid; grid-template-columns: var(--menu) minmax(0, 1fr); min-height: 100vh; align-items: start; align-content: start; }
.lateral { position: sticky; top: 0; height: 100vh; overflow: auto; background: var(--superficie); border-right: 1px solid var(--borde);
           padding: 34px 20px 20px; display: flex; flex-direction: column; gap: 26px; }
.marca { display: grid; gap: 10px; padding: 0 6px; text-decoration: none; }
.marca .eyebrow { padding-left: 2px; }
.menu { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.menu .menu-grupo { display: contents; }                     /* grupos que cada persona ordena (web/organizar.js) */
.menu .grupo { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--gris2); margin: 16px 12px 6px; }
.menu a, .menu .modulo { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; padding: 10px 12px;
                         border-radius: var(--radio-p); text-decoration: none; font-size: 13px; color: var(--gris); background: none; border: 1px solid transparent; cursor: pointer; text-align: left; width: 100%; }
.menu a:hover, .menu .modulo:hover { color: var(--texto); background: var(--suave); }
/* Menú: el apartado activo, blanco con borde fino como los botones */
.menu a.activo, .menu a.activo:hover { color: var(--texto); background: var(--superficie); border-color: var(--linea); }
.menu .modulo { color: var(--texto); }
.menu .modulo::after { content: "›"; color: var(--gris2); transition: transform .15s; }
.menu .modulo[aria-expanded="true"]::after { transform: rotate(90deg); }
/* submenú: se despliega y se recoge con altura y opacidad suaves (grid 0fr → 1fr) */
.menu .sub { display: grid; grid-template-rows: 0fr; opacity: 0; padding-left: 10px;
  transition: grid-template-rows .42s cubic-bezier(.22,.8,.24,1), opacity .32s ease, transform .42s cubic-bezier(.22,.8,.24,1); transform: translateY(-3px); }
.menu .sub-dentro { display: grid; gap: 2px; min-height: 0; overflow: hidden; }
.menu .modulo[aria-expanded="true"] + .sub { grid-template-rows: 1fr; opacity: 1; transform: none; }
.menu .modulo::after { transition: transform .35s cubic-bezier(.22,.8,.24,1); }
@media (prefers-reduced-motion: reduce) { .menu .sub, .menu .modulo::after { transition: none; } }
.menu .sub a { min-height: 36px; font-size: 12.5px; }
.menu .proximamente { color: var(--gris2); cursor: default; }
.menu .proximamente:hover { background: none; color: var(--gris2); }
.menu .proximamente::after { content: none; }
.menu .proximamente { flex-direction: column; align-items: flex-start; gap: 0; min-height: 0; padding: 8px 12px; }
.menu .proximamente small { font-size: 9.5px; letter-spacing: .5px; }
a.modulo.proximamente { cursor: pointer; text-decoration: none; }                 /* existe, pero la empresa no lo tiene activo */
a.modulo.proximamente:hover { color: var(--texto); }
/* Módulos (Ajustes → Módulos) y «Disponible con el módulo X» */
.modulo-ficha h2 { font-size: 17px; font-weight: 500; }
.modulo-ficha .modulo-activo { color: var(--texto); border-color: var(--texto); }
.modulo-integraciones { margin: 8px 0 0; padding-left: 18px; font-size: 13px; }
/* Ajustes → Series de numeración (web/series.js) */
.rejilla.series-rejilla { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }   /* una serie sola no ocupa toda la fila */
.serie-ficha h3 { font-size: 16px; font-weight: 500; }
.serie-siguiente { margin: 4px 0 10px; } .serie-siguiente b { font-size: 22px; font-weight: 600; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.serie-datos { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 6px; font-size: 13.5px; }
.serie-datos dt { color: var(--gris); } .serie-datos dd { margin: 0; overflow-wrap: anywhere; }
.modulo-integraciones li { margin: 4px 0; }
.disponible-con { font-size: 12px; margin: 6px 0; }
.lateral-pie { margin-top: auto; display: grid; gap: 12px; }
.lateral-pie footer { font-size: 10.5px; color: var(--gris); line-height: 1.7; padding: 12px 12px 0; border-top: 1px solid var(--borde); }
.lateral-pie footer b { color: var(--texto); font-weight: 400; }
.sin-red { font-size: 11px; color: var(--aviso); padding: 0 12px; }

.movil-cabecera { display: none; }
.trabajo-marco { min-width: 0; max-width: 1500px; width: 100%; }
.barra-empresa { display: flex; justify-content: flex-end; align-items: flex-end; padding: 0 36px; height: var(--alto-marca, 80px); }
.logo-empresa-pagina { display: inline-flex; align-items: center; min-height: 0; text-decoration: none; line-height: 0; }
.logo-empresa-pagina img { max-height: 20px !important; max-width: 150px; }
.logo-empresa-pagina .nombre-empresa-marca { font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gris); line-height: 1.3; }
/* Elia protagonista arriba del menú (el botón de la asistente) */
.asistente-marca { padding: 4px 6px 4px 6px; margin: 0 0 6px; background: none; }
.asistente-marca .elia-marca { height: 34px !important; }
.trabajo { min-width: 0; padding: 14px 36px 48px; width: 100%; outline: none; }
.cabecera-pagina { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.cabecera-pagina .eyebrow { margin-bottom: 8px; display: block; }
.cabecera-pagina .lado { color: var(--gris); font-size: 12.5px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.inicio-lado { display: grid; justify-items: end; gap: 12px; }
.logo-elia-inicio { height: 24px; }
.volver { text-decoration: none; color: var(--gris); font-size: 13px; }
.volver:hover { color: var(--texto); }
.etiqueta-seccion { display: flex; justify-content: space-between; align-items: baseline; margin: 26px 0 12px; gap: 12px; flex-wrap: wrap; }
.etiqueta-seccion span { font-size: 11.5px; color: var(--gris); }

/* ---------- tarjetas de cifras (todas del mismo tamaño) ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.kpi { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: 134px; padding: 22px;
       background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); text-align: left; text-decoration: none;
       color: var(--texto); cursor: pointer; transition: box-shadow .15s, transform .15s; }
a.kpi:hover, button.kpi:hover { box-shadow: 0 6px 20px #00000010; transform: translateY(-1px); }
.kpi.fija { cursor: default; } .kpi.fija:hover { box-shadow: none; transform: none; }
.kpi-etiqueta { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.kpi-etiqueta .flecha { color: var(--gris2); }
.kpi-valor { font-size: 30px; letter-spacing: -.8px; line-height: 1.1; overflow-wrap: anywhere; }
.kpi-valor.texto { font-size: 22px; letter-spacing: -.3px; }
.kpi-valor small { font-size: 14px; letter-spacing: 0; color: var(--gris); }
.kpi-nota { font-size: 11.5px; color: var(--gris); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.punto-color { width: 8px; height: 8px; border-radius: 50%; background: var(--gris2); display: inline-block; flex: none; }
.punto-color.azul { background: var(--azul); } .punto-color.verde { background: var(--verde); } .punto-color.amarillo { background: var(--amarillo); }
.punto-color.naranja { background: var(--naranja); } .punto-color.rojo { background: var(--rojo); }
.kpi-valor.azul { color: var(--azul); } .kpi-valor.verde { color: var(--verde); } .kpi-valor.amarillo { color: var(--amarillo); }
.kpi-valor.naranja { color: var(--naranja); } .kpi-valor.rojo { color: var(--rojo); }

/* ---------- paneles de detalle ---------- */
.tarjeta, .panel { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 24px; }
.panel + .panel { margin-top: 14px; }
.panel h2 { margin-bottom: 14px; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: stretch; }   /* las tarjetas de una misma fila, con la misma altura */
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.dato { display: grid; gap: 4px; } .dato span { color: var(--gris); font-size: 12px; }
.vacio { color: var(--gris); padding: 18px 0; }
.nota { color: var(--gris); font-size: 12.5px; }
.barra { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.hueco { flex: 1; }
.cifras-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 18px; }
.cifra-mini { background: var(--suave); border-radius: var(--radio-p); padding: 14px 16px; }
.cifra-mini span { display: block; font-size: 11.5px; color: var(--gris); }
.cifra-mini strong { display: block; font-size: 22px; font-weight: 400; margin-top: 6px; }

/* ---------- tablas ---------- */
.tabla-envoltorio { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
th { font-weight: 400; color: var(--gris); font-size: 11.5px; }
tbody tr { cursor: pointer; } tbody tr:hover { background: var(--suave); }
tbody.sin-clic tr { cursor: default; } tbody.sin-clic tr:hover { background: none; }
tfoot td { border-bottom: 0; font-weight: 400; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.negativo { color: var(--peligro); }
.etiqueta { font-size: 11px; border: 1px solid var(--linea); border-radius: 99px; padding: 2px 9px; color: var(--gris); white-space: nowrap; }
.semaforo { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.semaforo::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--gris2); }
.semaforo.azul::before { background: var(--azul); } .semaforo.verde::before { background: var(--verde); } .semaforo.amarillo::before { background: var(--amarillo); }
.semaforo.naranja::before { background: var(--naranja); } .semaforo.rojo::before { background: var(--rojo); } .semaforo.rojo { color: var(--rojo); }

/* ---------- avisos ---------- */
.aviso { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 30; background: var(--acento); color: var(--acento-texto);
         padding: 10px 12px 10px 18px; border-radius: 99px; display: flex; gap: 12px; align-items: center; max-width: calc(100% - 32px); }
.aviso .btn { background: var(--acento-texto); color: var(--acento); border: 0; padding: 6px 12px; }
.aviso-linea { background: var(--superficie); border: 1px solid var(--borde); border-left: 3px solid var(--aviso); padding: 10px 14px; border-radius: var(--radio-p); margin: 0 0 14px; font-size: 13px; }

/* ---------- diálogos ---------- */
dialog { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); color: var(--texto); width: min(480px, calc(100% - 24px)); padding: 24px; }
dialog::backdrop { background: rgb(0 0 0 / .3); }
dialog form { display: grid; gap: 14px; }
/* Siempre dentro de la pantalla (web/flotante.js): alto máximo con scroll dentro y, si el contenido no cabe («dlg-desborda»),
   la cabecera y los botones se quedan fijos al desplazar. En el móvil, como hoja que sube desde abajo, a todo el ancho. */
dialog:modal { max-width: calc(100vw - 16px); max-height: 90dvh; overflow: auto; overscroll-behavior: contain; }
dialog.dlg-desborda > :is(h2, h3, .conexion-cabeza):first-child, dialog.dlg-desborda > form > :is(h2, h3, .conexion-cabeza):first-child {
  position: sticky; top: calc(-1 * var(--dlg-pad-arriba, 24px)); z-index: 3; background: var(--superficie); margin-top: calc(-1 * var(--dlg-pad-arriba, 24px));
  padding-top: var(--dlg-pad-arriba, 24px); padding-bottom: 8px; margin-inline: calc(-1 * var(--dlg-pad-lado, 24px)); padding-inline: var(--dlg-pad-lado, 24px); }
dialog.dlg-desborda > :is(.barra, menu):last-child, dialog.dlg-desborda > form > :is(.barra, menu):last-child {
  position: sticky; bottom: calc(-1 * var(--dlg-pad-abajo, 24px)); z-index: 3; background: var(--superficie); margin-bottom: calc(-1 * var(--dlg-pad-abajo, 24px));
  padding-top: 12px; padding-bottom: var(--dlg-pad-abajo, 24px); border-top: 1px solid var(--borde);
  margin-inline: calc(-1 * var(--dlg-pad-lado, 24px)); padding-inline: var(--dlg-pad-lado, 24px); }
@media (max-width: 600px) {
  dialog:modal:not(.visor-pdf):not(.correo-redactar) { width: 100% !important; max-width: 100%; max-height: 92dvh; margin: auto 0 0;
    border-radius: var(--radio) var(--radio) 0 0; border-bottom: 0; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  :root:not([data-motion="reduced"]) dialog:modal:not(.visor-pdf):not(.correo-redactar) { animation: hoja-sube .22s cubic-bezier(.2,.8,.3,1) both; }
}
@keyframes hoja-sube { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { dialog:modal { animation: none !important; } }
/* lo que flota (web/flotante.js) va en la capa superior («popover»): sin los estilos que el navegador le pone */
:where([data-flotante][popover]) { inset: auto; margin: 0; padding: 0; border: 0; color: inherit; background: none; overflow: auto; }
/* lo que se abre en línea: los <details> se despliegan con una animación de altura discreta (si el navegador sabe) */
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduced"]) details:not(:has([data-flotante])) { interpolate-size: allow-keywords; }
  :root:not([data-motion="reduced"]) details:not(:has([data-flotante]))::details-content {
    block-size: 0; overflow-y: clip; transition: block-size .2s ease, content-visibility .2s allow-discrete; }
  :root:not([data-motion="reduced"]) details[open]:not(:has([data-flotante]))::details-content { block-size: auto; }
}
fieldset { border: 1px solid var(--borde); border-radius: var(--radio-p); padding: 12px 14px; display: grid; gap: 8px; margin: 0; }
legend { padding: 0 6px; font-size: 12px; color: var(--gris); }
.casilla { display: flex; gap: 8px; align-items: center; color: var(--texto); font-size: 13.5px; }
.casilla input { width: auto; }
.permisos { display: grid; gap: 8px; }
.permiso { display: grid; grid-template-columns: 1fr 170px; gap: 10px; align-items: center; color: var(--texto); font-size: 13px; }

/* ---------- obras (tarjetas) ---------- */
.obras { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.obra { min-height: 150px; align-items: stretch; }
.obra-cab { display: flex; justify-content: space-between; gap: 10px; }
.obra-nombre { font-size: 17px; }
.barra-avance { height: 6px; background: var(--suave); border-radius: 99px; overflow: hidden; }
.barra-avance i { display: block; height: 100%; background: var(--acento); }
.avance { display: grid; grid-template-columns: minmax(0, 1fr) 130px auto; gap: 12px; align-items: center; font-size: 13px; padding: 7px 0; }

/* ---------- trabajo en obra ---------- */
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.chips button, .segmentos button { border: 1px solid var(--linea); background: var(--superficie); border-radius: 99px; padding: 7px 13px; cursor: pointer; font-size: 12.5px; }
.chips button.activa, .segmentos button.activa { background: var(--superficie); color: var(--texto); border-color: var(--texto); }
.chips small { opacity: .7; margin-left: 4px; }
.segmentos { display: flex; gap: 6px; flex-wrap: wrap; }
.puntos { display: grid; gap: 10px; }
.punto { background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; padding: 16px; cursor: pointer; }
.punto-cab { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.punto-sub { color: var(--gris); font-size: 12px; margin-top: 4px; overflow-wrap: anywhere; }
.estado { font-size: 11px; border: 1px solid var(--linea); border-radius: 99px; padding: 2px 9px; white-space: nowrap; color: var(--gris); }
.estado.verde { color: var(--verde); border-color: currentColor; } .estado.azul { color: var(--azul); border-color: currentColor; }
.estado.amarillo { color: var(--amarillo); border-color: currentColor; } .estado.rojo { color: #fff; background: var(--rojo-insignia, var(--rojo)); border-color: var(--rojo-insignia, var(--rojo)); }
.estado.anulado { text-decoration: line-through; }
.rapidos { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.rapidos button { flex: 1 1 0; min-width: 90px; padding: 11px 6px; border-radius: var(--radio-p); border: 1px solid var(--linea); background: var(--superficie); cursor: pointer; font-size: 13px; }
.rapidos button.activa { background: var(--superficie); color: var(--texto); border-color: var(--texto); }
.dlg-punto { width: min(560px, calc(100% - 24px)); }
.datos { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 13px; margin: 8px 0; }
.datos dt { color: var(--gris); } .datos dd { margin: 0; overflow-wrap: anywhere; }
.fotos { display: flex; gap: 8px; flex-wrap: wrap; } .fotos img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radio-p); border: 1px solid var(--borde); }
label.btn { display: inline-flex; align-items: center; color: var(--texto); font-size: 14px; }
.incidencia { margin-bottom: 10px; } .incidencia.cerrada { opacity: .65; }

/* ---------- reloj y horas ---------- */
.reloj { display: grid; gap: 14px; text-align: center; max-width: 520px; }
.reloj label { text-align: left; }
.reloj-obra { color: var(--gris); }
.reloj-tiempo { font-size: 44px; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.btn.grande { font-size: 17px; padding: 15px; border-radius: 14px; }
.fila-horas { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--borde); font-size: 13.5px; }
.fila-horas small { grid-column: 1 / -1; }
.fila-horas .acciones { display: flex; gap: 6px; flex-wrap: wrap; justify-content: end; }

/* ---------- ajustes ---------- */
/* Apariencia: cuatro temas en tarjetas de muestra (menú, una tarjeta y un botón en los colores de cada tema).
   La tarjeta va en los colores de la página; la miniatura, en los del tema ([data-muestra], bloques «Temas»).
   Elegida: un trazo fino. Con el teclado, flechas (radios nativos) y el foco se ve en la tarjeta. */
.temas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tema-tarjeta { position: relative; display: grid; align-content: start; gap: 12px; padding: 10px 10px 14px; border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--superficie); color: var(--texto); cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.tema-tarjeta:hover { border-color: var(--gris2); }
.tema-tarjeta:has(input:checked) { border-color: var(--texto); }
.tema-tarjeta:has(input:focus-visible) { outline: 2px solid var(--gris2); outline-offset: 3px; }
.tema-tarjeta input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.tema-mini { display: grid; grid-template-columns: 30% 1fr; height: 104px; border-radius: 10px; overflow: hidden; border: 1px solid var(--borde);
  background: var(--fondo); color: var(--texto); }
.tm-menu { display: grid; align-content: start; gap: 6px; padding: 10px 8px; background: var(--superficie); border-right: 1px solid var(--borde); }
.tm-menu svg { width: 30px; height: auto; margin-bottom: 4px; }
.tm-menu i { display: block; height: 4px; border-radius: 2px; background: var(--gris2); opacity: .55; }
.tm-menu i.activo { background: var(--texto); opacity: .85; width: 80%; }
.tm-hoja { display: grid; align-content: start; gap: 8px; padding: 10px; }
.tm-tarjeta { display: grid; gap: 4px; padding: 7px 8px; border-radius: 7px; background: var(--superficie); border: 1px solid var(--borde); }
.tm-tarjeta small { font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); line-height: 1; }
.tm-tarjeta b { font-size: 14px; line-height: 1.1; color: var(--texto); letter-spacing: -.3px; }
.tm-tarjeta em { font-style: normal; font-size: 8.5px; color: var(--verde); line-height: 1; }
.tm-boton { justify-self: start; font-size: 8.5px; line-height: 1; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--linea); background: var(--superficie); color: var(--texto); }
.tm-acento { justify-self: end; margin-top: -22px; width: 14px; height: 14px; border-radius: 50%; background: var(--acento); }
.tema-pie { display: grid; gap: 2px; padding: 0 4px; }
.tema-nombre { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; }
.tema-nombre small { font-size: 10.5px; color: var(--gris); letter-spacing: .04em; }
.tema-nota { font-size: 11.5px; color: var(--gris); line-height: 1.35; }
.tema-auto { margin-top: 14px; font-size: 12.5px; color: var(--gris); }
.tema-auto input { margin: 0; }

/* ---------- móvil ---------- */
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); z-index: 40; transform: translateX(-102%); transition: transform .2s; box-shadow: 0 0 40px #0003; }
  .app.menu-abierto .lateral { transform: none; }
  .movil-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--superficie);
                    border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 20; }
  .movil-cabecera .logo-empresa img { max-height: 34px; max-width: 150px; }
  .movil-cabecera .nombre-empresa-marca { font-size: 17px; }
  .movil-cabecera .marca-movil { text-decoration: none; min-width: 0; }
  .movil-cabecera button { background: none; border: 1px solid var(--linea); border-radius: var(--radio-p); padding: 7px 12px; }
  .trabajo { padding: 10px 16px 40px; }
  .barra-empresa { padding: 14px 16px 0; height: auto; }
  h1 { font-size: 25px; }
  .kpis { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 10px; }
  .kpi { min-height: 116px; padding: 16px; }
  .kpi-valor { font-size: 24px; }
  .temas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .permiso { grid-template-columns: 1fr; }
  .fila-horas { grid-template-columns: minmax(0, 1fr) auto; } .fila-horas .acciones { grid-column: 1 / -1; justify-content: start; }
  .avance { grid-template-columns: minmax(0, 1fr) 80px auto; }
}
.kpi-etiqueta { width: 100%; }
.obra > span:not(.kpi-etiqueta) { display: block; }
span.barra-avance { display: block; width: 100%; }

/* ---------- ayuda al pasar el cursor (común a toda la app) ---------- */
.ayuda { position: fixed; z-index: 60; max-width: 320px; background: var(--acento); color: var(--acento-texto); font-size: 12.5px; line-height: 1.5;
         padding: 10px 13px; border-radius: 10px; pointer-events: none; box-shadow: 0 8px 24px #0002; }
[data-ayuda] { cursor: help; }
a[data-ayuda], button[data-ayuda], .kpi[data-ayuda] { cursor: pointer; }
/* ---------- avisos ---------- */
.campana { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: var(--radio-p);
           text-decoration: none; font-size: 13px; color: var(--gris); }
.campana:hover, .campana.activo { background: var(--suave); color: var(--texto); }
.contador { background: var(--rojo-insignia, var(--rojo)); color: #fff; font-size: 10.5px; font-weight: 400; border-radius: 99px; padding: 1px 7px; min-width: 20px; text-align: center; }
.acciones-movil { display: flex; gap: 8px; align-items: center; }
.acciones-movil .campana { border: 1px solid var(--linea); padding: 7px 10px; }
.lista-avisos { display: grid; gap: 0; }
.aviso-item { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; gap: 12px; align-items: start; padding: 14px 4px;
              border-bottom: 1px solid var(--borde); text-decoration: none; }
.aviso-item:last-child { border-bottom: 0; }
.aviso-item .marca-leido { width: 8px; height: 8px; border-radius: 50%; background: var(--rojo); margin-top: 6px; }
.aviso-item.leido .marca-leido { background: transparent; }
.aviso-item.leido { color: var(--gris); }
.aviso-item small { color: var(--gris); white-space: nowrap; font-size: 11.5px; }
.aviso-item p { color: var(--gris); font-size: 12.5px; margin-top: 3px; }
.interruptor-fila { display: grid; grid-template-columns: minmax(0, 1fr) 90px 90px; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.interruptor-fila:last-child { border-bottom: 0; }
.interruptor-fila .casilla { justify-content: center; font-size: 12px; color: var(--gris); }
.interruptor-fila p { color: var(--gris); font-size: 12px; }
input[type=range] { padding: 0; }
@media (max-width: 860px) { .lateral-avisos { display: none; } .interruptor-fila { grid-template-columns: minmax(0, 1fr) 60px 60px; } }
.rejilla > .panel + .panel { margin-top: 0; }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--acento); }
.obra > .luces { display: flex; gap: 6px 16px; flex-wrap: wrap; }
.luces > span { display: inline-flex; align-items: center; gap: 5px; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; }

.barra-tabla { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; flex-wrap: wrap; }
.barra-tabla .chips { margin: 0; }
.columnas { position: relative; }
.columnas summary { list-style: none; cursor: pointer; padding: 7px 13px; font-size: 12.5px; }
.columnas summary::-webkit-details-marker { display: none; }
.columnas-lista { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; background: var(--superficie); border: 1px solid var(--borde);
                  border-radius: var(--radio-p); padding: 10px 14px; display: grid; gap: 6px; min-width: 220px; max-height: 60vh; overflow: auto; box-shadow: 0 8px 24px #0001; }
.texto-com { line-height: 1.7; font-size: 14.5px; max-width: 760px; }

/* Enlaces dentro de tablas y listas: llevan a la sección de donde viene el dato */
a.ir { color: inherit; text-decoration: underline dotted var(--gris2); text-underline-offset: 3px; }
a.ir:hover { text-decoration: underline solid; color: var(--azul); }
/* Fila a la que se llega desde otra pantalla (?marcar=…) */
.resaltada, .resaltada td { animation: resaltar 6s ease-out; }
tr.resaltada td:first-child, .fila-horas.resaltada { box-shadow: inset 3px 0 0 var(--amarillo); }
@keyframes resaltar { 0%, 40% { background: color-mix(in srgb, var(--amarillo) 22%, transparent); } 100% { background: transparent; } }
.cifra-mini small { display: block; font-size: 11.5px; color: var(--gris); margin-top: 6px; line-height: 1.4; }
/* Bolsa: saldo negativo = pendiente de recuperar, no «en rojo» */
.saldo-neg { color: var(--gris); }
tr.desplegable { cursor: pointer; }
.flecha-desplegar { display: inline-block; color: var(--gris2); transition: transform .15s; width: 1em; }
tr.desplegable.abierta .flecha-desplegar { transform: rotate(90deg); }
tr.fila-desglose > td { background: var(--suave); padding: 10px 16px 14px 36px; }
.desglose-fila { display: grid; grid-template-columns: 1fr auto 140px; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--linea); align-items: baseline; }
.desglose-fila:last-child { border-bottom: 0; }
.desglose-fila > :last-child { text-align: right; }

/* Calendario de obras */
table.calendario { table-layout: fixed; min-width: 860px; }
table.calendario th:first-child, table.calendario td:first-child { width: 150px; }
table.calendario th.hoy { color: var(--texto); font-weight: 400; }
table.calendario th.finde, table.calendario td.finde { background: color-mix(in srgb, var(--suave) 60%, transparent); }
td.hueco-dia { vertical-align: top; cursor: pointer; height: 56px; padding: 4px; }
td.hueco-dia:hover { background: var(--suave); }
td.hueco-dia.hoy { box-shadow: inset 0 2px 0 var(--acento); }
.chip-obra { display: block; width: 100%; text-align: left; border: 1px solid hsl(var(--tono) 55% 50% / .55); background: hsl(var(--tono) 60% 50% / .14);
  color: var(--texto); border-radius: 8px; padding: 4px 6px; margin: 0 0 4px; font: inherit; font-size: 12px; cursor: pointer; line-height: 1.3; }
.chip-obra b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow-wrap: anywhere; font-weight: 400; overflow: hidden; }
.chip-obra small { display: block; color: var(--gris); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.semana-mia { display: grid; gap: 10px; }
.dia-mio h2 { font-size: 15px; margin-bottom: 8px; }
.dia-mio.hoy { border-color: var(--acento); }
.dia-mio .chip-obra { font-size: 14px; padding: 8px 10px; cursor: default; }
.personas-cal { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 12px; }
.hoy-reloj { margin: 0 0 14px; }
tr.apagada td { color: var(--gris); }

/* Calendario al estilo de Google: barra, mes, semana/día con horas */
.cal-barra { margin-bottom: 10px; }
.cal-filtros { margin-bottom: 14px; }
.cal-titulo { margin-left: 6px; display: inline-block; }
.cal-titulo::first-letter { text-transform: uppercase; }
.ev { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid hsl(var(--tono) 60% 45%);
  background: hsl(var(--tono) 60% 50% / .16); color: var(--texto); border-radius: 6px; padding: 2px 6px; margin: 0 0 3px;
  font: inherit; font-size: 12px; line-height: 1.3; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ev b { font-weight: 400; }
.ev small { color: var(--gris); }
.cal-col .ev, .cal-tododia .ev { white-space: normal; }
.cal-col .ev { margin: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
.cal-col .ev small { display: block; }
.cal-col .ev .ev-persona, .cal-col .ev .ev-tarea, .cal-tododia .ev .ev-persona { display: block; }
.cal-col .ev .sep, .cal-tododia .ev .ev-persona .sep { display: none; }
.ev-lista { white-space: normal; padding: 8px 10px; font-size: 14px; cursor: default; }
.ev-lista small { display: block; margin-top: 2px; }
/* mes */
.cal-mes { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-p); overflow: hidden; }
.cal-mes-cab { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); font-size: 12px; color: var(--gris); border-bottom: 1px solid var(--linea); }
.cal-mes-cab > div { padding: 6px 8px; }
.cal-mes-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-celda { min-height: 112px; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); padding: 4px; cursor: pointer; min-width: 0; }
.cal-celda:nth-child(7n) { border-right: 0; }
.cal-celda:hover { background: var(--suave); }
.cal-celda.fuera { background: color-mix(in srgb, var(--suave) 70%, transparent); }
.cal-celda.fuera .cal-num { color: var(--gris2); }
.cal-num { display: inline-block; min-width: 24px; height: 24px; line-height: 24px; text-align: center; font-size: 12px; text-decoration: none; border-radius: 50%; margin-bottom: 2px; }
.cal-celda.hoy .cal-num { background: var(--acento); color: var(--acento-texto); }
.cal-mas { display: block; font-size: 11px; color: var(--gris); text-decoration: none; padding-left: 4px; }
/* semana y día */
.cal-rejilla { display: grid; grid-template-columns: 56px repeat(var(--cols), minmax(0, 1fr)); background: var(--superficie);
  border: 1px solid var(--linea); border-radius: var(--radio-p); min-width: 760px; }
.cal-rejilla.dia { min-width: 0; }
.cal-esquina { border-bottom: 1px solid var(--linea); }
.cal-cab { padding: 8px 4px; text-align: center; border-bottom: 1px solid var(--linea); border-left: 1px solid var(--linea); font-size: 13px; }
.cal-cab a { text-decoration: none; }
.cal-cab.hoy b { background: var(--acento); color: var(--acento-texto); border-radius: 50%; padding: 2px 6px; }
.cal-td-lbl { font-size: 11px; color: var(--gris); padding: 4px; }
.cal-tododia { border-left: 1px solid var(--linea); border-bottom: 1px solid var(--linea); padding: 3px; min-height: 30px; cursor: pointer; min-width: 0; }
.cal-horas > div { font-size: 11px; color: var(--gris); text-align: right; padding-right: 6px; transform: translateY(-7px); }
.cal-horas > div:first-child { visibility: hidden; }
.cal-col { position: relative; border-left: 1px solid var(--linea); cursor: pointer; min-width: 0; }
.cal-col.hoy { background: color-mix(in srgb, var(--acento) 3%, transparent); }
.cal-linea { border-bottom: 1px solid var(--linea); }
.cal-col:hover .cal-linea { border-bottom-color: var(--borde); }
@media (max-width: 700px) { .cal-celda { min-height: 72px; } .cal-mes .ev b { font-weight: 400; } .cal-barra .segmentos { order: 5; width: 100%; } }
/* Selector de cliente */
.elegir-cliente { position: relative; }
.elegir-cliente .sugerencias { position: absolute; z-index: 20; left: 0; right: 0; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-p); box-shadow: 0 8px 24px #0002; max-height: 280px; overflow: auto; }
.elegir-cliente .sugerencias button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 12px; font: inherit; cursor: pointer; color: var(--texto); }
.elegir-cliente .sugerencias button:hover { background: var(--suave); }
.elegir-cliente .elegido { margin-top: 6px; }

/* Parte de trabajo (móvil primero) */
.parte { display: grid; gap: 14px; max-width: 640px; }
.parte .panel + .panel { margin-top: 0; }
.parte .panel { padding: 18px; }
.parte-nombre { font-size: 20px; margin: 2px 0 4px; }
.parte-enlace { display: block; margin-top: 8px; color: var(--texto); text-decoration: none; font-size: 14px; }
.parte-botones { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.parte-botones:empty { display: none; }
.parte-que { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--borde); font-size: 14px; }
.parte-reloj { max-width: none; }
.parte-reloj .btn.grande { font-size: 19px; padding: 18px; }
.parte-personas { text-align: left; }
.parte-personas .fila-horas { grid-template-columns: minmax(0, 1fr) auto auto; }
.parte-personas select { width: auto; }
.parte-titulo { font-size: 14px; font-weight: 400; margin: 0 0 12px; }
.parte-form { display: grid; gap: 12px; }
.parte-form .segmentos button { flex: 1; padding: 10px 13px; font-size: 14px; }
.parte textarea { width: 100%; font: inherit; font-size: 15px; }
.parte-buscar { display: block; margin-top: 14px; }
.parte-resultados { display: grid; border: 1px solid var(--borde); border-radius: var(--radio-p); margin-top: 6px; max-height: 280px; overflow: auto; }
.parte-resultados button { display: flex; justify-content: space-between; gap: 10px; text-align: left; background: var(--superficie); color: var(--texto);
  border: 0; border-bottom: 1px solid var(--borde); padding: 11px 12px; font: inherit; font-size: 13.5px; cursor: pointer; }
.parte-resultados button:hover { background: var(--suave); }
.parte-material { display: grid; grid-template-columns: minmax(0, 1fr) 70px 90px auto; gap: 8px; margin-top: 12px; }
.parte-valoracion { width: 100%; }
.parte-valoracion td { padding: 8px 0; border-bottom: 1px solid var(--borde); vertical-align: top; }
.parte-valoracion tr.total td { font-size: 17px; border-bottom: 0; padding-top: 12px; }
.parte-final { display: grid; gap: 8px; text-align: center; }
@media (max-width: 560px) {
  .parte-material { grid-template-columns: 1fr 1fr; } .parte-material input[name=descripcion] { grid-column: 1 / -1; }
  .parte-material .btn { grid-column: 1 / -1; }
  .parte-personas .fila-horas { grid-template-columns: minmax(0, 1fr) auto; } .parte-personas select { grid-column: 1 / -1; width: 100%; }
}
.parte .fila-horas.parte-mat { grid-template-columns: minmax(0, 1fr) auto auto; }
.parte .enlace-quitar { padding: 5px 10px; font-size: 12px; }
.parte-repuesto { font-size: 12.5px; margin-top: 4px; color: var(--gris); white-space: nowrap; }
.parte-repuesto-nuevo { grid-column: 1 / -1; font-size: 13px; }
.parte-form .segmentos button { min-width: 0; }
.parte-firmado img { max-width: 100%; max-height: 140px; display: block; margin: 4px 0 8px; background: #fff; border-radius: var(--radio-p); }
.dlg-firma { box-sizing: border-box; width: min(640px, calc(100% - 16px)); max-width: none; max-height: calc(100dvh - 16px); padding: 18px; }
.dlg-firma * { box-sizing: border-box; min-width: 0; }
.firma-form { display: grid; gap: 12px; }
.firma-form h2 { margin: 0; font-size: 18px; font-weight: 400; }
.firma-resumen { background: var(--suave); border-radius: var(--radio-p); padding: 12px; font-size: 13.5px; max-height: 30dvh; overflow: auto; white-space: pre-wrap; }
.firma-total { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--borde); white-space: normal; }
.firma-total b { font-size: 18px; font-weight: 400; }
.firma-caja { position: relative; height: 190px; border: 1.5px dashed var(--linea); border-radius: var(--radio-p); background: #fff; }
.firma-caja canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.firma-guia { position: absolute; left: 14px; bottom: 10px; color: #9a9a9a; font-size: 12px; pointer-events: none; }
.firma-caja.con-firma .firma-guia { display: none; }
.firma-botones { display: flex; gap: 8px; } .firma-botones .primario { flex: 1; }
.firma-sin summary { cursor: pointer; font-size: 13px; color: var(--gris); }
.firma-sin[open] { display: grid; gap: 8px; }
.firma-legal { margin: 0; }
.cobro-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.cobro-cifras div { display: grid; } .cobro-cifras b { font-size: 18px; font-weight: 400; }
.verde-texto { color: var(--verde, #1f8a4c); }
.parte-cobro .fila-horas.anulado { opacity: .5; text-decoration: line-through; }
.cobro-form { display: grid; gap: 12px; margin-top: 14px; }
.cobro-form .segmentos button { flex: 1 1 40%; padding: 10px; font-size: 13.5px; }
.cobro-linea { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cobro-qr { display: grid; justify-items: center; gap: 8px; text-align: center; margin-top: 12px; }
.cobro-qr svg { width: min(260px, 80vw); height: auto; aspect-ratio: 1; background: #fff; border-radius: 8px; shape-rendering: crispEdges; }
.cobro-qr p { margin: 0; font-size: 13.5px; }
.parte-factura { display: grid; gap: 8px; justify-items: start; } .parte-factura p { margin: 0; }
.mant-cabeza { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.mant-kpis { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.mant-sistemas { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.mant-datos { display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; font-size: 13.5px; }
.mant-datos > span { color: var(--gris); } .mant-datos > b { font-weight: 400; }
.mant-aviso { display: grid; gap: 6px; justify-items: start; margin: 0; }
.planes-elegir button { flex: 1; display: grid; gap: 2px; padding: 10px; border-radius: 12px; text-align: center; }
.planes-elegir button span { font-size: 15px; } .planes-elegir button small { font-size: 11px; opacity: .8; }
.cobro-qr input { width: 100%; font-size: 12px; }

/* Ajustes → Fuentes de datos */
.fuentes-panel { display: grid; gap: 0; padding-block: 8px; }
.fuente { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 10px 24px; padding: 16px 0; border-bottom: 1px solid var(--borde); }
.fuente:last-child { border-bottom: 0; }
.fuente p { margin: 4px 0 0; }
.fuente-controles { display: grid; gap: 10px; align-content: start; }
.fuente-orden { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fuente-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--linea); border-radius: 99px; padding: 4px 6px 4px 10px; font-size: 13px; background: var(--superficie); }
.fuente-chip b { font-weight: 400; color: var(--gris); }
.fuente-chip button { border: 0; background: var(--suave); color: var(--texto); border-radius: 50%; width: 22px; height: 22px; cursor: pointer; font-size: 12px; }
.fuente-chip button:disabled { opacity: .35; cursor: default; }
.fuente-orden-fijo { margin: 0; font-size: 13px; color: var(--gris); }
.fuente-modos button { flex: 1; }
@media (max-width: 760px) { .fuente { grid-template-columns: 1fr; } }

/* Ajustes → Conexiones */
.conexiones { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.conexiones .panel + .panel { margin-top: 0; }
.conexion { display: grid; gap: 10px; min-width: 0; }
.conexion > * { min-width: 0; }
.conexion-cabeza { display: flex; justify-content: space-between; gap: 14px; align-items: start; }
.conexion-cabeza h3 { margin: 0 0 2px; font-size: 16px; font-weight: 400; }
.conexion-cabeza p { margin: 0; max-width: 70ch; }
.conexion-resumen { margin: 0; font-size: 14px; }
.conexion-habilita { margin: 8px 0 0; }
.conexion-habilita summary { cursor: pointer; }
.conexion-habilita ul, .conexion-activada ul { margin: 6px 0 0; padding-left: 18px; }
.conexion-habilita li, .conexion-activada li { margin: 2px 0; }
.conexion-activada { border-left: 3px solid var(--verde, #1f8a4c); margin: 0 0 16px; display: grid; gap: 8px; }
.conexion-activada.apagada { border-left-color: var(--gris); }
.conexion-activada .parte-botones { margin-top: 4px; }
.conexion-form { display: grid; gap: 12px; max-width: 560px; }
.conexion-modos { display: grid; gap: 10px; }
.cuenta-correo { border-top: 1px solid var(--linea); padding-top: 10px; display: grid; gap: 8px; min-width: 0; }
.cuenta-correo-cabeza { display: flex; justify-content: space-between; gap: 10px; align-items: start; flex-wrap: wrap; }
.cuenta-correo-cabeza > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.cuenta-correo-estados { display: flex; gap: 6px; flex-wrap: wrap; }
/* en el móvil, «Conectado · desde el 3 de octubre de 2026» no cabe en una línea: que baje en vez de ensanchar la página */
@media (max-width: 600px) { .conexion .estado { white-space: normal; max-width: 100%; } .cuenta-correo-estados { max-width: 100%; } .conexion code { overflow-wrap: anywhere; } }
.correo-grupo { border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px 12px; margin: 0; display: grid; gap: 10px; min-width: 0; }
.correo-grupo legend { font-size: 12.5px; color: var(--gris); padding: 0 4px; }
.correo-modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.aviso-linea.ok { border-left-color: var(--verde, #1f8a4c); }

/* Documentación técnica */
.tec-importar .tec-tipo { cursor: pointer; }
.tec-importar .tec-tipo.ocupado { opacity: .6; }
.tec-propuesta { display: grid; gap: 12px; margin-top: 14px; }
.tec-cifras { display: flex; gap: 22px; flex-wrap: wrap; }
.tec-cifras div { display: grid; } .tec-cifras b { font-size: 22px; font-weight: 400; } .tec-cifras span { font-size: 12.5px; color: var(--gris); }
.tec-salida { white-space: pre-wrap; font-size: 12px; background: var(--suave); padding: 10px; border-radius: 8px; max-height: 260px; overflow: auto; }
.tec-dif { font-size: 12.5px; } .tec-dif s { color: var(--gris); }
.tec-lista { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.tec-campos { display: grid; gap: 10px; max-height: 55vh; overflow: auto; }
.elegir-cliente .elegido { margin-top: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  border: 1px solid var(--borde); border-radius: 10px; padding: 8px 8px 8px 12px; background: var(--superficie); }
.elegir-cliente .quitar-cliente { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--gris);
  font-size: 20px; line-height: 1; cursor: pointer; }
.elegir-cliente .quitar-cliente:hover { background: var(--suave); color: var(--texto); }
.campo-cliente { display: grid; gap: 6px; align-content: start; }
.campo-cliente > label { display: block; }
.elegir-cliente .elegido { font-size: 14px; color: var(--texto); }

/* Finanzas (app de Jaime dentro de Elia) */
.finanzas-barra { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin: -8px 0 8px; min-height: 36px; }
.finanzas-puente { margin: 0 -8px; }
.finanzas-puente iframe { display: block; width: 100%; height: calc(100dvh - 92px); border: 0; border-radius: var(--radio); background: var(--superficie); }

/* Movimiento (como la app de Jaime): cada página entra suave, las tarjetas se elevan y el menú se desliza.
   Quien pida menos movimiento en su sistema no ve animaciones. */
@keyframes pagina-entra { 0% { opacity: .1; filter: blur(4px); transform: translateY(14px) scale(.99); }
                          60% { opacity: .96; filter: blur(.4px); transform: translateY(1px); }
                          100% { opacity: 1; filter: none; transform: none; } }
@keyframes tarjeta-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sub-abre { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
#contenido.entrando { animation: pagina-entra .7s cubic-bezier(.18,.7,.24,1) both; transform-origin: 50% 10%; }
#contenido .kpis > .kpi { animation: tarjeta-entra .55s cubic-bezier(.2,.75,.2,1) both; }
#contenido .kpis > .kpi:nth-child(2) { animation-delay: .04s; } #contenido .kpis > .kpi:nth-child(3) { animation-delay: .08s; }
#contenido .kpis > .kpi:nth-child(4) { animation-delay: .12s; } #contenido .kpis > .kpi:nth-child(5) { animation-delay: .16s; }
#contenido .kpis > .kpi:nth-child(n+6) { animation-delay: .2s; }
a.kpi, .panel { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
a.kpi:hover { transform: translateY(-3px); box-shadow: 0 8px 24px #0000000d; }
#menu a { transition: color .3s ease, background-color .3s ease; }
#menu a > span, #menu a { transform-origin: left center; }
#menu .sub a { transition: transform .5s cubic-bezier(.22,1,.36,1), color .3s ease, background-color .3s ease; }
#menu .sub a:hover { transform: translateX(3px); }
#menu .sub:not([hidden]) { animation: sub-abre .35s cubic-bezier(.2,.75,.2,1) both; }
@media (prefers-reduced-motion: reduce) {
  #contenido.entrando, #contenido .kpis > .kpi, #menu .sub:not([hidden]) { animation: none !important; }
  a.kpi:hover, #menu .sub a:hover { transform: none; }
}

/* «Reducir animaciones y movimiento» (Ajustes → Apariencia), como en la app de Jaime */
:root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important; }
:root[data-motion="reduced"] a.kpi:hover, :root[data-motion="reduced"] #menu .sub a:hover { transform: none; }

/* borrar un aviso con su X */
.aviso-item .borrar-aviso { border: 0; background: none; color: var(--gris); font-size: 18px; line-height: 1; width: 26px; height: 26px;
  border-radius: 50%; cursor: pointer; opacity: .55; transition: opacity .2s, background-color .2s; }
.aviso-item:hover .borrar-aviso, .aviso-item .borrar-aviso:focus-visible { opacity: 1; }
.aviso-item .borrar-aviso:hover { background: var(--suave); color: var(--texto); }

/* Operaciones · Archivos del proyecto */
.arch-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.arch-migas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; }
.arch-migas a { color: var(--texto); text-decoration: none; } .arch-migas a:last-child { font-weight: 400; } .arch-migas span { color: var(--gris); }
.arch-zona { display: grid; gap: 14px; min-height: 160px; transition: border-color .2s, background-color .2s; }
.arch-zona.arch-encima { border-color: var(--texto); background: var(--suave); }
.arch-carpetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.arch-carpeta { display: flex; align-items: center; gap: 10px; padding: 12px 10px 12px 14px; border: 1px solid var(--borde); border-radius: 12px; cursor: pointer;
  transition: transform .2s, border-color .2s; }
.arch-carpeta:hover { transform: translateY(-2px); border-color: var(--gris); }
.arch-carpeta > span:nth-child(2) { display: grid; flex: 1; min-width: 0; } .arch-carpeta b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arch-icono { font-size: 20px; color: var(--gris); }
.arch-acciones { display: flex; align-items: center; gap: 2px; }
.arch-acciones { opacity: .6; transition: opacity .2s; } .arch-carpeta:hover .arch-acciones, .arch-acciones:focus-within { opacity: 1; }
.enlace-btn { border: 0; background: none; padding: 0; font: inherit; color: var(--texto); cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.arch-zona .borrar-aviso { border: 0; background: none; color: var(--gris); font-size: 18px; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; }
.arch-zona .borrar-aviso:hover { background: var(--suave); color: var(--texto); }
@media (prefers-reduced-motion: reduce) { .arch-carpeta:hover { transform: none; } }

/* Operaciones · Bitácora de la obra */
.bit-proximos { display: grid; gap: 10px; }
.bit-proximo { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--borde); }
.bit-proximo:last-child { border-bottom: 0; padding-bottom: 0; }
.bit-dia { display: grid; gap: 10px; margin-bottom: 12px; }
.bit-dia h3 { font-weight: 400; font-size: 15px; margin: 0; } .bit-dia h3::first-letter { text-transform: uppercase; }
.bit-bloque { display: grid; grid-template-columns: 110px 1fr; gap: 12px; font-size: 14px; line-height: 1.6; }
.bit-etiqueta { color: var(--gris); font-size: 12.5px; }
.bit-lista { margin: 6px 0 0; padding-left: 18px; }
@media (max-width: 640px) { .bit-bloque, .bit-proximo { grid-template-columns: 1fr; gap: 2px; } }

/* Operaciones · reuniones, checklist y tickets */
.ev.ev-reunion { border-style: dashed; }
.ev.ev-ausencia { border-left-color: var(--gris2); color: var(--gris); cursor: default;
  background: repeating-linear-gradient(135deg, var(--suave) 0 6px, transparent 6px 12px); }
.ev-check { margin-top: 6px; justify-self: start; font-size: 12.5px; padding: 4px 10px; }
.check-grupo { display: grid; gap: 4px; margin: 10px 0; }
.check-item { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.check-item > span { flex: 1; } .check-item.hecho > span { text-decoration: line-through; color: var(--gris); }
.check-item .borrar-aviso { border: 0; background: none; color: var(--gris); font-size: 18px; cursor: pointer; }
.check-nuevo { display: grid; grid-template-columns: 150px 1fr 110px auto; gap: 8px; margin-top: 12px; }
@media (max-width: 640px) { .check-nuevo { grid-template-columns: 1fr 1fr; } }
.lista-reuniones { display: grid; padding: 4px 18px; }
.reunion-fila { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--borde); color: var(--texto); text-decoration: none; }
.reunion-fila:last-child { border-bottom: 0; } .reunion-fila:hover b { text-decoration: underline; }
.reunion-ficha { display: grid; gap: 12px; } .reunion-ficha h2 { margin: 0; font-weight: 400; }
.reunion-asist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.reunion-asist .quitar-cliente { border: 0; background: none; cursor: pointer; color: var(--gris); }
.ticket-foto { justify-content: center; padding: 14px; font-size: 15px; }
/* botón X de borrar, igual en toda la app */
.borrar-aviso { border: 0; background: none; color: var(--gris); font-size: 18px; line-height: 1; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; }
.borrar-aviso:hover { background: var(--suave); color: var(--texto); }

/* Núcleo · Ajustes → Empresa (datos y logo de los documentos) */
.emp-rejilla { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.emp-form h2, .emp-lado h2 { font-size: 15px; font-weight: 400; margin: 4px 0 12px; }
.emp-form h2:not(:first-child) { margin-top: 22px; }
.emp-form > label { margin-top: 14px; display: grid; gap: 4px; }
.emp-lado { display: grid; gap: 16px; }
.emp-color { display: flex; align-items: center; gap: 10px; }
.emp-color input[type=color] { width: 48px; height: 36px; padding: 2px; border-radius: var(--radio-p); border: 1px solid var(--borde); background: var(--superficie); cursor: pointer; }
.emp-logo { display: grid; place-items: center; min-height: 110px; padding: 14px; border: 1px dashed var(--borde); border-radius: var(--radio-p); margin-bottom: 8px;
  /* cuadrícula para que se vea que el fondo del logo es transparente */
  background-color: #fff; background-image: linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%);
  background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.emp-logo img { max-width: 100%; max-height: 110px; object-fit: contain; }
.emp-subir { cursor: pointer; }
.emp-doc { background: #fff; color: #1d1d1f; border: 1px solid var(--borde); border-radius: 6px; padding: 18px 18px 12px; font-size: 10.5px; line-height: 1.45;
  font-family: Helvetica, Arial, sans-serif; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
.emp-doc-cab { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.emp-doc-logo { max-width: 45%; } .emp-doc-logo img { max-height: 42px; max-width: 100%; object-fit: contain; display: block; }
.emp-doc-logo b { font-size: 15px; color: var(--emp-color); }
.emp-doc-lema { display: block; margin-top: 3px; font-size: 7.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8a8f98; }
.emp-doc-datos { display: grid; text-align: right; color: #666; } .emp-doc-datos b { color: #1d1d1f; }
.emp-doc-titulo { margin-top: 14px; display: grid; } .emp-doc-titulo small { color: var(--emp-color); letter-spacing: .12em; font-size: 9px; font-weight: 400; }
.emp-doc-titulo b { font-size: 15px; } .emp-doc-titulo span { color: #666; }
.emp-doc-raya { height: 1.5px; background: var(--emp-color); margin: 10px 0 12px; }
.emp-doc-lineas { display: grid; gap: 7px; } .emp-doc-lineas i { display: block; height: 6px; border-radius: 3px; background: #eee; }
.emp-doc-pie { margin-top: 16px; padding-top: 7px; border-top: .5px solid #ccc; color: #888; font-size: 9px; position: relative; padding-right: 70px; }
.emp-doc-pie span { position: absolute; right: 0; top: 7px; }
@media (max-width: 900px) { .emp-rejilla { grid-template-columns: 1fr; } }
/* Datos fiscales (web/datos-fiscales.js): en Ajustes → Empresa y en Finanzas → Impuestos */
.fis-form h3 { margin: 18px 0 10px; font-size: 15px; }
.fis-form h3:first-of-type { margin-top: 4px; }
.fis-form .nota { margin: 8px 0 0; max-width: 75ch; }
.fis-casillas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 16px; margin-bottom: 14px; }
.fis-casilla { display: flex; gap: 8px; align-items: flex-start; font-weight: normal; }
.fis-casilla input { width: auto; margin-top: 3px; }
.fis-regimen { margin: 10px 0 0; padding: 10px 12px; border-left: 3px solid var(--linea); }
.fis-locales { margin: 12px 0 0; }
.fis-locales > p { margin: 0 0 6px; }
.fis-local { align-items: end; }
.fis-local .btn { justify-self: start; }
.fis-festivos { margin: 12px 0 4px; font-size: 13px; }
.fis-festivos summary { cursor: pointer; }
.fis-festivos p { margin: 8px 0 0; }
.emp-fiscal { margin-top: 16px; }

/* ---------- autocompletar (web/autocompletar.js): sugerencias al escribir ---------- */
.ac-panel { position: fixed; z-index: 1000; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-p);
  box-shadow: 0 12px 32px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06); overflow-y: auto; overscroll-behavior: contain; padding: 4px;
  max-height: 320px; text-align: left; font-weight: 400; line-height: 1.35; animation: ac-entra .12s ease-out; }
@keyframes ac-entra { from { opacity: 0; transform: translateY(-3px); } }
.ac-op { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 7px; cursor: pointer; color: var(--texto); min-height: 36px; justify-content: center; }
.ac-op[aria-selected="true"] { background: var(--suave); }
.ac-op.ac-actual .ac-et::after { content: " ✓"; color: var(--gris); }
.ac-et { font-size: 14px; overflow-wrap: anywhere; }
.ac-det { font-size: 12px; color: var(--gris); overflow-wrap: anywhere; }
.ac-op mark { background: none; color: inherit; font-weight: 400; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.ac-crear { border-top: 1px solid var(--linea); border-radius: 0 0 7px 7px; margin-top: 2px; }
.ac-crear .ac-et { color: var(--texto); font-weight: 400; }
.ac-lista:empty + .ac-estado { border-top: 0; }
.ac-estado { padding: 8px 10px; color: var(--gris); font-size: 13px; }
.ac-estado:empty { display: none; }
.ac-oculto { display: none !important; }
input.ac-select { cursor: pointer; padding-right: 30px; text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, var(--gris) 50%), linear-gradient(135deg, var(--gris) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
input.ac-select:focus { cursor: text; }
:root[data-theme="dark"] .ac-panel { box-shadow: 0 12px 32px rgba(0,0,0,.45); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .ac-panel { box-shadow: 0 12px 32px rgba(0,0,0,.45); } }
@media (prefers-reduced-motion: reduce) { .ac-panel { animation: none; } }
@media (pointer: coarse) { .ac-op { min-height: 44px; } }
.ac-filtro { margin: 4px 0 8px; }
/* alta rápida de contactos desde un buscador (web/autocompletar.js · altaContacto) */
dialog.alta-contacto { width: min(520px, calc(100% - 24px)); }
dialog.alta-contacto .nota { margin: 2px 0 12px; }
.alta-parecidos { margin: 12px 0 4px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: var(--radio-p); background: var(--suave); }
.alta-parecidos p { margin: 0 0 6px; font-size: 13px; }
.alta-parecidos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.alta-parecidos li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.alta-parecidos li > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow-wrap: anywhere; }
.alta-parecidos .btn { flex: none; }
/* ---------- Elia, la asistente: botón con su logotipo y globo de chat (web/elia-asistente.js) ---------- */
.asistente-boton { display: flex; align-items: center; justify-content: flex-start; width: 100%; padding: 12px 14px 12px 12px; border: 0; border-radius: 14px;
  background: none; color: var(--texto); cursor: pointer; transition: background-color .35s ease, color .35s ease; }
.asistente-boton:hover, .asistente-boton[aria-expanded="true"] { background: var(--suave); }
.asistente-boton .elia-marca { height: 25px; width: auto; display: block; overflow: visible; }
.asistente-boton:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }
.elia-marca .elia-e path { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.elia-marca .elia-e { transform-box: fill-box; transform-origin: 30% 50%; }
/* al pasar el ratón: las letras se encienden y una nebulosa recorre la palabra de la «e» a la «a» (web/elia-disolver.js);
   la letra que lleva la nebulosa se oculta un momento y, al volver, queda apagada (en su estado normal) */
.elia-marca .elia-e, .elia-marca .elia-resto > * { transition: opacity .45s cubic-bezier(.4,0,.2,1); }
.elia-marca .elia-disuelta { opacity: 0; transition-duration: .22s; }
/* el logotipo del menú no lleva recuadro al pasar el ratón: el efecto es solo el de las letras */
.asistente-boton.asistente-marca:hover, .asistente-boton.asistente-marca[aria-expanded="true"] { background: none; }
@media (prefers-reduced-motion: reduce) {
  .elia-animable.animando .elia-e path { animation: none; }
  .elia-animable.animando .elia-e { animation: elia-e-opacidad 1.2s ease both; }
}
@keyframes elia-e-opacidad { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* en el móvil, arriba a la izquierda el logotipo de Elia entero (abre su globo); el de la empresa va en la cabecera de la página */
.movil-cabecera button.elia-movil { display: inline-flex; align-items: center; justify-content: flex-start; height: 40px; padding: 0 4px; margin-left: -4px;
  border: 0; background: none; color: var(--texto); line-height: 0; cursor: pointer; flex: 0 1 auto; min-width: 0; border-radius: var(--radio-p); }
.elia-movil .elia-marca { height: 24px; width: auto; max-width: 100%; overflow: visible; display: block; }
.acciones-movil { display: inline-flex; align-items: center; gap: 8px; flex: none; }

.elia-globo {
  --g-fondo: var(--superficie); --g-linea: var(--borde); --g-texto: var(--texto); --g-gris: var(--gris); --g-suave: var(--suave);
  position: fixed; z-index: 60; left: calc(var(--menu) + 14px); bottom: 14px;
  width: min(410px, calc(100vw - var(--menu) - 28px)); height: min(640px, calc(100dvh - 28px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--g-fondo); color: var(--g-texto); border: 1px solid var(--g-linea); border-radius: 22px;
  box-shadow: 0 30px 80px -24px rgba(15, 17, 20, .28), 0 10px 24px -12px rgba(15, 17, 20, .14), 0 0 0 .5px rgba(15, 17, 20, .04);
  font-family: var(--letra); font-size: 13.5px;
  opacity: 0; transform: translateY(14px) scale(.975); transform-origin: 0% 100%;
  transition: opacity .28s ease, transform .42s cubic-bezier(.16,1,.3,1), width .42s cubic-bezier(.16,1,.3,1), height .42s cubic-bezier(.16,1,.3,1),
              background-color .5s ease, border-color .5s ease, color .5s ease;
}
.elia-globo.abierto { opacity: 1; transform: none; }
.elia-globo.grande { width: min(780px, calc(100vw - var(--menu) - 28px)); height: calc(100dvh - 28px); }
:root[data-theme="dark"] .elia-globo { box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .03); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .elia-globo { box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .03); } }
.elia-globo.modo-voz { --g-fondo: #0e1013; --g-linea: #22262d; --g-texto: #e9ecf1; --g-gris: #8d939d; --g-suave: #1b1f25; }
.elia-velo { display: none; }

.eg-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 12px 12px 20px; border-bottom: 1px solid var(--g-linea);
  transition: border-color .5s ease; }
.modo-voz .eg-cabecera { border-bottom-color: transparent; position: absolute; top: 0; left: 0; right: 0; z-index: 2; background: linear-gradient(#0e1013cc, #0e101300); }
.eg-marca { display: inline-flex; align-items: center; gap: 12px; color: var(--g-texto); }
.eg-logo { height: 19px; width: auto; display: block; overflow: visible; }
.eg-sub { padding-top: 3px; }
.eg-sub { font-size: 9px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--g-gris); }
.eg-acciones { display: inline-flex; gap: 2px; }
.eg-icono { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--g-gris); cursor: pointer;
  transition: background-color .25s ease, color .25s ease; }
.eg-icono:hover, .eg-icono[aria-pressed="true"] { background: var(--g-suave); color: var(--g-texto); }
.eg-icono svg, .eg-redondo svg, .eg-hablar svg, .eg-enviar svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.elia-globo :focus-visible { outline: 2px solid var(--g-texto); outline-offset: 2px; }

.eg-cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.eg-cuerpo[hidden] { display: none; }
.eg-aviso { margin: 12px 16px 0; padding: 10px 12px; border-radius: 12px; background: var(--g-suave); color: var(--g-gris); font-size: 12.5px; line-height: 1.5; }
.eg-aviso a { color: var(--g-texto); }
.eg-mensajes { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 20px 18px 16px; scroll-behavior: smooth; overscroll-behavior: contain; }
.eg-cargando { color: var(--g-gris); margin: auto; font-size: 12.5px; }
.eg-vacio { margin-top: auto; display: grid; gap: 10px; }
.eg-hola { font-size: 22px; letter-spacing: -.2px; margin: 0; }
.eg-intro { color: var(--g-gris); line-height: 1.6; margin: 0 0 6px; font-size: 13px; }
.eg-sugerencias { display: grid; gap: 6px; }
.eg-sugerencias button { text-align: left; border: 1px solid var(--g-linea); background: none; color: var(--g-texto); border-radius: 12px; padding: 10px 13px; font-size: 12.5px;
  cursor: pointer; transition: border-color .25s ease, background-color .25s ease; }
.eg-sugerencias button:hover:not(:disabled) { border-color: var(--g-gris); background: var(--g-suave); }
.eg-sugerencias button:disabled { opacity: .5; cursor: default; }
.eg-msg { display: grid; gap: 5px; max-width: 88%; animation: eg-entra .38s cubic-bezier(.16,1,.3,1) both; }
.eg-msg.yo { align-self: flex-end; justify-items: end; }
.eg-burbuja { padding: 10px 14px; border-radius: 16px; line-height: 1.55; overflow-wrap: anywhere; background: var(--g-suave); }
.eg-msg.yo .eg-burbuja { background: var(--g-texto); color: var(--g-fondo); border-bottom-right-radius: 6px; }
.eg-msg.elia .eg-burbuja { border-bottom-left-radius: 6px; }
.eg-consultado { color: var(--g-gris); font-size: 10.5px; letter-spacing: .2px; padding-left: 4px; }
.eg-pensando { display: flex; gap: 5px; padding: 14px 16px; }
.eg-pensando span { width: 6px; height: 6px; border-radius: 50%; background: var(--g-gris); animation: eg-punto 1.2s infinite ease-in-out; }
.eg-pensando span:nth-child(2) { animation-delay: .15s; } .eg-pensando span:nth-child(3) { animation-delay: .3s; }
@keyframes eg-punto { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
@keyframes eg-entra { from { opacity: 0; transform: translateY(6px); } }
.eg-escribir { padding: 10px 14px 12px; display: grid; gap: 8px; }
.eg-caja { display: flex; align-items: flex-end; gap: 6px; border: 1px solid var(--g-linea); border-radius: 16px; padding: 5px 5px 5px 14px; background: var(--g-fondo);
  transition: border-color .25s ease, box-shadow .25s ease; }
.eg-caja:focus-within { border-color: var(--g-gris); }
.eg-caja textarea { flex: 1; border: 0; background: none; resize: none; padding: 8px 0; min-height: 36px; max-height: 160px; font: inherit; color: inherit; outline: none; border-radius: 0; }
.eg-caja textarea:focus-visible { outline: none; }
.eg-enviar { flex: none; width: 36px; height: 36px; border-radius: 12px; border: 0; background: var(--g-texto); color: var(--g-fondo); display: grid; place-items: center; cursor: pointer;
  transition: opacity .2s ease, transform .2s ease; }
.eg-enviar:disabled { opacity: .25; cursor: default; }
.eg-enviar svg { stroke-width: 1.8; width: 17px; height: 17px; }
.eg-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 4px; }
.eg-leer { display: inline-flex; flex-direction: row; align-items: center; gap: 7px; font-size: 11.5px; color: var(--g-gris); cursor: pointer; }
.eg-leer input { width: auto; margin: 0; accent-color: var(--g-texto); }
.eg-nueva { border: 0; background: none; color: var(--g-gris); font-size: 11.5px; cursor: pointer; padding: 4px 2px; }
.eg-nueva:hover { color: var(--g-texto); text-decoration: underline; text-underline-offset: 3px; }

/* modo voz: la «e» del logotipo como nebulosa (web/elia-nebulosa.js) */
.eg-voz { position: relative; }
.eg-nebulosa { flex: 1; min-height: 0; width: 100%; display: block; }
.eg-voz-texto { position: absolute; left: 0; right: 0; bottom: 104px; display: grid; gap: 8px; justify-items: center; padding: 0 28px; text-align: center; pointer-events: none; }
.eg-subtitulo { margin: 0; color: #c9ced6; text-shadow: 0 1px 12px #0e1013; font-size: 13px; line-height: 1.55; max-height: 4.7em; overflow: hidden; max-width: 34ch;
  -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.eg-subtitulo:empty { display: none; }
.eg-estado { margin: 0; color: #8d939d; font-size: 10px; letter-spacing: 2.4px; text-transform: uppercase; }
.eg-controles { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; justify-content: center; align-items: center; gap: 28px; }
.eg-redondo { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #2a2f37; background: rgba(255,255,255,.02); color: #aab0ba; display: grid; place-items: center; cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.eg-redondo:hover { color: #fff; border-color: #444b55; }
.eg-hueco { visibility: hidden; }
.eg-hablar { width: 62px; height: 62px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(236,241,248,.08); color: #eef1f6; display: grid; place-items: center;
  cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); position: relative;
  transition: background-color .3s ease, transform .3s cubic-bezier(.16,1,.3,1), border-color .3s ease; }
.eg-hablar svg { width: 22px; height: 22px; }
.eg-hablar:hover:not(:disabled) { background: rgba(236,241,248,.14); transform: scale(1.04); }
.eg-hablar:disabled { opacity: .4; cursor: default; }
.eg-hablar::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(236,241,248,.22); opacity: 0; transform: scale(.9);
  transition: opacity .4s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.elia-globo[data-voz="escuchando"] .eg-hablar, .elia-globo[data-voz="hablando"] .eg-hablar { background: #eef1f6; color: #0e1013; border-color: #eef1f6; }
.elia-globo[data-voz="escuchando"] .eg-hablar::after { opacity: 1; transform: scale(1); animation: eg-onda 2.2s cubic-bezier(.16,1,.3,1) infinite; }
@keyframes eg-onda { from { opacity: .7; transform: scale(.95); } to { opacity: 0; transform: scale(1.35); } }
.modo-voz .eg-solo-grande { display: none; }

@media (max-width: 860px) {
  .elia-globo, .elia-globo.grande { left: 0; right: 0; bottom: 0; width: 100%; height: calc(100dvh - 44px); border-radius: 22px 22px 0 0; border-bottom: 0;
    transform: translateY(40px); transform-origin: 50% 100%; padding-bottom: env(safe-area-inset-bottom); }
  .elia-globo.abierto { transform: none; }
  .elia-velo { display: block; position: fixed; inset: 0; z-index: 59; background: rgba(10, 11, 13, .38); opacity: 0; transition: opacity .3s ease; }
  .elia-velo.abierto { opacity: 1; }
  .elia-velo[hidden] { display: none; }
  .eg-solo-grande { display: none; }
  .eg-msg { max-width: 92%; }
}
@media (prefers-reduced-motion: reduce) {
  .elia-globo { transition: opacity .2s ease; transform: none; }
  .eg-msg, .eg-pensando span, .elia-globo[data-voz="escuchando"] .eg-hablar::after { animation: none; }
}
.modo-voz .eg-acciones [data-accion="voz"] { display: none; }   /* en voz, «volver al chat» está abajo, junto al micro */

/* Organizar arrastrando (web/organizar.js): pulsación larga de 2,5 s, modo organizar, hueco animado y «Vista ▾».
   Blanco, trazo fino y sombras suaves; claro, oscuro y tono salen de las variables de Apariencia. */
.org-vivo { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#contenido:not(.organizando) .org-oculta, #menu:not(.organizando) .org-oculta { display: none !important; }
#menu:not(.organizando) a.org-oculta.activo { display: flex !important; opacity: .55; }            /* la página en la que estás sí se marca */
#menu:not(.organizando) .area.org-oculta:has(a.activo) { display: block !important; opacity: .55; }
:is(#contenido, #menu) .org-quieta { animation: none !important; }
.org-boton-blanco { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 1px solid var(--borde); border-radius: 99px;
  background: var(--superficie); color: var(--texto); font-size: 12.5px; cursor: pointer; white-space: nowrap; transition: border-color .2s, background-color .2s; }
.org-boton-blanco:hover, .org-boton-blanco:focus-visible { border-color: var(--gris2); background: var(--suave); }
.org-boton-blanco.org-listo { border-color: var(--texto); }
/* mientras se mantiene pulsado: se hunde muy poco a poco (tras 0,3 s, para que un clic normal no se note) y nada de menú del navegador */
.org-pulsando, .org-pulsando * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
:is(#contenido, #menu) .org-pulsando { transform: scale(.985) !important; transition: transform 2.2s cubic-bezier(.3,0,.2,1) .3s !important; }
.org-anillo { position: fixed; z-index: 90; width: 42px; height: 42px; margin: -21px 0 0 -21px; pointer-events: none; border-radius: 50%;
  background: color-mix(in srgb, var(--superficie) 80%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px #00000014; opacity: 0; transform: scale(.7); transition: opacity .2s ease, transform .25s cubic-bezier(.2,.75,.2,1); }
.org-anillo.visible { opacity: 1; transform: none; }
.org-anillo svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.org-anillo circle { fill: none; stroke-width: 1.6; }
.org-anillo-fondo { stroke: color-mix(in srgb, var(--texto) 12%, transparent); }
.org-anillo-carga { stroke: var(--texto); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.org-anillo.visible .org-anillo-carga { animation: org-carga var(--org-dur, 2.2s) linear forwards; }
@keyframes org-carga { to { stroke-dashoffset: 0; } }
/* modo organizar: trazo discontinuo fino; al elegir uno, el resto de su grupo se apaga en gris */
.organizando .org-tarjeta { position: relative; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  outline: 1px dashed color-mix(in srgb, var(--gris2) 60%, transparent); outline-offset: 3px;
  transition: opacity .25s ease, filter .25s ease, box-shadow .25s ease, transform .25s cubic-bezier(.2,.75,.2,1), outline-color .25s; }
.organizando .org-tarjeta:hover { transform: none; outline-color: var(--gris); }
.organizando .org-tarjeta .kpi-etiqueta .flecha { visibility: hidden; }
.organizando .org-tarjeta.org-apagado { opacity: .42; filter: grayscale(1); }
.organizando .org-tarjeta.org-apagado:hover { opacity: .7; }
.organizando .org-tarjeta.org-elegida { z-index: 3; opacity: 1; filter: none; outline: 1px solid var(--texto); outline-offset: 4px; transform: scale(1.03);
  box-shadow: 0 16px 38px #0000001f, 0 2px 6px #0000000d; }
#menu.organizando .org-tarjeta.org-elegida { background: var(--superficie); border-radius: var(--radio-p); }
:is(#contenido, #menu) .org-tarjeta.org-levanta { animation: org-levanta .34s cubic-bezier(.2,.8,.3,1.25) both !important; }
@keyframes org-levanta { 0% { transform: scale(.985); } 55% { transform: scale(1.045); } 100% { transform: scale(1.03); } }
.organizando .org-tarjeta.org-oculta { opacity: .38; filter: grayscale(1); outline-style: dotted; }
.organizando .org-tarjeta.org-oculta:empty { display: flex; align-items: center; min-height: 46px; padding: 0 16px; border: 1px dashed var(--borde); border-radius: var(--radio); }
.organizando .org-tarjeta.org-oculta:empty::before { content: attr(data-titulo) " · oculto"; color: var(--gris); font-size: 12.5px; }
.org-tarjeta.org-arrastrando { cursor: grabbing; opacity: .97; filter: none; box-shadow: 0 24px 54px #00000026, 0 3px 8px #00000012 !important; }
body.org-arrastre, body.org-arrastre * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
.org-libre { transform: none !important; filter: none !important; animation: none !important; contain: none !important; will-change: auto !important; }
.org-hueco { border: 1.5px dashed color-mix(in srgb, var(--texto) 28%, transparent); border-radius: var(--radio);
  background: color-mix(in srgb, var(--texto) 3%, transparent); animation: org-hueco .18s ease both; }
#menu .org-hueco { border-radius: var(--radio-p); }
@keyframes org-hueco { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
:root[data-theme="dark"] .organizando .org-tarjeta.org-elegida, :root[data-theme="dark"] .org-tarjeta.org-arrastrando { box-shadow: 0 18px 44px #00000066 !important; }
/* barra «Organizando · Restablecer · Listo» */
.org-barra { position: fixed; left: 50%; bottom: 22px; z-index: 70; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 16px;
  background: color-mix(in srgb, var(--superficie) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--borde); border-radius: 99px; box-shadow: 0 14px 38px #0000001f; font-size: 13px; color: var(--texto);
  opacity: 0; transform: translate(-50%, 14px); transition: opacity .22s ease, transform .3s cubic-bezier(.2,.75,.2,1); max-width: calc(100vw - 24px); }
.org-barra.visible { opacity: 1; transform: translate(-50%, 0); }
.org-barra-punto { width: 7px; height: 7px; border-radius: 50%; background: var(--texto); flex: none; animation: org-latido 1.8s ease-in-out infinite; }
@keyframes org-latido { 50% { opacity: .25; } }
.org-barra-texto { white-space: nowrap; }
.org-barra-pista { color: var(--gris); font-size: 12px; white-space: nowrap; padding-left: 10px; border-left: 1px solid var(--borde); }
@media (max-width: 760px) { .org-barra { bottom: 14px; } .org-barra-pista { display: none; } }
/* «Vista ▾»: junto al título de la página y junto a «Áreas» en el menú */
.org-vista-boton { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px solid var(--borde); border-radius: 99px;
  background: var(--superficie); color: var(--gris); font: inherit; font-size: 12px; letter-spacing: 0; text-transform: none; cursor: pointer;
  transition: color .2s, border-color .2s; }
.org-vista-boton:hover, .org-vista-boton:focus-visible, .org-vista-boton[aria-expanded="true"] { color: var(--texto); border-color: var(--gris2); }
.org-vista-boton .org-flecha { font-size: 10px; transition: transform .2s; }
.org-vista-boton[aria-expanded="true"] .org-flecha { transform: rotate(180deg); }
.org-vista-sola { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.menu .grupo:has(.org-vista-boton) { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
#menu .org-vista-boton { height: 22px; padding: 0 7px; gap: 4px; font-size: 10.5px; border-color: transparent; background: transparent; opacity: 0; }
#menu:hover .org-vista-boton, #menu:focus-within .org-vista-boton, #menu .org-vista-boton[aria-expanded="true"], #menu.organizando .org-vista-boton { opacity: 1; }
#menu .org-vista-boton:hover, #menu .org-vista-boton[aria-expanded="true"] { border-color: var(--borde); background: var(--superficie); }
@media (hover: none) { #menu .org-vista-boton { opacity: 1; } }
.org-desplegable { position: fixed; z-index: 75; width: 300px; max-width: calc(100vw - 16px); display: flex; flex-direction: column;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); border-radius: 14px; box-shadow: 0 20px 50px #00000024;
  overflow: hidden; animation: org-aparece .18s cubic-bezier(.2,.75,.2,1) both; outline: none; }
@keyframes org-aparece { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.org-des-cabeza { display: flex; align-items: baseline; gap: 6px; padding: 13px 16px 6px; font-size: 12px; color: var(--gris); }
.org-des-titulo { font-size: 14px; color: var(--texto); }
.org-des-cuerpo { overflow: auto; padding: 0 8px 8px; flex: 1 1 auto; min-height: 0; }
.org-des-grupo h3 { margin: 10px 8px 4px; font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gris2); font-weight: 400; }
.org-des-grupo ul { list-style: none; margin: 0; padding: 0; }
.org-fila { display: flex; align-items: center; gap: 4px; padding: 2px 4px 2px 2px; border-radius: 9px; background: var(--superficie); position: relative; }
.org-fila:hover { background: var(--suave); }
.org-fila-asa, .org-fila-ojo { display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: 7px; cursor: pointer; flex: none; }
.org-fila-asa { width: 24px; height: 30px; color: var(--gris2); cursor: grab; touch-action: none; }
.org-fila-ojo { width: 32px; height: 30px; color: var(--texto); }
.org-fila-asa:hover, .org-fila-ojo:hover, .org-fila-asa:focus-visible, .org-fila-ojo:focus-visible { background: var(--fondo); }
.org-fila-nombre { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-fila.oculta .org-fila-nombre, .org-fila.oculta .org-fila-ojo { color: var(--gris2); }
.org-fila-ojo .org-tachado { display: none; } .org-fila-ojo[aria-pressed="false"] .org-tachado { display: inline; }
.org-fila.org-fila-moviendo { z-index: 2; background: var(--superficie); box-shadow: 0 8px 22px #0000001f; cursor: grabbing; }
.org-des-pie { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--borde); }
.org-des-vacio { margin: 8px; color: var(--gris); font-size: 12.5px; }
@media (max-width: 600px) { .org-desplegable { left: 8px !important; right: 8px !important; width: auto; top: auto !important; bottom: 8px !important; max-height: 72vh !important; } }   /* hoja abajo (gana a web/flotante.js) */
@media (prefers-reduced-motion: reduce) {
  .org-levanta, .org-hueco, .org-desplegable, .org-barra-punto { animation: none !important; }
  .organizando .org-tarjeta, .org-barra, .org-anillo { transition: none !important; }
  :is(#contenido, #menu) .org-pulsando { transform: none !important; }
}
:root[data-motion="reduced"] :is(.org-levanta, .org-hueco, .org-desplegable, .org-barra-punto) { animation: none !important; }
:root[data-motion="reduced"] :is(.organizando .org-tarjeta, .org-barra, .org-anillo) { transition: none !important; }
:root[data-motion="reduced"] :is(#contenido, #menu) .org-pulsando { transform: none !important; }
/* Operaciones · avance y certificaciones */
.cert-tipo { display: grid; gap: 10px; margin-bottom: 12px; }
.cert-items { display: grid; gap: 8px; }
.cert-items > div { display: grid; grid-template-columns: minmax(140px, 1fr) 2fr 56px; gap: 12px; align-items: center; font-size: 14px; }
.cert-items b { font-weight: 400; text-align: right; font-variant-numeric: tabular-nums; }
.cert-form { display: grid; gap: 12px; }
.cert-linea { display: grid; grid-template-columns: minmax(150px, 1fr) 2fr 72px minmax(120px, 1.2fr); gap: 12px; align-items: center; }
.cert-linea span { display: grid; gap: 2px; }
.cert-linea input[type=range] { width: 100%; accent-color: var(--acento); }
@media (max-width: 700px) {
  .cert-items > div { grid-template-columns: 1fr 56px; }
  .cert-items > div .barra-avance { grid-column: 1 / -1; order: 3; }
  .cert-linea { grid-template-columns: 1fr 72px; }
  .cert-linea span, .cert-linea input[type=range], .cert-linea [data-nota] { grid-column: 1 / -1; }
  .cert-linea input[type=range] { grid-column: 1; }
}
/* campo rellenado leyendo una foto (tickets): se nota hasta que se toca */
input.leido, textarea.leido, select.leido { background: var(--suave); border-color: var(--acento); }

/* Operaciones · obras en lista */
.obras-lista tbody tr { cursor: pointer; }
.obras-lista td a { color: inherit; text-decoration: none; }
.obras-lista .punto-color { vertical-align: middle; }
.avance-mini { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.avance-mini .barra-avance { width: 70px; }
.obras-lista { table-layout: fixed; min-width: 760px; }            /* las columnas, iguales en Obras y en Instalaciones */
.obras-lista .c-num { width: 48px; } .obras-lista .c-fase { width: 150px; } .obras-lista .c-sem { width: 140px; }
.obras-lista .c-av { width: 140px; } .obras-lista .c-inc { width: 60px; }
.seccion-vista { align-items: center; }
.seccion-vista h2 small { font-weight: 400; margin-left: 4px; }
.pct-campo { display: inline-flex; align-items: center; gap: 6px; }
.pct-campo input { width: 70px; text-align: right; }
.estados-cajas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.estado-caja { border: 1px solid var(--linea); border-radius: 14px; padding: 14px 16px; }
.estado-caja h3 { margin: 0 0 2px; font-size: 15px; font-weight: 500; }
.estado-caja .nota { margin: 0 0 10px; }
.estado-fila { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-top: 1px solid var(--linea); }
.estado-fila input { width: 70px; text-align: right; }

/* Ajustes · política de vacaciones */
.politica h3 { margin: 22px 0 8px; font-size: 15px; font-weight: 500; }
.politica .bloqueo { grid-template-columns: 1fr 1fr 2fr auto; align-items: end; }
.lista-politica { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.panel.suave { background: var(--suave); }
@media (max-width: 700px) { .politica .bloqueo { grid-template-columns: 1fr 1fr; } }

/* Separación igual en toda la app (Juan, 01/10/2026): lo que va después de una cuadrícula de tarjetas, o una
   cuadrícula después de otro bloque, nunca se pega (antes, p. ej. en Tarifas y en Ajustes → Elia). */
.kpis + :not(.etiqueta-seccion):not(dialog):not(script),
:is(.panel, .cifras-mini, .tabla-envoltorio, form, section, details) + .kpis { margin-top: 14px; }
.estados-cajas + .nota { margin-top: 12px; }

/* Ajustes → Conexión con el ERP (web/erp.js) */
.erp-modo .nota { margin-top: 10px; }
.erp-preset { text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 6px; font: inherit; color: inherit; }
.erp-preset:hover { border-color: var(--texto); }
.erp-modulo h3 { margin: 0 0 4px; font-size: 15px; font-weight: 400; }
.erp-apartado, .erp-entidad { grid-template-columns: minmax(0, 1fr) 170px 110px; }
.erp-apartado .etiqueta, .erp-entidad .etiqueta { display: inline-block; margin: 3px 2px 0 0; }
@media (max-width: 860px) { .erp-apartado, .erp-entidad { grid-template-columns: minmax(0, 1fr); } .erp-apartado .casilla, .erp-entidad .casilla { justify-content: flex-start; } }
.doc-erp { font-size: 11px; border: 1px solid var(--linea); border-radius: 99px; padding: 1px 8px; color: var(--gris); white-space: nowrap; text-decoration: none; }
/* Operaciones · presupuestos de la obra y certificación con importes */
.presu-cert .presu-modo { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.presu-capitulos { display: grid; gap: 8px; margin-top: 8px; }
.presu-cap { display: grid; grid-template-columns: 1fr minmax(180px, 280px); gap: 10px; align-items: center; }
.cert-cuenta { margin-top: 14px; line-height: 1.6; }
.cert-importes { margin: 4px 0 0; }
@media (max-width: 700px) { .presu-cap { grid-template-columns: 1fr; } }

/* Ventana común «Enviar por WhatsApp» (web/whatsapp.js) y selector de canal «Correo · WhatsApp» */
.canales { align-items: center; margin: 0 0 14px; }
.canales .nota { margin-right: 2px; }
.w-vista { background: var(--suave); border: 1px solid var(--borde); border-radius: var(--radio-p); padding: 10px 12px; margin: 8px 0 10px; }
.w-vista p { margin: 4px 0 0; overflow-wrap: anywhere; }
.w-envios { margin: 6px 0 4px; }
.w-envios summary { cursor: pointer; }
.w-envios div { margin: 4px 0 0 4px; overflow-wrap: anywhere; }

/* Tarjetas de obras: siempre el mismo orden y a la misma altura (cabecera, nombre y cliente arriba; semáforos debajo;
   el avance abajo del todo), y los semáforos separados aunque haya varios en una línea */
.kpi.obra { justify-content: flex-start; }
.kpi.obra > .luces { display: flex; gap: 6px 18px; flex-wrap: wrap; }
.kpi.obra > .luces > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.kpi.obra > .obra-avance { margin-top: auto; }
.obra-nombre { overflow-wrap: anywhere; }
.c-solo-movil { display: none; }

/* Lista de obras en el móvil: cada obra en dos o tres líneas, sin columnas que se monten */
@media (max-width: 700px) {
  .obras-lista, .obras-lista tbody { display: block; min-width: 0; width: 100%; }
  .obras-lista thead { display: none; }
  .obras-lista td, .obras-lista td[class] { display: block; width: auto; }
  .obras-lista tr { display: flex; flex-wrap: wrap; align-items: baseline; align-content: flex-start; height: auto; min-height: 0;
                    gap: 4px 14px; padding: 12px 4px 12px 44px; border-bottom: 1px solid var(--linea); position: relative; }
  .obras-lista td { border: 0; padding: 0; }
  .obras-lista td.c-num { position: absolute; left: 4px; top: 12px; color: var(--gris); text-align: left; }
  .obras-lista td.c-nombre { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; }
  .obras-lista td.c-tipo, .obras-lista td.c-fase { font-size: 12.5px; color: var(--gris); }
  .obras-lista td.c-sem, .obras-lista td.c-av, .obras-lista td.c-inc { font-size: 12.5px; }
  .obras-lista td.c-sem::before { content: attr(data-etq) ": "; color: var(--gris); }
  .obras-lista td.c-vacio { display: none; }
  .obras-lista .c-solo-movil { display: inline; color: var(--gris); }
}
/* Panel en columna: el botón o la acción final queda abajo, alineado con el de la tarjeta de al lado */
.panel-columna { display: flex; flex-direction: column; gap: 10px; }
.panel-columna > h2, .panel-columna > p { margin: 0; }
.panel.panel-columna > .al-pie { margin-top: auto; margin-bottom: 0; align-self: flex-start; }

/* La barra «Organizando» no tapa lo último de la página: queda un margen debajo */
body.org-activo .trabajo { padding-bottom: 84px; }
/* organizando no salen las explicaciones de data-ayuda (en el móvil salen al mantener pulsado 1,5 s; a los 2,5 s se organiza) */
body.org-activo .ayuda { display: none !important; }
/* Nóminas (Mi zona): importes por revisar, casillas de importes y la suma del año */
tr.por-revisar td { background: color-mix(in srgb, var(--amarillo) 12%, transparent); }
.nom-imp { width: 96px; text-align: right; }
.dlg-importes h3 { margin: 14px 0 6px; font-size: 12px; color: var(--gris); text-transform: uppercase; letter-spacing: .4px; }
.kpis-nomina { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
@media (max-width: 600px) { .kpis-nomina .kpi { padding: 16px; min-height: 120px; } .kpis-nomina .kpi-valor { font-size: 20px; } }
.tabla-reparto { min-width: 1180px; }
.tabla-reparto select[data-campo="empleado_id"] { min-width: 170px; }
.tabla-reparto select[data-campo="mes"] { min-width: 120px; }
.tabla-reparto .nom-imp { width: 90px; }
.tabla-reparto .nom-comprobacion { min-width: 220px; max-width: 300px; }

/* ---------- Chat (web/chat.js): lista + conversación, en la página y en el panel flotante ---------- */
.chat { display: grid; grid-template-columns: 320px minmax(0, 1fr); height: var(--chat-alto, calc(100dvh - 190px)); min-height: 360px;
        background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.chat-lista { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--borde); }
.chat-lista-cab { display: flex; gap: 8px; padding: 14px; border-bottom: 1px solid var(--borde); }
.chat-lista-cab input { padding: 8px 11px; }
.chat-lista-cab .btn { padding: 8px 12px; flex: none; }
.chat-grupos { overflow: auto; padding: 6px 8px 14px; min-height: 0; }
.chat-grupos .vacio { padding: 18px 8px; }
.chat-grupo-titulo { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--gris2); margin: 14px 8px 6px; }
/* pestañas de canales (Elia, WhatsApp, Telegram): arriba de la lista */
.chat-pestanas { display: flex; gap: 2px; padding: 10px 10px 0; min-width: 0; }
.chat-pestanas[hidden] { display: none; }
.chat-pestanas button { flex: 1 1 0; min-width: 0; background: none; border: 1px solid transparent; border-radius: 99px; padding: 6px 6px; font-size: 12.5px;
                        color: var(--gris); cursor: pointer; display: inline-flex; gap: 4px; align-items: center; justify-content: center; white-space: nowrap; }
.chat-pestanas button span { overflow: hidden; text-overflow: ellipsis; }
.chat-desconectado { margin: 6px 4px 8px; font-size: 12px; }
.chat-pestanas button svg { flex: none; }
.chat-pestanas button:hover { color: var(--texto); background: var(--suave); }
.chat-pestanas button.activa { color: var(--texto); background: var(--suave); border-color: var(--linea); }
.chat-pestanas button.apagada { opacity: .65; }
.chat-pestanas .contador { font-size: 10px; }
.chat-nueva { display: inline-flex; gap: 5px; align-items: center; }
.chat-item-con { color: var(--gris2); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-avatar.avisos { font-weight: 700; }
.chat-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; text-align: left;
             padding: 9px 8px; border: 1px solid transparent; border-radius: var(--radio-p); background: none; cursor: pointer; color: var(--texto); }
.chat-item:hover { background: var(--suave); }
.chat-item.activa { background: var(--superficie); border-color: var(--linea); }
.chat-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: var(--gris);
               border: 1px solid var(--linea); background: var(--superficie); letter-spacing: .5px; }
.chat-avatar.elia { font-size: 16px; color: var(--texto); }
.chat-item-txt { display: grid; min-width: 0; }
.chat-item-nombre { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item-txt small { color: var(--gris); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item.sin-leer .chat-item-txt small { color: var(--texto); }
.chat-item-lado { display: grid; justify-items: end; gap: 4px; }
.chat-item-lado small { color: var(--gris2); font-size: 10.5px; white-space: nowrap; }
.chat-conv { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.chat-conv.soltar::after { content: "Suelta aquí para adjuntar"; position: absolute; inset: 10px; display: grid; place-items: center;
                           border: 1px dashed var(--gris2); border-radius: var(--radio-p); background: var(--superficie); color: var(--gris); opacity: .95; }
.chat-vacia { flex: 1; display: grid; place-items: center; }
.chat-conv-cab { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--borde); }
.chat-conv-titulo { min-width: 0; flex: 1; display: grid; }
.chat-conv-titulo h2 { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
.chat-conv-titulo small { color: var(--gris); font-size: 11.5px; }
.chat-conv-acc { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.chat-conv-acc .btn, .chat-atras { padding: 7px 11px; font-size: 12.5px; text-decoration: none; }
.chat-atras { display: none; }
.chat-mensajes { flex: 1; overflow: auto; padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 4px; min-height: 0; outline: none; }
.chat-mas { align-self: center; margin-bottom: 8px; font-size: 12px; }
.chat-sin { margin: auto; }
.chat-dia { display: flex; justify-content: center; margin: 14px 0 6px; }
.chat-dia span { font-size: 10.5px; color: var(--gris); border: 1px solid var(--linea); border-radius: 99px; padding: 2px 10px; background: var(--superficie); }
.chat-msj { display: grid; justify-items: start; max-width: min(640px, 86%); margin-top: 8px; }
.chat-msj.junto { margin-top: 0; }
.chat-msj.mio { justify-items: end; align-self: flex-end; }
.chat-autor { font-size: 11px; color: var(--gris); margin: 0 0 3px 12px; }
.chat-burbuja { display: grid; gap: 6px; padding: 9px 12px 7px; border: 1px solid var(--linea); border-radius: 14px; background: var(--superficie); max-width: 100%;
                overflow-wrap: anywhere; }
.chat-msj.mio .chat-burbuja { background: var(--suave); border-color: var(--suave); }
.chat-burbuja.borrado { color: var(--gris); }
.chat-texto a { color: var(--azul); }
.chat-mencion { color: var(--azul); }
.chat-meta { font-size: 10px; color: var(--gris2); justify-self: end; }
.chat-acc { display: none; gap: 10px; font-size: 11px; margin: 2px 6px 0; }
.chat-acc .enlace { font-size: 11px; }
.chat-msj:hover .chat-acc, .chat-msj:focus-within .chat-acc { display: flex; }
.chat-visto { font-size: 10.5px; color: var(--gris); margin: 2px 6px 0; }
.chat-tarjeta { display: grid; gap: 2px; padding: 9px 12px; border: 1px solid var(--linea); border-radius: var(--radio-p); background: var(--superficie);
                text-decoration: none; min-width: 200px; }
.chat-tarjeta:hover { border-color: var(--gris2); }
.chat-tarjeta small { font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gris); }
.chat-adjunto { display: flex; justify-content: space-between; gap: 12px; padding: 8px 11px; border: 1px solid var(--linea); border-radius: var(--radio-p);
                background: var(--superficie); cursor: pointer; text-align: left; min-width: 200px; }
.chat-adjunto:hover { border-color: var(--gris2); }
.chat-adjunto small { color: var(--gris); white-space: nowrap; }
.chat-editor { min-width: min(420px, 60vw); resize: vertical; }
.chat-editor-acc { display: flex; justify-content: flex-end; gap: 12px; align-items: center; }
.chat-editor-acc .btn { padding: 6px 11px; }
/* mensaje de Elia con el paso: tarjeta a lo ancho con su botón */
.chat-paso { align-self: stretch; max-width: 720px; margin: 10px 0 2px; padding: 14px 16px; border: 1px solid var(--linea); border-left: 3px solid var(--texto);
             border-radius: var(--radio-p); background: var(--superficie); display: grid; gap: 8px; }
.chat-paso.hecho { border-left-color: var(--verde); }
.chat-paso header { display: flex; justify-content: space-between; gap: 10px; }
.chat-paso header small { color: var(--gris2); font-size: 10.5px; }
.chat-paso p { line-height: 1.5; }
.chat-paso.hecho p { color: var(--gris); }
.chat-paso-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.chat-paso-acciones .btn { padding: 8px 13px; text-decoration: none; font-size: 13px; }
.chat-paso-hecho { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--gris); }
/* pie de un mensaje de Elia: su estado y, si lo tiene, un enlace de texto (sin botones) */
.chat-paso-pie { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; font-size: 12px; color: var(--gris); }
.chat-paso-pie .enlace { font-size: 12.5px; color: var(--texto); }
.chat-aviso { border-left-color: var(--amarillo); }
.chat-aviso.leido { border-left-color: var(--linea); }
.chat-aviso.leido p { color: var(--gris); }
/* título de la conversación: se cambia en su sitio */
.chat-titulo-fila { display: flex; align-items: center; gap: 6px; min-width: 0; }
.chat-titulo-cambiar { display: inline-grid; place-items: center; padding: 4px; color: var(--gris); border-radius: 6px; flex: none; }
.chat-titulo-cambiar:hover { color: var(--texto); background: var(--suave); }
.chat-titulo-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; width: 100%; }
.chat-titulo-form input { flex: 1 1 200px; padding: 6px 10px; font-size: 14px; }
.chat-titulo-form .btn { padding: 6px 11px; font-size: 12.5px; }
.chat-nueva-form [data-solo="personas"] { display: grid; gap: 8px; }
.chat-nueva-form [data-solo][hidden] { display: none; }
.chat-nueva-form .chat-personas-lista label[hidden] { display: none; }
/* tarjeta de autorización del chat (web/tarjeta-autorizacion.js) */
.chat-autorizacion { border-left-color: var(--amarillo); }
.chat-autorizacion.aut-aceptada, .chat-autorizacion.aut-autoaprobada { border-left-color: var(--verde); }
.chat-autorizacion.aut-rechazada { border-left-color: var(--rojo); }
.chat-autorizacion.aut-anulada { border-left-color: var(--linea); }
.chat-autorizacion .aut-titulo { margin: 6px 0 2px; }
.chat-autorizacion .aut-motivo { margin: 0 0 8px; font-weight: 500; }
.aut-resumen { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; margin: 0 0 12px; font-size: 13px; }
.aut-resumen dt { color: var(--gris); } .aut-resumen dd { margin: 0; overflow-wrap: anywhere; }
.aut-rechazo { margin-top: 10px; } .aut-rechazo textarea { width: 100%; }
.aut-nota { font-size: 12.5px; color: var(--gris); margin: 6px 0 0; }
.chat-autorizacion .aut-bandeja { font-size: 12.5px; margin: 6px 0 0; }
@media (max-width: 520px) { .aut-resumen { grid-template-columns: 1fr; } .aut-resumen dd { margin-bottom: 4px; } }
.aviso-autorizacion { border: 1px solid var(--amarillo); border-left-width: 3px; border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; }
.aviso-autorizacion.rechazada { border-color: var(--rojo); } .aviso-autorizacion.aceptada { border-color: var(--verde); }
.aviso-autorizacion p { margin: 2px 0; }
.aut-intro { max-width: 760px; margin: 0 0 16px; }
.aut-bloque { max-width: 760px; margin: 0 0 16px; }
.aut-bloque h2 { margin: 0 0 4px; }
.aut-personas { border: 1px solid var(--linea); border-radius: 10px; padding: 8px 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; margin: 10px 0; }
.aut-personas legend { font-size: 12px; color: var(--gris); padding: 0 4px; }
.aut-umbral { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 10px 0 4px; }
.aut-umbral span { display: inline-flex; align-items: center; gap: 6px; } .aut-umbral input { width: 120px; text-align: right; }
.aut-ahora { margin: 8px 0; }
/* pestañas de fuera (WhatsApp, Telegram; núcleo 0066) */
.chat-sin-conectar { display: grid; gap: 10px; padding: 16px 10px; font-size: 13px; }
.chat-sin-conectar ol { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.chat-sin-conectar .btn { justify-self: start; text-decoration: none; }
.chat-no-enviado { font-size: 11px; color: var(--rojo, #b42318); margin: 2px 6px 0; max-width: 420px; text-align: right; }
.chat-ventana { margin: 0 14px 8px; font-size: 12px; }
.chat-fila.sin-adjuntar { grid-template-columns: minmax(0, 1fr) auto; }
.chat-contactos { display: grid; gap: 2px; max-height: 260px; overflow: auto; margin-top: 8px; }
.chat-contactos .chat-opcion small { margin-left: 6px; }
/* participantes: botón discreto en la cabecera y su panel */
.chat-participantes-btn { display: inline-flex; gap: 5px; align-items: center; }
.chat-participantes h3 { margin: 14px 0 4px; }
.chat-participantes .chat-ampliar { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.chat-participantes .chat-anadir { margin-top: 8px; display: grid; gap: 8px; }
.chat-participantes .chat-anadir[open] { gap: 8px; }
.chat-participantes .chat-anadir summary { cursor: pointer; font-size: 13px; }
.chat-participantes .chat-anadir .btn { justify-self: start; }
.chat-participantes .chat-personas-lista label[hidden] { display: none; }
.chat-escribir { border-top: 1px solid var(--borde); padding: 10px 14px 12px; display: grid; gap: 8px; position: relative; }
.chat-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.chat-fila textarea { resize: none; min-height: 42px; max-height: 160px; line-height: 1.4; }
.chat-fila .btn { padding: 10px 13px; }
.chat-previos { display: flex; gap: 6px; flex-wrap: wrap; }
.chat-previos:empty { display: none; }
.chat-previo { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; border: 1px solid var(--linea); border-radius: 99px; padding: 3px 10px; }
.chat-previo small { color: var(--gris); }
.chat-menciones { position: absolute; left: 14px; bottom: calc(100% - 4px); z-index: 5; min-width: 220px; display: grid; padding: 4px;
                  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-p); box-shadow: 0 12px 28px #00000018; }
.chat-opcion { text-align: left; background: none; border: 0; border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.chat-opcion.activa, .chat-opcion:hover { background: var(--suave); }
.chat-solo-elia { padding: 12px 16px; border-top: 1px solid var(--borde); }
.chat-dialogo .chat-personas-lista, dialog .chat-personas-lista { border: 1px solid var(--borde); border-radius: var(--radio-p); padding: 10px 12px; max-height: 220px; overflow: auto; display: grid; gap: 6px; margin: 0; }
.chat-miembros { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; max-height: 300px; overflow: auto; }
.chat-miembros li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--borde); }
.chat-miembros li:last-child { border-bottom: 0; }
/* buscar dentro de los mensajes */
.chat-lupa { display: inline-grid; place-items: center; }
.chat-buscar-en { display: block; margin: 8px 8px 0; font-size: 12.5px; text-align: left; }
.chat-buscador { display: grid; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--borde); }
.chat-buscador-filtros { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: 12.5px; }
.chat-buscador-filtros select, .chat-buscador-filtros input[type=date] { width: auto; max-width: 100%; padding: 6px 9px; font-size: 12.5px; }
.chat-buscador-filtros label:not(.casilla) { display: flex; gap: 6px; align-items: center; color: var(--gris); }
.chat-resultados { flex: 1; overflow: auto; padding: 8px 10px 16px; min-height: 0; display: grid; align-content: start; gap: 4px; }
.chat-resultado { display: grid; gap: 4px; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid transparent; border-radius: var(--radio-p);
                  background: none; color: var(--texto); cursor: pointer; }
.chat-resultado:hover, .chat-resultado:focus-visible { background: var(--suave); border-color: var(--linea); }
.chat-resultado-cab { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 12.5px; }
.chat-resultado-cab span, .chat-resultado-cab small { color: var(--gris); font-size: 11.5px; }
.chat-resultado-cab small { margin-left: auto; }
.chat-resultado-txt { font-size: 13px; color: var(--texto); overflow-wrap: anywhere; }
.chat-resultado mark, .chat-msj.foco mark { background: color-mix(in srgb, var(--amarillo) 32%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.chat-msj.foco .chat-burbuja, .chat-paso.foco { outline: 2px solid var(--texto); outline-offset: 2px; }
/* Ajustes → Avisos → Avisos del navegador */
.avisos-nav { display: grid; gap: 12px; }
.avisos-nav .nav-fila { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.avisos-nav .nav-fila > div:first-child { min-width: 0; flex: 1 1 260px; }
.avisos-nav .nav-fila p { margin: 2px 0 0; }
.avisos-nav .nav-tipos { border: 0; padding: 10px 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.avisos-nav .nav-tipos legend { padding: 0; margin-bottom: 6px; float: left; width: 100%; }
.avisos-nav .nav-silencio { justify-content: flex-start; font-size: 13px; }
.avisos-nav .nav-silencio input[type=time] { width: auto; padding: 6px 9px; }
.avisos-nav .nav-silencio label:not(.casilla) { display: flex; gap: 6px; align-items: center; color: var(--gris); }
.nav-dispositivos { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.nav-dispositivos li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--borde); }
.nav-dispositivos li:first-child, .nav-dispositivos li:last-child { border-bottom: 0; }
/* compacto (panel flotante) y móvil: una columna, lista o conversación */
.chat.compacto, .chat-flotante .chat { grid-template-columns: minmax(0, 1fr); height: 100%; min-height: 0; border: 0; border-radius: 0; }
.chat.compacto .chat-lista { border-right: 0; }
.chat.compacto .chat-conv, .chat.compacto.ver-conv .chat-lista { display: none; }
.chat.compacto.ver-conv .chat-conv { display: flex; }
.chat.compacto .chat-atras { display: inline-block; }
.chat.compacto .chat-msj { max-width: 92%; }
.chat-flotante { position: fixed; right: 14px; bottom: 14px; z-index: 58; width: min(430px, calc(100vw - 28px)); height: min(680px, calc(100dvh - 28px));
                 display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--borde); border-radius: 20px; overflow: hidden;
                 box-shadow: 0 30px 80px -24px rgba(15, 17, 20, .28), 0 10px 24px -12px rgba(15, 17, 20, .14);
                 opacity: 0; transform: translateY(12px); transition: opacity .2s ease, transform .3s cubic-bezier(.16,1,.3,1); }
.chat-flotante.abierto { opacity: 1; transform: none; }
.chat-flotante-cab { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--borde); font-size: 13px; }
.chat-flotante-cab .hueco { flex: 1; }
.chat-flotante-cab .enlace { font-size: 12px; }
.chat-cerrar { padding: 4px 11px; font-size: 16px; line-height: 1; }
.chat-flotante-cuerpo { flex: 1; min-height: 0; }
:root[data-theme="dark"] .chat-flotante { box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .chat-flotante { box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7); } }
@media (prefers-reduced-motion: reduce) { .chat-flotante { transition: none; } }
:root[data-motion="reduced"] .chat-flotante { transition: none; }
@media (max-width: 760px) {
  .chat { grid-template-columns: minmax(0, 1fr); height: var(--chat-alto, calc(100dvh - 150px)); }
  .chat-atajo { display: none; }
  .chat-lista { border-right: 0; }
  .chat .chat-conv, .chat.ver-conv .chat-lista { display: none; }
  .chat.ver-conv .chat-conv { display: flex; }
  .chat-atras { display: inline-block; }
  .chat-msj { max-width: 92%; }
  .chat-conv-cab { padding: 10px 12px; flex-wrap: wrap; }
  .chat-conv-titulo { flex: 1 1 calc(100% - 70px); }
  .chat-conv-acc { width: 100%; justify-content: flex-start; }
  .chat-conv-acc:empty { display: none; }
  .chat-mensajes { padding: 10px 12px 14px; }
  .chat-fila { grid-template-columns: minmax(0, 1fr) auto; }
  .chat-fila [data-adjuntar] { grid-column: 1 / -1; justify-self: start; padding: 6px 11px; font-size: 12.5px; }
  .chat-flotante { inset: 0; width: auto; height: auto; border-radius: 0; }
}

/* ---------- Ajustes → Flujos (web/flujos.js) ---------- */
.flujo-pasos { display: grid; gap: 0; padding-top: 10px; padding-bottom: 10px; }
.flujo-paso { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) minmax(200px, 280px); gap: 6px 18px; align-items: start;
              padding: 14px 0; border-bottom: 1px solid var(--borde); }
.flujo-paso:last-child { border-bottom: 0; }
.flujo-interruptor { font-size: 13px; color: var(--texto); }
.flujo-texto { color: var(--gris); font-size: 12.5px; line-height: 1.6; }
.flujo-campo { font-size: 11px; border: 1px solid var(--linea); border-radius: 6px; padding: 0 5px; color: var(--texto); }
.flujo-boton { font-size: 11px; border: 1px solid var(--gris2); border-radius: 8px; padding: 1px 8px; color: var(--texto); white-space: nowrap; }
.flujo-destino { grid-column: 3; grid-row: 1 / span 2; }
.flujo-estado { grid-column: 2; }
@media (max-width: 900px) {
  .flujo-paso { grid-template-columns: minmax(0, 1fr); }
  .flujo-destino, .flujo-estado { grid-column: auto; grid-row: auto; }
}
/* ---------- Correo (núcleo, web/correo.js): carpetas · lista · lectura; un panel cada vez en el móvil ----------
   La pantalla de correo ocupa todo el alto y el ancho del área de trabajo y la página NO se desplaza: el marco de
   trabajo mide lo que la ventana (100dvh) y cada panel se desplaza por dentro. Solo cuando lo que se ve es el correo
   (#contenido > .pagina-vista > .correo); el resto de páginas, como siempre. */
.app:has(#contenido > .pagina-vista > .correo) .trabajo-marco { height: 100dvh; max-width: none; display: flex; flex-direction: column; }
.app:has(#contenido > .pagina-vista > .correo) .barra-empresa { flex: none; }
#contenido:has(> .pagina-vista > .correo) { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 6px 28px 20px; }
#contenido > .pagina-vista:has(> .correo) { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pagina-vista:has(> .correo) > .cabecera-pagina { margin-bottom: 14px; flex: none; }
.correo { --correo-t: .22s cubic-bezier(.2,.7,.2,1);
          display: grid; grid-template-columns: 220px minmax(300px, 400px) minmax(0, 1fr); flex: 1; min-height: 360px;
          background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; box-shadow: 0 1px 2px rgb(0 0 0 / .03); }
.correo > * { min-height: 0; min-width: 0; }
/* carpetas y buzones */
.correo-carpetas { border-right: 1px solid var(--borde); padding: 16px 10px 10px; display: flex; flex-direction: column; gap: 2px; overflow: auto; background: var(--fondo); }
.correo-buzon { display: grid; gap: 1px; margin-bottom: 14px; }
.correo-buzon-cab { padding: 2px 10px 8px; display: grid; gap: 2px; font-size: 13px; min-width: 0; }
.correo-buzon-cab > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.correo-buzon-cab small { color: var(--gris); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.correo-buzon-cab .estado { justify-self: start; text-decoration: none; }
.correo-carpeta { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1px solid transparent; background: none; text-align: left; cursor: pointer;
                  padding: 8px 10px; border-radius: var(--radio-p); color: var(--gris); font-size: 13px; min-height: 36px; transition: background-color var(--correo-t), color var(--correo-t), border-color var(--correo-t); }
.correo-carpeta-nombre { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.correo-carpeta-nombre > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.correo-carpeta svg { flex: none; opacity: .8; }
.correo-carpeta:hover { background: var(--suave); color: var(--texto); }
.correo-carpeta.activa { background: var(--superficie); border-color: var(--linea); color: var(--texto); }
.correo-carpeta small { color: var(--gris); }
.correo-todas { margin-top: 2px; }
.correo-ajustes-enlace { margin-top: auto; padding: 10px; font-size: 12px; color: var(--gris); }
/* lista de conversaciones */
.correo-lista-col { border-right: 1px solid var(--borde); display: flex; flex-direction: column; overflow: hidden; }
.correo-buscar { display: flex; gap: 8px; padding: 14px 14px 8px; flex: none; }
.correo-buscar input { padding: 9px 12px 9px 34px; border-radius: 99px; background: var(--fondo) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'><g fill='none' stroke='%23858585' stroke-width='1.6' stroke-linecap='round'><circle cx='10.5' cy='10.5' r='6'/><path d='M15 15l5 5'/></g></svg>") no-repeat 12px 50%;
                      transition: border-color var(--correo-t), background-color var(--correo-t); }
.correo-buscar input:focus { background-color: var(--superficie); border-color: var(--gris2); outline: none; }
.correo-buscar select { display: none; border-radius: 99px; padding: 8px 12px; }
.correo-filtros { padding: 0 14px 10px; margin: 0; flex: none; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--borde);
                  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.correo-filtros::-webkit-scrollbar { display: none; }
.correo-filtros button { padding: 5px 11px; font-size: 12px; white-space: nowrap; flex: none; transition: border-color var(--correo-t); }
.correo-lista { display: grid; align-content: start; overflow-y: auto; overflow-x: hidden; flex: 1; min-height: 0; overscroll-behavior: contain; }
.correo-fila { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 1px; padding: 12px 14px 12px 14px; cursor: pointer;
               border-bottom: 1px solid var(--borde); color: var(--gris); font-size: 13px; transition: background-color var(--correo-t), box-shadow var(--correo-t); }
.correo-fila:hover { background: var(--suave); }
.correo-fila:focus-visible { outline: 2px solid var(--gris2); outline-offset: -2px; }
.correo-fila.activa { background: var(--suave); box-shadow: inset 3px 0 0 var(--texto); }
.correo-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 12.5px; letter-spacing: .5px; color: var(--texto);
                 background: var(--superficie); border: 1px solid var(--linea); line-height: 1; user-select: none; }
.correo-fila .correo-avatar { grid-row: 1 / span 3; align-self: start; }
.correo-fila.no-leido .correo-avatar { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); }
.correo-fila.no-leido { color: var(--texto); }
.correo-fila.no-leido .correo-de, .correo-fila.no-leido .correo-asunto { font-weight: 700; }
.correo-fila.no-leido .correo-de::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--azul); margin-right: 6px; vertical-align: 1px; }
.correo-estrella { grid-column: 3; grid-row: 2; justify-self: end; border: 0; background: none; color: var(--gris2); cursor: pointer; font-size: 15px; padding: 0 0 0 6px; line-height: 1.2;
                   opacity: 0; transition: opacity var(--correo-t), color var(--correo-t); }
.correo-fila:hover .correo-estrella, .correo-fila:focus-within .correo-estrella, .correo-estrella.puesta, .correo-estrella:focus-visible { opacity: 1; }
.correo-estrella.puesta { color: var(--amarillo); }
.correo-de { grid-column: 2; grid-row: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto); font-size: 13.5px; }
.correo-de small { color: var(--gris); font-weight: 400; margin-left: 4px; font-size: 11px; border: 1px solid var(--linea); border-radius: 99px; padding: 0 6px; }
.correo-fecha { grid-column: 3; grid-row: 1; font-size: 11.5px; white-space: nowrap; display: flex; gap: 6px; align-items: center; justify-content: flex-end; color: var(--gris); }
.correo-fila.no-leido .correo-fecha { color: var(--texto); }
.correo-clip { display: inline-flex; color: var(--gris); }
.correo-asunto { grid-column: 2; grid-row: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto); }
.correo-extracto { grid-column: 2 / -1; grid-row: 3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--gris); }
.correo-marcas { grid-column: 2 / -1; display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.correo-chip { text-decoration: none; display: inline-flex; gap: 4px; align-items: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.correo-chip.cliente, .correo-chip.ambos { color: var(--azul); border-color: currentColor; }
.correo-chip.proveedor { color: var(--naranja); border-color: currentColor; }
.correo-chip.vinculo { color: var(--verde); border-color: currentColor; }
/* reparto entre departamentos (núcleo 0069): la marca de la lista («→ Compras», «¿Ventas?») y su franja en el correo abierto */
.correo-chip.marca.reparto { color: var(--azul); background: color-mix(in srgb, var(--azul) 8%, transparent); }
.correo-chip.marca.reparto.propuesta { border-style: dashed; background: none; }
.correo-bandejas .contador { font-size: 11px; }
.correo-franjas:empty { display: none; }
.correo-franjas { display: grid; gap: 6px; margin-top: 8px; }
.cr-franja { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 8px 12px; border: 1px solid var(--borde);
  border-left: 3px solid var(--azul); border-radius: var(--radio-p); background: var(--suave); font-size: 13px; color: var(--texto); }
.cr-franja.propuesta { border-left-style: dashed; }
.cr-icono { display: inline-flex; color: var(--azul); }
.cr-texto { flex: 1 1 260px; min-width: 0; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.cr-texto b { font-weight: 600; }
.cr-texto .nota { font-size: 12px; }
.cr-acciones { display: flex; flex-wrap: wrap; gap: 6px; }
.cr-acciones .btn { padding: 5px 10px; font-size: 12.5px; }
.correo-chip.marca { color: var(--naranja); border-color: currentColor; background: color-mix(in srgb, var(--naranja) 8%, transparent); }   /* marcas de los módulos (p. ej. «Factura» sin registrar) */
.correo-chip button { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 0 0 2px; font-size: 13px; line-height: 1; }
.correo-mas { margin: 12px; justify-self: center; }
/* estados vacíos (lista y lectura) */
.correo-lista > .vacio, .correo-lista > .mensaje { padding: 48px 24px; text-align: center; display: grid; justify-items: center; gap: 10px; font-size: 13px; }
.correo-lista > .vacio::before, .correo-lectura:empty::before, .correo-lectura > .vacio::before {
  content: ""; display: block; width: 56px; height: 56px; background: var(--gris2); opacity: .7;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 6.5h17v11h-17z'/><path d='M3.5 7l8.5 6.5L20.5 7'/></g></svg>") center / 40px no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 6.5h17v11h-17z'/><path d='M3.5 7l8.5 6.5L20.5 7'/></g></svg>") center / 40px no-repeat; }
/* lectura: la cabecera (asunto, acciones y enlaces) fija; los mensajes se desplazan por dentro */
.correo-lectura { display: flex; flex-direction: column; overflow: hidden; container-type: inline-size; background: var(--superficie); }
.correo-lectura:empty, .correo-lectura:has(> .vacio:only-child) { display: grid; place-content: center; justify-items: center; gap: 12px; }
.correo-lectura:empty::after { content: "Elige un correo para leerlo"; color: var(--gris); font-size: 13.5px; }
.correo-lectura > .vacio { padding: 0; display: grid; justify-items: center; gap: 12px; text-align: center; }
.correo-lectura > .mensaje { padding: 22px 24px; }
.correo-lectura-fija { flex: none; padding: 18px 24px 12px; border-bottom: 1px solid var(--borde); display: grid; gap: 12px; animation: correo-entra var(--correo-t) both; }
.correo-lectura-cab { display: flex; gap: 10px; align-items: center; min-width: 0; }
.correo-lectura-cab h2 { font-size: 19px; margin: 0; overflow-wrap: anywhere; letter-spacing: -.2px; line-height: 1.3;
                         display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.correo-n { flex: none; }
.correo-volver { display: none; padding: 6px 11px; flex: none; }
.correo-acciones { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.correo-acciones .btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; font-size: 12.5px; color: var(--texto); transition: border-color var(--correo-t), background-color var(--correo-t); }
.correo-acciones .btn:hover { background: var(--suave); }
.correo-acciones .btn svg { flex: none; color: var(--gris); }
/* panel estrecho: solo icono en las acciones secundarias (y, si es más estrecho aún, en todas) */
@container (max-width: 760px) { .correo-acciones .hueco ~ .btn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
                                .correo-acciones .hueco ~ .btn { padding: 7px 9px; } }
@container (max-width: 640px) { .correo-acciones [data-resp="todos"] > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
                                .correo-acciones [data-resp="todos"] { padding: 7px 9px; } }
@container (max-width: 470px) { .correo-acciones .btn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
                                .correo-acciones .btn { padding: 7px 9px; } }
.correo-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.correo-enlazar { background: var(--superficie); cursor: pointer; font: inherit; font-size: 11px; transition: border-color var(--correo-t), color var(--correo-t); }
.correo-enlazar:hover { border-color: var(--gris2); color: var(--texto); }
.correo-mensajes { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 16px 24px 24px; display: grid; align-content: start; gap: 10px; overscroll-behavior: contain;
                   animation: correo-entra var(--correo-t) both; }
.correo-msg { border: 1px solid var(--borde); border-radius: 14px; overflow: hidden; background: var(--superficie); transition: border-color var(--correo-t); }
.correo-msg.plegado { background: var(--fondo); }
.correo-msg.plegado:hover { border-color: var(--linea); }
.correo-msg-cab { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 14px 16px; cursor: pointer; font-size: 13.5px; }
.correo-msg-quien { min-width: 0; overflow-wrap: anywhere; }
.correo-msg-cab small { color: var(--gris); font-weight: 400; }
.correo-msg-cab .correo-para { margin-top: 2px; font-size: 12px; }
.correo-msg-fecha { white-space: nowrap; font-size: 12px; padding-top: 2px; }
.correo-msg .correo-extracto-plegado { display: none; }
.correo-msg.plegado .correo-para, .correo-msg.plegado .correo-cuerpo, .correo-msg.plegado .correo-adjuntos { display: none; }
.correo-msg.plegado .correo-extracto-plegado { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.correo-cuerpo { padding: 0 16px 14px 64px; }
.correo-marco { width: 100%; border: 0; min-height: 60px; display: block; background: #fff; border-radius: 10px; }
.correo-imagenes { margin: 0 0 8px; padding: 6px 10px; font-size: 12.5px; }
.correo-texto { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.6; }
.correo-texto .cita { color: var(--gris); }
.correo-adjuntos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; padding: 0 16px 16px 64px; }
.correo-adjunto { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border: 1px solid var(--borde); border-radius: var(--radio-p); padding: 8px 10px; font-size: 13px; background: var(--fondo); }
.correo-adjunto > span { flex: 1; min-width: 120px; overflow-wrap: anywhere; }
.correo-adjunto .btn { padding: 5px 10px; font-size: 12px; }
@container (max-width: 560px) { .correo-cuerpo { padding-left: 16px; } .correo-adjuntos { padding-left: 16px; grid-template-columns: minmax(0, 1fr); } }
@keyframes correo-entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .correo-lectura-fija, .correo-mensajes, .correo.leyendo .correo-lectura { animation: none !important; } }
:root[data-motion="reduced"] :is(.correo-lectura-fija, .correo-mensajes) { animation: none !important; }
.correo-vacio p { max-width: 70ch; margin-bottom: 8px; }
#correo-aviso { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 70; max-width: min(520px, calc(100% - 32px));
                background: var(--acento); color: var(--acento-texto); padding: 11px 16px; border-radius: 12px; font-size: 13.5px; transition: opacity .2s, transform .2s; }
#correo-aviso.visible { opacity: 1; transform: translate(-50%, 0); }
#correo-aviso.error { background: var(--rojo-insignia, var(--rojo)); color: #fff; }
/* redactar */
/* el bloque de redactar/responder nunca se sale de la pantalla: el editor se ajusta al alto y, si aun así no cabe, se
   desplaza el formulario por dentro */
dialog.correo-redactar { width: min(820px, calc(100% - 24px)); padding: 0; max-height: calc(100dvh - 32px); overflow: hidden; }
dialog.correo-redactar[open] { display: flex; flex-direction: column; animation: correo-entra .2s ease both; }
dialog.correo-redactar form { gap: 10px; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding: 20px 22px; }
dialog.correo-redactar form > * { flex-shrink: 0; }
dialog.correo-redactar .correo-editor { flex: 1 1 clamp(180px, 36dvh, 460px); min-height: 140px; max-height: none; }
/* campos en una línea (etiqueta a la izquierda), como en un cliente de correo: deja más alto para el texto */
@media (min-width: 561px) {
  dialog.correo-redactar form > label { grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 10px; }
  dialog.correo-redactar form > label > :is(input, select) { padding: 8px 12px; }
  dialog.correo-redactar .correo-sugerencias { grid-column: 2; }
  dialog.correo-redactar .correo-mas-dir { margin-top: -8px; }
}
.correo-redactar-cab { display: flex; justify-content: space-between; align-items: center; }
.correo-redactar-cab h2 { margin: 0; }
.correo-redactar-cab .btn { padding: 4px 11px; font-size: 18px; line-height: 1; }
.correo-mas-dir { margin-top: -6px; text-align: right; }
.correo-mas-dir .enlace { border: 0; background: none; color: var(--gris); cursor: pointer; font-size: 12px; text-decoration: underline; }
.correo-sugerencias { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-p);
                      box-shadow: 0 12px 32px rgb(0 0 0 / .12); display: grid; max-height: 260px; overflow: auto; }
.correo-sugerencias button { border: 0; background: none; text-align: left; padding: 9px 12px; cursor: pointer; color: var(--texto); font-size: 13px; }
.correo-sugerencias button:hover, .correo-sugerencias button.activa { background: var(--suave); }
.correo-sugerencias small { color: var(--gris); }
.correo-editor-barra { display: flex; gap: 4px; flex-wrap: wrap; }
.correo-editor-barra button { border: 1px solid var(--linea); background: var(--superficie); border-radius: 8px; padding: 4px 10px; cursor: pointer; font-size: 12.5px; color: var(--texto); }
.correo-editor { min-height: 200px; max-height: 46vh; overflow: auto; border: 1px solid var(--linea); border-radius: var(--radio-p); padding: 12px; background: var(--superficie);
                 color: var(--texto); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.correo-editor:focus { outline: 2px solid var(--gris2); outline-offset: 1px; }
.correo-editor blockquote { margin: 0 0 0 .5em; padding-left: .8em; border-left: 2px solid var(--linea); color: var(--gris); }
.correo-editor img { max-width: 100%; height: auto; }
.correo-editor .cita-correo { color: var(--gris); }
.correo-editor-firma { min-height: 90px; }
.correo-adjuntos-redactar { display: flex; gap: 6px; flex-wrap: wrap; }
.correo-adjuntos-redactar:empty { display: none; }
.correo-redactar-botones { margin: 0; }
.correo-programar summary { list-style: none; }
.correo-programar summary::-webkit-details-marker { display: none; }
.correo-programar[open] label { margin-top: 8px; }
dialog.correo-vista { width: min(720px, calc(100% - 24px)); padding: 20px 22px; }
.correo-vista-cabeza { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.correo-vista-cabeza h3 { margin: 0 0 4px; }
.correo-vista-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 8px; }
.correo-vista-barra .segmentado { display: inline-flex; gap: 4px; }
.correo-vista-barra .btn.activo { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); }
.correo-vista-marco { border: 1px solid var(--borde); border-radius: var(--radio-p); background: var(--suave); padding: 10px 0; display: flex; justify-content: center; overflow: hidden; }
.correo-vista-marco iframe { height: min(62vh, 760px); border: 0; background: #fff; max-width: 100%; }
dialog.correo-elegir { width: min(560px, calc(100% - 24px)); }
.correo-resultados { display: grid; gap: 4px; max-height: 320px; overflow: auto; }
.correo-resultado { text-align: left; border: 1px solid var(--borde); background: var(--superficie); border-radius: var(--radio-p); padding: 9px 12px; cursor: pointer; color: var(--texto); font-size: 13px; }
.correo-resultado:hover { border-color: var(--gris2); }
/* Ajustes → Mi correo y ficha de contacto */
.correo-form h3, .correo-tarjeta h3 { margin-bottom: 12px; }
.correo-tarjeta .correo-form { border: 0; padding: 14px 0 0; }
.correo-avanzado { margin: 14px 0 12px; } .correo-avanzado summary { cursor: pointer; color: var(--gris); font-size: 13px; margin-bottom: 12px; }
.correo-form > .nota { margin: 12px 0; }
.correo-extra:empty { display: none; }
.correo-extra { margin-top: 14px; }
.correo-accesos h4 { margin: 12px 0 6px; font-size: 13px; }
.correo-acceso { display: flex; gap: 18px; align-items: center; padding: 4px 0; border-top: 1px solid var(--borde); flex-wrap: wrap; }
.correo-plantilla { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--borde); flex-wrap: wrap; }
.correo-plantilla:first-child { border-top: 0; }
.correo-plantilla > span { flex: 1; min-width: 180px; }
.correo-contacto { border-top: 1px solid var(--borde); padding-top: 12px; }
.correo-contacto-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.correo-contacto-cab h3 { font-size: 14px; }
.correo-contacto-lista { display: grid; max-height: 240px; overflow: auto; }
.correo-contacto-fila { display: flex; justify-content: space-between; gap: 10px; padding: 8px 2px; border-top: 1px solid var(--borde); text-decoration: none; color: var(--texto); font-size: 13px; }
.correo-contacto-fila small { color: var(--gris); white-space: nowrap; }
.correo-contacto-fila .nota { white-space: normal; }
@media (max-width: 1360px) { .correo { grid-template-columns: 200px minmax(290px, 360px) minmax(0, 1fr); } }
@media (max-width: 1180px) {
  .correo { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); }
  .correo-carpetas { display: none; }
  .correo-buscar select { display: block; max-width: 44%; }
}
/* móvil: un panel cada vez (lista o lectura, con «←» para volver), también sin desplazar la página */
@media (max-width: 860px) {
  .app:has(#contenido > .pagina-vista > .correo) { height: 100dvh; grid-template-rows: auto minmax(0, 1fr); }
  .app:has(#contenido > .pagina-vista > .correo) .trabajo-marco { height: auto; min-height: 0; align-self: stretch; }
  #contenido:has(> .pagina-vista > .correo) { padding: 4px 10px 10px; }
  .pagina-vista:has(> .correo) > .cabecera-pagina { margin-bottom: 10px; align-items: center; flex-wrap: nowrap; }
  .pagina-vista:has(> .correo) > .cabecera-pagina .eyebrow { display: none; }
  .correo { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); min-height: 0; }
  .correo-lista-col { border-right: 0; }
  .correo-buscar { padding: 10px 10px 8px; }
  .correo-buscar select { max-width: 42%; }
  .correo-filtros { padding: 0 10px 8px; }
  .correo-fila { padding: 11px 12px; column-gap: 10px; }
  .correo-estrella { opacity: 1; }
  .correo:not(.leyendo) > .correo-lectura { display: none; }
  .correo.leyendo .correo-lista-col { display: none; }
  .correo.leyendo .correo-lectura { display: flex; animation: correo-panel .24s cubic-bezier(.2,.7,.2,1) both; }
  .correo-volver { display: inline-block; }
  .correo-lectura-fija { padding: 12px 12px 10px; gap: 10px; }
  .correo-lectura-cab h2 { font-size: 16.5px; }
  .correo-mensajes { padding: 10px 10px 16px; }
  .correo-msg-cab { padding: 12px; gap: 10px; grid-template-columns: 32px minmax(0, 1fr) auto; }
  .correo-msg-cab .correo-avatar { width: 32px; height: 32px; }
  .correo-cuerpo { padding: 0 12px 12px; } .correo-adjuntos { padding: 0 12px 12px; }
  dialog.correo-redactar { max-height: calc(100dvh - 16px); width: calc(100% - 16px); }
  dialog.correo-redactar form { padding: 16px; }
  dialog.correo-redactar .correo-editor { min-height: 120px; }
}
@keyframes correo-panel { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

/* ---------- Inicio a medida (web/inicio.js): bloques, widgets y panel «Personalizar Inicio» ---------- */
.inicio-bloques { display: flex; flex-wrap: wrap; column-gap: 14px; align-items: stretch; }
.inicio-bloque { flex: 1 1 100%; min-width: 0; }
.inicio-bloque.inicio-widget { flex: 1 1 300px; margin-top: 14px; display: flex; }
.inicio-bloque.inicio-widget > .panel { flex: 1; min-width: 0; }
.inicio-quieto .kpi, .inicio-quieto .panel { animation: none !important; }
.inicio-herramientas { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.inicio-personalizar { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; font-size: 12.5px; color: var(--texto); border-radius: 99px; }
.inicio-personalizar svg { color: var(--gris); }
.inicio-personalizar:hover { border-color: var(--gris2); }
.inicio-error { margin: 18px 0 0; }
.inicio-error .enlace { font-size: 12.5px; margin-left: 4px; }
.inicio-cargando { height: 134px; margin-top: 26px; border-radius: var(--radio); border: 1px dashed var(--borde);
  background: linear-gradient(90deg, transparent, var(--suave), transparent) 0 0 / 200% 100%; animation: inicio-brillo 1.4s linear infinite; }
@keyframes inicio-brillo { to { background-position: -200% 0; } }
@media (min-width: 560px) { .kpis > .kpi.ancha { grid-column: span 2; } }
.widget { display: grid; align-content: start; gap: 4px; }
.widget-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.widget-cabeza h2 { margin: 0; }
.widget .aviso-item { color: var(--texto); padding: 11px 2px; text-decoration: none; }
.widget .aviso-item.widget-alerta .marca-leido { background: var(--rojo); }
.widget .aviso-item.widget-hecha { color: var(--gris); }
.widget .vacio { padding: 10px 0 4px; }
.widget-cifra { font-size: 30px; letter-spacing: -.8px; line-height: 1.1; margin: 8px 0 2px; }

.inicio-panel { position: fixed; z-index: 45; top: 12px; right: 12px; bottom: 12px; width: min(420px, calc(100vw - 24px)); display: flex; flex-direction: column;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: 0 18px 50px #0000001f;
  transform: translateX(16px); opacity: 0; transition: transform .26s cubic-bezier(.2,.75,.2,1), opacity .2s ease; }
.inicio-panel.ip-abierto { transform: none; opacity: 1; }
.inicio-panel.ip-saliendo { transform: translateX(16px); opacity: 0; }
body.inicio-personalizando .trabajo { padding-right: calc(min(420px, 100vw) + 36px); }
body.inicio-personalizando .org-barra { display: none; }
.ip-cabeza { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 6px; }
.ip-cabeza h2 { margin: 0; font-size: 17px; }
.ip-cerrar { border: 1px solid transparent; background: none; color: var(--gris); font-size: 22px; line-height: 1; width: 32px; height: 32px; border-radius: 99px; cursor: pointer; }
.ip-cerrar:hover, .ip-cerrar:focus-visible { border-color: var(--linea); color: var(--texto); }
.ip-intro, .ip-nota { margin: 0; padding: 0 20px 12px; font-size: 12.5px; color: var(--gris); }
.ip-nota { padding-top: 12px; border-top: 1px solid var(--borde); }
.ip-nota a { color: var(--texto); }
.ip-lista { list-style: none; margin: 0; padding: 2px 12px 12px; overflow: auto; flex: 1; display: grid; align-content: start; gap: 6px; }
.ip-bloque { border: 1px solid var(--borde); border-radius: var(--radio-p); background: var(--superficie); }
.ip-fila, .ip-tarjeta { display: flex; align-items: center; gap: 8px; padding: 9px 10px; }
.ip-asa { color: var(--gris2); cursor: grab; touch-action: none; display: inline-flex; padding: 4px 2px; flex: none; }
.ip-arrastrando { box-shadow: 0 10px 26px #0000001c; position: relative; z-index: 2; background: var(--superficie); }
.ip-arrastrando .ip-asa { cursor: grabbing; }
.inicio-panel .ip-ver { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; color: var(--texto); font-size: 13.5px; cursor: pointer; }
.ip-ver > span { display: grid; min-width: 0; }
.inicio-panel .ip-ver input { flex: none; width: 16px; height: 16px; padding: 0; margin: 0; accent-color: var(--acento); }
.ip-resumen { color: var(--gris); font-size: 11.5px; }
.ip-etiqueta { justify-self: start; font-style: normal; font-size: 10.5px; color: var(--gris); border: 1px solid var(--borde); border-radius: 99px; padding: 0 6px; margin-left: 4px; vertical-align: 1px; }
.ip-apagada > .ip-fila .ip-nombre, .ip-tarjeta.ip-apagada .ip-ver { color: var(--gris); }
.ip-mover { display: inline-flex; gap: 2px; flex: none; }
.ip-mover button, .ip-abrir, .ip-tamano button { border: 1px solid var(--linea); background: var(--superficie); color: var(--texto); border-radius: 8px; cursor: pointer; font: inherit; font-size: 12px; }
.ip-mover button { width: 26px; height: 26px; padding: 0; }
.ip-mover button:disabled { opacity: .35; cursor: default; }
.ip-abrir { padding: 4px 9px; color: var(--gris); }
.ip-abrir[aria-expanded="true"] { color: var(--texto); border-color: var(--texto); }
.ip-sub { border-top: 1px solid var(--borde); padding: 4px 6px 6px 22px; }
.ip-tarjetas { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ip-tarjeta { padding: 6px 4px; border-radius: 8px; flex-wrap: wrap; }
.inicio-panel .ip-tarjeta .ip-ver { font-size: 13px; }
.ip-tamano { display: inline-flex; border: 1px solid var(--linea); border-radius: 8px; overflow: hidden; flex: none; }
.ip-tamano button { border: 0; border-radius: 0; padding: 3px 8px; color: var(--gris); }
.ip-tamano button[aria-pressed="true"] { background: var(--suave); color: var(--texto); }
.ip-sub-nota { font-size: 12px; color: var(--gris); margin: 6px 4px; }
.ip-pie { display: flex; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--borde); }
.ip-vivo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1100px) { body.inicio-personalizando .trabajo { padding-right: 36px; } }
@media (max-width: 760px) {
  .inicio-panel { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 82dvh; border-radius: var(--radio) var(--radio) 0 0; border-bottom: 0;
    transform: translateY(24px); }
  .inicio-panel.ip-saliendo { transform: translateY(24px); }
  body.inicio-personalizando .trabajo { padding-right: 16px; padding-bottom: 60dvh; }
  .ip-sub { padding-left: 6px; }
  .ip-nota { display: none; }
}
.widget .inicio-error { margin: 6px 0 0; }
@media (prefers-reduced-motion: reduce) {
  .inicio-panel, .inicio-panel.ip-saliendo { transition: none; transform: none; }
  .inicio-cargando { animation: none; }
}

/* Tarjetas de cifras: la cifra siempre justo debajo del título y la nota abajo del todo, así las cifras de una fila
   quedan a la misma altura aunque las notas tengan distinto largo */
.kpi:not(.obra) { justify-content: flex-start; }
.kpi:not(.obra) > .kpi-nota:last-child { margin-top: auto; }

/* Mis nóminas en el móvil: cada nómina en una ficha (mes y neto; bruto, IRPF y SS; botones), sin tabla que se salga */
@media (max-width: 700px) {
  .tabla-nominas, .tabla-nominas tbody { display: block; min-width: 0; }
  .tabla-nominas thead { display: none; }
  .tabla-nominas tr { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px 10px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
  .tabla-nominas td { display: block; border: 0; padding: 0; text-align: left; }
  .tabla-nominas td.n-mes { grid-column: 1 / 3; font-weight: 600; }
  .tabla-nominas td.n-neto { grid-column: 3; grid-row: 1; text-align: right; }
  .tabla-nominas td[data-etq]::before { content: attr(data-etq); display: block; font-size: 11px; color: var(--gris); }
  .tabla-nominas td.n-neto::before { display: none; }
  .tabla-nominas td.n-botones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
}
/* Ajustes: buscador interno, tarjetas o lista, grupos y paneles (web/ajustes.js) */
.sr-solo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ajustes-barra { margin-bottom: 6px; }
.ajustes-buscador { position: relative; flex: 1 1 320px; max-width: 460px; min-width: 0; }
.ajustes-buscador input { width: 100%; padding-right: 38px; }
.ajustes-tecla { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.ajustes-buscador input:focus + .ajustes-tecla, .ajustes-buscador input:not(:placeholder-shown) + .ajustes-tecla { display: none; }
.ajustes-barra kbd, .ajustes-pista kbd { font: 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; border: 1px solid var(--linea); border-bottom-width: 2px;
  border-radius: 5px; padding: 2px 5px; color: var(--gris); background: var(--superficie); }
.ajustes-pista { margin: 0 0 4px; font-size: 12px; }
.ajustes-ninguno { margin-top: 18px; }
.ajustes-grupo[hidden] { display: none; }
.ajustes-tarjetas { grid-auto-rows: 1fr; }                     /* todas las tarjetas a la misma altura */
.ajustes-tarjetas .kpi-nota { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* el nombre del ajuste, grande arriba; lo que tiene puesto y la explicación, más pequeño debajo (Juan, 02/10/2026) */
.ajustes-tarjetas .kpi-etiqueta { font-size: 18px; font-weight: 600; letter-spacing: -.2px; color: var(--texto); line-height: 1.25; }
.ajustes-tarjetas .kpi-valor.texto { font-size: 14px; font-weight: 500; letter-spacing: 0; line-height: 1.35; color: var(--texto); opacity: .78; }
.ajustes-apartados { margin-top: 14px; }
.ajustes .ajuste-primero { outline: 2px solid var(--texto); outline-offset: 2px; }
.ajustes-buscando .org-oculta:not([hidden]) { display: flex !important; }   /* al buscar se encuentran también las ocultas */
/* lista: una fila por ajuste */
.ajustes-lista { display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.ajustes-lista[hidden] { display: none; }
.ajuste-fila { display: flex; align-items: center; gap: 14px; padding: 12px 16px; text-decoration: none; color: var(--texto); min-width: 0; }
.ajuste-fila + .ajuste-fila { border-top: 1px solid var(--borde); }
.ajuste-fila[hidden] { display: none; }
a.ajuste-fila:hover { background: var(--suave); }
a.ajuste-fila:focus-visible { outline: 2px solid var(--texto); outline-offset: -2px; }
.ajustes .ajuste-fila.ajuste-primero { outline-offset: -2px; }
.ajuste-fila-texto { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ajuste-fila-nombre { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.ajuste-fila-nota { font-size: 12.5px; color: var(--gris); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ajuste-fila-grupo { flex: none; font-size: 11.5px; color: var(--gris); border: 1px solid var(--linea); border-radius: 99px; padding: 3px 9px; white-space: nowrap; }
.ajuste-fila .flecha { flex: none; width: 14px; color: var(--gris); text-align: right; }
@media (max-width: 640px) {
  .ajuste-fila { padding: 12px 14px; gap: 10px; flex-wrap: wrap; }
  .ajuste-fila-texto { flex: 1 1 calc(100% - 30px); }
  .ajuste-fila-nota { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .ajuste-fila-grupo { order: 3; margin-left: 0; }
  .ajuste-fila .flecha { order: 2; }
  .ajustes-pista { display: none; }
}
.ajuste-direccion { display: inline-block; margin-left: 6px; font-size: 10.5px; letter-spacing: .2px; color: var(--gris); border: 1px dashed var(--linea);
  border-radius: 99px; padding: 1px 7px; white-space: nowrap; vertical-align: 1px; }
.ajuste-fila > .ajuste-direccion, .kpi > .ajuste-direccion { flex: none; margin-left: 0; align-self: flex-start; }
@media (max-width: 640px) { .ajuste-fila > .ajuste-direccion { order: 3; } }
@media (max-width: 640px) { .ajustes:not(.ajustes-buscando) .ajuste-fila-grupo { display: none; } }   /* en el móvil, el grupo solo al buscar (ya lo dice el título) */
.ajustes-version { margin-top: 28px; font-size: 12px; }
@media (max-width: 640px) {                                    /* portada compacta: el buscador y el primer grupo se ven al entrar */
  .ajustes-tarjetas { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ajustes-tarjetas .kpi { min-height: 0; padding: 14px; gap: 6px; }
  .ajustes-tarjetas .kpi-valor.texto { font-size: 13px; }
  .ajustes-tarjetas .kpi-nota { -webkit-line-clamp: 2; font-size: 12px; }
  .ajustes-tarjetas .kpi-etiqueta { font-size: 15.5px; }
  .ajustes .etiqueta-seccion { margin: 18px 0 10px; }
  .ajustes .etiqueta-seccion span { display: none; }
  .ajustes-barra { gap: 8px; }
}

/* Núcleo · utilidades: texto solo para lectores de pantalla, botón pequeño */
.solo-lector { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.btn.btn-pequeno { padding: 6px 10px; font-size: 12.5px; }
/* Núcleo · dictado por voz (web/dictado.js) */
.btn-dictar { display: inline-grid; place-items: center; padding: 0; width: 42px; min-width: 42px; height: 42px; color: var(--texto); }
.btn-dictar.btn-pequeno { width: 32px; min-width: 32px; height: 32px; }
.btn-dictar.no-disponible { color: var(--gris2); border-style: dashed; }
.btn-dictar.dictando { color: var(--rojo); border-color: var(--rojo); animation: dictando 1.2s ease-in-out infinite; }
@keyframes dictando { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--rojo) 18%, transparent); } }
@media (prefers-reduced-motion: reduce) { .btn-dictar.dictando { animation: none; } }
/* Núcleo · direcciones (web/direcciones.js) */
.dir-bloque { display: grid; gap: 10px; }
.dir-detalle { display: grid; grid-template-columns: minmax(90px, .6fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px; }
@media (max-width: 560px) { .dir-detalle { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } .dir-detalle label:last-child { grid-column: 1 / -1; } }
.dir-maps { color: var(--texto); text-underline-offset: 3px; overflow-wrap: anywhere; }
.dir-maps:hover { text-decoration-thickness: 2px; }
.dir-icono { margin-left: 4px; color: var(--gris); font-size: .85em; }
.dir-lectura { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.dir-llegar { text-decoration: none; color: var(--texto); }
/* Operaciones · Datos de la obra (lectura y edición) */
.panel-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel-cabecera h2 { margin: 0; }
.ficha-datos .campos { align-items: start; }
.ficha-datos .dato { padding: 2px 0; min-width: 0; }
.ficha-datos .dato-valor { font-size: 14.5px; color: var(--texto); overflow-wrap: anywhere; }
.ficha-datos .dato-ancho { grid-column: 1 / -1; }
.texto-largo { white-space: pre-line; }
/* Operaciones · notas del proyecto (notas.js) */
.notas-panel { display: grid; gap: 4px; }
.nota-nueva { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.nota-nueva input { font-size: 15px; }
.nota-aviso { min-height: 1.2em; margin: 2px 0 6px; } .nota-aviso.ok { color: var(--ok); }
.nota-filtros { margin: 4px 0 6px; }
.notas-lista { list-style: none; margin: 0; padding: 0; }
.nota-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--borde); }
.nota-fila:first-child { border-top: 0; }
.nota-check { width: 20px; height: 20px; margin-top: 2px; cursor: pointer; accent-color: var(--texto); }
.nota-cuerpo { display: grid; gap: 4px; min-width: 0; }
.nota-texto { font-size: 14.5px; color: var(--texto); white-space: pre-line; overflow-wrap: anywhere; }
.nota-fila.hecha .nota-texto { text-decoration: line-through; color: var(--gris); }
.nota-meta { color: var(--gris); font-size: 12px; }
.nota-pend { color: var(--amarillo); }
.nota-tarea { font-size: 12.5px; color: var(--texto); justify-self: start; }
.nota-tarea .etiqueta { margin-left: 4px; }
.nota-acciones { display: flex; gap: 6px; align-items: center; }
.nota-editar textarea { width: 100%; }
.nota-vacia { padding: 18px 0; }
@media (max-width: 600px) {
  .nota-nueva { grid-template-columns: minmax(0, 1fr) auto; }
  .nota-nueva .btn.primario { grid-column: 1 / -1; }
  .nota-fila { grid-template-columns: auto minmax(0, 1fr); }
  .nota-acciones { grid-column: 2; }
}
.dir-ayuda { margin: -2px 0 0; font-size: 12px; }
@media (max-width: 600px) { .ficha-lectura .campos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 12px; } }
/* Ajustes → Firma de correo y Textos legales (web/firma.js): formulario y vista previa del correo, lado a lado */
.firma-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; align-items: start; }
.firma-rejilla h2 { margin: 0 0 12px; font-size: 15px; }
.firma-fila { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--borde); }
.firma-fila:last-of-type { border-bottom: 0; }
.firma-fila .casilla { padding-top: 8px; }
.firma-valor { display: grid; gap: 4px; min-width: 0; }
.firma-valor small { font-size: 11.5px; }
.firma-fijo { padding: 8px 0 0; overflow-wrap: anywhere; }
.firma-previa-caja { position: sticky; top: 12px; }
.firma-previa-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.firma-previa-cab h2 { margin: 0; }
.firma-previa-cab .segmentado { display: inline-flex; gap: 4px; }
.firma-previa-cab .btn.activo { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); }
.firma-previa-caja .correo-vista-marco { margin-top: 8px; }
.firma-previa-caja iframe { width: 100%; height: min(70vh, 820px); border: 0; background: #fff; max-width: 100%; }
#legal-form textarea { width: 100%; font: inherit; line-height: 1.5; resize: vertical; }
@media (max-width: 980px) {
  .firma-rejilla { grid-template-columns: 1fr; }
  .firma-previa-caja { position: static; }
}
@media (max-width: 520px) {
  .firma-fila { grid-template-columns: 1fr; gap: 4px; }
  .firma-fila .casilla { padding-top: 0; }
  .firma-previa-caja iframe { height: 560px; }
}
@media (max-width: 520px) { .firma-previa-cab .segmentado { display: none; } }
/* ---- Visor de documentos (web/visor-pdf.js): ventana casi a pantalla completa; en el móvil, completa ---- */
dialog.visor-pdf { width: min(1240px, calc(100vw - 48px)); height: calc(100dvh - 48px); max-width: none; max-height: none; padding: 0; overflow: hidden; }
dialog.visor-pdf::backdrop { background: rgb(0 0 0 / .55); }
.visor-marco { display: flex; flex-direction: column; height: 100%; }
.visor-barra { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--borde); background: var(--superficie); flex-wrap: wrap; }
.visor-titulo { flex: 1 1 220px; min-width: 0; margin: 0; font-size: 1rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.visor-paginas { color: var(--gris); font-size: .85rem; white-space: nowrap; }
.visor-zoom, .visor-acciones { display: flex; gap: 6px; align-items: center; }
.visor-z { min-width: 38px; padding-inline: 10px; }
.visor-cuerpo { flex: 1; overflow: auto; background: var(--suave); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; outline: none; }
.visor-cuerpo:focus-visible { box-shadow: inset 0 0 0 2px var(--azul); }
.visor-hojas { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px; width: max-content; min-width: 100%; box-sizing: border-box; }
.visor-hoja { background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .18), 0 6px 18px rgb(0 0 0 / .08); flex: none; }
.visor-hoja canvas { display: block; }
.visor-estado { display: grid; place-items: center; align-content: center; gap: 12px; min-height: 100%; padding: 24px; text-align: center; color: var(--gris); margin: 0; box-sizing: border-box; }
.visor-estado p { margin: 0; max-width: 46ch; }
.visor-imagen { display: block; max-width: calc(100% - 32px); max-height: calc(100% - 32px); margin: 16px auto; object-fit: contain; background: #fff; }
.visor-marco-nav { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.visor-imprimir { position: fixed; width: 1px; height: 1px; border: 0; opacity: 0; pointer-events: none; }
@media (max-width: 600px) {
  dialog.visor-pdf { width: 100vw; height: 100dvh; border: 0; border-radius: 0; margin: 0; }
  .visor-barra { padding: 8px 8px 8px 14px; padding-top: max(8px, env(safe-area-inset-top)); gap: 6px; }
  .visor-barra .btn { min-height: 38px; padding: 6px 12px; font-size: 14px; }
  .visor-titulo { flex: 1 1 calc(100% - 60px); order: 0; font-size: .95rem; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .visor-cerrar { order: 1; min-width: 44px; }
  .visor-zoom { order: 2; gap: 4px; }
  .visor-barra .visor-z { min-width: 38px; padding-inline: 8px; }
  .visor-paginas { order: 3; flex: 1; text-align: center; font-size: 12px; }
  .visor-acciones { order: 4; }
  .visor-cerrar-texto { display: none; }
  .visor-hojas { padding: 8px; gap: 8px; }
  .visor-cuerpo { padding-bottom: env(safe-area-inset-bottom); }
}
/* Autorizaciones pendientes (Mi zona) y Owner / directores (núcleo 0072) */
.aut-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.aut-item { display: flex; gap: 12px 18px; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--borde); }
.aut-item:last-child { border-bottom: 0; padding-bottom: 0; }
.aut-item:first-child { padding-top: 6px; }
.aut-que { display: grid; gap: 4px; min-width: 0; flex: 1 1 320px; overflow-wrap: anywhere; }
.aut-que > .etiqueta, .aut-que > .estado { justify-self: start; }
.aut-que > .aut-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.aut-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.aut-importe { font-variant-numeric: tabular-nums; font-weight: 600; }
.aut-cambios { margin: 2px 0; padding-left: 18px; font-size: 13px; }
.aut-grupo h3 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--gris); font-weight: 600; }
.aut-grupo + .aut-grupo { margin-top: 12px; }
.etiqueta-owner { color: var(--azul); border-color: currentColor; }
@media (max-width: 600px) { .aut-acciones { width: 100%; } .aut-acciones .btn { flex: 1; } }
.aut-owner { display: grid; gap: 10px; margin-bottom: 4px; }
.aut-owner-fila { display: flex; gap: 12px 18px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.aut-owner-fila .nota { margin: 2px 0 0; }
.aut-pref summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.aut-pref form { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 8px; }
.aut-pref-deps { display: flex; flex-wrap: wrap; gap: 6px 14px; flex-basis: 100%; padding-left: 22px; }

/* ---------- Primeros pasos: asistente del alta de la empresa (web/primeros-pasos.js) ---------- */
.pp { max-width: 980px; margin: 0 auto; }
.pp-cab { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; flex-wrap: wrap; }
.pp-cab .pp-logo { height: 34px; }
.pp-titulos { flex: 1; min-width: 220px; display: grid; gap: 4px; }
.pp-barra { height: 3px; background: var(--suave); border-radius: 99px; overflow: hidden; margin-bottom: 14px; }
.pp-barra i { display: block; height: 100%; background: var(--texto); border-radius: 99px; transition: width .35s ease; }
.pp-pasos { list-style: none; padding: 0; margin: 0 0 18px; display: flex; gap: 6px; flex-wrap: wrap; counter-reset: pp; }
.pp-pasos li > * { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--borde); border-radius: 99px;
                   background: var(--superficie); color: var(--gris); font-size: 12.5px; }
.pp-pasos li > button { cursor: pointer; font: inherit; font-size: 12.5px; }
.pp-pasos li > button:hover { border-color: var(--gris2); color: var(--texto); }
.pp-pasos .pp-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--linea); font-size: 11px; }
.pp-pasos li.actual > * { color: var(--texto); border-color: var(--texto); }
.pp-pasos li.actual .pp-num { border-color: var(--texto); }
.pp-pasos li.hecho .pp-num { color: var(--ok); border-color: currentColor; }
.pp-pasos li.saltado .pp-nombre { text-decoration: line-through; text-decoration-color: var(--gris2); }
.pp-paso { display: grid; gap: 14px; }
.pp-paso h3 { font-size: 15px; font-weight: 400; margin: 10px 0 0; }
.pp-intro { color: var(--gris); max-width: 70ch; }
.pp-form { display: grid; gap: 14px; }
.pp-form .campos { align-items: start; }
.pp-logo-caja .emp-subir { justify-self: start; }
.pp-nota-ubicacion { font-size: 12.5px; color: var(--gris); border: 1px solid var(--borde); border-radius: var(--radio-p); padding: 8px 12px; background: var(--suave); }
.pp-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.pp-opcion { position: relative; display: grid; gap: 6px; align-content: start; padding: 14px 14px 14px 42px; border: 1px solid var(--borde); border-radius: var(--radio-p);
             background: var(--superficie); color: var(--texto); font-size: 13.5px; cursor: pointer; transition: border-color .15s; }
.pp-opcion:hover { border-color: var(--gris2); }
.pp-opcion > input { position: absolute; left: 14px; top: 15px; width: 16px; height: 16px; margin: 0; }
.pp-opcion:has(input:checked) { border-color: var(--texto); box-shadow: inset 0 0 0 1px var(--texto); }
.pp-opcion:has(input:focus-visible) { outline: 2px solid var(--azul); outline-offset: 2px; }
.pp-opcion.desactivada { cursor: default; opacity: .62; background: var(--suave); }
.pp-opcion.desactivada:hover { border-color: var(--borde); }
div.pp-opcion { padding-left: 14px; }
.pp-opcion-cab { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pp-opcion small { font-size: 12.5px; line-height: 1.45; }
.pp-opcion.grande { padding-top: 18px; padding-bottom: 18px; }
.pp-opcion.grande b { font-size: 15px; }
.pp-rejilla { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pp-resumen-impuesto { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.pp-resumen-impuesto > div { display: grid; gap: 4px; padding: 12px 14px; background: var(--suave); border-radius: var(--radio-p); font-size: 13px; }
.pp-resumen-impuesto b { font-size: 22px; }
.pp-marca { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 6px; }
.pp-logo-caja { display: grid; gap: 8px; align-content: start; }
.pp-logo-caja .emp-logo { margin: 0; }
.pp-etiqueta { font-size: 12px; color: var(--gris); }
.pp-color { align-content: start; }
.pp-color-fila { display: flex; align-items: center; gap: 10px; }
.pp-color input[type=color] { width: 56px; height: 40px; padding: 4px; cursor: pointer; }
.pp-error { color: var(--peligro); }
input[aria-invalid="true"] { border-color: var(--peligro); }
.pp-acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pp-invitar { align-items: end; }
.pp-invitar .pp-direccion { align-self: center; }
.pp-lista { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; }
.pp-series input { padding: 6px 8px; min-width: 110px; }
.pp-series input[type=number] { width: 70px; min-width: 0; }
.pp-datos { display: grid; gap: 0; border: 1px solid var(--borde); border-radius: var(--radio-p); }
.pp-dato { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: 12px; padding: 12px 14px; align-items: baseline; font-size: 13.5px; }
.pp-dato + .pp-dato { border-top: 1px solid var(--borde); }
.pp-pendientes { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.pp-pendientes li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px;
                    border: 1px solid var(--borde); border-radius: var(--radio-p); font-size: 13.5px; }
.pp-pendientes.hechos li { color: var(--gris); }
.pp-pendientes.hechos .pp-check { color: var(--ok); }
.pp-pendientes li.proximamente { background: var(--suave); }
.pp-pie { display: flex; gap: 10px; align-items: center; margin: 14px 0 30px; flex-wrap: wrap; }
.pp-recordatorio { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; border-left-color: var(--azul); }
@media (max-width: 640px) {
  .pp-marca { grid-template-columns: 1fr; }
  .pp-cab .pp-logo { display: none; }
  .pp-dato { grid-template-columns: 1fr; gap: 4px; }
  .pp-pasos .pp-nombre { display: none; }
  .pp-pasos li.actual .pp-nombre { display: inline; }
  .pp-pie .btn { flex: 1 1 auto; }
}

/* Contactos: pestañas «Clientes | Proveedores» con su número (web/clientes.js) */
.contactos-pestanas { margin: 0 0 14px; }
.contactos-pestanas .btn { color: var(--gris); }
.contactos-pestanas .btn[aria-selected="true"] { color: var(--texto); border-color: var(--texto); }
.contactos-pestanas .btn small { margin-left: 4px; opacity: .75; font-variant-numeric: tabular-nums; }