@layer panel { @font-face{font-family:Gilroy;src:url(/fonts/gilroy-400.bfd8205dd8.woff2) format("woff2");font-weight:400;font-display:swap} @font-face{font-family:Gilroy;src:url(/fonts/gilroy-500.97b1163c39.woff2) format("woff2");font-weight:500;font-display:swap} @font-face{font-family:Gilroy;src:url(/fonts/gilroy-600.980e0aeb87.woff2) format("woff2");font-weight:600;font-display:swap} @font-face{font-family:Gilroy;src:url(/fonts/gilroy-700.d7bbb1515a.woff2) format("woff2");font-weight:700;font-display:swap} .i-copy{--m:url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGlkPSJtZWRpYSAmIzM4OyBlZGl0aW5nIC8gY29weSI+CjxwYXRoIGlkPSImIzI0MDsmIzE1OTsmIzE0MjsmIzE2ODsgSWNvbiBjb2xvciIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xOCAxNlY0QzE4IDIuODk1NDMgMTcuMTA0NiAyIDE2IDJINEMyLjg5NTQzIDIgMiAyLjg5NTQzIDIgNFYxNkMyIDE3LjEwNDYgMi44OTU0MyAxOCA0IDE4SDE2QzE3LjEwNDYgMTggMTggMTcuMTA0NiAxOCAxNlpNNCA0SDE2VjE2SDRWNFpNMjAgMThWNkMyMS4xMDQ2IDYgMjIgNi44OTU0MyAyMiA4VjE4QzIyIDIwLjIwOTEgMjAuMjA5MSAyMiAxOCAyMkg4QzYuODk1NDMgMjIgNiAyMS4xMDQ2IDYgMjBIMThDMTkuMTA0NiAyMCAyMCAxOS4xMDQ2IDIwIDE4WiIgZmlsbD0iIzFFMjI0OCIvPgo8L2c+Cjwvc3ZnPgo=");--w:24px;--h:24px;--x:0px;--y:0px} .i-logout{--m:url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGlkPSJ1aSAvIHNpZ25fb3V0Ij4KPHBhdGggaWQ9IiYjMjQwOyYjMTU5OyYjMTQyOyYjMTY4OyBJY29uIGNvbG9yIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTUgMTlIMTAuNUMxMC43NzYxIDE5IDExIDE5LjIyMzkgMTEgMTkuNVYyMC41QzExIDIwLjc3NjEgMTAuNzc2MSAyMSAxMC41IDIxSDVDMy44OTU0MyAyMSAzIDIwLjEwNDYgMyAxOVY1QzMgMy44OTU0MyAzLjg5NTQzIDMgNSAzSDEwLjVDMTAuNzc2MSAzIDExIDMuMjIzODYgMTEgMy41VjQuNUMxMSA0Ljc3NjE0IDEwLjc3NjEgNSAxMC41IDVINVYxOVpNMTUuNjQgNi4xNUwyMC43OCAxMS4yOEMyMC45MTg5IDExLjQyMTcgMjAuOTk3NyAxMS42MTE2IDIxIDExLjgxVjEyLjE5QzIwLjk5OTggMTIuMzg4OCAyMC45MjA3IDEyLjU3OTUgMjAuNzggMTIuNzJMMTUuNjQgMTcuODVDMTUuNTQ2MSAxNy45NDQ3IDE1LjQxODMgMTcuOTk3OSAxNS4yODUgMTcuOTk3OUMxNS4xNTE3IDE3Ljk5NzkgMTUuMDIzOSAxNy45NDQ3IDE0LjkzIDE3Ljg1TDE0LjIyIDE3LjE1QzE0LjEyNTMgMTcuMDU2MSAxNC4wNzIxIDE2LjkyODMgMTQuMDcyMSAxNi43OTVDMTQuMDcyMSAxNi42NjE3IDE0LjEyNTMgMTYuNTMzOSAxNC4yMiAxNi40NEwxNy42NyAxM0g3LjVDNy4yMjM4NiAxMyA3IDEyLjc3NjEgNyAxMi41VjExLjVDNyAxMS4yMjM5IDcuMjIzODYgMTEgNy41IDExSDE3LjY3TDE0LjIyIDcuNTZDMTQuMTI1OSA3LjQ2Nzg0IDE0LjA3MjkgNy4zNDE2OSAxNC4wNzI5IDcuMjFDMTQuMDcyOSA3LjA3ODMxIDE0LjEyNTkgNi45NTIxNiAxNC4yMiA2Ljg2TDE0LjkzIDYuMTVDMTUuMDIzOSA2LjA1NTM0IDE1LjE1MTcgNi4wMDIxIDE1LjI4NSA2LjAwMjFDMTUuNDE4MyA2LjAwMjEgMTUuNTQ2MSA2LjA1NTM0IDE1LjY0IDYuMTVaIiBmaWxsPSIjMUUyMjQ4Ii8+CjwvZz4KPC9zdmc+Cg==");--w:24px;--h:24px;--x:0px;--y:0px} .i-refresh{--m:url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjE3Ljk5NTUiIGhlaWdodD0iMTguMDAwOCIgdmlld0JveD0iMCAwIDE3Ljk5NTUgMTguMDAwOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggaWQ9IiYjMjQwOyYjMTU5OyYjMTQyOyYjMTY4OyBJY29uIGNvbG9yIiBkPSJNMTcuNDk1NSA2Ljk5NjgySDEyLjQ5NTVDMTIuMjE5NCA2Ljk5NjgyIDExLjk5NTUgNi43NzI5NiAxMS45OTU1IDYuNDk2ODJWNi4yMDY4MkMxMS45OTM1IDYuMDcxMjQgMTIuMDQ3OSA1Ljk0MDkgMTIuMTQ1NSA1Ljg0NjgyTDEzLjkyNTUgNC4wNjY4MkMxMi42MjUzIDIuNzQ1MTEgMTAuODQ5NiAxLjk5OTU0IDguOTk1NTEgMS45OTY4MkM1LjE5MjY3IDIuMDA1NCAyLjA5MjI5IDUuMDQ4NTMgMi4wMTI4NCA4Ljg1MDU2QzEuOTMzMzkgMTIuNjUyNiA0LjkwMzkzIDE1LjgyMjYgOC43MDMxIDE1Ljk5QzEyLjUwMjMgMTYuMTU3NSAxNS43NDAyIDEzLjI2MTEgMTUuOTk1NSA5LjQ2NjgyQzE2LjAxMTQgOS4yMDI0NiAxNi4yMzA3IDguOTk2MzQgMTYuNDk1NSA4Ljk5NjgySDE3LjQ5NTVDMTcuNjMxOSA5LjAwMDg3IDE3Ljc2MTEgOS4wNTgzNCAxNy44NTU1IDkuMTU2ODJDMTcuOTQ3NCA5LjI1NzMxIDE3Ljk5NDQgOS4zOTA5MyAxNy45ODU1IDkuNTI2ODJDMTcuNzM3MiAxMy43NjM4IDE0LjU2MjQgMTcuMjUxNSAxMC4zNjczIDE3Ljg5NThDNi4xNzIyNiAxOC41NDAyIDIuMDk3MTYgMTYuMTY2MiAwLjU4ODYxNSAxMi4xOTlDLTAuOTE5OTM0IDguMjMxOTEgMC41NDgxMjkgMy43NTAwMyA0LjExMTQyIDEuNDQ0MkM3LjY3NDcyIC0wLjg2MTYzMiAxMi4zNjQ2IC0wLjM2NDYyOSAxNS4zNjU1IDIuNjM2ODJMMTYuODU1NSAxLjE0NjgyQzE2Ljk0NzIgMS4wNTE2OCAxNy4wNzM0IDAuOTk3NTkxIDE3LjIwNTUgMC45OTY4MjFIMTcuNDk1NUMxNy43NzE3IDAuOTk2ODIxIDE3Ljk5NTUgMS4yMjA2OCAxNy45OTU1IDEuNDk2ODJWNi40OTY4MkMxNy45OTU1IDYuNzcyOTYgMTcuNzcxNyA2Ljk5NjgyIDE3LjQ5NTUgNi45OTY4MloiIGZpbGw9IiMxRTIyNDgiLz4KPC9zdmc+Cg==");--w:17.9955px;--h:18.0008px;--x:3.0048px;--y:3.0024px} .i-close{--m:url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjEyLjAwMDgiIGhlaWdodD0iMTEuOTk5OSIgdmlld0JveD0iMCAwIDEyLjAwMDggMTEuOTk5OSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggaWQ9IiYjMjQwOyYjMTU5OyYjMTQyOyYjMTY4OyBJY29uIGNvbG9yIiBkPSJNMS4xMTM0NSAwLjE3NTczNkMxLjM0Nzc3IC0wLjA1ODU3ODggMS43Mjc2NiAtMC4wNTg1Nzg1IDEuOTYxOTggMC4xNzU3MzZMNi4wMDA0MyA0LjIxNDE5TDEwLjAzODggMC4xNzU4MzVDMTAuMjczMSAtMC4wNTg0NzkxIDEwLjY1MyAtMC4wNTg0NzkzIDEwLjg4NzMgMC4xNzU4MzVMMTEuODI0MSAxLjExMjU3QzEyLjA1ODQgMS4zNDY4OCAxMi4wNTg0IDEuNzI2NzggMTEuODI0MSAxLjk2MTFMNy43ODU3IDUuOTk5NDVMMTEuODI1IDEwLjAzODhDMTIuMDU5MyAxMC4yNzMxIDEyLjA1OTMgMTAuNjUzIDExLjgyNSAxMC44ODczTDEwLjg4ODMgMTEuODI0MUMxMC42NTQgMTIuMDU4NCAxMC4yNzQxIDEyLjA1ODQgMTAuMDM5OCAxMS44MjQxTDYuMDAwNDMgNy43ODQ3MkwxLjk2MSAxMS44MjQyQzEuNzI2NjggMTIuMDU4NSAxLjM0Njc5IDEyLjA1ODUgMS4xMTI0NyAxMS44MjQyTDAuMTc1NzM2IDEwLjg4NzRDLTAuMDU4NTc4NSAxMC42NTMxIC0wLjA1ODU3ODggMTAuMjczMiAwLjE3NTczNiAxMC4wMzg5TDQuMjE1MTcgNS45OTk0NUwwLjE3NjcxNiAxLjk2MUMtMC4wNTc1OTg4IDEuNzI2NjggLTAuMDU3NTk4NCAxLjM0Njc5IDAuMTc2NzE2IDEuMTEyNDdMMS4xMTM0NSAwLjE3NTczNloiIGZpbGw9IiMxRTIyNDgiLz4KPC9zdmc+Cg==");--w:12.0008px;--h:11.9999px;--x:6px;--y:6px} .i-info{--m:url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGlkPSImIzI0MDsmIzE1OTsmIzE0MjsmIzE2ODsgSWNvbiBjb2xvciIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMCAwQzQuNDc3MTUgMCAwIDQuNDc3MTUgMCAxMEMwIDE1LjUyMjggNC40NzcxNSAyMCAxMCAyMEMxNS41MjI4IDIwIDIwIDE1LjUyMjggMjAgMTBDMjAgNy4zNDc4NCAxOC45NDY0IDQuODA0MyAxNy4wNzExIDIuOTI4OTNDMTUuMTk1NyAxLjA1MzU3IDEyLjY1MjIgMCAxMCAwWk0xMCAxOEM1LjU4MTcyIDE4IDIgMTQuNDE4MyAyIDEwQzIgNS41ODE3MiA1LjU4MTcyIDIgMTAgMkMxNC40MTgzIDIgMTggNS41ODE3MiAxOCAxMEMxOCAxMi4xMjE3IDE3LjE1NzEgMTQuMTU2NiAxNS42NTY5IDE1LjY1NjlDMTQuMTU2NiAxNy4xNTcxIDEyLjEyMTcgMTggMTAgMThaTTEwLjUgNS41OTc2OEMxMC43NzYxIDUuNTk3NjggMTEgNS44MjE1NCAxMSA2LjA5NzY4VjcuMDk3NjhDMTEgNy4zNzM4MiAxMC43NzYxIDcuNTk3NjggMTAuNSA3LjU5NzY4SDkuNUM5LjIyMzg2IDcuNTk3NjggOSA3LjM3MzgyIDkgNy4wOTc2OFY2LjA5NzY4QzkgNS44MjE1NCA5LjIyMzg2IDUuNTk3NjggOS41IDUuNTk3NjhIMTAuNVpNMTAuNSA4LjU5NzY4QzEwLjc3NjEgOC41OTc2OCAxMSA4LjY0NTc1IDExIDkuMDQ1ODZWMTMuMTYyOEMxMS4yNjU3IDEzLjIzNjcgMTEuNTMwNiAxMy4zMDExIDExLjc2MDYgMTMuMzUxN0MxMS45MDAyIDEzLjM4MjUgMTIuMDAxIDEzLjUwNTMgMTIuMDAxIDEzLjY0ODNWMTQuMTAyM0MxMi4wMDEgMTQuMjY4IDExLjg2NjcgMTQuNDAyMyAxMS43MDEgMTQuNDAyM0g4LjNDOC4xMzQzMSAxNC40MDIzIDggMTQuMjY4IDggMTQuMTAyM1YxMy42NDgzQzggMTMuNTA1MyA4LjEwMDc2IDEzLjM4MjUgOC4yNDA0MiAxMy4zNTE3QzguNDcwMTIgMTMuMzAxMiA4LjczNDY2IDEzLjIzNjkgOSAxMy4xNjNWOS44MzY5NUM4LjczNDY2IDkuNzYzMSA4LjQ3MDEyIDkuNjk4ODQgOC4yNDA0MiA5LjY0ODI4QzguMTAwNzYgOS42MTc1MyA4IDkuNDk0NzQgOCA5LjM1MTc0VjguODk3NjhDOCA4LjczMTk5IDguMTM0MzEgOC41OTc2OCA4LjMgOC41OTc2OEwxMC41IDguNTk3NjhaIiBmaWxsPSIjMUUyMjQ4Ii8+Cjwvc3ZnPgo=");--w:20px;--h:20px;--x:1.9992px;--y:1.9992px} .i-key{--m:url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGlkPSJhY3Rpb25zIC8ga2V5Ij4KPHBhdGggaWQ9IiYjMjQwOyYjMTU5OyYjMTQyOyYjMTY4OyBJY29uIGNvbG9yIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE4LjU5IDNIMjBDMjAuNTUyMyAzIDIxIDMuNDQ3NzIgMjEgNFY2LjVDMjEgNi43NzYxNCAyMC43NzYxIDcgMjAuNSA3SDE4LjYzQzE4LjQ4NjQgNy4wMTA1NiAxOC4zNTQ4IDcuMDgzNjkgMTguMjcgNy4ySDE4LjIyQzE4LjA3OTMgNy4zNDA1MiAxOC4wMDAyIDcuNTMxMTUgMTggNy43M1Y5LjQ5QzE4IDkuNzY2MTQgMTcuNzc2MSA5Ljk5IDE3LjUgOS45OUgxNS43MkMxNS41MjEyIDkuOTkwMTcgMTUuMzMwNSAxMC4wNjkzIDE1LjE5IDEwLjIxTDE0LjkzIDEwLjQ3QzE0Ljc4OTMgMTAuNjEwNSAxNC43MTAyIDEwLjgwMTIgMTQuNzEgMTFWMTEuNzJDMTQuNzA4OSAxMS45ODIzIDE0LjYwNDcgMTIuMjMzNyAxNC40MiAxMi40MkwxMy41NCAxMy4zQzEzLjg0MTggMTMuOTk0MyAxMy45OTgzIDE0Ljc0MyAxNCAxNS41QzE0IDE4LjUzNzYgMTEuNTM3NiAyMSA4LjUgMjFDNS40NjI0MyAyMSAzIDE4LjUzNzYgMyAxNS41QzMgMTIuNDYyNCA1LjQ2MjQzIDEwIDguNSAxMEM5LjI2MTU3IDkuOTk5MDcgMTAuMDE0NyAxMC4xNTkyIDEwLjcxIDEwLjQ3TDE3Ljg5IDMuMjlDMTguMDc2MyAzLjEwNTI2IDE4LjMyNzcgMy4wMDExIDE4LjU5IDNaTTUuNDQgMTYuNTZDNS40NCAxNy42NjQ2IDYuMzM1NDMgMTguNTYgNy40NCAxOC41NkM3Ljk3MDQzIDE4LjU2IDguNDc5MTQgMTguMzQ5MyA4Ljg1NDIxIDE3Ljk3NDJDOS4yMjkyOSAxNy41OTkxIDkuNDQgMTcuMDkwNCA5LjQ0IDE2LjU2QzkuNDQgMTUuNDU1NCA4LjU0NDU3IDE0LjU2IDcuNDQgMTQuNTZDNi4zMzU0MyAxNC41NiA1LjQ0IDE1LjQ1NTQgNS40NCAxNi41NloiIGZpbGw9IiMxRTIyNDgiLz4KPC9nPgo8L3N2Zz4K");--w:24px;--h:24px;--x:0px;--y:0px} .i-eye{--m:url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGlkPSJ1aSAvIHZpc2libGVfb3V0bGluZWQiPgo8cGF0aCBpZD0iJiMyNDA7JiMxNTk7JiMxNDI7JiMxNjg7IEljb24gY29sb3IiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjEuOTg3OCAxMS43QzIwLjM1ODIgNy42MTY0NiAxNi4zODgxIDQuOTU0ODQgMTEuOTkzOSA1QzcuNjI4OTkgNC45NzQ3NSAzLjY5MTEzIDcuNjE4NzcgMi4wNTk5NiAxMS42N0MyLjAyMTU1IDExLjc3NTggMi4wMDEyOCAxMS44ODc0IDIgMTJDMS45OTk0NyAxMi4xMDYzIDIuMDE5ODUgMTIuMjExNiAyLjA1OTk2IDEyLjMxQzMuNjg0NzggMTYuMzY5MSA3LjYyNDA1IDE5LjAyMiAxMS45OTM5IDE5QzE2LjM1ODggMTkuMDI1MiAyMC4yOTY3IDE2LjM4MTIgMjEuOTI3OSAxMi4zM0MyMS45NzA2IDEyLjIyNTQgMjEuOTkxMSAxMi4xMTMgMjEuOTg3OCAxMkMyMi4wMDQgMTEuOTAwNyAyMi4wMDQgMTEuNzk5MyAyMS45ODc4IDExLjdaTTExLjk5MzkgMTdDOC42MTIzOSAxNi45OTI0IDUuNTMzMjkgMTUuMDQ5OCA0LjA2ODc0IDEyQzUuNTI4MjMgOC45NDU5OCA4LjYxMDc1IDcuMDAxOTkgMTEuOTkzOSA3LjAwMTk5QzE1LjM3NzEgNy4wMDE5OSAxOC40NTk2IDguOTQ1OTggMTkuOTE5MSAxMkMxOC40NTQ1IDE1LjA0OTggMTUuMzc1NCAxNi45OTI0IDExLjk5MzkgMTdaTTguOTk1NzQgMTJDOC45OTU3NCAxMC4zNDMxIDEwLjMzODEgOSAxMS45OTM5IDlDMTMuNjQ5OCA5IDE0Ljk5MjEgMTAuMzQzMSAxNC45OTIxIDEyQzE0Ljk5MjEgMTMuNjU2OSAxMy42NDk4IDE1IDExLjk5MzkgMTVDMTAuMzM4MSAxNSA4Ljk5NTc0IDEzLjY1NjkgOC45OTU3NCAxMloiIGZpbGw9IiMxRTIyNDgiLz4KPC9nPgo8L3N2Zz4K");--w:24px;--h:24px;--x:0px;--y:0px} .i-shield{--m:url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGlkPSJ0ZWNobm9sb2d5ICYjMzg7IGRhdGEgLyBzZWN1cml0eV9vbl9vdXRsaW5lZCI+CjxwYXRoIGlkPSImIzI0MDsmIzE1OTsmIzE0MjsmIzE2ODsgSWNvbiBjb2xvciIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMC4xMiA1LjEyTDE2LjU5IDEuNTlDMTYuMjE0MiAxLjIxMTk2IDE1LjcwMyAwLjk5OTU3OCAxNS4xNyAxSDguODNDOC4yOTY5NiAwLjk5OTU3OCA3Ljc4NTggMS4yMTE5NiA3LjQxIDEuNTlMMy44OCA1LjEyQzMuMzE3MjMgNS42ODIwNyAzLjAwMDcgNi40NDQ2MiAzIDcuMjRWMTMuMDlDMy4wMDE4NSAxNS41NTczIDQuMTQyMDcgMTcuODg1NyA2LjA5IDE5LjRMMTAuMTcgMjIuNThDMTAuNTIxOCAyMi44NTMgMTAuOTU0NyAyMy4wMDA4IDExLjQgMjNIMTIuNkMxMy4wNDUzIDIzLjAwMDggMTMuNDc4MiAyMi44NTMgMTMuODMgMjIuNThMMTcuOTEgMTkuNEMxOS44NTc5IDE3Ljg4NTcgMjAuOTk4MSAxNS41NTczIDIxIDEzLjA5VjcuMjRDMjAuOTk5MyA2LjQ0NDYyIDIwLjY4MjggNS42ODIwNyAyMC4xMiA1LjEyWk0xOSAxMy4xMkMxOS4wMDc5IDE0Ljk3MjUgMTguMTQ5NyAxNi43MjIzIDE2LjY4IDE3Ljg1TDEyLjYgMjFIMTEuNEw3LjMyIDE3LjgyQzUuODUwMyAxNi42OTIzIDQuOTkyMDYgMTQuOTQyNSA1IDEzLjA5VjcuMjRDNS4wMDExIDYuOTc3NjYgNS4xMDUyNiA2LjcyNjI2IDUuMjkgNi41NEw4LjgzIDNIMTUuMTdMMTguNzEgNi41NEMxOC44OTQ3IDYuNzI2MjYgMTguOTk4OSA2Ljk3NzY2IDE5IDcuMjRWMTMuMTJaTTE1LjEyIDhDMTUuMzE0NCA3LjgwOTQzIDE1LjYyNTYgNy44MDk0MyAxNS44MiA4TDE2LjMyIDguNTJDMTYuNDE0NyA4LjYxMzg4IDE2LjQ2NzkgOC43NDE2OCAxNi40Njc5IDguODc1QzE2LjQ2NzkgOS4wMDgzMiAxNi40MTQ3IDkuMTM2MTIgMTYuMzIgOS4yM0wxMC43IDE0Ljg1QzEwLjYwOTMgMTQuOTQ2NyAxMC40ODI2IDE1LjAwMTUgMTAuMzUgMTUuMDAxNUMxMC4yMTc0IDE1LjAwMTUgMTAuMDkwNyAxNC45NDY3IDEwIDE0Ljg1TDcuNjUgMTIuNDlDNy41NTUzNCAxMi4zOTYxIDcuNTAyMSAxMi4yNjgzIDcuNTAyMSAxMi4xMzVDNy41MDIxIDEyLjAwMTcgNy41NTUzNCAxMS44NzM5IDcuNjUgMTEuNzhMOC4xOCAxMS4yNUM4LjI3MDczIDExLjE1MzMgOC4zOTc0MSAxMS4wOTg1IDguNTMgMTEuMDk4NUM4LjY2MjU5IDExLjA5ODUgOC43ODkyNyAxMS4xNTMzIDguODggMTEuMjVMMTAuMzggMTIuNzRMMTUuMTIgOFoiIGZpbGw9IiMxRTIyNDgiLz4KPC9nPgo8L3N2Zz4K");--w:24px;--h:24px;--x:0px;--y:0px} .i-server{--m:url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGlkPSJ0ZWNobm9sb2d5ICYjMzg7IGRhdGEgLyBjbG91ZF9vdXRsaW5lZCI+CjxwYXRoIGlkPSImIzI0MDsmIzE1OTsmIzE0MjsmIzE2ODsgSWNvbiBjb2xvciIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02IDEwQzYgNi42ODYgOC42ODcgNCAxMiA0QzE0Ljk3OSA0IDE3LjQ0NSA2LjE3NCAxNy45MTMgOS4wMjFDMjAuNzU3IDkuMjMzIDIzIDExLjYwMiAyMyAxNC41QzIzIDE3LjUzOCAyMC41MzcgMjAgMTcuNSAyMEg2QzMuMjM4IDIwIDEgMTcuNzYxIDEgMTVDMSAxMi4yMzkgMy4yMzggMTAgNiAxMFpNMTUuOTM5IDkuMzQ2QzE1LjYyMSA3LjQwNyAxMy45NjQgNiAxMiA2QzkuNzk0IDYgOCA3Ljc5NCA4IDEwVjExLjVDOCAxMS43NzYgNy43NzYgMTIgNy41IDEySDZDNC4xNSAxMiAyLjY4NiAxMy42ODMgMy4wNTkgMTUuNTk4QzMuMzM1IDE3LjAyMiA0LjY2OCAxOCA2LjExOSAxOEgxNy41QzE5LjYzOCAxOCAyMS4zMzQgMTYuMDc0IDIwLjk0NCAxMy44NjZDMjAuNjY0IDEyLjI3OSAxOS4yNjIgMTEuMTI3IDE3LjY1NCAxMS4wMDdMMTYuNTg4IDEwLjkyOEMxNi4zNTcgMTAuOTExIDE2LjE2OSAxMC43MzggMTYuMTMyIDEwLjUxTDE1LjkzOSA5LjM0NloiIGZpbGw9IiMxRTIyNDgiLz4KPC9nPgo8L3N2Zz4K");--w:24px;--h:24px;--x:0px;--y:0px} .i-download{--m:url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGlkPSJ1aSAvIGRvd25sb2FkX291dGxpbmVkIj4KPHBhdGggaWQ9IiYjMjQwOyYjMTU5OyYjMTQyOyYjMTY4OyBJY29uIGNvbG9yIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEyIDIyQzE3LjUyMjggMjIgMjIgMTcuNTIyOCAyMiAxMkMyMiA2LjQ3NzE1IDE3LjUyMjggMiAxMiAyQzYuNDc3MTUgMiAyIDYuNDc3MTUgMiAxMkMyIDE0LjY1MjIgMy4wNTM1NyAxNy4xOTU3IDQuOTI4OTMgMTkuMDcxMUM2LjgwNDMgMjAuOTQ2NCA5LjM0Nzg0IDIyIDEyIDIyWk0xMiA0QzE2LjQxODMgNCAyMCA3LjU4MTcyIDIwIDEyQzIwIDE2LjQxODMgMTYuNDE4MyAyMCAxMiAyMEM3LjU4MTcyIDIwIDQgMTYuNDE4MyA0IDEyQzQgNy41ODE3MiA3LjU4MTcyIDQgMTIgNFpNMTEuODEgMThDMTEuNjExNiAxNy45OTc3IDExLjQyMTcgMTcuOTE4OSAxMS4yOCAxNy43OEw4LjE1IDE0LjY1QzguMDU1MzQgMTQuNTU2MSA4LjAwMjEgMTQuNDI4MyA4LjAwMjEgMTQuMjk1QzguMDAyMSAxNC4xNjE3IDguMDU1MzQgMTQuMDMzOSA4LjE1IDEzLjk0TDguODYgMTMuMjNDOC45NTIxNiAxMy4xMzU5IDkuMDc4MzEgMTMuMDgyOSA5LjIxIDEzLjA4MjlDOS4zNDE2OSAxMy4wODI5IDkuNDY3ODQgMTMuMTM1OSA5LjU2IDEzLjIzTDExIDE0LjY3VjYuNUMxMSA2LjIyMzg2IDExLjIyMzkgNiAxMS41IDZIMTIuNUMxMi43NzYxIDYgMTMgNi4yMjM4NiAxMyA2LjVWMTQuNjdMMTQuNDQgMTMuMjJDMTQuNTMzOSAxMy4xMjUzIDE0LjY2MTcgMTMuMDcyMSAxNC43OTUgMTMuMDcyMUMxNC45MjgzIDEzLjA3MjEgMTUuMDU2MSAxMy4xMjUzIDE1LjE1IDEzLjIyTDE1Ljg1IDEzLjkzQzE1Ljk0NDcgMTQuMDIzOSAxNS45OTc5IDE0LjE1MTcgMTUuOTk3OSAxNC4yODVDMTUuOTk3OSAxNC40MTgzIDE1Ljk0NDcgMTQuNTQ2MSAxNS44NSAxNC42NEwxMi43MiAxNy43OEMxMi41Nzk1IDE3LjkyMDcgMTIuMzg4OCAxNy45OTk4IDEyLjE5IDE4SDExLjgxWiIgZmlsbD0iIzFFMjI0OCIvPgo8L2c+Cjwvc3ZnPgo=");--w:24px;--h:24px;--x:0px;--y:0px} .i-next{--m:url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjYuOTI3OSIgaGVpZ2h0PSIxMS45OTU4IiB2aWV3Qm94PSIwIDAgNi45Mjc5IDExLjk5NTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGlkPSImIzI0MDsmIzE1OTsmIzE0MjsmIzE2ODsgSWNvbiBjb2xvciIgZD0iTTYuNzA3OSA1LjI3NzlDNi44NDg1OSA1LjQxODQyIDYuOTI3NzIgNS42MDkwNSA2LjkyNzkgNS44MDc5VjYuMTg3OUM2LjkyNTYgNi4zODYzMSA2Ljg0Njc4IDYuNTc2MTggNi43MDc5IDYuNzE3OUwxLjU2NzkgMTEuODQ3OUMxLjQ3NDAyIDExLjk0MjYgMS4zNDYyMiAxMS45OTU4IDEuMjEyOSAxMS45OTU4QzEuMDc5NTggMTEuOTk1OCAwLjk1MTc4MiAxMS45NDI2IDAuODU3ODk5IDExLjg0NzlMMC4xNDc4OTkgMTEuMTM3OUMwLjA1MzgzNTEgMTEuMDQ1NyAwLjAwMDgyNzcyNiAxMC45MTk2IDAuMDAwODI3NzI2IDEwLjc4NzlDMC4wMDA4Mjc3MjYgMTAuNjU2MiAwLjA1MzgzNTEgMTAuNTMwMSAwLjE0Nzg5OSAxMC40Mzc5TDQuNTk3OSA1Ljk5NzlMMC4xNDc4OTkgMS41NTc5QzAuMDUzMjQyOCAxLjQ2NDAyIDAgMS4zMzYyMiAwIDEuMjAyOUMwIDEuMDY5NTggMC4wNTMyNDI4IDAuOTQxNzgyIDAuMTQ3ODk5IDAuODQ3ODk5TDAuODU3ODk5IDAuMTQ3ODk5QzAuOTUxNzgyIDAuMDUzMjQyOCAxLjA3OTU4IDAgMS4yMTI5IDBDMS4zNDYyMiAwIDEuNDc0MDIgMC4wNTMyNDI4IDEuNTY3OSAwLjE0Nzg5OUw2LjcwNzkgNS4yNzc5WiIgZmlsbD0iIzFFMjI0OCIvPgo8L3N2Zz4K");--w:6.9279px;--h:11.9958px;--x:9.072px;--y:6.0024px} .i-user{--m:url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGlkPSJ1c2VyIC8gdXNlcl9vdXRsaW5lZCI+CjxwYXRoIGlkPSImIzI0MDsmIzE1OTsmIzE0MjsmIzE2ODsgSWNvbiBjb2xvciIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNi4wMDQ1IDhDMTYuMDA0NSAxMC4yMDkxIDE0LjIxMyAxMiAxMi4wMDMgMTJDOS43OTMwNSAxMiA4LjAwMTUxIDEwLjIwOTEgOC4wMDE1MSA4QzguMDAxNTEgNS43OTA4NiA5Ljc5MzA1IDQgMTIuMDAzIDRDMTQuMjEzIDQgMTYuMDA0NSA1Ljc5MDg2IDE2LjAwNDUgOFpNMTQuMDAzOCA4QzE0LjAwMzggNi44OTU0MyAxMy4xMDggNiAxMi4wMDMgNkMxMC44OTggNiAxMC4wMDIzIDYuODk1NDMgMTAuMDAyMyA4QzEwLjAwMjMgOS4xMDQ1NyAxMC44OTggMTAgMTIuMDAzIDEwQzEzLjEwOCAxMCAxNC4wMDM4IDkuMTA0NTcgMTQuMDAzOCA4Wk0xOS44OTYgMTguNTVMMTguMDA1MyAxNC42NkMxNy40ODg0IDEzLjYyNDUgMTYuNDIxOCAxMi45Nzg1IDE1LjI2NDMgMTNIOC43NDE3OUM3LjYwMjI2IDEyLjk5NzggNi41NTk3NiAxMy42NDA4IDYuMDUwNzcgMTQuNjZMNC4xMTAwNCAxOC41NUMzLjk1NDAxIDE4Ljg1OTUgMy45Njk0NCAxOS4yMjc3IDQuMTUwODIgMTkuNTIzMUM0LjMzMjIgMTkuODE4NSA0LjY1MzY1IDE5Ljk5OSA1LjAwMDM4IDIwSDE5LjAwNTdDMTkuMzUyNCAxOS45OTkgMTkuNjczOSAxOS44MTg1IDE5Ljg1NTIgMTkuNTIzMUMyMC4wMzY2IDE5LjIyNzcgMjAuMDUyIDE4Ljg1OTUgMTkuODk2IDE4LjU1Wk03Ljg0MTQ1IDE1LjU1TDYuNjIwOTkgMThIMTcuMzg1MUwxNi4xNjQ2IDE1LjU1QzE1Ljk5MzUgMTUuMjEwNSAxNS42NDQ2IDE0Ljk5NzQgMTUuMjY0MyAxNUg4Ljc0MTc5QzguMzYxNDkgMTQuOTk3NCA4LjAxMjU4IDE1LjIxMDUgNy44NDE0NSAxNS41NVoiIGZpbGw9IiMxRTIyNDgiLz4KPC9nPgo8L3N2Zz4K");--w:24px;--h:24px;--x:0px;--y:0px} .i-segments{--m:url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGlkPSJ1aSAvIHNlZ21lbnQtMSI+CjxwYXRoIGlkPSJVbmlvbiIgZD0iTTIxLjEwMjUgMy4wMDQ4OEMyMS42MDY3IDMuMDU2MjEgMjIgMy40ODIzMiAyMiA0VjhMMjEuOTk1MSA4LjEwMjU0QzIxLjk0NzIgOC41NzI5NyAyMS41NzMgOC45NDcyMiAyMS4xMDI1IDguOTk1MTJMMjEgOUgxNkwxNS44OTc1IDguOTk1MTJDMTUuNDI3IDguOTQ3MjIgMTUuMDUyOCA4LjU3Mjk3IDE1LjAwNDkgOC4xMDI1NEwxNSA4VjdIMTNWMTdIMTVWMTZDMTUgMTUuNDgyMyAxNS4zOTMzIDE1LjA1NjIgMTUuODk3NSAxNS4wMDQ5TDE2IDE1SDIxTDIxLjEwMjUgMTUuMDA0OUMyMS42MDY3IDE1LjA1NjIgMjIgMTUuNDgyMyAyMiAxNlYyMEwyMS45OTUxIDIwLjEwMjVDMjEuOTQ3MiAyMC41NzMgMjEuNTczIDIwLjk0NzIgMjEuMTAyNSAyMC45OTUxTDIxIDIxSDE2TDE1Ljg5NzUgMjAuOTk1MUMxNS40MjcgMjAuOTQ3MiAxNS4wNTI4IDIwLjU3MyAxNS4wMDQ5IDIwLjEwMjVMMTUgMjBWMTlIMTNDMTEuODk1NCAxOSAxMSAxOC4xMDQ2IDExIDE3VjEzSDlWMTRMOC45OTUxMiAxNC4xMDI1QzguOTQ3MjIgMTQuNTczIDguNTcyOTcgMTQuOTQ3MiA4LjEwMjU0IDE0Ljk5NTFMOCAxNUgzTDIuODk3NDYgMTQuOTk1MUMyLjQyNzAzIDE0Ljk0NzIgMi4wNTI3OCAxNC41NzMgMi4wMDQ4OCAxNC4xMDI1TDIgMTRWMTBDMiA5LjQ4MjMyIDIuMzkzMzMgOS4wNTYyMSAyLjg5NzQ2IDkuMDA0ODhMMyA5SDhMOC4xMDI1NCA5LjAwNDg4QzguNjA2NjcgOS4wNTYyMSA5IDkuNDgyMzIgOSAxMFYxMUgxMVY3QzExIDUuODk1NDMgMTEuODk1NCA1IDEzIDVIMTVWNEMxNSAzLjQ4MjMyIDE1LjM5MzMgMy4wNTYyMSAxNS44OTc1IDMuMDA0ODhMMTYgM0gyMUwyMS4xMDI1IDMuMDA0ODhaTTE3IDE5SDIwVjE3SDE3VjE5Wk00IDEzSDdWMTFINFYxM1pNMTcgN0gyMFY1SDE3VjdaIiBmaWxsPSIjMUUyMjQ4Ii8+CjwvZz4KPC9zdmc+Cg==");--w:24px;--h:24px;--x:0px;--y:0px} .i-grid{--m:url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGlkPSJ1aSAvIGdyaWRfb3V0bGluZWQiPgo8cGF0aCBpZD0iJiMyNDA7JiMxNTk7JiMxNDI7JiMxNjg7IEljb24gY29sb3IiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTQgMTFIMjBDMjAuNTUyMyAxMSAyMSAxMC41NTIzIDIxIDEwVjRDMjEgMy40NDc3MiAyMC41NTIzIDMgMjAgM0gxNEMxMy40NDc3IDMgMTMgMy40NDc3MiAxMyA0VjEwQzEzIDEwLjU1MjMgMTMuNDQ3NyAxMSAxNCAxMVpNMTEgNFYxMEMxMSAxMC41NTIzIDEwLjU1MjMgMTEgMTAgMTFINEMzLjQ0NzcxIDExIDMgMTAuNTUyMyAzIDEwVjRDMyAzLjQ0NzcyIDMuNDQ3NzEgMyA0IDNIMTBDMTAuNTUyMyAzIDExIDMuNDQ3NzIgMTEgNFpNMTEgMjBWMTRDMTEgMTMuNDQ3NyAxMC41NTIzIDEzIDEwIDEzSDRDMy40NDc3MSAxMyAzIDEzLjQ0NzcgMyAxNFYyMEMzIDIwLjU1MjMgMy40NDc3MSAyMSA0IDIxSDEwQzEwLjU1MjMgMjEgMTEgMjAuNTUyMyAxMSAyMFpNMjEgMTRWMjBDMjEgMjAuNTUyMyAyMC41NTIzIDIxIDIwIDIxSDE0QzEzLjQ0NzcgMjEgMTMgMjAuNTUyMyAxMyAyMFYxNEMxMyAxMy40NDc3IDEzLjQ0NzcgMTMgMTQgMTNMMjAgMTNDMjAuNTUyMyAxMyAyMSAxMy40NDc3IDIxIDE0Wk05IDUuNVY4LjVDOSA4Ljc3NjE0IDguNzc2MTQgOSA4LjUgOUg1LjVDNS4yMjM4NiA5IDUgOC43NzYxNCA1IDguNVY1LjVDNSA1LjIyMzg2IDUuMjIzODYgNSA1LjUgNUg4LjVDOC43NzYxNCA1IDkgNS4yMjM4NiA5IDUuNVpNMTkgOC41VjUuNUMxOSA1LjIyMzg2IDE4Ljc3NjEgNSAxOC41IDVIMTUuNUMxNS4yMjM5IDUgMTUgNS4yMjM4NiAxNSA1LjVWOC41QzE1IDguNzc2MTQgMTUuMjIzOSA5IDE1LjUgOUgxOC41QzE4Ljc3NjEgOSAxOSA4Ljc3NjE0IDE5IDguNVpNMTkgMTUuNVYxOC41QzE5IDE4Ljc3NjEgMTguNzc2MSAxOSAxOC41IDE5SDE1LjVDMTUuMjIzOSAxOSAxNSAxOC43NzYxIDE1IDE4LjVWMTUuNUMxNSAxNS4yMjM5IDE1LjIyMzkgMTUgMTUuNSAxNUgxOC41QzE4Ljc3NjEgMTUgMTkgMTUuMjIzOSAxOSAxNS41Wk05IDE4LjVWMTUuNUM5IDE1LjIyMzkgOC43NzYxNCAxNSA4LjUgMTVINS41QzUuMjIzODYgMTUgNSAxNS4yMjM5IDUgMTUuNVYxOC41QzUgMTguNzc2MSA1LjIyMzg2IDE5IDUuNSAxOUg4LjVDOC43NzYxNCAxOSA5IDE4Ljc3NjEgOSAxOC41WiIgZmlsbD0iIzFFMjI0OCIvPgo8L2c+Cjwvc3ZnPgo=");--w:24px;--h:24px;--x:0px;--y:0px} .i-chevron-down{--m:url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjExLjk5NTgiIGhlaWdodD0iNi45Mjc5IiB2aWV3Qm94PSIwIDAgMTEuOTk1OCA2LjkyNzkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGlkPSImIzI0MDsmIzE1OTsmIzE0MjsmIzE2ODsgSWNvbiBjb2xvciIgZD0iTTYuNzE3OSA2LjcwNzlDNi41NzczOCA2Ljg0ODU5IDYuMzg2NzQgNi45Mjc3MiA2LjE4NzkgNi45Mjc5SDUuODA3OUM1LjYwOTQ4IDYuOTI1NiA1LjQxOTYyIDYuODQ2NzggNS4yNzc5IDYuNzA3OUwwLjE0Nzg5OSAxLjU2NzlDMC4wNTMyNDI4IDEuNDc0MDIgMCAxLjM0NjIyIDAgMS4yMTI5QzAgMS4wNzk1OCAwLjA1MzI0MjggMC45NTE3ODIgMC4xNDc4OTkgMC44NTc4OTlMMC44NTc4OTkgMC4xNDc4OTlDMC45NTAwNjMgMC4wNTM4MzUxIDEuMDc2MjEgMC4wMDA4Mjc3MjYgMS4yMDc5IDAuMDAwODI3NzI2QzEuMzM5NTkgMC4wMDA4Mjc3MjYgMS40NjU3NCAwLjA1MzgzNTEgMS41NTc5IDAuMTQ3ODk5TDUuOTk3OSA0LjU5NzlMMTAuNDM3OSAwLjE0Nzg5OUMxMC41MzE4IDAuMDUzMjQyOCAxMC42NTk2IDAgMTAuNzkyOSAwQzEwLjkyNjIgMCAxMS4wNTQgMC4wNTMyNDI4IDExLjE0NzkgMC4xNDc4OTlMMTEuODQ3OSAwLjg1Nzg5OUMxMS45NDI2IDAuOTUxNzgyIDExLjk5NTggMS4wNzk1OCAxMS45OTU4IDEuMjEyOUMxMS45OTU4IDEuMzQ2MjIgMTEuOTQyNiAxLjQ3NDAyIDExLjg0NzkgMS41Njc5TDYuNzE3OSA2LjcwNzlaIiBmaWxsPSIjMUUyMjQ4Ii8+Cjwvc3ZnPgo=");--w:11.9958px;--h:6.9279px;--x:6.0024px;--y:9.072px} .i-settings{--m:url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGlkPSJ1aSAvIHNldHRpbmdzX291dGxpbmVkIj4KPHBhdGggaWQ9IiYjMjQwOyYjMTU5OyYjMTQyOyYjMTY4OyBJY29uIGNvbG9yIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTIwLjIxIDE0LjA3NDFDMTkuNzI0OSAxMy42NzA3IDE5LjQ1ODEgMTMuMDYxNyAxOS40OSAxMi40MzA5VjEyVjExLjU2OTFDMTkuNDU4MSAxMC45MzgzIDE5LjcyNDkgMTAuMzI5MyAyMC4yMSA5LjkyNTg3TDIxLjAxIDkuMjY0NTVDMjEuMzg2MiA4Ljk1MzM2IDIxLjQ4MzQgOC40MTU2MyAyMS4yNCA3Ljk5MjAyTDIwLjA4IDUuOTg4MDNDMTkuOTAyNCA1LjY3OTg3IDE5LjU3NTEgNS40ODkxOCAxOS4yMiA1LjQ4NzAzQzE5LjA5OTcgNS40ODUwMiAxOC45ODAzIDUuNTA4OTQgMTguODcgNS41NTcxN0wxNy44NyA1LjkxNzg5QzE3LjY0NyA2LjAwNTM1IDE3LjQwOTUgNi4wNDk1NSAxNy4xNyA2LjA0ODE1QzE2Ljc4NjggNi4wNDcxNSAxNi40MTE5IDUuOTM1ODYgMTYuMDkgNS43Mjc1MUMxNS44NTQ5IDUuNTY0NzggMTUuNjA3NSA1LjQyMDcyIDE1LjM1IDUuMjk2NjVDMTQuNzg3MyA1LjAwNzUgMTQuMzk0MiA0LjQ2ODczIDE0LjI5IDMuODQzNzZMMTQuMTIgMi44NDE3NkMxNC4wNDA4IDIuMzUxNzMgMTMuNjE1NCAxLjk5MzcgMTMuMTIgMi4wMDAwOEgxMC44MkMxMC4zMjQ2IDEuOTkzNyA5Ljg5OTIzIDIuMzUxNzMgOS44MiAyLjg0MTc2TDkuNjUgMy44NDM3NkM5LjU1NDQ5IDQuNDYwODQgOS4xNzczNSA0Ljk5ODA0IDguNjMgNS4yOTY2NUM4LjM3MjUgNS40MjA3MiA4LjEyNTA4IDUuNTY0NzggNy44OSA1LjcyNzUxQzcuNTY4MDkgNS45MzU4NiA3LjE5MzIyIDYuMDQ3MTUgNi44MSA2LjA0ODE1QzYuNTcwNTQgNi4wNDk1NSA2LjMzMjk5IDYuMDA1MzUgNi4xMSA1LjkxNzg5TDUuMTEgNS41NTcxN0M0Ljk5OTcgNS41MDg5NCA0Ljg4MDMzIDUuNDg1MDIgNC43NiA1LjQ4NzAzQzQuNDA0ODkgNS40ODkxOCA0LjA3NzU1IDUuNjc5ODcgMy45IDUuOTg4MDNMMi43NiA3Ljk5MjAyQzIuNTE4OTMgOC40MTc5NyAyLjYyMDQyIDguOTU2MTIgMyA5LjI2NDU1TDMuOCA5LjkyNTg3QzQuMjg1MDUgMTAuMzI5MyA0LjU1MTg3IDEwLjkzODMgNC41MiAxMS41NjkxVjEyVjEyLjQzMDlDNC41NTE4NyAxMy4wNjE3IDQuMjg1MDUgMTMuNjcwNyAzLjggMTQuMDc0MUwzIDE0LjczNTRDMi42MjA0MiAxNS4wNDM5IDIuNTE4OTMgMTUuNTgyIDIuNzYgMTYuMDA4TDMuOTIgMTguMDEyQzQuMDk3NTUgMTguMzIwMSA0LjQyNDg5IDE4LjUxMDggNC43OCAxOC41MTNDNC45MDAzMyAxOC41MTUgNS4wMTk3IDE4LjQ5MTEgNS4xMyAxOC40NDI4TDYuMTMgMTguMDgyMUM2LjM1Mjk5IDE3Ljk5NDcgNi41OTA1NCAxNy45NTA0IDYuODMgMTcuOTUxOUM3LjIxMzIyIDE3Ljk1MjggNy41ODgwOSAxOC4wNjQxIDcuOTEgMTguMjcyNUM4LjE0NTA4IDE4LjQzNTIgOC4zOTI1IDE4LjU3OTMgOC42NSAxOC43MDM0QzkuMjEyNyAxOC45OTI1IDkuNjA1NzggMTkuNTMxMyA5LjcxIDIwLjE1NjJMOS44OCAyMS4xNTgyQzkuOTU5MjMgMjEuNjQ4MyAxMC4zODQ2IDIyLjAwNjMgMTAuODggMjEuOTk5OUgxMy4xOEMxMy42NzU0IDIyLjAwNjMgMTQuMTAwOCAyMS42NDgzIDE0LjE4IDIxLjE1ODJMMTQuMzUgMjAuMTU2MkMxNC40NTQyIDE5LjUzMTMgMTQuODQ3MyAxOC45OTI1IDE1LjQxIDE4LjcwMzRDMTUuNjY3NSAxOC41NzkzIDE1LjkxNDkgMTguNDM1MiAxNi4xNSAxOC4yNzI1QzE2LjQ3MTkgMTguMDY0MSAxNi44NDY4IDE3Ljk1MjggMTcuMjMgMTcuOTUxOUMxNy40Njk1IDE3Ljk1MDQgMTcuNzA3IDE3Ljk5NDcgMTcuOTMgMTguMDgyMUwxOC45MyAxOC40NDI4QzE5LjA0MDMgMTguNDkxMSAxOS4xNTk3IDE4LjUxNSAxOS4yOCAxOC41MTNDMTkuNjM1MSAxOC41MTA4IDE5Ljk2MjQgMTguMzIwMSAyMC4xNCAxOC4wMTJMMjEuMyAxNi4wMDhDMjEuNTI4MSAxNS41Njc5IDIxLjQwMDUgMTUuMDI2OCAyMSAxNC43MzU0TDIwLjIxIDE0LjA3NDFaTTEyIDE3LjUxMUM4Ljk2MjQzIDE3LjUxMSA2LjUgMTUuMDQzNiA2LjUgMTJDNi41IDguOTU2MzcgOC45NjI0MyA2LjQ4OTAyIDEyIDYuNDg5MDJDMTUuMDM3NiA2LjQ4OTAyIDE3LjUgOC45NTYzNyAxNy41IDEyQzE3LjUgMTMuNDYxNiAxNi45MjA1IDE0Ljg2MzMgMTUuODg5MSAxNS44OTY4QzE0Ljg1NzYgMTYuOTMwNCAxMy40NTg3IDE3LjUxMSAxMiAxNy41MTFaTTEwIDEyQzEwIDEwLjg5MzIgMTAuODk1NCA5Ljk5NjAxIDEyIDkuOTk2MDFDMTMuMTA0NiA5Ljk5NjAxIDE0IDEwLjg5MzIgMTQgMTJDMTQgMTMuMTA2OCAxMy4xMDQ2IDE0LjAwNCAxMiAxNC4wMDRDMTAuODk1NCAxNC4wMDQgMTAgMTMuMTA2OCAxMCAxMloiIGZpbGw9IiMxRTIyNDgiLz4KPC9nPgo8L3N2Zz4K");--w:24px;--h:24px;--x:0px;--y:0px} .i-calendar{--m:url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGlkPSJhY3Rpb25zIC8gY2FsZW5kYXIiPgo8cGF0aCBpZD0iJiMyNDA7JiMxNTk7JiMxNDI7JiMxNjg7IEljb24gY29sb3IiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTggNEgxOUMyMC4xMDQ2IDQgMjEgNC44OTU0MyAyMSA2VjE5QzIxIDIwLjEwNDYgMjAuMTA0NiAyMSAxOSAyMUg1QzMuODk1NDMgMjEgMyAyMC4xMDQ2IDMgMTlWNkMzIDQuODk1NDMgMy44OTU0MyA0IDUgNEg2VjIuNUM2IDIuMjIzODYgNi4yMjM4NiAyIDYuNSAySDcuNUM3Ljc3NjE0IDIgOCAyLjIyMzg2IDggMi41VjRIMTZWMi41QzE2IDIuMjIzODYgMTYuMjIzOSAyIDE2LjUgMkgxNy41QzE3Ljc3NjEgMiAxOCAyLjIyMzg2IDE4IDIuNVY0Wk01IDE5SDE5VjhINVYxOVoiIGZpbGw9IiMxRTIyNDgiLz4KPC9nPgo8L3N2Zz4K");--w:24px;--h:24px;--x:0px;--y:0px} .i-lupa{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBkPSdNMTAuNSAzYTcuNSA3LjUgMCAwIDEgNS45NiAxMi4wNWw0LjI1IDQuMjQtMS40MiAxLjQyLTQuMjQtNC4yNUE3LjUgNy41IDAgMSAxIDEwLjUgM1ptMCAyYTUuNSA1LjUgMCAxIDAgMCAxMSA1LjUgNS41IDAgMCAwIDAtMTFaJy8+PC9zdmc+");--w:24px;--h:24px;--x:0px;--y:0px} .i-consola{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBkPSdNNCA0aDE2YTIgMiAwIDAgMSAyIDJ2MTJhMiAyIDAgMCAxLTIgMkg0YTIgMiAwIDAgMS0yLTJWNmEyIDIgMCAwIDEgMi0yWm0wIDJ2MTJoMTZWNkg0WicvPjxwYXRoIGQ9J002LjMgOS4yIDcuNyA3LjggMTEuOSAxMmwtNC4yIDQuMi0xLjQtMS40TDkuMSAxMiA2LjMgOS4yWk0xMi41IDE0LjVoNS41djJoLTUuNXonLz48L3N2Zz4=");--w:24px;--h:24px;--x:0px;--y:0px} .i-candado{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjMDAwJyBzdHJva2Utd2lkdGg9JzInIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PHJlY3QgeD0nNC41JyB5PScxMC41JyB3aWR0aD0nMTUnIGhlaWdodD0nMTAnIHJ4PScyLjUnLz48cGF0aCBkPSdNOCAxMC41VjcuNWE0IDQgMCAwIDEgOCAwdjMnLz48cGF0aCBkPSdNMTIgMTQuNXYyJy8+PC9zdmc+");--w:24px;--h:24px;--x:0px;--y:0px} .i-casa{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjMDAwJyBzdHJva2Utd2lkdGg9JzInIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PHBhdGggZD0nTTQgMTEuNSAxMiA0LjVsOCA3VjE5YTEgMSAwIDAgMS0xIDFoLTQuNXYtNS41aC01VjIwSDVhMSAxIDAgMCAxLTEtMXonLz48L3N2Zz4=");--w:24px;--h:24px;--x:0px;--y:0px} .i-bandeja{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjMDAwJyBzdHJva2Utd2lkdGg9JzInIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PHBhdGggZD0nTTQgMTMuNSA2LjYgNmgxMC44bDIuNiA3LjVWMTlhMSAxIDAgMCAxLTEgMUg1YTEgMSAwIDAgMS0xLTF6Jy8+PHBhdGggZD0nTTQgMTMuNWg0LjZsMS40IDIuNWg0bDEuNC0yLjVIMjAnLz48L3N2Zz4=");--w:24px;--h:24px;--x:0px;--y:0px} .i-reloj{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjMDAwJyBzdHJva2Utd2lkdGg9JzInIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PGNpcmNsZSBjeD0nMTInIGN5PScxMicgcj0nOC41Jy8+PHBhdGggZD0nTTEyIDcuNVYxMmwzIDInLz48L3N2Zz4=");--w:24px;--h:24px;--x:0px;--y:0px} .i-alerta{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjMDAwJyBzdHJva2Utd2lkdGg9JzInIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PHBhdGggZD0nTTEwLjMgNC42IDMuMiAxN2EyIDIgMCAwIDAgMS43IDNoMTQuMmEyIDIgMCAwIDAgMS43LTNMMTMuNyA0LjZhMiAyIDAgMCAwLTMuNCAweicvPjxwYXRoIGQ9J00xMiA5LjV2NE0xMiAxN2guMDEnLz48L3N2Zz4=");--w:24px;--h:24px;--x:0px;--y:0px} .i-marca{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjMDAwJyBzdHJva2Utd2lkdGg9JzIuNCcgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48cGF0aCBkPSdNNS41IDEyLjRsNC4zIDQuMyA4LjctOC44Jy8+PC9zdmc+");--w:24px;--h:24px;--x:0px;--y:0px} /* ============ Tokens. Light: Omnica Web Library 2.0. Dark: our own adaptation, without halos ============ */ :root { --font: Gilroy, -apple-system, 'Segoe UI', system-ui, sans-serif; --mono: ui-monospace, 'Cascadia Mono', Consolas, 'SF Mono', monospace; --bg: #F4F6F8; --sup: #FFFFFF; --sup2: #F9FAFB; --sup3: #EEF1F3; --hover: #F3F5F7; --linea: #E2E6EB; --linea2: #CDD3DB; --tinta: #1E2248; --suave: #5E6A7B; --tenue: #8792A2; --azul: #005EEB; --azul-h: #0052CC; --azul-s: #EDF4FF; --azul-s2: #DCE9FF; --azul-tinta: #0047B3; --pri-a: #0A6CFF; --pri-b: #005BD5; --pri-tinta: #FFFFFF; --bien-f: #E9FBF6; --bien: #11654A; --bien-p: #19A97B; --mal-f: #FFEDED; --mal: #B42335; --mal-p: #E5484D; --relleno-rojo: #B42335; --aviso-f: #FFF6E8; --aviso: #965601; --aviso-p: #E99A2C; --morado: #6528D7; --morado-f: #F1EBFC; --nav: #1E2248; --nav-tinta: #BCC3E0; --sh1: 0 1px 2px rgba(30, 34, 72, .06), 0 1px 3px rgba(30, 34, 72, .06); --sh-ind: 0 0 0 1px rgba(30, 34, 72, .07), 0 0 3px rgba(30, 34, 72, .08); --sh2: 0 6px 16px -4px rgba(30, 34, 72, .12), 0 2px 4px -2px rgba(30, 34, 72, .06); --sh3: 0 24px 48px -12px rgba(30, 34, 72, .24), 0 4px 8px -4px rgba(30, 34, 72, .08); --velo: rgba(22, 26, 52, .32); --sombra-cajon: -24px 0 64px rgba(30, 34, 72, .16); --ease: cubic-bezier(.22, 1, .36, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0F141F; --sup: #171E2C; --sup2: #141A27; --sup3: #212A3B; --hover: #1C2434; --linea: #2B3547; --linea2: #3D4A60; --tinta: #EEF1F7; --suave: #AEB9CB; --tenue: #7F8BA0; --azul: #8EC0FF; --azul-h: #AFD3FF; --azul-s: #1B2E4C; --azul-s2: #22395E; --azul-tinta: #B4D6FF; --pri-a: #A9D0FF; --pri-b: #86B6F2; --pri-tinta: #10223A; --bien-f: #12322E; --bien: #74D9B8; --bien-p: #3CCB9C; --mal-f: #3E2230; --mal: #FF8A8A; --mal-p: #FF7A7A; --relleno-rojo: #C92A3A; --aviso-f: #3B321D; --aviso: #FFCF87; --aviso-p: #F2B54E; --morado: #B79BFF; --morado-f: #30264A; --nav: #141A27; --nav-tinta: #C9D3EA; --sh1: 0 1px 2px rgba(0, 0, 0, .3); --sh-ind: 0 0 0 1px rgba(255, 255, 255, .07); --sh2: 0 6px 16px -4px rgba(0, 0, 0, .45), 0 2px 4px -2px rgba(0, 0, 0, .3); --sh3: 0 24px 48px -12px rgba(0, 0, 0, .6), 0 4px 8px -4px rgba(0, 0, 0, .35); --velo: rgba(4, 7, 13, .6); --sombra-cajon: -30px 0 80px rgba(0, 0, 0, .45); color-scheme: dark; } } :root[data-theme="dark"] { --bg: #0F141F; --sup: #171E2C; --sup2: #141A27; --sup3: #212A3B; --hover: #1C2434; --linea: #2B3547; --linea2: #3D4A60; --tinta: #EEF1F7; --suave: #AEB9CB; --tenue: #7F8BA0; --azul: #8EC0FF; --azul-h: #AFD3FF; --azul-s: #1B2E4C; --azul-s2: #22395E; --azul-tinta: #B4D6FF; --pri-a: #A9D0FF; --pri-b: #86B6F2; --pri-tinta: #10223A; --bien-f: #12322E; --bien: #74D9B8; --bien-p: #3CCB9C; --mal-f: #3E2230; --mal: #FF8A8A; --mal-p: #FF7A7A; --relleno-rojo: #C92A3A; --aviso-f: #3B321D; --aviso: #FFCF87; --aviso-p: #F2B54E; --morado: #B79BFF; --morado-f: #30264A; --nav: #141A27; --nav-tinta: #C9D3EA; --sh1: 0 1px 2px rgba(0, 0, 0, .3); --sh-ind: 0 0 0 1px rgba(255, 255, 255, .07); --sh2: 0 6px 16px -4px rgba(0, 0, 0, .45), 0 2px 4px -2px rgba(0, 0, 0, .3); --sh3: 0 24px 48px -12px rgba(0, 0, 0, .6), 0 4px 8px -4px rgba(0, 0, 0, .35); --velo: rgba(4, 7, 13, .6); --sombra-cajon: -30px 0 80px rgba(0, 0, 0, .45); color-scheme: dark; } .solo-oscuro { display: none !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .solo-oscuro { display: inline-block !important; } :root:not([data-theme="light"]) .solo-claro { display: none !important; } } :root[data-theme="dark"] .solo-oscuro { display: inline-block !important; } :root[data-theme="dark"] .solo-claro { display: none !important; } /* ============ Base ============ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--bg); color: var(--tinta); font: 15px/22px var(--font); letter-spacing: -.2px; -webkit-font-smoothing: antialiased; } button, input, textarea { font: inherit; color: inherit; letter-spacing: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; } a { color: var(--azul); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 6px; } [hidden] { display: none !important; } h1, h2, h3 { margin: 0; text-wrap: balance; } ul, ol { margin: 0; padding: 0; list-style: none; } p { margin: 0; } .oculto, .oculto-ico { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .oculto-ico { display: none !important; } .mono { font-family: var(--mono); letter-spacing: 0; font-size: .92em; } kbd { font: 600 11px/16px var(--mono); padding: 1px 6px; border-radius: 5px; border: 1px solid var(--linea2); background: var(--sup); color: var(--suave); } /* The theme change: the new one opens in a circle from the button pressed (arranque.js, aplicarTema); no fades. */ html.tema-vt::view-transition-old(root), html.tema-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; } html.tema-vt::view-transition-old(root) { z-index: 1; } html.tema-vt::view-transition-new(root) { z-index: 2; } /* Omnica icons: the original SVG as a mask, in the theme's colour */ .i { --s: 1; display: inline-block; flex: 0 0 auto; width: calc(24px * var(--s)); height: calc(24px * var(--s)); background: currentColor; -webkit-mask: var(--m) no-repeat; mask: var(--m) no-repeat; -webkit-mask-size: calc(var(--w) * var(--s)) calc(var(--h) * var(--s)); mask-size: calc(var(--w) * var(--s)) calc(var(--h) * var(--s)); -webkit-mask-position: calc(var(--x) * var(--s)) calc(var(--y) * var(--s)); mask-position: calc(var(--x) * var(--s)) calc(var(--y) * var(--s)); } .marca-ok { position: relative; display: inline-block; width: 14px; height: 14px; flex: 0 0 auto; } .marca-ok::after { content: ''; position: absolute; left: 4px; top: 0; width: 5px; height: 10px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); } /* ============ Movimiento ============ */ .ind { position: absolute; left: 0; top: 0; z-index: 0; width: var(--w, 0); height: var(--h, 0); transform: translate(var(--x, 0), var(--y, 0)); pointer-events: none; transition: transform .42s var(--ease), width .42s var(--ease), height .42s var(--ease), opacity .2s; } .ind.sin-trans { transition: none !important; } .ind.ind-fuera { opacity: 0; } [data-desliza] { position: relative; isolation: isolate; } [data-desliza] > :not(.ind) { position: relative; z-index: 1; } @keyframes sube { from { opacity: 0; transform: translateY(8px); } } @keyframes aparece { from { opacity: 0; } } @keyframes crece { from { width: 0; } } @keyframes revela { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes anillo-in { from { stroke-dashoffset: 100; } } @keyframes brillo { 0% { background-position: -240px 0; } 100% { background-position: 240px 0; } } @keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @keyframes gira { to { transform: rotate(360deg); } } .entra .cab { animation: sube .45s var(--ease) both; } .entra .herramientas, .entra .pestanas, .entra .metricas { animation: sube .45s .04s var(--ease) both; } .entra .tabla-caja, .entra .dos-col, .entra .paginador, .entra .tarjeta, .entra .bento, .entra .rejilla-ases, .entra .temas, .entra .grupo, .entra .mapa, .entra .d3-doble, .entra .filtros-reg { animation: sube .5s .07s var(--ease) both; } .entra tbody tr, .entra .tsub, .entra .fila-a, .entra .d3-item, .entra .met, .entra .ases, .entra .bt, .entra .bloque { animation: sube .5s var(--ease) both; animation-delay: calc(min(var(--n, 0), 12) * 30ms + 60ms); } .entra .barra i, .aparece .barra i { animation: crece 1s .12s var(--ease) both; } .entra .an-v, .aparece .an-v { animation: anillo-in 1.1s .12s var(--ease) both; } .entra .chispa, .entra .grafica svg, .aparece .chispa, .aparece .grafica svg { animation: revela 1.2s .15s var(--ease-io) both; } .aparece { animation: sube .38s var(--ease) both; } .abre { animation: entra-lado .46s var(--ease) both; } .cambia > * { animation: sube .35s var(--ease) both; } @keyframes entra-lado { from { opacity: 0; transform: translateX(28px); } } .quieto *, .quieto *::before, .quieto *::after { animation: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } ::view-transition-old(root) { animation: 160ms ease both vt-sale; } ::view-transition-new(root) { animation: 340ms var(--ease) both vt-entra; } @keyframes vt-sale { to { opacity: 0; } } @keyframes vt-entra { from { opacity: 0; transform: translateY(6px); } } ::view-transition-group(compartido) { animation-duration: 440ms; animation-timing-function: var(--ease); } ::view-transition-old(compartido), ::view-transition-new(compartido) { height: 100%; width: auto; } /* ============ Botones ============ */ .b { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 6px; white-space: nowrap; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -.15px; transition: background .2s, box-shadow .2s, transform .16s var(--ease), border-color .2s, color .2s; } .b .i { --s: .75; } .b-pri { background: linear-gradient(180deg, var(--pri-a), var(--pri-b)); color: var(--pri-tinta); box-shadow: 0 1px 2px rgba(0, 72, 180, .22), inset 0 1px 0 rgba(255, 255, 255, .16); } .b-pri:hover { background: linear-gradient(180deg, var(--azul-h), var(--azul-h)); } .b-sec { background: var(--sup); border: 1px solid var(--linea2); color: var(--tinta); box-shadow: var(--sh1); } .b-sec:hover { background: var(--hover); border-color: var(--tenue); } .b-fantasma { color: var(--suave); } .b-fantasma:hover { background: var(--hover); color: var(--tinta); } /* The filled red always goes with --relleno-rojo (simlatech.ai's): 4.5:1 or more under white letters. */ .b-peligro { background: var(--relleno-rojo); color: #fff; } .b-bien { background: var(--bien-f); color: var(--bien); } .b-discontinuo { border-style: dashed; color: var(--suave); box-shadow: none; } .b-discontinuo:hover { color: var(--azul); border-color: var(--azul); background: var(--azul-s); } .b:active:not(:disabled), .bi:active, .nav-op:active, .pild:active, .dk-vers button:active { transform: scale(.97); } /* What is disabled reads (#67, #69, 0.11.2): a disabled button goes grey at full opacity, never its colour at 45% (2.1:1 in light, 2.9:1 in dark); it wins over each variant and its hover. A button that is working (.cargando) is busy, not disabled: it keeps its colour */ .b:disabled:not(.cargando) { opacity: 1; cursor: not-allowed; color: var(--suave) !important; background: var(--sup2) !important; border-color: var(--linea) !important; box-shadow: none !important; } .b:disabled:not(.cargando) .i { color: var(--tenue) !important; } .b.b-fantasma:disabled:not(.cargando) { background: transparent !important; border-color: transparent !important; color: var(--tenue) !important; } .b.cargando:disabled { opacity: 1; cursor: progress; } .b-ancho { width: 100%; } .b-alto { height: 42px; font-size: 15px; } .b.cargando { color: transparent; position: relative; } .b.cargando::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--pri-tinta); border-right-color: transparent; animation: gira .7s linear infinite; } /* on a button without a coloured background the spinner goes blue (white on white was not seen, #69) */ .b.cargando:not(.b-pri):not(.b-peligro)::after { border-color: var(--azul); border-right-color: transparent; } .bi { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; color: var(--suave); flex: 0 0 auto; transition: background .18s, color .18s, transform .16s var(--ease); } .bi .i { --s: .78; } .bi:hover { background: var(--hover); color: var(--tinta); } .bi-pri { background: linear-gradient(180deg, var(--pri-a), var(--pri-b)); color: var(--pri-tinta); } .bi-pri:hover { background: var(--azul-h); color: var(--pri-tinta); } .bi-peligro:hover { background: var(--mal-f); color: var(--mal); } .bi.apagado { opacity: .3; pointer-events: none; } /* Copy (2026-10-27, option 1 of the copiar-y-crear mockup): on copying, the icon turns into a green mark in its place (.cp-m, which copiado() puts over the centre of the icon) and the button's text into «Copiado». Only transform and opacity. */ [data-a="copiar"], [data-a="copiar-sesion"] { position: relative; } [data-a="copiar"] > .i:not(.cp-m), [data-a="copiar-sesion"] > .i:not(.cp-m) { transition: transform .26s var(--ease), opacity .18s; } [data-a] > .cp-m { position: absolute; color: var(--bien-p); pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(-20deg); transition: transform .34s cubic-bezier(.34, 1.56, .64, 1), opacity .16s; } .copiado > .i:not(.cp-m) { opacity: 0; transform: scale(.5) rotate(20deg); } [data-a].copiado > .cp-m { opacity: 1; transform: translate(-50%, -50%) scale(1); } .b.copiado { color: var(--bien); } @media (prefers-reduced-motion: reduce) { [data-a="copiar"] > .i, [data-a="copiar-sesion"] > .i { transition-duration: .01ms; } } .solo-lector { position: fixed; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .enlace { color: var(--azul); font-size: 14px; font-weight: 600; justify-self: center; } .enlace:hover { text-decoration: underline; } /* ============ Small data ============ */ .chapa { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--sup3); color: var(--suave); font-size: 12.5px; line-height: 16px; font-weight: 600; letter-spacing: -.05px; white-space: nowrap; } .chapa .i { --s: .55; } .c-bien { background: var(--bien-f); color: var(--bien); } .c-mal { background: var(--mal-f); color: var(--mal); } .c-aviso { background: var(--aviso-f); color: var(--aviso); } .c-azul { background: var(--azul-s); color: var(--azul-tinta); } .chapas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .estado { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap; } .estado i { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; } .e-bien { color: var(--bien); } .e-bien i { background: var(--bien-p); } .e-mal { color: var(--mal); } .e-mal i { background: var(--mal-p); animation: latido 2.4s ease-in-out infinite; } .e-neutro { color: var(--suave); } .e-neutro i { background: var(--tenue); } .vivo { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--bien); letter-spacing: .2px; } .vivo i { width: 6px; height: 6px; border-radius: 50%; background: var(--bien-p); animation: latido 2s ease-in-out infinite; } .barra { display: block; height: 6px; min-width: 48px; border-radius: 99px; background: var(--sup3); overflow: hidden; } .barra i { display: block; height: 100%; width: var(--p); border-radius: inherit; background: var(--azul); transition: width .7s var(--ease), background .4s; } .barra.t-aviso i { background: var(--aviso-p); } .barra.t-mal i { background: var(--mal-p); } .barra-fina { height: 4px; } .anillo { position: relative; display: grid; justify-items: center; text-align: center; gap: 1px; } .anillo svg { width: 64px; height: 64px; transform: rotate(-90deg); } .anillo circle { fill: none; stroke-width: 5; } .an-f { stroke: var(--sup3); } .an-v { stroke: var(--azul); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p)); transition: stroke-dashoffset .8s var(--ease), stroke .4s; } .anillo.t-aviso .an-v { stroke: var(--aviso-p); } .anillo.t-mal .an-v { stroke: var(--mal-p); } .anillo b { position: absolute; top: 20px; left: 0; right: 0; font-size: 14px; line-height: 24px; font-variant-numeric: tabular-nums; } .anillo small { font-size: 12px; font-weight: 600; } .anillo em { font-style: normal; font-size: 11px; color: var(--suave); line-height: 14px; } .chispa { width: 72px; height: 22px; overflow: visible; } .chispa polyline { fill: none; stroke: var(--azul); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .ch-area { fill: var(--azul-s); } .av { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--azul-s); color: var(--azul-tinta); font-size: 11px; font-weight: 700; letter-spacing: 0; flex: 0 0 auto; } .avs { display: inline-flex; } .avs .av { box-shadow: 0 0 0 2px var(--sup); } .avs .av + .av { margin-left: -7px; background: var(--morado-f); color: var(--morado); } .av-grande { width: 40px; height: 40px; font-size: 14px; } .av-retrato { width: 112px; height: 112px; font-size: 36px; } .persona { display: inline-flex; align-items: center; gap: 10px; min-width: 0; } .persona b { display: block; font-size: 14px; font-weight: 600; } .persona small { display: block; font-size: 12px; color: var(--suave); } .sd { display: grid; min-width: 0; } .sd b { font-size: 14.5px; line-height: 20px; font-weight: 600; overflow: hidden; text-overflow: clip; white-space: nowrap; } .sd small { font-size: 12px; line-height: 16px; color: var(--suave); overflow: hidden; text-overflow: clip; white-space: nowrap; } .tu { font-style: normal; font-size: 11px; font-weight: 700; color: var(--azul-tinta); background: var(--azul-s); border-radius: 4px; padding: 1px 6px; margin-left: 4px; } /* ============ Controles ============ */ .apariencia { display: inline-flex; gap: 2px; padding: 2px; height: 30px; border-radius: 999px; background: var(--sup3); flex: 0 0 auto; } .apariencia > .ind { background: var(--sup); border-radius: 999px; box-shadow: var(--sh-ind); } .apariencia button { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--suave); transition: color .2s; } .apariencia button:hover, .apariencia button[aria-pressed="true"] { color: var(--tinta); } .apariencia svg { width: 14px; height: 14px; } .marca { display: inline-flex; align-items: center; gap: 10px; min-width: 0; } .marca img { width: 28px; height: 28px; display: block; flex: 0 0 auto; } .marca b { font-size: 15.5px; font-weight: 700; white-space: nowrap; letter-spacing: -.3px; } .logo-largo img { display: block; width: auto; height: 30px; } .seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--sup3); max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; flex: 0 0 auto; } .seg::-webkit-scrollbar { display: none; } /* The indicator, with the same gap above and below, also to the eye: no shadow shifted downwards (2026-10-14). */ .seg > .ind { background: var(--sup); border-radius: 7px; box-shadow: var(--sh-ind); } .seg button { height: 28px; padding: 0 12px; border-radius: 7px; color: var(--suave); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: color .2s; display: inline-flex; align-items: center; gap: 6px; } .seg button:hover, .seg button[aria-pressed="true"] { color: var(--tinta); } .seg button em { font-style: normal; font-size: 11.5px; color: var(--tenue); font-variant-numeric: tabular-nums; } /* The figure, on the baseline of its text (Luis, 2026-11-03, design/ajustes-listas: «los números en cada tab… se ven movidos»): centred in its box, with Gilroy it sat 0.7 px higher than the text. The text stays centred (16 px line). */ .seg button:has(> em) { align-items: baseline; line-height: 16px; padding-top: 6px; } .seg-chico button:has(> em) { padding-top: 4px; } .seg-chico button { height: 24px; padding: 0 9px; font-size: 12.5px; } .seg-ancho { display: flex; } .seg-ancho button { flex: 1; justify-content: center; } .pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--linea); margin-bottom: 18px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .pestanas > .ind-raya { top: auto; bottom: 0; height: 2px !important; transform: translateX(var(--x, 0)); background: var(--azul); border-radius: 2px; } .pestanas button { height: 42px; padding: 0 12px; color: var(--suave); font-size: 14px; font-weight: 600; white-space: nowrap; transition: color .2s; display: inline-flex; align-items: center; gap: 6px; } .pestanas button:hover, .pestanas button[aria-pressed="true"] { color: var(--tinta); } .pestanas[data-borde="dcha"] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); } .pestanas[data-borde="izq"] { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); } .pestanas[data-borde="ambos"] { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); } .pestanas button em { font-style: normal; font-size: 11px; padding: 0 6px; border-radius: 99px; background: var(--sup3); color: var(--suave); } .interruptor { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--linea2); transition: background .25s; flex: 0 0 auto; } .interruptor i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--sh1); transition: transform .3s var(--ease); } .interruptor[aria-checked="true"] { background: var(--azul); } .interruptor[aria-checked="true"] i { transform: translateX(16px); } .campo { display: grid; gap: 8px; min-width: 0; } .campo-rot { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--suave); } .in { width: 100%; height: 36px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--linea2); background: var(--sup); color: var(--tinta); font-size: 14px; transition: border-color .18s, box-shadow .18s; } /* On the phone and the tablet, iOS Safari zooms the page in when a field with letters under 16 px is touched and does not zoom back: the send button went off the screen (Luis, 2026-10-15). With 16 px it zooms nothing. Also the terminal's hidden field (xterm) and the email's editable ones. */ @media (pointer: coarse), (max-width: 600px) { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select, [contenteditable="true"] { font-size: 16px !important; } } textarea.in { height: auto; padding: 8px 14px; resize: vertical; line-height: 20px; } .in::placeholder { color: var(--tenue); } .in:hover { border-color: var(--tenue); } .in:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-s); } .in[readonly] { background: var(--sup2); color: var(--suave); } .in-con { position: relative; display: block; } .in-con .in { padding-right: 42px; } .in-con .bi, .in-con .in-ico { position: absolute; right: 1px; top: 1px; } .in-ico { margin: 5px 8px; color: var(--suave); --s: .78; pointer-events: none; } .in-sufijo { display: flex; } .in-sufijo .in { border-radius: 6px 0 0 6px; font-family: var(--mono); letter-spacing: 0; } .in-sufijo em { display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--linea2); border-left: 0; border-radius: 0 6px 6px 0; background: var(--sup3); color: var(--suave); font-style: normal; font-size: 13.5px; white-space: nowrap; } .campo-nombre { display: grid; gap: 6px; } .valida { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--tenue); font-family: var(--mono); letter-spacing: 0; transition: color .2s; } .valida .i { --s: .55; } .v-bien { color: var(--bien); } .v-mal { color: var(--mal); } .desp { position: relative; display: block; } .desp-boton { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; } .desp-boton span { overflow: hidden; text-overflow: clip; white-space: nowrap; } .desp-flecha { --s: .68; color: var(--suave); transition: transform .25s var(--ease); } .desp-boton[aria-expanded="true"] { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-s); } .desp-boton[aria-expanded="true"] .desp-flecha { transform: rotate(180deg); } .desp-lista { position: absolute; z-index: 45; top: calc(100% + 6px); left: 0; right: 0; max-height: 248px; overflow: auto; padding: 4px; border-radius: 10px; background: var(--sup); border: 1px solid var(--linea); box-shadow: var(--sh2); transform-origin: top; animation: menu-in .2s var(--ease) both; } .desp-lista button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 34px; padding: 0 10px; border-radius: 6px; font-size: 13.5px; text-align: left; transition: background .15s; } .desp-lista button span { overflow: hidden; text-overflow: clip; white-space: nowrap; } .desp-lista button:hover { background: var(--hover); } .desp-lista button[aria-selected="true"] { background: var(--azul-s); color: var(--azul-tinta); font-weight: 600; } @keyframes menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } } /* Pop-up menus: compact */ .menu-ancla, .cuenta-ancla { position: relative; display: inline-flex; } .pop { position: absolute; z-index: 50; top: calc(100% + 8px); right: 0; min-width: 232px; padding: 5px; border-radius: 12px; background: var(--sup); border: 1px solid var(--linea); box-shadow: var(--sh3); transform-origin: top right; animation: menu-in .22s var(--ease) both; text-align: left; } .pop-arriba { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; transform-origin: bottom left; } .pop-op { display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px; border-radius: 7px; font-size: 13.5px; font-weight: 500; transition: background .15s; } .pop-op .i { --s: .68; color: var(--suave); } .pop-op:hover { background: var(--hover); } .op-peligro, .op-peligro .i { color: var(--mal) !important; } .pop-yo { display: flex; gap: 10px; align-items: center; padding: 8px 8px 10px; } .pop-yo b { display: block; font-size: 14px; } .pop-yo small { display: block; font-size: 12px; color: var(--suave); } .pop-fila { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--linea); font-size: 13px; color: var(--suave); } .cuenta { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 4px; border-radius: 999px; transition: background .18s; text-align: left; } .cuenta:hover { background: var(--hover); } .cuenta-nombre { display: grid; padding-right: 8px; line-height: 16px; } .cuenta-nombre b { font-size: 13.5px; } .cuenta-nombre small { font-size: 11.5px; color: var(--suave); } /* ============ Page ============ */ .cab { margin-bottom: 18px; } .cab-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; } .cab h1 { font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -.4px; } .cab-acc { display: flex; align-items: center; gap: 8px; margin-left: auto; } .volver { display: inline-flex; align-items: center; gap: 6px; height: 28px; margin-bottom: 6px; color: var(--suave); font-size: 13.5px; font-weight: 600; transition: color .18s, gap .2s var(--ease); } .volver .i { --s: .55; } .volver:hover { color: var(--tinta); gap: 9px; } .herramientas { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; } .buscador { display: block; width: 260px; max-width: 100%; } .vacio { display: grid; justify-items: center; gap: 10px; padding: 36px 16px; text-align: center; color: var(--suave); font-size: 14px; } .vacio b { color: var(--tinta); } .vacio-dibujo { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--sup3); color: var(--tenue); } .tarjeta { background: var(--sup); border: 1px solid var(--linea); border-radius: 12px; padding: 18px 20px; min-width: 0; } .tarjeta + .tarjeta { margin-top: 14px; } .tarjeta h3, .sub-h { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 22px; font-weight: 700; margin: 0 0 12px; } .tarjeta h3 .i, .sub-h .i { --s: .68; color: var(--suave); } .tarjeta h3 em, .bt h3 em, .grupo h2 em { font-style: normal; font-size: 11.5px; padding: 0 7px; border-radius: 99px; background: var(--sup3); color: var(--suave); font-weight: 700; } .tarjeta h3 .vivo { margin-left: auto; } .dos-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; } .dos-col > .tarjeta + .tarjeta { margin-top: 0; } .pila { display: grid; grid-auto-rows: max-content; gap: 14px; } .pie-form { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; } /* Tabla */ .tabla-caja { background: var(--sup); border: 1px solid var(--linea); border-radius: 12px; overflow-x: auto; overflow-y: hidden; container: tabla / inline-size; } .tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; } .tabla th { position: sticky; top: 0; z-index: 2; text-align: left; padding: 10px 14px; font-size: 12px; font-weight: 600; color: var(--suave); background: var(--sup2); border-bottom: 1px solid var(--linea); white-space: nowrap; } .tabla td { padding: 10px 14px; border-bottom: 1px solid var(--linea); vertical-align: middle; height: 54px; } .tabla tbody tr:last-child td { border-bottom: 0; } .tabla tbody tr { transition: background .16s; } .tabla tbody tr[data-a] { cursor: pointer; } .tabla tbody tr[data-a]:hover { background: var(--hover); } .tabla tbody tr[aria-selected="true"] { background: var(--azul-s); } .tabla tbody tr[aria-selected="true"] td:first-child { box-shadow: inset 3px 0 0 var(--azul); } .c-acc { width: 48px; text-align: right; } .uso { display: grid; gap: 4px; min-width: 110px; } .uso small, .cpu small { font-size: 12px; color: var(--suave); white-space: nowrap; font-variant-numeric: tabular-nums; } .cpu { display: flex; align-items: center; gap: 8px; } .t-sub.compacta .c-ram, .t-sub.compacta .c-cpu { display: none; } @container tabla (max-width: 760px) { .t-sub .c-cpu { display: none; } } .t-reg, .t-equipo { min-width: 620px; } .esqueleto td, .esqueleto { pointer-events: none; } .esqueleto i { display: block; height: 10px; border-radius: 6px; margin: 6px 0; background: linear-gradient(90deg, var(--sup3) 0, var(--hover) 120px, var(--sup3) 240px) var(--sup3); background-size: 480px 100%; animation: brillo 1.2s linear infinite; } .esqueleto i:nth-child(2) { width: 60%; } .esqueleto i:nth-child(3) { width: 35%; } .paginador { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding: 6px 10px; border: 1px solid var(--linea); border-radius: 12px; background: var(--sup); } .pag-izq { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .pag-izq .seg { margin-left: 8px; } .pag-n { font-size: 13px; font-weight: 600; min-width: 48px; text-align: center; font-variant-numeric: tabular-nums; } .pag-total { font-size: 13px; color: var(--suave); } /* Ficha */ .metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 14px; } .met { background: var(--sup); border: 1px solid var(--linea); border-radius: 12px; padding: 14px 16px; display: grid; gap: 6px; align-content: start; transition: border-color .2s, box-shadow .2s; } .met:hover { border-color: var(--linea2); box-shadow: var(--sh1); } .met-cab { display: flex; align-items: center; gap: 7px; color: var(--suave); font-size: 12.5px; font-weight: 600; } .met-cab .i { --s: .62; } .met-cab .vivo { margin-left: auto; } .met > b { font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -.5px; font-variant-numeric: tabular-nums; } .met > b small { font-size: 13px; font-weight: 600; color: var(--suave); letter-spacing: 0; } .met-pie { font-size: 12px; color: var(--suave); } .chispa-met { width: 100%; height: 26px; } .datos { margin: 0; display: grid; } .datos div { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--linea); align-items: center; } .datos div:last-child { border-bottom: 0; } .datos dt { font-size: 13px; color: var(--suave); } .datos dd { margin: 0; font-size: 13.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; } .conexion { display: flex; align-items: center; gap: 10px; padding: 5px 5px 5px 12px; border-radius: 10px; background: var(--sup3); margin-bottom: 12px; min-width: 0; } .conexion > .i { --s: .62; color: var(--suave); } .conexion code { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12.5px; overflow: hidden; text-overflow: clip; white-space: nowrap; } .llaves { display: grid; gap: 8px; margin-bottom: 10px; } .llaves li { display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 10px; border: 1px solid var(--linea); border-radius: 10px; transition: border-color .2s, background .2s; } .llaves li:hover { border-color: var(--linea2); background: var(--sup2); } .llave-txt { flex: 1; min-width: 0; display: grid; } .llave-txt b { font-size: 13.5px; } .llave-txt small { font-size: 11.5px; color: var(--suave); overflow: hidden; text-overflow: clip; white-space: nowrap; } .llave-f { font-size: 12px; color: var(--tenue); } .limites { display: grid; gap: 14px; } .lim { display: grid; grid-template-columns: 96px auto; align-items: center; justify-content: start; gap: 12px; } .lim > .seg:not(.seg-ancho) { justify-self: start; } .lim-rot { font-size: 13.5px; font-weight: 600; } .lim-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .chapas-asignado { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; } /* Public ports (Services) */ .pub { display: grid; gap: 12px; } .pub-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; } .pub-cab > b { font-size: 14.5px; white-space: nowrap; } .pub-cab .pub-abrir { margin-left: auto; } .pub-lista { display: grid; gap: 8px; } .pub-lista li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 7px 6px 6px 12px; border: 1px solid var(--linea); border-radius: 10px; min-width: 0; transition: border-color .2s, background .2s; } .pub-lista li:hover { border-color: var(--linea2); background: var(--sup2); } .pub-q { font-size: 14px; min-width: 46px; } .pub-cerrar { margin-left: auto; } .pub-dir { flex-basis: 100%; min-width: 0; display: flex; align-items: center; gap: 2px; } .pub-dir .llave-f { margin-left: auto; padding-right: 6px; } .cont-nom { flex: 1 1 160px; min-width: 0; display: grid; } .bd-lista li { padding-right: 8px; } .cont-nom b { font-size: 13.5px; overflow: hidden; text-overflow: clip; white-space: nowrap; } .cont-nom small { font-size: 11.5px; color: var(--suave); overflow: hidden; text-overflow: clip; white-space: nowrap; } .pub-dir code { min-width: 0; font-family: var(--mono); font-size: 12px; color: var(--suave); overflow: hidden; text-overflow: clip; white-space: nowrap; } .tiempo { position: relative; padding-left: 20px; display: grid; gap: 12px; } .tiempo::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--linea); border-radius: 2px; } .tiempo li { position: relative; display: grid; font-size: 13.5px; } .tiempo li::before { content: ''; position: absolute; left: -20px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--sup); border: 2px solid var(--azul); } .tiempo time { font-family: var(--mono); letter-spacing: 0; font-size: 11.5px; color: var(--suave); } .tiempo small { color: var(--suave); font-size: 12.5px; } .tiempo-chico { gap: 10px; } .tiempo-chico li { font-size: 13px; } .consola { padding: 10px 12px; border-radius: 10px; background: #0D121C; color: #C5D0E2; font: 12px/20px var(--mono); letter-spacing: 0; overflow: hidden; min-height: 120px; } .cl { white-space: nowrap; overflow: hidden; text-overflow: clip; } .cl-mal { color: #FF9E9E; } .cl-nueva { animation: linea-in .5s var(--ease) both; } @keyframes linea-in { from { opacity: 0; transform: translateY(6px); background: rgba(142, 192, 255, .12); } } .consola-orden { margin: 14px 0 0; white-space: pre-wrap; min-height: 0; } .graficas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; } .graficas.una { grid-template-columns: minmax(0, 1fr); } .grafica { margin: 0; background: var(--sup); border: 1px solid var(--linea); border-radius: 12px; padding: 14px 16px 10px; display: grid; gap: 8px; } .tarjeta .grafica, .bt .grafica { border: 0; padding: 0; background: none; } .grafica figcaption { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; flex-wrap: wrap; } .grafica figcaption span { color: var(--suave); font-size: 12.5px; } .grafica svg { width: 100%; height: 100px; overflow: visible; } .g-linea { fill: none; stroke: var(--azul); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; } .g-area { fill: var(--azul-s); opacity: .8; } .g-punto { fill: var(--sup); stroke: var(--azul); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .2s; } .grafica:hover .g-punto { opacity: 1; } .g-morado .g-linea, .g-morado .g-punto { stroke: var(--morado); } .g-morado .g-area { fill: var(--morado-f); } .g-eje { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--tenue); font-family: var(--mono); letter-spacing: 0; } .ranking { display: grid; gap: 4px; } .ranking button { display: grid; grid-template-columns: 22px minmax(0, 1fr) 90px; align-items: center; gap: 10px; width: 100%; padding: 8px 8px; border-radius: 8px; text-align: left; transition: background .15s; } .ranking button:hover { background: var(--hover); } .rk-n { font-size: 12px; font-weight: 700; color: var(--tenue); text-align: center; font-variant-numeric: tabular-nums; } .hechos { display: grid; gap: 10px; } .hechos li { display: flex; gap: 10px; align-items: center; font-size: 14px; } .hechos .i { --s: .68; color: var(--suave); } .fila-int { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--linea); margin-bottom: 10px; } .fila-int b { display: block; font-size: 14px; } .fila-int small { display: block; font-size: 12.5px; color: var(--suave); } .sesiones { display: grid; gap: 8px; } .sesiones li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border: 1px solid var(--linea); border-radius: 10px; } .sesiones b { display: block; font-size: 13.5px; } .sesiones small { display: block; font-size: 12px; color: var(--suave); } .retrato { position: relative; border-radius: 50%; } .retrato-acc { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: rgba(15, 20, 31, .5); opacity: 0; transition: opacity .25s; } .retrato:hover .retrato-acc, .retrato:focus-within .retrato-acc { opacity: 1; } .retrato-acc .bi { color: #fff; width: 44px; height: 44px; } .retrato-acc .bi:hover { background: rgba(255, 255, 255, .16); color: #fff; } .temas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; max-width: 720px; } .tema-op { display: grid; gap: 6px; text-align: left; padding: 10px; border-radius: 12px; border: 1px solid var(--linea); background: var(--sup); transition: border-color .25s, box-shadow .25s, transform .2s var(--ease); } .tema-op:hover { transform: translateY(-2px); } .tema-op[aria-pressed="true"] { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-s); } .tema-op b { display: flex; align-items: center; gap: 8px; font-size: 13.5px; } .tema-op b svg { width: 14px; height: 14px; } .tema-op small { font-size: 12.5px; color: var(--suave); } .tema-vista { display: grid; grid-template-columns: 18px 1fr; grid-template-rows: 10px 1fr; gap: 4px; height: 78px; padding: 6px; border-radius: 8px; background: #F4F6F8; } .tema-vista i { border-radius: 3px; background: #fff; } .tema-vista i:first-child { grid-row: 1 / -1; background: #1E2248; } .tv-dark { background: #0F141F; } .tv-dark i { background: #171E2C; } .tv-dark i:first-child { background: #141A27; } .tv-auto { background: linear-gradient(135deg, #F4F6F8 50%, #0F141F 50%); } .etiquetas { display: flex; flex-wrap: wrap; gap: 6px; } .etq { height: 24px; padding: 0 9px; border-radius: 999px; background: var(--sup3); font-size: 12px; font-weight: 600; font-family: var(--mono); letter-spacing: 0; transition: background .18s, color .18s; } .etq:hover { background: var(--azul-s); color: var(--azul-tinta); } .etq-mas { display: inline-grid; place-items: center; font-family: var(--font); color: var(--suave); } .rejilla-ases { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .ases { display: grid; gap: 12px; padding: 16px; border-radius: 12px; background: var(--sup); border: 1px solid var(--linea); transition: border-color .2s, box-shadow .2s, transform .25s var(--ease); } .ases:hover { border-color: var(--linea2); box-shadow: var(--sh2); transform: translateY(-2px); } .ases header { display: flex; align-items: center; gap: 10px; } .ases header .sd { flex: 1; } .ases footer { display: flex; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--linea); } .ases footer small { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--suave); } .ases footer .i { --s: .55; } .filtros-reg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; } /* Alta */ .pasos { position: relative; display: flex; justify-content: space-between; gap: 8px; padding: 16px 24px 4px; } .pasos li { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--tenue); background: var(--sup); padding-right: 8px; } .pasos li:not(:first-child) { padding-left: 8px; } .pasos li > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--linea2); font-size: 12.5px; background: var(--sup); transition: all .35s var(--ease); } .pasos .ahora { color: var(--tinta); } .pasos .ahora > span { border-color: var(--azul); background: var(--azul); color: var(--pri-tinta); } .pasos .hecho { color: var(--suave); } .pasos .hecho > span { border-color: var(--azul-s2); background: var(--azul-s); color: var(--azul-tinta); } .pasos-barra { position: absolute; left: 36px; right: 36px; top: 28px; height: 2px; background: var(--linea); z-index: 0; } .pasos-barra i { display: block; height: 100%; width: calc((var(--paso) - 1) / (var(--total) - 1) * 100%); background: var(--azul); transition: width .5s var(--ease); } .pista { display: flex; width: 100%; transition: transform .5s var(--ease); transform: translateX(calc(var(--i) * -100%)); } .pista-p { flex: 0 0 100%; min-width: 0; padding: 2px; } .modal-cuerpo:has(.pista), .tarjeta-asist { overflow: hidden; } .progreso { display: grid; gap: 2px; padding: 6px 0; } .progreso li { display: flex; align-items: center; gap: 12px; padding: 9px 0; color: var(--tenue); font-size: 14.5px; transition: color .3s; } .pg { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--linea2); position: relative; flex: 0 0 auto; transition: background .3s, border-color .3s, transform .3s var(--ease); } .progreso li:first-child:not(.hecho) .pg, .progreso li.hecho + li:not(.hecho) .pg { border-color: var(--azul); border-right-color: transparent; animation: gira .8s linear infinite; } .progreso li.hecho { color: var(--tinta); } .progreso li.hecho .pg { background: var(--bien-p); border-color: var(--bien-p); transform: scale(1.06); } .progreso li.hecho .pg::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .listo { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 6px 0; } .listo-sello { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--bien-f); color: var(--bien); animation: sello .6s var(--ease) both; } @keyframes sello { from { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.08); } } .listo > b { font-size: 19px; line-height: 26px; } .listo > a { font-size: 13.5px; } /* The key to download: the icon in its box, 16 px of margin on every side and the button with room (2026-10-19). */ .listo-llave { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; border-radius: 12px; border: 1px solid var(--linea); background: var(--sup2); text-align: left; } .listo-llave-ico { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px; background: var(--azul-s); color: var(--azul); } .listo-llave-ico > .i { --s: .8; } .listo-llave > span:not(.listo-llave-ico) { flex: 1; display: grid; gap: 2px; min-width: 0; } .listo-llave b { font-size: 13.5px; } .listo-llave small { font-size: 12px; line-height: 17px; color: var(--suave); } .listo-llave > .b { flex: 0 0 auto; margin-left: 4px; } .listo .conexion { margin: 0; width: 100%; text-align: left; } .listo-acc { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .huella { font-size: 12.5px; color: var(--suave); overflow-wrap: anywhere; } /* Capas */ .velo { position: absolute; inset: 0; z-index: 60; background: var(--velo); animation: aparece .32s ease both; } .velo-claro { background: color-mix(in srgb, var(--velo) 55%, transparent); } .modal { position: absolute; z-index: 61; top: 50%; left: 50%; width: min(540px, calc(100% - 32px)); max-height: calc(100% - 48px); display: flex; flex-direction: column; background: var(--sup); border-radius: 16px; box-shadow: var(--sh3); border: 1px solid var(--linea); transform: translate(-50%, -50%); animation: modal-in .38s var(--ease) both; } @keyframes modal-in { from { opacity: 0; transform: translate(-50%, -47%) scale(.97); } } .asa { display: none; } .modal-cab, .cajon-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--linea); } .modal-cab b { font-size: 16px; } .cajon-cab h2 { font-size: 17px; } .modal-cuerpo { padding: 20px; overflow: auto; display: grid; grid-auto-rows: max-content; gap: 14px; } .modal-pie { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--linea); background: var(--sup2); border-radius: 0 0 16px 16px; } .modal-pie .pie-form { margin: 0; width: 100%; } /* Drawers go straight and stuck to the edge, from top to bottom and without gaps, like the simlatech.ai panel (Luis, 2026-10-14: «que así sea siempre»). On the phone, full screen. */ .cajon { position: absolute; z-index: 61; top: 0; right: 0; bottom: 0; width: min(520px, 100%); display: flex; flex-direction: column; background: var(--sup); border-left: 1px solid var(--linea); box-shadow: var(--sombra-cajon); animation: cajon-in .32s var(--ease) both; } @keyframes cajon-in { from { transform: translateX(32px); opacity: 0; } } .cajon-cuerpo { flex: 1; overflow: auto; padding: 16px 20px 24px; display: grid; grid-auto-rows: max-content; gap: 12px; align-content: start; } .cajon-cuerpo .tarjeta + .tarjeta { margin-top: 0; } .paleta { position: absolute; z-index: 62; top: 11%; left: 50%; width: min(600px, calc(100% - 32px)); transform: translateX(-50%); border-radius: 16px; background: var(--sup); border: 1px solid var(--linea); box-shadow: var(--sh3); animation: paleta-in .3s var(--ease) both; overflow: hidden; } @keyframes paleta-in { from { opacity: 0; transform: translate(-50%, -10px) scale(.98); } } .paleta-busca { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--linea); color: var(--suave); } .paleta-busca .i { --s: .75; } .paleta-busca .in { border: 0; box-shadow: none; padding: 0; height: 32px; font-size: 15px; background: none; } .paleta-ops { padding: 6px; max-height: 340px; overflow: auto; } .paleta-ops > .ind { background: var(--azul-s); border-radius: 8px; } .paleta-grupo { font-size: 11.5px; font-weight: 700; color: var(--tenue); padding: 8px 10px 4px; letter-spacing: .2px; } .paleta-op { display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 10px; border-radius: 8px; font-size: 14px; text-align: left; } .paleta-op .i { --s: .68; color: var(--suave); } .paleta-op .estado { margin-left: auto; } .paleta-op[aria-pressed="true"] { color: var(--azul-tinta); } .paleta-op[aria-pressed="true"] .i { color: var(--azul); } .paleta-vacio { padding: 18px; text-align: center; color: var(--suave); font-size: 14px; } .paleta-pie { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--linea); font-size: 12px; color: var(--suave); background: var(--sup2); } .paleta-pie kbd { margin-right: 2px; } /* Notices and balloons */ #avisos { position: fixed; z-index: 999; right: 20px; bottom: 84px; display: grid; gap: 8px; justify-items: end; pointer-events: none; } .toast { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--tinta); color: var(--bg); font-size: 13.5px; font-weight: 600; box-shadow: var(--sh3); animation: toast-in .45s var(--ease) both; transition: opacity .4s, transform .4s var(--ease); } .toast .i { --s: .65; } .toast.fuera { opacity: 0; transform: translateY(8px) scale(.98); } @keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } } #globo { position: fixed; z-index: 1000; left: 0; top: 0; max-width: 260px; padding: 5px 9px; border-radius: 7px; background: var(--tinta); color: var(--bg); font-size: 12.5px; line-height: 17px; font-weight: 600; pointer-events: none; box-shadow: var(--sh2); } /* ============ Entrances: slow backgrounds, no halos ============ */ .ent { position: relative; height: 100%; overflow: auto; display: grid; place-items: center; padding: 32px 16px; isolation: isolate; } .ent-col { position: relative; z-index: 1; width: min(400px, 100%); } .ent-tarjeta { background: var(--sup); border: 1px solid var(--linea); border-radius: 16px; box-shadow: var(--sh2); padding: 28px; } .ent-tarjeta.sin-marco { border: 0; box-shadow: none; background: transparent; padding: 0; } .ent-arriba { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 24px; } .ent-tarjeta h1 { font-size: 22px; line-height: 30px; margin-bottom: 18px; letter-spacing: -.4px; } .ent-form { display: grid; gap: 14px; } .ent-form .b-alto { margin-top: 4px; } .ent-pie { margin: 14px 0 0; text-align: center; font-size: 12px; color: var(--tenue); } .entra .ent-tarjeta, .entra .ent1-caja, .entra .terminal { animation: sube .7s var(--ease) both; } /* What is the panel's own, over SimlaTech Server Admin's tokens.css (the same light and dark tokens, Gilroy and Omnica). */ html, body { height: 100%; } body { overflow: hidden; } #app { height: 100dvh; } .app { position: relative; height: 100%; overflow: hidden; background: var(--bg); transform: translateZ(0); } /* The frame: icon rail and panel, like Server Admin */ .pn { height: 100%; display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); } .pn-riel { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 14px 0 12px; background: var(--nav); } .pn-logo img { display: block; width: 30px; height: 30px; } .pn-ops { display: grid; gap: 4px; } .nav-op { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--nav-tinta); transition: color .2s, background .2s; } .nav-op .i { --s: .86; } .nav-op:hover { color: #fff; background: rgba(255, 255, 255, .05); } .nav-op[aria-current="page"] { color: #fff; } .nav-op[aria-current="page"]::before { content: ''; position: absolute; left: -10px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--azul); } .pn-pie { margin-top: auto; } .pn-panel { display: grid; grid-template-rows: 56px minmax(0, 1fr); min-width: 0; min-height: 0; background: var(--bg); overflow: hidden; } .pn-barra { display: flex; align-items: center; gap: 14px; padding: 0 12px 0 20px; background: var(--sup); border-bottom: 1px solid var(--linea); min-width: 0; } .pn-nombre { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; min-width: 0; } .pn-nombre b { font-size: 15px; letter-spacing: -.3px; } .pn-nombre em { font-style: normal; font-size: 13px; color: var(--suave); font-weight: 600; overflow: hidden; text-overflow: clip; } .pn-barra .apariencia { margin-left: auto; } /* The phone's bar carries the logo next to the name, as the desktop's rail does, and the welcome's logo flies to it (#72, 1 «Al logo de la barra de arriba» of design/mockups/welcome-phone) */ .pn-nombre-logo { display: none; } .contenido { overflow: auto; min-width: 0; min-height: 0; padding: 22px 26px 96px; } .marco { min-width: 0; } /* full width, like the panels' sections */ /* The webhook's address and key (Settings › Google Ads) */ .hook-dir { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 1 1 360px; padding: 4px 4px 4px 14px; border: 1px solid var(--linea); border-radius: 8px; background: var(--sup2); } .hook-dir code { flex: 1; min-width: 0; font: 13.5px/20px var(--mono); overflow-wrap: anywhere; } /* The table */ /* The detail drawer */ .cajon-cab h2 { font-size: 17px; line-height: 24px; } .cajon-cab small { display: block; font-size: 12.5px; color: var(--suave); font-weight: 500; } .datos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 13.5px; line-height: 20px; } .datos dt { color: var(--suave); font-weight: 600; } .datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } .datos .mono { font-size: 12.5px; } .crudo { position: relative; } .crudo pre { margin: 0; max-height: 420px; overflow: auto; padding: 12px 14px; border-radius: 8px; background: var(--sup2); border: 1px solid var(--linea); font: 12.5px/19px var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; } .tarjeta h3 .b { margin-left: auto; height: 30px; padding: 0 10px; font-size: 13px; } /* The entrance */ .ent { height: 100%; overflow: auto; display: grid; place-items: center; padding: 32px 16px; } .ent-tarjeta p { color: var(--suave); font-size: 14px; margin: -8px 0 18px; } .ent-error { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; background: var(--mal-f); color: var(--mal); font-size: 13.5px; font-weight: 600; } .ent-error .i { --s: .62; margin-top: -2px; } /* Notices: bottom right, one at a time */ #avisos { position: fixed; z-index: 999; right: 20px; bottom: 24px; display: grid; gap: 8px; justify-items: end; pointer-events: none; } @media (max-width: 720px) { .pn { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 60px; } .pn-riel { order: 2; flex-direction: row; justify-content: space-around; padding: 0 12px; gap: 8px; } .pn-pie { margin: 0; } .nav-op[aria-current="page"]::before { left: 12px; right: 12px; top: auto; bottom: -8px; width: auto; height: 3px; border-radius: 3px 3px 0 0; } .pn-barra { padding: 0 10px 0 16px; } .pn-nombre em { display: none; } .pn-barra .pn-nombre { display: flex; align-items: center; gap: 8px; min-width: 0; } .pn-nombre-logo { display: block; flex: 0 0 auto; width: 22px; height: 22px; } .contenido { padding: 16px 14px 40px; } .herramientas .buscador { width: 100%; } .herramientas .seg { flex-wrap: wrap; overflow: visible; } .cajon { width: 100%; } #avisos { left: 14px; right: 14px; bottom: 74px; justify-items: stretch; } } /* No inline styles: the CSP only allows this file's */ .a-dcha { margin-left: auto; } .i-voltear { transform: scaleX(-1); } /* On the phone, each notice is a card (like Server Admin's tables on the phone): nothing slides sideways */ /* Pagination, Simla Landing Builder's (option 3 «Franja»): always under the list, also with one; «Por página» 10 · 50 · 100 on the left, the pages with their arrows in the middle and «1–10 de 23» on the right; narrow, in two rows */ .pag-c { container: pag / inline-size; min-width: 0; margin-top: 14px; } .pag { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px 16px; min-height: 40px; padding: 6px 8px 6px 14px; border-radius: 12px; background: var(--sup2); border: 1px solid var(--linea); } .pag-izq { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-width: 0; } .pag-nav { justify-self: center; display: inline-flex; align-items: center; gap: 6px; } .pag-tot { justify-self: end; font-size: 13px; color: var(--suave); white-space: nowrap; font-variant-numeric: tabular-nums; } .pag-rot { font-size: 13px; color: var(--suave); white-space: nowrap; } .pag-g { display: inline-flex; gap: 2px; } .pag-b { min-width: 32px; height: 30px; padding: 0 8px; border: 0; border-radius: 8px; background: none; color: var(--suave); font: 600 13px/1 var(--font); font-variant-numeric: tabular-nums; display: inline-grid; place-items: center; cursor: pointer; } .pag-b:hover:not(:disabled) { background: var(--hover); color: var(--tinta); } .pag-b:disabled { color: var(--tenue); cursor: default; } .pag-b[aria-current="page"], .pag-b[aria-pressed="true"] { background: var(--azul-s); color: var(--azul-tinta); } .pag-b .i { --s: .6; } .gira-90 { transform: rotate(90deg); } .gira-270 { transform: rotate(270deg); } @container pag (max-width: 600px) { .pag { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nav nav" "izq tot"; gap: 14px 12px; padding: 10px 12px; } .pag-nav { grid-area: nav; justify-self: stretch; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--linea); } .pag-izq { grid-area: izq; } .pag-tot { grid-area: tot; } .pag-b { min-width: 36px; height: 34px; } } .hook-dir code.oculta { letter-spacing: 2px; color: var(--suave); } /* Ajustes */ .nota { font-size: 13px; line-height: 19px; color: var(--suave); } .nota { margin-top: 12px; } .nota-arriba { margin: -4px 0 12px; } .nota-mal { color: var(--mal); font-weight: 600; margin-top: 0; } .pila { display: grid; gap: 14px; } .pila .tarjeta + .tarjeta { margin-top: 0; } .intentos { display: grid; gap: 8px; margin-top: 12px; } .intentos li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; } .intentos .int-txt { min-width: 0; overflow-wrap: anywhere; } .intentos small { display: block; font-size: 12px; color: var(--tenue); } .tarjeta h3 .b { flex: 0 0 auto; } /* Ajustes › Simla */ select.in { appearance: none; padding-right: 34px; background: var(--sup) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238792A2' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; } .permisos { margin-top: 12px; } .b-rojo { color: var(--mal); } .b-rojo:hover { background: var(--mal-f); color: var(--mal); } .pie-form .b-rojo { margin-right: auto; } /* Ajustes › Formularios */ .cambia > .tarjeta + .tarjeta, .cambia > .nota + .tarjeta { margin-top: 14px; } /* Settings, anchored at the foot of the rail above «Salir» (Luis, 2026-11-07) */ .pn-pie { display: grid; gap: 4px; justify-items: center; } @media (max-width: 720px) { .pn-pie { display: flex; gap: 8px; } } /* Settings with «Filas con su control» (the approved settings pattern): name and its line on the left, control on the right */ .aj-desc { font-size: 13px; line-height: 19px; color: var(--suave); margin: -2px 0 6px; max-width: 760px; } .aj-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 440px); gap: 8px 28px; align-items: center; padding: 14px 0; } .aj-fila + .aj-fila, .aj-desc + .aj-fila { border-top: 1px solid var(--linea); } .aj-txt { min-width: 0; } .aj-txt b { display: block; font-size: 14px; line-height: 20px; font-weight: 600; } .aj-txt p { margin-top: 2px; font-size: 13px; line-height: 19px; color: var(--suave); overflow-wrap: anywhere; } .aj-ctl { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; min-width: 0; } .aj-ctl > .in, .aj-ctl > .seg { width: 100%; } .aj-ctl > .seg { flex-wrap: wrap; overflow: visible; } .aj-ctl > .seg button { flex: 1 1 auto; justify-content: center; } .req { color: var(--mal); margin-left: 3px; font-weight: 700; } .in.falta { border-color: var(--mal-p); box-shadow: 0 0 0 3px var(--mal-f); } .aj-recomienda { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 14px; padding: 10px 12px; border-radius: 8px; background: var(--azul-s); color: var(--azul-tinta); font-size: 13px; line-height: 19px; } .aj-recomienda .i { --s: .62; flex: 0 0 auto; margin-top: -2px; } @media (max-width: 720px) { .aj-fila { grid-template-columns: minmax(0, 1fr); gap: 10px; } .aj-ctl { justify-content: stretch; } .aj-ctl > .b { flex: 1 1 auto; } } /* The app's drop-downs (rule: no native browser control in sight). The .desp piece of tokens.css: a button with what is chosen and its list below, attached and as wide as it; the