/* ========================================================= 01. TIPOGRAFÍA Manrope es la fuente principal de SoloHazlo V2. ========================================================= */ /* La fuente ahora se carga desde tema.css (Inter). */ /* ========================================================= 00. PALETA AUTOMÁTICA DE TEMAS (Matutino = claro, Nocturno = oscuro) Cada color fijo de esta hoja se convirtió en una variable. Claro: el color original. Oscuro: su equivalente para fondo negro. ========================================================= */ :root { --k-bg-000: #000; --k-bg-000000: #000000; --k-bg-067647: #067647; --k-bg-079455: #079455; --k-bg-104_71_245_055: rgba(104, 71, 245, .055); --k-bg-104_71_245_06: rgba(104, 71, 245, .06); --k-bg-104_71_245_07: rgba(104, 71, 245, .07); --k-bg-104_71_245_08: rgba(104, 71, 245, .08); --k-bg-104_71_245_12: rgba(104, 71, 245, .12); --k-bg-104_71_245_15: rgba(104, 71, 245, .15); --k-bg-104_71_245_16: rgba(104, 71, 245, .16); --k-bg-104_71_245_45: rgba(104, 71, 245, .45); --k-bg-108_70_255_035: rgba(108, 70, 255, .035); --k-bg-108_70_255_09: rgba(108, 70, 255, .09); --k-bg-108_76_255_025: rgba(108, 76, 255, .025); --k-bg-108_76_255_07: rgba(108, 76, 255, .07); --k-bg-109_74_255_055: rgba(109, 74, 255, .055); --k-bg-109_74_255_08: rgba(109, 74, 255, .08); --k-bg-109_74_255_0_035: rgba(109, 74, 255, 0.035); --k-bg-109_74_255_0_055: rgba(109, 74, 255, 0.055); --k-bg-109_74_255_0_10: rgba(109, 74, 255, 0.10); --k-bg-10_10_10_0_88: rgba(10, 10, 10, 0.88); --k-bg-12b76a: #12b76a; --k-bg-150_124_255_12: rgba(150, 124, 255, .12); --k-bg-16a36a: #16a36a; --k-bg-1b132f: #1b132f; --k-bg-1f1a2e: #1f1a2e; --k-bg-20_14_40_45: rgba(20, 14, 40, .45); --k-bg-20_20_20_0_45: rgba(20, 20, 20, 0.45); --k-bg-217_45_32_16: rgba(217, 45, 32, .16); --k-bg-21b778: #21b778; --k-bg-22_163_106_10: rgba(22, 163, 106, .10); --k-bg-24183f: #24183f; --k-bg-250_249_255_95: rgba(250, 249, 255, .95); --k-bg-255_153_51_0_07: rgba(255, 153, 51, 0.07); --k-bg-255_153_51_0_14: rgba(255, 153, 51, 0.14); --k-bg-255_255_255_0: rgba(255,255,255,0); --k-bg-255_255_255_0_94: rgba(255, 255, 255, 0.94); --k-bg-255_255_255_0_96: rgba(255, 255, 255, 0.96); --k-bg-255_255_255_12: rgba(255, 255, 255, .12); --k-bg-255_255_255_18: rgba(255, 255, 255, .18); --k-bg-255_255_255_20: rgba(255, 255, 255, .20); --k-bg-255_255_255_72: rgba(255,255,255,.72); --k-bg-255_255_255_82: rgba(255, 255, 255, .82); --k-bg-255_255_255_92: rgba(255, 255, 255, .92); --k-bg-255_255_255_96: rgba(255, 255, 255, .96); --k-bg-255_255_255_98: rgba(255, 255, 255, .98); --k-bg-29_23_48_82: rgba(29, 23, 48, .82); --k-bg-2b2540: #2b2540; --k-bg-31_190_122_13: rgba(31, 190, 122, .13); --k-bg-32_178_112_055: rgba(32, 178, 112, .055); --k-bg-3b82f6: #3b82f6; --k-bg-4c2fcb: #4c2fcb; --k-bg-4d2ed0: #4d2ed0; --k-bg-4f2bd9: #4f2bd9; --k-bg-5733e8: #5733e8; --k-bg-5d35e8: #5d35e8; --k-bg-6840ef: #6840ef; --k-bg-6847f5: #6847f5; --k-bg-6c4cff: #6c4cff; --k-bg-6d4aff: #6d4aff; --k-bg-7047ff: #7047ff; --k-bg-7450ff: #7450ff; --k-bg-7650ff: #7650ff; --k-bg-8a70ff: #8a70ff; --k-bg-967cff: #967cff; --k-bg-b42318: #b42318; --k-bg-b9a9ff: #b9a9ff; --k-bg-d92d20: #d92d20; --k-bg-ded5f8: #ded5f8; --k-bg-e5484d: #e5484d; --k-bg-e5defb: #e5defb; --k-bg-e6e1ec: #e6e1ec; --k-bg-e85667: #e85667; --k-bg-e85aad: #e85aad; --k-bg-e8e5f0: #e8e5f0; --k-bg-e8f5ed: #e8f5ed; --k-bg-e9e2ff: #e9e2ff; --k-bg-e9faf3: #e9faf3; --k-bg-eaf0fb: #eaf0fb; --k-bg-eafaf3: #eafaf3; --k-bg-ebe4ff: #ebe4ff; --k-bg-ebfaf3: #ebfaf3; --k-bg-ece7fb: #ece7fb; --k-bg-eceef4: #eceef4; --k-bg-edf5ff: #edf5ff; --k-bg-eee9fa: #eee9fa; --k-bg-eee9ff: #eee9ff; --k-bg-eef6ff: #eef6ff; --k-bg-efe9ff: #efe9ff; --k-bg-f0e8f9: #f0e8f9; --k-bg-f0ebff: #f0ebff; --k-bg-f0ecff: #f0ecff; --k-bg-f1edff: #f1edff; --k-bg-f2eeff: #f2eeff; --k-bg-f2f0f8: #f2f0f8; --k-bg-f3efff: #f3efff; --k-bg-f3f0fb: #f3f0fb; --k-bg-f3f0ff: #f3f0ff; --k-bg-f3f1f8: #f3f1f8; --k-bg-f4effb: #f4effb; --k-bg-f4f0ff: #f4f0ff; --k-bg-f4f1ff: #f4f1ff; --k-bg-f59e0b: #f59e0b; --k-bg-f5f1ff: #f5f1ff; --k-bg-f5f2fc: #f5f2fc; --k-bg-f5f2ff: #f5f2ff; --k-bg-f5f3fa: #f5f3fa; --k-bg-f5fcf8: #f5fcf8; --k-bg-f6f3ff: #f6f3ff; --k-bg-f6f4f9: #f6f4f9; --k-bg-f7f2fb: #f7f2fb; --k-bg-f7f4ff: #f7f4ff; --k-bg-f7f5f9: #f7f5f9; --k-bg-f7f5fa: #f7f5fa; --k-bg-f7f5fc: #f7f5fc; --k-bg-f7f5fd: #f7f5fd; --k-bg-f7f5ff: #f7f5ff; --k-bg-f7f7fc: #f7f7fc; --k-bg-f8f5fc: #f8f5fc; --k-bg-f8f6ff: #f8f6ff; --k-bg-f8f7fb: #f8f7fb; --k-bg-f8f7fc: #f8f7fc; --k-bg-f8f9fc: #f8f9fc; --k-bg-faf8ff: #faf8ff; --k-bg-faf9fc: #faf9fc; --k-bg-faf9fe: #faf9fe; --k-bg-faf9ff: #faf9ff; --k-bg-fafafe: #fafafe; --k-bg-fbfaff: #fbfaff; --k-bg-fbfffd: #fbfffd; --k-bg-fceee9: #fceee9; --k-bg-fcfbfe: #fcfbfe; --k-bg-fcfbff: #fcfbff; --k-bg-fdfcff: #fdfcff; --k-bg-fefeff: #fefeff; --k-bg-fff: #fff; --k-bg-fff0f2: #fff0f2; --k-bg-fff0f8: #fff0f8; --k-bg-fff1f0: #fff1f0; --k-bg-fff4f4: #fff4f4; --k-bg-fff5f5: #fff5f5; --k-bg-fff7e6: #fff7e6; --k-bg-fff7e8: #fff7e8; --k-bg-fff7f7: #fff7f7; --k-bg-fff8eb: #fff8eb; --k-bg-ffffff: #ffffff; --k-border-0_0_0_14: rgba(0, 0, 0, .14); --k-border-104_71_245_06: rgba(104, 71, 245, .06); --k-border-104_71_245_07: rgba(104, 71, 245, .07); --k-border-104_71_245_08: rgba(104, 71, 245, .08); --k-border-104_71_245_09: rgba(104, 71, 245, .09); --k-border-104_71_245_12: rgba(104, 71, 245, .12); --k-border-104_71_245_14: rgba(104, 71, 245, .14); --k-border-104_71_245_18: rgba(104, 71, 245, .18); --k-border-104_71_245_20: rgba(104, 71, 245, .20); --k-border-104_71_245_22: rgba(104, 71, 245, .22); --k-border-104_71_245_28: rgba(104, 71, 245, .28); --k-border-108_70_255_22: rgba(108, 70, 255, .22); --k-border-108_70_255_25: rgba(108, 70, 255, .25); --k-border-108_76_255_10: rgba(108, 76, 255, .10); --k-border-108_76_255_14: rgba(108, 76, 255, .14); --k-border-108_76_255_16: rgba(108, 76, 255, .16); --k-border-109_74_255_0_12: rgba(109, 74, 255, 0.12); --k-border-109_74_255_0_15: rgba(109, 74, 255, 0.15); --k-border-109_74_255_0_22: rgba(109, 74, 255, 0.22); --k-border-109_74_255_0_38: rgba(109, 74, 255, 0.38); --k-border-116_80_255_0_18: rgba(116, 80, 255, 0.18); --k-border-20_18_40_0_08: rgba(20, 18, 40, 0.08); --k-border-22_163_106_13: rgba(22, 163, 106, .13); --k-border-255_153_51_0_28: rgba(255, 153, 51, 0.28); --k-border-255_255_255_08: rgba(255, 255, 255, .08); --k-border-255_255_255_0_75: rgba(255, 255, 255, 0.75); --k-border-255_255_255_35: rgba(255, 255, 255, .35); --k-border-32_178_112_18: rgba(32, 178, 112, .18); --k-border-6c3cff: #6c3cff; --k-border-744cff: #744cff; --k-border-7650d8: #7650d8; --k-border-76_47_203_0_08: rgba(76, 47, 203, 0.08); --k-border-7950a8: #7950a8; --k-border-8659b8: #8659b8; --k-border-b8a8ff: #b8a8ff; --k-border-b99adc: #b99adc; --k-border-c8bbff: #c8bbff; --k-border-c9bfff: #c9bfff; --k-border-cbbcff: #cbbcff; --k-border-cfc2f6: #cfc2f6; --k-border-cfc2ff: #cfc2ff; --k-border-cfc4f5: #cfc4f5; --k-border-cfe3ff: #cfe3ff; --k-border-d6ccff: #d6ccff; --k-border-d7ccff: #d7ccff; --k-border-d8ceff: #d8ceff; --k-border-d8cfff: #d8cfff; --k-border-d9cce8: #d9cce8; --k-border-d9cfff: #d9cfff; --k-border-d9f0e5: #d9f0e5; --k-border-ddd5f8: #ddd5f8; --k-border-ddd7ef: #ddd7ef; --k-border-e2ddeb: #e2ddeb; --k-border-e3dbff: #e3dbff; --k-border-e4ddff: #e4ddff; --k-border-e5def8: #e5def8; --k-border-e5defd: #e5defd; --k-border-e5dfed: #e5dfed; --k-border-e5e0f2: #e5e0f2; --k-border-e6daf7: #e6daf7; --k-border-e6e0ef: #e6e0ef; --k-border-e7e1ee: #e7e1ee; --k-border-e7e1f5: #e7e1f5; --k-border-e7e2ee: #e7e2ee; --k-border-e8e0f2: #e8e0f2; --k-border-e8e0ff: #e8e0ff; --k-border-e8e2f6: #e8e2f6; --k-border-e8e2f7: #e8e2f7; --k-border-e8e3ef: #e8e3ef; --k-border-e9def6: #e9def6; --k-border-e9e3f0: #e9e3f0; --k-border-e9e4f2: #e9e4f2; --k-border-ebe6f5: #ebe6f5; --k-border-ebe7f3: #ebe7f3; --k-border-ebe7f5: #ebe7f5; --k-border-ece6f3: #ece6f3; --k-border-ece7f8: #ece7f8; --k-border-eee6f7: #eee6f7; --k-border-eee9f5: #eee9f5; --k-border-eee9f8: #eee9f8; --k-border-eee9fb: #eee9fb; --k-border-eeeaf4: #eeeaf4; --k-border-eeeaf5: #eeeaf5; --k-border-f0ecf8: #f0ecf8; --k-border-f1c7c7: #f1c7c7; --k-border-f1d0d0: #f1d0d0; --k-border-f2eff8: #f2eff8; --k-border-f59e0b: #f59e0b; --k-border-fcd9a0: #fcd9a0; --k-border-ffd0d0: #ffd0d0; --k-border-ffffff: #ffffff; --k-text-104_71_245_16: rgba(104, 71, 245, .16); --k-text-104_71_245_55: rgba(104, 71, 245, .55); --k-text-104_71_245_6: rgba(104, 71, 245, .6); --k-text-168d5e: #168d5e; --k-text-19a66c: #19a66c; --k-text-1d1730: #1d1730; --k-text-1e3a5f: #1e3a5f; --k-text-211b2d: #211b2d; --k-text-217346: #217346; --k-text-241942: #241942; --k-text-241b35: #241b35; --k-text-241c32: #241c32; --k-text-241d31: #241d31; --k-text-252033: #252033; --k-text-255_255_255_40: rgba(255, 255, 255, .40); --k-text-255_255_255_50: rgba(255, 255, 255, .50); --k-text-255_255_255_55: rgba(255, 255, 255, .55); --k-text-255_255_255_62: rgba(255, 255, 255, .62); --k-text-255_255_255_72: rgba(255, 255, 255, .72); --k-text-269869: #269869; --k-text-279467: #279467; --k-text-2b579a: #2b579a; --k-text-2c2337: #2c2337; --k-text-2f2639: #2f2639; --k-text-302943: #302943; --k-text-332840: #332840; --k-text-332945: #332945; --k-text-352c42: #352c42; --k-text-3a3249: #3a3249; --k-text-40374d: #40374d; --k-text-4a4458: #4a4458; --k-text-4d326c: #4d326c; --k-text-4d4560: #4d4560; --k-text-51475e: #51475e; --k-text-51475f: #51475f; --k-text-5530dc: #5530dc; --k-text-5b5168: #5b5168; --k-text-5d35d8: #5d35d8; --k-text-5d45d8: #5d45d8; --k-text-5d5670: #5d5670; --k-text-6039e8: #6039e8; --k-text-61586d: #61586d; --k-text-62596e: #62596e; --k-text-653ee8: #653ee8; --k-text-67d8a6: #67d8a6; --k-text-6840ee: #6840ee; --k-text-6941a5: #6941a5; --k-text-6945e8: #6945e8; --k-text-6f4bd8: #6f4bd8; --k-text-6f6877: #6f6877; --k-text-6f687d: #6f687d; --k-text-7045a2: #7045a2; --k-text-74519a: #74519a; --k-text-746c80: #746c80; --k-text-746d7e: #746d7e; --k-text-756b82: #756b82; --k-text-756b85: #756b85; --k-text-756d80: #756d80; --k-text-756f80: #756f80; --k-text-76539c: #76539c; --k-text-776d8c: #776d8c; --k-text-777080: #777080; --k-text-7a7289: #7a7289; --k-text-7c4dff: #7c4dff; --k-text-7d7584: #7d7584; --k-text-80778f: #80778f; --k-text-817995: #817995; --k-text-817a8d: #817a8d; --k-text-82798f: #82798f; --k-text-88808f: #88808f; --k-text-8a4b00: #8a4b00; --k-text-8a8197: #8a8197; --k-text-8a8299: #8a8299; --k-text-8c859c: #8c859c; --k-text-91899c: #91899c; --k-text-9a93a8: #9a93a8; --k-text-9b94a8: #9b94a8; --k-text-a43f3f: #a43f3f; --k-text-a78fff: #a78fff; --k-text-a995ff: #a995ff; --k-text-aaa3bd: #aaa3bd; --k-text-aaa4b4: #aaa4b4; --k-text-b42318: #b42318; --k-text-b4233a: #b4233a; --k-text-c83d3d: #c83d3d; --k-text-c9c3da: #c9c3da; --k-text-d24726: #d24726; --k-text-d97706: #d97706; --k-text-e85667: #e85667; --k-text-e9e6f3: #e9e6f3; --k-text-fff: #fff; --k-text-ffffff: #ffffff; } :root[data-theme="dark"] { --k-bg-000: #070707; --k-bg-000000: #070707; --k-bg-067647: #067647; --k-bg-079455: #079455; --k-bg-104_71_245_055: rgba(104, 71, 245, 0.055); --k-bg-104_71_245_06: rgba(104, 71, 245, 0.06); --k-bg-104_71_245_07: rgba(104, 71, 245, 0.07); --k-bg-104_71_245_08: rgba(104, 71, 245, 0.08); --k-bg-104_71_245_12: rgba(104, 71, 245, 0.12); --k-bg-104_71_245_15: rgba(104, 71, 245, 0.15); --k-bg-104_71_245_16: rgba(104, 71, 245, 0.16); --k-bg-104_71_245_45: rgba(104, 71, 245, 0.45); --k-bg-108_70_255_035: rgba(108, 70, 255, 0.035); --k-bg-108_70_255_09: rgba(108, 70, 255, 0.09); --k-bg-108_76_255_025: rgba(108, 76, 255, 0.025); --k-bg-108_76_255_07: rgba(108, 76, 255, 0.07); --k-bg-109_74_255_055: rgba(109, 74, 255, 0.055); --k-bg-109_74_255_08: rgba(109, 74, 255, 0.08); --k-bg-109_74_255_0_035: rgba(109, 74, 255, 0.035); --k-bg-109_74_255_0_055: rgba(109, 74, 255, 0.055); --k-bg-109_74_255_0_10: rgba(109, 74, 255, 0.1); --k-bg-10_10_10_0_88: rgba(7, 7, 7, 0.88); --k-bg-12b76a: #12b76a; --k-bg-150_124_255_12: rgba(150, 124, 255, 0.12); --k-bg-16a36a: #16a36a; --k-bg-1b132f: #120a25; --k-bg-1f1a2e: #161124; --k-bg-20_14_40_45: rgba(12, 6, 30, 0.45); --k-bg-20_20_20_0_45: rgba(11, 11, 11, 0.45); --k-bg-217_45_32_16: rgba(217, 45, 32, 0.16); --k-bg-21b778: #21b778; --k-bg-22_163_106_10: rgba(22, 163, 106, 0.1); --k-bg-24183f: #1b0e34; --k-bg-250_249_255_95: rgba(10, 8, 16, 0.95); --k-bg-255_153_51_0_07: rgba(255, 153, 51, 0.07); --k-bg-255_153_51_0_14: rgba(255, 153, 51, 0.14); --k-bg-255_255_255_0: rgba(18, 16, 26, 0.0); --k-bg-255_255_255_0_94: rgba(18, 16, 26, 0.94); --k-bg-255_255_255_0_96: rgba(18, 16, 26, 0.96); --k-bg-255_255_255_12: rgba(18, 16, 26, 0.12); --k-bg-255_255_255_18: rgba(18, 16, 26, 0.18); --k-bg-255_255_255_20: rgba(18, 16, 26, 0.2); --k-bg-255_255_255_72: rgba(18, 16, 26, 0.72); --k-bg-255_255_255_82: rgba(18, 16, 26, 0.82); --k-bg-255_255_255_92: rgba(18, 16, 26, 0.92); --k-bg-255_255_255_96: rgba(18, 16, 26, 0.96); --k-bg-255_255_255_98: rgba(18, 16, 26, 0.98); --k-bg-29_23_48_82: rgba(20, 14, 38, 0.82); --k-bg-2b2540: #211b35; --k-bg-31_190_122_13: rgba(31, 190, 122, 0.13); --k-bg-32_178_112_055: rgba(32, 178, 112, 0.055); --k-bg-3b82f6: #3b82f6; --k-bg-4c2fcb: #4c2fcb; --k-bg-4d2ed0: #4d2ed0; --k-bg-4f2bd9: #4f2bd9; --k-bg-5733e8: #5733e8; --k-bg-5d35e8: #5d35e8; --k-bg-6840ef: #6840ef; --k-bg-6847f5: #6847f5; --k-bg-6c4cff: #6c4cff; --k-bg-6d4aff: #6d4aff; --k-bg-7047ff: #7047ff; --k-bg-7450ff: #7450ff; --k-bg-7650ff: #7650ff; --k-bg-8a70ff: #8a70ff; --k-bg-967cff: #967cff; --k-bg-b42318: #b42318; --k-bg-b9a9ff: #b9a9ff; --k-bg-d92d20: #d92d20; --k-bg-ded5f8: #271f39; --k-bg-e5484d: #e5484d; --k-bg-e5defb: #221c31; --k-bg-e6e1ec: #201e28; --k-bg-e85667: #e85667; --k-bg-e85aad: #e85aad; --k-bg-e8e5f0: #1f1c27; --k-bg-e8f5ed: #1a1721; --k-bg-e9e2ff: #201a2f; --k-bg-e9faf3: #0e1a16; --k-bg-eaf0fb: #1a1822; --k-bg-eafaf3: #0a0810; --k-bg-ebe4ff: #1f192c; --k-bg-ebfaf3: #0a0810; --k-bg-ece7fb: #1e1a28; --k-bg-eceef4: #1b1923; --k-bg-edf5ff: #0a0810; --k-bg-eee9fa: #1d1925; --k-bg-eee9ff: #1c1828; --k-bg-eef6ff: #0a0810; --k-bg-efe9ff: #1d1827; --k-bg-f0e8f9: #1f1925; --k-bg-f0ebff: #1c1826; --k-bg-f0ecff: #1b1825; --k-bg-f1edff: #1b1724; --k-bg-f2eeff: #1a1723; --k-bg-f2f0f8: #191721; --k-bg-f3efff: #1a1722; --k-bg-f3f0fb: #0a0810; --k-bg-f3f0ff: #191721; --k-bg-f3f1f8: #0a0810; --k-bg-f4effb: #191721; --k-bg-f4f0ff: #191621; --k-bg-f4f1ff: #0a0810; --k-bg-f59e0b: #f59e0b; --k-bg-f5f1ff: #0a0810; --k-bg-f5f2fc: #0a0810; --k-bg-f5f2ff: #0a0810; --k-bg-f5f3fa: #0a0810; --k-bg-f5fcf8: #0a0810; --k-bg-f6f3ff: #0a0810; --k-bg-f6f4f9: #0a0810; --k-bg-f7f2fb: #0a0810; --k-bg-f7f4ff: #0a0810; --k-bg-f7f5f9: #0a0810; --k-bg-f7f5fa: #0a0810; --k-bg-f7f5fc: #0a0810; --k-bg-f7f5fd: #0a0810; --k-bg-f7f5ff: #0a0810; --k-bg-f7f7fc: #0a0810; --k-bg-f8f5fc: #0a0810; --k-bg-f8f6ff: #0a0810; --k-bg-f8f7fb: #0a0810; --k-bg-f8f7fc: #0a0810; --k-bg-f8f9fc: #0a0810; --k-bg-faf8ff: #0a0810; --k-bg-faf9fc: #0a0810; --k-bg-faf9fe: #0a0810; --k-bg-faf9ff: #0a0810; --k-bg-fafafe: #0a0810; --k-bg-fbfaff: #0a0810; --k-bg-fbfffd: #0a0810; --k-bg-fceee9: #191721; --k-bg-fcfbfe: #0a0810; --k-bg-fcfbff: #0a0810; --k-bg-fdfcff: #0a0810; --k-bg-fefeff: #0a0810; --k-bg-fff: #12101a; --k-bg-fff0f2: #0a0810; --k-bg-fff0f8: #0a0810; --k-bg-fff1f0: #0a0810; --k-bg-fff4f4: #0a0810; --k-bg-fff5f5: #0a0810; --k-bg-fff7e6: #1b1509; --k-bg-fff7e8: #1b150a; --k-bg-fff7f7: #0a0810; --k-bg-fff8eb: #0a0810; --k-bg-ffffff: #12101a; --k-border-0_0_0_14: rgba(6, 6, 6, 0.14); --k-border-104_71_245_06: rgba(136, 129, 250, 0.06); --k-border-104_71_245_07: rgba(136, 129, 250, 0.07); --k-border-104_71_245_08: rgba(136, 129, 250, 0.08); --k-border-104_71_245_09: rgba(136, 129, 250, 0.09); --k-border-104_71_245_12: rgba(136, 129, 250, 0.12); --k-border-104_71_245_14: rgba(136, 129, 250, 0.14); --k-border-104_71_245_18: rgba(136, 129, 250, 0.18); --k-border-104_71_245_20: rgba(136, 129, 250, 0.2); --k-border-104_71_245_22: rgba(136, 129, 250, 0.22); --k-border-104_71_245_28: rgba(136, 129, 250, 0.28); --k-border-108_70_255_22: rgba(140, 133, 250, 0.22); --k-border-108_70_255_25: rgba(140, 133, 250, 0.25); --k-border-108_76_255_10: rgba(141, 136, 250, 0.1); --k-border-108_76_255_14: rgba(141, 136, 250, 0.14); --k-border-108_76_255_16: rgba(141, 136, 250, 0.16); --k-border-109_74_255_0_12: rgba(142, 135, 250, 0.12); --k-border-109_74_255_0_15: rgba(142, 135, 250, 0.15); --k-border-109_74_255_0_22: rgba(142, 135, 250, 0.22); --k-border-109_74_255_0_38: rgba(142, 135, 250, 0.38); --k-border-116_80_255_0_18: rgba(149, 139, 252, 0.18); --k-border-20_18_40_0_08: rgba(48, 47, 71, 0.08); --k-border-22_163_106_13: rgba(77, 201, 141, 0.13); --k-border-255_153_51_0_28: rgba(247, 145, 40, 0.28); --k-border-255_255_255_08: rgba(46, 46, 46, 0.08); --k-border-255_255_255_0_75: rgba(46, 46, 46, 0.75); --k-border-255_255_255_35: rgba(46, 46, 46, 0.35); --k-border-32_178_112_18: rgba(68, 202, 134, 0.18); --k-border-6c3cff: #8b80f9; --k-border-744cff: #9489fb; --k-border-7650d8: #987af9; --k-border-76_47_203_0_08: rgba(105, 90, 245, 0.08); --k-border-7950a8: #9d74cf; --k-border-8659b8: #aa7de0; --k-border-b8a8ff: #af9ff5; --k-border-b99adc: #bd9ee0; --k-border-c8bbff: #454058; --k-border-c9bfff: #433f57; --k-border-cbbcff: #454057; --k-border-cfc2f6: #443e55; --k-border-cfc2ff: #433e55; --k-border-cfc4f5: #433e55; --k-border-cfe3ff: #2c3a4e; --k-border-d6ccff: #3f3a52; --k-border-d7ccff: #403a51; --k-border-d8ceff: #3f3a51; --k-border-d8cfff: #3e3a51; --k-border-d9cce8: #443a50; --k-border-d9cfff: #3e3950; --k-border-d9f0e5: #283b32; --k-border-ddd5f8: #3d384f; --k-border-ddd7ef: #3d384b; --k-border-e2ddeb: #3c3842; --k-border-e3dbff: #3b354c; --k-border-e4ddff: #3a354c; --k-border-e5def8: #3b3549; --k-border-e5defd: #3a344b; --k-border-e5dfed: #3b3641; --k-border-e5e0f2: #3a3644; --k-border-e6daf7: #3e344b; --k-border-e6e0ef: #3b3642; --k-border-e7e1ee: #3b3640; --k-border-e7e1f5: #3a3544; --k-border-e7e2ee: #3a363f; --k-border-e8e0f2: #3b3543; --k-border-e8e0ff: #3a334a; --k-border-e8e2f6: #393444; --k-border-e8e2f7: #393445; --k-border-e8e3ef: #39353f; --k-border-e9def6: #3d3447; --k-border-e9e3f0: #3a353f; --k-border-e9e4f2: #393540; --k-border-ebe6f5: #38343f; --k-border-ebe7f3: #37343d; --k-border-ebe7f5: #37343f; --k-border-ece6f3: #39343e; --k-border-ece7f8: #373340; --k-border-eee6f7: #393340; --k-border-eee9f5: #37333c; --k-border-eee9f8: #37333e; --k-border-eee9fb: #363240; --k-border-eeeaf4: #36333b; --k-border-eeeaf5: #36333c; --k-border-f0ecf8: #35323b; --k-border-f1c7c7: #523637; --k-border-f1d0d0: #4e3535; --k-border-f2eff8: #343239; --k-border-f59e0b: #ea9a27; --k-border-fcd9a0: #453822; --k-border-ffd0d0: #4e3233; --k-border-ffffff: #2e2e2e; --k-text-104_71_245_16: rgba(160, 159, 249, 0.16); --k-text-104_71_245_55: rgba(160, 159, 249, 0.55); --k-text-104_71_245_6: rgba(160, 159, 249, 0.6); --k-text-168d5e: #60c191; --k-text-19a66c: #50c48b; --k-text-1d1730: #e3dff5; --k-text-1e3a5f: #d1dff2; --k-text-211b2d: #e4def4; --k-text-217346: #74be8f; --k-text-241942: #e1def4; --k-text-241b35: #e4def3; --k-text-241c32: #e4ddf3; --k-text-241d31: #e4ddf3; --k-text-252033: #e2ddf3; --k-text-255_255_255_40: rgba(255, 255, 255, 0.4); --k-text-255_255_255_50: rgba(255, 255, 255, 0.5); --k-text-255_255_255_55: rgba(255, 255, 255, 0.55); --k-text-255_255_255_62: rgba(255, 255, 255, 0.62); --k-text-255_255_255_72: rgba(255, 255, 255, 0.72); --k-text-269869: #5fc292; --k-text-279467: #62c193; --k-text-2b579a: #7eacf2; --k-text-2c2337: #e5dcf1; --k-text-2f2639: #e5dbf0; --k-text-302943: #e0dcf2; --k-text-332840: #e4dbf0; --k-text-332945: #e2dbf1; --k-text-352c42: #e2daf0; --k-text-3a3249: #e1daef; --k-text-40374d: #e1d9ee; --k-text-4a4458: #ded7ed; --k-text-4d326c: #e0d8ed; --k-text-4d4560: #ddd7ed; --k-text-51475e: #dfd6eb; --k-text-51475f: #dfd6eb; --k-text-5530dc: #9e9eff; --k-text-5b5168: #b0a5be; --k-text-5d35d8: #a39efa; --k-text-5d45d8: #a09ffc; --k-text-5d5670: #ada6c2; --k-text-6039e8: #a19ff9; --k-text-61586d: #afa6bc; --k-text-62596e: #afa6bc; --k-text-653ee8: #a39dfd; --k-text-67d8a6: #6dd7a7; --k-text-6840ee: #a39dff; --k-text-6941a5: #b894fa; --k-text-6945e8: #a49dfb; --k-text-6f4bd8: #a99bfc; --k-text-6f6877: #aea7b7; --k-text-6f687d: #aea7bc; --k-text-7045a2: #bc94f3; --k-text-74519a: #bb99e4; --k-text-746c80: #afa6bb; --k-text-746d7e: #aea7b9; --k-text-756b82: #b0a6bd; --k-text-756b85: #afa5c0; --k-text-756d80: #afa7ba; --k-text-756f80: #ada7b9; --k-text-76539c: #bb99e4; --k-text-776d8c: #afa5c4; --k-text-777080: #aea7b8; --k-text-7a7289: #aea6be; --k-text-7c4dff: #a79bff; --k-text-7d7584: #afa7b6; --k-text-80778f: #afa6be; --k-text-817995: #aea6c2; --k-text-817a8d: #aea7ba; --k-text-82798f: #afa6bc; --k-text-88808f: #afa7b6; --k-text-8a4b00: #dc9a63; --k-text-8a8197: #afa6bc; --k-text-8a8299: #aea6bd; --k-text-8c859c: #ada7bd; --k-text-91899c: #afa7b9; --k-text-9a93a8: #aea7bb; --k-text-9b94a8: #aea7ba; --k-text-a43f3f: #f18984; --k-text-a78fff: #ad99fb; --k-text-a995ff: #ac99fe; --k-text-aaa3bd: #ada6bf; --k-text-aaa4b4: #ada8b7; --k-text-b42318: #f98473; --k-text-b4233a: #fe7d84; --k-text-c83d3d: #fd8079; --k-text-c9c3da: #c9c3d9; --k-text-d24726: #fe8164; --k-text-d97706: #ef903c; --k-text-e85667: #fe7d87; --k-text-e9e6f3: #e9e6f3; --k-text-fff: #ffffff; --k-text-ffffff: #ffffff; } /* ========================================================= 02. VARIABLES GLOBALES Colores y medidas reutilizadas en toda la plataforma. ========================================================= */ :root { /* Morados históricos usados por módulos existentes. */ --primary: var(--k-bg-6d4aff); --primary-dark: var(--k-bg-4c2fcb); --primary-light: var(--k-bg-8a70ff); --primary-soft: var(--k-bg-f1edff); /* Colores generales de texto. */ --text: var(--k-text-241b35); --text-soft: var(--k-text-51475f); --muted: var(--k-text-756b85); /* Bordes generales. */ --border: var(--k-border-ebe6f5); /* Estados y familias de iconos. */ --green: var(--k-bg-16a36a); --green-soft: var(--k-bg-eafaf3); --red: var(--k-bg-e85667); --red-soft: var(--k-bg-fff0f2); --orange: var(--k-bg-f59e0b); --orange-soft: var(--k-bg-fff7e8); --blue: var(--k-bg-3b82f6); --blue-soft: var(--k-bg-edf5ff); --pink: var(--k-bg-e85aad); --pink-soft: var(--k-bg-fff0f8); /* Ancho máximo general de la plataforma. */ --container: 1180px; /* Identidad visual SoloHazlo V2. */ --surface-page: var(--k-bg-f7f7fc); --violet-main: var(--k-bg-6847f5); --violet-deep: var(--k-bg-4d2ed0); --violet-light: var(--k-bg-967cff); --ink-main: var(--k-text-1d1730); --ink-soft: var(--k-text-6f687d); } /* ========================================================= 03. RESET Y ESTILOS BASE Normaliza el comportamiento general del documento. ========================================================= */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { /* Tipografía principal de la plataforma. */ font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Fondo global muy suave. */ background: linear-gradient( 180deg, var(--k-bg-fafafe) 0%, var(--surface-page) 100% ); color: var(--ink-main); line-height: 1.6; /* Mejor representación tipográfica. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } button, input { font: inherit; } svg { display: block; } .container { width: min( calc(100% - 40px), var(--container) ); margin: 0 auto; } /* ========================================================= 04. HEADER Navegación superior, marca y llamada a la acción. ========================================================= */ .site-header { position: sticky; top: 0; z-index: 1000; background: var(--k-bg-255_255_255_0_94); backdrop-filter: blur(18px); border-bottom: 1px solid var(--k-border-76_47_203_0_08); } .header-inner { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 30px; } .brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; } /* Logotipo principal SoloHazlo */ .brand-logo-image { display: block; width: auto; height: 95px; object-fit: contain; } .brand-icon { width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: transparent; border-radius: 0; box-shadow: none; overflow: hidden; } .brand-icon img { width: 100%; height: 100%; display: block; object-fit: contain; } .brand-icon svg { width: 26px; height: 26px; } .brand-name { color: var(--text); font-size: 1.45rem; font-weight: 850; letter-spacing: -0.04em; } .brand-name span { color: var(--primary); } .main-nav { display: flex; align-items: center; justify-content: center; gap: 34px; } .main-nav a { position: relative; color: var(--k-text-5b5168); font-size: 0.95rem; font-weight: 650; transition: color .2s ease; } .main-nav a:hover { color: var(--primary); } .header-cta { min-height: 46px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; color: white; background: linear-gradient( 135deg, var(--primary), var(--primary-dark) ); font-weight: 750; font-size: 0.92rem; box-shadow: 0 10px 28px rgba(109, 74, 255, 0.22); transition: transform .2s ease, box-shadow .2s ease; } .header-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(109, 74, 255, 0.28); } /* ========================================================= 05. ELEMENTOS COMPARTIDOS Etiquetas, estados e identidades de iconos. ========================================================= */ /* Etiqueta pequeña usada en encabezados de secciones. */ .section-label { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-size: .78rem; font-weight: 800; letter-spacing: .10em; text-transform: uppercase; } /* Estado general de herramientas disponibles y futuras. */ .available, .soon { display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; border-radius: 999px; font-size: .68rem; font-weight: 800; } /* Colores de iconos por tipo de herramienta. */ .icon-pdf { color: var(--k-text-e85667); background: var(--red-soft); } .icon-merge { color: var(--primary); background: var(--primary-soft); } .icon-split { color: var(--orange); background: var(--orange-soft); } .icon-image { color: var(--k-text-279467); background: var(--k-bg-ebfaf3); } .icon-convert { color: var(--blue); background: var(--blue-soft); } .icon-video { color: var(--pink); background: var(--pink-soft); } .icon-audio { color: var(--k-text-7c4dff); background: var(--k-bg-f0ebff); } .icon-word { color: var(--k-text-2b579a); background: var(--k-bg-eaf0fb); } .icon-excel { color: var(--k-text-217346); background: var(--k-bg-e8f5ed); } .icon-powerpoint { color: var(--k-text-d24726); background: var(--k-bg-fceee9); } /* ========================================================= 06. HERO SOLOHAZLO V2 Nueva portada completamente distinta al Hero original. ========================================================= */ /* --------------------------------------------------------- SECCIÓN PRINCIPAL --------------------------------------------------------- */ .hero-v2 { /* Permite colocar decoraciones de fondo internas. */ position: relative; /* Evita que los efectos decorativos salgan de la sección. */ overflow: hidden; /* Reduce considerablemente el espacio vertical del Hero. */ padding: 68px 0 58px; /* Nuevo fondo limpio con profundidad ligera. */ background: radial-gradient( circle at 50% -20%, var(--k-bg-104_71_245_15), transparent 42% ), linear-gradient( 180deg, var(--k-bg-ffffff) 0%, var(--k-bg-f7f5ff) 100% ); } /* --------------------------------------------------------- CONTENEDOR CENTRAL --------------------------------------------------------- */ .hero-v2-container { /* Permite controlar decoraciones internas. */ position: relative; /* Coloca el contenido sobre los efectos de fondo. */ z-index: 2; /* Limita el ancho del contenido principal. */ max-width: 900px; /* Centra absolutamente todo el Hero. */ text-align: center; } /* --------------------------------------------------------- EFECTOS DE FONDO --------------------------------------------------------- */ .hero-v2-glow { /* Permite posicionarlos libremente. */ position: absolute; /* Forma circular. */ border-radius: 50%; /* Desenfoque decorativo. */ filter: blur(10px); /* Evita que interfieran con clics. */ pointer-events: none; } /* Brillo decorativo izquierdo. */ .hero-v2-glow-left { /* Tamaño del círculo. */ width: 380px; /* Altura del círculo. */ height: 380px; /* Posición horizontal. */ left: -180px; /* Posición vertical. */ top: -100px; /* Morado transparente. */ background: var(--k-bg-104_71_245_08); } /* Brillo decorativo derecho. */ .hero-v2-glow-right { /* Tamaño del círculo. */ width: 420px; /* Altura del círculo. */ height: 420px; /* Posición horizontal. */ right: -210px; /* Posición vertical. */ bottom: -180px; /* Morado ligeramente más claro. */ background: var(--k-bg-150_124_255_12); } /* --------------------------------------------------------- ETIQUETA SUPERIOR --------------------------------------------------------- */ /* ========================================================= INSIGNIA SUPERIOR DEL HERO V2 Hace más visible el mensaje: Múltiples herramientas · Gratis · Sin registro ========================================================= */ .hero-v2-badge { /* Coloca el indicador y el texto en una sola línea. */ display: inline-flex; /* Centra verticalmente todos los elementos. */ align-items: center; /* Separa ligeramente el punto del texto. */ gap: 10px; /* Hace la insignia más grande y visible. */ padding: 11px 18px; /* Borde violeta suave. */ border: 1px solid var(--k-border-d8ceff); /* Mantiene el formato de cápsula. */ border-radius: 999px; /* Fondo blanco con ligera transparencia. */ background: var(--k-bg-255_255_255_92); /* Utiliza el violeta principal. */ color: var(--violet-main); /* Aumenta el tamaño respecto al diseño anterior. */ font-size: .84rem; /* Da mayor presencia al texto. */ font-weight: 800; /* Ajusta ligeramente el espacio entre letras. */ letter-spacing: .015em; /* Agrega profundidad sin exagerar. */ box-shadow: 0 10px 30px rgba(69, 42, 128, .09); } /* Punto verde dentro de la etiqueta. */ .hero-v2-badge-dot { /* Tamaño del punto. */ width: 7px; /* Altura del punto. */ height: 7px; /* Evita deformaciones. */ flex: 0 0 7px; /* Forma circular. */ border-radius: 50%; /* Indica visualmente disponibilidad. */ background: var(--k-bg-21b778); /* Brillo alrededor del punto. */ box-shadow: 0 0 0 4px rgba(33, 183, 120, .12); } /* --------------------------------------------------------- TÍTULO PRINCIPAL --------------------------------------------------------- */ .hero-v2-title { /* Reduce la distancia entre insignia y título. */ margin-top: 20px; /* Color principal oscuro. */ color: var(--ink-main); /* Tamaño adaptable. */ font-size: clamp(3rem, 6vw, 5.3rem); /* Línea muy compacta para efecto moderno. */ line-height: .98; /* Reduce espacio entre letras. */ letter-spacing: -.065em; /* Peso fuerte de Manrope. */ font-weight: 800; } /* Parte morada del título. */ .hero-v2-title span { /* Coloca el texto en línea independiente. */ display: block; /* Degradado morado. */ background: linear-gradient( 135deg, var(--violet-main), var(--violet-light) ); /* Aplica degradado únicamente al texto. */ -webkit-background-clip: text; /* Compatibilidad adicional. */ background-clip: text; /* Hace transparente el color normal. */ color: transparent; } /* --------------------------------------------------------- DESCRIPCIÓN DEL HERO --------------------------------------------------------- */ .hero-v2-description { /* Limita la longitud de lectura. */ max-width: 680px; /* Reduce la separación entre título y descripción. */ margin: 18px auto 0; /* Color secundario. */ color: var(--ink-soft); /* Tamaño cómodo pero discreto. */ font-size: 1.05rem; /* Altura entre líneas. */ line-height: 1.7; } /* --------------------------------------------------------- BUSCADOR PRINCIPAL --------------------------------------------------------- */ .hero-v2-search { /* Limita el ancho del buscador. */ max-width: 720px; /* Lo centra y separa del texto superior. */ margin: 24px auto 0; /* Distribuye campo y botón. */ display: flex; /* Espacio interno alrededor. */ padding: 7px; /* Fondo blanco. */ background: var(--k-bg-ffffff); /* Borde tenue. */ border: 1px solid var(--k-border-ddd7ef); /* Bordes bastante redondeados. */ border-radius: 18px; /* Sombra principal. */ box-shadow: 0 18px 45px rgba(63, 44, 105, .10); } /* Contenedor del input. */ .hero-v2-search-field { /* Ocupa todo el espacio restante. */ flex: 1; /* Permite mantener ancho correcto. */ min-width: 0; /* Coloca lupa e input horizontalmente. */ display: flex; /* Centra verticalmente. */ align-items: center; /* Espacio entre icono e input. */ gap: 11px; /* Espaciado horizontal. */ padding: 0 17px; } /* Lupa del buscador. */ .hero-v2-search-icon { /* Tamaño horizontal. */ width: 21px; /* Tamaño vertical. */ height: 21px; /* Evita que se reduzca. */ flex-shrink: 0; /* Color secundario. */ color: var(--k-text-9b94a8); } /* Campo de búsqueda. */ .hero-v2-search-field input { /* Ocupa el ancho completo disponible. */ width: 100%; /* Elimina borde nativo. */ border: 0; /* Elimina contorno al seleccionar. */ outline: none; /* Fondo transparente. */ background: transparent; /* Color principal del texto. */ color: var(--ink-main); /* Tamaño del texto. */ font-size: .96rem; } /* Texto temporal del input. */ .hero-v2-search-field input::placeholder { /* Color discreto. */ color: var(--k-text-aaa4b4); } /* Botón de búsqueda. */ .hero-v2-search button { /* Altura mínima cómoda. */ min-height: 52px; /* Espacio horizontal. */ padding: 0 25px; /* Elimina borde predeterminado. */ border: 0; /* Radio moderno. */ border-radius: 13px; /* Coloca texto y flecha horizontalmente. */ display: inline-flex; /* Centra verticalmente. */ align-items: center; /* Centra horizontalmente. */ justify-content: center; /* Espacio entre texto y flecha. */ gap: 9px; /* Texto blanco. */ color: var(--k-text-ffffff); /* Fondo morado profundo. */ background: linear-gradient( 135deg, var(--violet-main), var(--violet-deep) ); /* Fuente destacada. */ font-weight: 750; /* Cursor interactivo. */ cursor: pointer; /* Sombra del botón. */ box-shadow: 0 10px 25px rgba(104, 71, 245, .22); /* Animación suave. */ transition: transform .2s ease, box-shadow .2s ease; } /* Hover del botón. */ .hero-v2-search button:hover { /* Eleva ligeramente el botón. */ transform: translateY(-2px); /* Refuerza la sombra. */ box-shadow: 0 14px 30px rgba(104, 71, 245, .28); } /* --------------------------------------------------------- CATEGORÍAS RÁPIDAS --------------------------------------------------------- */ .hero-v2-categories { /* Separa categorías del buscador. */ margin-top: 16px; /* Distribución horizontal. */ display: flex; /* Centra los elementos. */ justify-content: center; /* Permite salto de línea en pantallas pequeñas. */ flex-wrap: wrap; /* Espacio entre categorías. */ gap: 8px; } /* Cada categoría. */ .hero-v2-categories span { /* Espacio interior. */ padding: 7px 13px; /* Fondo blanco. */ background: var(--k-bg-255_255_255_72); /* Borde suave. */ border: 1px solid var(--k-border-e5e0f2); /* Forma de cápsula. */ border-radius: 999px; /* Color secundario. */ color: var(--ink-soft); /* Tamaño pequeño. */ font-size: .75rem; /* Peso medio-alto. */ font-weight: 700; } /* --------------------------------------------------------- BENEFICIOS --------------------------------------------------------- */ .hero-v2-benefits { /* Separación superior. */ margin-top: 18px; /* Distribución horizontal. */ display: flex; /* Centra el grupo. */ justify-content: center; /* Permite salto de línea. */ flex-wrap: wrap; /* Espacio entre beneficios. */ gap: 22px; } /* Cada beneficio. */ .hero-v2-benefits div { /* Distribuye indicador y texto. */ display: flex; /* Centra verticalmente. */ align-items: center; /* Espacio interno entre elementos. */ gap: 7px; /* Texto secundario. */ color: var(--ink-soft); /* Tamaño discreto. */ font-size: .78rem; /* Peso medio. */ font-weight: 650; } /* Indicador circular. */ .hero-v2-benefits span { /* Tamaño horizontal. */ width: 21px; /* Tamaño vertical. */ height: 21px; /* Centra la palomita. */ display: inline-flex; /* Alineación horizontal. */ align-items: center; /* Alineación vertical. */ justify-content: center; /* Forma circular. */ border-radius: 50%; /* Fondo verde suave. */ background: var(--k-bg-e9faf3); /* Color verde. */ color: var(--k-text-19a66c); /* Tamaño de la palomita. */ font-size: .7rem; /* Peso fuerte. */ font-weight: 900; } /* ========================================================= 07. SECCIONES PRINCIPALES SOLOHAZLO V2 Reduce espacios verticales para que la página se sienta más compacta, moderna y continua. ========================================================= */ /* --------------------------------------------------------- SECCIÓN DE HERRAMIENTAS Mantiene el catálogo cerca del Hero y reduce espacios verticales innecesarios. --------------------------------------------------------- */ .tools-section { /* Espacio entre Hero y encabezado del catálogo. */ padding-top: 46px; /* Espacio después de la última fila de herramientas. */ padding-bottom: 54px; /* Transición visual suave hacia Categorías. */ background: linear-gradient( 180deg, var(--k-bg-ffffff) 0%, var(--k-bg-faf9ff) 100% ); } /* --------------------------------------------------------- SECCIÓN DE CATEGORÍAS Se integra visualmente al catálogo sin parecer una sección completamente aislada. --------------------------------------------------------- */ .categories-section { /* Reduce el aire superior e inferior. */ padding: 54px 0 48px; /* Fondo de transición ligero. */ background: linear-gradient( 180deg, var(--k-bg-faf9ff) 0%, var(--k-bg-ffffff) 100% ); } /* --------------------------------------------------------- SECCIÓN CÓMO FUNCIONA Mantiene proximidad con Categorías y prepara la llegada al Footer sin dejar grandes zonas vacías. --------------------------------------------------------- */ .how-section { /* Más compacta que la versión anterior. */ padding: 52px 0 56px; /* Fondo limpio. */ background: var(--k-bg-ffffff); } .section-header { /* Reduce la separación entre título, filtros y catálogo. */ margin-bottom: 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 50px; } .section-header h2, .categories-header h2, .how-header h2 { margin-top: 8px; color: var(--text); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -.045em; } .section-header p { max-width: 410px; color: var(--muted); font-size: .95rem; } /* ========================================================= 08. FILTROS DEL CATÁLOGO Controlan la categoría visible y muestran sus contadores. ========================================================= */ .tools-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; } .tool-filter { /* Alinea el nombre y el contador. */ display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 17px; border: 1px solid var(--border); border-radius: 999px; background: var(--k-bg-ffffff); color: var(--muted); font-family: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; } .tool-filter:hover { color: var(--primary); border-color: var(--k-border-d7ccff); transform: translateY(-1px); } .tool-filter.active { color: var(--k-text-ffffff); border-color: var(--primary); background: linear-gradient( 135deg, var(--primary), var(--primary-light) ); box-shadow: 0 6px 16px rgba(111, 70, 255, .16); } /* Contador numérico dentro de cada filtro. */ .tool-filter-count { min-width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: .68rem; font-weight: 800; transition: background .2s ease, color .2s ease; } /* Invierte el contador cuando el filtro está activo. */ .tool-filter.active .tool-filter-count { background: var(--k-bg-255_255_255_20); color: var(--k-text-ffffff); } /* ========================================================= 09. TARJETAS DE HERRAMIENTAS Catálogo principal de SoloHazlo. ========================================================= */ /* Cuadrícula principal: cinco herramientas por fila en escritorio. */ .tools-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } /* --------------------------------------------------------- TARJETA BASE --------------------------------------------------------- */ .tool-card { /* Estructura vertical de cada tarjeta. */ display: flex; flex-direction: column; /* Permite colocar efectos decorativos internos. */ position: relative; /* Evita que decoraciones salgan de la tarjeta. */ overflow: hidden; /* Mantiene el tamaño compacto del catálogo. */ min-height: 205px; /* Reduce ligeramente el espacio interior. */ padding: 18px; /* El borde se vuelve mucho más suave. */ border: 1px solid var(--k-border-104_71_245_08); /* Bordes modernos y redondeados. */ border-radius: 20px; /* Fondo con ligera profundidad. */ background: linear-gradient( 180deg, var(--k-bg-255_255_255_98), var(--k-bg-250_249_255_95) ); /* Sombra más limpia. */ box-shadow: 0 10px 30px rgba(47, 32, 82, .045); /* Animaciones suaves. */ transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease; } /* --------------------------------------------------------- DETALLE DECORATIVO SUPERIOR Crea una pequeña línea morada en la parte superior sin modificar el HTML. --------------------------------------------------------- */ .tool-card::before { /* Elemento decorativo vacío. */ content: ""; /* Posicionamiento dentro de la tarjeta. */ position: absolute; /* Alineación superior. */ top: 0; /* Deja margen lateral. */ left: 18px; right: 18px; /* Línea muy delgada. */ height: 2px; /* Degradado morado suave. */ background: linear-gradient( 90deg, transparent, var(--k-bg-104_71_245_45), transparent ); /* Oculta ligeramente la línea en reposo. */ opacity: .35; /* Animación suave. */ transition: opacity .22s ease; } /* --------------------------------------------------------- HOVER GENERAL --------------------------------------------------------- */ .tool-card:hover { /* Elevación ligera. */ transform: translateY(-4px); /* Borde violeta más visible. */ border-color: var(--k-border-104_71_245_18); /* Incrementa profundidad. */ box-shadow: 0 18px 38px rgba(47, 32, 82, .085); /* Fondo ligeramente más claro. */ background: var(--k-bg-ffffff); } /* Refuerza la línea decorativa al pasar el mouse. */ .tool-card:hover::before { /* Hace visible el detalle morado. */ opacity: 1; } /* --------------------------------------------------------- ENCABEZADO DE LA TARJETA --------------------------------------------------------- */ .tool-card .card-head { /* Distribuye icono y estado en la misma fila. */ display: flex; align-items: center; justify-content: space-between; gap: 10px; /* Reduce el espacio inferior. */ margin-bottom: 14px; } /* --------------------------------------------------------- ICONO PRINCIPAL --------------------------------------------------------- */ .tool-card .tool-icon { /* Centra el SVG dentro del recuadro del icono. */ display: flex; align-items: center; justify-content: center; /* Aumenta ligeramente el tamaño. */ width: 48px; height: 48px; /* Mantiene tamaño fijo. */ flex: 0 0 48px; /* Bordes suaves. */ border-radius: 15px; /* Añade profundidad al icono. */ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .65), 0 8px 20px rgba(52, 37, 88, .055); /* Suaviza animaciones. */ transition: transform .22s ease, box-shadow .22s ease; } /* Efecto del icono al pasar el mouse. */ .tool-card:hover .tool-icon { /* Le da una ligera sensación de movimiento. */ transform: translateY(-2px) scale(1.03); /* Refuerza profundidad. */ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 10px 24px rgba(52, 37, 88, .08); } /* Tamaño interno del SVG. */ .tool-card .tool-icon svg { /* Mantiene iconos compactos. */ width: 24px; height: 24px; } /* --------------------------------------------------------- TÍTULO --------------------------------------------------------- */ .tool-card h3 { /* Nuevo color más profundo. */ color: var(--ink-main); /* Tamaño equilibrado. */ font-size: .98rem; /* Mayor peso visual. */ font-weight: 800; /* Altura compacta. */ line-height: 1.25; /* Ligera compactación de letras. */ letter-spacing: -.02em; } /* --------------------------------------------------------- DESCRIPCIÓN --------------------------------------------------------- */ .tool-card p { /* Color secundario más moderno. */ color: var(--ink-soft); /* Tamaño compacto. */ font-size: .79rem; /* Legibilidad controlada. */ line-height: 1.45; /* Separación superior corta. */ margin-top: 6px; } /* --------------------------------------------------------- ESTADO: DISPONIBLE --------------------------------------------------------- */ .tool-card .available { /* Fondo verde translúcido. */ background: var(--k-bg-22_163_106_10); /* Verde principal. */ color: var(--k-text-168d5e); /* Borde suave. */ border: 1px solid var(--k-border-22_163_106_13); /* Refuerza apariencia de cápsula. */ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); } /* --------------------------------------------------------- ESTADO: PRÓXIMAMENTE --------------------------------------------------------- */ .tool-card .soon { /* Fondo neutro con toque lavanda. */ background: var(--k-bg-104_71_245_055); /* Texto violeta grisáceo. */ color: var(--k-text-817995); /* Borde prácticamente imperceptible. */ border: 1px solid var(--k-border-104_71_245_07); } /* --------------------------------------------------------- TARJETAS DISPONIBLES Se distinguen de las futuras sin verse exageradas. --------------------------------------------------------- */ .tool-card:has(.available) { /* Borde con mayor presencia morada. */ border-color: var(--k-border-104_71_245_20); /* Fondo blanco puro. */ background: var(--k-bg-ffffff); /* Sombra más evidente. */ box-shadow: 0 14px 34px rgba(74, 49, 140, .09); } /* Línea superior más visible en disponibles. */ .tool-card:has(.available)::before { /* Morado sólido degradado. */ background: linear-gradient( 90deg, transparent, var(--violet-main), transparent ); /* Mayor visibilidad. */ opacity: .75; } /* --------------------------------------------------------- TARJETAS PRÓXIMAMENTE Mantiene presencia, pero reduce protagonismo. --------------------------------------------------------- */ .tool-card:has(.soon) { /* Fondo ligeramente lavanda. */ background: linear-gradient( 180deg, var(--k-bg-fbfaff), var(--k-bg-f8f7fc) ); /* Borde más discreto. */ border-color: var(--k-border-104_71_245_06); /* Sombra mínima. */ box-shadow: 0 6px 20px rgba(47, 32, 82, .025); } /* Reduce ligeramente la intensidad visual de los iconos futuros. */ .tool-card:has(.soon) .tool-icon { /* Mantiene color, pero con menor protagonismo. */ opacity: .88; } /* --------------------------------------------------------- BOTÓN DE ACCIÓN --------------------------------------------------------- */ .tool-card .tool-action-button { /* Mantiene el botón al fondo. */ margin-top: auto; /* Altura más compacta. */ min-height: 38px; /* Espacio horizontal equilibrado. */ padding: 0 14px; /* Bordes suaves. */ border-radius: 11px; /* Morado profundo. */ background: linear-gradient( 135deg, var(--violet-main), var(--violet-deep) ); /* Texto blanco. */ color: var(--k-text-ffffff); /* Tamaño compacto. */ font-size: .76rem; /* Peso fuerte. */ font-weight: 800; /* Sombra más refinada. */ box-shadow: 0 8px 18px rgba(104, 71, 245, .18); } /* Hover del botón. */ .tool-card .tool-action-button:hover { /* Eleva ligeramente. */ transform: translateY(-1px); /* Refuerza profundidad. */ box-shadow: 0 11px 22px rgba(104, 71, 245, .24); } /* Estructura compartida del botón "Usar ahora". */ .tool-action-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; } .tool-action-button span { font-size: 17px; line-height: 1; transition: transform .2s ease; } .tool-action-button:hover span { transform: translateX(3px); } .tool-action-button:active { transform: translateY(0); } /* ========================================================= 10. CATEGORÍAS ========================================================= */ .categories-header, .how-header { max-width: 680px; /* Reduce el espacio debajo de los encabezados centrales. */ margin: 0 auto 30px; text-align: center; } .categories-header p, .how-header p { margin-top: 13px; color: var(--muted); } .categories-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .category-item { padding: 30px 18px; display: flex; flex-direction: column; align-items: center; text-align: center; border: 1px solid var(--border); border-radius: 20px; background: var(--k-bg-ffffff); box-shadow: 0 9px 30px rgba(52, 37, 88, 0.04); } .category-icon { width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; border-radius: 17px; margin-bottom: 15px; } .category-icon svg { width: 29px; height: 29px; } .category-pdf .category-icon { background: var(--red-soft); color: var(--red); } .category-image .category-icon { background: var(--k-bg-ebfaf3); color: var(--k-text-269869); } .category-video .category-icon { background: var(--primary-soft); color: var(--primary); } .category-audio .category-icon { background: var(--blue-soft); color: var(--blue); } .category-item strong { color: var(--text); font-size: .98rem; } .category-item span { margin-top: 3px; color: var(--muted); font-size: .75rem; } /* ========================================================= CATEGORÍAS V2 - SOLOHAZLO Convierte las categorías en accesos compactos y modernos. La intención es evitar otra cuadrícula de tarjetas grandes y mantener esta sección ligera y fácil de recorrer. ========================================================= */ /* --------------------------------------------------------- ENCABEZADO --------------------------------------------------------- */ .categories-header { /* Limita el ancho para mantener el texto centrado. */ max-width: 720px; /* Centra el bloque y reduce espacio inferior. */ margin: 0 auto 28px; /* Centra todo el contenido. */ text-align: center; } /* Título principal de la sección. */ .categories-header h2 { /* Reduce ligeramente el espacio superior. */ margin-top: 8px; /* Color principal. */ color: var(--ink-main); /* Tamaño adaptable. */ font-size: clamp(2rem, 4vw, 2.8rem); /* Compacta las líneas. */ line-height: 1.08; /* Ajusta visualmente las letras. */ letter-spacing: -.045em; } /* Palabra destacada del título. */ .categories-header h2 span { /* Utiliza el morado principal de SoloHazlo. */ color: var(--violet-main); } /* Descripción de la sección. */ .categories-header p { /* Limita la longitud de la línea. */ max-width: 610px; /* Centra y separa del título. */ margin: 12px auto 0; /* Color secundario. */ color: var(--ink-soft); /* Tamaño compacto. */ font-size: .9rem; /* Facilita lectura. */ line-height: 1.6; } /* --------------------------------------------------------- CONTENEDOR DE CATEGORÍAS --------------------------------------------------------- */ .categories-v2-grid { /* Coloca las cuatro categorías en una sola fila. */ display: grid; /* Cuatro columnas iguales. */ grid-template-columns: repeat(4, minmax(0, 1fr)); /* Espacio reducido entre categorías. */ gap: 12px; /* Evita que la barra sea excesivamente ancha. */ max-width: 980px; /* Centra el conjunto. */ margin: 0 auto; } /* --------------------------------------------------------- CATEGORÍA INDIVIDUAL --------------------------------------------------------- */ .category-v2 { /* Permite usar button sin apariencia predeterminada. */ appearance: none; /* Ocupa todo el ancho disponible de su columna. */ width: 100%; /* Altura compacta. */ min-height: 82px; /* Espacio interior. */ padding: 14px 15px; /* Organiza icono, texto y flecha horizontalmente. */ display: flex; /* Centra verticalmente sus elementos. */ align-items: center; /* Separación entre elementos. */ gap: 12px; /* Borde muy suave. */ border: 1px solid var(--k-border-104_71_245_09); /* Esquinas redondeadas. */ border-radius: 18px; /* Fondo blanco. */ background: var(--k-bg-ffffff); /* Color general. */ color: var(--ink-main); /* Hereda Manrope. */ font-family: inherit; /* Alineación del contenido. */ text-align: left; /* Indica que será interactivo. */ cursor: pointer; /* Sombra discreta. */ box-shadow: 0 8px 25px rgba(53, 38, 92, .045); /* Animación suave. */ transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease; } /* Efecto al pasar el mouse. */ .category-v2:hover { /* Eleva ligeramente la categoría. */ transform: translateY(-3px); /* Refuerza el borde. */ border-color: var(--k-border-104_71_245_22); /* Fondo con toque lavanda. */ background: var(--k-bg-fcfbff); /* Mayor profundidad. */ box-shadow: 0 14px 30px rgba(53, 38, 92, .08); } /* --------------------------------------------------------- ICONO --------------------------------------------------------- */ .category-v2-icon { /* Tamaño fijo y compacto. */ width: 46px; height: 46px; /* Evita que Flexbox lo comprima. */ flex: 0 0 46px; /* Centra el SVG. */ display: flex; align-items: center; justify-content: center; /* Bordes suaves. */ border-radius: 14px; /* Animación del icono. */ transition: transform .2s ease; } /* SVG dentro del icono. */ .category-v2-icon svg { /* Tamaño uniforme de todos los iconos. */ width: 24px; height: 24px; } /* Pequeño movimiento del icono. */ .category-v2:hover .category-v2-icon { transform: scale(1.06); } /* --------------------------------------------------------- COLORES POR CATEGORÍA --------------------------------------------------------- */ /* PDF - rojo suave. */ .category-v2-pdf .category-v2-icon { color: var(--red); background: var(--red-soft); } /* Imágenes - verde suave. */ .category-v2-image .category-v2-icon { color: var(--k-text-279467); background: var(--k-bg-ebfaf3); } /* Video - rosa suave. */ .category-v2-video .category-v2-icon { color: var(--pink); background: var(--pink-soft); } /* Audio - violeta suave. */ .category-v2-audio .category-v2-icon { color: var(--k-text-7c4dff); background: var(--k-bg-f0ebff); } /* --------------------------------------------------------- TEXTO --------------------------------------------------------- */ .category-v2-content { /* Ocupa el espacio disponible. */ flex: 1; /* Permite correctamente el ajuste del texto. */ min-width: 0; /* Coloca nombre y contador uno debajo del otro. */ display: flex; /* Organización vertical. */ flex-direction: column; /* Reduce separación. */ gap: 2px; } /* Nombre de la categoría. */ .category-v2-content strong { color: var(--ink-main); font-size: .91rem; font-weight: 800; line-height: 1.25; } /* Cantidad de herramientas. */ .category-v2-content small { color: var(--ink-soft); font-size: .70rem; font-weight: 600; } /* --------------------------------------------------------- FLECHA --------------------------------------------------------- */ .category-v2-arrow { /* Tamaño circular. */ width: 30px; height: 30px; /* Evita que se comprima. */ flex: 0 0 30px; /* Centra la flecha. */ display: flex; align-items: center; justify-content: center; /* Forma circular. */ border-radius: 50%; /* Fondo lavanda. */ background: var(--k-bg-104_71_245_07); /* Flecha morada. */ color: var(--violet-main); /* Peso visual. */ font-weight: 800; /* Animación. */ transition: transform .2s ease, background .2s ease; } /* Movimiento de la flecha en hover. */ .category-v2:hover .category-v2-arrow { /* Desplaza la flecha hacia la derecha. */ transform: translateX(3px); /* Hace más visible el círculo. */ background: var(--k-bg-104_71_245_12); } /* ========================================================= RESPONSIVE DE CATEGORÍAS V2 ========================================================= */ /* Tablet. */ @media (max-width: 900px) { .categories-v2-grid { /* Dos categorías por fila. */ grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Teléfono. */ @media (max-width: 520px) { .categories-v2-grid { /* Una categoría por fila. */ grid-template-columns: 1fr; } .category-v2 { /* Mantiene una altura pequeña en móvil. */ min-height: 74px; } } /* ========================================================= 11. CÓMO FUNCIONA - SOLOHAZLO V2 Presenta el funcionamiento de la plataforma como un flujo horizontal de tres pasos conectados. Objetivos: - Ocupar menos espacio vertical. - Mostrar claramente el orden 01 → 02 → 03. - Mantener la identidad morada de SoloHazlo. ========================================================= */ /* --------------------------------------------------------- SECCIÓN GENERAL --------------------------------------------------------- */ .how-section { /* Espacio vertical compacto. */ padding: 64px 0 72px; /* Fondo blanco para separar ligeramente esta sección. */ background: var(--k-bg-ffffff); } /* --------------------------------------------------------- CONTENEDOR INTERNO --------------------------------------------------------- */ .how-v2-wrapper { /* Mantiene todo el contenido organizado verticalmente. */ display: flex; flex-direction: column; } /* --------------------------------------------------------- ENCABEZADO --------------------------------------------------------- */ .how-header { /* Evita líneas de texto demasiado largas. */ max-width: 720px; /* Centra el encabezado y deja espacio antes del flujo. */ margin: 0 auto 32px; /* Centra todo el texto. */ text-align: center; } /* Título principal. */ .how-header h2 { /* Pequeña separación respecto a la etiqueta. */ margin-top: 8px; /* Color principal. */ color: var(--ink-main); /* Tamaño adaptable. */ font-size: clamp(2rem, 4vw, 2.8rem); /* Compacta las líneas. */ line-height: 1.08; /* Mejora visual del título grande. */ letter-spacing: -.045em; } /* Parte destacada del título. */ .how-header h2 span { /* Morado principal SoloHazlo. */ color: var(--violet-main); } /* Descripción del encabezado. */ .how-header p { /* Evita texto demasiado ancho. */ max-width: 610px; /* Centra y separa del título. */ margin: 12px auto 0; /* Color secundario. */ color: var(--ink-soft); /* Tamaño compacto. */ font-size: .9rem; /* Facilita lectura. */ line-height: 1.6; } /* ========================================================= FLUJO PRINCIPAL ========================================================= */ .how-v2-flow { /* Organiza pasos y conectores horizontalmente. */ display: grid; /* Paso → conector → paso → conector → paso. */ grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr) 46px minmax(0, 1fr); /* Centra verticalmente todos los elementos. */ align-items: center; /* Ancho máximo del flujo. */ max-width: 1000px; /* Centra el flujo. */ margin: 0 auto; /* Ocupa el ancho disponible. */ width: 100%; } /* ========================================================= PASO INDIVIDUAL ========================================================= */ .how-v2-step { /* Necesario para posicionar el número. */ position: relative; /* Altura uniforme. */ min-height: 155px; /* Espacio interior compacto. */ padding: 22px 20px; /* Organiza icono y texto. */ display: flex; /* Centra verticalmente. */ align-items: center; /* Espacio entre icono y texto. */ gap: 16px; /* Borde discreto. */ border: 1px solid var(--k-border-104_71_245_09); /* Bordes suaves. */ border-radius: 20px; /* Fondo con transición lavanda casi imperceptible. */ background: linear-gradient( 145deg, var(--k-bg-ffffff) 0%, var(--k-bg-fbfaff) 100% ); /* Sombra ligera. */ box-shadow: 0 10px 30px rgba(47, 32, 82, .045); /* Evita que el número salga de la tarjeta. */ overflow: hidden; /* Animación. */ transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; } /* Hover del paso. */ .how-v2-step:hover { /* Eleva ligeramente. */ transform: translateY(-3px); /* Borde morado más visible. */ border-color: var(--k-border-104_71_245_20); /* Mayor profundidad. */ box-shadow: 0 16px 34px rgba(47, 32, 82, .075); } /* ========================================================= NÚMERO DEL PASO ========================================================= */ .how-v2-number { /* Coloca el número en la esquina superior derecha. */ position: absolute; top: 12px; right: 15px; /* Morado muy suave. */ color: var(--k-text-104_71_245_16); /* Número grande decorativo. */ font-size: 1.45rem; /* Peso fuerte. */ font-weight: 800; /* Compacta caracteres. */ letter-spacing: -.04em; /* Evita interacción accidental. */ pointer-events: none; } /* ========================================================= ICONO DEL PASO ========================================================= */ .how-v2-icon { /* Tamaño compacto. */ width: 52px; height: 52px; /* Evita que Flexbox reduzca el icono. */ flex: 0 0 52px; /* Centra el SVG. */ display: flex; align-items: center; justify-content: center; /* Esquinas redondeadas. */ border-radius: 16px; /* Fondo lavanda. */ background: linear-gradient( 135deg, var(--k-bg-f2eeff), var(--k-bg-e9e2ff) ); /* Color del SVG. */ color: var(--violet-main); /* Sombra interior ligera. */ box-shadow: inset 0 0 0 1px rgba(104, 71, 245, .05); /* Animación. */ transition: transform .22s ease; } /* Tamaño real del SVG. */ .how-v2-icon svg { width: 25px; height: 25px; } /* Movimiento ligero del icono. */ .how-v2-step:hover .how-v2-icon { transform: scale(1.05); } /* ========================================================= TEXTO DEL PASO ========================================================= */ .how-v2-content { /* Permite que el texto se adapte correctamente. */ min-width: 0; } /* Nombre del paso. */ .how-v2-content h3 { /* Color principal. */ color: var(--ink-main); /* Tamaño compacto. */ font-size: .96rem; /* Peso visual. */ font-weight: 800; /* Altura de línea. */ line-height: 1.3; /* Ajuste tipográfico. */ letter-spacing: -.02em; } /* Explicación del paso. */ .how-v2-content p { /* Pequeña separación del título. */ margin-top: 5px; /* Color secundario. */ color: var(--ink-soft); /* Texto pequeño. */ font-size: .76rem; /* Buena lectura. */ line-height: 1.5; } /* ========================================================= CONECTORES ENTRE PASOS ========================================================= */ .how-v2-connector { /* Centra la flecha. */ display: flex; align-items: center; justify-content: center; /* Permite decoración horizontal. */ position: relative; } /* Línea horizontal detrás de la flecha. */ .how-v2-connector::before { content: ""; position: absolute; left: 0; right: 0; height: 1px; /* Línea lavanda. */ background: var(--k-bg-104_71_245_16); } /* Flecha central. */ .how-v2-connector span { /* La coloca encima de la línea. */ position: relative; z-index: 1; /* Tamaño circular. */ width: 28px; height: 28px; /* Centra la flecha. */ display: flex; align-items: center; justify-content: center; /* Fondo blanco. */ background: var(--k-bg-ffffff); /* Borde lavanda. */ border: 1px solid var(--k-border-104_71_245_14); /* Forma circular. */ border-radius: 50%; /* Color morado. */ color: var(--violet-main); /* Peso de la flecha. */ font-weight: 800; /* Sombra muy discreta. */ box-shadow: 0 4px 12px rgba(47, 32, 82, .05); } /* ========================================================= RESPONSIVE - CÓMO FUNCIONA V2 ========================================================= */ /* --------------------------------------------------------- TABLET Convierte el flujo horizontal en vertical. --------------------------------------------------------- */ @media (max-width: 850px) { .how-v2-flow { /* Una sola columna. */ grid-template-columns: 1fr; /* Espacio entre elementos. */ gap: 10px; /* Limita el ancho. */ max-width: 560px; } .how-v2-connector { /* Altura del conector vertical. */ height: 34px; } .how-v2-connector::before { /* Convierte la línea horizontal en vertical. */ left: 50%; right: auto; top: 0; bottom: 0; width: 1px; height: auto; } .how-v2-connector span { /* Gira la flecha hacia abajo. */ transform: rotate(90deg); } } /* --------------------------------------------------------- MÓVIL --------------------------------------------------------- */ @media (max-width: 520px) { .how-section { /* Menor espacio vertical. */ padding: 52px 0 58px; } .how-header { /* Reduce distancia antes de los pasos. */ margin-bottom: 25px; } .how-v2-step { /* Tarjetas todavía más compactas. */ min-height: 130px; /* Reduce espacio interior. */ padding: 18px 16px; } .how-v2-icon { /* Icono ligeramente menor. */ width: 46px; height: 46px; flex-basis: 46px; } .how-v2-icon svg { width: 23px; height: 23px; } } /* ========================================================= 12. FOOTER - SOLOHAZLO V2 Footer compacto y profesional. Incluye: - Marca - Descripción - Navegación - Legal - Copyright ========================================================= */ /* --------------------------------------------------------- CONTENEDOR GENERAL --------------------------------------------------------- */ .footer { /* Espacio compacto. */ padding: 48px 0 22px; /* Fondo oscuro con identidad morada. */ background: linear-gradient( 135deg, var(--k-bg-24183f) 0%, var(--k-bg-1b132f) 100% ); /* Color general del texto. */ color: var(--k-text-255_255_255_72); } /* ========================================================= PARTE SUPERIOR ========================================================= */ .footer-v2-top { /* Dos zonas principales: marca + navegación. */ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); /* Separación entre zonas. */ gap: 70px; /* Espacio inferior. */ padding-bottom: 34px; } /* ========================================================= MARCA ========================================================= */ .footer-v2-brand { /* Limita el ancho de lectura. */ max-width: 360px; } /* Logo dentro del footer. */ .footer .brand { /* Mantiene distribución horizontal. */ display: inline-flex; align-items: center; gap: 11px; } /* Logo gráfico ligeramente más pequeño. */ .footer .brand-icon { width: 42px; height: 42px; border-radius: 13px; box-shadow: 0 8px 22px rgba(109, 74, 255, .22); } /* Nombre de la marca. */ .footer .brand-name { color: var(--k-text-ffffff); font-size: 1.25rem; } /* Parte morada del nombre. */ .footer .brand-name span { color: var(--k-text-a78fff); } /* Descripción principal. */ .footer-v2-brand > p { /* Separación respecto al logo. */ margin-top: 15px; /* Color secundario. */ color: var(--k-text-255_255_255_55); /* Tamaño compacto. */ font-size: .82rem; /* Lectura cómoda. */ line-height: 1.6; } /* ========================================================= MENSAJE INFERIOR DE MARCA ========================================================= */ .footer-v2-message { /* Separación superior. */ margin-top: 16px; /* Organiza check y texto. */ display: flex; align-items: center; gap: 7px; /* Color secundario. */ color: var(--k-text-255_255_255_62); } /* Check visual. */ .footer-v2-message > span { /* Tamaño circular. */ width: 22px; height: 22px; /* Centra el check. */ display: flex; align-items: center; justify-content: center; /* Fondo verde translúcido. */ background: var(--k-bg-31_190_122_13); /* Verde suave. */ color: var(--k-text-67d8a6); /* Forma circular. */ border-radius: 50%; /* Tamaño del símbolo. */ font-size: .70rem; /* Peso visual. */ font-weight: 800; } /* Texto del mensaje. */ .footer-v2-message p { margin: 0; font-size: .72rem; } /* ========================================================= NAVEGACIÓN ========================================================= */ .footer-v2-links { /* Tres columnas de enlaces. */ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); /* Separación entre columnas. */ gap: 36px; } /* Cada columna. */ .footer-v2-column { display: flex; flex-direction: column; gap: 8px; } /* Encabezado de columna. */ .footer-v2-column strong { /* Separación inferior. */ margin-bottom: 4px; /* Blanco. */ color: var(--k-text-ffffff); /* Tamaño compacto. */ font-size: .78rem; /* Peso fuerte. */ font-weight: 800; } /* Enlaces. */ .footer-v2-column a { /* Color discreto. */ color: var(--k-text-255_255_255_50); /* Tamaño pequeño. */ font-size: .74rem; /* Animación. */ transition: color .2s ease, transform .2s ease; } /* Hover de enlaces. */ .footer-v2-column a:hover { /* Blanco. */ color: var(--k-text-ffffff); /* Pequeño desplazamiento. */ transform: translateX(2px); } /* ========================================================= PARTE INFERIOR ========================================================= */ .footer-v2-bottom { /* Línea superior. */ border-top: 1px solid var(--k-border-255_255_255_08); /* Espacio sobre el contenido. */ padding-top: 18px; /* Distribución horizontal. */ display: flex; align-items: center; justify-content: space-between; gap: 20px; /* Color muy discreto. */ color: var(--k-text-255_255_255_40); /* Tamaño pequeño. */ font-size: .68rem; } /* ========================================================= RESPONSIVE FOOTER ========================================================= */ @media (max-width: 850px) { .footer-v2-top { /* Una columna. */ grid-template-columns: 1fr; /* Menor separación. */ gap: 34px; } .footer-v2-links { /* Mantiene tres columnas mientras haya espacio. */ grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 560px) { .footer { /* Más compacto en móvil. */ padding: 40px 0 20px; } .footer-v2-links { /* Una columna en móvil pequeño. */ grid-template-columns: 1fr; gap: 24px; } .footer-v2-bottom { /* Apila copyright y mensaje. */ flex-direction: column; align-items: flex-start; gap: 5px; } } /* ========================================================= 13. HERRAMIENTAS PDF Estilos compartidos por Comprimir PDF y vistas de proceso. ========================================================= */ /* --------------------------------------------------------- COMPRIMIR PDF --------------------------------------------------------- */ .tool-page { min-height: auto; padding: 44px 0 60px; background: radial-gradient( circle at 50% -10%, var(--k-bg-109_74_255_0_10), transparent 32% ), linear-gradient( 180deg, var(--k-bg-faf9ff), var(--k-bg-ffffff) ); } .tool-page-header { max-width: 620px; margin: 0 auto 24px; text-align: center; } .tool-page-header h1 { margin: 6px 0 8px; color: var(--text); font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1.04; letter-spacing: -.045em; } .tool-page-header p { max-width: 520px; margin: 0 auto; color: var(--muted); font-size: .92rem; line-height: 1.55; } /* TARJETA PRINCIPAL */ .compressor-wrapper { max-width: 680px; margin: 0 auto; } .compressor-card { padding: 28px; text-align: center; border: 1px solid var(--k-border-e8e2f6); border-radius: 22px; background: var(--k-bg-ffffff); box-shadow: 0 18px 50px rgba(76, 47, 203, 0.08); } /* ICONO PRINCIPAL */ .compressor-card .compressor-icon { width: 54px !important; height: 54px !important; min-width: 54px !important; min-height: 54px !important; max-width: 54px !important; max-height: 54px !important; margin: 0 auto 14px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 16px !important; background: linear-gradient( 135deg, var(--k-bg-f2eeff), var(--k-bg-ebe4ff) ) !important; color: var(--primary) !important; box-shadow: 0 8px 20px rgba(109, 74, 255, 0.10); } .compressor-card .compressor-icon svg { width: 27px !important; height: 27px !important; min-width: 27px !important; min-height: 27px !important; max-width: 27px !important; max-height: 27px !important; } /* TITULO TARJETA */ .compressor-card h2 { margin: 0 0 6px; color: var(--text); font-size: 1.35rem; letter-spacing: -.025em; } .compressor-card > p { max-width: 470px; margin: 0 auto 18px; color: var(--muted); font-size: .86rem; line-height: 1.5; } /* ZONA DE CARGA */ .upload-zone { min-height: 155px; padding: 22px 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; border: 1.5px dashed var(--k-border-c8bbff); border-radius: 18px; background: linear-gradient( 180deg, var(--k-bg-faf9ff), var(--k-bg-f7f4ff) ); transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; } .upload-zone:hover { border-color: var(--primary); background: var(--k-bg-f4f0ff); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(109, 74, 255, 0.07); } /* ICONO DE SUBIDA */ .upload-zone-icon { width: 44px; height: 44px; margin-bottom: 6px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: var(--k-bg-ffffff); color: var(--primary); box-shadow: 0 7px 18px rgba(109, 74, 255, 0.11); } .upload-zone-icon svg { width: 22px !important; height: 22px !important; } .upload-zone strong { color: var(--text); font-size: .91rem; } .upload-zone span { color: var(--muted); font-size: .75rem; } /* ARCHIVO SELECCIONADO */ .selected-file { margin-top: 11px; padding: 11px 14px; border: 1px solid var(--k-border-e5defd); border-radius: 12px; background: var(--k-bg-faf9ff); text-align: left; } .selected-file div { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .selected-file strong { min-width: 0; overflow: hidden; color: var(--text); font-size: .83rem; text-overflow: ellipsis; white-space: nowrap; } .selected-file span { flex-shrink: 0; color: var(--muted); font-size: .73rem; } /* BOTÓN */ .compress-button { width: 100%; min-height: 48px; margin-top: 12px; padding: 0 20px; border: 0; border-radius: 13px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--k-text-ffffff); background: linear-gradient( 135deg, var(--primary), var(--primary-dark) ); cursor: pointer; font-weight: 750; font-size: .9rem; box-shadow: 0 10px 25px rgba(109, 74, 255, 0.18); transition: transform .2s ease, box-shadow .2s ease; } .compress-button:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(109, 74, 255, 0.24); } .compress-button svg { width: 17px !important; height: 17px !important; } /* ESTADO DE COMPRESIÓN */ .compression-status { margin-top: 16px; } .compression-progress { padding: 16px; border: 1px solid var(--k-border-e5defd); border-radius: 14px; background: linear-gradient( 180deg, var(--k-bg-fbfaff), var(--k-bg-f7f4ff) ); text-align: left; } .progress-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .progress-header span:first-child { color: var(--text); font-size: .84rem; font-weight: 700; } .progress-header span:last-child { color: var(--primary); font-size: .78rem; font-weight: 800; } .progress-track { width: 100%; height: 9px; overflow: hidden; border-radius: 999px; background: var(--k-bg-ece7fb); } .progress-bar { width: 0%; height: 100%; border-radius: inherit; background: linear-gradient( 90deg, var(--primary), var(--primary-light) ); box-shadow: 0 0 14px rgba(109, 74, 255, 0.28); transition: width .35s ease; } .progress-message { margin: 9px 0 0; color: var(--muted); font-size: .73rem; } /* RESULTADO */ .compression-result { padding: 18px; border: 1px solid var(--k-border-d9f0e5); border-radius: 16px; background: linear-gradient( 180deg, var(--k-bg-fbfffd), var(--k-bg-f5fcf8) ); text-align: center; } .result-success-icon { width: 42px; height: 42px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: 1.2rem; font-weight: 900; } .compression-result h3 { margin: 0 0 5px; color: var(--text); font-size: 1.05rem; } .compression-result > p { margin: 0 0 14px; color: var(--muted); font-size: .78rem; } .result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; } .result-stat { padding: 10px 8px; border: 1px solid var(--k-border-e7e1f5); border-radius: 11px; background: var(--k-bg-ffffff); } .result-stat span { display: block; margin-bottom: 3px; color: var(--muted); font-size: .68rem; } .result-stat strong { display: block; color: var(--text); font-size: .84rem; } .download-button { width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 12px; color: var(--k-text-ffffff); background: linear-gradient( 135deg, var(--primary), var(--primary-dark) ); text-decoration: none; font-size: .86rem; font-weight: 800; box-shadow: 0 10px 24px rgba(109, 74, 255, 0.18); transition: transform .2s ease, box-shadow .2s ease; } .download-button:hover { transform: translateY(-1px); box-shadow: 0 13px 28px rgba(109, 74, 255, 0.24); } .compress-again-button { margin-top: 8px; padding: 7px 12px; border: 0; background: transparent; color: var(--primary); cursor: pointer; font-size: .75rem; font-weight: 700; } .compress-again-button:hover { text-decoration: underline; } /* SEGURIDAD */ .compressor-security { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 7px; } .compressor-security > div { width: 23px; height: 23px; flex: 0 0 23px; display: flex; align-items: center; justify-content: center; color: var(--green); } .compressor-security svg { width: 18px !important; height: 18px !important; } .compressor-security p { margin: 0; color: var(--muted); font-size: .74rem; text-align: left; } /* PASOS INFERIORES */ .tool-info-grid { max-width: 680px; margin: 18px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .tool-info-card { padding: 17px; border: 1px solid var(--k-border-eee9fb); border-radius: 15px; background: var(--k-bg-ffffff); box-shadow: 0 7px 20px rgba(52, 37, 88, 0.03); } .tool-info-number { display: block; margin-bottom: 7px; color: var(--primary); font-size: .68rem; font-weight: 850; letter-spacing: .08em; } .tool-info-card h3 { margin: 0 0 4px; color: var(--text); font-size: .88rem; } .tool-info-card p { margin: 0; color: var(--muted); font-size: .73rem; line-height: 1.45; } /* ========================================================= CONTENIDO INFORMATIVO - HERRAMIENTAS PDF ========================================================= */ .tool-content { max-width: 920px; margin: 64px auto 0; } .tool-content-section { margin-bottom: 58px; } .tool-content-section:last-child { margin-bottom: 10px; } .tool-content-section .section-label { display: inline-block; margin-bottom: 10px; color: var(--primary); font-size: .72rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; } .tool-content-section > h2 { max-width: 720px; margin: 0 0 16px; color: var(--text); font-size: 1.75rem; line-height: 1.2; letter-spacing: -.025em; } .tool-content-section > p { max-width: 800px; margin: 0 0 14px; color: var(--muted); font-size: .96rem; line-height: 1.75; } /* BENEFICIOS */ .tool-benefits-grid { margin-top: 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .tool-benefit-card { padding: 24px; border: 1px solid var(--k-border-eee9fb); border-radius: 18px; background: var(--k-bg-ffffff); box-shadow: 0 8px 26px rgba(52, 37, 88, 0.045); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .tool-benefit-card:hover { transform: translateY(-2px); border-color: var(--k-border-108_70_255_22); box-shadow: 0 12px 30px rgba(52, 37, 88, 0.07); } .tool-benefit-card h3 { margin: 0 0 8px; color: var(--text); font-size: 1rem; } .tool-benefit-card p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.65; } /* PASOS DETALLADOS */ .tool-steps-detailed { margin-top: 26px; display: grid; gap: 14px; } .tool-steps-detailed article { padding: 22px 24px; display: flex; align-items: flex-start; gap: 18px; border: 1px solid var(--k-border-eee9fb); border-radius: 18px; background: var(--k-bg-ffffff); box-shadow: 0 7px 22px rgba(52, 37, 88, 0.035); } .tool-steps-detailed article > span { width: 38px; height: 38px; flex: 0 0 38px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--k-bg-108_70_255_09); color: var(--primary); font-size: .85rem; font-weight: 850; } .tool-steps-detailed h3 { margin: 1px 0 6px; color: var(--text); font-size: 1rem; } .tool-steps-detailed p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.6; } /* PRIVACIDAD */ .tool-security-info { padding: 30px 32px; border: 1px solid var(--k-border-32_178_112_18); border-radius: 20px; background: linear-gradient( 135deg, var(--k-bg-32_178_112_055), var(--k-bg-108_70_255_035) ); } .tool-security-info > h2 { margin-top: 0; } .tool-security-info > p:last-child { margin-bottom: 0; } .tool-security-info a { color: var(--primary); font-weight: 750; text-decoration: none; } .tool-security-info a:hover { text-decoration: underline; } /* PREGUNTAS FRECUENTES */ .tool-faq { margin-top: 24px; display: grid; gap: 10px; } .tool-faq details { overflow: hidden; border: 1px solid var(--k-border-eee9fb); border-radius: 15px; background: var(--k-bg-ffffff); box-shadow: 0 5px 18px rgba(52, 37, 88, .025); } .tool-faq summary { position: relative; padding: 18px 52px 18px 20px; cursor: pointer; list-style: none; color: var(--text); font-size: .91rem; font-weight: 750; } .tool-faq summary::-webkit-details-marker { display: none; } .tool-faq summary::after { content: '+'; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); color: var(--primary); font-size: 1.25rem; font-weight: 500; } .tool-faq details[open] summary::after { content: '−'; } .tool-faq details[open] summary { border-bottom: 1px solid var(--k-border-f0ecf8); } .tool-faq details p { margin: 0; padding: 16px 20px 19px; color: var(--muted); font-size: .86rem; line-height: 1.65; } /* HERRAMIENTAS RELACIONADAS */ .related-tools { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .related-tools a { padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--k-border-eee9fb); border-radius: 17px; background: var(--k-bg-ffffff); color: inherit; text-decoration: none; box-shadow: 0 6px 20px rgba(52, 37, 88, .035); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .related-tools a:hover { transform: translateY(-2px); border-color: var(--k-border-108_70_255_25); box-shadow: 0 10px 26px rgba(52, 37, 88, .065); } .related-tools strong { color: var(--text); font-size: .95rem; } .related-tools span { color: var(--muted); font-size: .82rem; line-height: 1.5; } /* RESPONSIVE COMPRESOR */ @media (max-width: 780px) { .tool-page { padding: 36px 0 50px; } .tool-page-header { margin-bottom: 20px; } .tool-page-header h1 { font-size: 2.2rem; } .compressor-card { padding: 22px 16px; border-radius: 19px; } .upload-zone { min-height: 145px; padding: 20px 14px; } .tool-info-grid { grid-template-columns: 1fr; } } /* ========================================================= 14. RESPONSIVE Ajustes coordinados para desktop, tablet y móvil. ========================================================= */ /* --------------------------------------------------------- DESKTOP MEDIANO Reduce el catálogo de cinco a cuatro columnas. --------------------------------------------------------- */ @media (max-width: 1200px) { .tools-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* --------------------------------------------------------- TABLET HORIZONTAL / LAPTOP PEQUEÑA --------------------------------------------------------- */ @media (max-width: 1050px) { .main-nav { gap: 20px; } .categories-grid { grid-template-columns: repeat(2, 1fr); } } /* Catálogo a tres columnas. */ @media (max-width: 950px) { .tools-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* --------------------------------------------------------- TABLET Y MÓVIL --------------------------------------------------------- */ @media (max-width: 780px) { .container { width: min( calc(100% - 28px), var(--container) ); } /* Header compacto. */ .header-inner { min-height: 72px; } .main-nav { display: none; } .header-cta { min-height: 42px; padding: 0 15px; font-size: .78rem; } .brand-icon { width: 40px; height: 40px; border-radius: 13px; } .brand-icon svg { width: 23px; height: 23px; } .brand-name { font-size: 1.22rem; } /* Encabezados de secciones. */ .section-header { align-items: flex-start; flex-direction: column; gap: 15px; } /* Categorías y pasos pasan a una columna. */ .categories-grid, .steps-grid { grid-template-columns: 1fr; } /* Footer apilado. */ .footer-top { grid-template-columns: 1fr; gap: 40px; } .footer-links { grid-template-columns: repeat(2, 1fr); } .footer-bottom { flex-direction: column; gap: 8px; } /* Herramientas PDF. */ .tool-page { padding: 36px 0 50px; } .tool-page-header { margin-bottom: 20px; } .tool-page-header h1 { font-size: 2.2rem; } .compressor-card { padding: 22px 16px; border-radius: 19px; } .upload-zone { min-height: 145px; padding: 20px 14px; } .tool-info-grid { grid-template-columns: 1fr; } } /* --------------------------------------------------------- HERO V2 EN TABLET / MÓVIL --------------------------------------------------------- */ @media (max-width: 700px) { .hero-v2 { padding: 54px 0 50px; } .hero-v2-title { font-size: clamp(2.6rem, 13vw, 4rem); } .hero-v2-search { flex-direction: column; } .hero-v2-search-field { min-height: 52px; } .hero-v2-search button { width: 100%; } .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* --------------------------------------------------------- MÓVIL PEQUEÑO --------------------------------------------------------- */ @media (max-width: 480px) { .tools-grid { grid-template-columns: 1fr; } .footer-links { grid-template-columns: 1fr; } } /* ========================================================= SOLOHAZLO - ORDENAR PDF ========================================================= Estilos exclusivos para la herramienta Ordenar PDF. ========================================================= */ /* --------------------------------------------------------- CONTENEDOR DEL EDITOR --------------------------------------------------------- */ .organize-editor { width: 100%; margin-top: 24px; padding: 24px; background: var(--k-bg-ffffff); border: 1px solid var(--k-border-eee9f8); border-radius: 22px; box-shadow: 0 12px 35px rgba(63, 38, 96, 0.07); } /* --------------------------------------------------------- ENCABEZADO DEL EDITOR --------------------------------------------------------- */ .organize-editor-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; } .organize-editor-header h2 { margin: 0 0 5px; font-size: 1.35rem; color: var(--k-text-241c32); } .organize-editor-header p { margin: 0; font-size: 0.9rem; color: var(--k-text-746d7e); } /* --------------------------------------------------------- CONTADOR DE PÁGINAS --------------------------------------------------------- */ .page-counter { flex-shrink: 0; padding: 8px 13px; background: var(--k-bg-f4effb); border: 1px solid var(--k-border-e6daf7); border-radius: 999px; font-size: 0.82rem; font-weight: 700; color: var(--k-text-6941a5); } /* --------------------------------------------------------- CUADRÍCULA DE MINIATURAS --------------------------------------------------------- */ .organize-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 16px; width: 100%; } /* --------------------------------------------------------- TARJETA DE CADA PÁGINA --------------------------------------------------------- */ .organize-page { position: relative; overflow: hidden; padding: 8px; background: var(--k-bg-ffffff); border: 1px solid var(--k-border-e9e3f0); border-radius: 14px; cursor: grab; user-select: none; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease; } .organize-page:hover { transform: translateY(-2px); border-color: var(--k-border-b99adc); box-shadow: 0 8px 22px rgba(83, 52, 121, 0.12); } .organize-page:active { cursor: grabbing; } /* --------------------------------------------------------- MINIATURA DEL PDF --------------------------------------------------------- */ .organize-page img { display: block; width: 100%; aspect-ratio: 0.707 / 1; object-fit: contain; background: var(--k-bg-f7f5f9); border-radius: 9px; pointer-events: none; } /* --------------------------------------------------------- NÚMERO DE PÁGINA --------------------------------------------------------- */ .organize-page-label { padding: 9px 28px 2px 3px; font-size: 0.8rem; font-weight: 700; color: var(--k-text-40374d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* --------------------------------------------------------- AYUDA PARA REORDENAR PÁGINAS --------------------------------------------------------- */ .organize-drag-help { margin: 6px 0 0; color: var(--k-text-6f6877); line-height: 1.5; } .organize-help-mobile { display: none; } .organize-handle-example { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 26px; margin: 0 3px; padding: 0 7px; border: 1px solid var(--k-border-d9cce8); border-radius: 8px; background: var(--k-bg-f7f2fb); color: var(--k-text-76539c); font-size: 1rem; line-height: 1; } /* --------------------------------------------------------- AGARRADERA PARA REORDENAR --------------------------------------------------------- */ .organize-page-handle { position: absolute; right: 8px; bottom: 8px; display: flex; align-items: center; justify-content: center; width: 38px; height: 34px; border: 1px solid var(--k-border-d9cce8); border-radius: 9px; background: var(--k-bg-f7f2fb); color: var(--k-text-76539c); font-size: 1.05rem; font-weight: 800; line-height: 1; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; } .organize-page-handle:active { cursor: grabbing; transform: scale(.94); } @media (max-width: 768px) { .organize-help-desktop { display: none; } .organize-help-mobile { display: inline; } .organize-drag-help { margin-top: 8px; font-size: .92rem; } .organize-page-handle { width: 44px; height: 40px; right: 7px; bottom: 7px; border-radius: 10px; font-size: 1.15rem; } } /* --------------------------------------------------------- PÁGINA QUE ESTÁ SIENDO ARRASTRADA --------------------------------------------------------- */ .organize-page.dragging { opacity: 0.82; transform: scale(1.03); border: 2px solid var(--k-border-8659b8); box-shadow: 0 14px 30px rgba(83, 52, 121, 0.22); z-index: 10; } /* --------------------------------------------------------- ACCIONES DEL ORGANIZADOR --------------------------------------------------------- */ .organize-actions { display: flex; justify-content: center; margin-top: 24px; } .organize-actions .primary-button { min-width: 220px; } /* --------------------------------------------------------- ARCHIVO SELECCIONADO --------------------------------------------------------- */ .selected-file { margin-top: 14px; padding: 9px 14px; background: var(--k-bg-f8f5fc); border: 1px solid var(--k-border-e9def6); border-radius: 10px; color: var(--k-text-51475e); font-size: 0.82rem; line-height: 1.45; } .selected-file strong { color: var(--k-text-332840); } /* --------------------------------------------------------- CAJA DE PROCESAMIENTO --------------------------------------------------------- */ .processing-box { width: 100%; padding: 38px 20px; text-align: center; background: var(--k-bg-ffffff); border: 1px solid var(--k-border-eee9f8); border-radius: 22px; box-shadow: 0 12px 35px rgba(63, 38, 96, 0.06); } .processing-box h3 { margin: 14px 0 5px; color: var(--k-text-2f2639); } .processing-box p { margin: 0; color: var(--k-text-777080); font-size: 0.9rem; } /* --------------------------------------------------------- ANIMACIÓN DE PROCESAMIENTO --------------------------------------------------------- */ .processing-spinner { width: 38px; height: 38px; margin: 0 auto; border: 4px solid var(--k-border-eee6f7); border-top-color: var(--k-border-7950a8); border-radius: 50%; animation: organizeSpin 0.8s linear infinite; } @keyframes organizeSpin { to { transform: rotate(360deg); } } /* --------------------------------------------------------- RESULTADO --------------------------------------------------------- */ .tool-result { width: 100%; padding: 34px 22px; text-align: center; background: var(--k-bg-ffffff); border: 1px solid var(--k-border-e8e0f2); border-radius: 22px; box-shadow: 0 12px 35px rgba(63, 38, 96, 0.07); } .result-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0 auto 12px; background: var(--k-bg-f0e8f9); border-radius: 50%; color: var(--k-text-7045a2); font-size: 1.35rem; font-weight: 800; } .tool-result h2 { margin: 0 0 7px; color: var(--k-text-2c2337); } .tool-result > p { margin: 0; color: var(--k-text-777080); } /* --------------------------------------------------------- ESTADÍSTICAS DEL RESULTADO --------------------------------------------------------- */ .result-stats { display: flex; justify-content: center; gap: 12px; margin: 22px auto; } .result-stat { min-width: 105px; padding: 11px 15px; background: var(--k-bg-f8f5fc); border-radius: 12px; } .result-stat strong, .result-stat span { display: block; } .result-stat strong { margin-bottom: 3px; color: var(--k-text-4d326c); font-size: 0.9rem; } .result-stat span { color: var(--k-text-88808f); font-size: 0.72rem; } /* --------------------------------------------------------- BOTÓN SECUNDARIO --------------------------------------------------------- */ .secondary-button { display: block; margin: 12px auto 0; padding: 9px 15px; background: transparent; border: 0; color: var(--k-text-74519a); font: inherit; font-size: 0.84rem; font-weight: 700; cursor: pointer; } .secondary-button:hover { text-decoration: underline; } /* --------------------------------------------------------- MENSAJES DE ERROR --------------------------------------------------------- */ .tool-error { margin-top: 16px; padding: 12px 15px; background: var(--k-bg-fff4f4); border: 1px solid var(--k-border-f1d0d0); border-radius: 11px; color: var(--k-text-a43f3f); font-size: 0.86rem; text-align: center; } /* --------------------------------------------------------- NOTA DE SEGURIDAD --------------------------------------------------------- */ .tool-security-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; color: var(--k-text-7d7584); font-size: 0.8rem; } .tool-security-note p { margin: 0; } /* ========================================================= ORDENAR PDF - TABLET ========================================================= */ @media (max-width: 700px) { .organize-editor { padding: 18px 14px; } .organize-editor-header { align-items: flex-start; } .organize-pages { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .organize-page { padding: 6px; border-radius: 11px; } .organize-page-label { font-size: 0.72rem; } } /* ========================================================= ORDENAR PDF - MÓVIL ========================================================= */ @media (max-width: 480px) { .organize-editor-header { flex-direction: column; gap: 10px; } .organize-pages { grid-template-columns: repeat(2, minmax(0, 1fr)); } .result-stats { flex-direction: column; } .result-stat { width: 100%; } .organize-actions .primary-button { width: 100%; min-width: 0; } } /* ========================================================= SOLOHAZLO - BOTÓN PRINCIPAL DE HERRAMIENTAS ========================================================= Botón reutilizable para acciones principales dentro de las herramientas de SoloHazlo. ========================================================= */ .primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 11px 22px; background: linear-gradient( 135deg, var(--k-bg-7450ff) 0%, var(--k-bg-4f2bd9) 100% ); border: 0; border-radius: 12px; color: var(--k-text-ffffff); font-family: inherit; font-size: 0.88rem; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; box-shadow: 0 8px 20px rgba(92, 57, 220, 0.20); transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease; } /* Efecto al pasar el mouse. */ .primary-button:hover { transform: translateY(-1px); box-shadow: 0 11px 24px rgba(92, 57, 220, 0.27); text-decoration: none; } /* Efecto al presionar. */ .primary-button:active { transform: translateY(0); } /* Estado deshabilitado durante procesamiento. */ .primary-button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; } /* ========================================================= ORDENAR PDF - BARRA FLOTANTE DE ACCIONES ========================================================= Mantiene visible el botón "Generar PDF ordenado" mientras el usuario reorganiza las páginas. ========================================================= */ .organize-floating-actions { /* La barra permanece visible al desplazarse. */ position: sticky; bottom: 18px; z-index: 50; /* Distribución horizontal compacta. */ display: flex; align-items: center; justify-content: space-between; gap: 20px; /* Tamaño y posición. */ width: min(720px, calc(100% - 32px)); margin: 28px auto 18px; padding: 12px 14px 12px 18px; /* Apariencia SoloHazlo. */ background: var(--k-bg-255_255_255_0_96); border: 1px solid var(--k-border-116_80_255_0_18); border-radius: 16px; /* Separación visual sobre las miniaturas. */ box-shadow: 0 12px 35px rgba(40, 24, 90, 0.12), 0 3px 10px rgba(40, 24, 90, 0.06); /* Suaviza el fondo cuando el navegador lo soporta. */ backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ========================================================= INFORMACIÓN DE LA BARRA ========================================================= */ .organize-floating-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; } .organize-floating-info strong { color: var(--k-text-241942); font-size: 0.88rem; font-weight: 700; line-height: 1.25; } .organize-floating-info span { color: var(--k-text-776d8c); font-size: 0.76rem; line-height: 1.35; } /* ========================================================= BOTÓN DENTRO DE LA BARRA ========================================================= */ .organize-floating-actions .primary-button { flex-shrink: 0; min-height: 44px; padding: 11px 18px; white-space: nowrap; } /* ========================================================= VERSIÓN MÓVIL ========================================================= */ @media (max-width: 640px) { .organize-floating-actions { bottom: 10px; width: calc(100% - 20px); margin: 20px auto 10px; padding: 10px; border-radius: 14px; } /* En pantallas pequeñas ocultamos el texto secundario para conservar una barra compacta. */ .organize-floating-info span { display: none; } .organize-floating-info strong { font-size: 0.8rem; } .organize-floating-actions .primary-button { min-height: 42px; padding: 10px 14px; font-size: 0.8rem; } } /* ========================================================= CONTROL GLOBAL DE ELEMENTOS OCULTOS ========================================================= Garantiza que cualquier elemento con el atributo HTML "hidden" permanezca realmente oculto, incluso cuando otra clase CSS utilice display:flex, display:grid, etc. ========================================================= */ [hidden] { display: none !important; } /* Resultado visible de las herramientas */ .tool-result:not([hidden]) { display: block !important; } /* ========================================================= SOLOHAZLO - CENSURAR PDF ========================================================= Estilos exclusivos para el editor visual de Censurar PDF. ========================================================= */ /* --------------------------------------------------------- ÁREA PRINCIPAL --------------------------------------------------------- */ .redact-workspace { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; width: 100%; align-items: start; } /* --------------------------------------------------------- COLUMNA DE MINIATURAS --------------------------------------------------------- */ .redact-pages { display: flex; flex-direction: column; gap: 12px; width: 150px; } /* --------------------------------------------------------- TARJETA DE MINIATURA --------------------------------------------------------- */ .redact-page { width: 100%; padding: 7px; background: var(--k-bg-ffffff); border: 1px solid var(--k-border-e9e3f0); border-radius: 12px; cursor: pointer; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .redact-page:hover { transform: translateY(-1px); border-color: var(--k-border-b99adc); box-shadow: 0 6px 18px rgba(83, 52, 121, 0.10); } /* Página seleccionada */ .redact-page.active { border-color: var(--k-border-7650d8); box-shadow: 0 0 0 2px rgba(118, 80, 216, 0.12); } /* Imagen de miniatura */ .redact-page img { display: block; width: 100%; height: auto; max-height: 175px; object-fit: contain; background: var(--k-bg-f7f5f9); border-radius: 8px; pointer-events: none; } /* --------------------------------------------------------- ÁREA DEL DOCUMENTO --------------------------------------------------------- */ .redact-document-area { width: 100%; min-width: 0; padding: 24px; background: var(--k-bg-f7f5fa); border: 1px solid var(--k-border-ece6f3); border-radius: 16px; overflow: auto; } /* --------------------------------------------------------- CONTENEDOR DE LA PÁGINA --------------------------------------------------------- */ .redact-canvas-container { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; background: #ffffff; box-shadow: 0 8px 28px rgba(35, 25, 50, 0.12); } /* ========================================================= CENSURAR PDF - CAPA DE ZOOM ========================================================= */ .redact-zoom-layer { position: relative; width: fit-content; max-width: none; transform-origin: top left; } /* --------------------------------------------------------- PÁGINA PDF PRINCIPAL --------------------------------------------------------- */ .redact-main-page { display: block; /* * El JPG continúa teniendo 1400 px reales. * Únicamente limitamos su tamaño visual. */ width: auto; max-width: 100%; height: auto; user-select: none; -webkit-user-drag: none; } /* --------------------------------------------------------- RESPONSIVE --------------------------------------------------------- */ @media (max-width: 800px) { .redact-workspace { grid-template-columns: 1fr; } .redact-pages { width: 100%; flex-direction: row; overflow-x: auto; padding-bottom: 8px; } .redact-page { flex: 0 0 105px; } .redact-document-area { padding: 12px; } } /* ========================================================= SELECCIÓN DE ÁREAS PARA CENSURAR ========================================================= */ .redact-main-page { cursor: crosshair; touch-action: none; } /* Rectángulo mientras el usuario está arrastrando */ .redact-selection-preview { position: absolute; z-index: 10; background: var(--k-bg-20_20_20_0_45); border: 2px dashed var(--k-border-ffffff); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55); pointer-events: none; } /* Área ya seleccionada */ .redact-selection { position: absolute; z-index: 9; background: var(--k-bg-10_10_10_0_88); border: 1px solid var(--k-border-255_255_255_0_75); pointer-events: auto; cursor: pointer; } .redact-selection.is-selected { z-index: 11; border: 3px solid var(--k-border-6c3cff); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 5px rgba(108, 60, 255, 0.35); } #redactDeleteSelectionButton:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; text-decoration: none; } /* ===================================================== PROTEGER PDF ===================================================== */ .protect-password-fields { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; } .protect-field { display: flex; flex-direction: column; gap: 7px; } .protect-field label { color: var(--text); font-size: .78rem; font-weight: 700; } .protect-field input { width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid var(--k-border-ddd5f8); border-radius: 12px; outline: none; background: var(--k-bg-ffffff); color: var(--text); font: inherit; font-size: .84rem; transition: border-color .2s ease, box-shadow .2s ease; } .protect-field input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(109, 74, 255, 0.10); } .protect-field input::placeholder { color: var(--k-text-aaa3bd); } .protect-password-help { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .74rem; line-height: 1.5; } .protect-error { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--k-border-ffd0d0); border-radius: 10px; background: var(--k-bg-fff7f7); color: var(--k-text-b42318); text-align: left; font-size: .78rem; line-height: 1.45; } #protectPdfButton:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; } @media (max-width: 640px) { .protect-password-fields { grid-template-columns: 1fr; } .protect-password-help { grid-column: auto; } } /* ===================================================== PROTEGER PDF - PERMISOS ===================================================== */ .protect-permissions { grid-column: 1 / -1; margin-top: 8px; padding: 18px; border: 1px solid var(--k-border-e5def8); border-radius: 14px; background: var(--k-bg-faf9ff); } .protect-permissions-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 5px; } .protect-permissions-header strong { color: var(--text); font-size: .88rem; } .protect-permissions-header span { padding: 4px 9px; border-radius: 999px; background: var(--k-bg-eee9ff); color: var(--primary); font-size: .68rem; font-weight: 700; } .protect-permissions-description { margin: 0 0 14px; color: var(--muted); font-size: .76rem; line-height: 1.5; } .protect-permission-option { display: flex; align-items: flex-start; gap: 11px; padding: 11px 12px; margin-bottom: 8px; border: 1px solid var(--k-border-ebe7f5); border-radius: 11px; background: var(--k-bg-ffffff); cursor: pointer; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; } .protect-permission-option:hover { border-color: var(--k-border-cfc4f5); background: var(--k-bg-fdfcff); } .protect-permission-option:has(input:checked) { border-color: var(--primary); background: var(--k-bg-f7f4ff); box-shadow: 0 0 0 2px rgba(109, 74, 255, .06); } .protect-permission-option input { width: 17px; height: 17px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--primary); cursor: pointer; } .protect-permission-option > span { display: flex; flex-direction: column; gap: 3px; } .protect-permission-option strong { color: var(--text); font-size: .78rem; font-weight: 700; } .protect-permission-option small { color: var(--muted); font-size: .70rem; line-height: 1.4; } .protect-owner-password { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--k-border-e5def8); display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .protect-owner-password .protect-password-help { grid-column: 1 / -1; margin-bottom: 0; } @media (max-width: 640px) { .protect-permissions { padding: 14px; } .protect-owner-password { grid-template-columns: 1fr; } .protect-owner-password .protect-password-help { grid-column: auto; } } /* ========================================================= SOLOHAZLO - EXTRAER PÁGINAS PDF Miniaturas de selección ========================================================= */ .extract-pages-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 14px; margin-top: 18px; /* Mantener compacta la herramienta con PDFs grandes */ max-height: 520px; overflow-y: auto; overflow-x: hidden; padding: 4px 10px 4px 4px; scrollbar-width: thin; scrollbar-color: #b9a9ff #f3f0ff; } .extract-pages-grid::-webkit-scrollbar { width: 8px; } .extract-pages-grid::-webkit-scrollbar-track { background: var(--k-bg-f3f0ff); border-radius: 10px; } .extract-pages-grid::-webkit-scrollbar-thumb { background: var(--k-bg-b9a9ff); border-radius: 10px; } .extract-page { appearance: none; width: 100%; padding: 8px; border: 1px solid var(--k-border-e5def8); border-radius: 12px; background: var(--k-bg-ffffff); cursor: pointer; overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .extract-page:hover { border-color: var(--k-border-b8a8ff); box-shadow: 0 8px 20px rgba(78, 54, 180, .10); transform: translateY(-2px); } .extract-page.is-selected { border: 2px solid var(--primary); box-shadow: 0 0 0 3px rgba(108, 76, 255, .15); background: var(--k-bg-f8f6ff); } .extract-page img { display: block; width: 100%; height: 170px; object-fit: contain; border-radius: 7px; background: var(--k-bg-f8f7fc); } .extract-page-number { display: block; margin-top: 8px; color: var(--text); font-size: .76rem; font-weight: 700; text-align: center; } @media (max-width: 640px) { .extract-pages-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .extract-page img { height: 145px; } } /* ========================================================= EXTRAER PÁGINAS PDF - BOTÓN DESHABILITADO ========================================================= */ #extractPdfButton:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; pointer-events: none; } /* ========================================================= EXTRAER PÁGINAS PDF - ACCIONES DE SELECCIÓN ========================================================= */ .extract-toolbar-actions { display: flex; align-items: center; justify-content: center; gap: 8px; } #extractSelectAll, #extractClearSelection { appearance: none; padding: 7px 12px; border-radius: 8px; font-family: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; } #extractSelectAll { border: 1px solid var(--primary); background: var(--primary); color: var(--k-text-ffffff); } #extractSelectAll:hover { transform: translateY(-1px); box-shadow: 0 5px 12px rgba(108, 76, 255, .20); } #extractClearSelection { border: 1px solid var(--k-border-c9bfff); background: var(--k-bg-ffffff); color: var(--primary); } #extractClearSelection:hover { background: var(--k-bg-f5f2ff); border-color: var(--primary); transform: translateY(-1px); } /* ========================================================= SOLOHAZLO - NAVEGACIÓN RESPONSIVE GLOBAL Botón hamburguesa ========================================================= */ /* Oculto en escritorio */ .mobile-menu-toggle { display: none; appearance: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--k-border-e8e2f7); border-radius: 13px; background: var(--k-bg-ffffff); cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; box-shadow: 0 5px 18px rgba(63, 38, 96, .07); transition: border-color .2s ease, background .2s ease, transform .2s ease; } .mobile-menu-toggle span { display: block; width: 19px; height: 2px; border-radius: 10px; background: var(--primary); transition: transform .25s ease, opacity .2s ease; } .mobile-menu-toggle:hover { border-color: var(--k-border-cfc2ff); background: var(--k-bg-faf9ff); } @media (max-width: 780px), (max-height: 500px) and (pointer: coarse) { .main-nav { display: none; } .header-cta { display: none; } .mobile-menu-toggle { display: flex; } } /* ========================================================= SOLOHAZLO - MENÚ MÓVIL DESPLEGABLE ========================================================= */ .mobile-navigation { display: none; } /* Tablet y móvil */ @media (max-width: 780px), (max-height: 500px) and (pointer: coarse) { .mobile-navigation { position: absolute; top: 100%; left: 0; right: 0; z-index: 1000; width: 100%; background: var(--k-bg-255_255_255_98); border-top: 1px solid var(--k-border-eee9f8); border-bottom: 1px solid var(--k-border-eee9f8); box-shadow: 0 18px 35px rgba(63, 38, 96, .10); } .mobile-navigation:not([hidden]) { display: block; } .mobile-navigation-inner { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; padding-bottom: 16px; } .mobile-navigation-inner > a { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 11px; color: var(--text); font-size: .92rem; font-weight: 700; text-decoration: none; transition: background .2s ease, color .2s ease; } .mobile-navigation-inner > a:hover { background: var(--k-bg-f6f3ff); color: var(--primary); } .mobile-navigation-inner .mobile-navigation-cta { justify-content: center; gap: 10px; margin-top: 6px; background: var(--primary); color: var(--k-text-ffffff); } .mobile-navigation-inner .mobile-navigation-cta:hover { background: var(--primary); color: var(--k-text-ffffff); } } .site-header { position: relative; } /* Hamburguesa abierta → X */ .mobile-menu-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mobile-menu-toggle.is-open span:nth-child(2) { opacity: 0; } .mobile-menu-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ========================================================= SOLOHAZLO - HOME RESPONSIVE Encabezado y filtros del catálogo ========================================================= */ @media (max-width: 700px) { .tools-section { padding-top: 34px; padding-bottom: 44px; } .section-header { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 18px; } .section-header h2 { font-size: clamp(1.85rem, 8vw, 2.35rem); line-height: 1.08; } .section-header p { max-width: 100%; font-size: .9rem; line-height: 1.55; } .tools-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 20px; } .tool-filter { width: 100%; min-height: 42px; padding: 0 12px; } /* "Todas" aprovecha el ancho completo */ .tool-filter[data-category="all"] { grid-column: 1 / -1; } } /* ========================================================= UNIR PDF - MODALIDADES DE CARGA ========================================================= */ .merge-upload-modes { margin-top: 14px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; } .merge-upload-modes span { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 6px 12px; border: 1px solid var(--k-border-108_76_255_16); border-radius: 999px; background: var(--k-bg-108_76_255_07); color: var(--k-text-5d45d8); font-size: .74rem; font-weight: 700; line-height: 1.2; } /* ========================================================= CENSURAR PDF - GUÍA RÁPIDA ========================================================= */ .redact-guide { margin: 20px 0 24px; padding: 18px 20px; background: linear-gradient( 135deg, var(--k-bg-108_76_255_07), var(--k-bg-108_76_255_025) ); border: 1px solid var(--k-border-108_76_255_14); border-radius: 16px; } /* Encabezado */ .redact-guide-title { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .redact-guide-title > span { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 38px; background: var(--k-bg-ffffff); border-radius: 10px; font-size: 18px; box-shadow: 0 4px 12px rgba(55, 39, 120, .08); } .redact-guide-title strong { display: block; margin-bottom: 2px; color: var(--k-text-252033); font-size: .92rem; font-weight: 800; } .redact-guide-title p { margin: 0; color: var(--k-text-756f80); font-size: .78rem; line-height: 1.4; } /* Pasos */ .redact-guide-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .redact-guide-step { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 14px; background: var(--k-bg-255_255_255_82); border: 1px solid var(--k-border-108_76_255_10); border-radius: 12px; } .redact-guide-step > span { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: var(--k-bg-6c4cff); color: var(--k-text-ffffff); font-size: .78rem; font-weight: 800; } .redact-guide-step div { min-width: 0; } .redact-guide-step strong { display: block; margin-bottom: 2px; color: var(--k-text-302943); font-size: .78rem; font-weight: 800; } .redact-guide-step small { display: block; color: var(--k-text-817a8d); font-size: .69rem; line-height: 1.35; } /* ========================================================= CENSURAR PDF - RESPONSIVE MEJORADO ========================================================= */ @media (max-width: 800px) { /* Editor completo */ #redactEditor { width: 100%; min-width: 0; } /* Encabezado del editor */ #redactEditor .organize-editor-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } /* Guía rápida */ .redact-guide { padding: 16px; margin: 16px 0 20px; } .redact-guide-steps { grid-template-columns: 1fr; gap: 8px; } .redact-guide-step { padding: 10px 12px; } /* Área principal */ .redact-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; width: 100%; min-width: 0; } /* Miniaturas horizontales */ .redact-pages { display: flex; flex-direction: row; width: 100%; max-width: 100%; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 4px 2px 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } /* Cada miniatura */ .redact-page { flex: 0 0 92px; width: 92px; padding: 5px; scroll-snap-align: start; } .redact-page img { width: 100%; max-height: 125px; } /* Documento */ .redact-document-area { width: 100%; max-width: 100%; min-width: 0; padding: 10px; overflow: auto; border-radius: 14px; } /* Página */ .redact-canvas-container { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; } .redact-main-page { display: block; width: auto; max-width: 100%; height: auto; } /* Barra de acciones */ #redactEditor .organize-floating-actions { display: flex; flex-direction: column; align-items: stretch; gap: 14px; width: 100%; } #redactEditor .organize-floating-info { width: 100%; } #redactEditor .organize-floating-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; } /* Botones */ #redactEditor .organize-floating-buttons button { width: 100%; min-width: 0; margin: 0; } /* Aplicar censura ocupa toda la fila */ #redactGenerateButton { grid-column: 1 / -1; } } /* ========================================================= CENSURAR PDF - TELÉFONOS PEQUEÑOS ========================================================= */ @media (max-width: 520px) { #redactEditor .organize-editor-header { flex-direction: column; align-items: stretch; } #redactPageCounter { align-self: flex-start; } /* Guía */ .redact-guide-title { align-items: flex-start; } .redact-guide-title p { font-size: .74rem; } /* Miniaturas */ .redact-page { flex-basis: 82px; width: 82px; } .redact-page img { max-height: 110px; } /* Visor */ .redact-document-area { padding: 8px; border-radius: 12px; } /* Los tres botones uno debajo del otro */ #redactEditor .organize-floating-buttons { grid-template-columns: 1fr; } #redactGenerateButton { grid-column: auto; } } /* ========================================================= CENSURAR PDF - BARRA DE ACCIONES EN MÓVIL ========================================================= */ @media (max-width: 600px) { /* * En móvil la barra deja de comportarse como flotante. * Debe aparecer naturalmente después del documento. */ #redactEditor .organize-floating-actions { position: static; left: auto; right: auto; bottom: auto; width: 100%; margin-top: 16px; padding: 16px; border-radius: 16px; box-shadow: 0 8px 24px rgba(45, 31, 76, .10); } /* Información de áreas seleccionadas */ #redactEditor .organize-floating-info { width: 100%; margin: 0; } #redactEditor .organize-floating-info strong { display: block; margin-bottom: 4px; } /* Botones verticales */ #redactEditor .organize-floating-buttons { display: flex; flex-direction: column; gap: 10px; width: 100%; } #redactEditor .organize-floating-buttons button { width: 100%; min-height: 48px; } /* * Acción principal primero visualmente destacada, * pero conserva su posición HTML. */ #redactGenerateButton { width: 100%; min-height: 52px; } } /* ========================================================= SOLOHAZLO - PÁGINAS LEGALES ========================================================= */ .legal-page { padding: 72px 0 90px; background: var(--k-bg-f8f9fc); } .legal-container { max-width: 980px; } .legal-header { margin-bottom: 42px; text-align: center; } .legal-badge { display: inline-flex; align-items: center; padding: 8px 14px; margin-bottom: 18px; border-radius: 999px; background: var(--k-bg-109_74_255_0_10); color: var(--primary); font-size: 0.82rem; font-weight: 750; } .legal-header h1 { margin: 0 0 16px; color: var(--text); font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 850; letter-spacing: -0.045em; line-height: 1.08; } .legal-header > p { max-width: 720px; margin: 0 auto 18px; color: var(--muted); font-size: 1.05rem; line-height: 1.75; } .legal-updated { display: block; color: var(--muted); font-size: 0.88rem; } .legal-content { padding: 48px 54px; border: 1px solid var(--k-border-20_18_40_0_08); border-radius: 24px; background: var(--k-bg-ffffff); box-shadow: 0 18px 50px rgba(27, 20, 67, 0.07); } .legal-section { padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid var(--k-border-20_18_40_0_08); } .legal-section:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; } .legal-section h2 { margin: 0 0 14px; color: var(--text); font-size: 1.28rem; font-weight: 800; letter-spacing: -0.025em; } .legal-section p { margin: 0 0 14px; color: var(--muted); font-size: 0.98rem; line-height: 1.8; } .legal-section p:last-child { margin-bottom: 0; } .legal-highlight { margin: 22px 0; padding: 22px 24px; border: 1px solid var(--k-border-109_74_255_0_15); border-radius: 16px; background: var(--k-bg-109_74_255_0_055); } .legal-highlight strong { display: block; margin-bottom: 7px; color: var(--text); font-size: 1rem; font-weight: 800; } .legal-highlight p { margin: 0; } .legal-contact { display: inline-flex; align-items: center; margin-top: 4px; color: var(--primary); font-weight: 750; text-decoration: none; transition: opacity 0.2s ease, transform 0.2s ease; } .legal-contact:hover { opacity: 0.8; transform: translateY(-1px); } /* ========================================================= PÁGINAS LEGALES - RESPONSIVE ========================================================= */ @media (max-width: 768px) { .legal-page { padding: 48px 0 64px; } .legal-header { margin-bottom: 30px; text-align: left; } .legal-header > p { margin-left: 0; margin-right: 0; } .legal-content { padding: 30px 24px; border-radius: 20px; } .legal-section { padding-bottom: 26px; margin-bottom: 26px; } .legal-section h2 { font-size: 1.15rem; } .legal-section p { font-size: 0.95rem; line-height: 1.75; } .legal-highlight { padding: 18px; } } /* ========================================================= SOLOHAZLO - ACERCA DE ========================================================= */ .about-section { padding: 90px 0; background: var(--k-bg-f8f9fc); } .about-wrapper { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); align-items: center; gap: 70px; } .about-content h2 { max-width: 680px; margin: 14px 0 22px; color: var(--text); font-size: clamp(2rem, 4vw, 3rem); font-weight: 850; letter-spacing: -0.045em; line-height: 1.1; } .about-content h2 span { color: var(--primary); } .about-content > p { max-width: 690px; margin: 0 0 16px; color: var(--muted); font-size: 1rem; line-height: 1.8; } .about-content > p:last-child { margin-bottom: 0; } /* Tarjeta lateral */ .about-features { display: flex; flex-direction: column; gap: 14px; } .about-feature { display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px; border: 1px solid var(--k-border-20_18_40_0_08); border-radius: 18px; background: var(--k-bg-ffffff); box-shadow: 0 12px 35px rgba(27, 20, 67, 0.055); } .about-feature-icon { width: 34px; height: 34px; flex: 0 0 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--k-bg-109_74_255_0_10); color: var(--primary); font-size: 0.95rem; font-weight: 850; } .about-feature strong { display: block; margin: 2px 0 6px; color: var(--text); font-size: 1rem; font-weight: 800; } .about-feature p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.6; } /* ========================================================= ACERCA DE - RESPONSIVE ========================================================= */ @media (max-width: 900px) { .about-section { padding: 70px 0; } .about-wrapper { grid-template-columns: 1fr; gap: 40px; } .about-content h2 { max-width: 760px; } .about-content > p { max-width: 760px; } .about-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .about-feature { flex-direction: column; } } @media (max-width: 640px) { .about-section { padding: 54px 0; } .about-content h2 { margin-top: 12px; font-size: 2rem; } .about-content > p { font-size: 0.95rem; line-height: 1.7; } .about-features { grid-template-columns: 1fr; } .about-feature { flex-direction: row; padding: 19px 20px; } } /* ========================================================= SOLOHAZLO - EXTRAER PDF - RESULTADO FINAL ========================================================= */ .extract-result { padding: 34px 10px 10px; text-align: center; } .extract-result-icon { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: 0 auto 22px; border-radius: 50%; background: var(--k-bg-109_74_255_0_10); color: var(--primary); } .extract-result-icon svg { display: block; width: 34px; height: 34px; } .extract-result .section-label { display: block; margin-bottom: 10px; } .extract-result h2 { margin: 0 0 10px; color: var(--text); font-size: 1.65rem; font-weight: 850; letter-spacing: -0.035em; } .extract-result > p { max-width: 500px; margin: 0 auto 26px; color: var(--muted); font-size: 0.95rem; line-height: 1.65; } /* Botón de descarga */ .extract-download-button { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; margin-bottom: 12px; text-decoration: none; } .extract-download-button svg { width: 19px; height: 19px; flex: 0 0 19px; } /* Extraer nuevamente */ .extract-again-button { width: 100%; padding: 13px 18px; border: 1px solid var(--k-border-109_74_255_0_22); border-radius: 12px; background: var(--k-bg-ffffff); color: var(--primary); font-family: inherit; font-size: 0.92rem; font-weight: 750; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .extract-again-button:hover { background: var(--k-bg-109_74_255_0_055); border-color: var(--k-border-109_74_255_0_38); transform: translateY(-1px); } /* Responsive */ @media (max-width: 640px) { .extract-result { padding: 26px 0 6px; } .extract-result-icon { width: 62px; height: 62px; margin-bottom: 18px; } .extract-result-icon svg { width: 29px; height: 29px; } .extract-result h2 { font-size: 1.4rem; } } /* ========================================================= SOLOHAZLO - UNIR PDF - ARCHIVOS SELECCIONADOS ========================================================= */ .merge-selected-files { display: block; } .merge-files-summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .merge-files-list { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--k-border-109_74_255_0_12); } .merge-file-item { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 7px 10px; border-radius: 8px; background: var(--k-bg-109_74_255_0_035); } .merge-file-name { min-width: 0; color: var(--text); font-size: 0.88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .merge-file-name::before { content: "📄"; margin-right: 8px; } .merge-file-size { flex: 0 0 auto; color: var(--muted); font-size: 0.82rem; } /* Móvil */ @media (max-width: 640px) { .merge-files-summary { gap: 12px; } .merge-file-item { gap: 12px; } .merge-file-name { font-size: 0.84rem; } .merge-file-size { font-size: 0.78rem; } } /* ========================================================= SOLOHAZLO - UNIR PDF - MENSAJE DE VALIDACIÓN ========================================================= */ .merge-validation-message { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; margin: 0; text-align: left; border: 1px solid var(--k-border-255_153_51_0_28); border-radius: 12px; background: var(--k-bg-255_153_51_0_07); } .merge-validation-message[hidden] { display: none; } .merge-validation-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; background: var(--k-bg-255_153_51_0_14); color: var(--k-text-d97706); font-size: 1.05rem; font-weight: 850; } .merge-validation-message strong { display: block; margin: 0 0 3px; color: var(--text); font-size: 0.92rem; font-weight: 800; } .merge-validation-message p { margin: 0; color: var(--muted); font-size: 0.84rem; line-height: 1.5; } /* Móvil */ @media (max-width: 640px) { .merge-validation-message { padding: 14px 15px; gap: 12px; } .merge-validation-icon { width: 34px; height: 34px; flex-basis: 34px; } } /* ========================================================= SOLOHAZLO - ORDENAR PDF - INDICADOR DE INSERCIÓN ========================================================= */ .organize-page { position: relative; } /* Línea antes de la página */ .organize-page.drop-before::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 2px; width: 4px; border-radius: 999px; background: var(--primary); box-shadow: 0 0 0 3px rgba(109, 74, 255, 0.10), 0 4px 14px rgba(109, 74, 255, 0.28); z-index: 20; pointer-events: none; } /* Línea después de la página */ .organize-page.drop-after::after { content: ""; position: absolute; top: 6px; bottom: 6px; right: 2px; width: 4px; border-radius: 999px; background: var(--primary); box-shadow: 0 0 0 3px rgba(109, 74, 255, 0.10), 0 4px 14px rgba(109, 74, 255, 0.28); z-index: 20; pointer-events: none; } /* ========================================================= SOLOHAZLO - ORDENAR PDF - INDICADOR DE POSICIÓN ========================================================= */ .organize-drop-indicator { position: fixed; width: 4px; border-radius: 999px; background: var(--primary); box-shadow: 0 0 0 3px rgba(109, 74, 255, 0.10), 0 4px 14px rgba(109, 74, 255, 0.30); transform: translateX(-2px); z-index: 9999; pointer-events: none; } .organize-drop-indicator[hidden] { display: none !important; } /* ========================================================= CENSURAR PDF - AJUSTE COMPACTO SOLO ESCRITORIO ========================================================= */ @media (min-width: 1024px) { /* Columna de miniaturas más compacta */ .redact-workspace { grid-template-columns: 110px minmax(0, 1fr); gap: 18px; } .redact-pages { width: 110px; gap: 10px; } .redact-page { padding: 5px; border-radius: 10px; } .redact-page img { max-height: 125px; } /* Reducir espacio alrededor del documento */ .redact-document-area { padding: 18px; } /* Limitar el tamaño visual del PDF solo en escritorio */ .redact-canvas-container { width: 720px; max-width: 720px; } .redact-zoom-layer { width: 720px; max-width: 720px; } .redact-main-page { display: block; width: 720px; max-width: 720px; height: auto; } /* Barra de acciones de Censurar PDF: en escritorio deja de flotar sobre el documento */ #redactEditor .organize-floating-actions { position: static; left: auto; right: auto; bottom: auto; width: min(720px, calc(100% - 32px)); margin: 20px auto 18px; z-index: auto; } } /* ========================================================= CENSURAR PDF - EDITOR COMPACTO EN ESCRITORIO ========================================================= */ @media (min-width: 1024px) { /* * El editor toma como referencia la altura visible * del navegador y no la cantidad total de miniaturas. */ #redactEditor .redact-workspace { grid-template-columns: 120px minmax(0, 1fr); gap: 18px; align-items: start; } /* * Las miniaturas tienen su propio scroll. * Así 19, 30 o 100 páginas no alargan todo el editor. */ #redactEditor .redact-pages { width: 120px; max-height: 720px; overflow-y: auto; overflow-x: hidden; padding-right: 6px; scrollbar-width: thin; } /* * Miniaturas más compactas únicamente en escritorio. */ #redactEditor .redact-page { flex: 0 0 auto; padding: 5px; } #redactEditor .redact-page img { max-height: 135px; } /* * Reducimos espacio alrededor del documento. */ #redactEditor .redact-document-area { padding: 16px; } } /* ========================================================= CENSURAR PDF - ENCABEZADO COMPACTO EN ESCRITORIO No afecta tablet ni móvil. ========================================================= */ @media (min-width: 901px) { body:has(#redactEditor) .tool-page { padding-top: 22px; } body:has(#redactEditor) .tool-page-header { margin-bottom: 18px; padding: 0; } body:has(#redactEditor) .tool-page-header .tool-page-badge { margin-bottom: 4px; } body:has(#redactEditor) .tool-page-header h1 { margin: 3px 0 6px; font-size: 2.45rem; line-height: 1.05; } body:has(#redactEditor) .tool-page-header > p { max-width: 600px; margin: 0 auto; line-height: 1.4; } } /* ========================================================= CENSURAR PDF - EDITOR DE 3 COLUMNAS SOLO ESCRITORIO ========================================================= */ @media (min-width: 901px) { body.redact-editor-active #redactEditor { width: 100%; } /* * Estructura principal: * miniaturas | documento | panel */ body.redact-editor-active .redact-workspace { display: grid; grid-template-columns: 112px minmax(0, 1fr) 260px; gap: 16px; width: 100%; align-items: stretch; } /* ========================= MINIATURAS ========================= */ body.redact-editor-active .redact-pages { width: 112px; gap: 10px; } body.redact-editor-active .redact-page { width: 100%; } /* ========================= VISOR ========================= */ body.redact-editor-active .redact-document-area { width: 100%; min-width: 0; padding: 18px; border-radius: 16px; } /* ========================= PANEL DERECHO ========================= */ body.redact-editor-active .redact-side-panel { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: 260px; min-width: 0; height: auto; margin: 0; border: 1px solid var(--k-border-e9e4f2); border-radius: 16px; background: var(--k-bg-ffffff); box-shadow: 0 8px 24px rgba(42, 29, 77, .06); overflow: hidden; display: flex; flex-direction: column; } /* Encabezado */ body.redact-editor-active .redact-side-header { padding: 16px; } /* Contador */ body.redact-editor-active .redact-side-status { padding: 14px 16px; } /* Área informativa */ body.redact-editor-active .redact-side-content { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 220px; padding: 22px 16px; } body.redact-editor-active .redact-side-empty { max-width: 210px; margin: 0 auto; text-align: center; } /* Acciones */ body.redact-editor-active .redact-side-actions { margin-top: auto; padding: 14px 16px 16px; border-top: 1px solid var(--k-border-eeeaf5); } } /* ========================================================= CENSURAR PDF - GUÍA COMPACTA EN ESCRITORIO No afecta tablet ni móvil ========================================================= */ @media (min-width: 901px) { /* Menos separación antes de la guía */ body.redact-editor-active .organize-editor-header { margin-bottom: 14px; } /* Contenedor general de la guía */ body.redact-editor-active .redact-guide { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; padding: 12px 16px; border-radius: 14px; } /* Título de la guía */ body.redact-editor-active .redact-guide-title { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; } /* Bombillo */ body.redact-editor-active .redact-guide-title > span { width: 34px; height: 34px; flex: 0 0 34px; } /* Quitamos el texto secundario para ahorrar altura */ body.redact-editor-active .redact-guide-title p { display: none; } /* Pasos en una sola fila */ body.redact-editor-active .redact-guide-steps { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } /* Cada paso mucho más compacto */ body.redact-editor-active .redact-guide-step { min-height: 48px; padding: 8px 10px; border-radius: 11px; } /* Número */ body.redact-editor-active .redact-guide-step > span { width: 28px; height: 28px; flex: 0 0 28px; font-size: .76rem; } /* Título del paso */ body.redact-editor-active .redact-guide-step strong { margin: 0; font-size: .78rem; line-height: 1.2; } /* Ocultamos explicación secundaria */ body.redact-editor-active .redact-guide-step small { display: none; } } /* ========================================================= CENSURAR PDF - EDITOR LIMPIO EN ESCRITORIO Oculta la guía cuando el editor ya está activo. NO afecta móvil. ========================================================= */ @media (min-width: 901px) { body.redact-editor-active .redact-guide { display: none !important; } body.redact-editor-active .organize-editor-header { margin-bottom: 14px; padding-bottom: 0; } } /* ========================================================= CENSURAR PDF - OCULTAR HERO DURANTE EL EDITOR SOLO ESCRITORIO ========================================================= */ @media (min-width: 901px) { body.redact-editor-active .tool-page-header { display: none !important; } body.redact-editor-active .tool-page { padding-top: 28px; } } /* ========================================================= CENSURAR PDF - GUÍA RÁPIDA EN PANEL LATERAL ========================================================= */ body.redact-editor-active .redact-side-guide { width: 100%; } /* Encabezado de la guía */ body.redact-editor-active .redact-side-guide-title { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; } /* Icono */ body.redact-editor-active .redact-side-guide-icon { width: 36px; height: 36px; flex: 0 0 36px; display: flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--k-bg-f4f0ff); font-size: 16px; } /* Textos del encabezado */ body.redact-editor-active .redact-side-guide-title div { display: flex; flex-direction: column; gap: 1px; } body.redact-editor-active .redact-side-guide-title strong { color: var(--ink-main); font-size: .91rem; font-weight: 800; line-height: 1.3; } body.redact-editor-active .redact-side-guide-title small { color: var(--ink-soft); font-size: .70rem; font-weight: 600; } /* Contenedor de los tres pasos */ body.redact-editor-active .redact-side-guide-steps { display: flex; flex-direction: column; } /* Cada paso */ body.redact-editor-active .redact-side-guide-step { position: relative; display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; } /* Línea que conecta los pasos */ body.redact-editor-active .redact-side-guide-step:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 39px; bottom: -3px; width: 1px; background: var(--k-bg-e5defb); } /* Número */ body.redact-editor-active .redact-side-guide-step > span { position: relative; z-index: 2; width: 29px; height: 29px; flex: 0 0 29px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--k-bg-f1edff); color: var(--violet-main); font-size: .72rem; font-weight: 800; } /* Contenido de cada paso */ body.redact-editor-active .redact-side-guide-step > div { min-width: 0; display: flex; flex-direction: column; padding-top: 2px; } /* Título del paso */ body.redact-editor-active .redact-side-guide-step strong { color: var(--ink-main); font-size: .78rem; font-weight: 800; line-height: 1.35; } /* Descripción del paso */ body.redact-editor-active .redact-side-guide-step small { margin-top: 3px; color: var(--ink-soft); font-size: .67rem; font-weight: 500; line-height: 1.45; } /* ========================================================= CENSURAR PDF - DESKTOP COMPACTO Aprovecha mejor pantallas al 80% / 100% ========================================================= */ @media (min-width: 1100px) { /* Editor utiliza prácticamente todo el ancho disponible */ body:has(#redactEditor) .container { width: 100%; max-width: none; padding-left: 18px; padding-right: 18px; } /* Encabezado del editor más compacto */ body:has(#redactEditor) .organize-editor-header { padding-top: 18px; padding-bottom: 14px; } body:has(#redactEditor) .organize-editor-header h2 { margin-bottom: 5px; font-size: 1.55rem; } body:has(#redactEditor) .organize-editor-header p { margin: 0; font-size: .92rem; } /* ===================================================== ESTRUCTURA PRINCIPAL Miniaturas | Documento | Panel ===================================================== */ body:has(#redactEditor) .redact-workspace { grid-template-columns: 112px minmax(0, 1fr) 285px; gap: 14px; align-items: start; } /* ===================================================== MINIATURAS ===================================================== */ body:has(#redactEditor) .redact-pages { width: 112px; gap: 9px; } body:has(#redactEditor) .redact-page { padding: 6px; border-radius: 10px; } body:has(#redactEditor) .redact-page img { max-height: 135px; } /* ===================================================== VISOR ===================================================== */ body:has(#redactEditor) .redact-document-area { min-width: 0; padding: 18px 16px; border-radius: 14px; } /* ===================================================== PANEL DERECHO ===================================================== */ body:has(#redactEditor) .redact-side-panel { width: 285px; min-width: 285px; max-width: 285px; } /* Cabecera */ body:has(#redactEditor) .redact-side-header { padding: 18px 18px; } /* Contador */ body:has(#redactEditor) .redact-side-status { padding: 16px 18px; } /* Ayuda */ body:has(#redactEditor) .redact-side-guide { padding: 16px 18px; } /* Acciones */ body:has(#redactEditor) .redact-side-actions { padding: 16px 18px 18px; } } /* ========================================================= CENSURAR PDF - TEMA VISUAL PREMIUM SOLO APARIENCIA - NO MODIFICA ESTRUCTURA ========================================================= */ body.redact-editor-active { background: radial-gradient( circle at 50% 0%, var(--k-bg-109_74_255_0_055), transparent 34% ), var(--k-bg-fbfaff); } /* EDITOR GENERAL */ body.redact-editor-active #redactEditor { background: var(--k-bg-ffffff); border: 1px solid var(--k-border-ebe7f3); border-radius: 18px; box-shadow: 0 12px 38px rgba(55, 38, 91, 0.055); overflow: hidden; } /* ENCABEZADO */ body.redact-editor-active .organize-editor-header { background: linear-gradient( 180deg, var(--k-bg-ffffff) 0%, var(--k-bg-fdfcff) 100% ); border-bottom: 1px solid var(--k-border-eeeaf5); } body.redact-editor-active .organize-editor-header h2 { color: var(--k-text-211b2d); font-weight: 800; letter-spacing: -.025em; } body.redact-editor-active .organize-editor-header p { color: var(--k-text-80778f); } /* MINIATURAS */ body.redact-editor-active .redact-page { background: var(--k-bg-ffffff); border: 1px solid var(--k-border-e8e3ef); box-shadow: 0 3px 10px rgba(42, 29, 77, .035); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } body.redact-editor-active .redact-page:hover { border-color: var(--k-border-cfc2f6); box-shadow: 0 5px 16px rgba(90, 63, 170, .10); transform: translateY(-1px); } body.redact-editor-active .redact-page.active, body.redact-editor-active .redact-page.is-active { border-color: var(--k-border-744cff); box-shadow: 0 0 0 2px rgba(116, 76, 255, .10), 0 6px 16px rgba(83, 55, 164, .10); } /* VISOR */ body.redact-editor-active .redact-document-area { background: radial-gradient( circle at 50% 30%, var(--k-bg-fbfaff) 0%, var(--k-bg-f6f4f9) 70% ); border: 1px solid var(--k-border-e8e3ef); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); } /* HOJA DEL PDF */ body.redact-editor-active .redact-canvas-container { background: #ffffff; box-shadow: 0 10px 30px rgba(37, 27, 55, .10), 0 2px 7px rgba(37, 27, 55, .06); } /* PANEL DERECHO */ body.redact-editor-active .redact-side-panel { background: linear-gradient( 180deg, var(--k-bg-ffffff) 0%, var(--k-bg-fefeff) 100% ); border-color: var(--k-border-e6e0ef); box-shadow: 0 8px 24px rgba(50, 35, 85, .07); } /* CABECERA DEL PANEL */ body.redact-editor-active .redact-side-header { background: linear-gradient( 135deg, var(--k-bg-109_74_255_055), var(--k-bg-255_255_255_0) 75% ); border-bottom: 1px solid var(--k-border-eee9f5); } body.redact-editor-active .redact-side-title-icon { background: var(--k-bg-f1edff); color: var(--k-text-6840ee); box-shadow: inset 0 0 0 1px rgba(109, 74, 255, .08); } body.redact-editor-active .redact-side-title strong { color: var(--k-text-241d31); } body.redact-editor-active .redact-side-title small { color: var(--k-text-82798f); } /* ESTADO */ body.redact-editor-active .redact-side-status { background: var(--k-bg-fcfbfe); border-bottom: 1px solid var(--k-border-eeeaf4); } body.redact-editor-active .redact-side-status > span { color: var(--k-text-8a8197); } body.redact-editor-active .redact-side-status strong { color: var(--k-text-332945); } /* GUÍA */ body.redact-editor-active .redact-side-guide-icon { background: linear-gradient( 135deg, var(--k-bg-f2eeff), var(--k-bg-faf8ff) ); border: 1px solid var(--k-border-e8e0ff); } body.redact-editor-active .redact-side-guide-step > span { background: var(--k-bg-f1edff); color: var(--k-text-6840ee); box-shadow: inset 0 0 0 1px rgba(109, 74, 255, .08); } body.redact-editor-active .redact-side-guide-step:not(:last-child)::after { background: var(--k-bg-ded5f8); } /* BOTONES */ body.redact-editor-active .redact-side-actions { background: var(--k-bg-ffffff); border-top: 1px solid var(--k-border-eee9f5); } body.redact-editor-active .redact-side-apply { border: 0; background: linear-gradient( 135deg, var(--k-bg-7650ff) 0%, var(--k-bg-5d35e8) 100% ); box-shadow: 0 6px 16px rgba(99, 61, 226, .22); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } body.redact-editor-active .redact-side-apply:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(99, 61, 226, .28); filter: brightness(1.03); } body.redact-editor-active .redact-side-delete { border-color: var(--k-border-e5dfed); background: var(--k-bg-faf9fc); } body.redact-editor-active .redact-side-change { color: var(--k-text-6f4bd8); transition: background .18s ease, color .18s ease; } body.redact-editor-active .redact-side-change:hover { background: var(--k-bg-f5f1ff); color: var(--k-text-5d35d8); } /* ========================================================= CENSURAR PDF - TOOLBAR DEL VISOR SOLO APARIENCIA ========================================================= */ body.redact-editor-active .redact-document-area { position: relative; } /* Barra flotante */ body.redact-editor-active .redact-viewer-toolbar { position: sticky; top: 12px; z-index: 30; width: max-content; max-width: calc(100% - 24px); margin: 0 auto 14px; display: flex; align-items: center; min-height: 46px; background: var(--k-bg-255_255_255_96); border: 1px solid var(--k-border-e2ddeb); border-radius: 12px; box-shadow: 0 8px 24px rgba(42, 29, 77, .10), 0 2px 6px rgba(42, 29, 77, .05); overflow: hidden; backdrop-filter: blur(10px); } /* Grupos */ body.redact-editor-active .redact-toolbar-group { display: flex; align-items: center; min-height: 46px; } /* Botones ↑ ↓ − + */ body.redact-editor-active .redact-toolbar-button { width: 42px; height: 46px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: var(--k-text-746c80); font: inherit; font-size: 1.15rem; font-weight: 700; cursor: pointer; transition: background .15s ease, color .15s ease; } body.redact-editor-active .redact-toolbar-button:hover { background: var(--k-bg-f5f2fc); color: var(--k-text-653ee8); } /* Página actual */ body.redact-editor-active .redact-toolbar-page { min-width: 72px; display: flex; align-items: center; justify-content: center; gap: 5px; color: var(--k-text-91899c); font-size: .86rem; font-weight: 600; } body.redact-editor-active .redact-toolbar-page strong { color: var(--k-text-352c42); font-weight: 800; } /* Separadores */ body.redact-editor-active .redact-toolbar-divider { width: 1px; height: 28px; flex: 0 0 1px; background: var(--k-bg-e6e1ec); } /* Porcentaje */ body.redact-editor-active .redact-toolbar-percentage { min-width: 56px; text-align: center; color: var(--k-text-61586d); font-size: .84rem; font-weight: 700; } /* Botón Ajustar */ body.redact-editor-active .redact-toolbar-fit { min-height: 46px; display: flex; align-items: center; gap: 7px; padding: 0 15px; border: 0; background: transparent; color: var(--k-text-62596e); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; transition: background .15s ease, color .15s ease; } body.redact-editor-active .redact-toolbar-fit:hover { background: var(--k-bg-f5f2fc); color: var(--k-text-653ee8); } body.redact-editor-active .redact-toolbar-fit-icon { color: var(--k-text-756b82); font-size: 1rem; } /* Estado presionado */ body.redact-editor-active .redact-toolbar-button:active, body.redact-editor-active .redact-toolbar-fit:active { background: var(--k-bg-eee9fa); } /* Responsive básico de la barra */ @media (max-width: 600px) { body.redact-editor-active .redact-viewer-toolbar { max-width: 100%; } body.redact-editor-active .redact-toolbar-button { width: 36px; } body.redact-editor-active .redact-toolbar-page { min-width: 58px; } body.redact-editor-active .redact-toolbar-percentage { min-width: 48px; } body.redact-editor-active .redact-toolbar-fit { padding: 0 10px; } } /* ========================================================= CENSURAR PDF - VISOR CON ZOOM Y DESPLAZAMIENTO Mantiene fijo el área de trabajo cuando el PDF aumenta ========================================================= */ @media (min-width: 901px) { body.redact-editor-active .redact-document-area { position: relative; /* * El visor conserva su tamaño. * El PDF ampliado se desplaza dentro de esta zona. */ height: 650px; min-height: 650px; max-height: 650px; overflow: auto; /* * Dejamos espacio para la toolbar flotante. */ padding: 76px 24px 24px; /* * Evita que un PDF ampliado ensanche * la columna central del grid. */ min-width: 0; } /* * La hoja puede superar el ancho del visor. */ body.redact-editor-active .redact-canvas-container { max-width: none; margin-left: auto; margin-right: auto; } } /* ========================================================= CENSURAR PDF - CONTENEDOR ESTABLE PARA ZOOM Y PAN JavaScript controla posición, zoom y desplazamiento. ========================================================= */ @media (min-width: 901px) { body.redact-editor-active .redact-canvas-scroll { position: relative; width: 100%; min-width: 0; /* * Importante: * no utilizar Flexbox para centrar el PDF. * La posición será controlada por JavaScript. */ display: block; overflow: visible; } body.redact-editor-active .redact-canvas-scroll .redact-canvas-container { position: relative; /* * Conservamos el ancho natural de la hoja. */ width: fit-content; max-width: none; /* * El centrado inicial sigue realizándose * mediante márgenes automáticos. * * A diferencia de justify-content, * estos márgenes no modifican el sistema * de coordenadas utilizado por el PAN. */ margin-left: auto; margin-right: auto; } } /* ========================================================= CENSURAR PDF - ACCIONES DEL PANEL DERECHO ========================================================= */ body.redact-editor-active .redact-side-actions { display: flex; flex-direction: column; gap: 10px; } /* --------------------------------------------------------- ELIMINAR SELECCIÓN --------------------------------------------------------- */ body.redact-editor-active .redact-side-delete { width: 100%; min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 14px; border: 1px solid var(--k-border-e7e1ee); border-radius: 10px; background: var(--k-bg-ffffff); font-size: 13px; font-weight: 600; color: var(--k-text-756d80); cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease; } body.redact-editor-active .redact-side-delete:not(:disabled):hover { background: var(--k-bg-fff5f5); border-color: var(--k-border-f1c7c7); color: var(--k-text-c83d3d); } body.redact-editor-active .redact-side-delete:disabled { opacity: .42; cursor: not-allowed; } /* --------------------------------------------------------- APLICAR CENSURA --------------------------------------------------------- */ body.redact-editor-active .redact-side-apply { width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 16px; border: 0; border-radius: 11px; background: linear-gradient( 135deg, var(--k-bg-7047ff) 0%, var(--k-bg-5733e8) 100% ); color: var(--k-text-ffffff); font-size: 14px; font-weight: 700; box-shadow: 0 7px 18px rgba(91, 55, 230, .20); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; } body.redact-editor-active .redact-side-apply:hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(91, 55, 230, .27); } body.redact-editor-active .redact-side-apply span { font-size: 17px; line-height: 1; } /* --------------------------------------------------------- CARGAR OTRO PDF --------------------------------------------------------- */ body.redact-editor-active .redact-side-change { width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: center; padding: 9px 14px; border: 0; border-radius: 9px; background: transparent; color: var(--k-text-6945e8); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .18s ease, color .18s ease; } body.redact-editor-active .redact-side-change:hover { background: var(--k-bg-f5f1ff); color: var(--k-text-5530dc); } /* ========================================================= CENSURAR PDF - VISOR OPTIMIZADO PARA MÓVIL No modifica escritorio ========================================================= */ @media (max-width: 900px) { /* Visor */ body.redact-editor-active .redact-document-area { width: 100%; max-width: 100%; min-width: 0; height: auto; min-height: 0; max-height: none; padding: 12px; overflow: hidden; } /* Toolbar completa dentro de la pantalla */ body.redact-editor-active .redact-viewer-toolbar { position: relative; top: auto; width: fit-content; max-width: 100%; min-height: 42px; margin: 0 auto 12px; overflow: hidden; } body.redact-editor-active .redact-toolbar-group { min-height: 42px; } body.redact-editor-active .redact-toolbar-button { width: 32px; height: 42px; flex: 0 0 32px; font-size: .95rem; } body.redact-editor-active .redact-toolbar-page { min-width: 54px; font-size: .76rem; } body.redact-editor-active .redact-toolbar-percentage { min-width: 45px; font-size: .76rem; } body.redact-editor-active .redact-toolbar-divider { height: 24px; } body.redact-editor-active .redact-toolbar-fit { min-height: 42px; padding: 0 9px; font-size: .76rem; } /* Zona independiente para el PDF */ body.redact-editor-active .redact-canvas-scroll { width: 100%; min-width: 0; display: flex; justify-content: safe center; overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; } /* Hoja */ body.redact-editor-active .redact-canvas-scroll .redact-canvas-container { flex: 0 0 auto; max-width: none; margin-left: 0; margin-right: 0; } } /* ========================================================= CENSURAR PDF - OCULTAR ENCABEZADO DURANTE EDICIÓN Aprovechar más altura para el visor del documento ========================================================= */ body.redact-editor-active #redactEditor .organize-editor-header { display: none !important; } /* ========================================================= CENSURAR PDF - APROVECHAR ALTURA DE PANTALLA SOLO ESCRITORIO ========================================================= */ @media (min-width: 901px) { body.redact-editor-active #redactEditor { min-height: calc(100vh - 108px); } body.redact-editor-active #redactEditor .redact-workspace { min-height: calc(100vh - 126px); } /* Miniaturas */ body.redact-editor-active #redactEditor .redact-pages { height: calc(100vh - 126px); max-height: calc(100vh - 126px); overflow-y: auto; overflow-x: hidden; } /* Visor central */ body.redact-editor-active #redactEditor .redact-document-area { height: calc(100vh - 126px); min-height: calc(100vh - 126px); overflow: hidden; } /* Panel derecho */ body.redact-editor-active #redactEditor .redact-side-panel { height: calc(100vh - 126px); max-height: calc(100vh - 126px); overflow-y: auto; } } /* ========================================================= CENSURAR PDF - BOTÓN MOVER ========================================================= */ body.redact-editor-active .redact-toolbar-pan { gap: 6px; transition: background .18s ease, color .18s ease, box-shadow .18s ease; } /* Hover */ body.redact-editor-active .redact-toolbar-pan:hover { background: var(--k-bg-f5f1ff); color: var(--k-text-6039e8); } /* Modo mover activado */ body.redact-editor-active .redact-toolbar-pan.active { background: var(--k-bg-6840ef); color: var(--k-text-ffffff); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); } /* Mano */ body.redact-editor-active .redact-toolbar-pan span:first-child { font-size: 15px; line-height: 1; } /* ========================================================= CENSURAR PDF - CURSOR PARA MOVER DOCUMENTO ========================================================= */ body.redact-editor-active #redactCanvasContainer.redact-pan-active { cursor: grab; } body.redact-editor-active #redactCanvasContainer.redact-pan-active * { cursor: grab !important; } body.redact-editor-active #redactCanvasContainer.redact-panning, body.redact-editor-active #redactCanvasContainer.redact-panning * { cursor: grabbing !important; } /* ========================================================= CENSURAR PDF PULIDO VISUAL DEL VISOR ========================================================= */ /* * Área de trabajo del documento. * Solo modifica apariencia. */ body.redact-editor-active .redact-document-area { background: linear-gradient( 135deg, var(--k-bg-f8f7fb) 0%, var(--k-bg-f3f1f8) 100% ); border: 1px solid var(--k-border-e7e2ee); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85); } /* * Contenedor físico de la página. */ body.redact-editor-active .redact-canvas-container { background: #ffffff; border-radius: 3px; box-shadow: 0 1px 2px rgba(30, 20, 45, 0.06), 0 8px 24px rgba(30, 20, 45, 0.10), 0 20px 50px rgba(30, 20, 45, 0.06); } /* * Página PDF. */ body.redact-editor-active .redact-main-page { border-radius: 2px; box-shadow: 0 0 0 1px rgba(35, 25, 50, 0.05); } /* ========================================================= SOLOHAZLO - EDITOR PDF v4 --------------------------------------------------------- Todas las clases empiezan con "pe-", así que los estilos anteriores del editor (pdf-editor-*) ya no le afectan. ========================================================= */ :root { --pe-accent: var(--k-bg-6847f5); --pe-accent-dark: var(--k-bg-4d2ed0); --pe-accent-soft: var(--k-bg-f0ecff); --pe-ink: var(--k-text-1d1730); --pe-ink-soft: var(--k-text-4a4458); --pe-muted: var(--k-text-6f687d); --pe-line: var(--k-bg-e8e5f0); --pe-canvas: var(--k-bg-eceef4); --pe-danger: var(--k-bg-d92d20); } .pe-shell, .pe-popover, .pe-toast { font-family: inherit; color: var(--pe-ink); } .pe-shell *, .pe-shell *::before, .pe-shell *::after, .pe-popover * { box-sizing: border-box; } .pe-shell [hidden], .pe-popover [hidden] { display: none !important; } .pe-shell button, .pe-shell input, .pe-shell select { font: inherit; } .pe-shell svg { display: block; flex-shrink: 0; } /* --------------------------------------------------------- BOTONES GENERALES --------------------------------------------------------- */ .pe-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 16px; border: 1px solid transparent; border-radius: 10px; font-size: .85rem; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; transition: background .15s ease, box-shadow .15s ease, filter .15s ease, border-color .15s ease; } .pe-btn-primary { color: var(--k-text-ffffff); background: linear-gradient(135deg, var(--pe-accent), var(--pe-accent-dark)); box-shadow: 0 6px 16px rgba(104, 71, 245, .24); } .pe-btn-primary:hover:not(:disabled) { filter: brightness(1.07); box-shadow: 0 8px 20px rgba(104, 71, 245, .32); } .pe-btn-ghost { color: var(--pe-ink); background: var(--k-bg-ffffff); border-color: var(--pe-line); } .pe-btn-ghost:hover:not(:disabled) { background: var(--k-bg-f7f5fd); border-color: var(--k-border-d8cfff); } .pe-btn-lg { min-height: 48px; padding: 0 26px; border-radius: 12px; font-size: .95rem; } .pe-btn-block { width: 100%; } .pe-btn:disabled { opacity: .65; cursor: default; } /* --------------------------------------------------------- PANTALLA DE CARGA --------------------------------------------------------- */ .pe-shell.is-empty { width: min(calc(100% - 40px), 860px); margin: 6px auto 0; } .pe-shell:not(.is-empty) .pe-upload { display: none; } .pe-upload-card { padding: 56px 28px; border: 2px dashed var(--k-border-d6ccff); border-radius: 24px; background: var(--k-bg-ffffff); text-align: center; box-shadow: 0 18px 45px rgba(63, 44, 105, .08); transition: border-color .15s ease, background .15s ease; } .pe-upload-card.is-dragover { border-color: var(--pe-accent); background: var(--k-bg-f7f4ff); } .pe-upload-icon { width: 68px; height: 68px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 20px; color: var(--k-text-ffffff); background: linear-gradient(135deg, var(--pe-accent), var(--k-bg-967cff)); box-shadow: 0 12px 28px rgba(104, 71, 245, .25); } .pe-upload-card h2 { margin: 0 0 6px; font-size: 1.4rem; letter-spacing: -.02em; } .pe-upload-card p { margin: 0 0 22px; color: var(--pe-muted); } .pe-upload-card small { display: block; margin-top: 14px; color: var(--k-text-9a93a8); font-size: .78rem; } .pe-upload-busy { display: none; flex-direction: column; align-items: center; gap: 10px; padding: 30px 0; } .pe-upload-card.is-busy .pe-upload-idle { display: none; } .pe-upload-card.is-busy .pe-upload-busy { display: flex; } .pe-upload-error { max-width: 480px; margin: 18px auto 0 !important; padding: 10px 14px; border-radius: 10px; background: var(--k-bg-fff1f0); color: var(--k-text-b42318) !important; font-size: .85rem; font-weight: 600; } /* --------------------------------------------------------- MODO EDITOR ACTIVO (PANTALLA COMPLETA) --------------------------------------------------------- */ body.pe-active .tool-page { padding: 0; background: var(--pe-canvas); } body.pe-active .tool-page-header { display: none; } .pe-app { display: flex; flex-direction: column; height: calc(100vh - var(--pe-header-h, 84px)); height: calc(100dvh - var(--pe-header-h, 84px)); min-height: 520px; background: var(--pe-canvas); border-bottom: 1px solid var(--pe-line); } /* --------------------------------------------------------- BARRA SUPERIOR --------------------------------------------------------- */ .pe-topbar { flex: 0 0 auto; display: flex; align-items: center; gap: 16px; min-height: 58px; padding: 8px 14px; background: var(--k-bg-ffffff); border-bottom: 1px solid var(--pe-line); } .pe-tools { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 12px; background: var(--k-bg-f5f3fa); } .pe-tool { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 13px; border: 0; border-radius: 9px; background: transparent; color: var(--pe-ink-soft); font-size: .84rem; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background .15s ease, color .15s ease, box-shadow .15s ease; } .pe-tool:hover { color: var(--pe-accent); } .pe-tool.is-active { background: var(--k-bg-ffffff); color: var(--pe-accent); box-shadow: 0 1px 4px rgba(40, 25, 90, .12); } .pe-doc-name { flex: 1; min-width: 0; overflow: hidden; color: var(--pe-muted); font-size: .84rem; font-weight: 600; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .pe-top-actions { display: flex; align-items: center; gap: 8px; } /* --------------------------------------------------------- BARRA DE FORMATO --------------------------------------------------------- */ .pe-formatbar { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; min-height: 50px; padding: 7px 14px; overflow-x: auto; background: var(--k-bg-ffffff); border-bottom: 1px solid var(--pe-line); scrollbar-width: thin; } .pe-formatbar > * { flex-shrink: 0; } .pe-select { height: 34px; padding: 0 28px 0 10px; border: 1px solid var(--pe-line); border-radius: 8px; background: var(--k-bg-ffffff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236f687d' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center; color: var(--pe-ink); font-size: .82rem; font-weight: 600; appearance: none; -webkit-appearance: none; cursor: pointer; } .pe-select-font { width: 136px; } .pe-size { display: flex; align-items: center; height: 34px; border: 1px solid var(--pe-line); border-radius: 8px; background: var(--k-bg-ffffff); overflow: hidden; } .pe-size input { width: 46px; height: 100%; border: 0; border-left: 1px solid var(--pe-line); border-right: 1px solid var(--pe-line); background: transparent; color: var(--pe-ink); font-size: .84rem; font-weight: 700; text-align: center; -moz-appearance: textfield; } .pe-size input::-webkit-outer-spin-button, .pe-size input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; } .pe-fbtn { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--pe-ink-soft); font-size: .95rem; line-height: 1; cursor: pointer; transition: background .12s ease, color .12s ease; } .pe-fbtn-sm { width: 28px; height: 100%; border-radius: 0; font-size: 1rem; font-weight: 700; } .pe-fbtn:hover:not(:disabled) { background: var(--k-bg-f3f0fb); color: var(--pe-accent); } .pe-fbtn.is-active { background: var(--pe-accent-soft); color: var(--pe-accent); } .pe-fbtn-danger:hover:not(:disabled) { background: var(--k-bg-fff1f0); color: var(--pe-danger); } .pe-color-letter { font-weight: 800; font-size: .95rem; line-height: 1; } .pe-color-bar { display: block; width: 18px; height: 4px; border-radius: 2px; background: var(--k-bg-000000); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); } .pe-color-bar.is-none { background: linear-gradient( to right, transparent 45%, var(--k-bg-e5484d) 45%, var(--k-bg-e5484d) 55%, transparent 55% ), var(--k-bg-ffffff); } .pe-segment { display: flex; gap: 2px; } .pe-sep { flex: 0 0 1px; width: 1px; height: 22px; margin: 0 6px; background: var(--pe-line); } .pe-opacity { display: flex; align-items: center; gap: 6px; color: var(--pe-ink-soft); } .pe-opacity .pe-select { width: 78px; } .pe-format-hint { flex: 1 1 auto; min-width: 0; padding: 0 10px; overflow: hidden; color: var(--pe-muted); font-size: .78rem; font-weight: 600; text-align: right; text-overflow: ellipsis; white-space: nowrap; } .pe-formatbar :disabled { opacity: .38; cursor: default; } .pe-formatbar :disabled:hover { background: transparent; color: var(--pe-ink-soft); } /* --------------------------------------------------------- ÁREA DE TRABAJO --------------------------------------------------------- */ .pe-workspace { flex: 1 1 auto; display: grid; grid-template-columns: 150px minmax(0, 1fr) 300px; min-height: 0; } .pe-pages, .pe-side { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--k-bg-ffffff); } .pe-pages { border-right: 1px solid var(--pe-line); } .pe-side { border-left: 1px solid var(--pe-line); } .pe-panel-title { padding: 14px 14px 8px; color: var(--pe-muted); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .pe-side .pe-panel-title { padding: 18px 18px 12px; color: var(--pe-ink); font-size: 1.1rem; letter-spacing: -.02em; text-transform: none; } /* Miniaturas */ .pe-pages-list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; padding: 4px 16px 20px; overflow-y: auto; scrollbar-width: thin; } .pe-thumb { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; } .pe-thumb-img { display: block; width: 100%; overflow: hidden; border: 2px solid transparent; border-radius: 8px; background: #ffffff; box-shadow: 0 1px 4px rgba(30, 20, 60, .16); transition: border-color .15s ease, box-shadow .15s ease; } .pe-thumb img { display: block; width: 100%; height: auto; } .pe-thumb:hover .pe-thumb-img { border-color: var(--k-border-cbbcff); } .pe-thumb.is-active .pe-thumb-img { border-color: var(--pe-accent); box-shadow: 0 0 0 3px rgba(104, 71, 245, .16); } .pe-thumb-label { color: var(--pe-muted); font-size: .76rem; font-weight: 700; } .pe-thumb.is-active .pe-thumb-label { color: var(--pe-accent); } .pe-thumb-badge { position: absolute; top: 6px; right: 6px; min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; border-radius: 10px; background: var(--pe-accent); color: var(--k-text-ffffff); font-size: 11px; font-weight: 800; box-shadow: 0 2px 6px rgba(104, 71, 245, .35); } /* Lienzo */ .pe-center { position: relative; display: flex; min-width: 0; min-height: 0; } .pe-canvas-area { flex: 1; min-width: 0; min-height: 0; padding: 28px 28px 96px; overflow: auto; background: var(--pe-canvas); } .pe-canvas { display: flex; width: max-content; min-width: 100%; min-height: 100%; } .pe-page-stage { margin: 0 auto; } .pe-surface { position: relative; background: var(--k-bg-ffffff); box-shadow: 0 0 0 1px rgba(30, 20, 60, .05), 0 6px 24px rgba(30, 20, 60, .12); } .pe-page-image { display: block; width: 100%; height: 100%; max-width: none; user-select: none; pointer-events: none; } .pe-overlay { position: absolute; inset: 0; } .pe-page-loading { display: flex; align-items: center; gap: 12px; padding: 80px 40px; color: var(--pe-muted); font-weight: 600; } .pe-shell.is-text-tool .pe-surface { cursor: crosshair; } .pe-shell.is-text-tool .pe-existing, .pe-shell.is-text-tool .pe-text { pointer-events: none; } /* Texto existente del PDF */ .pe-existing { position: absolute; z-index: 1; border-radius: 2px; outline: 1px solid transparent; outline-offset: 1px; cursor: text; transition: outline-color .12s ease, background-color .12s ease; } .pe-existing:hover { outline-color: var(--k-text-104_71_245_55); background: var(--k-bg-104_71_245_06); } .pe-shell.is-showing-text .pe-existing { outline: 1px dashed var(--k-text-104_71_245_6); background: var(--k-bg-104_71_245_06); } .pe-existing.is-selected, .pe-shell.is-showing-text .pe-existing.is-selected { outline: 1.5px solid var(--pe-accent); background: transparent; } .pe-existing-cover { position: absolute; inset: -1px; pointer-events: none; } .pe-existing-editable { position: absolute; left: 0; top: 0; z-index: 1; min-width: 4px; margin: 0; padding: 0; line-height: 1; white-space: pre; outline: none; pointer-events: none; caret-color: var(--pe-accent); } .pe-existing.is-editing .pe-existing-editable { pointer-events: auto; cursor: text; } .pe-existing.is-deleted:hover .pe-existing-cover, .pe-existing.is-deleted.is-selected .pe-existing-cover { background-image: repeating-linear-gradient( -45deg, var(--k-bg-217_45_32_16) 0 4px, transparent 4px 8px ) !important; } .pe-existing.is-deleted.is-selected { outline-color: var(--pe-danger); } .pe-baseline-marker { display: inline-block; width: 0; height: 0; } /* Texto nuevo */ .pe-text { position: absolute; z-index: 3; margin: 0; padding: 0; border: 0; outline: 1px dashed transparent; outline-offset: 2px; cursor: move; user-select: none; touch-action: none; } .pe-text:hover { outline-color: var(--k-text-104_71_245_55); } .pe-text.is-selected { outline: 1.5px solid var(--pe-accent); } .pe-text.is-editing { cursor: text; } .pe-text.is-moving { opacity: .85; } .pe-text-content { display: block; min-width: 1ch; min-height: 1.2em; margin: 0; padding: 0; border: 0; outline: none; line-height: inherit; white-space: pre; overflow-wrap: normal; } .pe-text.is-fixed-width .pe-text-content { white-space: pre-wrap; overflow-wrap: break-word; } .pe-text.is-editing .pe-text-content { cursor: text; user-select: text; caret-color: var(--pe-accent); } .pe-text-resize { position: absolute; top: 50%; right: -8px; display: none; width: 10px; height: 22px; margin-top: -11px; border: 1.5px solid var(--pe-accent); border-radius: 4px; background: var(--k-bg-ffffff); cursor: ew-resize; touch-action: none; } .pe-text-move { position: absolute; left: -2px; bottom: calc(100% + 3px); display: none; align-items: center; justify-content: center; width: 22px; height: 18px; border-radius: 5px; background: var(--pe-accent); color: var(--k-text-ffffff); cursor: move; touch-action: none; } .pe-text.is-selected .pe-text-resize { display: block; } .pe-text.is-selected .pe-text-move { display: flex; } /* Navegación inferior */ .pe-pagenav { position: absolute; left: 50%; bottom: 18px; z-index: 5; display: flex; align-items: center; gap: 2px; padding: 6px 8px; border-radius: 12px; background: var(--k-bg-2b2540); color: var(--k-text-ffffff); box-shadow: 0 10px 30px rgba(20, 12, 40, .28); transform: translateX(-50%); white-space: nowrap; } .pe-nbtn { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--k-text-e9e6f3); cursor: pointer; } .pe-nbtn:hover:not(:disabled) { background: var(--k-bg-255_255_255_12); } .pe-nbtn:disabled { opacity: .35; cursor: default; } .pe-nbtn.is-active { background: var(--k-bg-255_255_255_18); color: var(--k-text-ffffff); } .pe-page-input { width: 40px; height: 30px; border: 0; border-radius: 7px; background: var(--k-bg-255_255_255_12); color: var(--k-text-ffffff); font-size: .85rem; font-weight: 700; text-align: center; } .pe-page-input:focus { outline: 2px solid var(--k-text-a995ff); } .pe-page-total { padding: 0 6px 0 5px; color: var(--k-text-c9c3da); font-size: .85rem; font-weight: 600; } .pe-zoom-value { min-width: 50px; font-size: .85rem; font-weight: 700; text-align: center; } .pe-nsep { width: 1px; height: 20px; margin: 0 6px; background: var(--k-bg-255_255_255_18); } /* Panel derecho */ .pe-tip { margin: 0 16px 14px; padding: 12px 14px 12px 40px; border: 1px solid var(--k-border-cfe3ff); border-radius: 12px; background: var(--k-bg-eef6ff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231570ef' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E") no-repeat 13px 13px; color: var(--k-text-1e3a5f); font-size: .82rem; line-height: 1.5; } .pe-elements-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 18px; padding: 8px 0; border-bottom: 1px solid var(--pe-line); } .pe-elements-head strong { font-size: .92rem; } .pe-link-danger { padding: 0; border: 0; background: none; color: var(--pe-danger); font-size: .8rem; font-weight: 700; text-decoration: underline; cursor: pointer; } .pe-elements { flex: 1; min-height: 0; margin: 0; padding: 8px 10px; overflow-y: auto; list-style: none; scrollbar-width: thin; } .pe-element { display: flex; align-items: center; gap: 2px; margin-bottom: 4px; border-radius: 10px; transition: background .12s ease; } .pe-element:hover { background: var(--k-bg-f7f5fd); } .pe-element.is-selected { background: var(--pe-accent-soft); } .pe-element-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; } .pe-element-icon { flex: 0 0 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: var(--k-bg-f2f0f8); color: var(--k-text-5d5670); } .pe-element.is-selected .pe-element-icon { background: var(--k-bg-ffffff); color: var(--pe-accent); } .pe-element.is-deleted .pe-element-icon { background: var(--k-bg-fff1f0); color: var(--pe-danger); } .pe-element-text { display: flex; flex-direction: column; min-width: 0; } .pe-element-kind { color: var(--pe-muted); font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .pe-element-label { overflow: hidden; font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; } .pe-element.is-deleted .pe-element-label { color: var(--pe-muted); text-decoration: line-through; } .pe-element-action { flex: 0 0 32px; height: 32px; margin-right: 4px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--k-text-8c859c); cursor: pointer; } .pe-element-action:hover { background: var(--k-bg-fff1f0); color: var(--pe-danger); } .pe-elements-empty { padding: 26px 10px; color: var(--pe-muted); font-size: .84rem; text-align: center; } .pe-side-footer { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; border-top: 1px solid var(--pe-line); } .pe-side-footer small { color: var(--pe-muted); font-size: .78rem; text-align: center; } /* --------------------------------------------------------- SELECTOR DE COLOR --------------------------------------------------------- */ .pe-popover { position: fixed; z-index: 10000; width: 214px; padding: 12px; border: 1px solid var(--pe-line); border-radius: 12px; background: var(--k-bg-ffffff); box-shadow: 0 14px 40px rgba(20, 12, 40, .18); } .pe-swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .pe-swatch { width: 32px; height: 32px; padding: 0; border: 1px solid var(--k-border-0_0_0_14); border-radius: 8px; cursor: pointer; } .pe-swatch:hover { transform: scale(1.06); } .pe-swatch.is-active { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--pe-accent); } .pe-swatch.is-none { background: linear-gradient( to top right, transparent calc(50% - 1px), var(--k-bg-e5484d) calc(50% - 1px), var(--k-bg-e5484d) calc(50% + 1px), transparent calc(50% + 1px) ), var(--k-bg-ffffff); } .pe-custom-color { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--pe-ink-soft); font-size: .8rem; font-weight: 700; cursor: pointer; } .pe-custom-color input { width: 34px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; } /* --------------------------------------------------------- AVISOS Y CARGA --------------------------------------------------------- */ .pe-toast { position: fixed; left: 50%; bottom: 24px; z-index: 10001; max-width: min(92vw, 480px); padding: 12px 18px; border-radius: 12px; background: var(--k-bg-1f1a2e); color: var(--k-text-ffffff); font-size: .88rem; font-weight: 600; line-height: 1.4; text-align: center; box-shadow: 0 10px 30px rgba(20, 12, 40, .3); opacity: 0; pointer-events: none; transform: translate(-50%, 14px); transition: opacity .2s ease, transform .2s ease; } body.pe-active .pe-toast { bottom: 86px; } .pe-toast.is-visible { opacity: 1; transform: translate(-50%, 0); } .pe-toast.is-error { background: var(--k-bg-b42318); } .pe-toast.is-success { background: var(--k-bg-067647); } .pe-spinner { display: inline-block; width: 22px; height: 22px; border: 3px solid var(--k-border-e4ddff); border-top-color: var(--pe-accent); border-radius: 50%; animation: pe-spin .8s linear infinite; } .pe-spinner-light { width: 16px; height: 16px; border-width: 2px; border-color: var(--k-border-255_255_255_35); border-top-color: var(--k-border-ffffff); } @keyframes pe-spin { to { transform: rotate(360deg); } } /* --------------------------------------------------------- PANTALLAS MÁS PEQUEÑAS --------------------------------------------------------- */ @media (max-width: 1180px) { .pe-workspace { grid-template-columns: 120px minmax(0, 1fr) 260px; } .pe-doc-name { display: none; } .pe-top-actions { margin-left: auto; } } @media (max-width: 900px) { .pe-workspace { grid-template-columns: minmax(0, 1fr); } .pe-pages, .pe-side { display: none; } .pe-tool span, .pe-top-actions .pe-btn-ghost span { display: none; } .pe-tool { padding: 0 11px; } .pe-canvas-area { padding: 16px 12px 88px; } } @media (max-width: 600px) { .pe-shell.is-empty { width: calc(100% - 32px); } .pe-upload-card { padding: 40px 18px; } .pe-topbar { gap: 8px; padding: 8px 10px; } .pe-format-hint { display: none; } .pe-select-font { width: 118px; } .pe-pagenav { bottom: 12px; padding: 4px 6px; } #pdfEditorFitWidth, #pdfEditorFitPage, .pe-pagenav .pe-nsep:last-of-type { display: none; } } /* ========================================================= SOLOHAZLO - EDITOR PDF v5 (ajustes) ========================================================= */ /* La vista previa se ajusta al ancho original desde la izquierda. */ .pe-existing-editable { transform-origin: 0 0; } /* Un texto ya cambiado o movido se puede volver a seleccionar. */ .pe-existing.is-changed .pe-existing-editable { pointer-events: auto; cursor: text; } /* Pestaña para mover un texto del PDF. */ .pe-existing-move { position: absolute; z-index: 3; display: none; align-items: center; justify-content: center; width: 22px; height: 18px; border-radius: 5px; background: var(--pe-accent); color: var(--k-text-ffffff); cursor: move; touch-action: none; } .pe-existing.is-selected:not(.is-deleted) .pe-existing-move { display: flex; } /* Texto movido: el lugar original queda punteado y el texto en su nueva posición con el borde de selección. */ .pe-existing.is-moved.is-selected, .pe-shell.is-showing-text .pe-existing.is-moved.is-selected { outline: 1px dashed var(--k-text-104_71_245_55); } .pe-existing.is-moved.is-selected .pe-existing-editable { outline: 1.5px solid var(--pe-accent); outline-offset: 1px; } /* ========================================================= SOLOHAZLO - EDITOR PDF v5 (confirmar y terminar) ========================================================= */ .pe-modal-backdrop { position: fixed; inset: 0; z-index: 10002; display: grid; place-items: center; padding: 20px; background: var(--k-bg-20_14_40_45); animation: pe-fade .15s ease; } .pe-modal { width: min(100%, 440px); padding: 28px 26px 22px; border-radius: 18px; background: var(--k-bg-ffffff); color: var(--pe-ink); text-align: center; box-shadow: 0 24px 60px rgba(20, 12, 40, .3); } .pe-modal-icon, .pe-done-icon { width: 58px; height: 58px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 18px; color: var(--k-text-ffffff); background: linear-gradient(135deg, var(--pe-accent), var(--k-bg-967cff)); box-shadow: 0 10px 24px rgba(104, 71, 245, .25); } .pe-modal h3 { margin: 0 0 8px; font-size: 1.2rem; letter-spacing: -.01em; } .pe-modal p { margin: 0 0 10px; color: var(--pe-ink-soft); font-size: .92rem; line-height: 1.55; } .pe-modal .pe-modal-note { color: var(--pe-muted); font-size: .8rem; } .pe-modal-actions { display: flex; justify-content: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; } .pe-shell.is-done { width: min(calc(100% - 40px), 860px); margin: 6px auto 0; } .pe-done-card { padding: 48px 28px 32px; border: 1px solid var(--pe-line); border-radius: 24px; background: var(--k-bg-ffffff); text-align: center; box-shadow: 0 18px 45px rgba(63, 44, 105, .08); } .pe-done-icon { width: 70px; height: 70px; border-radius: 50%; background: linear-gradient(135deg, var(--k-bg-12b76a), var(--k-bg-079455)); box-shadow: 0 12px 28px rgba(7, 148, 85, .25); } .pe-done-card h2 { margin: 0 0 8px; font-size: 1.5rem; letter-spacing: -.02em; } .pe-done-card p { max-width: 520px; margin: 0 auto 20px; color: var(--pe-muted); line-height: 1.6; } .pe-done-warning { max-width: 520px; margin: 0 auto 20px; padding: 12px 14px; border-radius: 12px; background: var(--k-bg-fff7e6); border: 1px solid var(--k-border-fcd9a0); color: var(--k-text-8a4b00); font-size: .86rem; line-height: 1.5; } .pe-done-actions { margin-bottom: 14px; } .pe-done-secondary { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; } .pe-done-card small { display: block; margin-top: 22px; color: var(--k-text-9a93a8); font-size: .78rem; } @keyframes pe-fade { from { opacity: 0; } } /* ========================================================= SOLOHAZLO - ENCABEZADO COMPACTO Menú superior más delgado en todo el sitio. ========================================================= */ .header-inner { min-height: 68px; gap: 24px; } .brand-logo-image { height: 58px; } .main-nav { gap: 28px; } .main-nav a { font-size: .9rem; } .header-cta { min-height: 40px; padding: 0 18px; border-radius: 12px; font-size: .84rem; } @media (max-width: 780px) { .header-inner { min-height: 60px; } .brand-logo-image { height: 48px; } } /* ========================================================= SOLOHAZLO - PÁGINAS DE HERRAMIENTA MÁS COMPACTAS El título y la zona de carga caben en la primera vista. ========================================================= */ .tool-page { padding-top: 26px; } .tool-page-header { margin-bottom: 18px; } .tool-page-header h1 { margin: 4px 0 6px; font-size: clamp(1.9rem, 3vw, 2.5rem); } .tool-page-header p { font-size: .9rem; } /* Editar PDF: tarjeta de carga más compacta */ .pe-upload-card { padding: 34px 28px 28px; } .pe-upload-icon { width: 56px; height: 56px; margin-bottom: 14px; border-radius: 16px; } .pe-upload-card h2 { font-size: 1.25rem; } .pe-upload-card p { margin-bottom: 18px; } /* ========================================================= SOLOHAZLO - MENÚ PRINCIPAL CON PANEL DE HERRAMIENTAS ========================================================= */ .main-nav { gap: 4px; } .main-nav .nav-quick, .nav-dropdown-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 13px; border: 0; border-radius: 10px; background: transparent; color: var(--k-text-4d4560); font-family: inherit; font-size: .88rem; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background .15s ease, color .15s ease; } .main-nav .nav-quick:hover, .nav-dropdown-toggle:hover, .nav-dropdown.is-open .nav-dropdown-toggle { background: var(--k-bg-f4f1ff); color: var(--primary); } .main-nav .nav-quick.is-current, .nav-dropdown-toggle.is-current { color: var(--primary); } .main-nav .nav-quick.is-current::after { content: none; } .nav-dropdown-toggle svg { transition: transform .2s ease; } .nav-dropdown:hover .nav-dropdown-toggle svg, .nav-dropdown.is-open .nav-dropdown-toggle svg { transform: rotate(180deg); } /* Panel */ .mega-menu { position: absolute; top: calc(100% - 6px); left: 50%; z-index: 1100; display: none; width: min(980px, calc(100vw - 32px)); padding: 22px 22px 0; border: 1px solid var(--k-border-ece7f8); border-radius: 18px; background: var(--k-bg-ffffff); box-shadow: 0 24px 60px rgba(40, 25, 90, .16); transform: translateX(-50%); } /* Puente invisible para no perder el hover al bajar el mouse. */ .mega-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px; } .nav-dropdown:hover .mega-menu, .nav-dropdown:focus-within .mega-menu, .nav-dropdown.is-open .mega-menu { display: block; animation: mega-in .16s ease; } .nav-dropdown.is-closed .mega-menu { display: none; } @keyframes mega-in { from { opacity: 0; transform: translate(-50%, -6px); } } .mega-menu-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 18px; } .mega-menu-title { margin: 0 0 8px 10px; color: var(--k-text-8a8299); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .mega-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 12px; color: var(--ink-main, var(--k-text-1d1730)); text-decoration: none; transition: background .15s ease; } .mega-item:hover, .mega-item.is-current { background: var(--k-bg-f6f3ff); } .mega-icon { flex: 0 0 36px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; } .mega-icon svg { display: block; } .mega-text { display: flex; flex-direction: column; min-width: 0; } .mega-text strong { font-size: .88rem; font-weight: 800; line-height: 1.25; } .mega-text small { color: var(--k-text-7a7289); font-size: .74rem; line-height: 1.35; } .mega-item:hover strong, .mega-item.is-current strong { color: var(--primary); } .mega-menu-soon { padding: 0 0 12px 14px; border-left: 1px solid var(--k-border-f0ecf8); } .mega-soon-text { margin: 0 10px 10px; color: var(--k-text-7a7289); font-size: .82rem; line-height: 1.5; } .mega-soon-link { margin-left: 10px; color: var(--primary); font-size: .84rem; font-weight: 800; text-decoration: none; } .mega-soon-link:hover { text-decoration: underline; } .mega-menu-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 16px -22px 0; padding: 13px 22px; border-top: 1px solid var(--k-border-f0ecf8); border-radius: 0 0 18px 18px; background: var(--k-bg-faf9fe); color: var(--k-text-7a7289); font-size: .78rem; font-weight: 600; } .mega-menu-footer-links { display: flex; gap: 18px; } .mega-menu-footer-links a { color: var(--k-text-4d4560); font-weight: 700; text-decoration: none; } .mega-menu-footer-links a:hover { color: var(--primary); } /* Escritorio mediano: solo el panel, sin accesos directos */ @media (max-width: 1100px) { .main-nav .nav-quick { display: none; } .mega-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mega-menu-soon { border-left: 0; padding-left: 0; } } /* Menú del celular agrupado */ @media (max-width: 780px), (max-height: 500px) and (pointer: coarse) { .mobile-navigation { max-height: calc(100vh - 60px); overflow-y: auto; } .mobile-navigation-title { margin: 10px 4px 4px; color: var(--k-text-8a8299); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .mobile-navigation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .mobile-tool { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 6px 10px; border: 1px solid var(--k-border-f0ecf8); border-radius: 12px; color: var(--text); font-size: .86rem; font-weight: 700; text-decoration: none; } .mobile-tool .mega-icon { flex-basis: 32px; width: 32px; height: 32px; } .mobile-tool:hover, .mobile-tool.is-current { border-color: var(--k-border-d9cfff); background: var(--k-bg-f6f3ff); color: var(--primary); } .mobile-navigation-links { display: flex; gap: 6px; margin-top: 12px; } .mobile-navigation-links a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 11px; background: var(--k-bg-f7f5fc); color: var(--text); font-size: .86rem; font-weight: 700; text-decoration: none; } } /* ========================================================= SOLOHAZLO - GUÍAS ========================================================= */ .guides-page, .guide-page { padding: 34px 0 70px; background: radial-gradient(circle at 50% -10%, var(--k-bg-109_74_255_08), transparent 34%), linear-gradient(180deg, var(--k-bg-faf9ff), var(--k-bg-ffffff) 380px); } /* ---------- Lista de guías ---------- */ .guides-hero { max-width: 700px; margin: 0 auto 30px; text-align: center; } .guides-hero h1 { margin: 6px 0 10px; color: var(--text); font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.1; letter-spacing: -.04em; } .guides-hero p { color: var(--muted); font-size: .98rem; line-height: 1.65; } .guides-notice { max-width: 700px; margin: 0 auto 22px; padding: 12px 16px; border-radius: 12px; background: var(--k-bg-fff7e6); color: var(--k-text-8a4b00); text-align: center; font-size: .9rem; } .guides-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .guide-card { display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid var(--k-border-104_71_245_12); border-radius: 20px; background: var(--k-bg-ffffff); color: inherit; text-decoration: none; box-shadow: 0 10px 30px rgba(47, 32, 82, .05); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .guide-card:hover { transform: translateY(-3px); border-color: var(--k-border-104_71_245_28); box-shadow: 0 18px 38px rgba(47, 32, 82, .09); } .guide-card-category { align-self: flex-start; padding: 5px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .guide-card h2 { color: var(--text); font-size: 1.05rem; line-height: 1.35; letter-spacing: -.01em; } .guide-card p { flex: 1; color: var(--muted); font-size: .86rem; line-height: 1.55; } .guide-card-meta { color: var(--k-text-9a93a8); font-size: .76rem; font-weight: 600; } .guide-card-link { color: var(--primary); font-size: .86rem; font-weight: 800; } /* ---------- Artículo ---------- */ .guide-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; } .guide-article { min-width: 0; max-width: 760px; } .guide-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; color: var(--k-text-9a93a8); font-size: .8rem; font-weight: 600; } .guide-breadcrumb a { color: var(--muted); } .guide-breadcrumb a:hover { color: var(--primary); } .guide-header h1 { margin: 8px 0 12px; color: var(--text); font-size: clamp(1.8rem, 3.2vw, 2.45rem); line-height: 1.15; letter-spacing: -.035em; } .guide-lead { color: var(--text-soft); font-size: 1.08rem; line-height: 1.6; } .guide-meta { margin-top: 14px; padding-bottom: 20px; border-bottom: 1px solid var(--border); color: var(--k-text-9a93a8); font-size: .82rem; font-weight: 600; } .guide-body { padding-top: 10px; color: var(--k-text-3a3249); font-size: 1.02rem; line-height: 1.75; } .guide-body p { margin: 16px 0; } .guide-body h2 { margin: 38px 0 6px; color: var(--text); font-size: 1.4rem; line-height: 1.25; letter-spacing: -.02em; } .guide-body ul, .guide-body ol { margin: 14px 0; padding-left: 24px; } .guide-body li { margin: 8px 0; padding-left: 4px; } .guide-body a { color: var(--primary); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .guide-body strong { color: var(--text); } /* Pasos numerados */ .guide-body ol.guide-steps { counter-reset: guide-step; padding-left: 0; list-style: none; } .guide-body ol.guide-steps li { position: relative; margin: 12px 0; padding: 14px 16px 14px 58px; border: 1px solid var(--border); border-radius: 14px; background: var(--k-bg-ffffff); } .guide-body ol.guide-steps li::before { counter-increment: guide-step; content: counter(guide-step); position: absolute; left: 14px; top: 13px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-light)); color: var(--k-text-ffffff); font-size: .85rem; font-weight: 800; line-height: 1; } /* Recuadros de consejo */ .guide-tip { margin: 22px 0; padding: 14px 18px; border-left: 4px solid var(--primary); border-radius: 0 12px 12px 0; background: var(--k-bg-f6f3ff); font-size: .96rem; line-height: 1.6; } .guide-tip-warning { border-left-color: var(--k-border-f59e0b); background: var(--k-bg-fff8eb); } /* Preguntas frecuentes */ .guide-faq { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } .guide-faq details { border: 1px solid var(--border); border-radius: 14px; background: var(--k-bg-ffffff); } .guide-faq summary { padding: 14px 18px; color: var(--text); font-weight: 800; cursor: pointer; } .guide-faq details p { margin: 0; padding: 0 18px 16px; color: var(--k-text-4a4458); } /* Llamado a la herramienta */ .guide-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 40px; padding: 22px 24px; border-radius: 18px; background: linear-gradient(135deg, var(--k-bg-f3efff), var(--k-bg-faf8ff)); border: 1px solid var(--k-border-e3dbff); } .guide-cta strong { display: block; color: var(--text); font-size: 1.05rem; } .guide-cta p { margin-top: 4px; color: var(--muted); font-size: .9rem; } .guide-cta-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; min-height: 44px; padding: 0 20px; border-radius: 12px; background: linear-gradient(135deg, var(--violet-main), var(--violet-deep)); color: var(--k-text-ffffff); font-size: .9rem; font-weight: 800; text-decoration: none; box-shadow: 0 8px 18px rgba(104, 71, 245, .22); transition: transform .2s ease, box-shadow .2s ease; } .guide-cta-button:hover { transform: translateY(-1px); box-shadow: 0 11px 22px rgba(104, 71, 245, .28); } /* ---------- Columna lateral ---------- */ .guide-aside { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 16px; } .guide-aside-card { padding: 20px; border: 1px solid var(--border); border-radius: 18px; background: var(--k-bg-ffffff); } .guide-aside-label { display: block; margin-bottom: 8px; color: var(--k-text-8a8299); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .guide-aside-tool strong { display: block; color: var(--text); font-size: 1.1rem; } .guide-aside-tool p { margin: 4px 0 14px; color: var(--muted); font-size: .88rem; } .guide-aside-tool .guide-cta-button { width: 100%; } .guide-related { margin: 0; padding: 0; list-style: none; } .guide-related li + li { border-top: 1px solid var(--k-border-f2eff8); } .guide-related a { display: block; padding: 10px 0; color: var(--text); font-size: .86rem; font-weight: 700; line-height: 1.4; } .guide-related a:hover { color: var(--primary); } .guide-all-link { display: inline-block; margin-top: 8px; color: var(--primary); font-size: .86rem; font-weight: 800; } /* ---------- Responsive ---------- */ @media (max-width: 1000px) { .guides-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .guide-layout { grid-template-columns: minmax(0, 1fr); } .guide-article { max-width: none; } .guide-aside { position: static; } } @media (max-width: 640px) { .guides-grid { grid-template-columns: minmax(0, 1fr); } .guide-body { font-size: .98rem; } .guide-body h2 { font-size: 1.25rem; } .guide-cta { flex-direction: column; align-items: stretch; } } /* ========================================================= SOLOHAZLO - PÁGINAS LEGALES (listas y enlaces) ========================================================= */ .legal-section ul { margin: 12px 0; padding-left: 22px; } .legal-section li { margin: 6px 0; color: var(--muted); line-height: 1.6; } .legal-section p a:not(.legal-contact) { color: var(--primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .guide-body h3 { margin: 26px 0 4px; color: var(--text); font-size: 1.12rem; line-height: 1.3; } /* ========================================================= HERRAMIENTAS DE ARCHIVOS (Tanda 1) PDF a JPG · JPG a PDF · Comprimir imágenes · Convertir imágenes ========================================================= */ .ft-card .compressor-form { text-align: left; } .ft-drop { position: relative; text-align: center; } .ft-drop.is-dragover { border-color: var(--primary); background: var(--k-bg-efe9ff); box-shadow: 0 0 0 4px rgba(109, 74, 255, .12); } .ft-drop.is-compact { min-height: 0; padding: 12px 16px; flex-direction: row; gap: 10px; } .ft-drop.is-compact .upload-zone-icon { width: 32px; height: 32px; margin: 0; } .ft-drop.is-compact span { display: none; } .ft-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .ft-summary { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; color: var(--text-soft); font-size: .82rem; font-weight: 600; } .ft-summary-actions { display: flex; gap: 14px; } .ft-link-btn { padding: 0; border: 0; background: none; color: var(--primary); font: inherit; font-weight: 700; cursor: pointer; } .ft-link-btn:hover { text-decoration: underline; } .ft-link-muted { color: var(--muted); } .ft-sort-hint { margin: 8px 0 0; color: var(--muted); font-size: .76rem; } .ft-form:not(.has-files) .ft-sort-hint { display: none; } .ft-list { margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; } .ft-item { position: relative; padding: 7px; border: 1px solid var(--k-border-e5defd); border-radius: 14px; background: var(--k-bg-fff); display: flex; flex-direction: column; gap: 6px; transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease; } .ft-item[draggable="true"] { cursor: grab; } .ft-item.is-dragging { opacity: .45; } .ft-item.is-target { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(109, 74, 255, .15); } .ft-thumb { position: relative; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: repeating-conic-gradient(var(--k-bg-f3f1f8) 0% 25%, var(--k-bg-fbfaff) 0% 50%) 50% / 16px 16px; display: flex; align-items: center; justify-content: center; } .ft-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } .ft-thumb.is-doc { background: linear-gradient(135deg, var(--k-bg-f2eeff), var(--k-bg-ebe4ff)); } .ft-thumb-ext { padding: 4px 8px; border-radius: 6px; background: var(--primary); color: var(--k-text-fff); font-size: .72rem; font-weight: 800; letter-spacing: .04em; } .ft-order { position: absolute; top: 6px; left: 6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--k-bg-29_23_48_82); color: var(--k-text-fff); font-size: .72rem; font-weight: 800; display: flex; align-items: center; justify-content: center; } .ft-meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .ft-meta strong { overflow: hidden; color: var(--text); font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; } .ft-meta span { color: var(--muted); font-size: .7rem; } .ft-item-actions { display: flex; gap: 4px; justify-content: flex-end; } .ft-icon-btn { width: 28px; height: 28px; padding: 0; border: 1px solid var(--k-border-e5defd); border-radius: 8px; background: var(--k-bg-faf9ff); color: var(--text-soft); font-size: .9rem; font-weight: 700; line-height: 1; cursor: pointer; } .ft-icon-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); } .ft-icon-btn:disabled { opacity: .35; cursor: default; } .ft-remove:hover:not(:disabled) { border-color: var(--red); color: var(--red); } /* Un solo archivo (PDF a JPG): fila horizontal. */ .ft-list.is-single { grid-template-columns: 1fr; } .ft-list.is-single .ft-item { flex-direction: row; align-items: center; gap: 12px; } .ft-list.is-single .ft-thumb { width: 48px; flex-shrink: 0; } .ft-list.is-single .ft-meta { flex: 1; } .ft-list.is-single .ft-meta strong { font-size: .84rem; } .ft-error { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--red-soft); color: var(--k-text-b4233a); font-size: .8rem; line-height: 1.45; } .ft-options { margin: 14px 0 0; padding: 0; border: 0; display: grid; gap: 12px; } .ft-option-legend { display: block; margin-bottom: 6px; color: var(--text); font-size: .8rem; font-weight: 700; } .ft-pills { display: flex; flex-wrap: wrap; gap: 6px; } .ft-pill { position: relative; flex: 1 1 0; min-width: 92px; cursor: pointer; } .ft-pill input { position: absolute; opacity: 0; pointer-events: none; } .ft-pill span { min-height: 44px; padding: 7px 10px; border: 1px solid var(--k-border-e5defd); border-radius: 12px; background: var(--k-bg-fff); color: var(--text-soft); font-size: .8rem; font-weight: 700; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; transition: border-color .15s ease, background .15s ease, color .15s ease; } .ft-pill small { color: var(--muted); font-size: .68rem; font-weight: 600; } .ft-pill:hover span { border-color: var(--k-border-c8bbff); } .ft-pill input:checked + span { border-color: var(--primary); background: var(--k-bg-f4f0ff); color: var(--primary-dark); box-shadow: 0 0 0 1px var(--primary) inset; } .ft-pill input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; } .ft-text { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid var(--k-border-e5defd); border-radius: 12px; background: var(--k-bg-fff); color: var(--text); font: inherit; font-size: .86rem; } .ft-text:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(109, 74, 255, .12); } .ft-help { display: block; margin-top: 5px; color: var(--muted); font-size: .72rem; } .ft-options:disabled { opacity: .6; } .ft-form .compression-result { text-align: center; } .ft-form.is-busy .ft-drop, .ft-form.is-done .ft-drop, .ft-form.is-done .ft-summary, .ft-form.is-done .ft-sort-hint, .ft-form.is-done .ft-item-actions { display: none; } .ft-form.is-busy .ft-summary-actions { visibility: hidden; } .ft-form.is-done .ft-list { opacity: .7; } @media (max-width: 560px) { .ft-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ft-list.is-single { grid-template-columns: 1fr; } .ft-pill { min-width: calc(50% - 3px); } } /* Muchas opciones (Convertir imágenes): cuadrícula pareja. */ .ft-pills--grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .ft-pills--grid .ft-pill { min-width: 0; } @media (max-width: 560px) { .ft-pills--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Menú: el bloque "Próximamente" ocupa una fila completa ahora que hay cuatro grupos de herramientas. */ .mega-menu-grid .mega-menu-soon { grid-column: 1 / -1; margin-top: 4px; padding: 12px 14px; border-left: 0; border-top: 1px solid var(--k-border-f0ecf8); display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; } .mega-menu-grid .mega-menu-soon .mega-menu-title, .mega-menu-grid .mega-menu-soon .mega-soon-text, .mega-menu-grid .mega-menu-soon .mega-soon-link { margin: 0; } /* Menú con cinco grupos de herramientas (Tanda 3). */ @media (min-width: 1100px) { .mega-menu { width: min(1140px, calc(100vw - 32px)); } .mega-menu-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 12px; } } /* Recortar audio (Tanda 4) */ .ft-trim { padding: 14px; border: 1px solid var(--k-border-e5defd); border-radius: 14px; background: var(--k-bg-faf9ff); } .ft-player { width: 100%; margin-bottom: 12px; } .ft-trim-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .ft-trim-field { display: flex; flex-direction: column; gap: 5px; } .ft-trim-field label { color: var(--text-soft); font-size: .76rem; font-weight: 700; } .ft-trim-field .ft-link-btn { align-self: flex-start; font-size: .76rem; } .ft-preview-btn { margin-top: 12px; padding: 9px 14px; border: 1px solid var(--primary); border-radius: 10px; background: var(--k-bg-fff); color: var(--primary); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; } .ft-preview-btn:hover { background: var(--k-bg-f4f0ff); } .ft-trim .ft-help { margin-top: 8px; } .ft-form.is-done .ft-trim { display: none; } /* Menú: grupo con muchas herramientas (Audio) a lo ancho. */ .mega-menu-grid .mega-menu-group--wide { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; padding-top: 8px; border-top: 1px solid var(--k-border-f0ecf8); } .mega-menu-group--wide .mega-menu-title { grid-column: 1 / -1; } @media (min-width: 1100px) { .mega-menu-grid .mega-menu-group--wide { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* Recortar video (Tanda 5) */ .ft-player-video { display: block; max-height: 360px; border-radius: 10px; background: var(--k-bg-000); } /* Nombres de archivo muy largos: se cortan con "…" en lugar de salirse de la tarjeta (en todos los tamaños de pantalla). */ .ft-list, .ft-item, .ft-meta, .ft-summary > span:first-child { min-width: 0; max-width: 100%; } .ft-item { overflow: hidden; } .ft-meta strong { display: block; max-width: 100%; } .ft-list.is-single .ft-meta { flex: 1 1 auto; overflow: hidden; } .ft-list.is-single .ft-item-actions { flex-shrink: 0; }