/* ../../vendor/criterium-ui/dist/marca/fuentes.css */ @font-face { font-family: "Geist"; src: url("./assets/Geist-Variable-E6BUSCAY.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Geist Mono"; src: url("./assets/GeistMono-Variable-PD7MQGZU.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } /* ../../vendor/criterium-ui/dist/marca/marca.css */ :root, [data-crm-tema=grafito], [data-crm-tema=sistema] { color-scheme: dark; --crm-bg: #18181a; --crm-panel: #1e1e1f; --crm-panel-2: #252526; --crm-panel-3: #2c2c2d; --crm-line: #313132; --crm-line-2: #3f3f40; --crm-control: #6c6c6e; --crm-linea-apagada: #505051; --crm-text: #f5f5f4; --crm-text-2: #d6d5d2; --crm-muted: #abaaa6; --crm-dim: #959491; --crm-acento: #2bd47d; --crm-acento-2: #1fb066; --crm-acento-suave: rgb(43 212 125 / 0.12); --crm-acento-linea: rgb(43 212 125 / 0.52); --crm-sobre-acento: #04130b; --crm-luz: rgb(170 255 210 / 0.95); --crm-error: #f0a58f; --crm-error-suave: rgb(240 165 143 / 0.12); --crm-error-linea: rgb(240 165 143 / 0.52); --crm-aviso: #e0a23a; --crm-aviso-suave: rgb(224 162 58 / 0.12); --crm-aviso-linea: rgb(224 162 58 / 0.55); --crm-boton: #fafafa; --crm-boton-tinta: #080808; --crm-velo: rgb(24 24 26 / 0.86); --crm-telon: rgb(10 10 11 / 0.55); --crm-sombra: 0 24px 80px rgb(0 0 0 / 0.45); --crm-sombra-capa: 0 12px 40px rgb(0 0 0 / 0.4); --crm-sombra-hundida: inset 0 1px 0 rgb(0 0 0 / 0.35); --crm-seleccion: rgb(43 212 125 / 0.26); --crm-esqueleto-a: #252526; --crm-esqueleto-b: #303031; --crm-acento-halo: rgb(43 212 125 / 0.3); --crm-serie-1: #ddd6ce; --crm-serie-2: #d7a86e; --crm-serie-3: #c47864; --crm-serie-4: #99b8a0; --crm-serie-5: #a4809f; --crm-serie-6: #726c67; --crm-serie-comparacion: var(--crm-muted); --crm-serie-reposo: #6c6c6e; --crm-serie-destacada: var(--crm-acento); --crm-sobre-serie-1: #18181a; --crm-calor-tinta-3: var(--crm-sobre-serie-1); --crm-foco-ancho: 1px; --crm-pie-fondo: rgb(8 8 8 / 0.6); --crm-pie-lockup: var(--crm-line-2); --crm-pie-apellido: rgb(43 212 125 / 0.5); --crm-ascii-reposo: #605b52; --crm-ascii-luz: var(--crm-acento); --crm-apagado: 0.32; } [data-crm-tema=oscuro] { color-scheme: dark; --crm-bg: #080808; --crm-panel: #131210; --crm-panel-2: #1c1b18; --crm-panel-3: #23211e; --crm-line: #2a2825; --crm-line-2: #383532; --crm-control: #6a6661; --crm-linea-apagada: #4c4845; --crm-text: #fafafa; --crm-text-2: #d9d6d2; --crm-muted: #a4a09d; --crm-dim: #8d8a86; --crm-acento: #2bd47d; --crm-acento-2: #1fb066; --crm-acento-suave: rgb(43 212 125 / 0.12); --crm-acento-linea: rgb(43 212 125 / 0.52); --crm-sobre-acento: #04130b; --crm-luz: rgb(170 255 210 / 0.95); --crm-error: #f0a58f; --crm-error-suave: rgb(240 165 143 / 0.12); --crm-error-linea: rgb(240 165 143 / 0.52); --crm-aviso: #e0a23a; --crm-aviso-suave: rgb(224 162 58 / 0.12); --crm-aviso-linea: rgb(224 162 58 / 0.55); --crm-boton: #fafafa; --crm-boton-tinta: #080808; --crm-velo: rgb(8 8 8 / 0.86); --crm-telon: rgb(4 4 4 / 0.62); --crm-sombra: 0 24px 80px rgb(0 0 0 / 0.55); --crm-sombra-capa: 0 12px 40px rgb(0 0 0 / 0.5); --crm-sombra-hundida: inset 0 1px 0 rgb(0 0 0 / 0.45); --crm-seleccion: rgb(43 212 125 / 0.28); --crm-esqueleto-a: #1c1b18; --crm-esqueleto-b: #2c2925; --crm-acento-halo: rgb(43 212 125 / 0.35); --crm-serie-1: #ddd6ce; --crm-serie-2: #d7a86e; --crm-serie-3: #c47864; --crm-serie-4: #99b8a0; --crm-serie-5: #a4809f; --crm-serie-6: #726c67; --crm-serie-comparacion: var(--crm-muted); --crm-serie-reposo: #6a6661; --crm-serie-destacada: var(--crm-acento); --crm-sobre-serie-1: #080808; --crm-calor-tinta-3: var(--crm-sobre-serie-1); --crm-foco-ancho: 1px; --crm-pie-fondo: rgb(8 8 8 / 0.6); --crm-pie-lockup: var(--crm-line-2); --crm-pie-apellido: rgb(43 212 125 / 0.5); --crm-ascii-reposo: #605b52; --crm-ascii-luz: var(--crm-acento); --crm-apagado: 0.32; } [data-crm-tema=claro] { color-scheme: light; --crm-bg: #f6f5f2; --crm-panel: #ffffff; --crm-panel-2: #f0eee9; --crm-panel-3: #e8e5df; --crm-line: #e3e0da; --crm-line-2: #cfcac2; --crm-control: #8d877e; --crm-linea-apagada: #b9b4ad; --crm-text: #121110; --crm-text-2: #33302c; --crm-muted: #5b5752; --crm-dim: #69655e; --crm-acento: #117343; --crm-acento-2: #0e6338; --crm-acento-suave: rgb(17 115 67 / 0.09); --crm-acento-linea: #4aa16e; --crm-sobre-acento: #ffffff; --crm-luz: #1b9a5c; --crm-error: #a8412a; --crm-error-suave: rgb(168 65 42 / 0.08); --crm-error-linea: #e07155; --crm-aviso: #8a580e; --crm-aviso-suave: rgb(138 88 14 / 0.09); --crm-aviso-linea: #bf853e; --crm-boton: #121110; --crm-boton-tinta: #fafafa; --crm-velo: rgb(246 245 242 / 0.86); --crm-telon: rgb(246 245 242 / 0.72); --crm-sombra: 0 0 0 1px rgb(40 32 24 / 0.06), 0 24px 64px rgb(40 32 24 / 0.14); --crm-sombra-capa: 0 0 0 1px rgb(40 32 24 / 0.06), 0 8px 24px rgb(40 32 24 / 0.1); --crm-sombra-hundida: inset 0 1px 2px rgb(40 32 24 / 0.06); --crm-seleccion: rgb(17 115 67 / 0.18); --crm-esqueleto-a: #efede8; --crm-esqueleto-b: #e4e1da; --crm-acento-halo: rgb(17 115 67 / 0.22); --crm-serie-1: #564f47; --crm-serie-2: #ab7a3e; --crm-serie-3: #a15141; --crm-serie-4: #699273; --crm-serie-5: #7c5777; --crm-serie-6: #928a83; --crm-serie-comparacion: var(--crm-muted); --crm-serie-reposo: #8d877e; --crm-serie-destacada: var(--crm-acento); --crm-sobre-serie-1: #ffffff; --crm-calor-tinta-3: var(--crm-text); --crm-foco-ancho: 1px; --crm-pie-fondo: #eeebe5; --crm-pie-lockup: #c3beb7; --crm-pie-apellido: #38905e; --crm-ascii-reposo: #5c554b; --crm-ascii-luz: var(--crm-acento); --crm-apagado: 0.32; } [data-crm-tema=contraste] { color-scheme: dark; --crm-bg: #000000; --crm-panel: #0b0b0b; --crm-panel-2: #171717; --crm-panel-3: #212121; --crm-line: #6e6e6e; --crm-line-2: #8c8c8c; --crm-control: #a6a6a6; --crm-linea-apagada: #5c5c5c; --crm-text: #ffffff; --crm-text-2: #f2f2f2; --crm-muted: #cfcfcf; --crm-dim: #a8a8a8; --crm-acento: #3ee68f; --crm-acento-2: #2bd47d; --crm-acento-suave: rgb(62 230 143 / 0.16); --crm-acento-linea: var(--crm-acento); --crm-sobre-acento: #04130b; --crm-luz: rgb(170 255 210 / 0.95); --crm-error: #ff8f75; --crm-error-suave: rgb(255 143 117 / 0.16); --crm-error-linea: var(--crm-error); --crm-aviso: #ffc247; --crm-aviso-suave: rgb(255 194 71 / 0.16); --crm-aviso-linea: var(--crm-aviso); --crm-boton: #ffffff; --crm-boton-tinta: #000000; --crm-velo: rgb(0 0 0 / 0.92); --crm-telon: rgb(0 0 0 / 0.8); --crm-sombra: none; --crm-sombra-capa: none; --crm-sombra-hundida: none; --crm-seleccion: rgb(62 230 143 / 0.4); --crm-esqueleto-a: #171717; --crm-esqueleto-b: #2a2a2a; --crm-acento-halo: transparent; --crm-serie-1: #eee7df; --crm-serie-2: #ebb876; --crm-serie-3: #e08a74; --crm-serie-4: #abcfb3; --crm-serie-5: #be93b8; --crm-serie-6: #8c8580; --crm-serie-comparacion: var(--crm-muted); --crm-serie-reposo: #9a9a9a; --crm-serie-destacada: var(--crm-acento); --crm-sobre-serie-1: #000000; --crm-calor-tinta-3: var(--crm-sobre-serie-1); --crm-foco-ancho: 2px; --crm-pie-fondo: #000000; --crm-pie-lockup: #4a4a4a; --crm-pie-apellido: var(--crm-acento); --crm-ascii-reposo: #8c8c8c; --crm-ascii-luz: var(--crm-acento); --crm-apagado: 0.4; } @media (prefers-color-scheme: light) { [data-crm-tema=sistema] { color-scheme: light; --crm-bg: #f6f5f2; --crm-panel: #ffffff; --crm-panel-2: #f0eee9; --crm-panel-3: #e8e5df; --crm-line: #e3e0da; --crm-line-2: #cfcac2; --crm-control: #8d877e; --crm-linea-apagada: #b9b4ad; --crm-text: #121110; --crm-text-2: #33302c; --crm-muted: #5b5752; --crm-dim: #69655e; --crm-acento: #117343; --crm-acento-2: #0e6338; --crm-acento-suave: rgb(17 115 67 / 0.09); --crm-acento-linea: #4aa16e; --crm-sobre-acento: #ffffff; --crm-luz: #1b9a5c; --crm-error: #a8412a; --crm-error-suave: rgb(168 65 42 / 0.08); --crm-error-linea: #e07155; --crm-aviso: #8a580e; --crm-aviso-suave: rgb(138 88 14 / 0.09); --crm-aviso-linea: #bf853e; --crm-boton: #121110; --crm-boton-tinta: #fafafa; --crm-velo: rgb(246 245 242 / 0.86); --crm-telon: rgb(246 245 242 / 0.72); --crm-sombra: 0 0 0 1px rgb(40 32 24 / 0.06), 0 24px 64px rgb(40 32 24 / 0.14); --crm-sombra-capa: 0 0 0 1px rgb(40 32 24 / 0.06), 0 8px 24px rgb(40 32 24 / 0.1); --crm-sombra-hundida: inset 0 1px 2px rgb(40 32 24 / 0.06); --crm-seleccion: rgb(17 115 67 / 0.18); --crm-esqueleto-a: #efede8; --crm-esqueleto-b: #e4e1da; --crm-acento-halo: rgb(17 115 67 / 0.22); --crm-serie-1: #564f47; --crm-serie-2: #ab7a3e; --crm-serie-3: #a15141; --crm-serie-4: #699273; --crm-serie-5: #7c5777; --crm-serie-6: #928a83; --crm-serie-comparacion: var(--crm-muted); --crm-serie-reposo: #8d877e; --crm-serie-destacada: var(--crm-acento); --crm-sobre-serie-1: #ffffff; --crm-calor-tinta-3: var(--crm-text); --crm-foco-ancho: 1px; --crm-pie-fondo: #eeebe5; --crm-pie-lockup: #c3beb7; --crm-pie-apellido: #38905e; --crm-ascii-reposo: #5c554b; --crm-ascii-luz: var(--crm-acento); --crm-apagado: 0.32; } } :root, [data-crm-tema] { --crm-sans: "Geist", var(--font-geist-sans, var(--font-sans, ui-sans-serif)), system-ui, -apple-system, "Segoe UI", sans-serif; --crm-mono: "Geist Mono", var(--font-geist-mono, ui-monospace), "SFMono-Regular", Menlo, monospace; --crm-lockup: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3MDI5LjU1OSAxMDAwLjAwMCIgd2lkdGg9IjcwMjkuNTU5IiBoZWlnaHQ9IjEwMDAuMDAwIiBmaWxsPSJjdXJyZW50Q29sb3IiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iQ3JpdGVyaXVtIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDAuMDAwKSI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTUxLjU1NzUsLTQ5LjQwOTIpIHNjYWxlKDEuMDc0MTE0KSI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsMTAyMy4wMDAwMDApIHNjYWxlKDAuMTAwMDAwLC0wLjEwMDAwMCkiIGZpbGw9ImN1cnJlbnRDb2xvciIgc3Ryb2tlPSJub25lIj4gPHBhdGggZD0iTTEwMjI1IDk3NjMgYy0yMDQgLTUgLTU5MiAtMjQgLTY2NSAtMzMgLTQxIC01IC0xNTYgLTE0IC0yNTUgLTIwIC05OSAtNiAtMjI3IC0xNyAtMjg1IC0yNSAtNTggLTggLTE3MCAtMjEgLTI1MCAtMjkgLTIyOCAtMjMgLTQ4MSAtNTUgLTUyNSAtNjUgLTIyIC02IC04MyAtMTUgLTEzNSAtMjEgLTUyIC02IC0xMjkgLTE3IC0xNzAgLTI1IC00MSAtOCAtMTIyIC0yMSAtMTgwIC0yOSAtMTAyIC0xNCAtMTY0IC0yNSAtMzc1IC02NiAtNTUgLTExIC0xMTYgLTIyIC0xMzUgLTI1IC0xMTIgLTE5IC03NjMgLTE2NiAtOTMwIC0yMTAgLTMwIC04IC04MiAtMjIgLTExNSAtMzAgLTEzMSAtMzEgLTE5MiAtNDggLTI0OCAtNjYgLTMxIC0xMCAtNjQgLTE5IC03MiAtMTkgLTcgMCAtNTEgLTExIC05NyAtMjUgLTQ2IC0xNCAtMTIxIC0zNyAtMTY4IC01MSAtNDcgLTE0IC0xMjMgLTM3IC0xNzAgLTUxIC00NyAtMTQgLTE3MCAtNTQgLTI3NSAtODggLTEwNCAtMzUgLTIwNiAtNjggLTIyNSAtNzQgLTE5IC01IC03MyAtMjQgLTEyMCAtNDEgLTQ3IC0xNyAtMTA1IC0zOCAtMTMwIC00NiAtMjUgLTcgLTU0IC0xOCAtNjUgLTI0IC0xOCAtOCAtNTkgLTI0IC0yNzUgLTEwNiAtMzYgLTE0IC03MiAtMjkgLTgxIC0zMyAtOCAtNSAtNDcgLTIxIC04NSAtMzYgLTczIC0yOSAtMTQ4IC02MSAtMzY0IC0xNTcgLTEwMCAtNDQgLTY4NyAtMzM4IC03MjAgLTM2MCAtMTkgLTEzIC00OSAtMzEgLTY1IC00MCAtNDAgLTIwIC0xOTAgLTEwOCAtMzM3IC0xOTcgLTE0MCAtODUgLTM2MiAtMjMxIC01MDMgLTMzMiAtMzggLTI3IC04MSAtNTcgLTk1IC02NyAtODUgLTU4IC00MjUgLTMzMyAtNTQwIC00MzYgLTEwNyAtOTcgLTQzMiAtNDI5IC01MDAgLTUxMSAtMjIxIC0yNjUgLTMzMiAtNDMyIC00MzUgLTY1MCAtMTc4IC0zNzUgLTIwMiAtNzk5IC02OSAtMTIxNSAxNSAtNDcgMzAgLTg5IDM0IC05NSA0IC01IDEzIC0yNiAxOSAtNDYgMTEgLTM1IDg1IC0xODQgMTI3IC0yNTcgNjUgLTExNCAyMzcgLTM1NiAzMjcgLTQ2MiA4NyAtMTAxIDMxMSAtMzMwIDQwNCAtNDExIDU5IC01MiAxMTQgLTEwMSAxMjMgLTExMCA5IC05IDQ4IC00MiA4NiAtNzMgMzEwIC0yNTggNjgwIC01MDMgMTE2NCAtNzY4IDI4MSAtMTU1IDU5MiAtMzA4IDkxNSAtNDUzIDgzIC0zNiAxNjQgLTczIDE4MCAtODAgOTggLTQ1IDE0NSAtNjUgMTUwIC02NSA0IDAgMjEgLTcgMzggLTE1IDM2IC0xNiAxMTkgLTQ5IDE5MiAtNzUgMjggLTExIDg2IC0zMyAxMzAgLTUwIDQ0IC0xNyAxMDUgLTM5IDEzNSAtNTAgMzAgLTEwIDg3IC0zMCAxMjUgLTQ1IDM5IC0xNCAxMjkgLTQ1IDIwMCAtNjkgNzIgLTI0IDE0MSAtNDkgMTU1IC01NCAxNCAtNiA3MiAtMjUgMTMwIC00MiA1OCAtMTggMTIxIC0zOCAxNDAgLTQ2IDE5IC03IDYwIC0yMCA5MCAtMjggMzAgLTggMTAyIC0yOSAxNjAgLTQ2IDU4IC0xOCAxMzkgLTQxIDE4MCAtNTIgNDEgLTExIDEwNCAtMjkgMTQwIC0zOSAzNiAtMTAgOTIgLTI1IDEyNSAtMzQgMzMgLTggOTIgLTI0IDEzMCAtMzUgMTI0IC0zNSAxODMgLTQ5IDQ3MCAtMTE1IDE4MyAtNDEgMzQ2IC03NiA0MjUgLTkxIDQxIC03IDEwNyAtMjAgMTQ1IC0yOCAzOSAtOSAxMzEgLTI2IDIwNSAtNDAgNzQgLTEzIDE4NyAtMzQgMjUwIC00NiA2MyAtMTEgMTU2IC0yNSAyMDUgLTMxIDUwIC01IDExNSAtMTYgMTQ1IC0yNCAzMCAtNyA4NCAtMTYgMTIwIC0yMCAzNiAtMyAxMDYgLTEzIDE1NSAtMjEgMTE4IC0yMCAzNjIgLTUwIDU1MCAtNjkgODMgLTggMTk3IC0yMiAyNTUgLTMwIDU4IC04IDE4NCAtMTkgMjgwIC0yNSA5NiAtNiAyNTIgLTE3IDM0NSAtMjYgMTIxIC0xMSAzNTAgLTE3IDc5NSAtMjEgNjMyIC01IDk1NSAyIDEzMjAgMzIgOTYgNyAyMjIgMTcgMjgwIDIwIDU4IDMgMTUyIDEzIDIxMCAyMSA1OCA4IDE3NyAyMSAyNjUgMjkgMTk3IDE5IDQ2MSA1MCA1NDAgNjQgMzMgNiAxMTAgMTggMTcwIDI2IDYxIDggMTUxIDIxIDIwMCAyOSA1MCA4IDEyNCAyMCAxNjUgMjYgMTQ2IDIxIDMxMyA0OSAzODQgNjQgMzkgOCAxMzQgMjYgMjExIDQxIDc3IDE0IDE3OCAzNSAyMjUgNDUgNDcgMTEgMTIxIDI2IDE2NSAzNSA0NCA4IDEzMCAyNiAxOTAgNDAgNjEgMTQgMTQ4IDMzIDE5NSA0NCAxMTEgMjUgMjA5IDQ5IDI5MCA3MSAzNiA5IDk3IDI1IDEzNSAzNSAxNDcgMzcgMTgyIDQ2IDI1MCA2NiAzOSAxMSA5OSAyOCAxMzUgMzggMTk3IDU3IDczNSAyMzEgOTMwIDMwMiA0NyAxNyAxMTAgMzkgMTQwIDQ5IDMwIDExIDkxIDMzIDEzNSA1MCA0NCAxNyAxMDMgMzkgMTMwIDQ5IDI4IDEwIDEwMiA0MCAxNjUgNjYgNjMgMjYgMTM4IDU2IDE2NSA2NyAyOCAxMSA1NSAyMyA2MCAyOCA2IDQgMjggMTMgNTAgMjAgMjIgNyA1MSAxOCA2NSAyNSAxNCA3IDUwIDI0IDgwIDM4IDIwMyA5MCA3MzggMzU0IDg3NyA0MzMgNDQ5IDI1NCA4NzEgNTQ0IDExMjcgNzc0IDQxMSAzNjkgNzE4IDc1MyA4OTAgMTExNSAyMCA0NCA0MyA5MSA1MCAxMDUgOCAxNCAyMyA1NiAzNiA5MyAxNyA1MiAxOSA3MiAxMSA4MCAtMTggMTggLTYyODYgMjIgLTYzMjAgNCAtMjEgLTEwIC0yOCAtMjYgLTQyIC05NyAtNTQgLTI2MCAtMTQ5IC01OTQgLTIwNSAtNzE3IC04IC0xNyAtMTQgLTM0IC0xNCAtMzggMCAtNCAtMTQgLTM5IC0zMSAtNzggLTE3IC00MCAtMzggLTg5IC00NyAtMTExIC0zNiAtODIgLTE3MSAtMzQ1IC0yMTcgLTQyMSAtNDggLTc5IC0xODEgLTI4MyAtMjIwIC0zMzYgLTE3NCAtMjM5IC00NDAgLTUxNyAtNjcwIC03MDIgLTE3OSAtMTQ0IC0zMTQgLTIzNyAtNDk1IC0zNDMgLTgyIC00NyAtMzQ0IC0xODEgLTM5MCAtMTk5IC0xOSAtNyAtNzEgLTI3IC0xMTUgLTQ1IC0yNjUgLTEwNCAtNTY4IC0xODQgLTg2MCAtMjI2IC0xMzIgLTE5IC00OTcgLTM2IC02MTAgLTI5IC0yNDIgMTYgLTM2NCAyOSAtNTI1IDU2IC05NiAxNyAtMTc4IDMzIC0xODMgMzYgLTUgMyAtNDggMTUgLTk1IDI4IC0xMDUgMjcgLTE5MyA1NSAtMjg3IDkwIC0zOCAxNCAtOTIgMzQgLTEyMCA0NCAtMjcgMTAgLTg5IDM3IC0xMzcgNjAgLTQ4IDIyIC04OSA0MSAtOTIgNDEgLTcgMCAtMzMxIDE4MiAtMzcxIDIwOCAtMTE5IDc5IC0yNjQgMTg3IC0zNzAgMjc2IC0yMjYgMTkwIC01MjcgNTA4IC02NDUgNjgyIC03NCAxMDkgLTE3MCAyNTUgLTE4NCAyNzkgLTU3IDEwMCAtNzQgMTMwIC0xMjEgMjIwIC00NCA4NSAtOTAgMTg2IC0xNzIgMzc1IC00MyAxMDAgLTE1NSA0NjggLTE3MyA1NzAgLTYgMzYgLTE4IDg4IC0yNSAxMTUgLTggMjggLTE5IDkxIC0yNSAxNDAgLTcgNTAgLTE2IDEwNiAtMjEgMTI1IC0zNCAxMzYgLTUzIDc4MSAtMzAgMTA1MCAzMyAzODIgMTE1IDc3OCAyMjEgMTA3NSA0NiAxMjggODMgMjIzIDEwMSAyNjEgMTAgMjIgMTkgNDQgMTkgNDggMCAxOCAxNDcgMzEwIDIwMiA0MDEgMjA0IDMzOCAzNTQgNTMxIDYxOCA3OTYgODUgODYgMTk2IDE5MCAyNDUgMjMxIDQxNiAzNDMgODc4IDU4MSAxMzgwIDcxMSAyMjMgNTggMjgyIDY5IDU4MCAxMDcgOTEgMTIgNTMzIDEyIDY1NSAwIDE0NiAtMTQgMzkxIC00OCA0MzAgLTYwIDE5IC01IDYyIC0xNSA5NSAtMjEgODIgLTE0IDMxMSAtNzkgNDIwIC0xMTggMTExIC00MCAyMjEgLTg0IDI0NSAtOTYgMTQgLTggNjMgLTMyIDExMCAtNTQgMTU1IC03NCAyMzUgLTExOSA0MjAgLTIzOSAzMzQgLTIxNyA2NjkgLTU0MCA5MzkgLTkwNyAxNDMgLTE5NiAxODUgLTI2MCAyODQgLTQzOCA3MSAtMTI4IDE2NyAtMzIwIDE2NyAtMzM0IDAgLTQgOSAtMjUgMTkgLTQ3IDE4IC0zOCA1NSAtMTMyIDEwMiAtMjYxIDEwIC0yNyAzMCAtOTAgNDQgLTE0MCAxNSAtNDkgMzUgLTExNyA0NCAtMTUwIDM5IC0xMzAgOTggLTQwOCAxMTMgLTUzNSAxMiAtMTA1IDI0IC0xMzEgNjUgLTE0MiAxNyAtNCAxNDMzIC03IDMxNDcgLTYgMjc1MCAzIDMxMTggNSAzMTI2IDE4IDE0IDIyIDIgNTUgLTUzIDE1NSAtNDUgODEgLTIwMCAzMjEgLTI0OSAzODUgLTU2IDczIC0xNDMgMTg2IC0xNDggMTkwIC0zIDMgLTQxIDQ4IC04NSAxMDAgLTE0OSAxNzggLTQzOCA0NTQgLTY5NCA2NjMgLTUzIDQzIC0xMDUgODYgLTExNiA5NSAtMzYgMzAgLTIxOCAxNjYgLTI3MSAyMDIgLTIyNiAxNTUgLTQ4NiAzMjMgLTU5NCAzODUgLTM2IDIxIC03OCA0NiAtOTUgNTUgLTI0OCAxNDUgLTUzMCAyOTMgLTc3MCA0MDUgLTI3IDEyIC05MCA0MSAtMTM4IDY0IC00OSAyMyAtOTEgNDEgLTkzIDQxIC02IDAgLTEyOCA1MiAtMTc5IDc1IC0xNiA4IC02NCAyOCAtMTA1IDQ1IC0xMzMgNTUgLTE3NCA3MiAtMjEwIDg4IC0xOSA4IC01MyAyMSAtNzUgMjggLTIyIDcgLTc2IDI3IC0xMjAgNDQgLTIzMSA5MSAtNjAxIDIxOCAtODk1IDMxMCAtNTggMTggLTEzMCA0MCAtMTYwIDUwIC01MCAxNyAtMTM4IDQyIC0zMTAgOTAgLTY4IDE5IC0xNDYgMzkgLTI3MCA3MCAtOTAgMjIgLTE3OSA0NCAtMjgwIDcwIC00MSAxMCAtMTI5IDMwIC0xOTUgNDUgLTY2IDE0IC0xNTggMzUgLTIwNSA0NiAtNDcgMTAgLTEyMSAyNiAtMTY1IDM0IC00NCA4IC0xNTYgMjggLTI1MCA0NSAtOTMgMTggLTIwNiAzOCAtMjUwIDQ1IC00NCA3IC0xMjMgMjAgLTE3NSAyOCAtMjE3IDM2IC0zMTEgNTAgLTQyMCA2MyAtNjMgNyAtMTU4IDIwIC0yMTAgMjkgLTE0NSAyMiAtMzMwIDQ1IC00OTAgNjAgLTgwIDggLTE5OSAyMSAtMjY1IDMwIC02NiA4IC0yMzUgMjIgLTM3NSAzMSAtMTQwIDggLTMyMiAxOSAtNDA1IDI0IC0xOTAgMTEgLTg4MSAzMSAtMTAwMCAyOCAtNDkgLTEgLTEzNSAtMyAtMTkwIC01eiBtLTI3NTUgLTk5MSBjMCAtMTcgLTI3IC00MCAtODUgLTcyIC04NyAtNDkgLTI3NCAtMjAwIC00MTUgLTMzNSAtMTAwIC05NiAtMjY5IC0yNzMgLTMzMCAtMzQ0IC04OCAtMTAyIC0yNjIgLTMzOCAtMzI2IC00MzkgLTIxIC0zNCAtNTEgLTgyIC02NiAtMTA1IC00OCAtNzUgLTE0MiAtMjQ5IC0xOTcgLTM2MiAtMjkgLTYwIC01NyAtMTE4IC02MyAtMTI5IC01IC0xMCAtMTYgLTM1IC0yMyAtNTUgLTggLTIwIC0yOCAtNzAgLTQ1IC0xMTEgLTU1IC0xMzEgLTk1IC0yNTAgLTE3MCAtNTEwIC00NyAtMTY0IC0xMDMgLTQ1NSAtMTI2IC02NjAgLTQwIC0zNTMgLTM3IC0zMzMgLTY0IC0zNDcgLTMzIC0xNyAtMTg5MCAtMTkgLTE5MzggLTIgLTM2IDEyIC00MSAyNiAtMzAgOTQgNCAyOCAxNSAxMDkgMjMgMTgwIDkgNzIgMjAgMTQ0IDI1IDE2MCA1IDE3IDE0IDU3IDE5IDkwIDEyIDY1IDM3IDE1OCA4MyAzMDUgODkgMjkwIDIyNyA1NTYgNDc1IDkyMCA0NyA2OCAyMjAgMjY4IDMyMyAzNzEgNjMgNjMgMTcwIDE2MCAyMzcgMjE1IDE1NCAxMjUgMTU2IDEyNyAyODggMjE0IDYxIDQwIDEyMSA4MSAxMzUgOTAgOTAgNjAgMzc4IDIxMCA2NDUgMzM2IDg0IDM5IDMzMSAxMzggNDgwIDE5MSAzOSAxNCA5MyAzMyAxMjAgNDMgNTYgMjAgMjQ5IDgwIDQ1MCAxMzkgMzAwIDg5IDU3NSAxNDggNTc1IDEyM3ogbTY1ODUgLTI4IGMxNDUgLTM0IDI4NSAtNzAgMzY1IC05MyAyNjEgLTc2IDQ4NyAtMTQ4IDYxNSAtMTk2IDExOSAtNDUgMjAxIC03NyAyMzIgLTkxIDE3IC04IDM0IC0xNCAzOCAtMTQgNCAwIDM5IC0xNCA3OCAtMzEgMjYwIC0xMTIgNjY4IC0zMTkgODE3IC00MTMgMTUwIC05NiAzODIgLTI2MyA0NDYgLTMyMiAxNyAtMTYgNzkgLTcxIDEzNyAtMTIyIDIwNiAtMTg0IDM5NiAtNDE1IDU5MyAtNzIyIDc5IC0xMjQgMjMxIC00MzEgMjY0IC01MzQgMTEgLTM1IDExIC00MSAtNiAtNTMgLTE1IC0xMSAtMTk0IC0xMyAtMTAwOCAtMTEgbC05OTAgMyAtMTMgMjUgYy02IDE0IC0yMiA2MyAtMzMgMTEwIC0yOSAxMTYgLTY4IDI0MyAtOTYgMzE3IC0xMyAzNCAtMjQgNjUgLTI0IDcwIDAgNSAtMTYgNDcgLTM2IDkzIC0xOSA0NyAtMzggOTIgLTQxIDEwMCAtMzIgODcgLTIzMSA0NzkgLTI3NCA1NDIgLTExIDE0IC0xOSAyOCAtMTkgMzEgMCA0IC04OSAxMzggLTE4MCAyNzEgLTUyIDc3IC0yMjcgMjkzIC0zMTkgMzkzIC0xNzAgMTg2IC00MTkgNDE2IC01ODYgNTM5IC00NCAzMiAtODIgNjIgLTg1IDY1IC0zIDMgLTIwIDE0IC0zNyAyMyAtMTggOSAtMzMgMjMgLTMzIDMxIDAgMjMgNjkgMTkgMTk1IC0xMXogbS05ODU2IC0xMDEzIGMxMiAtOCAtMTUgLTQwIC0xMjAgLTE0OCAtMjMxIC0yMzggLTQxMSAtNDk3IC01ODcgLTg0OCAtNTIgLTEwNCAtNjIgLTEyNiAtMTE2IC0yNjAgLTQ2IC0xMTIgLTEzNiAtNDAxIC0xMzYgLTQzNCAwIC0xMCAtOCAtNDUgLTE5IC03NyAtMTAgLTMzIC0yMiAtODggLTI2IC0xMjQgLTQgLTM2IC0xMyAtOTUgLTIxIC0xMzEgLTcgLTM2IC0xOCAtMTM4IC0yNSAtMjI1IC04IC0xMTEgLTE2IC0xNjQgLTI1IC0xNzQgLTEzIC0xMyAtMTE3IC0xNSAtODE5IC0xNSAtNjI3IDAgLTgwNyAzIC04MTYgMTIgLTE1IDE1IC01IDY1IDM4IDE5MyA5NSAyODQgMjg1IDU3NCA1NzYgODc2IDE3NSAxODMgNDY3IDQzNCA2NTcgNTY2IDE0IDEwIDU3IDQxIDk1IDY4IDM3NiAyNzEgNzkwIDUwNiAxMjMwIDY5OSA3NSAzMyA5MiAzNiAxMTQgMjJ6IG0xMzE0MiAtNjEgYzE5NyAtODkgMzU1IC0xNjYgNDM5IC0yMTIgMjUgLTEzIDcyIC0zOSAxMDUgLTU4IDExNSAtNjIgMzQ2IC0yMDYgNDcxIC0yOTIgMTgzIC0xMjYgMjY1IC0xODggNDQ3IC0zMzcgMTIyIC0xMDAgMTk1IC0xNjggMzY3IC0zNDAgMTc5IC0xNzkgMjQ0IC0yNTYgMjM2IC0yNzYgLTUgLTEzIC04MSAtMTUgLTYxOSAtMTUgLTcwMiAwIC02MjYgLTEyIC02NzIgMTA1IC02NiAxNzIgLTgwIDIwNSAtMTE3IDI4NSAtODQgMTgyIC0xNTggMzE4IC0yODMgNTE5IC05NSAxNTEgLTMwMCA0MDIgLTQ4NyA1OTUgLTM4IDM4IC02OCA3MyAtNjggNzggMCAyMCA1NyAzIDE4MSAtNTJ6IG0tMTQyMTIgLTI4MjQgYzcgLTggMTcgLTc1IDIyIC0xNDggNSAtNzMgMTQgLTE0OSAxOSAtMTY4IDUgLTE5IDE2IC04NiAyNSAtMTQ5IDkgLTYzIDIxIC0xMjYgMjYgLTE0MCA2IC0xNCAxNyAtNTMgMjQgLTg2IDI1IC0xMDggOTMgLTMxMyAxNDUgLTQzNSAxNyAtNDEgMzcgLTkxIDQ1IC0xMTAgNTkgLTE1MyAyNTYgLTQ4OSAzNzQgLTY0MCAxMTYgLTE0NyAyNDEgLTI4OCAzMTcgLTM1NyAxNzMgLTE1NyAyMTcgLTIwMyAxOTYgLTIwMyAtMTEgMCAtMzMgNiAtNDkgMTQgLTE1IDggLTU1IDI0IC04OCAzNiAtMTQ0IDU0IC00NjcgMjA2IC02NTUgMzA4IC0zMCAxNyAtNzMgNDAgLTk1IDUxIC0yMiAxMiAtNTggMzEgLTgwIDQ0IC0yMiAxMyAtNTcgMzMgLTc4IDQ1IC02NiAzOCAtMTY5IDEwMyAtMjkyIDE4NSAtNTg4IDM5MSAtOTgyIDc3MSAtMTI1MiAxMjEyIC0xOSAzMCAtODcgMTczIC0xMTMgMjM1IC0xMiAzMCAtMjggNzAgLTM2IDg3IC0xNiA0MCAtNDQgMTU2IC00NCAxODcgMCAxMiA1IDI3IDEyIDM0IDkgOSAxOTggMTIgNzg5IDEyIDY2MSAwIDc3OCAtMiA3ODggLTE0eiBtMjQ0MiAtMiBjOCAtMTAgMTggLTY5IDI1IC0xNDggMzAgLTMyNyA4MiAtNjA1IDE2MCAtODU2IDQyIC0xMzMgOTIgLTI4NCAxMTIgLTMzNSAxMSAtMjcgMzAgLTc1IDQyIC0xMDUgMTIgLTMwIDI5IC03MyAzOSAtOTUgMTAgLTIyIDI5IC02NSA0MiAtOTUgMzIgLTcyIDE0OSAtMjk3IDE4NSAtMzU1IDY0IC0xMDIgMjEzIC0zMjQgMjU5IC0zODUgMjUwIC0zMzEgNjcyIC03MjIgOTg1IC05MTUgNDQgLTI3IDk3IC02MiAxMTcgLTc3IDIwIC0xNiA0NCAtMjggNTQgLTI4IDEwIDAgMjEgLTUgMjQgLTEwIDExIC0xOCAtMjcgLTI0IC02OSAtMTEgLTIzIDcgLTg0IDIxIC0xMzYgMzEgLTUyIDEwIC0xMTMgMjMgLTEzNSAyOSAtMjIgNiAtMTA1IDI3IC0xODUgNDYgLTE0NSAzNiAtMjU4IDY2IC0zODAgMTAzIC0zNiAxMSAtMTAzIDMyIC0xNTAgNDYgLTQ3IDE0IC0xMjMgMzkgLTE3MCA1NiAtNDcgMTcgLTExMCAzOSAtMTQwIDUwIC02MSAyMSAtMTU4IDU3IC0yMzUgODggLTI3IDExIC03MiAyOSAtMTAwIDQwIC0xNDcgNTkgLTMyNSAxNDUgLTU4MCAyODIgLTI5NSAxNTcgLTYzMyA0MDcgLTg1MiA2MjkgLTc0IDc1IC0yMTggMjQzIC0yNjcgMzExIC0yMjEgMzA4IC0zNTQgNTY0IC00NTggODgwIC02MSAxODMgLTg1IDI2NyAtOTMgMzIwIC0zIDI1IC0xMyA2OCAtMjAgOTUgLTggMjggLTI0IDEyNiAtMzUgMjE4IC0yMCAxNjAgLTIwIDE3MCAtNCAxODggMTcgMTggNDYgMTkgOTg0IDE5IDg3NyAwIDk2OSAtMiA5ODEgLTE2eiBtMTIwMTcgLTkxOSBjMjEgLTggMTEgLTY5IC0yMyAtMTQyIC0xMzggLTI5OSAtMjU5IC00OTMgLTQ1MSAtNzI4IC0xNDYgLTE3OSAtNDEyIC00MzIgLTU1OCAtNTMwIC0xNiAtMTEgLTQxIC0yOSAtNTYgLTQwIC0xNSAtMTEgLTY4IC00NiAtMTE2IC03OSAtNDkgLTMyIC0xMDAgLTY2IC0xMTQgLTc1IC0xNCAtMTAgLTUyIC0zMiAtODUgLTUxIC0zMyAtMTggLTY3IC0zOSAtNzYgLTQ3IC0xNyAtMTQgLTQ4MCAtMjQ5IC01MzQgLTI3MCAtMTYgLTcgLTUwIC0yMSAtNzUgLTMxIC0yNSAtMTEgLTc5IC0zNCAtMTIwIC01MSAtNDEgLTE4IC05NyAtNDEgLTEyNSAtNTEgLTI3IC0xMCAtODEgLTMwIC0xMjAgLTQ1IC0xOTMgLTcyIC0zODEgLTEzMiAtNjQ1IC0yMDQgLTYzIC0xNyAtMTQ2IC00MCAtMTg1IC01MSAtMTA0IC0yOSAtMjQxIC02MiAtMzIwIC03NSAtMzggLTcgLTEwNCAtMjEgLTE0NiAtMzAgLTcyIC0xNyAtMTI5IC0xNSAtMTI5IDQgMCA1IDI0IDIwIDUzIDM1IDIyMSAxMDkgNTkwIDM4NyA4MTUgNjE1IDI1MyAyNTYgNDA4IDQ2MCA2MjkgODI2IDcgMTEgMzMgNjEgNTkgMTEwIDI1IDUwIDUwIDk1IDU0IDEwMCAxMCAxNCAxMTIgMjQ3IDE0MCAzMjAgMTMgMzMgMzAgODAgNDAgMTA1IDIwIDUyIDYwIDE4MSA5MSAyOTMgMTIgNDMgMzAgODQgMzkgOTAgMTMgOSAyNDggMTIgOTgwIDEwIDUzMCAtMSA5NzAgLTUgOTc4IC04eiBtMTc5NyAzIGMzIC0zIC0yIC0yMiAtMTEgLTQzIC0xMCAtMjQgLTg4IC0xMTAgLTIyMiAtMjQ0IC0yNjcgLTI2NyAtNDEwIC0zODUgLTY5MSAtNTc2IC0xNzcgLTEyMCAtMjExIC0xNDEgLTQ4MSAtMjk4IC01NCAtMzEgLTM2NSAtMTg4IC00NTkgLTIzMSAtMjAxIC05MiAtMzM4IC0xNDUgLTM3OCAtMTQ2IC0yNyAwIC0xMSAzNCAzNSA3NCAyMDYgMTc4IDQxMSA0MDkgNTQ2IDYxNiA4MCAxMjIgOTIgMTQxIDEzOSAyMjUgMzkgNzAgMTQ1IDI4NCAxNjggMzQwIDI5IDcwIDY3IDE3NSA3MyAyMDAgMTAgNDAgMzMgNzUgNTYgODMgMjEgOCAxMjE4IDggMTIyNSAweiIvPiA8L2c+PC9nPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNTM5LjM3NywyMjAuMDAwKSI+PGcgZmlsbD0iY3VycmVudENvbG9yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzQuMTgxOCw1NDYuMTgxOCkgc2NhbGUoMC43MjcyNzMsLTAuNzI3MjczKSI+PHBhdGggZD0iTTQxOS4wIC0xOVEzMTkuNSAtMTkuMCAyNDguNzUgMTUuNzVRMTc4LjAgNTAuNSAxMzMuNSAxMDYuNzVRODkuMCAxNjMgNjguMCAyMjguNzVRNDcuMCAyOTQuNSA0Ny4wIDM1NlYzNzhRNDcuMCA0NDUuNSA2OC41IDUxMS43NVE5MC4wIDU3OCAxMzQuNzUgNjMyLjBRMTc5LjUgNjg2LjAgMjQ5LjAgNzE4LjVRMzE4LjUgNzUxLjAgNDEzLjUgNzUxLjBRNTEyLjUgNzUxLjAgNTg2LjI1IDcxNS4yNVE2NjAuMCA2NzkuNSA3MDQuMCA2MTUuMjVRNzQ4LjAgNTUxIDc1Ni41IDQ2NS4wSDYxMy41UTYwNi4wIDUxNSA1NzguNSA1NDkuMjVRNTUxLjAgNTgzLjUgNTA4Ljc1IDYwMS4yNVE0NjYuNSA2MTkuMCA0MTMuNSA2MTkuMFEzNTkuNSA2MTkuMCAzMTcuNzUgNjAwLjI1UTI3Ni4wIDU4MS41IDI0OC4wIDU0Ny41UTIyMC4wIDUxMy41IDIwNS41IDQ2Ny41UTE5MS4wIDQyMS41IDE5MS4wIDM2NlExOTEuMCAzMTIgMjA1LjUgMjY2LjBRMjIwLjAgMjIwIDI0OS4wIDE4NS41UTI3OC4wIDE1MSAzMjAuNSAxMzIuMFEzNjMuMCAxMTMgNDE5LjAgMTEzUTUwMS4wIDExMyA1NTcuMjUgMTUzLjVRNjEzLjUgMTk0LjAgNjI1LjUgMjY3LjBINzY4LjVRNzU5LjAgMTg4LjUgNzE1Ljc1IDEyMy41UTY3Mi41IDU4LjUgNTk3Ljc1IDE5Ljc1UTUyMy4wIC0xOSA0MTkuMCAtMTlaIE05NDkuMCAwVjczNUgxMDkxLjBWMFpNMTM5NC41IDAuMCAxMTcxLjAgMzE3LjVIMTMyOS41TDE1NjEuMCAwWk0xMDQ5LjAgMjQ0VjM1OUgxMjM0LjVRMTI3NC4wIDM1OSAxMzAyLjUgMzc1LjBRMTMzMS4wIDM5MSAxMzQ2Ljc1IDQxOS43NVExMzYyLjUgNDQ4LjUgMTM2Mi41IDQ4Ni4wUTEzNjIuNSA1MjQuMCAxMzQ2Ljc1IDU1Mi43NVExMzMxLjAgNTgxLjUgMTMwMi41IDU5Ny43NVExMjc0LjAgNjE0IDEyMzQuNSA2MTQuMEgxMDQ5LjBWNzM1SDEyMjAuMFExMzA3LjUgNzM1LjAgMTM3Mi4wIDcwOC43NVExNDM2LjUgNjgyLjUgMTQ3MS41IDYyOS43NVExNTA2LjUgNTc3LjAgMTUwNi41IDQ5Ni41VjQ4MC41UTE1MDYuNSA0MDAuMCAxNDcxLjAgMzQ3Ljc1UTE0MzUuNSAyOTUuNSAxMzcxLjUgMjY5Ljc1UTEzMDcuNSAyNDQuMCAxMjIwLjAgMjQ0WiBNMTczMS4wIDBWNzMwSDE4NzMuMFYwWiBNMjI1OS4wIDBWNjI1SDI0MDEuMFYwWk0yMDQ4LjAgNjA1VjczMEgyNjEyLjBWNjA1WiBNMjc4NS4wIDBWNzMwSDI5MjQuMFYwWk0yOTA0LjAgMFYxMjBIMzIzNS4wVjBaTTI5MDQuMCAzMTFWNDMxSDMyMDkuMFYzMTFaTTI5MDQuMCA2MTBWNzMwSDMyMjcuMFY2MTBaIE0zNDQxLjAgMFY3MzVIMzU4My4wVjBaTTM4ODYuNSAwLjAgMzY2My4wIDMxNy41SDM4MjEuNUw0MDUzLjAgMFpNMzU0MS4wIDI0NFYzNTlIMzcyNi41UTM3NjYuMCAzNTkgMzc5NC41IDM3NS4wUTM4MjMuMCAzOTEgMzgzOC43NSA0MTkuNzVRMzg1NC41IDQ0OC41IDM4NTQuNSA0ODYuMFEzODU0LjUgNTI0LjAgMzgzOC43NSA1NTIuNzVRMzgyMy4wIDU4MS41IDM3OTQuNSA1OTcuNzVRMzc2Ni4wIDYxNCAzNzI2LjUgNjE0LjBIMzU0MS4wVjczNUgzNzEyLjBRMzc5OS41IDczNS4wIDM4NjQuMCA3MDguNzVRMzkyOC41IDY4Mi41IDM5NjMuNSA2MjkuNzVRMzk5OC41IDU3Ny4wIDM5OTguNSA0OTYuNVY0ODAuNVEzOTk4LjUgNDAwLjAgMzk2My4wIDM0Ny43NVEzOTI3LjUgMjk1LjUgMzg2My41IDI2OS43NVEzNzk5LjUgMjQ0LjAgMzcxMi4wIDI0NFogTTQyMjMuMCAwVjczMEg0MzY1LjBWMFogTTQ5MDcuNSAtMTkuMFE0ODA1LjUgLTE5LjAgNDczNS41IDE5Ljc1UTQ2NjUuNSA1OC41IDQ2MjkuMjUgMTI5LjBRNDU5My4wIDE5OS41IDQ1OTMuMCAyOTQuNVY3MzBINDczNS4wVjI4Ni41UTQ3MzUuMCAyMzQuNSA0NzU1LjAgMTk1LjI1UTQ3NzUuMCAxNTYgNDgxMy41IDEzNC41UTQ4NTIuMCAxMTMgNDkwNy41IDExMy4wUTQ5NjMuMCAxMTMgNTAwMS4yNSAxMzQuMjVRNTAzOS41IDE1NS41IDUwNTkuMjUgMTk0LjVRNTA3OS4wIDIzMy41IDUwNzkuMCAyODYuNVY3MzBINTIyMS4wVjI5NC41UTUyMjEuMCAxOTkuNSA1MTg1LjI1IDEyOS4wUTUxNDkuNSA1OC41IDUwNzkuNzUgMTkuNzVRNTAxMC4wIC0xOSA0OTA3LjUgLTE5LjBaIE01NDQ3LjAgMFY3MzBINTY0MS4wTDU4MjQuMCAyOTRINTg0Mi4wTDYwMjQuMCA3MzBINjIyMS4wVjBINjA4MC4wVjYyM0w2MDk4LjAgNjIxTDU5MDAuNSAxNDkuMEg1NzU2LjBMNTU1Ny41IDYyMS4wTDU1NzcuMCA2MjNWMFoiLz48L2c+PC9nPjwvc3ZnPg==); --crm-snap: cubic-bezier(0.16, 1, 0.3, 1); --crm-curva: cubic-bezier(0.65, 0, 0.35, 1); --crm-t-pulsar: 80ms; --crm-t-color: 120ms; --crm-t-salida: 120ms; --crm-t-gesto: 160ms; --crm-t-entrada: 180ms; --crm-t-panel: 240ms; --crm-t-capa: 320ms; --crm-t-dibujo: 600ms; --crm-t-retardo: 300ms; --crm-t-tostada: 5000ms; --crm-t-latido: 2400ms; --crm-t-filo: 1600ms; --crm-t-corriente: 1200ms; --crm-t-barrido: 1600ms; --crm-t-giro: 800ms; --crm-t-confirmar: 3000ms; --crm-t-escalon: 24ms; --crm-placa-fondo: #ffffff; --crm-placa-tinta: #111111; --crm-placa-azul: #003399; --crm-placa-estrella: #ffcc00; --crm-placa-letra-ue: #ffffff; --crm-placa-apagado: #5c5c5c; --crm-fv-dgt-azul: #009ee0; --crm-fv-dgt-verde: #00a651; --crm-fv-dgt-amarillo: #ffed00; --crm-fv-dgt-tinta: #111111; --crm-rejilla: color-mix(in oklab, var(--crm-line) 50%, var(--crm-line-2)); } @media print { .crm-parte, .crm-papel { color-scheme: light; --crm-bg: #f6f5f2; --crm-panel: #ffffff; --crm-panel-2: #f0eee9; --crm-panel-3: #e8e5df; --crm-line: #e3e0da; --crm-line-2: #cfcac2; --crm-control: #8d877e; --crm-linea-apagada: #b9b4ad; --crm-text: #121110; --crm-text-2: #33302c; --crm-muted: #5b5752; --crm-dim: #69655e; --crm-acento: #117343; --crm-acento-2: #0e6338; --crm-acento-suave: rgb(17 115 67 / 0.09); --crm-acento-linea: #4aa16e; --crm-sobre-acento: #ffffff; --crm-luz: #1b9a5c; --crm-error: #a8412a; --crm-error-suave: rgb(168 65 42 / 0.08); --crm-error-linea: #e07155; --crm-aviso: #8a580e; --crm-aviso-suave: rgb(138 88 14 / 0.09); --crm-aviso-linea: #bf853e; --crm-boton: #121110; --crm-boton-tinta: #fafafa; --crm-velo: rgb(246 245 242 / 0.86); --crm-telon: rgb(246 245 242 / 0.72); --crm-sombra: 0 0 0 1px rgb(40 32 24 / 0.06), 0 24px 64px rgb(40 32 24 / 0.14); --crm-sombra-capa: 0 0 0 1px rgb(40 32 24 / 0.06), 0 8px 24px rgb(40 32 24 / 0.1); --crm-sombra-hundida: inset 0 1px 2px rgb(40 32 24 / 0.06); --crm-seleccion: rgb(17 115 67 / 0.18); --crm-esqueleto-a: #efede8; --crm-esqueleto-b: #e4e1da; --crm-acento-halo: rgb(17 115 67 / 0.22); --crm-serie-1: #564f47; --crm-serie-2: #ab7a3e; --crm-serie-3: #a15141; --crm-serie-4: #699273; --crm-serie-5: #7c5777; --crm-serie-6: #928a83; --crm-serie-comparacion: var(--crm-muted); --crm-serie-reposo: #8d877e; --crm-serie-destacada: var(--crm-acento); --crm-sobre-serie-1: #ffffff; --crm-calor-tinta-3: var(--crm-text); --crm-foco-ancho: 1px; --crm-pie-fondo: #eeebe5; --crm-pie-lockup: #c3beb7; --crm-pie-apellido: #38905e; --crm-ascii-reposo: #5c554b; --crm-ascii-luz: var(--crm-acento); --crm-apagado: 0.32; } } @media (forced-colors: active) { :root, [data-crm-tema] { --crm-bg: Canvas; --crm-panel: Canvas; --crm-panel-2: Canvas; --crm-panel-3: Canvas; --crm-line: CanvasText; --crm-line-2: CanvasText; --crm-control: CanvasText; --crm-linea-apagada: GrayText; --crm-text: CanvasText; --crm-text-2: CanvasText; --crm-muted: CanvasText; --crm-dim: GrayText; --crm-acento: Highlight; --crm-acento-2: Highlight; --crm-acento-suave: Canvas; --crm-acento-linea: Highlight; --crm-sobre-acento: HighlightText; --crm-luz: Highlight; --crm-error: CanvasText; --crm-error-linea: CanvasText; --crm-aviso: CanvasText; --crm-aviso-linea: CanvasText; --crm-boton: ButtonText; --crm-boton-tinta: ButtonFace; --crm-seleccion: Highlight; --crm-sombra: none; --crm-sombra-capa: none; --crm-sombra-hundida: none; --crm-acento-halo: transparent; --crm-esqueleto-a: Canvas; --crm-esqueleto-b: GrayText; --crm-foco-ancho: 2px; --crm-pie-fondo: Canvas; --crm-pie-lockup: GrayText; --crm-pie-apellido: Highlight; --crm-ascii-reposo: GrayText; --crm-ascii-luz: Highlight; } } :where(.crm-raiz, .crm-capa) { color: var(--crm-text); font-family: var(--crm-sans); -webkit-font-smoothing: antialiased; } :where(.crm-raiz) { background: var(--crm-bg); } :where(html[data-crm-tema]), :where(html[data-crm-tema]) :where(body) { background: var(--crm-bg); } :where(.crm-raiz, .crm-capa) :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, span, label, input, textarea, select, button, a, blockquote) { font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; } :where(.crm-raiz, .crm-capa) ::selection { background: var(--crm-seleccion); color: var(--crm-text); } :where(.crm-raiz, .crm-capa) :where(*) { scrollbar-color: var(--crm-line-2) transparent; scrollbar-width: thin; } :where(.crm-unidad) { text-transform: none; } :where(.crm-marca, .crm-raiz, .crm-marco, .crm-capa, .crm-pie, .crm-gr, .crm-gr-marco, .crm-gr-ampliado, .crm-tabla, .crm-kpi, .crm-ficha, .crm-linea, .crm-lista, .crm-kanban, .crm-agenda, .crm-dato-vacio) :where(:focus-visible) { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } :where(.crm-marca, .crm-raiz, .crm-marco, .crm-capa) :where([tabindex="-1"]:not(a, button, input, select, textarea, summary, [role=button], [role=link], [role=option], [role=menuitem], [role=menuitemcheckbox], [role=menuitemradio], [role=tab], [role=row], [role=gridcell], [role=cell], [role=treeitem], [role=radio], [role=checkbox], [role=switch], [role=slider]):focus) { outline: none; } :where(.crm-boton, .crm-grupo-botones, .crm-ctl-campo, .crm-entrada, .crm-selector-lista, .crm-opcion, .crm-conmutador, .crm-etiqueta, .crm-estado, .crm-contador, .crm-tecla, .crm-teclas, .crm-avatar, .crm-aviso, .crm-tostadas, .crm-vacio, .crm-esqueleto, .crm-cargando), :where(.crm-boton, .crm-grupo-botones, .crm-ctl-campo, .crm-entrada, .crm-selector-lista, .crm-opcion, .crm-conmutador, .crm-etiqueta, .crm-estado, .crm-aviso, .crm-tostadas, .crm-vacio) *, :where(.crm-boton, .crm-grupo-botones, .crm-ctl-campo, .crm-entrada, .crm-selector-lista, .crm-opcion, .crm-conmutador, .crm-etiqueta, .crm-estado, .crm-aviso, .crm-tostadas, .crm-vacio) ::before, :where(.crm-boton, .crm-grupo-botones, .crm-ctl-campo, .crm-entrada, .crm-selector-lista, .crm-opcion, .crm-conmutador, .crm-etiqueta, .crm-estado, .crm-aviso, .crm-tostadas, .crm-vacio) ::after { box-sizing: border-box; } .crm-boton:focus-visible, .crm-casilla:focus-visible, .crm-radio:focus-visible, .crm-interruptor:focus-visible, .crm-entrada-accion:focus-visible, .crm-etiqueta-quitar:focus-visible, .crm-aviso-cerrar:focus-visible, .crm-tostada-accion:focus-visible, .crm-tostada-cerrar:focus-visible, .crm-pestana-panel:focus-visible, .crm-zona-archivo-nombre[data-cortado]:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-boton { --crm-boton-alto: 32px; --crm-boton-relleno: 12px; --crm-boton-icono: 16px; position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 8px; height: var(--crm-boton-alto); min-height: var(--crm-boton-alto); margin: 0; padding: 0 var(--crm-boton-relleno); border: 1px solid transparent; border-radius: 0; background: transparent; color: var(--crm-text); font-family: var(--crm-sans); font-size: 13px; font-weight: 500; line-height: 20px; letter-spacing: -0.005em; text-transform: none; text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background-color var(--crm-t-color) ease-out, border-color var(--crm-t-color) ease-out, color var(--crm-t-color) ease-out, transform var(--crm-t-pulsar) var(--crm-snap); } .crm-boton[data-tamano=mini] { --crm-boton-alto: 24px; --crm-boton-relleno: 8px; --crm-boton-icono: 14px; gap: 6px; font-size: 12px; line-height: 16px; } .crm-boton[data-tamano=compacto] { --crm-boton-alto: 28px; --crm-boton-relleno: 10px; --crm-boton-icono: 14px; gap: 6px; } .crm-boton[data-tamano=grande] { --crm-boton-alto: 40px; --crm-boton-relleno: 16px; font-size: 14px; } .crm-boton[data-tamano=tactil] { --crm-boton-alto: 48px; --crm-boton-relleno: 16px; font-size: 15px; line-height: 24px; } .crm-boton:not(.crm-boton-solo-icono):has(> .crm-boton-icono:first-child) { padding-left: calc(var(--crm-boton-relleno) - 2px); } .crm-boton:not(.crm-boton-solo-icono):has(> .crm-boton-icono:last-child) { padding-right: calc(var(--crm-boton-relleno) - 2px); } .crm-boton[data-tamano=grande]:not(.crm-boton-solo-icono):has(> .crm-boton-icono:first-child) { padding-left: 12px; } .crm-boton[data-tamano=grande]:not(.crm-boton-solo-icono):has(> .crm-boton-icono:last-child) { padding-right: 12px; } .crm-boton > svg { flex: none; width: var(--crm-boton-icono); height: var(--crm-boton-icono); stroke-width: 1.6; } .crm-boton:is([data-tamano=mini], [data-tamano=compacto]) > svg { stroke-width: 1.5; } .crm-boton:not(.crm-boton-solo-icono):has(> svg:first-child) { padding-left: calc(var(--crm-boton-relleno) - 2px); } .crm-boton[data-tamano=grande]:not(.crm-boton-solo-icono):has(> svg:first-child) { padding-left: 12px; } .crm-boton[data-completo] { display: flex; width: 100%; } .crm-boton { max-width: 100%; } .crm-boton-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (min-width: 601px) { .crm-boton[data-variante=acento][data-completo] { display: inline-flex; width: auto; min-width: 160px; } } .crm-boton-icono { display: inline-grid; flex: none; place-items: center; width: var(--crm-boton-icono); height: var(--crm-boton-icono); } .crm-boton-icono svg { width: var(--crm-boton-icono); height: var(--crm-boton-icono); stroke-width: 1.6; } .crm-boton[data-tamano=mini] .crm-boton-icono svg, .crm-boton[data-tamano=compacto] .crm-boton-icono svg { stroke-width: 1.5; } .crm-boton-icono[data-flecha] svg { transition: transform var(--crm-t-gesto) var(--crm-snap); } .crm-boton-atajo { margin-right: -4px; } .crm-boton[data-tamano=mini] .crm-boton-atajo { margin-right: -2px; } .crm-boton[data-variante=principal] { border-color: var(--crm-boton); background: var(--crm-boton); color: var(--crm-boton-tinta); } .crm-boton[data-variante=firma] { border-color: var(--crm-boton); background: var(--crm-boton); color: var(--crm-boton-tinta); font-family: var(--crm-mono); font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-boton[data-variante=firma][data-tamano=mini] { font-size: 11px; } .crm-boton[data-variante=acento] { border-color: var(--crm-acento); background: var(--crm-acento); color: var(--crm-sobre-acento); } .crm-boton[data-variante=secundario] { border-color: var(--crm-line-2); background: var(--crm-panel); } .crm-boton[data-variante=fantasma] { color: var(--crm-text-2); } .crm-boton[data-variante=peligro] { border-color: var(--crm-error-linea); color: var(--crm-error); } .crm-boton[aria-pressed=true]:is([data-variante=secundario], [data-variante=fantasma]) { border-color: var(--crm-line-2); background: var(--crm-panel-3); color: var(--crm-text); } @media (hover: hover) { .crm-boton:hover .crm-boton-icono[data-flecha] svg { transform: translateX(2px); } .crm-boton[data-variante=principal]:hover { border-color: color-mix(in oklab, var(--crm-boton) 88%, var(--crm-bg)); background: color-mix(in oklab, var(--crm-boton) 88%, var(--crm-bg)); } .crm-boton[data-variante=firma]:hover { border-color: var(--crm-acento); background: var(--crm-acento); color: var(--crm-sobre-acento); } .crm-boton[data-variante=acento]:hover { border-color: var(--crm-acento-2); background: var(--crm-acento-2); } .crm-boton[data-variante=secundario]:hover { border-color: var(--crm-control); background: var(--crm-panel-2); } .crm-boton[data-variante=fantasma]:hover { background: var(--crm-panel-2); color: var(--crm-text); } .crm-boton[data-variante=peligro]:hover { border-color: var(--crm-error); background: var(--crm-error-suave); } } .crm-boton:active:not([data-deshabilitado], [data-cargando]) { transform: translateY(0.5px); transition-duration: var(--crm-t-pulsar); } .crm-boton[data-variante=secundario]:active:not([data-deshabilitado], [data-cargando]), .crm-boton[data-variante=fantasma]:active:not([data-deshabilitado], [data-cargando]) { background: var(--crm-panel-3); } .crm-boton[data-variante=principal]:active:not([data-deshabilitado], [data-cargando]) { border-color: color-mix(in oklab, var(--crm-boton) 78%, var(--crm-bg)); background: color-mix(in oklab, var(--crm-boton) 78%, var(--crm-bg)); } .crm-boton[data-variante=firma]:active:not([data-deshabilitado], [data-cargando]), .crm-boton[data-variante=acento]:active:not([data-deshabilitado], [data-cargando]) { border-color: var(--crm-acento-2); background: var(--crm-acento-2); color: var(--crm-sobre-acento); } .crm-boton[data-variante=peligro]:active:not([data-deshabilitado], [data-cargando]) { background: var(--crm-error-suave); } .crm-boton[data-deshabilitado], .crm-boton[data-deshabilitado]:hover, .crm-boton[data-deshabilitado]:active { border-color: var(--crm-linea-apagada); background: transparent; color: var(--crm-dim); cursor: not-allowed; } .crm-boton[data-variante=fantasma][data-deshabilitado] { border-color: transparent; } .crm-boton[data-deshabilitado] .crm-boton-icono[data-flecha] svg { transform: none; } .crm-boton[data-variante=enlace] { --crm-boton-alto: 16px; --crm-boton-icono: 14px; gap: 6px; max-width: 100%; height: auto; min-height: 0; padding: 0; border: 0; color: var(--crm-text-2); font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; text-decoration-line: underline; text-decoration-color: var(--crm-line-2); text-decoration-thickness: 1px; text-underline-offset: 3px; vertical-align: baseline; } .crm-boton[data-variante=enlace]:not(.crm-boton-solo-icono):has(> .crm-boton-icono) { padding: 0; } .crm-boton[data-variante=enlace]:active:not([data-deshabilitado], [data-cargando]) { transform: none; } @media (hover: hover) { .crm-boton[data-variante=enlace]:not([data-deshabilitado]):hover { color: var(--crm-text); text-decoration-color: currentColor; } } .crm-boton[data-variante=enlace][data-deshabilitado], .crm-boton[data-variante=enlace][data-deshabilitado]:hover { border: 0; text-decoration-color: var(--crm-linea-apagada); } .crm-boton[data-cargando] { cursor: progress; pointer-events: auto; } .crm-boton[data-cargando]::before { content: ""; position: absolute; inset: auto -1px -1px; height: 2px; background: linear-gradient( 90deg, transparent, var(--crm-acento) 50%, transparent) no-repeat; background-size: 40% 100%; background-position: -40% 0; animation: crm-filo-continuo var(--crm-t-filo) var(--crm-curva) infinite; } .crm-boton[data-variante=principal][data-cargando], .crm-boton[data-variante=principal][data-cargando]:hover, .crm-boton[data-variante=firma][data-cargando], .crm-boton[data-variante=firma][data-cargando]:hover { border-color: var(--crm-boton); background: var(--crm-boton); color: var(--crm-boton-tinta); } .crm-boton[data-variante=acento][data-cargando]::before { background-image: linear-gradient( 90deg, transparent, var(--crm-sobre-acento) 50%, transparent); } .crm-boton[data-cargando] .crm-boton-icono[data-flecha] svg { transform: none; } .crm-boton-giro { display: block; width: calc(var(--crm-boton-icono) - 2px); height: calc(var(--crm-boton-icono) - 2px); border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; opacity: 0.8; animation: crm-ctl-giro var(--crm-t-giro) linear infinite; } .crm-boton.crm-boton-solo-icono { width: var(--crm-boton-alto); padding: 0; } .crm-boton-solo-icono[data-variante=fantasma] { color: var(--crm-muted); } .crm-boton-solo-icono:active:not([data-deshabilitado], [data-cargando]) { transform: scale(0.96); } .crm-boton-solo-icono[data-variante=fantasma]:is([data-state=open], [aria-expanded=true]) { background: var(--crm-panel-3); color: var(--crm-text); } @media (hover: hover) { .crm-boton-solo-icono[data-variante=fantasma]:hover { color: var(--crm-text); } } @media (pointer: coarse) { .crm-boton:is([data-tamano=mini], [data-tamano=compacto], [data-tamano=normal], [data-tamano=grande]) { --crm-boton-reserva: max(0px, calc((min(44px, calc(var(--crm-toque-max, 45px) - 1px)) - var(--crm-boton-alto)) / 2 + 1px)); } .crm-boton:is([data-tamano=mini], [data-tamano=compacto], [data-tamano=normal], [data-tamano=grande])::after { content: ""; position: absolute; inset: calc(-1 * var(--crm-boton-arriba, var(--crm-boton-reserva))) 0 calc(-1 * var(--crm-boton-abajo, var(--crm-boton-reserva))); } .crm-boton-solo-icono::after { content: ""; position: absolute; inset: calc(-1 * var(--crm-boton-arriba, var(--crm-boton-reserva, 0px))) min(0px, calc((var(--crm-boton-alto) - 44px) / 2)) calc(-1 * var(--crm-boton-abajo, var(--crm-boton-reserva, 0px))); } .crm-boton:is([data-tamano=mini], [data-tamano=compacto], [data-tamano=normal], [data-tamano=grande])::after { transition: transform var(--crm-t-pulsar) var(--crm-snap); } .crm-boton:is([data-tamano=mini], [data-tamano=compacto], [data-tamano=normal], [data-tamano=grande]):active:not([data-deshabilitado], [data-cargando])::after { transform: translateY(-0.5px); } .crm-boton.crm-boton-solo-icono:is([data-tamano=mini], [data-tamano=compacto], [data-tamano=normal], [data-tamano=grande]):active:not([data-deshabilitado], [data-cargando])::after { transform: scale(calc(1 / 0.96)); } @media (prefers-reduced-motion: reduce) { .crm-boton:is([data-tamano=mini], [data-tamano=compacto], [data-tamano=normal], [data-tamano=grande])::after, .crm-boton:is([data-tamano=mini], [data-tamano=compacto], [data-tamano=normal], [data-tamano=grande]):active:not([data-deshabilitado], [data-cargando])::after, .crm-boton.crm-boton-solo-icono:is([data-tamano=mini], [data-tamano=compacto], [data-tamano=normal], [data-tamano=grande]):active:not([data-deshabilitado], [data-cargando])::after { transform: none; transition: none; } } } .crm-boton[data-confirmando], .crm-boton[data-confirmando]:hover { border-color: var(--crm-error); background: var(--crm-error-suave); color: var(--crm-error); } .crm-boton[data-confirmando]::before { content: ""; position: absolute; inset: auto -1px -1px; height: 2px; background: var(--crm-error); transform-origin: left center; animation: crm-ctl-vida var(--crm-confirmar-espera, var(--crm-t-confirmar)) linear forwards; } .crm-boton-solo-icono .crm-boton-icono { position: relative; } .crm-boton-indicador { position: absolute; top: -2px; right: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--crm-acento); pointer-events: none; } .crm-grupo-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .crm-grupo-botones[data-alineacion=fin] { justify-content: flex-end; } .crm-grupo-botones[data-alineacion=extremos] { justify-content: space-between; } .crm-grupo-botones[data-unido] { flex-wrap: nowrap; gap: 0; } .crm-grupo-botones[data-unido] > .crm-boton + .crm-boton { margin-left: -1px; } .crm-grupo-botones[data-unido] > .crm-boton:hover, .crm-grupo-botones[data-unido] > .crm-boton:focus-visible, .crm-grupo-botones[data-unido] > .crm-boton[aria-pressed=true] { z-index: 1; } @media (max-width: 30em) { .crm-grupo-botones[data-apilar] { flex-direction: column; align-items: stretch; } .crm-grupo-botones[data-apilar] > .crm-boton { width: 100%; } } .crm-ctl-campo { display: grid; align-content: start; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; } .crm-ctl-campo-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; } .crm-ctl-rotulo { display: inline-flex; align-items: baseline; gap: 6px; color: var(--crm-text-2); font-family: var(--crm-sans); font-size: 13px; font-weight: 500; line-height: 20px; letter-spacing: -0.005em; text-transform: none; } .crm-ctl-rotulo-nota { color: var(--crm-dim); font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: 0; text-transform: none; } .crm-ctl-campo[data-variante=ficha] { gap: 4px; } .crm-ctl-campo[data-variante=ficha] > .crm-ctl-campo-cabeza > .crm-ctl-rotulo, .crm-ctl-campo[data-variante=ficha] > .crm-ctl-rotulo { color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; font-weight: 400; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-ctl-campo-extra { color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-ctl-campo-extra a { color: var(--crm-text-2); text-decoration: underline; text-decoration-color: var(--crm-line-2); text-underline-offset: 3px; } .crm-ctl-campo[data-deshabilitado] .crm-ctl-rotulo { color: var(--crm-dim); } .crm-ctl-ayuda { margin: 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-ctl-error { display: grid; grid-template-columns: 14px minmax(0, 1fr); align-items: start; gap: 4px 6px; color: var(--crm-error); font-size: 12px; line-height: 16px; } .crm-ctl-error > svg { width: 14px; height: 14px; margin-top: 1px; } .crm-ctl-error-recuperacion { display: flex; flex-wrap: wrap; gap: 8px; grid-column: 2; margin-top: 4px; } .crm-grupo-radio .crm-ctl-error { grid-template-columns: minmax(0, 1fr); } .crm-entrada { --crm-entrada-alto: 32px; position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; height: var(--crm-entrada-alto); min-height: var(--crm-entrada-alto); margin: 0; padding: 0 12px; border: 1px solid var(--crm-control); border-radius: 0; background: var(--crm-panel); color: var(--crm-text); font-family: var(--crm-sans); font-size: 14px; line-height: 22px; transition: border-color var(--crm-t-color) ease-out, box-shadow var(--crm-t-color) ease-out; } .crm-entrada[data-tamano=mini] { --crm-entrada-alto: 24px; gap: 6px; padding: 0 8px; font-size: 12px; line-height: 16px; } .crm-entrada[data-tamano=compacto] { --crm-entrada-alto: 28px; gap: 6px; padding: 0 10px; font-size: 13px; line-height: 20px; } .crm-entrada[data-tamano=compacto]:not(.crm-selector, [data-variante=filtro], [data-solo-lectura]) { font-size: 14px; line-height: 22px; } .crm-entrada[data-tamano=grande] { --crm-entrada-alto: 40px; padding: 0 16px; } @media (hover: hover) { .crm-entrada:hover:not([data-deshabilitado], [data-solo-lectura], :focus-within, [data-state=open], [data-abierto]) { border-color: var(--crm-muted); } } .crm-entrada:focus-within:not(:has(.crm-entrada-accion:focus)), .crm-entrada[data-state=open], .crm-entrada[data-abierto] { border-color: var(--crm-acento); } .crm-entrada:focus-visible, .crm-entrada-control:focus, .crm-entrada-control:focus-visible { outline: none; } .crm-entrada[data-invalido] { border-color: var(--crm-error-linea); } .crm-entrada[data-invalido]:is(:focus-within, [data-state=open], [data-abierto]):not(:has(.crm-entrada-accion:focus)) { border-color: var(--crm-error); } .crm-entrada[data-solo-lectura] { border-color: var(--crm-line-2); background: transparent; } .crm-entrada[data-deshabilitado] { border-color: var(--crm-linea-apagada); background: transparent; color: var(--crm-dim); cursor: not-allowed; } .crm-entrada-control { flex: 1; width: 100%; min-width: 0; height: calc(var(--crm-entrada-alto) - 2px); margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; letter-spacing: -0.005em; caret-color: var(--crm-acento); appearance: none; } .crm-entrada-control[data-mono] { font-family: var(--crm-mono); font-size: 13px; letter-spacing: 0; } .crm-entrada[data-tamano=mini] .crm-entrada-control[data-mono] { font-size: 12px; } .crm-entrada-control::placeholder { color: var(--crm-dim); opacity: 1; } :is(.crm-entrada-control, .crm-campo-entrada, .crm-selector-filtro-control, .crm-fecha-escribir-control, .crm-confirmar-campo, .crm-paleta-campo, .crm-atajos-campo, .crm-va-historial-campo, .crm-tabla-busqueda input):placeholder-shown { text-overflow: ellipsis; } .crm-entrada-control::selection { background: var(--crm-seleccion); color: var(--crm-text); } :where(select) :where(option, optgroup) { background-color: var(--crm-panel-2); color: var(--crm-text); } :where(select) :where(option:disabled) { color: var(--crm-dim); } .crm-entrada-control:disabled { color: var(--crm-dim); cursor: not-allowed; -webkit-text-fill-color: var(--crm-dim); } .crm-entrada-control:-webkit-autofill { -webkit-text-fill-color: var(--crm-text); transition: background-color calc(var(--crm-t-dibujo) * 100000) ease-out; } .crm-entrada-control::-webkit-search-cancel-button { appearance: none; } .crm-entrada-icono { display: grid; flex: none; place-items: center; color: var(--crm-muted); transition: color var(--crm-t-color) ease-out; } .crm-entrada-icono svg { width: 16px; height: 16px; stroke-width: 1.6; } .crm-entrada:is([data-tamano=mini], [data-tamano=compacto]) .crm-entrada-icono svg { width: 14px; height: 14px; stroke-width: 1.5; } .crm-entrada:focus-within .crm-entrada-icono { color: var(--crm-text); } .crm-entrada[data-invalido] .crm-entrada-icono { color: var(--crm-error); } .crm-entrada[data-deshabilitado] .crm-entrada-icono { color: var(--crm-dim); } .crm-entrada-sufijo { display: inline-flex; flex: none; align-items: center; gap: 6px; margin-right: -6px; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 12px; line-height: 16px; } .crm-entrada-unidad { margin-right: 6px; color: var(--crm-muted); font-variant-numeric: tabular-nums; } .crm-entrada-accion { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 8px; border: 1px solid var(--crm-line-2); border-radius: 0; background: transparent; color: var(--crm-muted); font-family: var(--crm-sans); font-size: 12px; font-weight: 500; line-height: 16px; text-transform: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--crm-t-color) ease-out, border-color var(--crm-t-color) ease-out, background-color var(--crm-t-color) ease-out; } .crm-entrada:is([data-tamano=mini], [data-tamano=compacto]) .crm-entrada-accion { min-width: 20px; height: 20px; padding: 0 6px; } .crm-entrada-accion-icono { padding: 0; border-color: transparent; } .crm-entrada-accion svg { width: 14px; height: 14px; } @media (hover: hover) { .crm-entrada-accion:hover { border-color: var(--crm-line-2); background: var(--crm-panel-2); color: var(--crm-text); } } @media (pointer: coarse) { .crm-entrada-accion::after { content: ""; position: absolute; inset: -10px; } } .crm-entrada-accion:disabled { border-color: transparent; color: var(--crm-dim); cursor: not-allowed; } .crm-entrada-revelar:disabled { border-color: var(--crm-linea-apagada); } @media (hover: hover) { .crm-entrada-accion:disabled:hover { border-color: transparent; background: transparent; color: var(--crm-dim); } .crm-entrada-revelar:disabled:hover { border-color: var(--crm-linea-apagada); } } .crm-busqueda-atajo { margin-right: 6px; } @media (pointer: coarse) { .crm-busqueda-atajo { display: none; } } .crm-numero .crm-entrada-control { font-variant-numeric: tabular-nums; text-align: right; } .crm-numero .crm-entrada-control:not(:focus) { text-overflow: ellipsis; } @media (pointer: coarse) { .crm-entrada:not(:where(.crm-selector:is([data-tamano=compacto], [data-tamano=mini])), [data-variante=filtro], [data-solo-lectura]), .crm-entrada[data-tamano]:not(:where(.crm-selector:is([data-tamano=compacto], [data-tamano=mini])), [data-variante=filtro], [data-solo-lectura]) { font-size: 16px; } .crm-entrada:not([data-variante=filtro], [data-solo-lectura]) .crm-entrada-control, .crm-entrada[data-tamano]:not([data-variante=filtro], [data-solo-lectura]) .crm-entrada-control { font-size: 16px; } .crm-entrada:is([data-tamano=normal], :not([data-tamano])):not([data-variante=filtro], [data-solo-lectura]) { --crm-entrada-alto: 40px; } } .crm-entrada.crm-area { align-items: stretch; height: auto; padding: 0; } .crm-area .crm-entrada-control { display: block; height: auto; padding: 4px 12px; line-height: 22px; resize: none; scrollbar-color: var(--crm-line-2) transparent; scrollbar-width: thin; } .crm-area:has(.crm-area-pie) .crm-entrada-control { padding-bottom: 24px; } .crm-area:has(.crm-area-enviar) .crm-entrada-control { padding-bottom: 28px; } .crm-area-pie { position: absolute; right: 8px; bottom: 4px; display: inline-flex; align-items: center; gap: 8px; pointer-events: none; } .crm-area-enviar .crm-tecla { transition: color var(--crm-t-color) ease-out; } .crm-area:focus-within .crm-area-enviar .crm-tecla { color: var(--crm-text-2); } .crm-area-cuenta { color: var(--crm-dim); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; font-variant-numeric: tabular-nums; pointer-events: none; } .crm-area-cuenta[data-cerca] { color: var(--crm-aviso); } .crm-entrada.crm-selector { justify-content: space-between; font-weight: 400; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; } .crm-entrada.crm-selector[data-deshabilitado] { cursor: not-allowed; } .crm-selector-valor { overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; } .crm-selector[data-placeholder] .crm-selector-valor { color: var(--crm-dim); } .crm-selector-chevron { display: grid; flex: none; margin-right: -2px; color: var(--crm-muted); transition: color var(--crm-t-color) ease-out; } .crm-selector-chevron svg { width: 14px; height: 14px; } .crm-selector:is([data-state=open], [data-abierto]) .crm-selector-chevron { color: var(--crm-text); } .crm-entrada.crm-selector[data-variante=filtro] { justify-content: flex-start; gap: 6px; width: auto; max-width: 100%; border-color: var(--crm-line-2); background: transparent; white-space: nowrap; } .crm-entrada.crm-selector[data-variante=filtro][data-tamano=normal] { gap: 8px; font-size: 13px; line-height: 20px; } @media (hover: hover) { .crm-entrada.crm-selector[data-variante=filtro]:hover:not([data-deshabilitado], [data-state=open], [data-abierto]) { border-color: var(--crm-control); background: var(--crm-panel-2); } } .crm-entrada.crm-selector[data-variante=filtro]:focus-within:not([data-state=open], [data-abierto]) { border-color: var(--crm-line-2); box-shadow: none; } .crm-entrada.crm-selector[data-variante=filtro]:is([data-state=open], [data-abierto]) { border-color: var(--crm-control); background: var(--crm-panel-2); box-shadow: none; } .crm-entrada.crm-selector[data-variante=filtro]:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-selector-rotulo { flex: none; color: var(--crm-muted); white-space: nowrap; } .crm-selector[data-variante=filtro] .crm-selector-valor { color: var(--crm-text); font-weight: 500; } .crm-selector[data-variante=filtro] .crm-selector-chevron { margin-left: -2px; } .crm-selector-lista { z-index: 60; display: flex; flex-direction: column; overflow: hidden; min-width: max(200px, var(--radix-select-trigger-width, var(--radix-popover-trigger-width, 200px))); max-width: min(400px, calc(100vw - 32px)); max-height: min(320px, var(--radix-select-content-available-height, var(--radix-popover-content-available-height, 320px))); border: 1px solid var(--crm-line-2); border-radius: 0; background: var(--crm-panel-2); box-shadow: var(--crm-sombra-capa); color: var(--crm-text-2); font-family: var(--crm-sans); transform-origin: var(--radix-select-content-transform-origin, var(--radix-popover-content-transform-origin)); } .crm-selector-lista[data-state=open] { animation: crm-ctl-capa-entra var(--crm-t-entrada) var(--crm-snap); } .crm-selector-lista[data-side=top][data-state=open] { animation-name: crm-ctl-capa-entra-arriba; } .crm-selector-lista[data-state=closed] { animation: crm-ctl-capa-sale var(--crm-t-salida) ease-out forwards; } .crm-selector-vista { overflow-y: auto; padding: 4px; scrollbar-color: var(--crm-line-2) transparent; scrollbar-width: thin; } .crm-selector-opcion { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 8px; height: 28px; padding: 0 8px; color: var(--crm-text-2); font-size: 13px; line-height: 20px; letter-spacing: -0.005em; cursor: pointer; outline: none; user-select: none; transition: background-color var(--crm-t-color) ease-out; } .crm-selector-marca { display: grid; grid-column: 1; place-items: center; color: var(--crm-acento); } .crm-selector-marca svg { width: 14px; height: 14px; } .crm-selector-opcion-texto { grid-column: 2; overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; } .crm-selector-opcion[data-con-meta] { height: 40px; } .crm-selector-opcion-texto:is([data-con-icono], :has(> .crm-selector-opcion-meta)) { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; column-gap: 8px; } .crm-selector-opcion-texto[data-con-icono] { grid-template-columns: auto minmax(0, 1fr); } .crm-selector-opcion-texto[data-con-icono] > span:not([class]) { display: contents; } .crm-selector-opcion-icono { display: grid; grid-row: 1 / span 2; place-items: center; color: var(--crm-muted); } .crm-selector-opcion-icono > svg { width: 16px; height: 16px; } .crm-selector-opcion-etiqueta, .crm-selector-opcion-meta { overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; } .crm-selector-opcion-texto[data-con-icono] .crm-selector-opcion-etiqueta, .crm-selector-opcion-texto[data-con-icono] .crm-selector-opcion-meta { grid-column: 2; } .crm-selector-opcion-meta { color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-selector-opcion[data-disabled] .crm-selector-opcion-meta { color: var(--crm-dim); } .crm-selector-valor:has(.crm-selector-opcion-icono), .crm-selector-valor:has(.crm-selector-opcion-icono) > span:not([class]) { display: flex; align-items: center; gap: 8px; min-width: 0; } .crm-selector-valor .crm-selector-opcion-icono { flex: none; grid-row: auto; } .crm-selector-opcion-detalle { grid-column: 3; color: var(--crm-muted); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; } .crm-selector-opcion[data-highlighted] { background: var(--crm-panel-3); color: var(--crm-text); transition-duration: 0ms; } .crm-selector-opcion[data-state=checked] { color: var(--crm-text); } .crm-selector-opcion[data-disabled] { color: var(--crm-dim); cursor: not-allowed; } .crm-selector-opcion[data-disabled] .crm-selector-opcion-detalle { color: var(--crm-dim); } .crm-selector-grupo + .crm-selector-grupo, .crm-selector-vista > .crm-selector-grupo-rotulo:not(:first-child) { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--crm-line); } .crm-selector-grupo-rotulo { display: flex; align-items: center; height: 24px; padding: 0 8px; color: var(--crm-muted); font-size: 12px; font-weight: 500; line-height: 16px; } .crm-selector-grupo + .crm-selector-grupo .crm-selector-grupo-rotulo { margin-top: 0; } .crm-selector-coincide { padding: 0; background: none; color: var(--crm-text); font-weight: 500; } .crm-selector-filtro { display: flex; flex: none; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-bottom: 1px solid var(--crm-line-2); color: var(--crm-muted); } .crm-selector-filtro:focus-within { border-bottom-color: var(--crm-acento); } .crm-selector-filtro svg { flex: none; width: 14px; height: 14px; } .crm-selector-filtro-control { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--crm-text); font-family: var(--crm-sans); font-size: 13px; line-height: 20px; letter-spacing: -0.005em; caret-color: var(--crm-acento); outline: none; } .crm-selector-filtro-control::placeholder { color: var(--crm-dim); opacity: 1; } .crm-selector-vacio { display: flex; align-items: center; height: 28px; margin: 0; padding: 0 8px; color: var(--crm-muted); font-size: 12px; line-height: 16px; } @media (pointer: coarse) { .crm-selector-opcion { height: 40px; } } .crm-opcion { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0 8px; min-height: 20px; -webkit-tap-highlight-color: transparent; } .crm-opcion-texto { display: grid; gap: 2px; min-width: 0; } .crm-opcion-etiqueta { color: var(--crm-text-2); font-size: 13px; line-height: 20px; letter-spacing: -0.005em; cursor: pointer; } .crm-opcion-etiqueta::after { content: ""; position: absolute; inset: 0; } .crm-opcion-descripcion { color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-opcion[data-deshabilitado] .crm-opcion-etiqueta, .crm-opcion[data-deshabilitado] .crm-opcion-descripcion { color: var(--crm-dim); cursor: not-allowed; } @media (hover: hover) { .crm-opcion:not([data-deshabilitado]):hover .crm-opcion-etiqueta { color: var(--crm-text); } } @media (pointer: coarse) { .crm-opcion { min-height: 40px; align-items: center; } } .crm-casilla, .crm-radio { position: relative; z-index: 1; display: grid; flex: none; place-items: center; width: 16px; height: 16px; margin: 2px 0 0; padding: 0; border: 1px solid var(--crm-control); border-radius: 0; background: var(--crm-panel); color: var(--crm-sobre-acento); cursor: pointer; transition: background-color var(--crm-t-color) ease-out, border-color var(--crm-t-color) ease-out; } @media (hover: hover) { .crm-opcion:hover .crm-casilla:not(:disabled), .crm-opcion:hover .crm-radio:not(:disabled) { border-color: var(--crm-muted); } } .crm-casilla[data-state=checked], .crm-casilla[data-state=indeterminate], .crm-opcion:hover .crm-casilla[data-state=checked]:not(:disabled), .crm-opcion:hover .crm-casilla[data-state=indeterminate]:not(:disabled) { border-color: var(--crm-acento); background: var(--crm-acento); } .crm-casilla-marca { display: grid; place-items: center; } .crm-casilla-marca svg { width: 12px; height: 12px; animation: crm-ctl-marca var(--crm-t-color) var(--crm-snap); } .crm-opcion[data-invalido] .crm-casilla:not([data-state=checked]) { border-color: var(--crm-error); } .crm-casilla:disabled, .crm-radio:disabled { border-color: var(--crm-linea-apagada); background: transparent; color: var(--crm-dim); cursor: not-allowed; } .crm-opcion-interruptor { grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; } .crm-opcion-interruptor > .crm-interruptor { order: 2; } .crm-interruptor { position: relative; z-index: 1; flex: none; width: 28px; height: 16px; margin: 2px 0 0; padding: 0; border: 1px solid var(--crm-control); border-radius: 0; background: var(--crm-panel); cursor: pointer; transition: background-color var(--crm-t-color) ease-out, border-color var(--crm-t-color) ease-out; } .crm-interruptor-mando { position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; background: var(--crm-muted); transition: transform var(--crm-t-color) var(--crm-snap), background-color var(--crm-t-color) ease-out; } @media (hover: hover) { .crm-opcion:hover .crm-interruptor:not(:disabled) { border-color: var(--crm-muted); } } .crm-interruptor[aria-checked=true], .crm-opcion:hover .crm-interruptor[aria-checked=true]:not(:disabled) { border-color: var(--crm-acento); background: var(--crm-acento-suave); } .crm-interruptor[aria-checked=true] .crm-interruptor-mando { background: var(--crm-acento); transform: translateX(12px); } .crm-interruptor:active:not(:disabled) .crm-interruptor-mando { width: 12px; } .crm-interruptor[aria-checked=true]:active:not(:disabled) .crm-interruptor-mando { transform: translateX(10px); } .crm-interruptor:disabled { border-color: var(--crm-linea-apagada); background: transparent; cursor: not-allowed; } .crm-interruptor:disabled .crm-interruptor-mando { background: var(--crm-line-2); } .crm-interruptor[data-cargando] { cursor: progress; } .crm-interruptor[data-cargando] .crm-interruptor-mando { border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; background: transparent; color: var(--crm-muted); animation: crm-ctl-giro var(--crm-t-giro) linear infinite; } .crm-interruptor[data-cargando][aria-checked=true] .crm-interruptor-mando { color: var(--crm-acento); translate: 12px 0; transform: none; } .crm-radio { border-radius: 50%; } .crm-radio[data-state=checked], .crm-opcion:hover .crm-radio[data-state=checked]:not(:disabled) { border-color: var(--crm-acento); } .crm-radio-punto { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--crm-acento); animation: crm-ctl-marca var(--crm-t-color) var(--crm-snap); } .crm-radio:disabled .crm-radio-punto { background: var(--crm-dim); } .crm-grupo-radio-opciones { display: grid; gap: 8px; } .crm-grupo-radio-opciones[data-orientacion=horizontal] { display: flex; flex-wrap: wrap; gap: 8px 24px; } .crm-opcion[data-con-extremo] { grid-template-columns: auto minmax(0, 1fr) auto; } .crm-opcion[data-con-extremo][data-con-fin] { grid-template-columns: auto minmax(0, 1fr) auto auto; } .crm-opcion-extremo { display: flex; align-items: center; gap: 12px; min-height: 20px; } .crm-opcion-fila .crm-opcion-extremo { align-self: center; } .crm-opcion-datos { display: flex; align-items: baseline; gap: 16px; color: var(--crm-text-2); font-size: 13px; font-variant-numeric: tabular-nums; line-height: 20px; text-align: right; white-space: nowrap; } .crm-opcion-fila:has([data-state=checked]) .crm-opcion-datos { color: var(--crm-text); } .crm-opcion-acciones { position: relative; z-index: 1; display: flex; align-items: center; gap: 4px; } .crm-opcion-nota { grid-column: 2 / -1; margin-top: 4px; color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-opcion[data-deshabilitado] .crm-opcion-datos, .crm-opcion[data-deshabilitado] .crm-opcion-nota { color: var(--crm-dim); } .crm-grupo-radio-opciones:not([data-orientacion=horizontal]):has(> .crm-opcion[data-con-extremo]) { container: crm-opciones / inline-size; grid-template-columns: auto minmax(0, 1fr) auto auto auto; column-gap: 8px; } .crm-grupo-radio-opciones:not([data-orientacion=horizontal]):has(> .crm-opcion[data-con-extremo]) > .crm-opcion { grid-column: 1 / -1; grid-template-columns: subgrid; } .crm-grupo-radio-opciones:has(> .crm-opcion[data-con-extremo]) > .crm-opcion > :first-child { grid-column: 1; } .crm-grupo-radio-opciones:has(> .crm-opcion[data-con-extremo]) > .crm-opcion > .crm-opcion-texto { grid-column: 2; } .crm-grupo-radio-opciones:has(> .crm-opcion[data-con-extremo]) > .crm-opcion > .crm-opcion-extremo { display: contents; } .crm-grupo-radio-opciones:has(> .crm-opcion[data-con-extremo]) .crm-opcion-datos { grid-column: 3; grid-row: 1; justify-content: flex-end; align-self: start; } .crm-grupo-radio-opciones:has(> .crm-opcion[data-con-extremo]) .crm-opcion-acciones { grid-column: 4; grid-row: 1; align-self: start; } .crm-grupo-radio-opciones:has(> .crm-opcion[data-con-extremo]) > .crm-opcion > .crm-opcion-tecla { grid-column: 5; grid-row: 1; } .crm-grupo-radio-opciones:has(> .crm-opcion[data-con-extremo]) > .crm-opcion > .crm-opcion-nota { grid-column: 2 / -1; } @container crm-opciones (max-width: 399.98px) { .crm-grupo-radio-opciones:not([data-orientacion=horizontal]):has(> .crm-opcion[data-con-extremo]) { grid-template-columns: auto minmax(0, 1fr) auto; } .crm-grupo-radio-opciones:has(> .crm-opcion[data-con-extremo]) .crm-opcion-datos { grid-column: 2; grid-row: 2; justify-content: flex-start; margin-top: 2px; } .crm-grupo-radio-opciones:has(> .crm-opcion[data-con-extremo]) .crm-opcion-acciones { grid-column: 3; } .crm-grupo-radio-opciones:has(> .crm-opcion[data-con-extremo]) > .crm-opcion > .crm-opcion-tecla { grid-column: 3; grid-row: 2; } } .crm-opcion[data-con-fin] { grid-template-columns: auto minmax(0, 1fr) auto; } .crm-opcion-tecla { position: relative; z-index: 1; align-self: start; pointer-events: none; } .crm-opcion-fila .crm-opcion-tecla { align-self: center; } .crm-grupo-radio-opciones[data-variante=filas] { gap: 0; border-top: 1px solid var(--crm-line); } .crm-opcion-fila { align-items: center; min-height: 36px; padding: 8px 12px; border-bottom: 1px solid var(--crm-line); transition: background-color var(--crm-t-color) ease-out; } .crm-opcion-fila :is(.crm-radio, .crm-casilla) { align-self: start; } .crm-opcion-fila::before { content: ""; position: absolute; top: -1px; bottom: -1px; left: 0; width: 2px; background: var(--crm-acento); transform: scaleY(0); transform-origin: top; transition: transform var(--crm-t-gesto) var(--crm-snap); } @media (hover: hover) { .crm-opcion-fila:hover:not([data-deshabilitado]) { background: var(--crm-panel-2); transition-duration: 0ms; } } .crm-opcion-fila:has([data-state=checked]) { background: var(--crm-panel-3); } .crm-opcion-fila:has([data-state=checked])::before { transform: scaleY(1); } .crm-opcion-fila:has([data-state=checked]) .crm-opcion-etiqueta { color: var(--crm-text); } .crm-conmutador { --crm-conm-alto: 28px; --crm-conm-relleno: 10px; position: relative; display: flex; flex-wrap: nowrap; align-items: stretch; min-width: 0; max-width: 100%; white-space: nowrap; } .crm-conmutador[data-tamano=mini] { --crm-conm-alto: 24px; --crm-conm-relleno: 8px; } .crm-conmutador[data-tamano=normal] { --crm-conm-alto: 32px; --crm-conm-relleno: 12px; } .crm-conmutador-opcion { position: relative; z-index: 1; display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 6px; margin: 0; padding: 0 var(--crm-conm-relleno); border: 0; border-radius: 0; background: transparent; color: var(--crm-muted); font-family: var(--crm-sans); font-size: 13px; font-weight: 400; line-height: 20px; letter-spacing: -0.005em; text-transform: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: color var(--crm-t-color) ease-out; } .crm-conmutador[data-tamano=mini] .crm-conmutador-opcion { font-size: 12px; line-height: 16px; } a.crm-conmutador-opcion { text-decoration: none; } .crm-conmutador-texto { display: inline-grid; } .crm-conmutador-texto:not([data-texto]) { display: inline; white-space: nowrap; } .crm-conmutador-texto[data-texto]::after { content: attr(data-texto); content: attr(data-texto) / ""; height: 0; overflow: hidden; font-weight: 500; visibility: hidden; pointer-events: none; user-select: none; } .crm-conmutador-opcion:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: -1px; } @media (hover: hover) { .crm-conmutador-opcion:hover:not(:disabled, [aria-disabled=true]) { color: var(--crm-text); } } .crm-conmutador-opcion:is([aria-checked=true], [aria-selected=true], [aria-current=page], [aria-current=location]) { color: var(--crm-text); font-weight: 500; cursor: default; } .crm-conmutador-opcion:is(:disabled, [aria-disabled=true]) { color: var(--crm-dim); cursor: not-allowed; opacity: 1; } .crm-conmutador-icono { display: grid; } .crm-conmutador-icono svg { width: 14px; height: 14px; stroke-width: 1.5; } .crm-conmutador[data-tamano=normal] .crm-conmutador-icono svg { width: 16px; height: 16px; stroke-width: 1.6; } .crm-conmutador-indicador { position: absolute; left: 0; width: var(--crm-ind-w, 0px); transform: translateX(var(--crm-ind-x, 0px)); pointer-events: none; } .crm-conmutador[data-listo] .crm-conmutador-indicador { transition: transform var(--crm-t-gesto) var(--crm-snap), width var(--crm-t-gesto) var(--crm-snap); } .crm-conmutador[data-reflujo] .crm-conmutador-indicador { transition: none; } .crm-conmutador[data-variante=segmentado] { display: inline-flex; gap: 0; height: var(--crm-conm-alto); padding: 2px; background: var(--crm-panel); box-shadow: inset 0 0 0 1px var(--crm-line-2); } .crm-conmutador[data-variante=segmentado] .crm-conmutador-opcion { height: calc(var(--crm-conm-alto) - 4px); padding: 0 calc(var(--crm-conm-relleno) - 2px); } .crm-conmutador[data-variante=segmentado][data-solo-icono] .crm-conmutador-opcion { width: calc(var(--crm-conm-alto) - 4px); padding: 0; } .crm-conmutador[data-variante=segmentado][data-completo] { display: flex; width: 100%; } .crm-conmutador[data-completo] .crm-conmutador-opcion { flex: 1 1 0; min-width: 0; } .crm-conmutador[data-variante=segmentado] .crm-conmutador-indicador { top: 2px; bottom: 2px; background: var(--crm-panel-3); box-shadow: inset 0 0 0 1px var(--crm-line-2); } .crm-conmutador[data-variante=subrayado] { gap: 4px; overflow-x: auto; box-shadow: inset 0 -1px 0 var(--crm-line); scrollbar-width: none; overscroll-behavior-x: contain; } .crm-conmutador[data-variante=subrayado]::-webkit-scrollbar { display: none; } .crm-conmutador[data-variante=subrayado] .crm-conmutador-opcion { height: var(--crm-conm-alto); padding: 0 8px; } .crm-conmutador[data-variante=subrayado] .crm-conmutador-opcion:first-of-type { margin-left: -8px; } .crm-conmutador[data-variante=subrayado] .crm-conmutador-opcion:focus-visible { outline-offset: -3px; } .crm-conmutador[data-variante=subrayado]:not(.crm-cabecera-pestanas, .crm-cabecera-pestanas *) { left: -8px; } .crm-conmutador[data-variante=subrayado]:not(.crm-cabecera-pestanas, .crm-cabecera-pestanas *) .crm-conmutador-opcion:first-of-type { margin-left: 0; } .crm-conmutador[data-variante=subrayado] .crm-conmutador-indicador { bottom: 0; height: 2px; background: var(--crm-acento); } @media (pointer: coarse) { .crm-conmutador[data-variante=subrayado] .crm-conmutador-opcion::after { content: ""; position: absolute; inset: -4px 0; } } .crm-conmutador-opcion .crm-conmutador-contador { min-width: 0; height: auto; padding: 0; background: transparent; color: var(--crm-dim); line-height: 16px; transition: color var(--crm-t-color) ease-out; } .crm-conmutador-opcion:is([aria-checked=true], [aria-selected=true], [aria-current=page], [aria-current=location]) .crm-conmutador-contador { color: var(--crm-muted); } @media (hover: hover) { .crm-conmutador-opcion:hover:not(:disabled) .crm-conmutador-contador { color: var(--crm-muted); } } .crm-conmutador[data-variante=segmentado] { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; } .crm-conmutador[data-variante=segmentado]::-webkit-scrollbar { display: none; } .crm-conmutador[data-desborde=fin] { mask-image: linear-gradient( to right, var(--crm-text) calc(100% - 24px), transparent); } .crm-conmutador[data-desborde=inicio] { mask-image: linear-gradient( to left, var(--crm-text) calc(100% - 24px), transparent); } .crm-conmutador[data-desborde=ambos] { mask-image: linear-gradient( to right, transparent, var(--crm-text) 24px, var(--crm-text) calc(100% - 24px), transparent); } .crm-ctl-pestanas { display: block; min-width: 0; max-width: 100%; } .crm-pestana-panel { padding-top: 16px; } .crm-etiqueta { --crm-etiqueta-alto: 24px; position: relative; display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: var(--crm-etiqueta-alto); padding: 0 8px; border: 1px solid var(--crm-line-2); color: var(--crm-text-2); font-family: var(--crm-sans); font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: 0; text-transform: none; vertical-align: middle; white-space: nowrap; } .crm-etiqueta[data-tamano=compacto] { --crm-etiqueta-alto: 20px; padding: 0 6px; } .crm-etiqueta-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-etiqueta-icono { display: grid; margin-left: -2px; color: var(--crm-muted); } .crm-etiqueta-icono svg { width: 12px; height: 12px; stroke-width: 1.5; } .crm-etiqueta[data-tono=acento] { border-color: var(--crm-acento-linea); background: var(--crm-acento-suave); color: var(--crm-acento); } .crm-etiqueta[data-tono=error] { border-color: var(--crm-error-linea); background: var(--crm-error-suave); color: var(--crm-error); } .crm-etiqueta[data-tono=aviso] { border-color: var(--crm-aviso-linea); background: var(--crm-aviso-suave); color: var(--crm-aviso); } .crm-etiqueta[data-tono]:not([data-tono=neutro], [data-tono=tenue]) .crm-etiqueta-icono { color: inherit; } .crm-etiqueta[data-tono=tenue] { border-color: var(--crm-line); color: var(--crm-muted); } .crm-etiqueta[data-quitable] { padding-right: 2px; } .crm-etiqueta-quitar { position: relative; display: grid; place-items: center; width: 20px; height: 20px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--crm-muted); cursor: pointer; transition: color var(--crm-t-color) ease-out, background-color var(--crm-t-color) ease-out; } .crm-etiqueta[data-tamano=compacto] .crm-etiqueta-quitar { width: 16px; height: 16px; } .crm-etiqueta-quitar svg { width: 12px; height: 12px; } .crm-etiqueta[data-accionable] { padding: 0; } .crm-etiqueta-accion { position: relative; display: inline-flex; align-items: center; gap: 4px; min-width: 0; height: 100%; margin: 0; padding: 0 8px; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-decoration: none; cursor: pointer; transition: background-color var(--crm-t-color) ease-out; } .crm-etiqueta[data-tamano=compacto] .crm-etiqueta-accion { padding: 0 6px; } .crm-etiqueta[data-accionable][data-quitable] .crm-etiqueta-accion { padding-right: 2px; } .crm-etiqueta[data-accionable][data-quitable] { padding-right: 2px; } .crm-etiqueta-accion:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-etiqueta[data-presionada] { border-color: var(--crm-control); background: var(--crm-panel-3); color: var(--crm-text); } .crm-etiqueta[data-deshabilitada] { border-color: var(--crm-linea-apagada); background: transparent; color: var(--crm-dim); } .crm-etiqueta[data-deshabilitada] .crm-etiqueta-accion { cursor: not-allowed; } @media (hover: hover) { .crm-etiqueta[data-accionable]:is([data-tono=neutro], [data-tono=tenue]):not([data-deshabilitada]) .crm-etiqueta-accion:hover { background: var(--crm-panel-2); color: var(--crm-text); } .crm-etiqueta-quitar:hover { background: var(--crm-panel-3); color: var(--crm-text); } } @media (pointer: coarse) { .crm-etiqueta { --crm-etiqueta-toque: max(var(--crm-etiqueta-alto), min(calc(var(--crm-etiqueta-alto) + 20px), calc(var(--crm-toque-max, calc(var(--crm-etiqueta-alto) + 21px)) - 1px))); --crm-etiqueta-extra: calc((var(--crm-etiqueta-toque) - var(--crm-etiqueta-alto)) / 2); } .crm-etiqueta-quitar::after { content: ""; position: absolute; inset: calc(-2px - var(--crm-etiqueta-arriba, var(--crm-etiqueta-extra))) -10px calc(-2px - var(--crm-etiqueta-abajo, var(--crm-etiqueta-extra))); } .crm-etiqueta-accion::after { content: ""; position: absolute; inset: calc(-1px - var(--crm-etiqueta-arriba, var(--crm-etiqueta-extra))) -1px calc(-1px - var(--crm-etiqueta-abajo, var(--crm-etiqueta-extra))); } } .crm-estado { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; height: fit-content; min-height: 20px; color: var(--crm-text-2); font-family: var(--crm-sans); font-size: 12px; font-weight: 400; line-height: 1.3333333333; letter-spacing: 0; text-transform: none; white-space: normal; vertical-align: middle; } .crm-estado[data-forma=chip] { min-height: 24px; padding: 0 8px; border: 1px solid var(--crm-line-2); } .crm-estado[data-forma=chip][data-tamano=compacto] { min-height: 20px; padding: 0 6px; } .crm-estado[data-forma=chip]:is([data-estado=vivo], [data-estado=hecho], [data-estado=espera]) { border-color: var(--crm-acento-linea); } .crm-estado[data-forma=chip][data-estado=error] { border-color: var(--crm-error-linea); } .crm-estado-texto { min-width: 0; overflow-wrap: anywhere; } .crm-estado-punto { position: relative; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--crm-dim); } .crm-estado[data-estado=vivo] .crm-estado-punto { background: var(--crm-acento); box-shadow: 0 0 0 2px var(--crm-acento-suave); } .crm-estado[data-estado=vivo] .crm-estado-punto::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--crm-acento); animation: crm-latido var(--crm-t-latido) ease-out infinite; } .crm-estado[data-estado=hecho] .crm-estado-punto { background: var(--crm-acento); } .crm-estado[data-estado=espera] .crm-estado-punto { background: transparent; box-shadow: inset 0 0 0 1.5px var(--crm-acento); } .crm-estado[data-estado=error] { color: var(--crm-error); } .crm-estado[data-estado=error] .crm-estado-punto { background: var(--crm-error); } .crm-estado[data-estado=inactivo] { color: var(--crm-muted); } .crm-estado[data-estado=aviso] { color: var(--crm-aviso); } .crm-estado[data-estado=aviso] .crm-estado-punto { background: var(--crm-aviso); } .crm-estado[data-forma=chip][data-estado=aviso] { border-color: var(--crm-aviso-linea); } @media (forced-colors: active) { .crm-estado-punto { border: 1px solid CanvasText; background: CanvasText; box-shadow: none; } .crm-estado[data-estado=espera] .crm-estado-punto { background: Canvas; box-shadow: none; } .crm-estado[data-estado=vivo] .crm-estado-punto { background: CanvasText; box-shadow: none; } .crm-estado[data-estado=vivo] .crm-estado-punto::after { display: none; } } .crm-contador { display: inline-grid; flex: none; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; background: var(--crm-panel-3); color: var(--crm-text-2); font-family: var(--crm-mono); font-size: 11px; font-weight: 400; font-variant-numeric: tabular-nums; line-height: 16px; letter-spacing: 0; } .crm-contador[data-tono=acento] { background: var(--crm-acento-suave); color: var(--crm-acento); } .crm-contador[data-sube=impar] { animation: crm-ctl-contador-sube-a var(--crm-t-capa) var(--crm-snap); } .crm-contador[data-sube=par] { animation: crm-ctl-contador-sube-b var(--crm-t-capa) var(--crm-snap); } .crm-tecla { display: inline-grid; flex: none; place-items: center; min-width: 20px; height: 20px; margin: 0; padding: 0 4px; border: 1px solid var(--crm-line-2); border-radius: 0; background: var(--crm-panel-2); box-shadow: inset 0 -1px 0 var(--crm-line-2); color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; font-weight: 400; font-variant-numeric: tabular-nums; line-height: 16px; letter-spacing: 0; text-transform: none; vertical-align: middle; transition: transform var(--crm-t-pulsar) var(--crm-snap), background-color var(--crm-t-pulsar) ease-out, color var(--crm-t-pulsar) ease-out; } .crm-tecla[data-pulsada] { background: var(--crm-panel-3); box-shadow: none; color: var(--crm-text); transform: translateY(1px); } .crm-teclas { display: inline-flex; flex: none; align-items: center; gap: 2px; vertical-align: middle; } .crm-boton:is([data-variante=principal], [data-variante=acento], [data-variante=firma]) .crm-tecla { border-color: currentColor; background: transparent; box-shadow: inset 0 -1px 0 currentColor; color: inherit; opacity: 0.6; } .crm-estado[data-con-consejo] { cursor: help; } .crm-estado[data-con-consejo] .crm-estado-texto { text-decoration: underline dotted var(--crm-line-2); text-underline-offset: 3px; } .crm-estado[data-con-consejo]:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-avatar { --crm-avatar: 32px; display: inline-grid; flex: none; place-items: center; overflow: hidden; width: var(--crm-avatar); height: var(--crm-avatar); border: 1px solid var(--crm-line); background: var(--crm-panel-3); color: var(--crm-text-2); font-family: var(--crm-sans); font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: 0; vertical-align: middle; user-select: none; } .crm-avatar[data-tamano=compacto] { --crm-avatar: 24px; font-size: 11px; } .crm-avatar[data-tamano=grande] { --crm-avatar: 40px; font-size: 13px; } .crm-avatar img { width: 100%; height: 100%; object-fit: cover; } .crm-aviso { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: start; gap: 8px; padding: 12px 12px 12px 16px; border: 1px solid var(--crm-line-2); background: var(--crm-panel); color: var(--crm-text-2); font-size: 13px; line-height: 20px; letter-spacing: -0.005em; } .crm-aviso-icono { width: 16px; height: 16px; margin-top: 2px; color: var(--crm-muted); } .crm-aviso-cuerpo { display: grid; gap: 2px; min-width: 0; } .crm-aviso-titulo { margin: 0; color: var(--crm-text); font-weight: 500; } .crm-aviso-titulo, .crm-aviso-texto { min-width: 0; overflow-wrap: anywhere; } .crm-aviso-texto { color: var(--crm-text-2); } .crm-aviso-texto :is(code, a, kbd, samp) { overflow-wrap: anywhere; } .crm-aviso-texto pre { max-width: 100%; overflow-x: auto; overflow-wrap: normal; } .crm-aviso-texto :is(ul, ol) { margin: 4px 0; padding-left: 20px; } .crm-aviso-texto ul { list-style: disc; } .crm-aviso-texto ol { list-style: decimal; } .crm-aviso-texto li::marker { color: var(--crm-muted); } .crm-aviso-texto pre[data-desborde=fin] { mask-image: linear-gradient( to right, var(--crm-text) calc(100% - 24px), transparent); } .crm-aviso-texto pre[data-desborde=ambos] { mask-image: linear-gradient( to right, transparent, var(--crm-text) 24px, var(--crm-text) calc(100% - 24px), transparent); } .crm-aviso-texto pre[data-desborde=inicio] { mask-image: linear-gradient( to left, var(--crm-text) calc(100% - 24px), transparent); } .crm-aviso-texto > :first-child { margin-top: 0; } .crm-aviso-texto > :last-child { margin-bottom: 0; } .crm-aviso-accion { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .crm-aviso:is([data-tono=exito], [data-tono=atencion], [data-tono=error], [data-tono=pendiente]) { padding-left: 15px; border-left-width: 2px; } .crm-aviso[data-tono=exito], .crm-aviso[data-tono=pendiente] { border-left-color: var(--crm-acento); } .crm-aviso[data-tono=atencion] { border-left-color: var(--crm-aviso); } .crm-aviso[data-tono=error] { border-left-color: var(--crm-error); } .crm-aviso:is([data-tono=exito], [data-tono=pendiente]) .crm-aviso-icono { color: var(--crm-acento); } .crm-aviso[data-tono=atencion] .crm-aviso-icono { color: var(--crm-aviso); } .crm-aviso[data-tono=error] .crm-aviso-icono, .crm-aviso[data-tono=error] .crm-aviso-titulo { color: var(--crm-error); } .crm-aviso[data-disposicion=linea] { align-items: center; min-height: 44px; padding-block: 6px; } .crm-aviso[data-disposicion=linea] .crm-aviso-icono { margin-top: 0; } .crm-aviso[data-disposicion=linea] .crm-aviso-cuerpo { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; } .crm-aviso[data-disposicion=linea] .crm-aviso-accion { grid-column: 2; grid-row: 1; margin-top: 0; } @media (max-width: 600px) { .crm-aviso[data-disposicion=linea] .crm-aviso-cuerpo { grid-template-columns: minmax(0, 1fr); } .crm-aviso[data-disposicion=linea] .crm-aviso-accion { grid-column: 1; grid-row: auto; } } .crm-aviso[data-variante=nota] { grid-template-columns: 14px minmax(0, 1fr) auto; gap: 8px; padding: 8px 12px; border-color: var(--crm-line); background: transparent; color: var(--crm-muted); } .crm-aviso[data-variante=nota] .crm-aviso-icono { width: 14px; height: 14px; margin-top: 3px; } .crm-aviso[data-variante=nota] .crm-aviso-texto { color: var(--crm-muted); } .crm-aviso[data-variante=nota] .crm-aviso-titulo { color: var(--crm-text-2); } .crm-aviso[data-variante=nota]:is([data-tono=exito], [data-tono=atencion], [data-tono=error], [data-tono=pendiente]) { padding-left: 12px; border-left-width: 1px; border-left-color: var(--crm-line); } .crm-aviso[data-variante=nota][data-tono=error] .crm-aviso-titulo { color: var(--crm-text-2); } .crm-aviso-cerrar, .crm-tostada-cerrar { position: relative; display: grid; place-items: center; width: 24px; height: 24px; margin: -2px -4px -2px 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--crm-muted); cursor: pointer; transition: color var(--crm-t-color) ease-out, background-color var(--crm-t-color) ease-out, transform var(--crm-t-pulsar) var(--crm-snap); } .crm-aviso-cerrar svg, .crm-tostada-cerrar svg { width: 14px; height: 14px; } .crm-aviso-cerrar:active, .crm-tostada-cerrar:active { transform: scale(0.96); } @media (hover: hover) { .crm-aviso-cerrar:hover, .crm-tostada-cerrar:hover { background: var(--crm-panel-3); color: var(--crm-text); } } @media (pointer: coarse) { .crm-aviso-cerrar::after, .crm-tostada-cerrar::after { content: ""; position: absolute; inset: -10px; } } .crm-capa.crm-tostadas-capa { background: transparent; } .crm-tostadas-capa { position: fixed; z-index: 80; right: 0; bottom: 0; pointer-events: none; } .crm-tostadas { outline: none; } .crm-tostadas-lista { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; width: min(400px, 100vw); margin: 0; padding: 0 24px max(24px, env(safe-area-inset-bottom)); list-style: none; } .crm-tostada { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 8px 8px 12px; overflow: hidden; border: 1px solid var(--crm-line-2); background: var(--crm-panel-2); box-shadow: var(--crm-sombra-capa); color: var(--crm-text-2); font-family: var(--crm-sans); pointer-events: auto; animation: crm-ctl-tostada-entra var(--crm-t-entrada) var(--crm-snap); transition: opacity var(--crm-t-salida) ease-out; } .crm-tostada[data-saliendo] { opacity: 0; } .crm-tostada[data-reemplazo] { animation: none; } .crm-tostada-giro { display: block; box-sizing: border-box; width: 14px; height: 14px; margin: 3px 1px 0; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: crm-ctl-giro var(--crm-t-giro) linear infinite; } .crm-tostada-anuncio { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: 8px; min-width: 0; } .crm-tostada-icono { width: 16px; height: 16px; margin-top: 2px; color: var(--crm-muted); } .crm-tostada:is([data-tono=exito], [data-tono=pendiente]) .crm-tostada-icono { color: var(--crm-acento); } .crm-tostada[data-tono=atencion] .crm-tostada-icono { color: var(--crm-aviso); } .crm-tostada[data-tono=error] { border-left-color: var(--crm-error); } .crm-tostada[data-tono=error] .crm-tostada-icono { color: var(--crm-error); } .crm-tostada-cuerpo { display: grid; gap: 0; min-width: 0; } .crm-tostada-titulo, .crm-tostada-texto { margin: 0; } .crm-tostada-titulo { color: var(--crm-text); font-size: 13px; font-weight: 500; line-height: 20px; letter-spacing: -0.005em; } .crm-tostada-texto { color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-tostada-accion { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--crm-line-2); border-radius: 0; background: transparent; color: var(--crm-text); font-family: var(--crm-sans); font-size: 13px; font-weight: 500; line-height: 20px; letter-spacing: -0.005em; text-transform: none; white-space: nowrap; cursor: pointer; transition: background-color var(--crm-t-color) ease-out, border-color var(--crm-t-color) ease-out, transform var(--crm-t-pulsar) var(--crm-snap); } .crm-tostada-accion:has(.crm-teclas) { padding-right: 4px; } .crm-tostada-accion:active { transform: translateY(0.5px); } @media (hover: hover) { .crm-tostada-accion:hover { border-color: var(--crm-control); background: var(--crm-panel-3); } } @media (pointer: coarse) { .crm-tostada-accion::after { content: ""; position: absolute; inset: -8px -2px; } } .crm-tostada-cerrar { margin: 0; } .crm-tostada-vida { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: var(--crm-control); transform-origin: left; animation: crm-ctl-vida var(--crm-tostada-vida, var(--crm-t-tostada)) linear forwards; } .crm-tostada[data-tono=exito] .crm-tostada-vida, .crm-tostada:has([data-deshacer]) .crm-tostada-vida { background: var(--crm-acento); } .crm-tostada[data-pausa] .crm-tostada-vida { animation-play-state: paused; } @media (max-width: 40em) { .crm-tostadas-capa { left: 0; } .crm-tostadas-lista { width: 100%; padding: 0 16px max(16px, env(safe-area-inset-bottom)); } } .crm-vacio { display: grid; justify-items: center; gap: 4px; max-width: 68ch; margin-inline: auto; padding: 48px 16px; text-align: center; } .crm-vacio[data-tamano=grande] { padding: 64px 16px; } .crm-vacio-icono { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 12px; border: 1px solid var(--crm-line-2); color: var(--crm-muted); } .crm-vacio-icono svg { width: 20px; height: 20px; } .crm-c-ascii { justify-self: center; margin: 0; color: var(--crm-control); font-family: var(--crm-mono); font-size: 11px; font-weight: 400; line-height: 12px; letter-spacing: 0; font-kerning: none; font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0, "dlig" 0; text-align: left; text-rendering: geometricPrecision; white-space: pre; tab-size: 1; user-select: none; } .crm-vacio-ascii { margin-bottom: 20px; } .crm-vacio-titulo { margin: 0; color: var(--crm-text); font-family: var(--crm-sans); font-size: 15px; font-weight: 500; line-height: 22px; letter-spacing: -0.01em; text-wrap: balance; } .crm-vacio[data-tamano=grande] .crm-vacio-titulo { font-size: 20px; line-height: 28px; letter-spacing: -0.02em; } .crm-vacio-texto { max-width: 48ch; margin: 0; color: var(--crm-muted); font-size: 13px; line-height: 20px; text-wrap: pretty; } .crm-vacio[data-tamano=grande] .crm-vacio-texto { font-size: 14px; line-height: 22px; } .crm-vacio-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; } .crm-esqueleto { position: relative; display: block; overflow: hidden; width: 100%; height: 12px; background: var(--crm-esqueleto-a); opacity: 0; animation: crm-ctl-aparece var(--crm-t-pulsar) steps(1, jump-start) var(--crm-esqueleto-retardo, var(--crm-t-retardo)) forwards; } .crm-esqueleto::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent, var(--crm-esqueleto-b) 50%, transparent) no-repeat; background-size: 50% 100%; background-position: -50% 0; background-attachment: fixed; animation: crm-ctl-barrido var(--crm-t-barrido) var(--crm-curva) var(--crm-esqueleto-retardo, var(--crm-t-retardo)) infinite; } .crm-esqueleto-lineas { display: grid; gap: 8px; } .crm-cargando { display: inline-flex; align-items: center; gap: 8px; color: var(--crm-muted); font-family: var(--crm-sans); font-size: 12px; line-height: 16px; text-transform: none; } .crm-cargando-filo { position: relative; display: block; flex: none; width: 32px; height: 1px; background: var(--crm-line-2) linear-gradient( 90deg, transparent, var(--crm-acento) 50%, transparent) no-repeat; background-size: 40% 100%; background-position: -40% 0; animation: crm-filo-continuo var(--crm-t-filo) var(--crm-curva) infinite; } .crm-cargando[data-variante=linea] { display: block; width: 100%; } .crm-cargando[data-variante=linea] .crm-cargando-filo { width: 100%; background-color: var(--crm-line); } .crm-cargando[data-variante=linea] .crm-cargando-texto { display: block; margin-top: 8px; } .crm-cargando[data-progreso] .crm-cargando-filo { background: var(--crm-line-2) linear-gradient(var(--crm-acento), var(--crm-acento)) no-repeat; background-position: 0 0; background-size: var(--crm-progreso, 0%) 100%; animation: none; transition: background-size var(--crm-t-gesto) var(--crm-curva); } .crm-cargando[data-variante=texto][data-progreso] .crm-cargando-filo { width: 48px; } .crm-cargando-cifra { color: var(--crm-text-2); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; font-variant-numeric: tabular-nums; } .crm-cargando[data-variante=linea][data-progreso] { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; } .crm-cargando[data-variante=linea][data-progreso] .crm-cargando-filo { grid-column: 1 / -1; } @keyframes crm-ctl-capa-entra { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } } @keyframes crm-ctl-capa-entra-arriba { from { opacity: 0; transform: translateY(4px) scale(0.98); } to { opacity: 1; transform: none; } } @keyframes crm-ctl-capa-sale { to { opacity: 0; } } @keyframes crm-ctl-tostada-entra { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } } @keyframes crm-ctl-marca { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } } @keyframes crm-ctl-contador-sube-a { from { color: var(--crm-acento); transform: translateY(-2px); } } @keyframes crm-ctl-contador-sube-b { from { color: var(--crm-acento); transform: translateY(-2px); } } @keyframes crm-ctl-giro { to { transform: rotate(360deg); } } @keyframes crm-ctl-aparece { to { opacity: 1; } } @keyframes crm-ctl-vida { from { transform: scaleX(1); } to { transform: scaleX(0); } } @keyframes crm-ctl-barrido { 0% { background-position: -50% 0; } 55%, 100% { background-position: 150% 0; } } .crm-paso { --crm-paso-alto: 32px; --crm-paso-icono: 16px; display: inline-grid; grid-template-columns: var(--crm-paso-alto) minmax(40px, auto) var(--crm-paso-alto); align-items: stretch; box-sizing: border-box; height: var(--crm-paso-alto); min-height: var(--crm-paso-alto); border: 1px solid var(--crm-control); background: var(--crm-panel); color: var(--crm-text); font-family: var(--crm-sans); font-size: 14px; line-height: 22px; transition: border-color var(--crm-t-color) ease-out; } .crm-paso[data-tamano=mini] { --crm-paso-alto: 24px; --crm-paso-icono: 14px; font-size: 12px; line-height: 16px; } .crm-paso[data-tamano=compacto] { --crm-paso-alto: 28px; --crm-paso-icono: 14px; font-size: 13px; line-height: 20px; } .crm-paso[data-tamano=grande] { --crm-paso-alto: 40px; } .crm-paso:focus-within { border-color: var(--crm-acento); } .crm-paso[data-invalido] { border-color: var(--crm-error-linea); } .crm-paso[data-deshabilitado] { border-color: var(--crm-line-2); background: transparent; color: var(--crm-dim); cursor: not-allowed; } .crm-paso-boton { display: grid; place-items: center; box-sizing: border-box; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--crm-muted); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background-color var(--crm-t-color) ease-out, color var(--crm-t-color) ease-out; } .crm-paso-boton svg { width: var(--crm-paso-icono); height: var(--crm-paso-icono); stroke-width: 1.6; transition: transform var(--crm-t-pulsar) var(--crm-snap); } @media (hover: hover) { .crm-paso-boton:hover:not([aria-disabled]) { background: var(--crm-panel-2); color: var(--crm-text); transition-duration: 0ms; } } .crm-paso-boton:active:not([aria-disabled]) svg { transform: scale(0.96); } .crm-paso-boton[aria-disabled] { color: var(--crm-dim); cursor: not-allowed; } .crm-paso-boton:focus-visible { outline-offset: -1px; } .crm-paso-valor { display: flex; align-items: center; justify-content: center; gap: 2px; min-width: 0; padding: 0 4px; font-variant-numeric: tabular-nums; letter-spacing: -0.005em; cursor: text; } .crm-paso-valor:focus-visible { outline: none; } .crm-paso-unidad { margin-left: 2px; color: var(--crm-muted); font-size: 12px; } .crm-paso[data-tamano=mini] .crm-paso-unidad { font-size: 11px; } @media (pointer: coarse) { .crm-paso:not([data-tamano=grande]) { --crm-paso-alto: 40px; } } .crm-valoracion { --crm-valoracion-alto: 32px; --crm-valoracion-icono: 16px; display: inline-flex; align-items: center; height: var(--crm-valoracion-alto); } .crm-valoracion[data-tamano=mini] { --crm-valoracion-alto: 24px; --crm-valoracion-icono: 14px; } .crm-valoracion[data-tamano=compacto] { --crm-valoracion-alto: 28px; --crm-valoracion-icono: 14px; } .crm-valoracion[data-tamano=grande] { --crm-valoracion-alto: 40px; } .crm-valoracion-estrella { display: grid; place-items: center; box-sizing: border-box; width: max(24px, calc(var(--crm-valoracion-alto) - 8px)); height: var(--crm-valoracion-alto); margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--crm-dim); -webkit-tap-highlight-color: transparent; transition: color var(--crm-t-color) ease-out; } .crm-valoracion[data-solo-lectura] .crm-valoracion-estrella { width: var(--crm-valoracion-icono); margin-right: 2px; } button.crm-valoracion-estrella { cursor: pointer; } .crm-valoracion-estrella svg { width: var(--crm-valoracion-icono); height: var(--crm-valoracion-icono); stroke-width: 1.6; fill: transparent; transition: fill var(--crm-t-color) ease-out, transform var(--crm-t-pulsar) var(--crm-snap); } .crm-valoracion-estrella[data-llena] { color: var(--crm-text); } .crm-valoracion-estrella[data-llena] svg { fill: currentColor; } button.crm-valoracion-estrella:active svg { transform: scale(0.96); } button.crm-valoracion-estrella:focus-visible { outline-offset: -1px; } .crm-valoracion[data-deshabilitado] .crm-valoracion-estrella { color: var(--crm-line-2); cursor: not-allowed; } .crm-valoracion[data-deshabilitado] .crm-valoracion-estrella[data-llena] { color: var(--crm-dim); } .crm-progreso { display: grid; gap: 6px; min-width: 0; color: var(--crm-text-2); font-family: var(--crm-sans); } .crm-progreso[data-tamano=compacto] { min-width: 64px; } .crm-progreso-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; } .crm-progreso-rotulo { min-width: 0; overflow: hidden; font-size: 13px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; } .crm-progreso-cifra { display: inline-flex; flex: none; align-items: center; gap: 6px; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 12px; font-variant-numeric: tabular-nums; line-height: 16px; } .crm-progreso-cifra svg { width: 14px; height: 14px; stroke-width: 1.5; } .crm-progreso-barra { position: relative; height: 4px; overflow: hidden; background: var(--crm-line-2); } .crm-progreso-hecho { display: block; position: relative; width: 0; height: 100%; background: var(--crm-text-2); transition: width var(--crm-t-gesto) var(--crm-curva); } .crm-progreso[data-estado=en-curso]:not([data-indeterminado], [data-deshabilitado]) .crm-progreso-hecho::after { position: absolute; inset: 0 0 0 auto; width: 2px; background: var(--crm-acento); content: ""; } .crm-progreso[data-estado=completado] .crm-progreso-hecho { background: var(--crm-acento); } .crm-progreso[data-estado=completado] .crm-progreso-cifra { color: var(--crm-acento); } .crm-progreso[data-estado=error] .crm-progreso-hecho { background: var(--crm-error); } .crm-progreso[data-estado=error] .crm-progreso-cifra { color: var(--crm-error); } .crm-progreso[data-indeterminado][data-estado=en-curso] .crm-progreso-hecho { width: 100%; background: linear-gradient( 90deg, transparent, var(--crm-acento) 50%, transparent) no-repeat; background-size: 40% 100%; background-position: -40% 0; animation: crm-filo-continuo var(--crm-t-filo) var(--crm-curva) infinite; } .crm-progreso[data-indeterminado][data-estado=error] .crm-progreso-hecho { width: 100%; } .crm-progreso[data-deshabilitado] .crm-progreso-barra { background: var(--crm-linea-apagada); } .crm-progreso[data-deshabilitado] .crm-progreso-hecho, .crm-progreso[data-deshabilitado] .crm-progreso-hecho::after { background: var(--crm-dim); animation: none; } .crm-progreso[data-deshabilitado] :is(.crm-progreso-rotulo, .crm-progreso-cifra, .crm-progreso-detalle) { color: var(--crm-dim); } .crm-progreso-detalle { margin: 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; } @media (forced-colors: active) { .crm-progreso-barra { border: 1px solid CanvasText; } .crm-progreso-hecho { background: Highlight; } } .crm-compositor { display: grid; gap: 8px; min-width: 0; } .crm-compositor-caja { position: relative; display: grid; min-width: 0; border: 1px solid var(--crm-control); background: var(--crm-panel); transition: border-color var(--crm-t-color) var(--crm-snap); } .crm-compositor-caja::before { position: absolute; z-index: 1; inset: -1px -1px auto; height: 1px; background: linear-gradient( 90deg, transparent, var(--crm-acento) 50%, transparent) no-repeat; background-size: 40% 100%; background-position: -40% 0; opacity: 0; content: ""; pointer-events: none; } .crm-compositor-caja:focus-within { border-color: var(--crm-acento); box-shadow: inset 0 0 0 calc(var(--crm-foco-ancho) - 1px) var(--crm-acento); } .crm-compositor[data-cargando] .crm-compositor-caja::before { opacity: 1; animation: crm-filo-continuo var(--crm-t-filo) var(--crm-curva) infinite; } .crm-compositor[data-error] .crm-compositor-caja { border-color: var(--crm-error-linea); } .crm-compositor[data-error] .crm-compositor-caja:focus-within { border-color: var(--crm-error); } .crm-compositor[data-deshabilitado] .crm-compositor-caja { border-color: var(--crm-linea-apagada); background: transparent; } .crm-compositor .crm-entrada.crm-area, .crm-compositor .crm-entrada.crm-area:focus-within:not(:has(.crm-entrada-accion:focus)), .crm-compositor .crm-entrada.crm-area[data-invalido], .crm-compositor .crm-entrada.crm-area[data-invalido]:is(:focus-within, [data-state=open], [data-abierto]):not(:has(.crm-entrada-accion:focus)) { border-color: transparent; background: transparent; } .crm-compositor .crm-area .crm-entrada-control { min-height: 48px; padding: 12px 12px 0; font-size: 15px; line-height: 24px; } .crm-compositor-pie { display: flex; align-items: center; gap: 8px; box-sizing: border-box; min-height: 40px; padding: 4px 4px 4px 12px; } .crm-compositor-acciones { display: flex; flex: none; align-items: center; gap: 4px; margin-left: -8px; } .crm-compositor-pista { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--crm-dim); font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; } .crm-compositor-cuenta { flex: none; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 12px; font-variant-numeric: tabular-nums; line-height: 16px; } .crm-compositor-cuenta[data-lleno] { color: var(--crm-error); } .crm-compositor-enviar { flex: none; } .crm-compositor-capa { position: absolute; z-index: 1; top: 12px; right: 12px; left: 12px; display: flex; align-items: center; min-height: 48px; pointer-events: none; } .crm-compositor[data-capa] .crm-area .crm-entrada-control { min-height: 72px; color: transparent; caret-color: transparent; } .crm-compositor[data-capa] .crm-area .crm-entrada-control::selection { background: transparent; } .crm-compositor-error { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--crm-error); font-size: 13px; line-height: 20px; } .crm-compositor-error svg { flex: none; width: 16px; height: 16px; margin-top: 2px; stroke-width: 1.6; } @media (pointer: coarse) { .crm-compositor .crm-area .crm-entrada-control { font-size: 16px; } } @media (prefers-reduced-motion: reduce) { .crm-autocompletar[data-cargando] > .crm-entrada::after { animation: none; background: var(--crm-acento-linea); } .crm-compositor[data-cargando] .crm-compositor-caja::before { animation: none; background: var(--crm-acento-linea); } .crm-progreso-hecho { transition: none; } .crm-progreso[data-indeterminado][data-estado=en-curso] .crm-progreso-hecho { animation: none; background: var(--crm-acento-linea); } .crm-zona-progreso[data-indeterminado] .crm-zona-progreso-hecho { animation: none; background: var(--crm-acento-linea); } .crm-boton, .crm-boton-icono[data-flecha] svg, .crm-opcion-fila::before, .crm-interruptor-mando, .crm-conmutador[data-listo] .crm-conmutador-indicador, .crm-aviso-cerrar, .crm-tostada-cerrar, .crm-tostada-accion { transition-property: background-color, border-color, color, opacity; } .crm-tecla[data-pulsada], .crm-boton:active, .crm-boton-solo-icono:active, .crm-tostada-accion:active, .crm-aviso-cerrar:active, .crm-tostada-cerrar:active, .crm-paso-boton:active svg, button.crm-valoracion-estrella:active svg, .crm-boton:hover .crm-boton-icono[data-flecha] svg { transform: none; } .crm-selector-lista[data-state=open], .crm-casilla-marca svg, .crm-radio-punto, .crm-tostada, .crm-boton-giro, .crm-estado[data-estado=vivo] .crm-estado-punto::after, .crm-esqueleto::after, .crm-contador[data-sube], .crm-tostada-giro, .crm-interruptor[data-cargando] .crm-interruptor-mando, .crm-boton[data-confirmando]::before { animation: none; } .crm-cargando[data-progreso] .crm-cargando-filo { background-position: 0 0; transition: none; } .crm-tostada-vida, .crm-esqueleto::after { display: none; } .crm-boton[data-cargando]::before, .crm-cargando-filo { animation: none; background-position: 50% 0; } } .crm-zona { display: grid; gap: 8px; min-width: 0; container: crm-zona / inline-size; } .crm-zona-area { position: relative; display: grid; justify-items: center; gap: 12px; box-sizing: border-box; padding: 24px; border: 1px dashed var(--crm-line-2); background: transparent; color: var(--crm-text-2); font-family: var(--crm-sans); text-align: center; cursor: pointer; transition: border-color var(--crm-t-color) var(--crm-snap), background-color var(--crm-t-color) var(--crm-snap); } .crm-zona-area:hover, .crm-zona[data-crm-forzar=hover] .crm-zona-area { border-color: var(--crm-control); background: var(--crm-panel); transition-duration: 0ms; } .crm-zona-input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; border: 0; clip-path: inset(50%); opacity: 0; white-space: nowrap; } .crm-zona-area:has(.crm-zona-input:focus-visible), .crm-zona[data-crm-forzar=foco] .crm-zona-area { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-zona-area[data-arrastre=vale] { border-style: solid; border-color: var(--crm-acento); background: var(--crm-acento-suave); } .crm-zona-area[data-arrastre=no-vale] { border-style: solid; border-color: var(--crm-error-linea); cursor: no-drop; } .crm-zona-area[data-error]:not([data-arrastre]) { border-color: var(--crm-error-linea); } .crm-zona-area[data-deshabilitada] { border-color: var(--crm-linea-apagada); background: transparent; color: var(--crm-dim); cursor: not-allowed; } .crm-zona-area[data-ocupada] { border-style: solid; border-color: var(--crm-line-2); background: transparent; cursor: progress; } .crm-zona-icono { display: grid; place-items: center; box-sizing: border-box; width: 40px; height: 40px; border: 1px solid var(--crm-line-2); color: var(--crm-muted); transition: color var(--crm-t-color) var(--crm-snap), border-color var(--crm-t-color) var(--crm-snap); } .crm-zona-icono svg { width: 20px; height: 20px; stroke-width: 1.6; } .crm-zona-area[data-arrastre=vale] .crm-zona-icono { border-color: var(--crm-acento-linea); color: var(--crm-acento); } .crm-zona-area[data-deshabilitada] .crm-zona-icono { border-color: var(--crm-linea-apagada); color: var(--crm-dim); } .crm-zona-textos { display: grid; justify-items: inherit; gap: 2px; min-width: 0; max-width: 68ch; } .crm-zona-titulo { color: var(--crm-text); font-size: 14px; font-weight: 500; line-height: 22px; text-wrap: balance; } .crm-zona-area[data-deshabilitada] .crm-zona-titulo { color: var(--crm-dim); } .crm-zona-elegir { display: inline-flex; align-items: center; gap: 8px; color: var(--crm-text-2); font-size: 13px; line-height: 20px; } .crm-zona-enlace { text-decoration: underline; text-decoration-color: var(--crm-control); text-decoration-thickness: 1px; text-underline-offset: 4px; } .crm-zona-area:hover .crm-zona-enlace { text-decoration-color: var(--crm-text-2); } .crm-zona-area[data-deshabilitada] :is(.crm-zona-elegir, .crm-zona-enlace) { color: var(--crm-dim); text-decoration-color: var(--crm-linea-apagada); } .crm-zona-tecla { display: none; } .crm-zona-area:has(.crm-zona-input:focus-visible) .crm-zona-tecla, .crm-zona[data-crm-forzar=foco] .crm-zona-tecla { display: inline-flex; } .crm-zona-descripcion { margin-top: 2px; color: var(--crm-muted); font-size: 12px; line-height: 16px; text-wrap: pretty; } .crm-zona-area[data-deshabilitada] .crm-zona-descripcion { color: var(--crm-dim); } .crm-zona-progreso { position: absolute; inset: auto 0 0; height: 2px; overflow: hidden; background: var(--crm-line); } .crm-zona-progreso-hecho { display: block; width: 0; height: 100%; background: var(--crm-acento); transition: width var(--crm-t-gesto) var(--crm-curva); } .crm-zona-progreso[data-indeterminado] .crm-zona-progreso-hecho { width: 100%; background: linear-gradient( 90deg, transparent, var(--crm-acento) 50%, transparent) no-repeat; background-size: 40% 100%; background-position: -40% 0; animation: crm-filo-continuo var(--crm-t-filo) var(--crm-curva) infinite; } .crm-zona[data-tamano=fila] .crm-zona-area { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; justify-items: start; gap: 12px; min-height: 56px; padding: 8px 12px; text-align: start; } .crm-zona[data-tamano=fila] .crm-zona-icono { width: auto; height: auto; border: 0; } .crm-zona[data-tamano=fila] .crm-zona-titulo { font-size: 13px; line-height: 20px; } .crm-zona[data-tamano=fila] .crm-zona-textos { gap: 0; } .crm-zona[data-tamano=fila] .crm-zona-elegir { display: none; } .crm-zona-boton { display: inline-flex; align-items: center; box-sizing: border-box; height: 28px; padding: 0 10px; border: 1px solid var(--crm-line-2); color: var(--crm-text); font-size: 13px; font-weight: 500; line-height: 20px; white-space: nowrap; } .crm-zona-area:hover .crm-zona-boton { background: var(--crm-panel-2); } .crm-zona-area[data-deshabilitada] .crm-zona-boton { border-color: var(--crm-linea-apagada); background: transparent; color: var(--crm-dim); } @container crm-zona (max-width: 399.98px) { .crm-zona-area { padding: 16px; } .crm-zona[data-tamano=fila] .crm-zona-area { grid-template-columns: auto minmax(0, 1fr); } .crm-zona[data-tamano=fila] .crm-zona-boton { grid-column: 2; justify-self: start; } } .crm-zona-error { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--crm-error); font-size: 13px; line-height: 20px; } .crm-zona-error svg { flex: none; width: 16px; height: 16px; margin-top: 2px; stroke-width: 1.6; } .crm-zona-archivos { margin: 0; padding: 0; border-top: 1px solid var(--crm-line); list-style: none; } .crm-zona-archivo { display: flex; align-items: center; gap: 8px; box-sizing: border-box; min-height: 40px; padding: 0 8px; border-bottom: 1px solid var(--crm-line); font-size: 13px; line-height: 20px; } .crm-zona-archivo > .crm-estado { flex: none; } .crm-zona-archivo > svg { flex: none; width: 16px; height: 16px; color: var(--crm-muted); stroke-width: 1.6; } .crm-zona-archivo-textos { display: grid; flex: 1 1 auto; min-width: 0; padding-block: 8px 7px; } .crm-zona-archivo-nombre, .crm-zona-archivo-detalle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-zona-archivo-nombre { color: var(--crm-text); } .crm-zona-archivo-detalle { color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-zona-archivo[data-estado=error] .crm-zona-archivo-detalle { overflow: visible; overflow-wrap: anywhere; white-space: normal; } .crm-zona-archivo-peso { flex: none; color: var(--crm-dim); font-size: 12px; font-variant-numeric: tabular-nums; line-height: 16px; } @media (forced-colors: active) { .crm-zona-area[data-arrastre=vale] { border-color: Highlight; } .crm-zona-progreso-hecho { background: Highlight; } } .crm-pasos { --crm-pasos-tecla: 20px; --crm-pasos-aire: 8px; --crm-pasos-hueco: 8px; container: crm-pasos / inline-size; display: grid; gap: 8px; min-width: 0; color: var(--crm-text-2); font-family: var(--crm-sans); } .crm-pasos :where(*), .crm-pasos ::before, .crm-pasos ::after { box-sizing: border-box; } .crm-pasos-resumen { display: none; margin: 0; overflow: hidden; color: var(--crm-muted); font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; } .crm-pasos-cifra { font-variant-numeric: tabular-nums; } .crm-pasos-resumen-nombre { color: var(--crm-text); font-weight: 500; } .crm-pasos-lista { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: var(--crm-pasos-hueco); margin: 0; padding: 0; list-style: none; } .crm-pasos-paso { min-width: 0; border-top: 2px solid var(--crm-line-2); } .crm-pasos-paso[data-estado=hecho] { border-top-color: var(--crm-muted); } .crm-pasos-paso[data-estado=actual] { border-top-color: var(--crm-acento); } .crm-pasos-paso[data-estado=revisar] { border-top-color: var(--crm-aviso); } .crm-pasos-paso[data-estado=revisar] .crm-pasos-numero { border-color: var(--crm-aviso-linea); color: var(--crm-aviso); } .crm-pasos-cuerpo { display: flex; align-items: center; gap: var(--crm-pasos-aire); width: 100%; min-width: 0; margin: 0; padding: 8px 0 0; border: 0; background: none; color: inherit; font: inherit; font-size: 13px; line-height: 20px; text-align: left; } button.crm-pasos-cuerpo { cursor: pointer; } button.crm-pasos-cuerpo:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-pasos-numero { display: inline-grid; flex: none; place-items: center; width: var(--crm-pasos-tecla); height: var(--crm-pasos-tecla); border: 1px solid var(--crm-line-2); color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; font-variant-numeric: tabular-nums; line-height: 16px; } .crm-pasos-numero svg { width: 14px; height: 14px; } .crm-pasos-nombre { overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; } .crm-pasos-sonda { position: absolute; width: 0; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; font-size: 13px; font-weight: 500; line-height: 20px; white-space: nowrap; } .crm-pasos-paso[data-estado=actual] .crm-pasos-numero { border-color: var(--crm-control); color: var(--crm-text); } .crm-pasos-paso[data-estado=actual] .crm-pasos-nombre { color: var(--crm-text); font-weight: 500; } .crm-pasos-paso[data-estado=pendiente] .crm-pasos-nombre { color: var(--crm-muted); } button.crm-pasos-cuerpo:not([aria-disabled=true]):hover .crm-pasos-nombre { color: var(--crm-text); } button.crm-pasos-cuerpo[aria-disabled=true] { cursor: not-allowed; } .crm-pasos-paso[data-deshabilitado] .crm-pasos-nombre, .crm-pasos-paso[data-deshabilitado] .crm-pasos-numero { border-color: var(--crm-linea-apagada); color: var(--crm-dim); } @container crm-pasos (max-width: 559.98px) { .crm-pasos-resumen { display: block; } .crm-pasos-cuerpo { min-height: 0; padding: 0; } button.crm-pasos-cuerpo { min-height: 24px; } .crm-pasos-numero, .crm-pasos-nombre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .crm-pasos[data-con-acciones] .crm-pasos-resumen { display: none; } .crm-pasos[data-con-acciones] .crm-pasos-lista { grid-auto-flow: row; gap: 4px; } .crm-pasos[data-con-acciones] .crm-pasos-cuerpo { min-height: 32px; padding: 4px 0 0; } .crm-pasos[data-con-acciones] .crm-pasos-numero { position: static; width: 20px; height: 20px; overflow: visible; clip-path: none; } .crm-pasos[data-con-acciones] .crm-pasos-nombre { position: static; width: auto; height: auto; clip-path: none; } } @container crm-pasos (max-width: 559.98px) { .crm-pasos[data-forma=fila] .crm-pasos-resumen { display: none; } .crm-pasos[data-forma=fila] .crm-pasos-lista { grid-auto-flow: column; gap: var(--crm-pasos-hueco); } .crm-pasos[data-forma=fila] .crm-pasos-cuerpo { min-height: 0; padding: 8px 0 0; } .crm-pasos[data-forma=fila] .crm-pasos-numero, .crm-pasos[data-forma=fila] .crm-pasos-nombre { position: static; height: auto; clip-path: none; } .crm-pasos[data-forma=fila] .crm-pasos-numero { width: var(--crm-pasos-tecla); height: var(--crm-pasos-tecla); overflow: visible; } .crm-pasos[data-forma=fila] .crm-pasos-nombre { width: auto; overflow: hidden; } } .crm-pasos[data-forma=estrecha] .crm-pasos-resumen { display: block; } .crm-pasos[data-forma=estrecha] .crm-pasos-cuerpo { min-height: 0; padding: 0; } .crm-pasos[data-forma=estrecha] button.crm-pasos-cuerpo { min-height: 24px; } .crm-pasos[data-forma=estrecha] .crm-pasos-numero, .crm-pasos[data-forma=estrecha] .crm-pasos-nombre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .crm-pasos[data-forma=estrecha][data-con-acciones] .crm-pasos-resumen { display: none; } .crm-pasos[data-forma=estrecha][data-con-acciones] .crm-pasos-lista { grid-auto-flow: row; gap: 4px; } .crm-pasos[data-forma=estrecha][data-con-acciones] .crm-pasos-cuerpo { min-height: 32px; padding: 4px 0 0; } .crm-pasos[data-forma=estrecha][data-con-acciones] .crm-pasos-numero { position: static; width: var(--crm-pasos-tecla); height: var(--crm-pasos-tecla); overflow: visible; clip-path: none; } .crm-pasos[data-forma=estrecha][data-con-acciones] .crm-pasos-nombre { position: static; width: auto; height: auto; clip-path: none; } @media (pointer: coarse) { .crm-pasos[data-con-acciones] button.crm-pasos-cuerpo { min-height: 40px; } .crm-pasos[data-forma=estrecha][data-con-acciones] button.crm-pasos-cuerpo { min-height: 40px; } } @media (forced-colors: active) { .crm-pasos-paso[data-estado=actual] { border-top-color: Highlight; } } .crm-selector-multiple { display: grid; gap: 8px; min-width: 0; } .crm-selector-cuenta { flex: none; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; font-variant-numeric: tabular-nums; line-height: 16px; } .crm-selector-casilla { box-sizing: border-box; width: 14px; height: 14px; border: 1px solid var(--crm-control); } .crm-selector-casilla[data-marcada] { border-color: var(--crm-acento); } .crm-selector-casilla svg { width: 12px; height: 12px; } .crm-selector-opcion[data-disabled] .crm-selector-casilla { border-color: var(--crm-linea-apagada); } .crm-selector-multiple-barra { display: flex; flex: none; align-items: center; gap: 12px; box-sizing: border-box; min-height: 32px; padding: 0 12px; border-bottom: 1px solid var(--crm-line); color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-selector-multiple-cuenta { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; } .crm-selector-multiple-fuera { color: var(--crm-dim); } .crm-selector-multiple-accion { flex: none; margin: 0; padding: 0; border: 0; background: none; color: var(--crm-text-2); font: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--crm-line-2); text-underline-offset: 2px; } .crm-selector-multiple-accion:hover { color: var(--crm-text); text-decoration-color: currentColor; } .crm-selector-multiple-accion:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-selector-elegidas { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; } .crm-selector-elegidas .crm-etiqueta { max-width: 100%; } .crm-deslizador { position: relative; display: flex; align-items: center; width: 100%; min-width: 80px; height: 32px; touch-action: none; user-select: none; } .crm-deslizador-pista { position: relative; flex: 1 1 auto; height: 4px; overflow: hidden; background: var(--crm-panel-3); } .crm-deslizador-tramo { position: absolute; height: 100%; background: var(--crm-text-2); } .crm-deslizador-mando { display: block; box-sizing: border-box; width: 16px; height: 16px; border: 1px solid var(--crm-control); background: var(--crm-bg); cursor: grab; transition: border-color var(--crm-t-color) ease-out, background-color var(--crm-t-color) ease-out; } .crm-deslizador-mando:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } @media (hover: hover) { .crm-deslizador:not([data-disabled]) .crm-deslizador-mando:hover { border-color: var(--crm-text); } } .crm-deslizador-mando:active { cursor: grabbing; } .crm-deslizador[data-invalido] .crm-deslizador-mando { border-color: var(--crm-error); } .crm-deslizador[data-invalido] .crm-deslizador-tramo { background: var(--crm-error); } .crm-deslizador[data-sin-valor] .crm-deslizador-mando { border-color: var(--crm-line-2); } .crm-deslizador[data-disabled]:not([data-solo-lectura]) .crm-deslizador-pista { background: transparent; box-shadow: inset 0 0 0 1px var(--crm-linea-apagada); } .crm-deslizador[data-disabled]:not([data-solo-lectura]) .crm-deslizador-tramo { background: var(--crm-linea-apagada); } .crm-deslizador[data-disabled]:not([data-solo-lectura]) .crm-deslizador-mando { border-color: var(--crm-linea-apagada); cursor: not-allowed; } .crm-deslizador[data-solo-lectura] .crm-deslizador-mando { cursor: default; } @media (pointer: coarse) { .crm-deslizador { height: 40px; } .crm-deslizador-mando { width: 20px; height: 20px; } } .crm-color { display: flex; align-items: center; gap: 8px; min-width: 0; } .crm-color-muestra { position: relative; flex: none; box-sizing: border-box; width: 32px; height: 32px; border: 1px solid var(--crm-control); background-clip: padding-box; } .crm-color-muestra[data-sin-color] { background-image: linear-gradient( to top right, transparent calc(50% - 0.5px), var(--crm-line-2) calc(50% - 0.5px), var(--crm-line-2) calc(50% + 0.5px), transparent calc(50% + 0.5px)); } .crm-color-muestra:has(.crm-color-nativo:focus-visible) { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-color-nativo { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; } .crm-color-hex { flex: none; width: 12ch; } .crm-color-nombre { min-width: 0; overflow: hidden; color: var(--crm-text-2); font-size: 13px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; } .crm-color[data-deshabilitado] .crm-color-muestra { border-color: var(--crm-linea-apagada); } .crm-color[data-deshabilitado] .crm-color-nativo { cursor: not-allowed; } .crm-color[data-deshabilitado] .crm-color-nombre { color: var(--crm-dim); } @media (pointer: coarse) { .crm-color-muestra { width: 40px; height: 40px; } } .crm-autocompletar { position: relative; display: grid; gap: 8px; min-width: 0; } .crm-autocompletar[data-cargando] > .crm-entrada::after { content: ""; position: absolute; inset: auto -1px -1px; height: 1px; background: linear-gradient( 90deg, transparent, var(--crm-acento-linea), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: crm-filo var(--crm-t-filo) var(--crm-curva) infinite; } .crm-autocompletar-resumen { margin: 0; color: var(--crm-muted); font-size: 12px; font-variant-numeric: tabular-nums; line-height: 16px; } .crm-autocompletar-lista { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } .crm-autocompletar[data-presentacion=capa] .crm-autocompletar-lista { position: absolute; z-index: 60; top: calc(var(--crm-entrada-alto, 32px) + 4px); right: 0; left: 0; max-height: 280px; overflow-y: auto; padding: 4px; border: 1px solid var(--crm-line-2); background: var(--crm-panel-2); box-shadow: var(--crm-sombra-capa); } .crm-autocompletar-opcion { user-select: none; -webkit-touch-callout: none; position: relative; display: grid; align-content: center; gap: 0; min-height: 36px; padding: 4px 8px; color: var(--crm-text-2); cursor: pointer; transition: background-color var(--crm-t-color) ease-out; } .crm-autocompletar-lista[data-con-detalle] .crm-autocompletar-opcion { min-height: 44px; } .crm-autocompletar-opcion[data-activa] { background: var(--crm-panel-2); transition-duration: 0ms; } .crm-autocompletar[data-presentacion=capa] .crm-autocompletar-opcion[data-activa] { background: var(--crm-panel-3); } .crm-autocompletar-opcion[aria-selected=true] { background: var(--crm-panel-3); box-shadow: inset 2px 0 0 var(--crm-acento); } .crm-autocompletar-opcion[aria-disabled=true] { color: var(--crm-dim); cursor: not-allowed; } .crm-autocompletar[data-solo-lectura] .crm-autocompletar-opcion { cursor: default; } .crm-autocompletar-etiqueta { overflow: hidden; color: var(--crm-text); font-size: 13px; font-weight: 500; line-height: 20px; letter-spacing: -0.005em; text-overflow: ellipsis; white-space: nowrap; } .crm-autocompletar-opcion[aria-disabled=true] .crm-autocompletar-etiqueta { color: var(--crm-dim); } .crm-autocompletar-detalle { overflow: hidden; color: var(--crm-muted); font-size: 12px; font-variant-numeric: tabular-nums; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; } .crm-autocompletar-vacio { padding: 24px 8px; color: var(--crm-muted); font-size: 13px; line-height: 20px; text-align: center; } .crm-titulo-editable { display: inline-flex; max-width: 100%; min-width: 0; vertical-align: top; } .crm-titulo-editable-boton { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: text; } .crm-titulo-editable-boton:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-titulo-editable-texto { overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; } .crm-titulo-editable-boton[data-vacio] .crm-titulo-editable-texto { color: var(--crm-dim); } .crm-titulo-editable-icono { --crm-boton-icono: 16px; display: inline-grid; flex: none; place-items: center; width: 16px; height: 16px; color: var(--crm-muted); opacity: 0; transition: opacity var(--crm-t-color) ease-out; } .crm-titulo-editable-icono svg { width: 16px; height: 16px; } .crm-titulo-editable-boton:focus-visible .crm-titulo-editable-icono, .crm-titulo-editable[data-ocupado] .crm-titulo-editable-icono { opacity: 1; } @media (hover: hover) { .crm-titulo-editable-boton:not([aria-disabled=true]):hover .crm-titulo-editable-icono { opacity: 1; color: var(--crm-text); } } @media (pointer: coarse) { .crm-titulo-editable-icono { opacity: 1; } } .crm-titulo-editable-boton[aria-disabled=true] { cursor: default; } .crm-titulo-editable-campo { box-sizing: border-box; width: min(100%, 68ch); margin: -5px; padding: 4px; border: 1px solid var(--crm-acento); border-radius: 0; outline: none; background: var(--crm-panel); color: var(--crm-text); font: inherit; letter-spacing: inherit; } .crm-titulo-editable-campo::placeholder { color: var(--crm-dim); opacity: 1; } .crm-fecha-hora { container-type: inline-size; margin: 0; padding: 0; border: 0; min-width: 0; color: var(--crm-text); font-family: var(--crm-sans); } .crm-fecha-hora-leyenda { padding: 0; margin-bottom: 8px; font-size: 13px; line-height: 20px; font-weight: 500; overflow-wrap: anywhere; } .crm-fecha-hora-controles { display: grid; grid-template-columns: minmax(0, 2fr) minmax(96px, 1fr) auto; gap: 8px; align-items: start; } .crm-fecha-hora-controles > .crm-boton { margin-top: 24px; } .crm-fecha-hora-controles > .crm-ctl-campo { min-width: 0; } .crm-fecha-hora[data-lectura] .crm-fecha-hora-controles { grid-template-columns: minmax(0, 2fr) minmax(96px, 1fr); } .crm-fecha-hora-zona { margin: 6px 0 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; overflow-wrap: anywhere; } @container (max-width: 240px) { .crm-fecha-hora .crm-fecha-hora-controles, .crm-fecha-hora[data-lectura] .crm-fecha-hora-controles { grid-template-columns: minmax(96px, 1fr) auto; } .crm-fecha-hora-controles > .crm-ctl-campo:first-child { grid-column: 1 / -1; } } .crm-fecha-hora[data-lectura] .crm-fecha { color: var(--crm-text); cursor: default; } .crm-entrada.crm-fecha { justify-content: flex-start; } .crm-entrada.crm-fecha .crm-selector-valor { flex: 1; font-variant-numeric: tabular-nums; } .crm-entrada.crm-fecha[data-variante=filtro] .crm-selector-valor { flex: none; } .crm-fecha-icono { display: grid; flex: none; color: var(--crm-muted); } .crm-fecha-icono svg { width: 16px; height: 16px; } .crm-fecha:is([data-tamano=mini], [data-tamano=compacto]) .crm-fecha-icono svg { width: 14px; height: 14px; stroke-width: 1.5; } .crm-fecha:is([data-abierto]) .crm-fecha-icono { color: var(--crm-text); } .crm-fecha[data-solo-lectura] { cursor: default; } .crm-fecha[data-solo-lectura] .crm-selector-chevron { visibility: hidden; } .crm-fecha-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .crm-fecha-validar { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; } .crm-fecha-error { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; color: var(--crm-error); font-family: var(--crm-sans); font-size: 12px; line-height: 16px; } .crm-fecha-error svg { flex: none; width: 14px; height: 14px; margin-top: 1px; } .crm-fecha-capa { z-index: 60; display: grid; gap: 8px; box-sizing: border-box; max-width: calc(100vw - 32px); padding: 8px; border: 1px solid var(--crm-line-2); border-radius: 0; background: var(--crm-panel-2); box-shadow: var(--crm-sombra-capa); color: var(--crm-text-2); font-family: var(--crm-sans); transform-origin: var(--radix-popover-content-transform-origin); } .crm-fecha-capa[data-state=open] { animation: crm-ctl-capa-entra var(--crm-t-entrada) var(--crm-snap); } .crm-fecha-capa[data-side=top][data-state=open] { animation-name: crm-ctl-capa-entra-arriba; } .crm-fecha-capa[data-state=closed] { animation: crm-ctl-capa-sale var(--crm-t-salida) ease-out forwards; } .crm-fecha-capa *, .crm-fecha-capa *::before, .crm-fecha-capa *::after, .crm-fecha-amplia *, .crm-fecha-amplia *::before, .crm-fecha-amplia *::after { box-sizing: border-box; } .crm-fecha-escribir { display: grid; gap: 4px; } .crm-fecha-escribir-control { width: 100%; height: 28px; margin: 0; padding: 0 8px; border: 1px solid var(--crm-line-2); border-radius: 0; background: var(--crm-panel); color: var(--crm-text); font-family: var(--crm-sans); font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums; caret-color: var(--crm-acento); } .crm-fecha-escribir-control::placeholder { color: var(--crm-dim); } .crm-fecha-escribir-control:focus-visible { border-color: var(--crm-acento); outline: none; } .crm-fecha-escribir[data-error] .crm-fecha-escribir-control { border-color: var(--crm-error-linea); } .crm-fecha-escribir-error { max-width: 224px; color: var(--crm-error); font-size: 12px; line-height: 16px; } .crm-fecha-escribir-previa { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-fecha-escribir-previa[data-fuera] { color: var(--crm-aviso); } .crm-calendario { display: grid; gap: 4px; width: 224px; } .crm-calendario-anuncio { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .crm-calendario-cabecera { display: flex; align-items: center; gap: 2px; height: 28px; } .crm-calendario-hueco { flex: 1; } .crm-calendario-titulo { display: inline-flex; align-items: center; gap: 4px; height: 24px; margin: 0; padding: 0 6px; border: 0; border-radius: 0; background: transparent; color: var(--crm-text); font-family: var(--crm-sans); font-size: 13px; font-weight: 500; line-height: 20px; letter-spacing: -0.005em; white-space: nowrap; cursor: pointer; transition: background-color var(--crm-t-salida) linear, color var(--crm-t-salida) linear; } .crm-calendario-titulo svg { flex: none; width: 14px; height: 14px; color: var(--crm-muted); transition: transform var(--crm-t-gesto) var(--crm-snap); } .crm-calendario-titulo[aria-expanded=true] { background: var(--crm-panel-3); } .crm-calendario-titulo[aria-expanded=true] svg { transform: rotate(180deg); } .crm-calendario-cifras { font-variant-numeric: tabular-nums; } .crm-calendario-paso { display: grid; place-items: center; width: 24px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--crm-muted); cursor: pointer; transition: background-color var(--crm-t-salida) linear, color var(--crm-t-salida) linear; } .crm-calendario-paso svg { width: 14px; height: 14px; stroke-width: 1.5; } @media (hover: hover) { .crm-calendario-paso:hover:not(:disabled), .crm-calendario-titulo:hover:not(:disabled) { background: var(--crm-panel-3); color: var(--crm-text); transition-duration: 0ms; } } .crm-calendario-paso:active:not(:disabled) { transform: scale(0.96); } .crm-calendario-paso:disabled, .crm-calendario-titulo:disabled { color: var(--crm-dim); cursor: not-allowed; } .crm-calendario-paso:focus-visible, .crm-calendario-titulo:focus-visible, .crm-calendario-dia:focus-visible, .crm-calendario-celda:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: -1px; } .crm-calendario-cuerpo { display: grid; } .crm-calendario-rejilla { width: 224px; border-collapse: collapse; border-spacing: 0; table-layout: fixed; } .crm-calendario-rejilla th { height: 24px; padding: 0; color: var(--crm-dim); font-family: var(--crm-mono); font-size: 11px; font-weight: 400; line-height: 16px; letter-spacing: 0.06em; text-align: center; } .crm-calendario-rejilla td { width: 32px; height: 32px; padding: 0; } .crm-calendario-rejilla td[data-en-rango], .crm-calendario-rejilla td[data-extremo=desde], .crm-calendario-rejilla td[data-extremo=hasta] { background: var(--crm-panel-3); } .crm-calendario-dia, .crm-calendario-celda { position: relative; display: grid; place-items: center; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--crm-text-2); font-family: var(--crm-sans); font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--crm-t-salida) linear; } @media (hover: hover) { .crm-calendario-dia:hover:not(:disabled), .crm-calendario-celda:hover:not(:disabled) { background: var(--crm-panel-3); color: var(--crm-text); transition-duration: 0ms; } } .crm-calendario-rejilla td[data-fuera] .crm-calendario-dia, .crm-calendario-celdas [data-fuera] .crm-calendario-celda { color: var(--crm-muted); } .crm-calendario-dia[data-hoy], .crm-calendario-celda[data-hoy] { color: var(--crm-text); font-weight: 500; } .crm-calendario-dia[data-hoy]::before, .crm-calendario-celda[data-hoy]::before { content: ""; position: absolute; bottom: 5px; left: 50%; width: 8px; height: 2px; margin-left: -4px; background: var(--crm-muted); } .crm-calendario-rejilla td[data-elegido] .crm-calendario-dia, .crm-calendario-celdas [data-elegido] .crm-calendario-celda { background: var(--crm-panel-3); box-shadow: inset 0 0 0 1px var(--crm-control); color: var(--crm-text); font-weight: 500; } .crm-calendario-rejilla td[data-elegido] .crm-calendario-dia::after, .crm-calendario-celdas [data-elegido] .crm-calendario-celda::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--crm-acento); } .crm-calendario-dia:disabled, .crm-calendario-celda:disabled { color: var(--crm-dim); text-decoration: line-through; text-decoration-color: var(--crm-line-2); cursor: not-allowed; } .crm-calendario-vista { display: grid; grid-template-rows: 24px auto; } .crm-calendario-rotulo { display: grid; place-items: center; margin: 0; color: var(--crm-dim); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; } .crm-calendario-celdas { display: grid; } .crm-calendario-celdas [role=row] { display: grid; grid-template-columns: repeat(4, 56px); } .crm-calendario-celdas .crm-calendario-celda, .crm-calendario-vacia { width: 56px; height: 64px; } .crm-calendario[data-tamano=tactil] { width: 336px; } .crm-calendario[data-tamano=tactil] .crm-calendario-cabecera { height: 48px; } .crm-calendario[data-tamano=tactil] .crm-calendario-titulo { gap: 6px; height: 48px; padding: 0 12px; font-size: 15px; line-height: 24px; } .crm-calendario[data-tamano=tactil] :is(.crm-calendario-titulo, .crm-calendario-paso) svg { width: 16px; height: 16px; } .crm-calendario[data-tamano=tactil] .crm-calendario-paso { width: 48px; height: 48px; } .crm-calendario[data-tamano=tactil] .crm-calendario-rejilla { width: 336px; } .crm-calendario[data-tamano=tactil] .crm-calendario-rejilla th { height: 32px; } .crm-calendario[data-tamano=tactil] .crm-calendario-rejilla td, .crm-calendario[data-tamano=tactil] .crm-calendario-dia { width: 48px; height: 48px; } .crm-calendario[data-tamano=tactil] :is(.crm-calendario-dia, .crm-calendario-celda) { font-size: 15px; line-height: 24px; } .crm-calendario[data-tamano=tactil] :is(.crm-calendario-dia, .crm-calendario-celda)[data-hoy]::before { bottom: 8px; width: 12px; margin-left: -6px; } .crm-calendario[data-tamano=tactil] .crm-calendario-vista { grid-template-rows: 32px auto; } .crm-calendario[data-tamano=tactil] .crm-calendario-celdas [role=row] { grid-template-columns: repeat(4, 84px); } .crm-calendario[data-tamano=tactil] :is(.crm-calendario-celdas .crm-calendario-celda, .crm-calendario-vacia) { width: 84px; height: 96px; } @media (pointer: coarse) { .crm-calendario[data-tamano=normal] { width: 280px; } .crm-calendario[data-tamano=normal] .crm-calendario-cabecera { height: 40px; } .crm-calendario[data-tamano=normal] .crm-calendario-titulo { height: 40px; } .crm-calendario[data-tamano=normal] .crm-calendario-paso { width: 40px; height: 40px; } .crm-calendario[data-tamano=normal] .crm-calendario-rejilla { width: 280px; } .crm-calendario[data-tamano=normal] .crm-calendario-rejilla td, .crm-calendario[data-tamano=normal] .crm-calendario-dia { width: 40px; height: 40px; } .crm-calendario[data-tamano=normal] .crm-calendario-celdas [role=row] { grid-template-columns: repeat(4, 70px); } .crm-calendario[data-tamano=normal] :is(.crm-calendario-celdas .crm-calendario-celda, .crm-calendario-vacia) { width: 70px; height: 80px; } .crm-fecha-escribir-error { max-width: 280px; } } .crm-calendario-rejilla tbody[data-direccion=adelante] { animation: crm-fecha-mes-adelante var(--crm-t-gesto) var(--crm-snap); } .crm-calendario-rejilla tbody[data-direccion=atras] { animation: crm-fecha-mes-atras var(--crm-t-gesto) var(--crm-snap); } .crm-calendario-cuerpo[data-entra] { animation: crm-fecha-aparece var(--crm-t-color) var(--crm-snap); } @keyframes crm-fecha-mes-adelante { from { opacity: 0; transform: translateX(8px); } } @keyframes crm-fecha-mes-atras { from { opacity: 0; transform: translateX(-8px); } } @keyframes crm-fecha-aparece { from { opacity: 0; } } @keyframes crm-fecha-taco-entra { from { opacity: 0; transform: translateY(4px); } } .crm-fecha-pie { display: flex; align-items: center; gap: 4px; min-height: 28px; padding-top: 4px; border-top: 1px solid var(--crm-line); } .crm-fecha-pie-accion { display: inline-flex; align-items: center; gap: 6px; height: 24px; margin: 0; padding: 0 8px; border: 0; border-radius: 0; background: transparent; color: var(--crm-text-2); font-family: var(--crm-sans); font-size: 12px; line-height: 16px; cursor: pointer; transition: background-color var(--crm-t-salida) linear, color var(--crm-t-salida) linear; } .crm-fecha-pie-accion svg { width: 14px; height: 14px; stroke-width: 1.5; } .crm-fecha-pie-accion .crm-tecla { min-width: 16px; height: 16px; padding: 0 3px; font-size: 11px; line-height: 14px; } @media (hover: hover) { .crm-fecha-pie-accion:hover:not(:disabled) { background: var(--crm-panel-3); color: var(--crm-text); transition-duration: 0ms; } } .crm-fecha-pie-accion:disabled { color: var(--crm-dim); cursor: not-allowed; } .crm-fecha-pie-accion:focus-visible, .crm-rango-rapido:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: -1px; } .crm-rango-cuerpo { display: flex; gap: 8px; } .crm-rango-rapidos { display: grid; align-content: start; gap: 0; width: 136px; margin: 0; padding: 0 8px 0 0; border-right: 1px solid var(--crm-line); list-style: none; } .crm-rango-rapido { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 28px; margin: 0; padding: 0 4px 0 8px; border: 0; border-radius: 0; background: transparent; color: var(--crm-text-2); font-family: var(--crm-sans); font-size: 13px; line-height: 20px; text-align: left; cursor: pointer; transition: background-color var(--crm-t-salida) linear; } @media (hover: hover) { .crm-rango-rapido:hover:not(:disabled) { background: var(--crm-panel-3); color: var(--crm-text); transition-duration: 0ms; } } .crm-rango-rapido[aria-pressed=true] { background: var(--crm-panel-3); box-shadow: inset 2px 0 0 var(--crm-acento); color: var(--crm-text); font-weight: 500; } .crm-rango-rapido:disabled { color: var(--crm-dim); cursor: not-allowed; } .crm-rango-resumen { flex: 1; min-width: 0; padding-left: 4px; overflow: hidden; color: var(--crm-muted); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 480px) { .crm-rango-cuerpo { flex-direction: column; align-items: center; } .crm-rango-rapidos { display: flex; align-self: stretch; width: auto; padding: 0 0 8px; border-right: 0; border-bottom: 1px solid var(--crm-line); } .crm-rango-rapido { width: auto; } } .crm-fecha-amplia { container-type: inline-size; width: 100%; color: var(--crm-text-2); font-family: var(--crm-sans); } .crm-fecha-amplia-cuerpo { display: grid; gap: 16px; max-width: 768px; margin-inline: auto; } .crm-fecha-amplia-cuerpo > .crm-calendario { justify-self: center; } .crm-fecha-amplia-escribir { display: grid; align-content: start; min-width: 0; } .crm-fecha-amplia-campo { position: relative; display: grid; height: 48px; border: 1px solid var(--crm-control); border-radius: 0; background: var(--crm-panel); } .crm-fecha-amplia-campo[data-invalido] { border-color: var(--crm-error-linea); } .crm-fecha-amplia-campo:focus-within { border-color: var(--crm-acento); } .crm-fecha-amplia-campo[data-deshabilitado] { border-color: var(--crm-linea-apagada); background: transparent; } .crm-fecha-amplia-control, .crm-fecha-amplia-mascara { grid-area: 1 / 1; padding: 0 16px; font-family: var(--crm-sans); font-size: 15px; line-height: 24px; letter-spacing: -0.005em; font-variant-numeric: tabular-nums; } .crm-fecha-amplia-control { width: 100%; height: 46px; margin: 0; border: 0; border-radius: 0; background: transparent; color: var(--crm-text); caret-color: var(--crm-acento); } .crm-fecha-amplia-control:focus-visible { outline: none; } .crm-fecha-amplia-control::placeholder { color: var(--crm-dim); } .crm-fecha-amplia-control:disabled { color: var(--crm-dim); cursor: not-allowed; } .crm-fecha-amplia-mascara { display: flex; align-items: center; overflow: hidden; color: var(--crm-dim); white-space: pre; pointer-events: none; } .crm-fecha-amplia-mascara-escrito { color: transparent; } @media (pointer: coarse) { .crm-fecha-amplia-control, .crm-fecha-amplia-mascara { font-size: 16px; } } .crm-fecha-amplia-linea { min-height: 20px; margin: 8px 0 0; color: var(--crm-muted); font-size: 13px; line-height: 20px; } .crm-fecha-amplia-linea > span { display: flex; align-items: flex-start; gap: 6px; } .crm-fecha-amplia-linea svg { flex: none; width: 14px; height: 14px; margin-top: 3px; } .crm-fecha-amplia-error { color: var(--crm-error); } .crm-fecha-amplia-leida svg { color: var(--crm-acento); } .crm-fecha-amplia-pista { color: var(--crm-dim); } .crm-fecha-amplia-corta { display: none; } .crm-fecha-taco { display: none; gap: 6px; width: 160px; margin-top: 16px; padding: 16px; border: 1px solid var(--crm-line); border-top: 2px solid var(--crm-acento); background: var(--crm-panel); } .crm-fecha-taco[data-vacio] { border-top-color: var(--crm-line-2); } .crm-fecha-taco-rotulo { color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-fecha-taco-cifra { color: var(--crm-text); font-size: 40px; font-weight: 500; line-height: 44px; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; } .crm-fecha-taco-cifra[data-entra] { animation: crm-fecha-taco-entra var(--crm-t-gesto) var(--crm-snap); } .crm-fecha-taco-dia { color: var(--crm-text-2); font-size: 13px; line-height: 20px; } .crm-fecha-taco[data-vacio] .crm-fecha-taco-cifra { color: var(--crm-dim); } .crm-fecha-taco[data-vacio] .crm-fecha-taco-dia { color: var(--crm-dim); font-size: 12px; line-height: 16px; } @container (min-width: 720px) { .crm-fecha-amplia[data-calendario] .crm-fecha-amplia-cuerpo { grid-template-columns: minmax(280px, 1fr) 336px; align-items: start; column-gap: 32px; } .crm-fecha-amplia[data-calendario] .crm-fecha-taco { display: grid; } .crm-fecha-amplia[data-calendario] .crm-fecha-amplia-larga { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .crm-fecha-amplia[data-calendario] .crm-fecha-amplia-corta { display: inline; } } @media (forced-colors: active) { .crm-calendario-rejilla td[data-elegido] .crm-calendario-dia::after, .crm-calendario-celdas [data-elegido] .crm-calendario-celda::after { background: Highlight; forced-color-adjust: none; } .crm-calendario-dia[data-hoy]::before, .crm-calendario-celda[data-hoy]::before { background: CanvasText; forced-color-adjust: none; } .crm-fecha-taco { border-top-color: CanvasText; } } @media (prefers-reduced-motion: reduce) { .crm-calendario-paso:active:not(:disabled) { transform: none; } .crm-calendario-titulo svg { transition: none; } .crm-fecha-capa[data-state=open], .crm-calendario-rejilla tbody[data-direccion], .crm-calendario-cuerpo[data-entra], .crm-fecha-taco-cifra[data-entra] { animation: none; } } @media print { .crm-calendario-rejilla tbody[data-direccion], .crm-calendario-cuerpo[data-entra], .crm-fecha-taco-cifra[data-entra] { animation: none; } } [data-crm-estatico] :is(.crm-calendario-rejilla tbody[data-direccion], .crm-calendario-cuerpo[data-entra], .crm-fecha-taco-cifra[data-entra]) { animation: none; } .crm-etiqueta[data-envolver] { align-items: flex-start; height: auto; min-width: 0; line-height: 1.3333333333; min-height: 24px; padding-block: 3px; white-space: normal; } .crm-etiqueta[data-envolver][data-tamano=compacto] { min-height: 20px; padding-block: 1px; } .crm-etiqueta[data-envolver] .crm-etiqueta-texto { min-width: 0; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; } .crm-etiqueta[data-envolver] .crm-etiqueta-icono { flex: none; height: 1lh; align-items: center; } .crm-etiqueta[data-envolver] .crm-etiqueta-quitar { flex: none; height: calc(1lh + 4px); margin-block: -2px; } .crm-etiqueta[data-envolver][data-tamano=compacto] .crm-etiqueta-quitar { height: 1lh; margin-block: 0; } .crm-miniatura-objeto { display: inline-flex; position: relative; flex: none; align-items: center; justify-content: center; vertical-align: middle; box-sizing: border-box; width: 48px; height: 48px; overflow: hidden; border: 1px solid var(--crm-line); border-radius: 0; background: var(--crm-panel); color: var(--crm-muted); } .crm-miniatura-objeto[data-tamano=mini] { width: 24px; height: 24px; } .crm-miniatura-objeto[data-tamano=compacto] { width: 32px; height: 32px; } .crm-miniatura-objeto > img { width: 100%; height: 100%; object-fit: contain; } .crm-miniatura-objeto > svg { width: 16px; height: 16px; } .crm-miniatura-objeto[data-tamano=mini] > svg { width: 14px; height: 14px; } .crm-miniatura-objeto > .crm-cargando { position: absolute; inset-inline: 0; bottom: 0; } .crm-selector-archivo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-width: 0; max-width: 100%; flex: 1 1 240px; container-type: inline-size; } .crm-selector-archivo > .crm-boton { flex: none; max-width: 100%; } .crm-selector-archivo-seleccion { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; color: var(--crm-text-2); font-size: 13px; line-height: 20px; } .crm-selector-archivo-nombres { display: block; color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-selector-archivo[data-deshabilitado] .crm-selector-archivo-seleccion { color: var(--crm-dim); } @container (max-width: 719px) { .crm-selector-archivo:not([data-tamano-forzado]) > .crm-boton[data-tamano=normal] { min-height: 48px; } } @container (max-width: 400px) { .crm-selector-archivo-seleccion { flex-basis: 100%; } } @media (forced-colors: active) { .crm-miniatura-objeto { border-color: CanvasText; color: CanvasText; background: Canvas; } .crm-aviso { border-color: CanvasText; background: Canvas; } .crm-aviso:is([data-tono=exito], [data-tono=atencion], [data-tono=error]) { border-left-color: Highlight; } .crm-aviso[data-variante=nota] { border-color: CanvasText; background: Canvas; } } .crm-raiz, .crm-marco, .crm-capa { --crm-es-pad: 24px; } .crm-es-rotulo { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.06em; line-height: 16px; text-transform: uppercase; white-space: nowrap; } .crm-es-rotulo[data-acento] { color: var(--crm-acento); } .crm-es-atajo { display: inline-flex; flex: none; gap: 2px; } .crm-es-error { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 0; padding: 8px 12px; border: 1px solid var(--crm-error-linea); background: var(--crm-error-suave); color: var(--crm-error); font-size: 13px; line-height: 20px; } .crm-es-error svg { flex: none; width: 16px; height: 16px; margin-top: 2px; } .crm-punto.crm-es-vivo { width: 6px; height: 6px; background: var(--crm-acento); box-shadow: 0 0 0 3px var(--crm-acento-suave); } .crm-punto.crm-es-vivo::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--crm-acento); animation: crm-latido var(--crm-t-latido) ease-out infinite; } .crm-modal::before, .crm-paleta::before, .crm-deslizante[data-lado=derecha]::before, .crm-tarjeta[data-variante=aprobacion]::before, .crm-desplegable[data-ocupado]::before { content: ""; position: absolute; z-index: 1; inset: -1px -1px auto; height: 1px; background: linear-gradient( 90deg, transparent, var(--crm-acento) 50%, transparent); background-size: 40% 100%; background-repeat: no-repeat; background-position: -40% 0; pointer-events: none; animation: crm-filo calc(var(--crm-t-filo) * 4) var(--crm-curva) infinite calc(var(--crm-t-filo) / 4); } .crm-modal-atajos::before { display: none; } .crm-paleta::before { animation-duration: calc(var(--crm-t-filo) * 3); } .crm-tarjeta[data-variante=aprobacion]::before { animation-duration: calc(var(--crm-t-filo) * 2.5); animation-delay: 0s; } .crm-modal[data-ocupado]::before, .crm-deslizante[data-ocupado]::before, .crm-desplegable[data-ocupado]::before { animation: crm-filo-continuo var(--crm-t-filo) var(--crm-curva) infinite; } .crm-telon { position: fixed; z-index: 40; inset: 0; background: var(--crm-telon); } .crm-capa:has(> .crm-telon) { position: relative; z-index: 40; } .crm-telon[data-state=open] { animation: crm-es-funde var(--crm-t-panel) var(--crm-snap); } .crm-telon[data-state=closed] { animation: crm-es-apaga var(--crm-t-salida) var(--crm-snap) forwards; } @keyframes crm-es-funde { from { opacity: 0; } } @keyframes crm-es-apaga { to { opacity: 0; } } @keyframes crm-es-sube { from { opacity: 0; transform: translateY(8px) scale(0.99); } } @keyframes crm-es-desde-arriba { from { opacity: 0; transform: translateY(-4px) scale(0.98); } } @keyframes crm-es-desde-abajo { from { opacity: 0; transform: translateY(4px) scale(0.98); } } @keyframes crm-es-desde-la-izquierda { from { opacity: 0; transform: translateX(-4px) scale(0.98); } } @keyframes crm-es-desde-la-derecha { from { opacity: 0; transform: translateX(4px) scale(0.98); } } @keyframes crm-es-asoma { from { opacity: 0; transform: scale(0.98); } } @keyframes crm-es-desde-derecha { from { opacity: 0; transform: translateX(24px); } } @keyframes crm-es-desde-izquierda { from { opacity: 0; transform: translateX(-24px); } } @keyframes crm-es-a-derecha { to { opacity: 0; transform: translateX(8px); } } @keyframes crm-es-a-izquierda { to { opacity: 0; transform: translateX(-8px); } } @keyframes crm-es-aparece { to { opacity: 1; } } :is(.crm-menu, .crm-desplegable)[data-state=open][data-side=bottom] { animation: crm-es-desde-arriba var(--crm-t-entrada) var(--crm-snap); } :is(.crm-menu, .crm-desplegable)[data-state=open][data-side=top] { animation: crm-es-desde-abajo var(--crm-t-entrada) var(--crm-snap); } :is(.crm-menu, .crm-desplegable)[data-state=open][data-side=right] { animation: crm-es-desde-la-izquierda var(--crm-t-entrada) var(--crm-snap); } :is(.crm-menu, .crm-desplegable)[data-state=open][data-side=left] { animation: crm-es-desde-la-derecha var(--crm-t-entrada) var(--crm-snap); } :is(.crm-menu, .crm-desplegable)[data-state=closed] { animation: crm-es-apaga var(--crm-t-salida) var(--crm-snap) forwards; } .crm-consejo { z-index: 70; display: flex; align-items: center; gap: 8px; box-sizing: border-box; height: 24px; max-width: 320px; padding: 0 8px; border: 1px solid var(--crm-line-2); background: var(--crm-panel-2); color: var(--crm-text); font-family: var(--crm-sans); font-size: 12px; font-weight: 400; line-height: 16px; white-space: nowrap; box-shadow: var(--crm-sombra-capa); transform-origin: var(--radix-tooltip-content-transform-origin); pointer-events: none; } .crm-capa-consejo, .crm-capa-consejo [data-radix-popper-content-wrapper] { pointer-events: none; } .crm-consejo[data-con-atajo] { padding-right: 1px; } .crm-consejo-texto { overflow: hidden; text-overflow: ellipsis; } .crm-consejo[data-lineas=varias] { align-items: flex-start; height: auto; min-height: 24px; max-width: min(280px, calc(100vw - 16px)); padding-top: 6px; padding-bottom: 6px; white-space: normal; } .crm-consejo[data-lineas=varias] .crm-consejo-texto { overflow: visible; overflow-wrap: anywhere; text-wrap: pretty; } .crm-consejo[data-lineas=varias] .crm-es-atajo { margin-top: -2px; margin-bottom: -2px; } .crm-consejo .crm-tecla { border-color: var(--crm-line-2); background: var(--crm-panel); } .crm-consejo[data-state=delayed-open] { animation: crm-es-funde var(--crm-t-color) var(--crm-snap); } .crm-menu { z-index: 60; min-width: 200px; max-width: min(320px, calc(100vw - 16px)); max-height: var(--radix-dropdown-menu-content-available-height, 70vh); overflow: auto; padding: 4px; border: 1px solid var(--crm-line-2); background: var(--crm-panel-2); color: var(--crm-text-2); font-family: var(--crm-sans); box-shadow: var(--crm-sombra-capa); transform-origin: var(--radix-dropdown-menu-content-transform-origin); } .crm-menu-item { position: relative; display: flex; align-items: center; gap: 8px; box-sizing: border-box; height: 28px; padding: 0 8px; color: var(--crm-text-2); font-size: 13px; font-weight: 400; letter-spacing: -0.005em; line-height: 20px; cursor: default; outline: none; user-select: none; -webkit-touch-callout: none; transition: background-color var(--crm-t-color) var(--crm-snap), color var(--crm-t-color) var(--crm-snap); } .crm-menu-item[data-highlighted], .crm-menu-item[data-state=open] { background: var(--crm-panel-3); color: var(--crm-text); transition-duration: 0ms; } .crm-menu-item[data-disabled] { color: var(--crm-dim); } .crm-menu-item[data-peligro] { color: var(--crm-error); } .crm-menu-item[data-peligro][data-highlighted] { background: var(--crm-error-suave); color: var(--crm-error); } .crm-menu-item:not([data-peligro]) + .crm-menu-item[data-peligro] { margin-top: 9px; } .crm-menu-item:not([data-peligro]) + .crm-menu-item[data-peligro]::after { content: ""; position: absolute; top: -5px; right: -4px; left: -4px; height: 1px; background: var(--crm-line); } .crm-menu-icono { display: inline-grid; flex: none; place-items: center; width: 16px; height: 16px; color: var(--crm-muted); } .crm-menu-item[data-highlighted] .crm-menu-icono { color: var(--crm-text); } .crm-menu-item[data-peligro] .crm-menu-icono, .crm-menu-item[data-disabled] .crm-menu-icono { color: inherit; } .crm-menu-icono svg { width: 14px; height: 14px; stroke-width: 1.5; } .crm-menu-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-menu-item > .crm-es-atajo { margin-left: 16px; } .crm-menu-item .crm-tecla { color: var(--crm-dim); } .crm-menu-item[data-highlighted] .crm-tecla { color: var(--crm-muted); } .crm-menu-item:has(.crm-menu-detalle) { height: 40px; } .crm-menu-detalle { display: block; overflow: hidden; color: var(--crm-muted); font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; } .crm-menu-marca { display: inline-grid; flex: none; place-items: center; width: 16px; color: var(--crm-acento); } .crm-menu-marca svg { width: 14px; height: 14px; stroke-width: 1.75; } .crm-menu-flecha { flex: none; width: 14px; height: 14px; margin-left: 16px; color: var(--crm-dim); } .crm-menu-separador { height: 1px; margin: 4px -4px; background: var(--crm-line); } .crm-menu-rotulo { display: flex; align-items: center; box-sizing: border-box; height: 24px; padding: 0 8px; overflow: hidden; color: var(--crm-muted); font-size: 12px; font-weight: 500; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; } .crm-menu-persona { display: flex; align-items: center; gap: 8px; padding: 8px; } .crm-menu-persona-texto { display: grid; min-width: 0; } .crm-menu-persona-nombre { overflow: hidden; color: var(--crm-text); font-size: 13px; font-weight: 500; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; } .crm-menu-persona-correo { overflow: hidden; color: var(--crm-muted); font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; } .crm-menu-espacios { min-width: 240px; } .crm-menu-espacios .crm-lateral-logo { width: 20px; height: 20px; font-size: 11px; } .crm-desplegable { position: relative; z-index: 60; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); max-height: min(var(--radix-popover-content-available-height, 70vh), 560px); border: 1px solid var(--crm-line-2); background: var(--crm-panel-2); color: var(--crm-text-2); font-family: var(--crm-sans); box-shadow: var(--crm-sombra-capa); transform-origin: var(--radix-popover-content-transform-origin); } .crm-desplegable-cabecera { display: flex; align-items: center; gap: 8px; box-sizing: border-box; height: 44px; padding: 0 8px 0 12px; border-bottom: 1px solid var(--crm-line); } .crm-desplegable-titulos { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; } .crm-desplegable-titulo { margin: 0; overflow: hidden; color: var(--crm-text); font-size: 13px; font-weight: 500; letter-spacing: -0.005em; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; } .crm-desplegable-cuerpo { min-height: 0; overflow: auto; } .crm-desplegable-pie { display: flex; padding: 4px; border-top: 1px solid var(--crm-line); } .crm-modal { --crm-modal-ancho: 560px; --crm-modal-arriba: min(12vh, 120px); position: fixed; z-index: 41; top: var(--crm-modal-arriba); left: 50%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); width: min(var(--crm-modal-ancho), calc(100% - 32px)); max-height: calc(100% - var(--crm-modal-arriba) - 24px); border: 1px solid var(--crm-line-2); background: var(--crm-panel); color: var(--crm-text); font-family: var(--crm-sans); box-shadow: var(--crm-sombra); translate: -50% 0; outline: none; } .crm-modal[data-tamano=sm] { --crm-modal-ancho: 440px; } .crm-modal[data-tamano=lg] { --crm-modal-ancho: 760px; } .crm-modal[data-tamano=amplio] { --crm-modal-ancho: min(1360px, 92vw); --crm-modal-arriba: 6vh; height: 88vh; max-height: 88vh; } .crm-modal[data-tamano=amplio] .crm-modal-cabecera { height: 64px; padding: 0 16px 0 28px; } .crm-modal[data-tamano=amplio] .crm-modal-titulo { font-size: 20px; line-height: 28px; } .crm-modal[data-tamano=amplio] .crm-modal-cuerpo { padding: 24px 28px; font-size: 15px; line-height: 24px; } .crm-modal[data-tamano=completo] { inset: 24px; width: auto; max-height: none; translate: none; } .crm-modal[data-state=open] { animation: crm-es-sube var(--crm-t-capa) var(--crm-snap); } .crm-modal[data-state=closed] { animation: crm-es-apaga var(--crm-t-salida) var(--crm-snap) forwards; } .crm-modal-cabecera { display: flex; align-items: center; gap: 12px; box-sizing: border-box; height: 52px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--crm-line); } .crm-modal-cabecera > .crm-es-rotulo { flex: none; } .crm-modal-cabecera > .crm-es-rotulo + .crm-modal-titulo { padding-left: 12px; border-left: 1px solid var(--crm-line-2); } .crm-modal-titulo { flex: 1; min-width: 0; margin: 0; overflow: hidden; color: var(--crm-text); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; line-height: 22px; text-overflow: ellipsis; white-space: nowrap; } .crm-modal-descripcion { max-width: 68ch; margin: 0 0 16px; color: var(--crm-muted); font-size: 14px; line-height: 22px; } .crm-modal-descripcion:last-child { margin-bottom: 0; } .crm-modal-cuerpo { min-height: 0; overflow: auto; padding: 20px; color: var(--crm-text-2); font-size: 14px; line-height: 22px; } .crm-modal-pie { display: flex; align-items: center; justify-content: flex-end; gap: 8px; box-sizing: border-box; height: 56px; padding: 0 20px; border-top: 1px solid var(--crm-line); } .crm-confirmar-rotulo { color: var(--crm-error); } .crm-confirmar-rotulo svg { width: 14px; height: 14px; stroke-width: 1.5; } .crm-modal-titulo.crm-confirmar-titulo { display: block; margin: 0 0 8px; font-size: 20px; letter-spacing: -0.02em; line-height: 28px; text-overflow: clip; white-space: normal; text-wrap: balance; } .crm-confirmar-lista { margin: 0 0 16px; padding: 0; border-top: 1px solid var(--crm-line); list-style: none; } .crm-confirmar-lista li { display: flex; align-items: center; min-height: 36px; border-bottom: 1px solid var(--crm-line); color: var(--crm-text-2); font-size: 13px; line-height: 20px; } .crm-confirmar-frase { display: grid; gap: 8px; } .crm-confirmar-etiqueta { color: var(--crm-muted); font-size: 13px; line-height: 20px; } .crm-confirmar-etiqueta strong { padding: 2px 6px; background: var(--crm-panel-2); color: var(--crm-text); font-family: var(--crm-mono); font-size: 12px; font-weight: 400; } .crm-confirmar-campo { box-sizing: border-box; width: 100%; height: 32px; padding: 0 12px; border: 1px solid var(--crm-control); border-radius: 0; background: var(--crm-bg); color: var(--crm-text); font-family: var(--crm-mono); font-size: 13px; caret-color: var(--crm-acento); } .crm-confirmar-campo:disabled { border-color: var(--crm-linea-apagada); color: var(--crm-dim); } .crm-confirmar-casilla { display: flex; align-items: center; gap: 8px; min-height: 32px; color: var(--crm-text-2); font-size: 13px; cursor: pointer; } .crm-confirmar-casilla input { display: grid; flex: none; place-content: center; width: 16px; height: 16px; margin: 0; border: 1px solid var(--crm-control); border-radius: 0; background: transparent; appearance: none; cursor: pointer; } .crm-confirmar-casilla input::after { content: ""; width: 8px; height: 4px; border-bottom: 2px solid var(--crm-sobre-acento); border-left: 2px solid var(--crm-sobre-acento); opacity: 0; rotate: -45deg; translate: 0 -1px; } .crm-confirmar-casilla input:checked { border-color: var(--crm-acento); background: var(--crm-acento); } .crm-confirmar-casilla input:checked::after { opacity: 1; } .crm-confirmar-casilla input:disabled { border-color: var(--crm-linea-apagada); cursor: not-allowed; } .crm-atajos { container-type: inline-size; } .crm-atajos-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; column-gap: 32px; } .crm-atajos-columnas[data-una] { grid-template-columns: minmax(0, 1fr); } .crm-atajos-columna { display: grid; align-content: start; row-gap: 24px; min-width: 0; } .crm-atajos-grupo { min-width: 0; } .crm-atajos-titulo { box-sizing: border-box; height: 24px; margin: 0 0 4px; padding: 4px 0; overflow: hidden; color: var(--crm-muted); font-size: 12px; font-weight: 500; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; } .crm-atajos-sigue { color: var(--crm-dim); font-weight: 400; } .crm-atajos-lista { margin: 0; border-top: 1px solid var(--crm-line); } .crm-atajos-fila { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; box-sizing: border-box; height: 36px; padding: 8px 0 7px; border-bottom: 1px solid var(--crm-line); } .crm-atajos-fila dt { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--crm-text-2); font-size: 13px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; } .crm-atajos-fila dd { flex: none; max-width: calc(100% - 176px); margin: 0; overflow: hidden; } .crm-atajos-teclas, .crm-atajos-teclas-vista { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; } .crm-atajos-paso { display: inline-flex; flex: none; align-items: center; gap: 2px; white-space: nowrap; } .crm-atajos-paso[hidden] { display: none; } .crm-atajos-mas { flex: none; box-sizing: border-box; min-width: 26px; margin-left: 6px; color: var(--crm-muted); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; } .crm-atajos-consejo { display: grid; gap: 8px; } .crm-atajos-consejo .crm-atajos-teclas, .crm-atajos-consejo .crm-atajos-teclas-vista { flex-wrap: wrap; justify-content: flex-start; row-gap: 4px; } .crm-atajos-luego { margin: 0 6px; color: var(--crm-dim); font-size: 12px; line-height: 16px; } .crm-atajos [data-crm-lectura] { outline: none; cursor: default; } .crm-atajos-fila:has(dt:focus-visible), .crm-atajos-titulo:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: -1px; } @container (max-width: 591px) { .crm-atajos-columnas { grid-template-columns: minmax(0, 1fr); row-gap: 24px; } .crm-atajos-grupo[data-sigue] { margin-top: -24px; } .crm-atajos-grupo[data-sigue] .crm-atajos-titulo { display: none; } .crm-atajos-grupo[data-sigue] .crm-atajos-lista { border-top: 0; } } @media (forced-colors: active) { .crm-atajos-fila:has(dt:focus-visible), .crm-atajos-titulo:focus-visible { outline-color: Highlight; } } .crm-deslizante { --crm-desl-ancho: 560px; position: fixed; z-index: 41; top: 0; bottom: 0; display: flex; flex-direction: column; width: min(var(--crm-desl-ancho), 100%); background: var(--crm-panel); color: var(--crm-text); font-family: var(--crm-sans); box-shadow: var(--crm-sombra); outline: none; } .crm-deslizante[data-ancho=estrecho] { --crm-desl-ancho: 400px; } .crm-deslizante[data-ancho=ancho] { --crm-desl-ancho: max(440px, 46%); } .crm-deslizante[data-lado=derecha] { right: 0; border-left: 1px solid var(--crm-line-2); } .crm-deslizante[data-lado=izquierda] { left: 0; border-right: 1px solid var(--crm-line); } .crm-deslizante[data-lado=derecha][data-state=open] { animation: crm-es-desde-derecha var(--crm-t-panel) var(--crm-snap); } .crm-deslizante[data-lado=izquierda][data-state=open] { animation: crm-es-desde-izquierda var(--crm-t-panel) var(--crm-snap); } .crm-deslizante[data-lado=derecha][data-state=closed] { animation: crm-es-a-derecha var(--crm-t-salida) var(--crm-snap) forwards; } .crm-deslizante[data-lado=izquierda][data-state=closed] { animation: crm-es-a-izquierda var(--crm-t-salida) var(--crm-snap) forwards; } .crm-deslizante-barra { display: flex; flex: none; align-items: center; gap: 12px; box-sizing: border-box; min-width: 0; height: 52px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--crm-line); } .crm-deslizante-barra > .crm-es-rotulo + .crm-deslizante-titulo { padding-left: 12px; border-left: 1px solid var(--crm-line-2); } .crm-deslizante-titulo { flex: 1; min-width: 0; overflow: hidden; margin: 0; color: var(--crm-text); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; line-height: 22px; text-overflow: ellipsis; white-space: nowrap; } .crm-deslizante-descripcion { max-width: 68ch; margin: 0 0 16px; color: var(--crm-muted); font-size: 14px; line-height: 22px; } .crm-deslizante-cuerpo { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 20px; color: var(--crm-text-2); font-size: 14px; line-height: 22px; } .crm-deslizante-pie { display: flex; flex: none; align-items: center; justify-content: flex-end; gap: 8px; box-sizing: border-box; height: 56px; padding: 0 20px; border-top: 1px solid var(--crm-line); } .crm-paleta { position: fixed; z-index: 41; top: min(14vh, 140px); left: 50%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); width: min(640px, calc(100% - 32px)); max-height: min(480px, calc(100% - min(14vh, 140px) - 24px)); border: 1px solid var(--crm-line-2); background: var(--crm-panel); color: var(--crm-text); font-family: var(--crm-sans); box-shadow: var(--crm-sombra); translate: -50% 0; outline: none; } .crm-paleta[data-state=open] { animation: crm-es-asoma var(--crm-t-entrada) var(--crm-snap); } .crm-paleta[data-state=closed] { animation: crm-es-apaga var(--crm-t-salida) var(--crm-snap) forwards; } .crm-paleta-busca { display: flex; align-items: center; gap: 12px; box-sizing: border-box; height: 48px; padding: 0 16px; border-bottom: 1px solid var(--crm-line); } .crm-paleta-cargando { display: block; margin-top: -1px; } .crm-paleta-busca > svg { flex: none; width: 16px; height: 16px; stroke-width: 1.6; color: var(--crm-muted); } .crm-paleta-campo { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: var(--crm-text); font-family: var(--crm-sans); font-size: 15px; letter-spacing: -0.005em; caret-color: var(--crm-acento); outline: none; } .crm-capa .crm-paleta-campo:focus-visible { outline: none; } .crm-paleta-campo::placeholder { color: var(--crm-dim); } .crm-paleta-lista { min-height: 0; overflow: auto; padding: 4px 8px 8px; scroll-padding: 8px; } .crm-paleta-grupo-titulo { display: flex; align-items: flex-end; box-sizing: border-box; height: 28px; padding: 0 8px 4px; color: var(--crm-muted); font-size: 12px; font-weight: 500; line-height: 16px; } .crm-paleta-opcion { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 12px; box-sizing: border-box; height: 40px; padding: 0 8px 0 12px; color: var(--crm-text-2); cursor: default; } .crm-paleta-opcion::before { content: ""; position: absolute; inset: 8px auto 8px 0; width: 2px; background: var(--crm-acento); opacity: 0; } .crm-paleta-opcion[data-activo] { background: var(--crm-panel-3); color: var(--crm-text); } .crm-paleta-opcion[data-activo]::before { opacity: 1; } .crm-paleta-opcion[aria-disabled=true] { color: var(--crm-dim); } .crm-paleta-icono { display: grid; place-items: center; width: 16px; height: 16px; color: var(--crm-muted); } .crm-paleta-opcion[data-activo] .crm-paleta-icono { color: var(--crm-text); } .crm-paleta-opcion[aria-disabled=true] .crm-paleta-icono { color: var(--crm-dim); } .crm-paleta-icono svg { width: 16px; height: 16px; stroke-width: 1.6; } .crm-paleta-texto { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .crm-paleta-etiqueta { flex: none; max-width: 100%; overflow: hidden; font-size: 13px; letter-spacing: -0.005em; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; } .crm-paleta-detalle { min-width: 0; overflow: hidden; color: var(--crm-dim); font-size: 13px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; } .crm-paleta-opcion .crm-tecla { color: var(--crm-dim); } .crm-paleta-pie { display: flex; align-items: center; justify-content: space-between; gap: 16px; box-sizing: border-box; height: 40px; padding: 0 8px 0 12px; border-top: 1px solid var(--crm-line); background: var(--crm-panel-2); color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-paleta-pie-foco { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .crm-paleta-pie-icono { display: inline-grid; flex: none; place-items: center; width: 14px; height: 14px; } .crm-paleta-pie-icono svg { width: 14px; height: 14px; stroke-width: 1.5; } .crm-paleta-pie-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-paleta-pie-acciones { display: inline-flex; flex: none; align-items: center; gap: 12px; } .crm-paleta-accion { display: inline-flex; align-items: center; gap: 6px; color: var(--crm-text-2); white-space: nowrap; } .crm-paleta-accion[data-apagada] { color: var(--crm-muted); } .crm-paleta-pie-filete { width: 1px; height: 16px; background: var(--crm-line-2); } .crm-paleta-vacio { padding: 24px 8px; } .crm-paleta[data-buscando]::before { animation: crm-filo-continuo var(--crm-t-filo) var(--crm-curva) infinite; } .crm-paleta-buscando { flex: none; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; } .crm-paleta-estado { display: flex; align-items: center; gap: 12px; box-sizing: border-box; min-height: 40px; margin: 0; padding: 0 8px; color: var(--crm-muted); font-size: 13px; line-height: 20px; } .crm-paleta-estado > svg { flex: none; width: 16px; height: 16px; stroke-width: 1.6; color: var(--crm-error); } .crm-paleta-estado-texto { flex: 1; min-width: 0; overflow-wrap: anywhere; } .crm-paleta-estado[data-tono=error] .crm-paleta-estado-texto { color: var(--crm-text-2); } .crm-paleta[data-con-vista] { container: crm-paleta / inline-size; width: min(760px, calc(100% - 32px)); } .crm-paleta-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 280px; min-height: 0; } .crm-paleta-vista { min-height: 0; overflow: auto; padding: 16px; border-left: 1px solid var(--crm-line); color: var(--crm-text-2); font-size: 13px; line-height: 20px; overflow-wrap: anywhere; } .crm-paleta-vista-vacia { margin: 0; color: var(--crm-muted); } @container crm-paleta (max-width: 639.98px) { .crm-paleta-cuerpo { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; } .crm-paleta-vista { max-height: 160px; border-top: 1px solid var(--crm-line); border-left: 0; } } .crm-temas { container-type: inline-size; min-width: 0; margin: 0; padding: 0; border: 0; } .crm-temas-rejilla { display: grid; grid-template-columns: repeat(var(--crm-temas-n, 2), minmax(0, 1fr)); gap: 16px 12px; } @container (max-width: 559px) { .crm-temas-rejilla { grid-template-columns: repeat(var(--crm-temas-n-estrecho, 2), minmax(0, 1fr)); } } .crm-temas-compacta { padding: 12px; } .crm-temas-compacta .crm-temas-rejilla { gap: 12px 8px; } .crm-tema { display: grid; align-content: start; gap: 8px; min-width: 0; cursor: pointer; } .crm-tema-marco { position: relative; display: block; } .crm-tema-mini { position: relative; display: flex; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--crm-line-2); transition: border-color var(--crm-t-color) var(--crm-snap); } .crm-tema:hover .crm-tema-mini { border-color: var(--crm-control); transition-duration: 0ms; } .crm-tema[data-elegido] .crm-tema-mini { border-color: var(--crm-acento); box-shadow: 0 0 0 1px var(--crm-acento); } .crm-tema:has(:focus-visible) .crm-tema-mini { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 4px; } .crm-tema-check { flex: none; margin-top: 2px; display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--crm-acento); background: var(--crm-panel); color: var(--crm-acento); opacity: 0; transform: scale(0.8); transition: opacity var(--crm-t-color) var(--crm-snap), transform var(--crm-t-gesto) var(--crm-snap); } .crm-tema[data-elegido] .crm-tema-check { opacity: 1; transform: none; } .crm-tema-check svg { width: 12px; height: 12px; stroke-width: 2; } .crm-tema-mini-lienzo { display: grid; flex: 1; grid-template-columns: 28% minmax(0, 1fr); background: var(--crm-bg); } .crm-tema-mini[data-mitades] .crm-tema-mini-lienzo { position: absolute; inset: 0; } .crm-tema-mini[data-mitades] .crm-tema-mini-lienzo:last-child { clip-path: polygon(62% 0, 100% 0, 100% 100%, 38% 100%); } .crm-tema-mini i { display: block; } .crm-tema-mini-lateral { display: grid; align-content: start; gap: 4px; padding: 12% 10% 0; border-right: 1px solid var(--crm-line); } .crm-tema-mini-lateral i { height: 3px; background: var(--crm-line-2); } .crm-tema-mini-lateral i:nth-child(4) { width: 70%; } .crm-tema-mini-lateral i.crm-tema-mini-firma { width: 70%; margin-bottom: 4px; background: var(--crm-text); } .crm-tema-mini-lateral i[data-activo] { background: var(--crm-panel-3); box-shadow: inset 1px 0 0 var(--crm-acento); } .crm-tema-mini-cuerpo { display: grid; grid-template-rows: 16% 1fr; min-width: 0; } .crm-tema-mini-barra { display: flex; align-items: center; justify-content: flex-end; gap: 6%; padding: 0 8%; border-bottom: 1px solid var(--crm-line); background: var(--crm-velo); } .crm-tema-mini-busca { width: 34%; height: 50%; border: 1px solid var(--crm-line-2); background: var(--crm-panel); } .crm-tema-mini-punto { width: 4px; height: 4px; border-radius: 50%; background: var(--crm-acento); } .crm-tema-mini-hoja { display: grid; align-content: start; gap: 4px; padding: 8% 10% 0; } .crm-tema-mini-titulo { width: 48%; height: 4px; background: var(--crm-text); } .crm-tema-mini-linea { width: 70%; height: 2px; background: var(--crm-muted); } .crm-tema-mini-filas { display: grid; margin-top: 4px; border-top: 1px solid var(--crm-line); } .crm-tema-mini-filas i { height: 6px; border-bottom: 1px solid var(--crm-line); background: linear-gradient( 90deg, var(--crm-line-2) 0 40%, transparent 40%); background-size: 100% 2px; background-position: 0 50%; background-repeat: no-repeat; } .crm-tema-mini-filas i[data-acento] { background-image: linear-gradient( 90deg, var(--crm-acento-linea) 0 30%, transparent 30%); } .crm-tema-mini-boton { justify-self: end; width: 22%; height: 6px; margin-top: 2px; background: var(--crm-boton); } .crm-tema-pie { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px; min-width: 0; } .crm-tema-textos { display: grid; min-width: 0; } .crm-tema-nombre { color: var(--crm-text-2); font-size: 13px; font-weight: 500; line-height: 20px; } .crm-tema[data-elegido] .crm-tema-nombre { color: var(--crm-text); } .crm-tema-detalle { overflow: hidden; color: var(--crm-muted); font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; } .crm-marco { --crm-marco-lateral: 240px; --crm-marco-arriba: 44px; --crm-marco-abajo: 32px; position: relative; display: grid; grid-template-columns: var(--crm-marco-lateral) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; height: var(--crm-marco-alto, 100dvh); min-height: 0; overflow: hidden; background: var(--crm-bg); color: var(--crm-text); font-family: var(--crm-sans); -webkit-font-smoothing: antialiased; transition: grid-template-columns var(--crm-t-panel) var(--crm-snap); } .crm-marco[data-plegado] { --crm-marco-lateral: 52px; } .crm-marco[data-movil] { grid-template-columns: minmax(0, 1fr); } .crm-marco-saltar { position: absolute; z-index: 50; top: 8px; left: 8px; display: inline-flex; align-items: center; box-sizing: border-box; height: 32px; padding: 0 12px; border: 1px solid var(--crm-line-2); background: var(--crm-panel); color: var(--crm-text); font-size: 13px; font-weight: 500; text-decoration: none; translate: 0 -160%; } .crm-marco-saltar:focus-visible { translate: 0 0; } .crm-marco-pie { grid-column: 1 / -1; min-width: 0; } .crm-marco-pie > .crm-pp { position: static; padding-left: 16px; background: var(--crm-bg); } .crm-marco-lateral { min-width: 0; min-height: 0; overflow: hidden; border-right: 1px solid var(--crm-line); } .crm-marco-principal { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; } .crm-marco-contenido { position: relative; z-index: 0; flex: 1 0 auto; min-width: 0; padding-bottom: 32px; outline: none; isolation: isolate; } .crm-marco-hoja { position: fixed; z-index: 41; inset: 0 auto 0 0; width: min(280px, 86%); border-right: 1px solid var(--crm-line); background: var(--crm-bg); box-shadow: var(--crm-sombra); outline: none; } .crm-marco-hoja[data-state=open] { animation: crm-es-desde-izquierda var(--crm-t-panel) var(--crm-snap); } .crm-marco-hoja[data-state=closed] { animation: crm-es-a-izquierda var(--crm-t-salida) var(--crm-snap) forwards; } .crm-superior-nav[data-fuera] { display: none; } @media (max-width: 899px) { .crm-marco:not([data-punto-movil]) { grid-template-columns: minmax(0, 1fr); } .crm-marco:not([data-punto-movil]) > .crm-marco-lateral { display: none; } .crm-marco:not([data-punto-movil]) > .crm-marco-principal > .crm-marco-secuencia { left: 16px; } .crm-marco:not([data-punto-movil]) > .crm-marco-principal > .crm-superior > .crm-superior-izquierda > .crm-superior-nav[data-fuera] { display: inline-flex; } } @media (pointer: coarse) { .crm-marco-hoja .crm-lateral-item { height: 40px; } } .crm-lateral { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); width: 100%; height: 100%; min-height: 0; background: var(--crm-bg); color: var(--crm-text-2); font-family: var(--crm-sans); } .crm-lateral-cabecera { display: grid; padding-bottom: 4px; } .crm-lateral-firma { display: flex; align-items: center; justify-content: space-between; gap: 8px; box-sizing: border-box; height: 44px; padding: 1px 8px 0 16px; overflow: hidden; border-bottom: 1px solid var(--crm-line); } .crm-lateral-firma .crm-lateral-plegar { opacity: 0; } .crm-lateral:hover .crm-lateral-plegar, .crm-lateral-plegar:focus-visible, .crm-lateral-plegar[data-state=delayed-open], .crm-lateral-plegar[data-state=instant-open] { opacity: 1; } @media (hover: none) { .crm-lateral-firma .crm-lateral-plegar { opacity: 1; } } .crm-isotipo { display: inline-flex; color: var(--crm-text); } .crm-isotipo > span { display: block; height: 16px; aspect-ratio: 2179.377 / 1000; background-color: currentColor; -webkit-mask: var(--crm-lockup) left center / auto 100% no-repeat; mask: var(--crm-lockup) left center / auto 100% no-repeat; } .crm-lateral-cliente { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; box-sizing: border-box; width: calc(100% - 16px); height: 40px; margin: 8px 8px 0; padding: 0 8px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; transition: background-color var(--crm-t-color) var(--crm-snap); } button.crm-lateral-cliente { cursor: default; } button.crm-lateral-cliente:hover, button.crm-lateral-cliente[data-state=open] { background: var(--crm-panel-2); transition-duration: 0ms; } .crm-lateral-logo { display: grid; flex: none; place-items: center; box-sizing: border-box; width: 24px; height: 24px; overflow: hidden; border: 1px solid var(--crm-line-2); background: var(--crm-panel-2); color: var(--crm-text); font-family: var(--crm-mono); font-size: 11px; line-height: 1; } .crm-lateral-logo :is(img, svg) { width: 100%; height: 100%; object-fit: contain; } .crm-lateral-logo[data-logo] { width: 20px; height: 20px; margin: 2px; overflow: visible; border: 0; background: transparent; } .crm-lateral-logo[data-iniciales] { font-family: var(--crm-sans); font-size: 11px; font-weight: 500; letter-spacing: 0; } .crm-lateral-logo[data-iso] { border-color: var(--crm-line-2); background: var(--crm-panel); } .crm-lateral-logo-iso { display: block; height: 8px; aspect-ratio: 2179.377 / 1000; background-color: currentColor; -webkit-mask: var(--crm-lockup) left center / auto 100% no-repeat; mask: var(--crm-lockup) left center / auto 100% no-repeat; } .crm-lateral-cliente[data-fijo]:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: -1px; } .crm-lateral-cliente-texto { display: grid; min-width: 0; } .crm-lateral-cliente-nombre { overflow: hidden; color: var(--crm-text); font-size: 13px; font-weight: 500; letter-spacing: -0.005em; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; } .crm-lateral-cliente-detalle { overflow: hidden; color: var(--crm-muted); font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; } .crm-lateral-cliente-flecha { width: 14px; height: 14px; color: var(--crm-dim); } .crm-lateral-nav { --crm-indicio: 24px; --crm-indicio-arriba: 0px; --crm-indicio-abajo: 0px; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 4px 8px 12px; scroll-padding-block: var(--crm-indicio); } .crm-lateral-nav[data-mas-arriba] { --crm-indicio-arriba: var(--crm-indicio); } .crm-lateral-nav[data-mas-abajo] { --crm-indicio-abajo: var(--crm-indicio); } .crm-lateral-nav:is([data-mas-arriba], [data-mas-abajo]) { -webkit-mask-image: linear-gradient( 180deg, transparent, currentColor var(--crm-indicio-arriba), currentColor calc(100% - var(--crm-indicio-abajo)), transparent); mask-image: linear-gradient( 180deg, transparent, currentColor var(--crm-indicio-arriba), currentColor calc(100% - var(--crm-indicio-abajo)), transparent); } .crm-lateral-nav[data-desborde-v=fin] { mask-image: linear-gradient( to bottom, var(--crm-text) calc(100% - 24px), transparent); } .crm-lateral-nav[data-desborde-v=inicio] { mask-image: linear-gradient( to top, var(--crm-text) calc(100% - 24px), transparent); } .crm-lateral-nav[data-desborde-v=ambos] { mask-image: linear-gradient( to bottom, transparent, var(--crm-text) 24px, var(--crm-text) calc(100% - 24px), transparent); } .crm-lateral-grupo + .crm-lateral-grupo { margin-top: 12px; } .crm-lateral-grupo ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } .crm-lateral-rotulo { margin: 0; color: var(--crm-muted); font-family: var(--crm-sans); font-size: 12px; font-weight: 500; line-height: 16px; } .crm-lateral-rotulo > .crm-lateral-rotulo-texto, .crm-lateral-rotulo-boton { display: flex; align-items: center; gap: 4px; box-sizing: border-box; width: 100%; height: 24px; padding: 0 8px; } .crm-lateral-rotulo-boton { border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: default; transition: color var(--crm-t-color) var(--crm-snap); } .crm-lateral-rotulo-boton:hover { color: var(--crm-text-2); transition-duration: 0ms; } .crm-lateral-rotulo-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-lateral-rotulo-flecha { flex: none; width: 14px; height: 14px; stroke-width: 1.5; opacity: 0; transition: opacity var(--crm-t-color) var(--crm-snap), transform var(--crm-t-gesto) var(--crm-snap); } .crm-lateral-rotulo-boton:hover .crm-lateral-rotulo-flecha, .crm-lateral-rotulo-boton:focus-visible .crm-lateral-rotulo-flecha, .crm-lateral-grupo[data-cerrado] .crm-lateral-rotulo-flecha { opacity: 1; } .crm-lateral-grupo[data-cerrado] .crm-lateral-rotulo-flecha { transform: rotate(-90deg); } .crm-lateral-rotulo-boton:focus-visible { outline-offset: -1px; } .crm-lateral-item { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; box-sizing: border-box; width: 100%; height: 28px; padding: 0 8px; border: 0; background: transparent; color: var(--crm-text-2); font-family: var(--crm-sans); font-size: 13px; font-weight: 400; letter-spacing: -0.005em; line-height: 20px; text-align: left; text-decoration: none; cursor: default; transition: background-color var(--crm-t-color) var(--crm-snap), color var(--crm-t-color) var(--crm-snap); } .crm-lateral-item:focus-visible { outline-offset: -1px; } .crm-lateral-item::before { content: ""; position: absolute; inset: 4px auto 4px 0; width: 2px; background: var(--crm-acento); transform: scaleY(0); transform-origin: top; transition: transform var(--crm-t-gesto) var(--crm-snap); } @media (hover: hover) { .crm-lateral-item:hover { background: var(--crm-panel-2); color: var(--crm-text); transition-duration: 0ms; } .crm-lateral-item:hover .crm-lateral-icono { color: var(--crm-text); } } .crm-lateral-item[aria-current=page] { background: var(--crm-panel-3); color: var(--crm-text); font-weight: 500; } .crm-lateral-item[aria-current=page]::before { transform: scaleY(1); } .crm-lateral-icono { display: grid; place-items: center; width: 16px; height: 16px; color: var(--crm-muted); } .crm-lateral-item[aria-current=page] .crm-lateral-icono { color: var(--crm-text); } .crm-lateral-icono svg { width: 16px; height: 16px; stroke-width: 1.6; } .crm-lateral-etiqueta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-lateral-vivo { flex: none; } .crm-lateral-contador { color: var(--crm-muted); font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 400; line-height: 16px; } .crm-lateral-contador[data-atencion] { color: var(--crm-acento); font-weight: 500; } .crm-lateral-pie { display: flex; align-items: center; gap: 4px; box-sizing: border-box; height: 32px; min-width: 0; padding: 0 2px 0 4px; border-top: 1px solid var(--crm-line); } .crm-lateral-pie :focus-visible { outline-offset: -1px; } .crm-lateral-pie .crm-usuario-fila { height: 28px; padding: 0 4px; } .crm-lateral-pie .crm-usuario-fila .crm-avatar { --crm-avatar: 20px; } .crm-lateral-pie .crm-usuario-rol { display: none; } .crm-lateral-hueco { flex: 1; } .crm-lateral-ajustes { display: flex; flex: none; align-items: center; gap: 2px; } .crm-lateral[data-plegado] :is(.crm-lateral-etiqueta, .crm-lateral-contador, .crm-lateral-rotulo, .crm-lateral-cliente-texto, .crm-lateral-cliente-flecha) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .crm-lateral[data-plegado] .crm-lateral-firma { justify-content: center; padding: 0; } .crm-lateral[data-plegado] .crm-lateral-cliente { grid-template-columns: 24px; justify-content: center; width: 36px; margin-inline: 8px; padding: 0; } .crm-lateral[data-plegado] .crm-lateral-nav { padding-inline: 8px 7px; } .crm-lateral[data-plegado] .crm-lateral-grupo + .crm-lateral-grupo { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--crm-line); } .crm-lateral[data-plegado] .crm-lateral-item { grid-template-columns: 16px; justify-content: center; padding: 0; } .crm-lateral[data-plegado] .crm-lateral-vivo { position: absolute; top: 4px; right: 6px; width: 6px; height: 6px; } .crm-lateral[data-plegado] .crm-lateral-item:has(.crm-lateral-contador[data-atencion])::after { content: ""; position: absolute; top: 4px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--crm-acento); } .crm-lateral[data-plegado] .crm-lateral-pie { position: relative; flex-direction: column-reverse; gap: 4px; height: auto; padding: 0 0 2px; border-top: 0; } .crm-lateral[data-plegado] .crm-lateral-pie::after { content: ""; position: absolute; right: 0; bottom: 31px; left: 0; border-top: 1px solid var(--crm-line); pointer-events: none; } .crm-lateral[data-plegado] .crm-lateral-ajustes { margin-bottom: 4px; } .crm-lateral[data-plegado] .crm-lateral-ajustes { flex-direction: column; } .crm-lateral[data-plegado] .crm-lateral-hueco { display: none; } .crm-usuario-fila { display: flex; flex: 1; align-items: center; gap: 8px; box-sizing: border-box; min-width: 0; height: 40px; padding: 0 8px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: default; transition: background-color var(--crm-t-color) var(--crm-snap); } .crm-usuario-fila:hover, .crm-usuario-fila[data-state=open] { background: var(--crm-panel-2); transition-duration: 0ms; } .crm-usuario-fila .crm-avatar, .crm-usuario-avatar .crm-avatar { --crm-avatar: 24px; font-size: 11px; } .crm-usuario-texto { display: grid; flex: 1; min-width: 0; } .crm-usuario-nombre { overflow: hidden; color: var(--crm-text); font-size: 13px; font-weight: 500; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; } .crm-usuario-rol { overflow: hidden; color: var(--crm-muted); font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; } .crm-usuario-flecha { display: none; } .crm-usuario-avatar { display: inline-grid; flex: none; place-items: center; box-sizing: border-box; width: 28px; height: 28px; padding: 0; border: 1px solid transparent; background: transparent; cursor: default; transition: border-color var(--crm-t-color) var(--crm-snap), transform var(--crm-t-pulsar) var(--crm-snap); } .crm-usuario-avatar:hover, .crm-usuario-avatar[data-state=open] { border-color: var(--crm-line-2); transition-duration: 0ms; } .crm-usuario-avatar:active { transform: scale(0.96); } .crm-superior { position: sticky; z-index: 5; top: 0; display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; box-sizing: border-box; height: 44px; padding: 1px 12px 0 var(--crm-es-pad); border-bottom: 1px solid var(--crm-line); background: var(--crm-bg); container: crm-superior / inline-size; } .crm-superior-izquierda { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; } .crm-superior-derecha { display: flex; flex: none; align-items: center; gap: 8px; } .crm-superior-busca { display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; width: 240px; height: 28px; padding: 0 3px 0 8px; border: 1px solid var(--crm-line-2); background: var(--crm-panel); color: var(--crm-dim); font-family: var(--crm-sans); font-size: 13px; line-height: 20px; cursor: default; transition: border-color var(--crm-t-color) var(--crm-snap), color var(--crm-t-color) var(--crm-snap); } .crm-superior-busca:hover { border-color: var(--crm-control); color: var(--crm-muted); transition-duration: 0ms; } .crm-superior-busca > svg { flex: none; width: 14px; height: 14px; stroke-width: 1.5; } .crm-superior-busca-texto { flex: 1; min-width: 0; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; } .crm-superior-ranura { display: contents; } .crm-va-acciones-marco { display: inline-flex; align-items: center; gap: 4px; } .crm-superior-acciones { display: flex; align-items: center; gap: 8px; } .crm-superior-acciones :is(fieldset) { display: contents; margin: 0; padding: 0; border: 0; } .crm-superior-accion { display: inline-flex; flex: none; align-items: center; gap: 6px; box-sizing: border-box; height: 28px; margin: 0; padding: 0 10px; border: 1px solid var(--crm-line-2); border-radius: 0; background: var(--crm-panel); color: var(--crm-text-2); font-family: var(--crm-sans); font-size: 13px; font-weight: 500; line-height: 20px; letter-spacing: -0.005em; text-decoration: none; text-transform: none; white-space: nowrap; cursor: pointer; transition: background-color var(--crm-t-salida) linear, border-color var(--crm-t-salida) linear, color var(--crm-t-salida) linear; } .crm-superior-accion > svg { width: 14px; height: 14px; stroke-width: 1.5; } @media (hover: hover) { .crm-superior-accion:hover { border-color: var(--crm-control); background: var(--crm-panel-2); color: var(--crm-text); transition-duration: 0ms; } } .crm-superior-accion:active { background: var(--crm-panel-3); transform: translateY(0.5px); } .crm-superior-accion:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-superior-pendientes .crm-superior-pendientes-cifra { margin-left: 2px; } .crm-vista .crm-vista-vivo { flex: none; } .crm-avisos-campana { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; min-width: 28px; height: 28px; padding: 0 6px; border: 1px solid transparent; background: transparent; color: var(--crm-text-2); font-family: var(--crm-sans); cursor: default; transition: background-color var(--crm-t-color) var(--crm-snap), border-color var(--crm-t-color) var(--crm-snap), color var(--crm-t-color) var(--crm-snap), transform var(--crm-t-pulsar) var(--crm-snap); } .crm-avisos-campana[data-cifra] { padding: 0 8px 0 7px; } .crm-avisos-campana:hover { border-color: var(--crm-line-2); color: var(--crm-text); transition-duration: 0ms, 0ms, 0ms, var(--crm-t-pulsar); } .crm-avisos-campana[data-state=open] { border-color: var(--crm-line-2); background: var(--crm-panel-2); color: var(--crm-text); } .crm-avisos-campana:active { transform: scale(0.96); } .crm-avisos-campana svg { flex: none; width: 14px; height: 14px; stroke-width: 1.5; } .crm-avisos-cifra { color: var(--crm-acento); font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 500; line-height: 16px; } .crm-migas { min-width: 0; } .crm-migas ol { display: flex; align-items: center; min-width: 0; margin: 0; padding: 0; list-style: none; } .crm-migas li { display: flex; align-items: center; min-width: 0; color: var(--crm-muted); font-family: var(--crm-sans); font-size: 13px; letter-spacing: -0.005em; line-height: 20px; white-space: nowrap; } .crm-migas li + li::before { content: "/" / ""; margin: 0 8px; color: var(--crm-dim); } .crm-migas li[data-ultima] { overflow: hidden; color: var(--crm-text); font-weight: 500; } .crm-migas li:not([data-ultima]) { flex-shrink: 0; } .crm-migas li[data-largo]:not([data-ultima]) { flex-shrink: 1000000; min-width: 48px; } .crm-migas li[data-ultima] { flex-shrink: 1; } .crm-migas-actual, .crm-migas-enlace { min-width: 0; } .crm-migas-texto { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-migas-enlace { color: inherit; text-decoration: none; transition: color var(--crm-t-color) var(--crm-snap); } .crm-migas-enlace:hover { color: var(--crm-text); transition-duration: 0ms; } .crm-migas-boton { margin: 0; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; } .crm-migas-boton:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-avisos-leer, .crm-avisos-todo { display: inline-flex; flex: none; align-items: center; justify-content: center; box-sizing: border-box; height: 24px; padding: 0 8px; border: 0; background: transparent; color: var(--crm-muted); font-family: var(--crm-sans); font-size: 12px; line-height: 16px; white-space: nowrap; cursor: default; transition: background-color var(--crm-t-color) var(--crm-snap), color var(--crm-t-color) var(--crm-snap); } .crm-avisos-todo { width: 100%; height: 28px; color: var(--crm-text-2); font-size: 13px; line-height: 20px; } .crm-avisos-leer:hover, .crm-avisos-todo:hover { background: var(--crm-panel-3); color: var(--crm-text); transition-duration: 0ms; } .crm-avisos-leer:focus-visible, .crm-avisos-todo:focus-visible { outline-offset: -1px; } .crm-avisos-lista { margin: 0; padding: 0; list-style: none; } .crm-avisos-fila { position: relative; } .crm-avisos-fila + .crm-avisos-fila { border-top: 1px solid var(--crm-line); } .crm-avisos-abrir { position: relative; display: grid; grid-template-columns: 6px minmax(0, 1fr); align-items: start; column-gap: 8px; box-sizing: border-box; width: 100%; min-height: 56px; padding: 10px 76px 10px 12px; border: 0; background: transparent; color: var(--crm-text-2); font: inherit; text-align: left; } button.crm-avisos-abrir { cursor: default; transition: background-color var(--crm-t-color) var(--crm-snap); } button.crm-avisos-abrir:hover { background: var(--crm-panel-3); transition-duration: 0ms; } button.crm-avisos-abrir:focus-visible { outline-offset: -1px; } .crm-avisos-fila[data-tono=aprobacion] .crm-avisos-abrir::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--crm-acento); } .crm-avisos-marca { display: grid; place-items: center; height: 20px; } .crm-avisos-nuevo { width: 6px; height: 6px; border-radius: 50%; background: var(--crm-acento); } .crm-avisos-texto { display: grid; gap: 2px; min-width: 0; } .crm-avisos-titulo { display: flex; align-items: flex-start; gap: 6px; min-width: 0; color: var(--crm-text-2); font-size: 13px; letter-spacing: -0.005em; line-height: 20px; } .crm-avisos-fila[data-nuevo] .crm-avisos-titulo { color: var(--crm-text); font-weight: 500; } .crm-avisos-icono { flex: none; width: 14px; height: 14px; margin-top: 3px; stroke-width: 1.5; color: var(--crm-muted); } .crm-avisos-fila:is([data-tono=aprobacion], [data-tono=hecho]) .crm-avisos-icono { color: var(--crm-acento); } .crm-avisos-fila[data-tono=error] .crm-avisos-icono { color: var(--crm-error); } .crm-avisos-titulo-texto { min-width: 0; } .crm-avisos-detalle { overflow: hidden; color: var(--crm-muted); font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; } .crm-avisos-hora { position: absolute; top: 12px; right: 12px; color: var(--crm-dim); font-size: 12px; font-variant-numeric: tabular-nums; line-height: 16px; white-space: nowrap; pointer-events: auto; } .crm-avisos-hora:focus { outline: none; } .crm-avisos-vacio { padding: 24px 16px; } .crm-avisos-cargando { display: grid; } .crm-avisos-esqueleto { display: grid; gap: 6px; padding: 14px 12px 14px 26px; opacity: 0; animation: crm-es-aparece 0s linear var(--crm-t-retardo) forwards; } .crm-avisos-esqueleto + .crm-avisos-esqueleto { border-top: 1px solid var(--crm-line); } .crm-avisos-esqueleto i { display: block; width: 72%; height: 8px; background: linear-gradient( 90deg, var(--crm-esqueleto-a), var(--crm-esqueleto-b), var(--crm-esqueleto-a)); background-size: 200% 100%; animation: crm-es-esqueleto var(--crm-t-barrido) var(--crm-curva) infinite; } .crm-avisos-esqueleto i + i { width: 44%; height: 6px; } @keyframes crm-es-esqueleto { from { background-position: 100% 0; } to { background-position: -100% 0; } } .crm-avisos-error { display: flex; align-items: flex-start; gap: 8px; padding: 12px; color: var(--crm-text-2); font-size: 13px; line-height: 20px; } .crm-avisos-error > svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--crm-error); } .crm-avisos-error p { margin: 0 0 8px; } .crm-avisos-error .crm-avisos-leer { margin-left: -8px; color: var(--crm-text); } .crm-pp { position: sticky; z-index: 5; bottom: 0; display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 24px; box-sizing: border-box; min-height: 32px; padding: 0 12px 0 var(--crm-es-pad); overflow: hidden; border-top: 1px solid var(--crm-line); background: var(--crm-bg); color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; letter-spacing: 0.02em; line-height: 16px; white-space: nowrap; } .crm-pp-vivo, .crm-pp-derecha { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; min-width: 0; min-height: 31px; } .crm-pp-derecha { flex: 1 1 0px; flex-wrap: nowrap; min-width: auto; justify-content: flex-end; margin-left: auto; } .crm-pp-derecha > :not(.crm-firma-zona) { flex: none; } .crm-pp .crm-firma-zona { justify-content: flex-end; width: var(--crm-pp-isotipo); min-width: var(--crm-pp-isotipo); } .crm-pp-vivo > *, .crm-pp-derecha > * { display: inline-flex; align-items: center; min-height: 31px; } .crm-pp-estado, .crm-pp-hora, .crm-pp-soporte { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .crm-pp-estado .crm-punto { width: 6px; height: 6px; } .crm-pp-estado[data-estado=ok] .crm-punto { background: var(--crm-acento); box-shadow: 0 0 0 3px var(--crm-acento-suave); } .crm-pp-estado[data-estado=ok] .crm-punto::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--crm-acento); animation: crm-latido var(--crm-t-latido) ease-out infinite; } .crm-pp-estado[data-estado=sin-respuesta] { color: var(--crm-aviso); } .crm-pp-estado[data-estado=sin-respuesta] .crm-punto { background: var(--crm-aviso); } .crm-pp-valor { color: var(--crm-text-2); font-variant-numeric: tabular-nums; } .crm-pp-version { color: var(--crm-dim); } .crm-pp-soporte a, .crm-pp-enlaces a { color: var(--crm-text-2); text-decoration: none; transition: color var(--crm-t-color) var(--crm-snap); } .crm-pp-soporte a:hover, .crm-pp-enlaces a:hover { color: var(--crm-acento); transition-duration: 0ms; } .crm-pp-enlaces { display: inline-flex; gap: 12px; } .crm-pp .crm-pp-firma { color: var(--crm-muted); } .crm-cabecera { container: crm-cabecera / inline-size; padding: var(--crm-es-pad) var(--crm-es-pad) 0; } .crm-cabecera-fila { display: grid; gap: 4px; min-width: 0; padding-bottom: 20px; } .crm-cabecera-fila > .crm-es-rotulo { margin-bottom: 2px; } .crm-cabecera-linea { display: flex; flex-wrap: nowrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; min-width: 0; } .crm-cabecera-linea > .crm-cabecera-titulo { flex: 1 1 320px; min-width: 0; max-width: 68ch; } .crm-cabecera-titulo { margin: 0; color: var(--crm-text); font-size: 24px; font-weight: 500; letter-spacing: -0.03em; line-height: 32px; text-wrap: balance; } .crm-cabecera-descripcion { max-width: 68ch; margin: 0; color: var(--crm-muted); font-size: 14px; line-height: 22px; } .crm-cabecera-meta { margin: 0; color: var(--crm-dim); font-family: var(--crm-mono); font-size: 12px; font-variant-numeric: tabular-nums; line-height: 16px; } .crm-cabecera-meta[data-crm-bloque] > :is(nav, ul, ol, div):not(.crm-metadatos), .crm-metadatos-trozo :is(nav, ul, ol) { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; vertical-align: baseline; } .crm-cabecera-acciones { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 32px; } @container crm-cabecera (max-width: 719.98px) { .crm-cabecera-linea { display: contents; } .crm-cabecera-linea > .crm-cabecera-titulo { max-width: none; } .crm-cabecera-acciones { order: 1; justify-content: flex-end; margin-top: 8px; } } .crm-cabecera-pestanas.crm-conmutador, .crm-cabecera-pestanas .crm-conmutador { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; } .crm-cabecera-pestanas.crm-conmutador::-webkit-scrollbar, .crm-cabecera-pestanas .crm-conmutador::-webkit-scrollbar { display: none; } .crm-cabecera + :is(.crm-seccion, .crm-cuerpo) { padding-top: 24px; } .crm-cuerpo { display: flex; flex-direction: column; gap: 32px; min-width: 0; padding: 24px var(--crm-es-pad) 48px; } .crm-cuerpo[data-ritmo=comodo] { gap: 48px; } .crm-cuerpo > .crm-seccion { padding: 0; } .crm-cuerpo > * { min-width: 0; margin-block: 0; } .crm-rejilla { display: grid; grid-template-columns: var(--crm-rejilla-plantilla); align-items: stretch; gap: var(--crm-rejilla-separacion, 24px); min-width: 0; } .crm-rejilla > * { min-width: 0; } @media (max-width: 720px) { .crm-rejilla { grid-template-columns: minmax(0, 1fr); gap: 16px; } } .crm-cabecera:not(.crm-cabecera-con-pestanas) { border-bottom: 1px solid var(--crm-line); } .crm-ctl-pestanas.crm-cabecera-pestanas, nav.crm-cabecera-pestanas { max-width: none; margin-inline: calc(var(--crm-es-pad) * -1); } .crm-cabecera-pestanas .crm-conmutador, nav.crm-cabecera-pestanas { padding-inline: var(--crm-es-pad); } .crm-seccion { padding: 32px var(--crm-es-pad) 0; } :is(.crm-modal-cuerpo, .crm-deslizante-cuerpo, .crm-tarjeta, .crm-seccion) .crm-seccion { padding: 0; } :is(.crm-modal-cuerpo, .crm-deslizante-cuerpo, .crm-tarjeta, .crm-seccion) .crm-seccion:not(:first-child) { margin-top: 24px; } .crm-tarjeta .crm-seccion-titulo { font-size: 13px; letter-spacing: -0.005em; line-height: 20px; } .crm-tarjeta-cuerpo > .crm-seccion:first-child { margin-top: 8px; } .crm-seccion-cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--crm-line); } .crm-seccion-textos { display: grid; gap: 2px; min-width: 0; } .crm-seccion-titulo { margin: 0; color: var(--crm-text); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; line-height: 22px; } .crm-seccion-descripcion { max-width: 68ch; margin: 0; color: var(--crm-muted); font-size: 13px; line-height: 20px; } .crm-seccion-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .crm-tarjeta { position: relative; display: grid; align-content: start; gap: 8px; min-width: 0; padding: 20px; border: 1px solid var(--crm-line-2); background: var(--crm-panel); color: var(--crm-text-2); } .crm-tarjeta[data-variante=aprobacion] { border-color: var(--crm-acento-linea); border-top-color: var(--crm-acento); box-shadow: inset 0 1px 0 var(--crm-acento); } .crm-tarjeta[data-variante=error] { border-color: var(--crm-error-linea); } .crm-tarjeta[data-variante=hundida] { border-color: var(--crm-line); background: var(--crm-bg); box-shadow: var(--crm-sombra-hundida); } .crm-tarjeta-chip { display: inline-flex; align-items: center; justify-self: start; gap: 6px; box-sizing: border-box; height: 20px; margin: 0; padding: 0 6px; border: 1px solid var(--crm-line-2); color: var(--crm-text-2); font-family: var(--crm-sans); font-size: 12px; letter-spacing: 0; line-height: 16px; } .crm-tarjeta-chip svg { width: 12px; height: 12px; stroke-width: 1.5; } .crm-tarjeta:is([data-variante=aprobacion], [data-variante=hecho]) .crm-tarjeta-chip { border-color: var(--crm-acento-linea); background: var(--crm-acento-suave); color: var(--crm-acento); } .crm-tarjeta[data-variante=error] .crm-tarjeta-chip { border-color: var(--crm-error-linea); color: var(--crm-error); } .crm-tarjeta-titulo { margin: 4px 0 0; color: var(--crm-text); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; line-height: 22px; } .crm-tarjeta-titulo:first-child { margin-top: 0; } :is(.crm-seccion-titulo, .crm-tarjeta-titulo) { display: flex; align-items: center; gap: 8px; } .crm-titulo-icono { display: grid; flex: none; color: var(--crm-muted); } :is(.crm-seccion-titulo, .crm-tarjeta-titulo) svg { flex: none; width: 16px; height: 16px; color: var(--crm-muted); stroke-width: 1.6; } .crm-tarjeta-texto { margin: 0; color: var(--crm-text-2); font-size: 14px; line-height: 22px; } .crm-tarjeta-cuerpo { min-width: 0; font-size: 14px; line-height: 22px; } .crm-tarjeta-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .crm-superior .crm-superior-mas { display: none; } .crm-superior-vista, .crm-superior-al-menu { display: contents; } @container crm-superior (max-width: 719.98px) { .crm-superior .crm-superior-mas { display: inline-flex; } .crm-superior-vista, .crm-superior-al-menu { display: none; } .crm-superior-busca { justify-content: center; width: 28px; padding: 0; border-color: transparent; background: transparent; color: var(--crm-text-2); } .crm-superior-busca :is(.crm-superior-busca-texto, .crm-es-atajo) { display: none; } .crm-superior-izquierda { flex: 1 1 auto; min-width: 0; } .crm-superior-derecha { flex: none; gap: 4px; } .crm-superior-pendientes-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .crm-superior-migas li:not([data-ultima]), .crm-superior-migas li[data-ultima]::before { display: none; } .crm-superior-migas :is(ol, li, [aria-current]) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .crm-superior[data-estrecha] .crm-superior-mas { display: inline-flex; } .crm-superior[data-estrecha] .crm-superior-busca { justify-content: center; width: 28px; padding: 0; border-color: transparent; background: transparent; color: var(--crm-text-2); } .crm-superior[data-estrecha] .crm-superior-busca :is(.crm-superior-busca-texto, .crm-es-atajo) { display: none; } .crm-superior[data-estrecha] .crm-superior-izquierda { flex: 1 1 auto; min-width: 0; } .crm-superior[data-estrecha] .crm-superior-derecha { flex: none; gap: 4px; } .crm-superior[data-estrecha] .crm-superior-pendientes-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .crm-accion-barra { display: contents; } .crm-accion-barra[data-en-menu] { display: none; } .crm-superior[data-estrecha] .crm-superior-migas li:not([data-ultima]), .crm-superior[data-estrecha] .crm-superior-migas li[data-ultima]::before { display: none; } .crm-superior[data-estrecha] .crm-superior-migas :is(ol, li, [aria-current]) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 720px) { .crm-raiz, .crm-marco, .crm-capa { --crm-es-pad: 16px; } .crm-pp { column-gap: 16px; padding: 0 16px; } .crm-pp :is(.crm-pp-soporte, .crm-pp-version, .crm-pp-enlaces) { display: none; } } @media (max-width: 600px) { .crm-modal:not([data-tamano=completo]) { --crm-modal-arriba: auto; top: auto; right: 0; bottom: 0; left: 0; width: 100%; max-height: 92%; border-right: 0; border-bottom: 0; border-left: 0; translate: none; } .crm-modal[data-tamano=completo] { inset: 0; border: 0; } .crm-modal-cabecera { padding: 0 8px 0 16px; } .crm-modal-cuerpo { padding: 16px; } .crm-modal-pie { height: auto; min-height: 56px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 0; box-shadow: inset 0 1px 0 var(--crm-line); } .crm-modal-pie { flex-wrap: wrap; } .crm-modal-pie .crm-boton { flex: 1 1 auto; max-width: 100%; } .crm-deslizante { width: 100%; border-right: 0; border-left: 0; } .crm-deslizante-barra { padding: 0 8px 0 16px; } .crm-deslizante-cuerpo { padding: 16px; } .crm-deslizante-pie { flex-wrap: wrap; height: auto; min-height: 56px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 0; box-shadow: inset 0 1px 0 var(--crm-line); } .crm-paleta { top: 8px; width: calc(100% - 16px); max-height: calc(100% - 16px); } .crm-paleta-detalle, .crm-paleta-pie-foco { display: none; } .crm-paleta-pie { justify-content: flex-end; } } @media (prefers-reduced-motion: reduce) { .crm-telon, .crm-consejo, .crm-menu, .crm-desplegable, .crm-modal, .crm-deslizante, .crm-paleta, .crm-marco-hoja, .crm-punto.crm-es-vivo::after, .crm-pp-estado[data-estado=ok] .crm-punto::after, .crm-avisos-esqueleto i { animation: none !important; } .crm-avisos-esqueleto { animation-duration: 0s; } .crm-modal::before, .crm-paleta::before, .crm-deslizante[data-lado=derecha]::before, .crm-tarjeta[data-variante=aprobacion]::before, .crm-desplegable[data-ocupado]::before { display: none; } .crm-marco, .crm-lateral-item::before, .crm-lateral-rotulo-flecha, .crm-tema-check, .crm-avisos-campana, .crm-usuario-avatar { transition-property: background-color, border-color, color, opacity; } .crm-avisos-campana:active, .crm-usuario-avatar:active { transform: none; } } .crm-marco-secuencia { position: absolute; z-index: 30; bottom: 44px; left: calc(var(--crm-marco-lateral) + 24px); display: none; align-items: center; gap: 8px; box-sizing: border-box; height: 28px; margin: 0; padding: 0 10px 0 4px; border: 1px solid var(--crm-line-2); background: var(--crm-panel-2); box-shadow: var(--crm-sombra-capa); color: var(--crm-text-2); font-size: 12px; line-height: 16px; pointer-events: none; } .crm-marco-secuencia[data-activa] { display: inline-flex; animation: crm-es-aparece var(--crm-t-entrada) var(--crm-snap); } .crm-marco[data-movil] > .crm-marco-principal > .crm-marco-secuencia { left: 16px; } .crm-atajos-filtrable { display: grid; gap: 16px; } .crm-atajos-filtro { position: sticky; z-index: 1; top: 0; display: flex; align-items: center; gap: 12px; background: var(--crm-panel); } .crm-modal-cuerpo .crm-atajos-filtro { top: -20px; margin-top: -20px; padding-top: 20px; } .crm-atajos-filtro .crm-atajos-campo { flex: 1 1 auto; min-width: 0; } .crm-atajos-cuenta { flex: none; margin: 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; } .crm-atajos-vacio { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; padding: 24px 0; color: var(--crm-muted); font-size: 13px; line-height: 20px; } .crm-atajos-vacio-texto { margin: 0; overflow-wrap: anywhere; } .crm-lateral-grupo :is(ul, li)[hidden] { display: none; } .crm-lateral-grupo ul[data-solo-activa] { animation: crm-es-aparece var(--crm-t-entrada) var(--crm-snap); } .crm-pp-medida { display: inline-flex; align-items: center; gap: 8px; } .crm-pp-reintentar { display: inline-flex; align-items: center; box-sizing: border-box; height: 24px; padding: 0 8px; border: 1px solid var(--crm-line-2); border-radius: 0; background: transparent; color: var(--crm-text-2); font: inherit; cursor: pointer; transition: background-color var(--crm-t-color) var(--crm-snap), color var(--crm-t-color) var(--crm-snap); } .crm-pp-reintentar:hover { background: var(--crm-panel-2); color: var(--crm-text); transition-duration: 0ms; } .crm-avisos-leido { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; box-sizing: border-box; width: 24px; height: 24px; padding: 0; border: 1px solid var(--crm-line-2); border-radius: 0; background: var(--crm-panel-2); color: var(--crm-muted); opacity: 0; cursor: default; transition: opacity var(--crm-t-salida) var(--crm-snap), color var(--crm-t-color) var(--crm-snap); } .crm-avisos-leido svg { width: 14px; height: 14px; stroke-width: 1.5; } .crm-avisos-hora { transition: opacity var(--crm-t-salida) var(--crm-snap); } .crm-avisos-fila[data-leible]:is(:hover, :focus-within) .crm-avisos-leido { opacity: 1; transition-duration: 0ms; } .crm-avisos-fila[data-leible]:is(:hover, :focus-within) .crm-avisos-hora { opacity: 0; transition-duration: 0ms; } .crm-avisos-leido:hover { color: var(--crm-acento); } .crm-avisos-leido:active { transform: scale(0.96); transition: transform var(--crm-t-pulsar) var(--crm-snap); } @media (hover: none) { .crm-avisos-fila[data-leible] .crm-avisos-leido { top: 32px; opacity: 1; } .crm-avisos-fila[data-leible]:is(:hover, :focus-within) .crm-avisos-hora { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .crm-avisos-leido:active { transform: none; } } .crm-modal-descartar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; box-sizing: border-box; min-height: 44px; padding: 8px 12px 8px 20px; box-shadow: inset 0 1px 0 var(--crm-aviso-linea); background: var(--crm-aviso-suave); color: var(--crm-text-2); font-size: 13px; line-height: 20px; animation: crm-es-aparece var(--crm-t-entrada) var(--crm-snap); } .crm-modal-descartar > svg { flex: none; width: 16px; height: 16px; color: var(--crm-aviso); stroke-width: 1.6; } .crm-modal-descartar-texto { flex: 1 1 160px; min-width: 0; margin: 0; } .crm-modal-descartar-acciones { display: inline-flex; flex: none; gap: 8px; margin-left: auto; } @media (prefers-reduced-motion: reduce) { .crm-modal-descartar { animation: none; } } .crm-confirmar-caja { position: relative; display: block; } .crm-confirmar-caja[data-coincide] .crm-confirmar-campo { padding-right: 36px; border-color: var(--crm-acento-linea); } .crm-confirmar-visto { position: absolute; top: 8px; right: 10px; width: 16px; height: 16px; color: var(--crm-acento); stroke-width: 1.6; pointer-events: none; animation: crm-es-aparece var(--crm-t-entrada) var(--crm-snap); } @media (prefers-reduced-motion: reduce) { .crm-confirmar-visto { animation: none; } } .crm-deslizante-esc { display: inline-flex; flex: none; margin-right: -6px; } .crm-deslizante-pista { display: inline-flex; align-items: center; gap: 6px; min-width: 0; margin-right: auto; color: var(--crm-muted); font-size: 12px; line-height: 16px; white-space: nowrap; } .crm-deslizante-pista-texto { overflow: hidden; text-overflow: ellipsis; } @media (hover: none) { .crm-deslizante-esc, .crm-deslizante-pista { display: none; } } [data-crm-disparador][aria-expanded=true] { background: var(--crm-panel-3); color: var(--crm-text); } .crm-paleta-sugerencias { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; padding: 0 16px 24px; } .crm-paleta-sugerencias-rotulo { color: var(--crm-dim); font-size: 12px; line-height: 16px; } .crm-paleta-vacio:has(+ .crm-paleta-sugerencias) { padding-bottom: 16px; } .crm-paleta-sugerencia { display: inline-flex; align-items: center; box-sizing: border-box; height: 24px; padding: 0 8px; border: 1px solid var(--crm-line-2); border-radius: 0; background: transparent; color: var(--crm-text-2); font-family: var(--crm-sans); font-size: 12px; line-height: 16px; cursor: default; transition: background-color var(--crm-t-color) var(--crm-snap), color var(--crm-t-color) var(--crm-snap); } .crm-paleta-sugerencia:hover { background: var(--crm-panel-3); color: var(--crm-text); transition-duration: 0ms; } .crm-migas-mas { display: inline-grid; place-items: center; box-sizing: border-box; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--crm-muted); cursor: default; transition: background-color var(--crm-t-color) var(--crm-snap), color var(--crm-t-color) var(--crm-snap); } .crm-migas-recogidas .crm-migas-mas { margin-inline: -4px; } .crm-migas-mas svg { width: 14px; height: 14px; stroke-width: 1.5; } .crm-migas-mas:hover, .crm-migas-mas[aria-expanded=true] { background: var(--crm-panel-3); color: var(--crm-text); transition-duration: 0ms; } .crm-seccion-plegar { display: inline-flex; align-items: center; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: default; } .crm-seccion-titulo .crm-seccion-flecha { width: 14px; height: 14px; color: var(--crm-dim); stroke-width: 1.5; transition: rotate var(--crm-t-gesto) var(--crm-snap), color var(--crm-t-color) var(--crm-snap); } .crm-seccion-plegar:hover .crm-seccion-flecha { color: var(--crm-text); } .crm-seccion[data-plegada] .crm-seccion-flecha { rotate: -90deg; } .crm-seccion-cuerpo[hidden] { display: none; } .crm-seccion[data-plegada] > .crm-seccion-cabecera { margin-bottom: 0; } .crm-tarjeta[data-clicable] { transition: background-color var(--crm-t-color) var(--crm-snap), border-color var(--crm-t-color) var(--crm-snap); } .crm-tarjeta[data-clicable]:hover { border-color: var(--crm-control); background-color: var(--crm-panel-2); transition-duration: 0ms; } .crm-tarjeta-enlace { margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; text-decoration: none; cursor: default; } .crm-tarjeta-enlace::after { content: ""; position: absolute; z-index: 0; inset: 0; } .crm-tarjeta .crm-tarjeta-enlace:focus-visible { outline: none; } .crm-tarjeta[data-clicable]:has(.crm-tarjeta-enlace:focus-visible) { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-tarjeta[data-clicable] :is(.crm-tarjeta-cuerpo, .crm-tarjeta-acciones) :is(a, button, input, select, textarea, [tabindex]) { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .crm-seccion-titulo .crm-seccion-flecha { transition-property: color; } } .crm-cuerpo[data-ancho=lectura] { max-width: calc(68ch + 2 * var(--crm-es-pad)); } .crm-rejilla-vacio { grid-column: 1 / -1; min-width: 0; border: 1px dashed var(--crm-line-2); } .crm-tarjeta-linea { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-width: 0; min-height: 28px; } .crm-tarjeta-linea > .crm-tarjeta-titulo { flex: 100000 1 auto; min-width: 0; margin: 0; } .crm-tarjeta-linea-hueco { flex: 100000 1 auto; } .crm-tarjeta-acciones-cabecera { display: flex; flex: 1 0 auto; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 100%; } .crm-tarjeta-acciones-cabecera > :is(.crm-entrada, :has(> .crm-entrada)) { flex: 1 1 200px; width: 200px; min-width: 120px; } .crm-tarjeta-acciones-cabecera > :has(> .crm-entrada) > .crm-entrada { width: 100%; } .crm-tarjeta-chip + .crm-tarjeta-linea { margin-top: 4px; } .crm-tarjeta[data-clicable] .crm-tarjeta-acciones-cabecera :is(a, button, input, select, textarea, [tabindex]) { position: relative; z-index: 1; } .crm-tarjeta[data-cuerpo=a-sangre] > .crm-tarjeta-cuerpo { margin-inline: -20px; } .crm-tarjeta[data-cuerpo=a-sangre] > :not(.crm-tarjeta-cuerpo) + .crm-tarjeta-cuerpo { margin-top: 8px; } .crm-tarjeta[data-cuerpo=a-sangre] > .crm-tarjeta-cuerpo:last-child { margin-bottom: -20px; } .crm-tarjeta[data-cuerpo=a-sangre] > .crm-tarjeta-cuerpo:first-child { margin-top: -20px; } .crm-tarjeta[data-cuerpo=a-sangre] > .crm-tarjeta-cuerpo > .crm-lista .crm-lista-fila { padding-inline: 20px; } .crm-tarjeta[data-cuerpo=a-sangre] > .crm-tarjeta-cuerpo:last-child > .crm-lista > li:last-child > .crm-lista-fila { border-bottom: 0; } .crm-tarjeta[data-cuerpo=a-sangre] > .crm-tarjeta-cuerpo > .crm-tabla :is(th, td):first-child { padding-left: 20px; } .crm-tarjeta[data-cuerpo=a-sangre] > .crm-tarjeta-cuerpo > .crm-tabla :is(th, td):last-child { padding-right: 20px; } .crm-tarjeta[data-cuerpo=a-sangre] > .crm-tarjeta-cuerpo:last-child > .crm-tabla tbody tr:last-child > td { border-bottom: 0; } .crm-pagina { container: crm-pagina / inline-size; min-width: 0; } .crm-pagina-marco { --crm-pagina-hueco: 24px; min-width: 0; max-width: var(--crm-pagina-medida, none); } @container crm-pagina (max-width: 719.98px) { .crm-pagina-marco { --crm-es-pad: 16px; --crm-pagina-hueco: 16px; } } .crm-pagina[data-patron=formulario]:not([data-con-lateral]) > .crm-pagina-marco { --crm-pagina-medida: calc(560px + 2 * var(--crm-es-pad)); } .crm-pagina[data-patron=ajustes] > .crm-pagina-marco { --crm-pagina-medida: calc(720px + 2 * var(--crm-es-pad)); } .crm-pagina[data-patron=ajustes][data-con-lateral] > .crm-pagina-marco { --crm-pagina-medida: calc(200px + 48px + 720px + 2 * var(--crm-es-pad)); } .crm-pagina-cuerpo .crm-seccion { padding: 0; } .crm-pagina-cuerpo > :is(.crm-pagina-aviso, .crm-pagina-atencion, .crm-pagina-cifras, .crm-pagina-coleccion) { min-width: 0; } .crm-pagina-coleccion { display: grid; gap: 16px; } .crm-pagina-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 32px; } .crm-pagina[data-patron=vacia] .crm-vacio { justify-items: start; margin-inline: 0; padding-inline: 0; text-align: start; } .crm-pagina[data-patron=vacia] .crm-vacio-acciones { justify-content: flex-start; } .crm-columnas { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--crm-pagina-hueco, 24px); min-width: 0; } .crm-columnas > * { display: flex; flex-direction: column; gap: 32px; min-width: 0; } @container crm-pagina (min-width: 720px) { .crm-columnas[data-reparto=mitades]:not([data-sola]) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container crm-pagina (min-width: 1024px) { .crm-columnas[data-reparto=amplio]:not([data-sola]) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .crm-columnas[data-reparto=lateral]:not([data-sola]) { grid-template-columns: minmax(0, 1fr) 320px; } .crm-columnas[data-reparto=medida]:not([data-sola]) { grid-template-columns: 560px minmax(0, 1fr); } } .crm-columnas[data-reparto=medida]:not([data-sola]) > .crm-columnas-principal { max-width: 720px; } .crm-columnas-secundaria[data-fija] { position: sticky; top: calc(var(--crm-marco-arriba, 44px) + var(--crm-es-pad)); } .crm-pagina-formulario { display: flex; flex-direction: column; gap: 32px; min-width: 0; } .crm-pagina-formulario-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 16px; border-top: 1px solid var(--crm-line); } .crm-pagina-resultado-vacio { border-top: 1px solid var(--crm-line); } .crm-pagina-resultado-vacio > .crm-vacio { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 4px 12px; max-width: none; margin: 0; padding: 20px 0 0; text-align: start; } .crm-pagina-resultado-vacio > .crm-vacio:has(> .crm-vacio-icono) { grid-template-columns: 20px minmax(0, 1fr); } .crm-pagina-resultado-vacio .crm-vacio-icono { grid-row: 1 / span 2; align-self: start; width: 20px; height: 22px; margin: 0; border: 0; } .crm-pagina-resultado-vacio .crm-vacio-icono ~ * { grid-column: 2; } .crm-pagina-resultado-vacio .crm-vacio-texto { max-width: 68ch; } .crm-ajustes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; min-width: 0; } .crm-ajustes[data-con-indice] { grid-template-columns: 200px minmax(0, 1fr); } .crm-ajustes-indice { position: sticky; top: calc(var(--crm-marco-arriba, 44px) + var(--crm-es-pad)); align-self: start; min-width: 0; } .crm-ajustes-indice ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; } .crm-ajustes-indice li { min-width: 0; } .crm-ajustes-enlace { position: relative; display: flex; align-items: center; box-sizing: border-box; height: 28px; padding: 0 10px; overflow: hidden; color: var(--crm-muted); font-size: 13px; line-height: 20px; text-decoration: none; transition: background-color var(--crm-t-color) var(--crm-snap), color var(--crm-t-color) var(--crm-snap); } .crm-ajustes-enlace-texto, .crm-ajustes-movil-enlace-texto { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-ajustes-enlace:hover, .crm-ajustes-enlace[data-crm-forzar=hover] { background: var(--crm-panel-2); color: var(--crm-text); transition-duration: 0ms; } .crm-ajustes-enlace[aria-current=location] { color: var(--crm-text); font-weight: 500; } .crm-ajustes-enlace[aria-current=location]::before { position: absolute; inset: 4px auto 4px 0; width: 2px; background: var(--crm-acento); content: ""; } .crm-ajustes-cuerpo { display: flex; flex-direction: column; gap: 32px; min-width: 0; max-width: 720px; } .crm-ajustes-cuerpo > [id] { scroll-margin-top: calc(var(--crm-marco-arriba, 44px) + var(--crm-es-pad)); } @container crm-pagina (max-width: 1023.98px) { .crm-ajustes[data-con-indice] { grid-template-columns: minmax(0, 1fr); } .crm-ajustes-indice { display: none; } } @media (forced-colors: active) { .crm-ajustes-enlace[aria-current=location]::before { background: Highlight; } .crm-pagina-resultado-vacio { border-color: CanvasText; } } .crm-campos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; } .crm-campos[data-columnas="2"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px 24px; } .crm-indice { container: crm-indice / inline-size; position: relative; display: flex; align-items: center; gap: 16px; min-width: 0; margin-inline: calc(var(--crm-es-pad) * -1); padding-inline: var(--crm-es-pad); background: var(--crm-bg); box-shadow: inset 0 -1px 0 var(--crm-line); } .crm-indice[data-fija] { position: sticky; z-index: 2; top: var(--crm-marco-arriba, 0px); } .crm-indice-pestanas { flex: 1 1 auto; min-width: 0; } .crm-indice .crm-conmutador[data-variante=subrayado] { box-shadow: none; } .crm-indice-extra { display: flex; flex: none; align-items: center; gap: 8px; } @container crm-indice (max-width: 719.98px) { .crm-indice-extra { display: none; } } .crm-metadatos { --crm-metadatos-hueco: 16px; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--crm-metadatos-hueco); min-width: 0; max-width: 100%; vertical-align: baseline; } .crm-metadatos-trozo { position: relative; display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; overflow-wrap: anywhere; } .crm-metadatos-separador { position: absolute; left: calc(var(--crm-metadatos-hueco) / -2); color: var(--crm-dim); transform: translateX(-50%); pointer-events: none; user-select: none; } .crm-metadatos-trozo[data-inicio-linea] > .crm-metadatos-separador { display: none; } .crm-marco-contenido:has(> .crm-va[data-en-marco]) { display: flex; flex: 1 1 0px; flex-direction: column; padding-bottom: 0; } .crm-va[data-en-marco] { flex: 1 1 0px; height: 100%; min-height: 320px; } .crm-va[data-sin-barra] { grid-template-rows: minmax(0, 1fr); } @media (min-height: 481px) { .crm-va .crm-va-inicio { align-content: safe center; } } .crm-pagina-despues { display: flex; flex-direction: column; gap: 32px; min-width: 0; } .crm-marco-contenido:has(> .crm-pagina[data-patron=lienzo]) { display: flex; flex: 1 1 0px; flex-direction: column; padding-bottom: 0; } .crm-pagina[data-patron=lienzo], .crm-pagina[data-patron=lienzo] > .crm-pagina-marco { display: flex; flex: 1 1 0px; flex-direction: column; min-width: 0; } .crm-pagina[data-patron=lienzo] .crm-pagina-cuerpo { flex: 1 1 0px; padding-bottom: var(--crm-es-pad); } .crm-pagina-lienzo { display: flex; flex: 1 1 0px; flex-direction: column; min-width: 0; min-height: 320px; } .crm-pagina-lienzo-pie { flex: none; min-width: 0; } .crm-conversacion { --crm-conversacion-col: 880px; display: flex; flex: 1 1 0px; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; } .crm-conversacion[data-ancho=completo] { --crm-conversacion-col: 100%; } .crm-conversacion-hilo { flex: 1 1 0px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; outline: none; } .crm-conversacion-hilo:focus-visible { box-shadow: inset 0 0 0 var(--crm-foco-ancho) var(--crm-acento); } .crm-conversacion-columna { display: flex; flex-direction: column; gap: 16px; box-sizing: border-box; width: min(100%, var(--crm-conversacion-col)); margin-inline: auto; } .crm-conversacion-hilo > .crm-conversacion-columna { padding-block: 8px; } .crm-conversacion-pie { flex: none; min-width: 0; } .crm-mensaje { display: grid; gap: 4px; max-width: min(100%, 68ch); margin: 0; color: var(--crm-text-2); font-size: 14px; line-height: 22px; overflow-wrap: anywhere; } .crm-mensaje[data-autor=tu] { align-self: flex-end; justify-items: end; } .crm-mensaje[data-autor=otro] { align-self: flex-start; } .crm-mensaje-cuerpo { min-width: 0; } .crm-mensaje[data-autor=tu] .crm-mensaje-cuerpo { padding: 8px 12px; border: 1px solid var(--crm-line); background: var(--crm-panel); color: var(--crm-text); } .crm-mensaje-cuerpo > :first-child { margin-top: 0; } .crm-mensaje-cuerpo > :last-child { margin-bottom: 0; } .crm-mensaje-meta { display: flex; gap: 8px; margin: 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-mensaje-nombre { color: var(--crm-text); font-weight: 500; } .crm-mensaje-hora { font-variant-numeric: tabular-nums; } .crm-ajustes-movil { display: none; } @container crm-pagina (max-width: 1023.98px) { .crm-ajustes { gap: 24px; } .crm-ajustes-cuerpo > [id] { scroll-margin-top: calc(var(--crm-marco-arriba, 44px) + 40px + var(--crm-es-pad)); } .crm-ajustes-movil { position: sticky; z-index: 2; top: var(--crm-marco-arriba, 0px); display: block; margin-inline: calc(var(--crm-es-pad) * -1); padding-inline: var(--crm-es-pad); background: var(--crm-bg); box-shadow: inset 0 -1px 0 var(--crm-line); } } .crm-ajustes-movil-boton { display: flex; align-items: center; gap: 8px; box-sizing: border-box; width: 100%; height: 40px; margin: 0; padding: 0; border: 0; background: none; color: var(--crm-text); font: inherit; font-size: 13px; line-height: 20px; text-align: start; cursor: pointer; } .crm-ajustes-movil-rotulo { flex: none; color: var(--crm-muted); } .crm-ajustes-movil-actual { flex: 1 1 auto; min-width: 0; overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } .crm-ajustes-movil-flecha { flex: none; width: 16px; height: 16px; color: var(--crm-muted); stroke-width: 1.6; transition: transform var(--crm-t-gesto) var(--crm-snap); } .crm-ajustes-movil[data-abierto] .crm-ajustes-movil-flecha { transform: rotate(180deg); } .crm-ajustes-movil-lista { margin: 0; padding: 0 0 8px; list-style: none; } .crm-ajustes-movil-lista[hidden] { display: none; } .crm-ajustes-movil-enlace { position: relative; display: flex; align-items: center; box-sizing: border-box; height: 40px; padding: 0 12px; overflow: hidden; color: var(--crm-muted); font-size: 13px; line-height: 20px; text-decoration: none; } .crm-ajustes-movil-enlace:hover { background: var(--crm-panel-2); color: var(--crm-text); } .crm-ajustes-movil-enlace[aria-current=location] { color: var(--crm-text); font-weight: 500; } .crm-ajustes-movil-enlace[aria-current=location]::before { position: absolute; inset: 8px auto 8px 0; width: 2px; background: var(--crm-acento); content: ""; } @media (prefers-reduced-motion: reduce) { .crm-ajustes-movil-flecha { transition: none; } } .crm-cabecera-volver { display: inline-flex; align-items: center; justify-self: start; gap: 6px; box-sizing: border-box; height: 24px; margin: 0 0 4px -6px; padding: 0 8px 0 6px; color: var(--crm-muted); font-size: 12px; line-height: 16px; text-decoration: none; transition: background-color var(--crm-t-salida) var(--crm-snap), color var(--crm-t-salida) var(--crm-snap); } .crm-cabecera-volver:hover, .crm-cabecera-volver[data-crm-forzar=hover] { background: var(--crm-panel-2); color: var(--crm-text); transition-duration: 0ms; } .crm-cabecera-volver svg { flex: none; width: 14px; height: 14px; stroke-width: 1.5; } .crm-cabecera-volver span { min-width: 0; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-nav-movil { --crm-nav-movil-alto: 56px; box-sizing: border-box; container-type: inline-size; container-name: crm-nav-movil; background: var(--crm-panel); box-shadow: inset 0 1px 0 var(--crm-line); font-family: var(--crm-sans); } .crm-nav-movil[data-compacta] { --crm-nav-movil-alto: 48px; } .crm-nav-movil[data-posicion=fija] { position: fixed; inset: auto 0 0; z-index: 30; padding: 0 var(--crm-zona-segura-derecha, env(safe-area-inset-right, 0px)) var(--crm-zona-segura-abajo, env(safe-area-inset-bottom, 0px)) var(--crm-zona-segura-izquierda, env(safe-area-inset-left, 0px)); } .crm-nav-movil-hueco { flex: none; height: var(--crm-nav-movil-hueco-alto, calc(56px + var(--crm-zona-segura-abajo, env(safe-area-inset-bottom, 0px)))); } .crm-nav-movil[data-escritorio=ocultar][data-en-marco]:not([data-movil]), .crm-nav-movil-hueco[data-escritorio=ocultar][data-en-marco]:not([data-movil]) { display: none; } @media (min-width: 900px) { .crm-nav-movil[data-escritorio=ocultar]:not([data-en-marco]), .crm-nav-movil-hueco[data-escritorio=ocultar]:not([data-en-marco]) { display: none; } } .crm-nav-movil-lista { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; min-height: var(--crm-nav-movil-alto); margin: 0; padding: 0; list-style: none; } .crm-nav-movil-destino { display: grid; min-width: 0; container-type: inline-size; container-name: crm-nav-movil-destino; } .crm-nav-movil-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; justify-items: center; gap: 4px; box-sizing: border-box; min-width: 48px; min-height: 48px; width: 100%; height: 100%; margin: 0; padding: 10px 4px; border: 0; background: transparent; color: var(--crm-muted); font: inherit; font-size: 12px; font-weight: 400; line-height: calc(4 / 3); letter-spacing: 0; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background-color var(--crm-t-color) var(--crm-snap), color var(--crm-t-color) var(--crm-snap); } .crm-nav-movil-item::before { content: ""; position: absolute; inset: 0 12px auto; height: 2px; background: var(--crm-acento); transform: scaleX(0); transition: transform var(--crm-t-gesto) var(--crm-snap); } .crm-nav-movil-item:focus-visible { outline-offset: -2px; } @media (hover: hover) { .crm-nav-movil-item:hover { background: var(--crm-panel-2); color: var(--crm-text); transition-duration: 0ms; } } .crm-nav-movil-item:active { background: var(--crm-panel-2); } .crm-nav-movil-item[aria-current=page] { background: var(--crm-panel-3); color: var(--crm-text); font-weight: 500; } .crm-nav-movil-item[aria-current=page]::before { transform: scaleX(1); } .crm-nav-movil-icono { position: relative; display: grid; place-items: center; width: 16px; height: 16px; } .crm-nav-movil-icono svg { width: 16px; height: 16px; stroke-width: 1.6; } .crm-nav-movil-etiqueta { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; } .crm-nav-movil-cabeza { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; width: max-content; max-width: calc(100% + 8px); min-height: 16px; } .crm-nav-movil-insignia { flex: none; box-sizing: border-box; min-width: 16px; min-height: 16px; max-width: 100%; padding: 0 4px; background: var(--crm-panel-3); color: var(--crm-text-2); font-family: var(--crm-mono); font-size: 11px; font-weight: 400; font-variant-numeric: tabular-nums; line-height: calc(16 / 11); text-align: center; white-space: normal; overflow-wrap: anywhere; } .crm-nav-movil-insignia[data-tono=acento] { background: var(--crm-acento-suave); color: var(--crm-acento); } .crm-nav-movil-item[aria-current=page] .crm-nav-movil-insignia[data-tono=neutro] { background: var(--crm-panel-2); } .crm-nav-movil-punto { position: absolute; top: -2px; right: -4px; box-sizing: border-box; width: 8px; height: 8px; border: 1px solid var(--crm-panel); border-radius: 50%; background: var(--crm-acento); } .crm-nav-movil[data-compacta] .crm-nav-movil-cabeza { display: contents; } .crm-nav-movil[data-compacta] .crm-nav-movil-insignia { order: 2; } .crm-nav-movil[data-compacta] .crm-nav-movil-item { display: flex; grid-template-rows: none; justify-content: center; align-items: center; padding-block: 8px; gap: 8px; font-size: 13px; line-height: calc(20 / 13); letter-spacing: -0.005em; } @container crm-nav-movil (min-width: 560px) { .crm-nav-movil-lista { --crm-nav-movil-alto: 48px; } .crm-nav-movil-cabeza { display: contents; } .crm-nav-movil-insignia { order: 2; } .crm-nav-movil-item { display: flex; grid-template-rows: none; justify-content: center; align-items: center; padding-block: 8px; gap: 8px; font-size: 13px; line-height: calc(20 / 13); letter-spacing: -0.005em; } } @container crm-nav-movil-destino (max-width: 119px) { .crm-nav-movil .crm-nav-movil-destino .crm-nav-movil-item { display: grid; grid-template-rows: auto auto; align-content: center; justify-items: center; gap: 4px; font-size: 12px; line-height: calc(4 / 3); letter-spacing: 0; } .crm-nav-movil .crm-nav-movil-destino .crm-nav-movil-cabeza { display: inline-flex; } .crm-nav-movil .crm-nav-movil-destino .crm-nav-movil-insignia { order: 0; } .crm-nav-movil[data-compacta] .crm-nav-movil-destino .crm-nav-movil-item { padding-block: 6px; } } @media (prefers-reduced-motion: reduce) { .crm-nav-movil-item, .crm-nav-movil-item::before { transition: none; } } @media (forced-colors: active) { .crm-nav-movil { border-top: 1px solid var(--crm-line); } .crm-nav-movil-item::before, .crm-nav-movil-punto { forced-color-adjust: none; } .crm-nav-movil-insignia { border: 1px solid var(--crm-line); padding-inline: 2px; line-height: calc(14 / 11); } } .crm-progreso-pasos { display: grid; min-width: 0; container-type: inline-size; container-name: crm-progreso-pasos; font-family: var(--crm-sans); } .crm-progreso-pasos-fila { display: grid; grid-auto-flow: column; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 8px; height: 48px; } .crm-progreso-pasos-fila:has(.crm-progreso-pasos-atras) { grid-template-columns: auto minmax(0, 1fr); } .crm-progreso-pasos-fila:has(.crm-progreso-pasos-siguiente) { grid-template-columns: minmax(0, 1fr) auto; } .crm-progreso-pasos-fila:has(.crm-progreso-pasos-atras):has(.crm-progreso-pasos-siguiente) { grid-template-columns: auto minmax(0, 1fr) auto; } .crm-progreso-pasos-texto { display: grid; min-width: 0; margin: 0; } .crm-progreso-pasos-rotulo { overflow: hidden; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; font-weight: 400; line-height: 16px; letter-spacing: 0.06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .crm-progreso-pasos-cifra { font-variant-numeric: tabular-nums; } .crm-progreso-pasos-nombre { overflow: hidden; color: var(--crm-text); font-size: 15px; font-weight: 500; line-height: 22px; letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; } .crm-progreso-pasos[data-terminado] .crm-progreso-pasos-rotulo { color: var(--crm-acento); } .crm-progreso-pasos-barra { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 2px; height: 2px; margin-top: 8px; } .crm-progreso-pasos-tramo, .crm-progreso-pasos[data-forma=continua] .crm-progreso-pasos-barra { position: relative; overflow: hidden; background: var(--crm-line-2); } .crm-progreso-pasos-tramo::after, .crm-progreso-pasos-relleno { content: ""; position: absolute; inset: 0; background: var(--crm-acento); transform-origin: left; transition: transform var(--crm-t-gesto) var(--crm-curva); } .crm-progreso-pasos-tramo::after { transform: scaleX(0); } .crm-progreso-pasos-tramo:is([data-estado=hecho], [data-estado=actual])::after { transform: scaleX(1); } .crm-progreso-pasos-nombres { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 2px; margin: 6px 0 0; padding: 0; list-style: none; } .crm-progreso-pasos-nombres li { overflow: hidden; color: var(--crm-dim); font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; } .crm-progreso-pasos-nombres li[data-estado=hecho] { color: var(--crm-muted); } .crm-progreso-pasos-nombres li[data-estado=actual] { color: var(--crm-text); font-weight: 500; } @container crm-progreso-pasos (max-width: 399px) { .crm-progreso-pasos-nombres li:not([data-estado=actual]) { visibility: hidden; } .crm-progreso-pasos-nombres li[data-estado=actual] { overflow: visible; } } @media (pointer: coarse) { .crm-progreso-pasos .crm-progreso-pasos-atras::after, .crm-progreso-pasos .crm-progreso-pasos-siguiente::after { content: ""; position: absolute; inset: -3px; } } @media (prefers-reduced-motion: reduce) { .crm-progreso-pasos-tramo::after, .crm-progreso-pasos-relleno { transition: none; } } @media (forced-colors: active) { .crm-progreso-pasos-tramo, .crm-progreso-pasos-tramo::after, .crm-progreso-pasos-relleno, .crm-progreso-pasos[data-forma=continua] .crm-progreso-pasos-barra { forced-color-adjust: none; } } .crm-fh-capa { display: flex; flex-direction: column; gap: 0; width: 496px; max-height: var(--radix-popover-content-available-height); padding: 0; overflow: hidden; container-type: inline-size; } .crm-fh-cabecera { display: flex; flex: none; align-items: flex-start; justify-content: space-between; gap: 8px; min-height: 52px; padding: 8px 8px 7px 12px; border-bottom: 1px solid var(--crm-line); } .crm-fh-cabecera-texto { display: grid; min-width: 0; } .crm-fh-titulo { margin: 0; color: var(--crm-text); font-size: 13px; font-weight: 500; line-height: 20px; letter-spacing: -0.005em; } .crm-fh-resumen { margin: 0; color: var(--crm-text-2); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .crm-fh-resumen[data-vacio] { color: var(--crm-muted); } .crm-fh-cuerpo { display: grid; flex: 1 1 auto; grid-template-columns: 248px minmax(0, 1fr); min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: var(--crm-line-2) transparent; scrollbar-width: thin; } .crm-fh-dia { display: grid; align-content: start; justify-content: center; padding: 12px; } .crm-fh-lado { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--crm-line); } .crm-fh-atajos { display: grid; gap: 0; margin: 0; padding: 8px; list-style: none; border-bottom: 1px solid var(--crm-line); } .crm-fh-atajo { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 28px; margin: 0; padding: 4px 4px 4px 8px; border: 0; border-radius: 0; background: transparent; color: var(--crm-text-2); font-family: var(--crm-sans); font-size: 13px; line-height: 20px; text-align: left; cursor: pointer; transition: background-color var(--crm-t-salida) linear; } .crm-fh-atajo-etiqueta { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .crm-fh-atajo-detalle { flex: 0 1 auto; min-width: 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; } .crm-fh-atajo .crm-tecla { flex: none; } @media (hover: hover) { .crm-fh-atajo:hover:not(:disabled) { background: var(--crm-panel-3); color: var(--crm-text); transition-duration: 0ms; } } .crm-fh-atajo[aria-pressed=true] { background: var(--crm-panel-3); box-shadow: inset 2px 0 0 var(--crm-acento); color: var(--crm-text); font-weight: 500; } .crm-fh-atajo:disabled { color: var(--crm-dim); cursor: not-allowed; } .crm-fh-atajo:disabled .crm-fh-atajo-detalle { color: var(--crm-dim); } .crm-fh-hora { display: grid; align-content: start; gap: 8px; padding: 12px; } .crm-fh-rotulo { margin: 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-fh-rapidas { display: grid; grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); gap: 4px; } .crm-fh-rapida { position: relative; display: grid; place-items: center; height: 32px; margin: 0; padding: 0 8px; border: 1px solid var(--crm-line-2); border-radius: 0; background: transparent; color: var(--crm-text-2); font-family: var(--crm-sans); font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--crm-t-salida) linear, border-color var(--crm-t-salida) linear; } @media (hover: hover) { .crm-fh-rapida:hover { border-color: var(--crm-muted); background: var(--crm-panel-3); color: var(--crm-text); transition-duration: 0ms; } } .crm-fh-rapida[aria-pressed=true] { border-color: var(--crm-control); background: var(--crm-panel-3); color: var(--crm-text); font-weight: 500; } .crm-fh-rapida[aria-pressed=true]::after { content: ""; position: absolute; right: -1px; bottom: -1px; left: -1px; height: 2px; background: var(--crm-acento); } .crm-fh-rapida:active { transform: translateY(0.5px); } .crm-fh-atajo:focus-visible, .crm-fh-rapida:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: -1px; } .crm-fh-hm { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 4px; } .crm-fh-hm .crm-selector-valor { font-variant-numeric: tabular-nums; } .crm-fh-dos-puntos { color: var(--crm-muted); font-size: 13px; line-height: 20px; } .crm-fh-error { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--crm-error); font-size: 12px; line-height: 16px; } .crm-fh-error svg { flex: none; width: 14px; height: 14px; margin-top: 1px; } .crm-fh-pie { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; min-height: 48px; padding: 7px 12px 8px; border-top: 1px solid var(--crm-line); } .crm-fh-quitar { margin-right: auto; } @container (max-width: 493px) { .crm-fh-cuerpo { grid-template-columns: minmax(0, 1fr); } .crm-fh-lado { border-top: 1px solid var(--crm-line); border-left: 0; } .crm-fh-atajos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; } .crm-fh-atajo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; gap: 0 8px; min-height: 40px; padding: 2px 4px 2px 8px; } .crm-fh-atajo-detalle { grid-row: 2; text-align: left; } .crm-fh-atajo .crm-tecla { grid-row: 1 / span 2; grid-column: 2; } } @media (pointer: coarse) { .crm-fh-atajo { min-height: 40px; } .crm-fh-rapida { height: 40px; } .crm-fh-capa .crm-calendario, .crm-fh-capa .crm-calendario-rejilla { width: 280px; } .crm-fh-capa .crm-calendario-cabecera { height: 40px; } .crm-fh-capa .crm-calendario-paso { width: 40px; height: 40px; } .crm-fh-capa .crm-calendario-rejilla td, .crm-fh-capa .crm-calendario-dia { width: 40px; height: 40px; } } @media (prefers-reduced-motion: reduce) { .crm-fh-rapida:active { transform: none; } } @media (forced-colors: active) { .crm-fh-atajo[aria-pressed=true], .crm-fh-rapida[aria-pressed=true] { outline: 2px solid Highlight; outline-offset: -2px; } .crm-fh-rapida[aria-pressed=true]::after { background: Highlight; } } .crm-tabla, .crm-dato-menu, .crm-grupo-kpi, .crm-kpi, .crm-ficha, .crm-lista-desc, .crm-linea, .crm-lista, .crm-kanban, .crm-agenda, .crm-dato-vacio, .crm-dato-vacio-marco { box-sizing: border-box; color: var(--crm-text); font-family: var(--crm-sans); -webkit-font-smoothing: antialiased; } :is(.crm-tabla, .crm-dato-menu, .crm-grupo-kpi, .crm-kpi, .crm-ficha, .crm-lista-desc, .crm-linea, .crm-lista, .crm-kanban, .crm-agenda, .crm-dato-vacio, .crm-dato-vacio-marco) *, :is(.crm-tabla, .crm-dato-menu, .crm-grupo-kpi, .crm-kpi, .crm-ficha, .crm-lista-desc, .crm-linea, .crm-lista, .crm-kanban, .crm-agenda, .crm-dato-vacio, .crm-dato-vacio-marco) ::before, :is(.crm-tabla, .crm-dato-menu, .crm-grupo-kpi, .crm-kpi, .crm-ficha, .crm-lista-desc, .crm-linea, .crm-lista, .crm-kanban, .crm-agenda, .crm-dato-vacio, .crm-dato-vacio-marco) ::after { box-sizing: border-box; } :is(.crm-tabla, .crm-dato-menu, .crm-ficha, .crm-linea, .crm-lista, .crm-kanban, .crm-agenda, .crm-dato-vacio, .crm-dato-vacio-marco) svg { flex: none; } .crm-tabla-hueco { flex: 1 1 0; min-width: 0; } .crm-dato-accion .crm-dato-atajo { display: inline-flex; gap: 2px; margin-right: -4px; } .crm-dato-accion .crm-tecla { color: var(--crm-muted); } .crm-dato-accion:is([data-variante=principal], [data-variante=acento]) .crm-tecla { border-color: color-mix(in srgb, currentColor 28%, transparent); background: transparent; color: inherit; } .crm-dato-casilla { display: inline-grid; place-content: center; flex: none; width: 14px; height: 14px; margin: 0; border: 1px solid var(--crm-control); border-radius: 0; background: transparent; cursor: pointer; appearance: none; transition: background-color var(--crm-t-color) linear, border-color var(--crm-t-color) linear, opacity var(--crm-t-salida) linear; } .crm-dato-casilla::before { content: ""; width: 8px; height: 4px; border-bottom: 2px solid var(--crm-sobre-acento); border-left: 2px solid var(--crm-sobre-acento); transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform var(--crm-t-pulsar) var(--crm-snap); } .crm-dato-casilla:checked, .crm-dato-casilla:indeterminate { border-color: var(--crm-acento); background: var(--crm-acento); } .crm-dato-casilla:checked::before { transform: translateY(-1px) rotate(-45deg) scale(1); } .crm-dato-casilla:indeterminate::before { width: 8px; height: 0; border-left: 0; transform: none; } .crm-dato-casilla:hover:not(:disabled, :checked, :indeterminate) { border-color: var(--crm-text-2); } .crm-dato-casilla:disabled { border-color: var(--crm-linea-apagada); background: transparent; cursor: not-allowed; } .crm-dato-casilla:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: -1px; } .crm-dato-casilla-area { position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer; } .crm-dato-menu-opcion { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; min-width: 0; } .crm-dato-menu-cuenta { flex: none; color: var(--crm-dim); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; } .crm-dato-vacio { border-top: 1px solid var(--crm-line); border-bottom: 1px solid var(--crm-line); } .crm-dato-vacio-marco { display: grid; justify-items: center; gap: 8px; padding: 48px 24px; text-align: center; } .crm-dato-vacio-marco[data-tamano=compacto] { padding: 32px 16px; } .crm-dato-c { margin-bottom: 8px; color: var(--crm-dim); } .crm-dato-vacio-marco[data-tamano=compacto] .crm-dato-c { margin-bottom: 4px; } .crm-dato-vacio-icono { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 4px; border: 1px solid var(--crm-line-2); color: var(--crm-muted); } .crm-dato-vacio-marco[data-tamano=compacto] .crm-dato-vacio-icono { width: 32px; height: 32px; } .crm-dato-vacio-icono svg { width: 20px; height: 20px; stroke-width: 1.6; } .crm-dato-vacio-titulo { margin: 0; color: var(--crm-text); font-size: 15px; font-weight: 500; line-height: 22px; letter-spacing: -0.01em; text-wrap: balance; } .crm-dato-vacio-texto { max-width: 52ch; margin: 0; color: var(--crm-muted); font-size: 13px; line-height: 20px; letter-spacing: -0.005em; text-wrap: pretty; } .crm-dato-vacio-accion { display: flex; gap: 8px; margin-top: 8px; } .crm-tabla { container: crm-tabla / inline-size; --crm-tabla-fondo: var(--crm-bg); --crm-tabla-grupo: var(--crm-panel-2); position: relative; display: grid; gap: 12px; min-width: 0; font-size: 13px; line-height: 20px; } .crm-tabla[data-superficie=panel] { --crm-tabla-fondo: var(--crm-panel); --crm-tabla-grupo: var(--crm-panel-2); } @media (max-width: 560px) { .crm-tabla-conmutador[aria-label=Densidad] { display: none; } } .crm-tabla-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; min-height: 28px; } .crm-tabla-busqueda { display: flex; flex: 0 1 280px; align-items: center; gap: 6px; min-width: 160px; height: 28px; padding: 0 4px 0 10px; border: 1px solid var(--crm-line-2); background: transparent; color: var(--crm-muted); cursor: text; transition: border-color var(--crm-t-color) linear; } .crm-tabla-busqueda:hover { border-color: var(--crm-control); } .crm-tabla-busqueda:focus-within { border-color: var(--crm-acento); } .crm-tabla-busqueda > svg { width: 14px; height: 14px; stroke-width: 1.5; } .crm-tabla-busqueda input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--crm-text); font: inherit; font-size: 13px; line-height: 20px; letter-spacing: -0.005em; caret-color: var(--crm-acento); } .crm-tabla-busqueda input::placeholder { color: var(--crm-dim); } .crm-tabla-busqueda input::-webkit-search-cancel-button { appearance: none; } .crm-tabla-busqueda input:focus-visible { outline: 0; } .crm-tabla-busqueda-atajo { transition: opacity var(--crm-t-salida) linear; } .crm-tabla-busqueda:focus-within .crm-tabla-busqueda-atajo { opacity: 0; } .crm-chip-filtro { display: inline-flex; align-items: stretch; height: 24px; border: 1px solid var(--crm-line-2); background: var(--crm-panel); font-size: 12px; line-height: 16px; white-space: nowrap; } .crm-chip-filtro-campo, .crm-chip-filtro-boton, .crm-chip-filtro-quitar, .crm-tabla-anadir, .crm-tabla-limpiar { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0 8px; border: 0; background: transparent; color: var(--crm-muted); font: inherit; font-size: 12px; line-height: 16px; white-space: nowrap; } .crm-chip-filtro-campo { border-right: 1px solid var(--crm-line); color: var(--crm-text-2); } .crm-chip-filtro-boton, .crm-chip-filtro-quitar, .crm-tabla-anadir, .crm-tabla-limpiar { cursor: pointer; transition: background-color var(--crm-t-salida) linear, color var(--crm-t-salida) linear; } .crm-chip-filtro-valor { color: var(--crm-text); } .crm-chip-filtro-quitar { justify-content: center; width: 24px; padding: 0; border-left: 1px solid var(--crm-line); } .crm-chip-filtro-quitar svg, .crm-tabla-anadir svg { width: 14px; height: 14px; stroke-width: 1.5; } .crm-tabla-anadir { height: 24px; border: 1px dashed var(--crm-line-2); } .crm-tabla-limpiar { height: 24px; } :is(.crm-chip-filtro-boton, .crm-chip-filtro-quitar, .crm-tabla-anadir, .crm-tabla-limpiar):hover, :is(.crm-chip-filtro-boton, .crm-tabla-anadir)[data-state=open] { background: var(--crm-panel-2); color: var(--crm-text); transition-duration: 0ms; } .crm-tabla-anadir:hover, .crm-tabla-anadir[data-state=open] { border-color: var(--crm-control); } :is(.crm-chip-filtro-boton, .crm-chip-filtro-quitar):focus-visible { outline-offset: -1px; } .crm-tabla-cuenta { color: var(--crm-muted); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; } .crm-tabla-acciones { display: flex; flex-wrap: wrap; gap: 8px; } .crm-tabla-caja { --crm-toque-max: var(--crm-tabla-alto, 36px); position: relative; isolation: isolate; min-width: 0; overflow: auto; overscroll-behavior-x: contain; scrollbar-color: var(--crm-line-2) transparent; scrollbar-width: thin; } .crm-tabla-caja[data-alto=vista] { max-height: max(320px, calc(100dvh - var(--crm-marco-arriba, 44px) - var(--crm-marco-abajo, 32px) - 2 * var(--crm-es-pad, 24px))); } .crm-tabla-caja { --crm-tabla-hacia: right; } .crm-tabla-caja:dir(rtl) { --crm-tabla-hacia: left; } .crm-tabla-caja[data-desborde=fin] { --crm-tabla-mascara: linear-gradient( to var(--crm-tabla-hacia), var(--crm-text) calc(100% - 24px), transparent); } .crm-tabla-caja[data-desborde=inicio] { --crm-tabla-mascara: linear-gradient( to var(--crm-tabla-hacia), transparent, var(--crm-text) 24px); } .crm-tabla-caja[data-desborde=ambos] { --crm-tabla-mascara: linear-gradient( to var(--crm-tabla-hacia), transparent, var(--crm-text) 24px, var(--crm-text) calc(100% - 24px), transparent); } .crm-tabla-caja[data-fijas][data-desborde=inicio] { --crm-tabla-mascara: linear-gradient( to var(--crm-tabla-hacia), var(--crm-text) var(--crm-tabla-fijas, 0px), transparent var(--crm-tabla-fijas, 0px), var(--crm-text) calc(var(--crm-tabla-fijas, 0px) + var(--crm-tabla-indicio, 24px))); } .crm-tabla-caja[data-fijas][data-desborde=ambos] { --crm-tabla-mascara: linear-gradient( to var(--crm-tabla-hacia), var(--crm-text) var(--crm-tabla-fijas, 0px), transparent var(--crm-tabla-fijas, 0px), var(--crm-text) calc(var(--crm-tabla-fijas, 0px) + var(--crm-tabla-indicio, 24px)), var(--crm-text) calc(100% - 24px), transparent); } .crm-tabla-caja[data-desborde] { mask-image: var(--crm-tabla-mascara); } .crm-tabla-caja[data-fijas] { scroll-padding-inline-start: calc(var(--crm-tabla-fijas, 0px) + 24px); } .crm-tabla-caja[data-desborde-v=fin] { mask-image: linear-gradient( to bottom, var(--crm-text) calc(100% - 24px), transparent); } .crm-tabla-caja[data-desborde-v=fin][data-desborde] { -webkit-mask-composite: source-in; mask-image: var(--crm-tabla-mascara), linear-gradient( to bottom, var(--crm-text) calc(100% - 24px), transparent); mask-composite: intersect; } .crm-tabla-caja[data-ocupada]::before { content: ""; position: absolute; z-index: 4; top: 31px; right: 0; left: 0; height: 1px; background: linear-gradient( 90deg, transparent, var(--crm-acento) 50%, transparent) -40% 0 / 40% 100% no-repeat; animation: crm-dato-filo var(--crm-t-filo) var(--crm-curva) infinite; } .crm-tabla-tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; line-height: 20px; letter-spacing: -0.005em; } .crm-tabla-tabla thead th { position: sticky; z-index: 2; top: 0; height: 32px; padding: 0 12px; border-bottom: 1px solid var(--crm-line-2); background: var(--crm-tabla-fondo); color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; font-weight: 400; line-height: 16px; letter-spacing: 0.06em; text-align: left; text-transform: uppercase; white-space: nowrap; } .crm-tabla-tabla thead th[data-fija] { z-index: 3; } .crm-tabla-grupos > :is(th, td) { position: sticky; z-index: 2; top: 0; height: 32px; padding: 0 12px; background: var(--crm-tabla-fondo); } .crm-tabla-grupos > [data-fija] { z-index: 3; } .crm-tabla-tabla thead .crm-tabla-grupos > td { border-bottom: 1px solid var(--crm-line); } .crm-tabla-tabla thead .crm-tabla-grupos > th { border-bottom: 1px solid var(--crm-line); box-shadow: inset 1px 0 0 var(--crm-line); text-align: center; } .crm-tabla-tabla thead[data-grupos] tr:not(.crm-tabla-grupos) th { top: 32px; } .crm-tabla-tabla [data-alinear=fin] { text-align: right; } .crm-tabla-tabla [data-alinear=centro] { text-align: center; } .crm-tabla-orden { display: inline-flex; align-items: center; gap: 4px; height: 24px; margin: 0 -4px; padding: 0 4px; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; transition: color var(--crm-t-salida) linear; } [data-alinear=fin] > .crm-tabla-orden { flex-direction: row-reverse; } .crm-tabla-orden svg { width: 12px; height: 12px; stroke-width: 1.5; transition: opacity var(--crm-t-salida) linear; } .crm-tabla-orden svg[data-fantasma] { opacity: 0; } .crm-tabla-orden:hover, .crm-tabla-orden[data-activo] { color: var(--crm-text); transition-duration: 0ms; } .crm-tabla-orden[data-activo] svg { color: var(--crm-acento); } .crm-tabla-orden:hover svg[data-fantasma], .crm-tabla-orden:focus-visible svg[data-fantasma] { opacity: 0.6; transition-duration: 0ms; } .crm-tabla-orden:focus-visible { outline-offset: -1px; } .crm-tabla-th { display: inline-block; } .crm-tabla-fila { --crm-tabla-fila: var(--crm-tabla-fondo); } .crm-tabla-fila > :is(td, th) { font-weight: 400; text-align: left; height: var(--crm-tabla-alto, 36px); padding: 0 12px; border-bottom: 1px solid var(--crm-line); background: var(--crm-tabla-fila); color: var(--crm-text-2); vertical-align: middle; white-space: nowrap; transition: background-color var(--crm-t-salida) linear; } .crm-tabla-fila:has(> :is(td, th) .crm-celda-doble-detalle, > :is(td, th)[data-crm-dos-lineas]) > :is(td, th) { padding-top: max(0px, calc((var(--crm-tabla-alto, 36px) - 36px) / 2)); vertical-align: top; } .crm-tabla-fila:has(> :is(td, th) .crm-celda-doble-detalle, > :is(td, th)[data-crm-dos-lineas]) > :is(td, th) { line-height: 18px; } .crm-tabla-fila:has(> :is(td, th) .crm-celda-doble-detalle, > :is(td, th)[data-crm-dos-lineas]) .crm-celda-doble { vertical-align: top; } .crm-tabla-fila:has(> :is(td, th) .crm-celda-doble-detalle, > :is(td, th)[data-crm-dos-lineas]) > :is(td, th).crm-tabla-casilla { line-height: 18px; } .crm-tabla-fila:has(> :is(td, th) .crm-celda-doble-detalle, > :is(td, th)[data-crm-dos-lineas]) .crm-tabla-casilla .crm-dato-casilla { vertical-align: middle; } .crm-tabla-fila > :is(td, th):first-child:not(.crm-tabla-casilla), .crm-tabla-fila > .crm-tabla-casilla + :is(td, th) { color: var(--crm-text); } .crm-tabla-fila > :is(td, th)[data-cifra] { color: var(--crm-text); } .crm-tabla-tabla td[data-cifra] { unicode-bidi: plaintext; } .crm-tabla-fila[data-abre] { cursor: pointer; } .crm-tabla-fila[data-tono=atenuada] > :is(td, th), .crm-tabla-fila[data-tono=atenuada] > :is(td, th):first-child:not(.crm-tabla-casilla), .crm-tabla-fila[data-tono=atenuada] > .crm-tabla-casilla + td, .crm-tabla-fila[data-tono=atenuada] > :is(td, th)[data-cifra] { color: var(--crm-muted); } .crm-tabla-fila[data-tono=aviso]:not([data-elegida], [data-activa]) > :is(td, th):first-child { box-shadow: inset 2px 0 0 var(--crm-aviso); } .crm-tabla-fila[data-tono=error]:not([data-elegida], [data-activa]) > :is(td, th):first-child { box-shadow: inset 2px 0 0 var(--crm-error); } .crm-tabla-fila:not([data-esqueleto]):hover { --crm-tabla-fila: var(--crm-panel-2); } .crm-tabla-fila:not([data-esqueleto]):hover > :is(td, th) { transition-duration: 0ms; } .crm-tabla-fila[data-elegida], .crm-tabla-fila[data-activa], .crm-tabla-fila[data-elegida]:hover, .crm-tabla-fila[data-activa]:hover { --crm-tabla-fila: var(--crm-panel-3); } .crm-tabla-fila:is([data-elegida], [data-activa]) > :is(td, th):first-child { box-shadow: inset 2px 0 0 var(--crm-acento); } .crm-tabla-fila:active:not([data-esqueleto]) { --crm-tabla-fila: var(--crm-panel-3); } .crm-tabla-fila:focus-visible { outline: none; } .crm-tabla-fila:focus-visible > :is(td, th) { box-shadow: inset 0 var(--crm-foco-ancho) 0 var(--crm-acento), inset 0 calc(var(--crm-foco-ancho) * -1) 0 var(--crm-acento); } .crm-tabla-fila:focus-visible > :is(td, th):first-child { box-shadow: inset 0 var(--crm-foco-ancho) 0 var(--crm-acento), inset 0 calc(var(--crm-foco-ancho) * -1) 0 var(--crm-acento), inset var(--crm-foco-ancho) 0 0 var(--crm-acento); } .crm-tabla-fila:focus-visible > :is(td, th):last-child { box-shadow: inset 0 var(--crm-foco-ancho) 0 var(--crm-acento), inset 0 calc(var(--crm-foco-ancho) * -1) 0 var(--crm-acento), inset calc(var(--crm-foco-ancho) * -1) 0 0 var(--crm-acento); } .crm-tabla-fila:focus-visible > [data-ultima-fija]:not(:first-child, :last-child) { box-shadow: inset 0 var(--crm-foco-ancho) 0 var(--crm-acento), inset 0 calc(var(--crm-foco-ancho) * -1) 0 var(--crm-acento), inset -1px 0 0 var(--crm-line-2); } .crm-tabla-fila:focus-visible:is([data-elegida], [data-activa]) > :is(td, th):first-child { box-shadow: inset 0 var(--crm-foco-ancho) 0 var(--crm-acento), inset 0 calc(var(--crm-foco-ancho) * -1) 0 var(--crm-acento), inset 2px 0 0 var(--crm-acento); } .crm-tabla-tabla [data-fija] { position: sticky; z-index: 1; } .crm-tabla-tabla td[data-fija] .crm-celda-doble { max-width: calc(var(--crm-col-ancho) - 24px); } .crm-tabla-tabla [data-ultima-fija] { box-shadow: inset -1px 0 0 var(--crm-line-2); } .crm-tabla-tabla:dir(rtl) [data-ultima-fija] { box-shadow: inset 1px 0 0 var(--crm-line-2); } .crm-tabla-fila:is([data-elegida], [data-activa]) > :is(td, th):first-child[data-ultima-fija] { box-shadow: inset 2px 0 0 var(--crm-acento), inset -1px 0 0 var(--crm-line-2); } .crm-tabla-tabla .crm-tabla-casilla { position: relative; width: 32px; min-width: 32px; padding: 0; } .crm-tabla-tabla .crm-tabla-casilla + :is(td, th) { padding-left: 4px; } .crm-tabla-casilla .crm-dato-casilla { opacity: 0; } .crm-tabla-fila:is(:hover, :focus-visible, :focus-within, [data-elegida]) .crm-dato-casilla, .crm-tabla[data-con-seleccion] .crm-tabla-casilla .crm-dato-casilla, .crm-tabla-tabla thead tr:hover .crm-dato-casilla, .crm-tabla-casilla .crm-dato-casilla:is(:focus-visible, :checked, :indeterminate) { opacity: 1; transition-duration: 0ms; } @media (hover: none) { .crm-tabla-casilla .crm-dato-casilla { opacity: 1; } } .crm-tabla-grupo > th { position: sticky; z-index: 2; top: 32px; height: 32px; padding: 0 12px 0 8px; border-bottom: 1px solid var(--crm-line); background: var(--crm-tabla-grupo); color: var(--crm-text); font-family: var(--crm-sans); font-size: 13px; font-weight: 500; line-height: 20px; letter-spacing: -0.005em; text-align: left; text-transform: none; white-space: nowrap; transition: background-color var(--crm-t-salida) linear; } .crm-tabla-cuerpo-grupo + .crm-tabla-cuerpo-grupo .crm-tabla-grupo > th { border-top: 1px solid var(--crm-line); } .crm-tabla-grupo { cursor: pointer; } .crm-tabla-grupo:hover > th { background: var(--crm-panel-3); transition-duration: 0ms; } .crm-tabla-grupo:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: -1px; } .crm-tabla-grupo-cabeza { display: inline-flex; align-items: center; gap: 8px; } .crm-tabla-grupo-flecha { width: 14px; height: 14px; color: var(--crm-muted); stroke-width: 1.5; transform: rotate(90deg); transition: transform var(--crm-t-color) var(--crm-snap); } .crm-tabla-grupo[data-plegado] .crm-tabla-grupo-flecha { transform: none; } .crm-tabla-grupo-titulo { display: inline-flex; align-items: center; } .crm-tabla-grupo-titulo .crm-celda-estado[data-tono] { color: var(--crm-text); font-size: 13px; font-weight: 500; line-height: 20px; } .crm-tabla-grupo-cuenta { color: var(--crm-muted); font-size: 12px; font-weight: 400; line-height: 16px; font-variant-numeric: tabular-nums; } .crm-tabla-grupo-elegidas { color: var(--crm-acento); font-size: 12px; font-weight: 400; line-height: 16px; font-variant-numeric: tabular-nums; } .crm-tabla-hueco-carga { max-width: 100%; vertical-align: middle; } [data-alinear=fin] > .crm-tabla-hueco-carga { margin-left: auto; } .crm-tabla-sin-resultados { padding: 0; border-bottom: 1px solid var(--crm-line); white-space: normal; } .crm-tabla-vacio { border-top: 1px solid var(--crm-line); border-bottom: 1px solid var(--crm-line); } .crm-tabla-error { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 12px; padding: 12px 16px; border: 1px solid var(--crm-error-linea); background: var(--crm-error-suave); } .crm-tabla-error > svg { width: 16px; height: 16px; margin-top: 2px; color: var(--crm-error); stroke-width: 1.6; } .crm-tabla-error-titulo { margin: 0; color: var(--crm-text); font-size: 13px; font-weight: 500; line-height: 20px; } .crm-tabla-error-texto { margin: 0; color: var(--crm-text-2); font-size: 13px; line-height: 20px; } .crm-tabla-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 28px; } .crm-tabla-pagina { min-width: 48px; color: var(--crm-text-2); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; text-align: center; } .crm-tabla-lote { position: sticky; z-index: 5; bottom: 16px; display: flex; justify-self: center; align-items: center; gap: 8px; height: 40px; max-width: calc(100% - 16px); padding: 0 6px 0 12px; overflow-x: auto; border: 1px solid var(--crm-line-2); background: var(--crm-panel-2); box-shadow: var(--crm-sombra-capa); scrollbar-width: none; transform-origin: 50% 100%; animation: crm-dato-entra var(--crm-t-entrada) var(--crm-snap); } .crm-tabla-lote[data-saliendo] { opacity: 0; transition: opacity var(--crm-t-salida) linear; } .crm-tabla-lote-cuenta { flex: none; color: var(--crm-text-2); font-size: 13px; line-height: 20px; white-space: nowrap; } .crm-tabla-lote-cifra { color: var(--crm-text); font-weight: 500; font-variant-numeric: tabular-nums; } .crm-tabla-lote-sep { flex: none; width: 1px; height: 16px; background: var(--crm-line-2); } .crm-tabla-lote-acciones { display: flex; flex: none; gap: 4px; } .crm-tabla-lote-cerrar { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 28px; padding: 0 6px; border: 0; background: transparent; color: var(--crm-muted); cursor: pointer; transition: background-color var(--crm-t-salida) linear, color var(--crm-t-salida) linear; } .crm-tabla-lote-cerrar svg { width: 14px; height: 14px; stroke-width: 1.5; } .crm-tabla-lote-cerrar:hover { background: var(--crm-panel-3); color: var(--crm-text); transition-duration: 0ms; } .crm-tabla-lote-cerrar:active { transform: scale(0.96); transition: transform var(--crm-t-pulsar) var(--crm-snap); } .crm-tabla-lote-cerrar:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: -1px; } .crm-celda-estado { display: inline-flex; align-items: center; gap: 6px; color: var(--crm-text-2); font-family: var(--crm-sans); font-size: 12px; line-height: 16px; letter-spacing: 0; white-space: nowrap; } .crm-celda-estado[data-multilinea] { min-width: 0; white-space: normal; overflow-wrap: break-word; } .crm-celda-estado-icono, .crm-celda-estado-icono > svg { display: block; flex: none; width: 16px; height: 16px; } .crm-celda-estado-icono > svg { stroke-width: 1.6; } .crm-celda-estado-punto { position: relative; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--crm-dim); } .crm-celda-estado[data-tono=neutro] { color: var(--crm-muted); } .crm-celda-estado:is([data-tono=hecho], [data-tono=vivo]) .crm-celda-estado-punto { background: var(--crm-acento); } .crm-celda-estado[data-tono=vivo] { color: var(--crm-text); } .crm-celda-estado[data-tono=vivo] .crm-celda-estado-punto { box-shadow: 0 0 0 2px var(--crm-acento-suave); } .crm-celda-estado[data-tono=vivo] .crm-celda-estado-punto::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--crm-acento); animation: crm-dato-latido var(--crm-t-latido) ease-out infinite; } .crm-celda-estado[data-tono=espera] { color: var(--crm-acento); } .crm-celda-estado[data-tono=espera] .crm-celda-estado-punto { background: transparent; box-shadow: inset 0 0 0 1px var(--crm-acento); } .crm-celda-estado[data-tono=aviso] { color: var(--crm-aviso); } .crm-celda-estado[data-tono=aviso] .crm-celda-estado-punto { background: var(--crm-aviso); } .crm-celda-estado[data-tono=error] { color: var(--crm-error); } .crm-celda-estado[data-tono=error] .crm-celda-estado-punto { background: var(--crm-error); } .crm-celda-persona { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; vertical-align: middle; } .crm-celda-persona-marca { flex: none; } .crm-celda-persona-texto { display: grid; min-width: 0; } .crm-celda-persona-nombre { overflow: hidden; color: var(--crm-text); text-overflow: ellipsis; white-space: nowrap; } .crm-celda-persona-detalle { overflow: hidden; color: var(--crm-muted); font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; } .crm-celda-fecha { color: var(--crm-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; cursor: default; } .crm-celda-cifra { font-variant-numeric: tabular-nums; white-space: nowrap; } .crm-celda-cifra-unidad { display: inline-block; color: var(--crm-muted); font-weight: 400; text-align: left; text-transform: none; } .crm-celda-cifra[data-escalon] { font-weight: 500; } .crm-celda-cifra[data-escalon="40"] { font-size: 40px; line-height: 44px; } .crm-celda-cifra[data-escalon="40"] .crm-celda-cifra-unidad { font-size: 24px; } .crm-celda-cifra[data-escalon="28"] { font-size: 28px; line-height: 32px; } .crm-celda-cifra[data-escalon="28"] .crm-celda-cifra-unidad { font-size: 16px; } .crm-celda-cifra[data-escalon="24"] { font-size: 24px; line-height: 28px; } .crm-celda-cifra[data-escalon="24"] .crm-celda-cifra-unidad { font-size: 14px; } .crm-celda-cifra[data-escalon="20"] { font-size: 20px; line-height: 24px; } .crm-celda-cifra[data-escalon="20"] .crm-celda-cifra-unidad { font-size: 12px; } .crm-grupo-kpi { display: grid; grid-template-columns: repeat(var(--crm-kpi-columnas, 4), minmax(0, 1fr)); grid-template-columns: var(--crm-kpi-plantilla, repeat(var(--crm-kpi-columnas, 4), minmax(0, 1fr))); overflow: hidden; border-top: 1px solid var(--crm-line); border-bottom: 1px solid var(--crm-line); } .crm-grupo-kpi > :last-child { grid-column: span var(--crm-kpi-ultima, 1); } .crm-grupo-kpi > .crm-kpi { box-shadow: -1px 0 0 var(--crm-line), 0 -1px 0 var(--crm-line); } .crm-grupo-kpi[data-variante=compacta] > .crm-kpi { padding: 16px; } .crm-kpi { display: grid; align-content: start; min-width: 0; padding: 20px; container-type: inline-size; } .crm-kpi-rotulo { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-kpi-rotulo > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-kpi-vivo { position: relative; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--crm-acento); box-shadow: 0 0 0 2px var(--crm-acento-suave); } .crm-kpi-vivo::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--crm-acento); animation: crm-dato-latido var(--crm-t-latido) ease-out infinite; } .crm-kpi-cuerpo { display: flex; align-items: baseline; gap: 12px; min-width: 0; margin-top: 6px; } .crm-kpi-valor { flex: 0 1 auto; min-width: 0; margin: 0; color: var(--crm-text); font-size: 28px; font-variant-numeric: tabular-nums; font-weight: 500; line-height: 32px; letter-spacing: -0.035em; white-space: nowrap; } .crm-kpi[data-desborda] .crm-kpi-valor { white-space: normal; overflow-wrap: anywhere; } .crm-kpi-compacta, .crm-kpi[data-compacta] .crm-kpi-exacta { display: none; } .crm-kpi[data-compacta] .crm-kpi-compacta { display: inline; } .crm-kpi-unidad { margin-left: 4px; line-height: 1; color: var(--crm-muted); font-size: 16px; font-weight: 400; letter-spacing: 0; } .crm-kpi[data-escalon="40"] .crm-kpi-valor { font-size: 40px; line-height: 44px; } .crm-kpi[data-escalon="40"] .crm-kpi-unidad { font-size: 24px; } .crm-kpi[data-escalon="28"] .crm-kpi-valor { font-size: 28px; line-height: 32px; } .crm-kpi[data-escalon="28"] .crm-kpi-unidad { font-size: 16px; } .crm-kpi[data-escalon="24"] .crm-kpi-valor { font-size: 24px; line-height: 28px; } .crm-kpi[data-escalon="24"] .crm-kpi-unidad { font-size: 14px; } .crm-kpi[data-escalon="20"] .crm-kpi-valor { font-size: 20px; line-height: 24px; } .crm-kpi[data-escalon="20"] .crm-kpi-unidad { font-size: 12px; } .crm-kpi-tendencia { flex: 0 1 96px; min-width: 48px; height: 24px; margin-left: auto; color: var(--crm-muted); } .crm-kpi[data-tamano=destacada] .crm-kpi-tendencia { flex-basis: 128px; height: 32px; } .crm-kpi[data-sin-tendencia] .crm-kpi-tendencia { display: none; } @container (max-width: 219px) { .crm-kpi-tendencia { display: none; } } .crm-kpi-tendencia > svg { display: block; width: 100%; height: 100%; overflow: visible; } .crm-kpi-variacion { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 8px 0 0; color: var(--crm-muted); font-size: 12px; font-variant-numeric: tabular-nums; line-height: 16px; } .crm-kpi-variacion svg { width: 12px; height: 12px; stroke-width: 1.5; } .crm-kpi-variacion[data-sentido=bueno] :is(svg, .crm-kpi-variacion-valor) { color: var(--crm-acento); } .crm-kpi-variacion[data-sentido=fallo] :is(svg, .crm-kpi-variacion-valor) { color: var(--crm-error); } .crm-kpi-variacion-valor { color: var(--crm-text-2); font-weight: 500; } .crm-kpi-referencia { margin-left: 2px; color: var(--crm-dim); } .crm-kpi-detalle > * { display: inline; } .crm-kpi-detalle { margin: 8px 0 0; overflow: hidden; color: var(--crm-muted); font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; } .crm-kpi-acciones { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 8px; font-size: 12px; line-height: 16px; } .crm-kpi-detalle + .crm-kpi-acciones { margin-top: 4px; } .crm-kpi-hueco { display: block; margin-top: 6px; } .crm-ficha { display: grid; min-width: 0; font-size: 13px; line-height: 20px; container-type: inline-size; } .crm-ficha-cabecera { display: flex; align-items: center; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--crm-line); } .crm-ficha-identidad { display: grid; flex: none; place-items: center; width: 24px; height: 24px; overflow: hidden; border: 1px solid var(--crm-line-2); background: var(--crm-panel-2); color: var(--crm-text-2); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; letter-spacing: 0; } .crm-ficha-identidad img { width: 100%; height: 100%; object-fit: cover; } .crm-ficha-identidad svg { width: 14px; height: 14px; color: var(--crm-muted); stroke-width: 1.5; } .crm-ficha-nombre { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; } .crm-ficha-titulo { flex: 0 1 auto; min-width: 0; margin: 0; overflow: hidden; color: var(--crm-text); font-size: 15px; font-weight: 500; line-height: 22px; letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; } .crm-ficha-meta { display: flex; flex: 0 100 auto; align-items: center; gap: 12px; min-width: 0; } .crm-ficha-detalle { overflow: hidden; color: var(--crm-muted); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; } .crm-ficha-acciones { display: flex; flex: none; gap: 8px; margin-left: auto; } .crm-ficha-seccion { padding-top: 24px; } .crm-ficha-seccion-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; } .crm-ficha-seccion-titulo { margin: 0; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; font-weight: 400; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-ficha-seccion-acciones { display: flex; gap: 8px; } @container (max-width: 560px) { .crm-ficha-cabecera { flex-wrap: wrap; padding: 12px 0; } .crm-ficha-nombre { flex: 1 1 calc(100% - 40px); flex-wrap: wrap; gap: 4px 12px; } .crm-ficha-titulo { white-space: normal; } .crm-ficha-acciones { width: 100%; margin-left: 0; } } .crm-lista-desc { display: grid; margin: 0; border-top: 1px solid var(--crm-line); } .crm-lista-desc[data-columnas="2"] { grid-template-columns: repeat(auto-fill, minmax(max(min(100%, 320px), calc(50% - 16px)), 1fr)); column-gap: 32px; } .crm-lista-desc-par { display: grid; grid-template-columns: minmax(96px, 176px) minmax(0, 1fr); align-items: baseline; gap: 16px; min-height: 32px; padding: 6px 0 5px; border-bottom: 1px solid var(--crm-line); } .crm-lista-desc-par dt { min-width: 0; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-lista-desc-par dd { min-width: 0; margin: 0; color: var(--crm-text); font-size: 13px; line-height: 20px; letter-spacing: -0.005em; overflow-wrap: anywhere; } .crm-lista-desc-par dd[data-cifra] { font-variant-numeric: tabular-nums; } .crm-lista-desc-par dd[data-mono] { color: var(--crm-text-2); font-family: var(--crm-mono); font-size: 12px; letter-spacing: 0; } .crm-lista-desc-par dd[data-falta] { color: var(--crm-dim); } .crm-linea { --crm-linea-fondo: var(--crm-bg); display: grid; gap: 24px; min-width: 0; font-size: 13px; line-height: 20px; } .crm-linea-dia-rotulo { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; font-weight: 400; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-linea-dia-rotulo::after { content: ""; flex: 1; height: 1px; background: var(--crm-line); } .crm-linea-carril { position: relative; margin: 0; padding: 0; list-style: none; } .crm-linea-carril::before, .crm-linea-carril[data-vivo]::after { content: ""; position: absolute; top: 10px; bottom: 10px; left: 7px; width: 1px; } .crm-linea-carril::before { background: var(--crm-line-2); } .crm-linea-carril[data-vivo]::after { background: linear-gradient( 180deg, transparent 0%, var(--crm-luz) 50%, transparent 100%) 0 -60px / 100% 60px no-repeat; box-shadow: 0 0 8px var(--crm-acento-halo); animation: crm-dato-corriente var(--crm-t-corriente) linear infinite; } .crm-linea-evento { position: relative; padding: 0 0 16px 28px; } .crm-linea-evento:last-child { padding-bottom: 0; } .crm-linea-nodo { position: absolute; top: 2px; left: 0; display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--crm-line-2); border-radius: 50%; background: var(--crm-linea-fondo); color: var(--crm-muted); } .crm-linea-nodo svg { width: 10px; height: 10px; stroke-width: 2.5; } .crm-linea-evento[data-estado=neutro] .crm-linea-nodo svg { stroke-width: 2; } .crm-linea-evento[data-estado=hecho] .crm-linea-nodo { border-color: var(--crm-acento); background: var(--crm-acento); color: var(--crm-sobre-acento); box-shadow: 0 0 0 3px var(--crm-acento-suave); } .crm-linea-evento[data-estado=trabajando] .crm-linea-nodo { border-color: var(--crm-acento-linea); } .crm-linea-evento[data-estado=trabajando] .crm-linea-nodo::after { content: ""; position: absolute; inset: -4px; border: 1px solid transparent; border-top-color: var(--crm-acento); border-right-color: var(--crm-acento); border-radius: 50%; animation: crm-dato-girar var(--crm-t-giro) linear infinite; } .crm-linea-evento[data-estado=error] .crm-linea-nodo { border-color: var(--crm-error); color: var(--crm-error); } .crm-linea-cuerpo { min-width: 0; } .crm-linea-titulo { margin: 0; color: var(--crm-text); font-size: 13px; line-height: 20px; letter-spacing: -0.005em; } .crm-linea-detalle { max-width: 68ch; margin: 2px 0 0; color: var(--crm-text-2); font-size: 13px; line-height: 20px; letter-spacing: -0.005em; } .crm-linea-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 2px 0 0; color: var(--crm-muted); font-size: 12px; font-variant-numeric: tabular-nums; line-height: 16px; } .crm-linea-hora { cursor: default; transition: color var(--crm-t-salida) linear; } .crm-linea-hora:hover { color: var(--crm-text-2); transition-duration: 0ms; } .crm-linea-sep { color: var(--crm-line-2); } .crm-linea-evento:is([data-estado=hecho], [data-estado=trabajando]) .crm-linea-estado { color: var(--crm-acento); } .crm-linea-evento[data-estado=error] .crm-linea-estado { color: var(--crm-error); } .crm-lista { margin: 0; padding: 0; border-top: 1px solid var(--crm-line); font-size: 13px; line-height: 20px; list-style: none; container-type: inline-size; } .crm-lista-fila { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; height: 40px; margin: 0; padding: 0 8px; border: 0; border-bottom: 1px solid var(--crm-line); background: transparent; color: inherit; font: inherit; text-align: left; text-decoration: none; } .crm-lista[data-densidad=compacta] .crm-lista-fila { height: 32px; } :is(a, button).crm-lista-fila { cursor: pointer; transition: background-color var(--crm-t-salida) linear; } :is(a, button).crm-lista-fila::before { content: ""; position: absolute; top: 0; bottom: -1px; left: 0; width: 2px; background: var(--crm-acento); opacity: 0; } :is(a, button).crm-lista-fila:is(:hover, :focus-visible) { background: var(--crm-panel-2); transition-duration: 0ms; } :is(a, button).crm-lista-fila:focus-visible { outline: 0; } :is(a, button).crm-lista-fila:focus-visible::before { opacity: 1; } :is(a, button).crm-lista-fila:active { background: var(--crm-panel-3); } .crm-lista-icono { display: grid; flex: none; place-items: center; width: 16px; height: 20px; color: var(--crm-muted); transition: color var(--crm-t-salida) linear; } .crm-lista-icono svg { width: 16px; height: 16px; stroke-width: 1.6; } :is(a, button).crm-lista-fila:is(:hover, :focus-visible) .crm-lista-icono { color: var(--crm-text); transition-duration: 0ms; } .crm-lista-imagen { flex: none; width: 24px; height: 24px; border: 1px solid var(--crm-line-2); object-fit: cover; } .crm-lista-texto { display: flex; flex: 1; align-items: baseline; gap: 8px; min-width: 0; overflow: hidden; } .crm-lista-titulo { flex: 0 1 auto; min-width: 0; overflow: hidden; color: var(--crm-text); font-size: 13px; font-weight: 500; line-height: 20px; letter-spacing: -0.005em; text-overflow: ellipsis; white-space: nowrap; } .crm-lista-detalle { flex: 0 100 auto; min-width: 0; overflow: hidden; color: var(--crm-muted); font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; } .crm-lista-meta { display: flex; flex: none; align-items: center; gap: 12px; color: var(--crm-muted); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; } .crm-lista-atajo { display: inline-flex; flex: none; justify-content: flex-end; min-width: 20px; opacity: 0; transition: opacity var(--crm-t-salida) linear; } :is(a, button).crm-lista-fila:is(:hover, :focus-visible) .crm-lista-atajo { opacity: 1; transition-duration: 0ms; } @container (max-width: 460px) { .crm-lista-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 8px; row-gap: 0; height: auto; min-height: 44px; padding-block: 8px; } .crm-lista[data-densidad=compacta] .crm-lista-fila { height: auto; min-height: 32px; padding-block: 6px; } .crm-lista-fila > :is(.crm-lista-icono, .crm-lista-imagen) { grid-column: 1; grid-row: 1 / span 2; } .crm-lista-texto { flex-direction: column; align-items: stretch; gap: 0; grid-column: 2; grid-row: 1; } .crm-lista-titulo, .crm-lista-detalle { max-width: 100%; } .crm-lista-meta { grid-column: 2; grid-row: 2; justify-self: start; min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; } .crm-lista-atajo { grid-column: 3; grid-row: 1 / span 2; } } .crm-kanban { position: relative; display: grid; gap: 8px; min-width: 0; font-size: 13px; line-height: 20px; } .crm-kanban-columnas { display: grid; grid-auto-columns: minmax(264px, 1fr); grid-auto-flow: column; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-color: var(--crm-line-2) transparent; scrollbar-width: thin; } .crm-kanban-columna { position: relative; display: flex; flex-direction: column; min-height: 280px; padding: 0 12px; border-left: 1px solid var(--crm-line); scroll-snap-align: start; transition: background-color var(--crm-t-salida) linear; } .crm-kanban-columna:first-child { padding-left: 0; border-left: 0; } .crm-kanban-columna:last-child { padding-right: 0; } .crm-kanban-columna[data-destino] { background: var(--crm-panel); transition-duration: 0ms; } .crm-kanban-cabecera { display: flex; align-items: center; gap: 8px; height: 32px; margin: 0; border-bottom: 1px solid var(--crm-line-2); color: var(--crm-text); font-size: 13px; font-weight: 500; line-height: 20px; letter-spacing: -0.005em; } .crm-kanban-titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-kanban-contador { color: var(--crm-muted); font-size: 12px; font-weight: 400; line-height: 16px; font-variant-numeric: tabular-nums; } .crm-kanban-contador[data-excede] { color: var(--crm-aviso); } .crm-kanban-limite { color: var(--crm-dim); } .crm-kanban-lista { display: grid; gap: 8px; margin: 0; padding: 8px 0; list-style: none; } .crm-kanban-tarjeta { position: relative; display: grid; gap: 4px; padding: 12px; border: 1px solid var(--crm-line-2); background: var(--crm-panel); color: var(--crm-text); text-align: left; cursor: pointer; user-select: none; transition: background-color var(--crm-t-salida) linear, border-color var(--crm-t-salida) linear, box-shadow var(--crm-t-gesto) var(--crm-snap), translate var(--crm-t-gesto) var(--crm-snap); } .crm-kanban-tarjeta[draggable=true] { cursor: grab; } .crm-kanban-tarjeta:hover { border-color: var(--crm-control); background: var(--crm-panel-2); transition-duration: 0ms, 0ms, var(--crm-t-gesto), var(--crm-t-gesto); } .crm-kanban-tarjeta:active:not([data-levantada]) { background: var(--crm-panel-3); } .crm-kanban-tarjeta:focus-visible { outline-offset: -1px; } .crm-kanban-tarjeta[data-levantada] { z-index: 2; border-color: var(--crm-acento-linea); background: var(--crm-panel-2); box-shadow: var(--crm-sombra-capa); translate: 0 -2px; } .crm-kanban-tarjeta[data-levantada]:focus-visible { border-color: var(--crm-acento); outline: 0; } .crm-kanban-tarjeta[data-arrastrada] { border-style: dashed; background: transparent; color: var(--crm-dim); } .crm-kanban-asa { position: absolute; top: 14px; right: 8px; width: 14px; height: 14px; color: var(--crm-dim); stroke-width: 1.5; opacity: 0; transition: opacity var(--crm-t-salida) linear; } .crm-kanban-tarjeta:is(:hover, :focus-visible, [data-levantada]) .crm-kanban-asa { opacity: 1; transition-duration: 0ms; } .crm-kanban-tarjeta[data-levantada] .crm-kanban-asa { color: var(--crm-acento); } .crm-kanban-tarjeta-titulo { padding-right: 20px; font-size: 13px; font-weight: 500; line-height: 20px; letter-spacing: -0.005em; } .crm-kanban-tarjeta-detalle { color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-kanban-tarjeta-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; min-height: 24px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--crm-line); font-size: 12px; line-height: 16px; } .crm-kanban-tarjeta-meta .crm-celda-persona-nombre { font-size: 12px; } .crm-kanban [data-hueco-antes]::before, .crm-kanban-hueco { content: ""; display: block; height: 2px; margin-bottom: 6px; background: var(--crm-acento); } .crm-kanban-vacia { margin: 8px 0; padding: 20px 12px; border: 1px dashed var(--crm-line-2); color: var(--crm-dim); font-size: 12px; line-height: 16px; text-align: center; } .crm-kanban-vacia[data-hueco-antes] { border-color: var(--crm-acento-linea); } .crm-kanban-vacia[data-hueco-antes]::before { display: none; } .crm-kanban-guia { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-height: 24px; margin: 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; opacity: 0; transition: opacity var(--crm-t-salida) linear; } .crm-kanban-guia > span { display: inline-flex; align-items: center; gap: 2px; } .crm-kanban-guia .crm-tecla { margin-right: 2px; } .crm-kanban:focus-within .crm-kanban-guia, .crm-kanban-guia[data-levantada] { opacity: 1; transition-duration: 0ms; } .crm-agenda { display: grid; gap: 12px; min-width: 0; font-size: 13px; line-height: 20px; container-type: inline-size; } .crm-agenda-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 28px; } .crm-agenda-titulo { margin: 0; color: var(--crm-text); font-size: 15px; font-variant-numeric: tabular-nums; font-weight: 500; line-height: 22px; letter-spacing: -0.01em; } .crm-agenda-titulo::first-letter { text-transform: uppercase; } .crm-agenda-nav { display: flex; align-items: center; gap: 4px; } .crm-agenda-mes { width: 100%; border-top: 1px solid var(--crm-line); border-left: 1px solid var(--crm-line); border-collapse: separate; border-spacing: 0; table-layout: fixed; } .crm-agenda-mes th { height: 32px; padding: 0 8px; border-right: 1px solid var(--crm-line); border-bottom: 1px solid var(--crm-line); color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; font-weight: 400; line-height: 16px; letter-spacing: 0.06em; text-align: left; text-transform: uppercase; } .crm-agenda-mes td { position: relative; height: 112px; padding: 4px 4px 8px; border-right: 1px solid var(--crm-line); border-bottom: 1px solid var(--crm-line); vertical-align: top; } .crm-agenda-mes td[data-hoy] { box-shadow: inset 0 2px 0 var(--crm-acento); } .crm-agenda-dia-num { display: inline-block; min-width: 20px; padding: 2px 4px; color: var(--crm-text-2); font-family: var(--crm-mono); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; } .crm-agenda-mes td[data-fuera] .crm-agenda-dia-num { color: var(--crm-dim); } .crm-agenda-mes td[data-hoy] .crm-agenda-dia-num { color: var(--crm-acento); } .crm-agenda-dia-eventos, .crm-agenda-col-eventos { display: grid; gap: 2px; margin: 4px 0 0; padding: 0; list-style: none; } .crm-agenda-evento { position: relative; display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; min-height: 24px; margin: 0; padding: 4px 6px 4px 14px; overflow: hidden; border: 0; background: var(--crm-panel-2); color: var(--crm-text); font: inherit; font-size: 12px; line-height: 16px; text-align: left; white-space: nowrap; transition: box-shadow var(--crm-t-salida) linear; } .crm-agenda-evento::before { content: ""; position: absolute; top: 8px; left: 6px; width: 4px; height: 4px; background: var(--crm-dim); } button.crm-agenda-evento { cursor: pointer; } button.crm-agenda-evento:hover { box-shadow: inset 0 0 0 1px var(--crm-control); transition-duration: 0ms; } button.crm-agenda-evento:focus-visible { outline-offset: -1px; } .crm-agenda-evento[data-tono=acento] { background: var(--crm-acento-suave); } .crm-agenda-evento[data-tono=acento]::before { background: var(--crm-acento); } .crm-agenda-evento[data-tono=aviso] { background: var(--crm-aviso-suave); } .crm-agenda-evento[data-tono=aviso]::before { background: var(--crm-aviso); } .crm-agenda-evento[data-tono=error] { background: var(--crm-error-suave); } .crm-agenda-evento[data-tono=error]::before { background: var(--crm-error); } .crm-agenda-hora { flex: none; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; font-variant-numeric: tabular-nums; } .crm-agenda-evento-titulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .crm-agenda-mas { height: 24px; padding: 0 6px; border: 0; background: transparent; color: var(--crm-muted); font: inherit; font-size: 12px; line-height: 16px; cursor: pointer; transition: color var(--crm-t-salida) linear; } .crm-agenda-mas:hover { color: var(--crm-text); transition-duration: 0ms; } .crm-agenda-puntos { display: none; } .crm-agenda-semana { border-top: 1px solid var(--crm-line); } .crm-agenda-semana-cabecera, .crm-agenda-semana-cuerpo, .crm-agenda-todo-dia { display: grid; grid-template-columns: 64px repeat(7, minmax(0, 1fr)); } .crm-agenda-semana-cabecera { border-bottom: 1px solid var(--crm-line); } .crm-agenda-semana-cabecera > span { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-agenda-semana-cabecera b { color: var(--crm-text-2); font-weight: 400; font-variant-numeric: tabular-nums; } .crm-agenda-semana-cabecera > span[data-hoy], .crm-agenda-semana-cabecera > span[data-hoy] b { color: var(--crm-acento); } .crm-agenda-todo-dia { grid-auto-rows: minmax(31px, auto); border-bottom: 1px solid var(--crm-line-2); } .crm-agenda-todo-dia-rotulo { display: flex; align-items: center; justify-content: flex-end; padding: 0 8px 0 0; color: var(--crm-dim); font-size: 11px; line-height: 16px; text-align: right; white-space: nowrap; } .crm-agenda-todo-dia-celda { display: grid; align-content: center; gap: 2px; min-width: 0; margin: 0; padding: 2px; border-left: 1px solid var(--crm-line); list-style: none; } .crm-agenda-todo-dia-celda[data-hoy] { background: var(--crm-panel); } .crm-agenda-horas { display: grid; grid-auto-rows: var(--crm-agenda-alto-hora); } .crm-agenda-horas span { padding: 0 8px; color: var(--crm-dim); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; font-variant-numeric: tabular-nums; text-align: right; translate: 0 -8px; } .crm-agenda-horas span:first-child { translate: 0; } .crm-agenda-col { position: relative; height: calc(var(--crm-agenda-horas) * var(--crm-agenda-alto-hora)); border-left: 1px solid var(--crm-line); background-image: repeating-linear-gradient( to bottom, transparent 0, transparent calc(var(--crm-agenda-alto-hora) - 1px), var(--crm-line) calc(var(--crm-agenda-alto-hora) - 1px), var(--crm-line) var(--crm-agenda-alto-hora)); } .crm-agenda-col[data-hoy] { background-color: var(--crm-panel); } .crm-agenda-col-eventos { margin: 0; } .crm-agenda-bloque { position: absolute; z-index: 1; display: flex; } .crm-agenda-bloque > .crm-agenda-evento { flex-direction: column; align-items: flex-start; gap: 0; height: 100%; padding-block: 4px; white-space: normal; } .crm-agenda-bloque > .crm-agenda-evento::before { top: 10px; } .crm-agenda-bloque > .crm-agenda-evento .crm-agenda-evento-titulo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--crm-agenda-lineas, 2); } .crm-agenda-bloque[data-corto] > .crm-agenda-evento { flex-direction: row; align-items: center; gap: 6px; padding-block: 0; white-space: nowrap; } .crm-agenda-bloque[data-corto] > .crm-agenda-evento::before { top: 50%; translate: 0 -50%; } .crm-agenda-bloque[data-corto] > .crm-agenda-evento .crm-agenda-evento-titulo { display: block; text-overflow: ellipsis; } .crm-agenda-ahora { position: absolute; z-index: 3; right: 0; left: 0; height: 1px; background: var(--crm-acento); pointer-events: none; } .crm-agenda-ahora::before { content: ""; position: absolute; top: -3px; left: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--crm-acento); } .crm-agenda-lista { display: none; margin: 0; padding: 0; border-top: 1px solid var(--crm-line); list-style: none; } .crm-agenda-lista > li { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--crm-line); } .crm-agenda-lista-dia { margin: 0; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-agenda-lista > li[data-hoy] .crm-agenda-lista-dia { color: var(--crm-acento); } .crm-agenda-lista ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; } .crm-agenda-lista .crm-agenda-evento { min-height: 36px; font-size: 13px; line-height: 20px; } .crm-agenda-lista .crm-agenda-evento::before { top: 50%; translate: 0 -50%; } .crm-agenda-lista-vacio { margin: 0; color: var(--crm-dim); font-size: 13px; line-height: 20px; } @container (max-width: 640px) { .crm-agenda-mes th { padding: 0 2px; text-align: center; } .crm-agenda-mes td { height: 56px; padding: 4px 2px; text-align: center; } .crm-agenda-dia-eventos { display: none; } .crm-agenda-puntos { display: flex; justify-content: center; gap: 4px; margin-top: 6px; } .crm-agenda-puntos > span { width: 4px; height: 4px; border-radius: 50%; background: var(--crm-dim); } .crm-agenda-puntos > span[data-tono=acento] { background: var(--crm-acento); } .crm-agenda-puntos > span[data-tono=aviso] { background: var(--crm-aviso); } .crm-agenda-puntos > span[data-tono=error] { background: var(--crm-error); } .crm-agenda-semana { display: none; } .crm-agenda-lista { display: block; } } @keyframes crm-dato-filo { from { background-position: -40% 0; } to { background-position: 140% 0; } } @keyframes crm-dato-entra { from { opacity: 0; transform: translateY(4px) scale(0.98); } } @keyframes crm-dato-latido { from { opacity: 0.6; scale: 1; } to { opacity: 0; scale: 2.6; } } @keyframes crm-dato-girar { to { rotate: 360deg; } } @keyframes crm-dato-corriente { to { background-position: 0 calc(100% + 60px); } } @keyframes crm-dato-funde { from { opacity: 0; } } .crm-celda-doble { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; vertical-align: middle; } .crm-celda-doble-icono { display: grid; flex: none; color: var(--crm-muted); } .crm-celda-doble-icono svg { width: 16px; height: 16px; stroke-width: 1.6; } .crm-celda-doble-texto { display: grid; min-width: 0; } .crm-celda-doble-titulo { overflow: hidden; color: var(--crm-text); font-size: 13px; font-weight: 500; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; } .crm-celda-doble-detalle { overflow: hidden; color: var(--crm-muted); font-size: 12px; font-weight: 400; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; } .crm-celda-doble[data-mono] .crm-celda-doble-detalle { font-family: var(--crm-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; } .crm-tabla-sin-dato { color: var(--crm-dim); } .crm-tabla-tabla .crm-tabla-fin { width: 1%; padding-right: 8px; padding-left: 8px; white-space: nowrap; } .crm-tabla-fin-cuerpo { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; vertical-align: middle; } .crm-tabla-acciones-fila { display: inline-flex; align-items: center; gap: 4px; opacity: 0; transition: opacity var(--crm-t-salida) linear; } .crm-tabla-fila[data-interactuando]:not([data-elegida], [data-activa]) { --crm-tabla-fila: var(--crm-panel-2); } .crm-tabla-fila:is(:hover, :focus-visible, :focus-within, [data-elegida], [data-activa]) .crm-tabla-acciones-fila { opacity: 1; transition-duration: 0ms; } @media (hover: none) { .crm-tabla-acciones-fila { opacity: 1; } } .crm-tabla-chevron { width: 14px; height: 14px; color: var(--crm-dim); stroke-width: 1.5; transition: color var(--crm-t-salida) linear, transform var(--crm-t-gesto) var(--crm-snap); } .crm-tabla-fila[data-navega]:is(:hover, :focus-visible) .crm-tabla-chevron { color: var(--crm-text); transform: translateX(2px); transition-duration: 0ms, var(--crm-t-gesto); } .crm-tabla-tabla .crm-tabla-expandir { width: 32px; min-width: 32px; padding: 0 0 0 4px; } .crm-tabla-tabla .crm-tabla-expandir + :is(td, th) { padding-left: 4px; } .crm-tabla-expandir-boton { display: grid; place-items: center; width: 24px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--crm-muted); cursor: pointer; } .crm-tabla-expandir-boton svg { width: 14px; height: 14px; stroke-width: 1.5; transition: transform var(--crm-t-gesto) var(--crm-snap); } .crm-tabla-fila[data-abierta] .crm-tabla-expandir-boton svg { transform: rotate(90deg); } @media (hover: hover) { .crm-tabla-expandir-boton:hover { background: var(--crm-panel-3); color: var(--crm-text); } } .crm-tabla-detalle > td { padding: 0; border-bottom: 1px solid var(--crm-line); background: var(--crm-tabla-fondo); white-space: normal; } .crm-tabla-detalle-cuerpo { padding: 12px 16px 16px 40px; box-shadow: inset 2px 0 0 var(--crm-line-2); color: var(--crm-text-2); font-size: 13px; line-height: 20px; } .crm-tabla-fila[data-abierta] > :is(td, th) { border-bottom-color: transparent; } .crm-tabla-pie-contable td { position: sticky; z-index: 2; bottom: 0; height: var(--crm-tabla-alto, 36px); padding: 0 12px; border-top: 1px solid var(--crm-line-2); background: var(--crm-tabla-fondo); color: var(--crm-text); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; } .crm-tabla-pie-contable td[data-fija] { z-index: 3; } .crm-tabla-pie-contable tr + tr td { border-top: 0; } .crm-tabla-pie-contable tr:not(:last-child) td { position: static; } .crm-tabla-pie-contable tr:has(+ .crm-tabla-pie-libre:last-child) td { position: sticky; } .crm-tabla-pie-contable .crm-tabla-pie-libre td { position: static; height: auto; padding: 8px 12px; border-top: 1px solid var(--crm-line); color: var(--crm-text-2); font-size: 12px; font-weight: 400; line-height: 16px; white-space: normal; } .crm-tabla-pie-contable tr:not([data-destacada]) td { color: var(--crm-text-2); font-weight: 400; } .crm-tabla-pie-rotulo { color: var(--crm-muted); font-weight: 500; } .crm-tabla-orden-barra { display: inline-flex; align-items: center; gap: 2px; } @media (prefers-reduced-motion: reduce) { .crm-celda-estado[data-tono=vivo] .crm-celda-estado-punto::after, .crm-kpi-vivo::after, .crm-linea-carril[data-vivo]::after, .crm-linea-evento[data-estado=trabajando] .crm-linea-nodo::after { animation: none; } .crm-tabla-caja[data-ocupada]::before, .crm-celda-estado[data-tono=vivo] .crm-celda-estado-punto::after, .crm-kpi-vivo::after, .crm-linea-carril[data-vivo]::after { display: none; } .crm-tabla-lote { animation-name: crm-dato-funde; } .crm-kanban-tarjeta[data-levantada], .crm-tabla-lote-cerrar:active { transform: none; translate: none; } .crm-tabla-grupo-flecha, .crm-dato-casilla::before, .crm-tabla-expandir-boton svg { transition: none; } .crm-tabla-fila[data-navega]:is(:hover, :focus-visible) .crm-tabla-chevron { transform: none; } } .crm-copiable { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: inherit; cursor: copy; } .crm-copiable-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--crm-t-salida) linear; } .crm-copiable-icono { display: inline-grid; flex: none; place-items: center; color: var(--crm-muted); opacity: 0; transition: opacity var(--crm-t-salida) linear; } .crm-copiable-icono svg { width: 12px; height: 12px; stroke-width: 1.5; } .crm-copiable:is(:hover, :focus-visible) .crm-copiable-texto { color: var(--crm-text); transition-duration: 0ms; } .crm-copiable:is(:hover, :focus-visible, [data-copiado]) .crm-copiable-icono, .crm-tabla-fila:focus-visible .crm-copiable-icono { opacity: 1; transition-duration: 0ms; } .crm-copiable[data-copiado] .crm-copiable-icono { color: var(--crm-acento); } .crm-copiable:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-copiable[data-solo-icono] { justify-content: center; width: 24px; height: 24px; color: var(--crm-muted); cursor: pointer; transition: background-color var(--crm-t-salida) linear; } .crm-copiable[data-solo-icono] .crm-copiable-icono svg { width: 14px; height: 14px; } .crm-copiable[data-solo-icono]:active { transform: scale(0.96); transition: transform var(--crm-t-pulsar) var(--crm-snap); } @media (hover: hover) { .crm-copiable[data-solo-icono]:hover { background: var(--crm-panel-2); transition-duration: 0ms; } .crm-copiable[data-solo-icono]:hover .crm-copiable-icono { color: var(--crm-text); } } .crm-lista-desc-par[data-copiable] { position: relative; } .crm-lista-desc-par[data-copiable] dd { padding-right: 32px; } .crm-lista-desc-copiar { position: absolute; top: 4px; right: 0; } .crm-lista-desc-par:is(:hover, :focus-within) .crm-copiable-icono { opacity: 1; transition-duration: 0ms; } @media (hover: none) { .crm-lista-desc-copiar .crm-copiable-icono { opacity: 1; } } .crm-kpi[data-enlace] { position: relative; transition: background-color var(--crm-t-salida) linear; } .crm-kpi[data-enlace] .crm-kpi-rotulo { padding-right: 24px; } .crm-kpi-enlace { position: absolute; z-index: 1; inset: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--crm-muted); cursor: pointer; } .crm-kpi-enlace:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: -1px; } .crm-kpi-ir { position: absolute; top: 21px; right: 20px; width: 14px; height: 14px; stroke-width: 1.5; transition: transform var(--crm-t-gesto) var(--crm-snap), color var(--crm-t-color) linear; } .crm-grupo-kpi[data-variante=compacta] .crm-kpi-ir { top: 17px; right: 16px; } .crm-kpi-enlace:focus-visible .crm-kpi-ir { color: var(--crm-text); transform: translateX(2px); } @media (hover: hover) { .crm-kpi[data-enlace]:hover { background: var(--crm-panel-2); transition-duration: 0ms; } .crm-kpi[data-enlace]:hover .crm-kpi-ir { color: var(--crm-text); transform: translateX(2px); } } .crm-kpi[data-presionado] { background: var(--crm-panel-3); box-shadow: inset 2px 0 0 var(--crm-acento); } .crm-grupo-kpi > .crm-kpi[data-presionado] { box-shadow: inset 2px 0 0 var(--crm-acento), -1px 0 0 var(--crm-line), 0 -1px 0 var(--crm-line); } .crm-kpi[data-presionado] .crm-kpi-ir { color: var(--crm-acento); } .crm-kpi[data-conmutador] .crm-kpi-enlace:focus-visible .crm-kpi-ir { transform: none; } @media (hover: hover) { .crm-kpi[data-conmutador]:hover .crm-kpi-ir { transform: none; } .crm-kpi[data-presionado]:hover { background: var(--crm-panel-3); } .crm-kpi[data-presionado]:hover .crm-kpi-ir { color: var(--crm-acento); } } .crm-ficha-seccion-plegar { display: inline-flex; align-items: center; gap: 6px; height: 24px; margin: 0 0 0 -4px; padding: 0 4px; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; transition: color var(--crm-t-salida) linear; } .crm-ficha-seccion-plegar:hover { color: var(--crm-text); transition-duration: 0ms; } .crm-ficha-seccion-plegar:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 0; } .crm-ficha-seccion-flecha { width: 14px; height: 14px; stroke-width: 1.5; transition: transform var(--crm-t-gesto) var(--crm-snap); } .crm-ficha-seccion-plegar[aria-expanded=true] .crm-ficha-seccion-flecha { transform: rotate(90deg); } .crm-ficha-seccion-resumen { margin-right: auto; color: var(--crm-dim); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; } .crm-linea-dia-rotulo { position: sticky; z-index: 2; top: var(--crm-linea-pegajosa, 0px); margin: -4px 0 8px; padding: 4px 0; background: var(--crm-linea-fondo); } .crm-lista-atajo[data-cifra] { opacity: 1; } .crm-lista-atajo .crm-lista-cifra { color: var(--crm-dim); } .crm-lista-atajo[data-cifra] .crm-lista-intro, :is(a, button).crm-lista-fila:is(:hover, :focus-visible) .crm-lista-atajo[data-cifra] .crm-lista-cifra { display: none; } :is(a, button).crm-lista-fila:is(:hover, :focus-visible) .crm-lista-atajo[data-cifra] .crm-lista-intro { display: inline-grid; } .crm-kanban-cabecera { position: relative; } .crm-kanban-carga { position: absolute; right: 0; bottom: -1px; left: 0; height: 1px; pointer-events: none; } .crm-kanban-carga > span { display: block; height: 100%; background: var(--crm-text-2); transition: inline-size var(--crm-t-gesto) var(--crm-snap); } .crm-kanban-carga[data-excede] > span { background: var(--crm-aviso); } .crm-kanban-contador[data-previo] { color: var(--crm-text); } .crm-kanban-contador[data-previo][data-excede] { color: var(--crm-aviso); } .crm-agenda-horas { position: relative; } .crm-agenda-horas span[data-tapada] { visibility: hidden; } .crm-agenda-ahora-hora { position: absolute; right: 0; left: 0; padding: 0 8px; color: var(--crm-acento); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; font-variant-numeric: tabular-nums; text-align: right; translate: 0 -8px; transition: top var(--crm-t-gesto) var(--crm-snap); } .crm-agenda-ahora { transition: top var(--crm-t-gesto) var(--crm-snap); } .crm-dato-vacio-marco[data-esperando] { visibility: hidden; } :is(.crm-dato-accion, .crm-tabla-pie .crm-boton)[data-crm-pulsado] { background: var(--crm-panel-3); color: var(--crm-text); transform: translateY(0.5px); } :is(.crm-dato-accion, .crm-tabla-pie .crm-boton)[data-crm-pulsado] .crm-tecla { border-color: var(--crm-control); box-shadow: none; color: var(--crm-text); } @media (prefers-reduced-motion: reduce) { .crm-kpi-ir, .crm-ficha-seccion-flecha, .crm-kanban-carga > span, .crm-agenda-ahora, .crm-agenda-ahora-hora { transition: none; } .crm-kpi[data-enlace]:hover .crm-kpi-ir, .crm-kpi-enlace:focus-visible .crm-kpi-ir, .crm-copiable[data-solo-icono]:active, :is(.crm-dato-accion, .crm-tabla-pie .crm-boton)[data-crm-pulsado] { transform: none; } } .crm-dato-procedencia { display: inline; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; font-variant-numeric: inherit; letter-spacing: inherit; line-height: inherit; text-align: inherit; text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-transform: inherit; text-underline-offset: 4px; cursor: help; transition: text-decoration-color var(--crm-t-color) var(--crm-snap); } .crm-dato-procedencia:hover, .crm-dato-procedencia[data-crm-forzar=hover] { text-decoration-color: var(--crm-control); transition-duration: 0ms; } .crm-dato-procedencia[data-abierta] { text-decoration-color: var(--crm-acento); } .crm-dato-procedencia:focus-visible, .crm-dato-procedencia[data-crm-forzar=foco] { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-kpi[data-enlace] .crm-dato-procedencia { position: relative; z-index: 2; } .crm-procedencia { z-index: 60; box-sizing: border-box; width: min(360px, calc(100vw - 24px)); max-height: min(var(--radix-popover-content-available-height, 70vh), 480px); overflow: auto; overscroll-behavior: contain; border: 1px solid var(--crm-line-2); background: var(--crm-panel-2); color: var(--crm-text-2); font-family: var(--crm-sans); font-size: 13px; font-weight: 400; letter-spacing: 0; line-height: 20px; text-align: start; text-transform: none; box-shadow: var(--crm-sombra-capa); outline: none; transform-origin: var(--radix-popover-content-transform-origin); user-select: text; } .crm-procedencia[data-state=open][data-side=top] { animation: crm-es-desde-abajo var(--crm-t-entrada) var(--crm-snap); } .crm-procedencia[data-state=open][data-side=bottom] { animation: crm-es-desde-arriba var(--crm-t-entrada) var(--crm-snap); } .crm-procedencia[data-state=closed] { animation: crm-es-apaga var(--crm-t-salida) var(--crm-snap) forwards; } .crm-procedencia-tarjeta { display: grid; min-width: 0; } .crm-procedencia-cabecera { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 8px; padding: 12px 16px; } .crm-procedencia-cabecera > * { max-width: 100%; } .crm-procedencia-textos { display: grid; justify-self: stretch; gap: 2px; min-width: 0; } .crm-procedencia-titulo { margin: 0; color: var(--crm-text); font-size: 13px; font-weight: 500; line-height: 20px; overflow-wrap: anywhere; text-wrap: pretty; } .crm-procedencia-valor { margin: 0; color: var(--crm-text); font-size: 15px; font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -0.01em; line-height: 22px; overflow-wrap: anywhere; } .crm-procedencia-clase { display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; min-width: 0; max-width: 100%; height: 20px; padding: 0 6px; border: 1px solid var(--crm-line-2); color: var(--crm-text-2); font-size: 12px; line-height: 16px; } .crm-procedencia-clase-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-procedencia-clase[data-cortado] { cursor: help; } .crm-procedencia-clase[data-cortado]:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-procedencia-punto { flex: none; box-sizing: border-box; width: 6px; height: 6px; border-radius: 50%; background: var(--crm-muted); } .crm-procedencia-clase[data-clase=medido] .crm-procedencia-punto { background: var(--crm-acento); } .crm-procedencia-clase[data-clase=estimado] .crm-procedencia-punto { background: var(--crm-aviso); } .crm-procedencia-clase[data-clase=propuesto] .crm-procedencia-punto { border: 1px solid var(--crm-text-2); background: transparent; } .crm-procedencia-resumen { grid-column: 1 / -1; margin: 0; color: var(--crm-text-2); font-size: 13px; line-height: 20px; text-wrap: pretty; } .crm-procedencia-seccion { display: grid; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--crm-line); } .crm-procedencia-rotulo { margin: 0; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; letter-spacing: 0.06em; line-height: 16px; text-transform: uppercase; } .crm-procedencia-origenes { display: grid; gap: 8px; margin: 0; } .crm-procedencia-origen { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; } .crm-procedencia-origen dt { min-width: 0; overflow: hidden; color: var(--crm-muted); font-size: 12px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; } .crm-procedencia-origen dd { display: grid; min-width: 0; margin: 0; } .crm-procedencia-cita { color: var(--crm-text); font-size: 13px; font-variant-numeric: tabular-nums; line-height: 20px; overflow-wrap: anywhere; } .crm-procedencia-cita[data-referencia] { font-family: var(--crm-mono); font-size: 12px; } .crm-procedencia-detalle { color: var(--crm-muted); font-size: 12px; line-height: 16px; overflow-wrap: anywhere; } .crm-procedencia-calculo { display: grid; gap: 4px; margin: 0; padding: 0; color: var(--crm-text-2); font-size: 13px; font-variant-numeric: tabular-nums; line-height: 20px; list-style: none; overflow-wrap: anywhere; } .crm-procedencia-pie { display: flex; align-items: center; justify-content: flex-end; box-sizing: border-box; height: 40px; padding: 0 8px; border-top: 1px solid var(--crm-line); } .crm-procedencia-pie .crm-boton[data-copiado] svg { color: var(--crm-acento); } .crm-procedencia-nada, .crm-procedencia-error { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 12px 16px; color: var(--crm-muted); font-size: 13px; line-height: 20px; } .crm-procedencia-error { color: var(--crm-text-2); } .crm-procedencia-error svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--crm-error); stroke-width: 1.6; } .crm-procedencia-espera { display: grid; gap: 8px; padding: 12px 16px; } @media (forced-colors: active) { .crm-dato-procedencia:hover, .crm-dato-procedencia[data-abierta] { text-decoration-color: Highlight; } .crm-procedencia-punto { background: CanvasText; } } .crm-tabla-tabla :is(th, td)[data-principal] { min-width: 160px; } .crm-tabla-tabla :is(th, td)[data-principal][data-cede] { width: var(--crm-col-ancho); min-width: var(--crm-col-ancho); } .crm-tabla-tabla tbody td[data-tope] { max-width: var(--crm-col-ancho); overflow: hidden; text-overflow: ellipsis; } .crm-tabla-tabla tbody td[data-tope][data-crm-dos-lineas=""] > * { overflow: hidden; text-overflow: ellipsis; } .crm-tabla-tabla tbody .crm-tabla-fila > td[data-principal]:not([data-cede], [data-fija], [data-cifra], [data-crm-dos-lineas=extendida]) { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; } @container crm-tabla (max-width: 719.98px) { .crm-tabla-tabla :is(th, td)[data-prioridad="4"] { display: none; } .crm-tabla-tabla thead[data-grupos-prioridad="4"] > .crm-tabla-grupos { display: none; } .crm-tabla-tabla thead[data-grupos-prioridad="4"] > tr:not(.crm-tabla-grupos) > th { top: 0; } } @container crm-tabla (max-width: 559.98px) { .crm-tabla-tabla :is(th, td)[data-prioridad="3"] { display: none; } .crm-tabla-tabla thead:is([data-grupos-prioridad="4"], [data-grupos-prioridad="3"]) > .crm-tabla-grupos { display: none; } .crm-tabla-tabla thead:is([data-grupos-prioridad="4"], [data-grupos-prioridad="3"]) > tr:not(.crm-tabla-grupos) > th { top: 0; } .crm-tabla-tabla tbody td[data-principal] { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; } .crm-tabla-tabla tbody td[data-principal]:not([data-fija]) { position: relative; } .crm-tabla-tabla :is(th, td)[data-principal][data-cede] { min-width: min(var(--crm-col-ancho), 160px); } .crm-tabla-tabla thead th[data-principal][data-cede] { width: auto; } .crm-tabla-tabla tbody td[data-principal][data-cede] { width: 100%; max-width: 0; } .crm-tabla-pie-contable tr:not(.crm-tabla-pie-libre) > td[data-principal] { white-space: normal; } } @container crm-tabla (max-width: 399.98px) { .crm-tabla-tabla :is(th, td)[data-prioridad="2"] { display: none; } .crm-tabla-tabla thead[data-grupos-prioridad] > .crm-tabla-grupos { display: none; } .crm-tabla-tabla thead[data-grupos-prioridad] > tr:not(.crm-tabla-grupos) > th { top: 0; } } .crm-tabla-tabla[data-prioridad-oculta="4"] :is(th, td)[data-prioridad="4"]:not([data-en-lista=estado], [data-fija]), .crm-tabla-tabla[data-prioridad-oculta="3"] :is(th, td):is([data-prioridad="4"], [data-prioridad="3"]):not([data-en-lista=estado], [data-fija]), .crm-tabla-tabla[data-prioridad-oculta="2"] :is(th, td)[data-prioridad]:not([data-en-lista=estado], [data-fija]) { display: none; } .crm-tabla-tabla[data-prioridad-oculta="4"] thead[data-grupos-prioridad="4"] > .crm-tabla-grupos, .crm-tabla-tabla[data-prioridad-oculta="3"] thead:is([data-grupos-prioridad="4"], [data-grupos-prioridad="3"]) > .crm-tabla-grupos, .crm-tabla-tabla[data-prioridad-oculta="2"] thead[data-grupos-prioridad] > .crm-tabla-grupos { display: none; } .crm-tabla-tabla[data-prioridad-oculta="4"] thead[data-grupos-prioridad="4"] > tr:not(.crm-tabla-grupos) > th, .crm-tabla-tabla[data-prioridad-oculta="3"] thead:is([data-grupos-prioridad="4"], [data-grupos-prioridad="3"]) > tr:not(.crm-tabla-grupos) > th, .crm-tabla-tabla[data-prioridad-oculta="2"] thead[data-grupos-prioridad] > tr:not(.crm-tabla-grupos) > th { top: 0; } .crm-tabla-meta-lista { display: none; } .crm-tabla-principal-lista { display: contents; } @container crm-tabla (max-width: 559.98px) { .crm-tabla-meta-lista { display: block; overflow: hidden; color: var(--crm-muted); font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; } .crm-tabla-meta-lista > span { display: none; } .crm-tabla-meta-lista > span[data-medio] { display: inline; } .crm-tabla-meta-lista > span[data-medio] ~ span[data-medio]::before { content: " \b7 "; } .crm-tabla-meta-lista:not(:has(> span[data-medio])) { display: none; } .crm-tabla-tabla tbody .crm-tabla-fila:has(> :is(td, th) > .crm-tabla-principal-lista > .crm-tabla-meta-lista > span[data-medio]) > :is(td, th) { padding-top: max(0px, calc((var(--crm-tabla-alto, 36px) - 36px) / 2)); line-height: 18px; vertical-align: top; } .crm-tabla-principal-lista:has(> .crm-celda-doble .crm-celda-doble-detalle) { display: grid; grid-template-columns: auto minmax(0, max-content) minmax(3em, 1fr); min-width: 0; } .crm-tabla-principal-lista:has(> .crm-celda-doble .crm-celda-doble-detalle) :is(.crm-celda-doble, .crm-celda-doble-texto) { display: contents; } .crm-tabla-principal-lista:has(> .crm-celda-doble .crm-celda-doble-detalle) .crm-celda-doble-icono { grid-column: 1; grid-row: 1 / span 2; align-self: center; margin-right: 8px; } .crm-tabla-principal-lista:has(> .crm-celda-doble .crm-celda-doble-detalle) .crm-celda-doble-titulo { grid-column: 2 / -1; grid-row: 1; } .crm-tabla-principal-lista:has(> .crm-celda-doble .crm-celda-doble-detalle) .crm-celda-doble-detalle { grid-column: 2; grid-row: 2; } .crm-tabla-principal-lista:has(> .crm-celda-doble .crm-celda-doble-detalle) > .crm-tabla-meta-lista { grid-column: 3; grid-row: 2; } .crm-tabla-principal-lista:has(> .crm-celda-doble .crm-celda-doble-detalle) > .crm-tabla-meta-lista::before { content: "\a0\b7 "; } .crm-tabla-tabla :is(th, td)[data-en-lista=estado] { display: table-cell; } .crm-tabla-tabla thead th:not([data-principal], .crm-tabla-casilla, .crm-tabla-expandir) { white-space: normal; overflow-wrap: break-word; line-height: 15px; } } @container crm-tabla (max-width: 399.98px) { .crm-tabla-meta-lista > span[data-medio] { display: none; } .crm-tabla-meta-lista > span::before { content: none; } .crm-tabla-meta-lista > span[data-estrecho] { display: inline; } .crm-tabla-meta-lista > span[data-estrecho] ~ span[data-estrecho]::before { content: " \b7 "; } .crm-tabla-meta-lista:has(> span[data-estrecho]) { display: block; } .crm-tabla-meta-lista:not(:has(> span[data-estrecho])) { display: none; } .crm-tabla-tabla tbody .crm-tabla-fila:has(> :is(td, th) > .crm-tabla-principal-lista > .crm-tabla-meta-lista > span[data-estrecho]) > :is(td, th) { padding-top: max(0px, calc((var(--crm-tabla-alto, 36px) - 36px) / 2)); line-height: 18px; vertical-align: top; } .crm-tabla-tabla :is(th, td)[data-en-lista=estado] { display: table-cell; } } .crm-tabla-resumen-boton, .crm-tabla-tabla [data-solo-resumen], .crm-tabla-detalle-resumen, .crm-tabla-detalle[data-resumen-detalle] { display: none; } .crm-tabla-detalle-resumen :is(.crm-celda-doble-titulo, .crm-celda-doble-detalle) { overflow: visible; white-space: normal; overflow-wrap: anywhere; } .crm-tabla-detalle-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; } @container crm-tabla (max-width: 559.98px) { .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]), .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > :is(thead, tbody, tfoot), .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > tr:not(.crm-tabla-fila), .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > tr:not(.crm-tabla-fila) > :is(td, th) { display: block; } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > thead > tr:not(.crm-tabla-grupos), .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila, .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tfoot > tr { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto auto; grid-template-rows: auto auto; align-content: center; } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > :where(thead, tbody, tfoot) > :where(tr) > :where(td, th):not([colspan]) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > :is(thead, tbody, tfoot) > tr > :is(.crm-tabla-casilla, .crm-tabla-expandir, [data-principal], .crm-tabla-fin, td[data-cifra]:not([data-prioridad]):not(td[data-cifra]:not([data-prioridad]) ~ td), th[data-alinear=fin]:not([data-prioridad], .crm-tabla-fin):not(th[data-alinear=fin]:not([data-prioridad], .crm-tabla-fin) ~ th)), .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila > :is(td, th)[data-en-lista=estado] { position: relative; inset: auto; width: auto; height: auto; overflow: visible; clip-path: none; } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > :is(thead, tbody, tfoot) > tr > .crm-tabla-casilla { grid-column: 1; grid-row: 1 / 3; } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > :is(thead, tbody, tfoot) > tr > .crm-tabla-expandir { grid-column: 2; grid-row: 1 / 3; } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > :is(thead, tbody, tfoot) > tr > [data-principal] { grid-column: 3; grid-row: 1 / 3; min-width: 0; max-width: none; overflow: hidden; } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > tr.crm-tabla-fila > td[data-principal]:not([data-crm-dos-lineas=extendida], [data-cifra], td[data-cifra]:not([data-prioridad]) ~ td) { overflow: hidden; text-overflow: ellipsis; } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila > td[data-principal] .crm-celda-persona { display: flex; align-items: flex-start; height: 100%; } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila > td[data-principal] .crm-celda-persona-marca { align-self: center; } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > :is(thead, tbody, tfoot) > tr > :is(td[data-cifra]:not([data-prioridad]):not(td[data-cifra]:not([data-prioridad]) ~ td), th[data-alinear=fin]:not([data-prioridad], .crm-tabla-fin):not(th[data-alinear=fin]:not([data-prioridad], .crm-tabla-fin) ~ th)) { grid-column: 5; grid-row: 1; } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > :is(thead, tbody, tfoot) > tr > .crm-tabla-fin { display: flex; grid-column: 6; grid-row: 1 / 3; align-items: center; width: auto; } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > tr > .crm-tabla-fin { align-self: center; } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) .crm-tabla-acciones-fila { display: none; } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) .crm-tabla-resumen-boton { display: inline-flex; } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) .crm-tabla-resumen-boton svg { transition: transform var(--crm-t-gesto) var(--crm-snap); } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila[data-abierta] .crm-tabla-resumen-boton svg { transform: rotate(180deg); } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) .crm-tabla-detalle-resumen { display: block; } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) .crm-tabla-detalle-resumen + * { margin-top: 16px; } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-detalle[data-resumen-detalle] { display: block; } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila { --crm-resumen-pad: 12px; --crm-resumen-icono: 0px; --crm-resumen-filas: 18px 16px; box-sizing: border-box; height: var(--crm-tabla-alto, 36px); border-bottom: 1px solid var(--crm-line); background: var(--crm-tabla-fila); transition: background-color var(--crm-t-salida) linear; } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila:has(> :is(td, th) .crm-celda-doble-detalle, > :is(td, th) .crm-celda-persona-detalle, > :is(td, th)[data-crm-dos-lineas], > :is(td, th)[data-en-lista=estado], > :is(td, th) > .crm-tabla-principal-lista > .crm-tabla-meta-lista > span) { align-content: start; grid-template-rows: var(--crm-resumen-filas); padding-top: max(0px, calc((var(--crm-tabla-alto, 36px) - 36px) / 2)); } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila:is(*, :focus-visible, [data-elegida], [data-tono]) > :is(td, th):is(*, :first-child, :last-child, [data-principal][data-cede]) { padding-top: 0; padding-bottom: 0; border-bottom: 0; background: transparent; box-shadow: none; line-height: 18px; vertical-align: top; } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila:has(> .crm-tabla-casilla, > .crm-tabla-expandir) { --crm-resumen-pad: 4px; } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila:has(> :is(td, th)[data-principal] .crm-celda-doble-icono) { --crm-resumen-icono: 24px; } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila:has(> :is(td, th)[data-principal] :is(.crm-celda-doble-icono .crm-avatar, .crm-celda-persona-marca)) { --crm-resumen-icono: 32px; } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila:has(> :is(td, th)[data-en-lista=estado]) > :is(td, th)[data-principal] :is(.crm-celda-doble-detalle, .crm-celda-persona-detalle, .crm-tabla-meta-lista) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila > :is(td, th)[data-en-lista=estado] { z-index: 1; display: flex; grid-column: 3 / 6; grid-row: 2; align-items: center; min-width: 0; max-width: none; padding-inline-start: calc(var(--crm-resumen-pad) + var(--crm-resumen-icono)); line-height: 16px; } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila > td[data-en-lista=estado] .crm-celda-estado { min-width: 0; max-width: 100%; } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila > td[data-en-lista=estado] .crm-celda-estado-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila:has(> td[data-en-lista=estado][data-crm-dos-lineas=extendida]) { --crm-resumen-filas: 18px minmax(16px, auto); height: auto; min-height: var(--crm-tabla-alto, 36px); padding-bottom: max(0px, calc((var(--crm-tabla-alto, 36px) - 36px) / 2)); } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila > td[data-en-lista=estado][data-crm-dos-lineas=extendida] { flex-wrap: wrap; column-gap: 12px; white-space: normal; } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila > td[data-en-lista=estado][data-crm-dos-lineas=extendida] :is(.crm-celda-estado, .crm-celda-estado-texto) { overflow: visible; overflow-wrap: break-word; text-overflow: clip; white-space: normal; } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > tr > .crm-tabla-fin { padding-inline-end: 12px; } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila:is([data-elegida], [data-activa]) { box-shadow: inset 2px 0 0 var(--crm-acento); } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila[data-tono=aviso]:not([data-elegida], [data-activa]) { box-shadow: inset 2px 0 0 var(--crm-aviso); } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila[data-tono=error]:not([data-elegida], [data-activa]) { box-shadow: inset 2px 0 0 var(--crm-error); } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila:focus-visible { box-shadow: inset 0 0 0 var(--crm-foco-ancho) var(--crm-acento); } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila:focus-visible:is([data-elegida], [data-activa]) { box-shadow: inset 0 0 0 var(--crm-foco-ancho) var(--crm-acento), inset 2px 0 0 var(--crm-acento); } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) [data-fija] { position: static; } } @media not (pointer: coarse) { @container crm-tabla (max-width: 559.98px) { .crm-tabla:not([data-densidad=comoda]) .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila > :is(td, th)[data-en-lista=estado] .crm-etiqueta { --crm-etiqueta-alto: 16px; padding: 0; border-color: transparent; background: transparent; } .crm-tabla:not([data-densidad=comoda]) .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila > :is(td, th)[data-en-lista=estado] .crm-etiqueta-icono { margin-left: 0; } } } @container crm-tabla (max-width: 559.98px) { .crm-tabla[data-densidad=comoda] .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila { --crm-resumen-filas: 18px 20px; } .crm-tabla[data-densidad=comoda] .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila > :is(td, th)[data-en-lista=estado] { line-height: 20px; } .crm-tabla[data-densidad=comoda] .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila > :is(td, th)[data-en-lista=estado] .crm-etiqueta { --crm-etiqueta-alto: 20px; padding: 0 6px; } } @media (pointer: coarse) { @container crm-tabla (max-width: 559.98px) { .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila { --crm-tabla-alto: 44px; --crm-resumen-filas: 18px 20px; } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila > :is(td, th)[data-en-lista=estado] { line-height: 20px; } .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila > :is(td, th)[data-en-lista=estado] .crm-etiqueta { --crm-etiqueta-alto: 20px; padding: 0 6px; } } } @media not (pointer: coarse) { @container crm-tabla (min-width: 400px) and (max-width: 559.98px) { .crm-tabla[data-densidad=compacta] .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila:has(> :is(td, th), > :is(td, th) > .crm-tabla-principal-lista > .crm-tabla-meta-lista > span) { --crm-resumen-filas: 20px; grid-template-columns: auto auto minmax(calc(var(--crm-resumen-pad) + 12px + var(--crm-resumen-icono) + 12ch), 1fr) minmax(0, max-content) auto auto; align-content: start; grid-template-rows: 20px; padding-top: 6px; } .crm-tabla[data-densidad=compacta] .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila > :is(td, th)[data-en-lista=estado] { grid-column: 4; grid-row: 1; justify-content: flex-end; padding-inline: 12px 0; line-height: 20px; text-align: end; } .crm-tabla[data-densidad=compacta] .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila:has(> :is(td, th), > :is(td, th) > .crm-tabla-principal-lista > .crm-tabla-meta-lista > span):has(> :is(td, th)[data-en-lista=estado][data-crm-dos-lineas=extendida]) { grid-template-rows: minmax(20px, auto); padding-bottom: 5px; } .crm-tabla[data-densidad=compacta] .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila:has(> :is(td, th)[data-en-lista=estado][data-crm-dos-lineas=extendida]) > :is(td, th)[data-principal] { align-self: start; } .crm-tabla[data-densidad=compacta] .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila > :is(td, th)[data-en-lista=estado]:not([data-crm-dos-lineas=extendida]) .crm-etiqueta-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .crm-tabla[data-densidad=compacta] .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila > :is(td, th)[data-en-lista=estado]:not([data-crm-dos-lineas=extendida]) .crm-etiqueta:not(:has(.crm-etiqueta-icono))::before { content: ""; width: 6px; height: 6px; background: currentcolor; } .crm-tabla[data-densidad=compacta] .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila > :is(td, th)[data-principal] .crm-tabla-principal-lista:has(> .crm-celda-doble .crm-celda-doble-detalle) { grid-template-columns: auto minmax(0, 1fr); } .crm-tabla[data-densidad=compacta] .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila > :is(td, th)[data-principal] :is(.crm-celda-doble-detalle, .crm-celda-persona-detalle, .crm-tabla-meta-lista) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .crm-tabla[data-densidad=compacta] .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > tr.crm-tabla-fila > td[data-principal]:not([data-crm-dos-lineas=extendida], [data-cifra], td[data-cifra]:not([data-prioridad]) ~ td):has(:is(.crm-celda-doble-icono .crm-avatar, .crm-celda-persona-marca)) { margin-block: -2px; padding-block: 2px; } .crm-tabla[data-densidad=compacta] .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila > td[data-principal] .crm-celda-persona { align-items: center; } } } @media not (pointer: coarse) { @container crm-tabla (max-width: 399.98px) { .crm-tabla[data-densidad=compacta] .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila:not(:has(> td[data-en-lista=estado])):has(> td, > td > .crm-tabla-principal-lista > .crm-tabla-meta-lista > span) { --crm-resumen-filas: 20px; align-content: start; grid-template-rows: 20px; padding-top: 6px; } .crm-tabla[data-densidad=compacta] .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila:not(:has(> td[data-en-lista=estado])) > td[data-principal] .crm-tabla-principal-lista:has(> .crm-celda-doble .crm-celda-doble-detalle) { grid-template-columns: auto minmax(0, 1fr); } .crm-tabla[data-densidad=compacta] .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila:not(:has(> td[data-en-lista=estado])) > td[data-principal] :is(.crm-celda-doble-detalle, .crm-celda-persona-detalle, .crm-tabla-meta-lista) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .crm-tabla[data-densidad=compacta] .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > tr.crm-tabla-fila:not(:has(> td[data-en-lista=estado])) > td[data-principal]:not([data-crm-dos-lineas=extendida], [data-cifra], td[data-cifra]:not([data-prioridad]) ~ td):has(:is(.crm-celda-doble-icono .crm-avatar, .crm-celda-persona-marca)) { margin-block: -2px; padding-block: 2px; } .crm-tabla[data-densidad=compacta] .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila:not(:has(> td[data-en-lista=estado])) > td[data-principal] .crm-celda-persona { align-items: center; } .crm-tabla[data-densidad=compacta] .crm-tabla-tabla:is([data-resumen=""], [data-resumen=medido][data-resumen-activo]) > tbody > .crm-tabla-fila:has(> td[data-en-lista=estado]) { height: auto; min-height: var(--crm-tabla-alto, 32px); } } } .crm-tabla[data-densidad=compacta] .crm-tabla-fila:has(> :is(td, th) .crm-celda-doble-detalle, > :is(td, th)[data-crm-dos-lineas]) > :is(td, th) { padding-top: 0; line-height: 20px; vertical-align: middle; } .crm-tabla[data-densidad=compacta] .crm-tabla-fila:has(> :is(td, th) .crm-celda-doble-detalle, > :is(td, th)[data-crm-dos-lineas]) .crm-celda-doble { vertical-align: middle; } .crm-tabla[data-densidad=compacta] .crm-tabla-fila > :is(td, th) .crm-celda-doble-texto { display: flex; align-items: baseline; gap: 8px; } .crm-tabla[data-densidad=compacta] .crm-tabla-fila > :is(td, th) .crm-celda-doble-titulo { flex: 0 1 auto; min-width: 0; line-height: 20px; } .crm-tabla[data-densidad=compacta] .crm-tabla-fila > :is(td, th) .crm-celda-doble-detalle { flex: 0 4 auto; min-width: 0; line-height: 20px; } .crm-tabla[data-densidad=compacta] .crm-tabla-fila > :is(td, th)[data-consulta] { -webkit-touch-callout: none; } @media (hover: none) { .crm-tabla[data-densidad=compacta] .crm-tabla-fila > :is(td, th)[data-consulta] { -webkit-user-select: none; user-select: none; } } .crm-tabla[data-densidad=compacta] .crm-tabla-fila > :is(td, th)[data-crm-dos-lineas=""] { max-width: var(--crm-col-ancho, none); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-tabla[data-densidad=compacta] .crm-tabla-fila > :is(td, th)[data-crm-dos-lineas=""] :is(div, p, span, ul, li) { display: inline; margin-top: 0; margin-bottom: 0; } .crm-tabla[data-densidad=compacta] .crm-tabla-fila > :is(td, th)[data-crm-dos-lineas=""] > * + *, .crm-tabla[data-densidad=compacta] .crm-tabla-fila > :is(td, th)[data-crm-dos-lineas=""] > * > * + * { margin-left: 8px; } .crm-tabla-fila > :is(td, th)[data-crm-dos-lineas=extendida] { white-space: normal; overflow-wrap: anywhere; } @container crm-tabla (max-width: 559.98px) { .crm-tabla-tabla tbody td[data-principal][data-crm-dos-lineas=extendida] { overflow: visible; text-overflow: clip; } } .crm-tabla[data-densidad=compacta] .crm-tabla-fila:has(> :is(td, th)[data-crm-dos-lineas=extendida]) > :is(td, th) { box-sizing: border-box; padding-top: 6px; padding-bottom: 5px; line-height: 20px; vertical-align: top; } .crm-tabla[data-densidad=compacta] .crm-tabla-fila:has(> :is(td, th)[data-crm-dos-lineas=extendida]) .crm-celda-doble { vertical-align: top; } @container crm-tabla (max-width: 559.98px) { .crm-tabla[data-densidad=compacta] .crm-tabla-principal-lista:has(> .crm-celda-doble .crm-celda-doble-detalle) { grid-template-columns: auto minmax(0, max-content) fit-content(40%) minmax(3em, 1fr); align-items: baseline; } .crm-tabla[data-densidad=compacta] .crm-tabla-principal-lista:has(> .crm-celda-doble .crm-celda-doble-detalle) :is(.crm-celda-doble, .crm-celda-doble-texto) { display: contents; } .crm-tabla[data-densidad=compacta] .crm-tabla-principal-lista:has(> .crm-celda-doble .crm-celda-doble-detalle) .crm-celda-doble-icono { grid-row: 1; align-self: center; } .crm-tabla[data-densidad=compacta] .crm-tabla-principal-lista:has(> .crm-celda-doble .crm-celda-doble-detalle) .crm-celda-doble-titulo { grid-column: 2; grid-row: 1; min-width: 0; } .crm-tabla[data-densidad=compacta] .crm-tabla-principal-lista:has(> .crm-celda-doble .crm-celda-doble-detalle) .crm-celda-doble-detalle { grid-column: 3; grid-row: 1; min-width: 0; margin-left: 8px; } .crm-tabla[data-densidad=compacta] .crm-tabla-principal-lista:has(> .crm-celda-doble .crm-celda-doble-detalle) > .crm-tabla-meta-lista { grid-column: 4; grid-row: 1; line-height: 20px; } .crm-tabla[data-densidad=compacta] .crm-tabla-tabla tbody .crm-tabla-fila:has(> :is(td, th) > .crm-tabla-principal-lista > .crm-tabla-meta-lista > span[data-medio]) > :is(td, th) { padding-top: 0; line-height: 20px; vertical-align: middle; } .crm-tabla[data-densidad=compacta] .crm-tabla-principal-lista:not(:has(> .crm-celda-doble .crm-celda-doble-detalle)) > .crm-tabla-meta-lista:has(> span[data-medio]) { display: inline; } .crm-tabla[data-densidad=compacta] .crm-tabla-principal-lista:not(:has(> .crm-celda-doble .crm-celda-doble-detalle)) > .crm-tabla-meta-lista::before { content: " \b7 "; } } @container crm-tabla (max-width: 399.98px) { .crm-tabla[data-densidad=compacta] .crm-tabla-tabla tbody .crm-tabla-fila:has(> :is(td, th) > .crm-tabla-principal-lista > .crm-tabla-meta-lista > span[data-estrecho]) > :is(td, th) { padding-top: 0; line-height: 20px; vertical-align: middle; } .crm-tabla[data-densidad=compacta] .crm-tabla-principal-lista:not(:has(> .crm-celda-doble .crm-celda-doble-detalle)) > .crm-tabla-meta-lista:has(> span[data-estrecho]) { display: inline; } .crm-tabla[data-densidad=compacta] .crm-tabla-principal-lista:not(:has(> .crm-celda-doble .crm-celda-doble-detalle)) > .crm-tabla-meta-lista:not(:has(> span[data-estrecho])) { display: none; } } .crm-tabla-consulta { display: grid; gap: 2px; white-space: normal; overflow-wrap: anywhere; } .crm-tabla-consulta-titulo { color: var(--crm-text); font-weight: 500; } .crm-tabla-consulta-detalle, .crm-tabla-consulta-meta { color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-tabla-tabla tbody .crm-tabla-fila > :is(td, th).crm-tabla-nota-fila { padding-block: calc((var(--crm-tabla-alto, 36px) - 16px) / 2) calc((var(--crm-tabla-alto, 36px) - 16px) / 2 - 1px); color: var(--crm-muted); font-size: 12px; line-height: 16px; text-align: left; vertical-align: top; white-space: normal; } @container crm-tabla (max-width: 559.98px) { .crm-tabla-tabla tbody .crm-tabla-fila > :is(td, th).crm-tabla-nota-fila { min-width: 50cqi; } } .crm-barra-filtros { container: crm-barra-filtros / inline-size; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; min-width: 0; min-height: 28px; } .crm-barra-filtros-filtros { display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; } .crm-barra-filtros-fin { display: flex; flex: 1 0 auto; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; } .crm-barra-filtros-resultado { color: var(--crm-muted); font-size: 12px; font-variant-numeric: tabular-nums; line-height: 16px; white-space: nowrap; } @container crm-barra-filtros (max-width: 559.98px) { .crm-barra-filtros-busqueda { flex: 1 1 100%; } .crm-barra-filtros-filtros { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; overscroll-behavior-x: contain; mask-image: linear-gradient( to right, var(--crm-text) calc(100% - 24px), transparent); } .crm-barra-filtros-filtros::-webkit-scrollbar { display: none; } .crm-barra-filtros-filtros > * { flex: none; } .crm-barra-filtros-fin { flex: 1 1 100%; justify-content: space-between; } } @media (pointer: coarse) { .crm-barra-filtros-busqueda { height: 40px; } .crm-barra-filtros-busqueda input { font-size: 16px; } } .crm-tabla-barra :is(.crm-chip-filtro, .crm-tabla-anadir, .crm-tabla-limpiar) { height: 28px; } .crm-texto-extenso { display: grid; gap: 8px; min-width: 0; } .crm-texto-extenso-cuerpo { display: grid; gap: 8px; min-width: 0; color: var(--crm-text-2); font-size: 14px; line-height: 22px; overflow-wrap: anywhere; } .crm-texto-extenso[data-fuente=mono] .crm-texto-extenso-cuerpo { font-family: var(--crm-mono); font-size: 12px; font-variant-numeric: tabular-nums; line-height: 20px; } .crm-texto-extenso-cuerpo > p { max-width: 68ch; margin: 0; white-space: pre-line; } .crm-texto-extenso-cuerpo[data-plegado] { max-height: calc(var(--crm-texto-lineas, 6) * 22px); overflow: hidden; -webkit-mask-image: linear-gradient( 180deg, currentColor calc(100% - 44px), transparent); mask-image: linear-gradient( 180deg, currentColor calc(100% - 44px), transparent); } .crm-texto-extenso[data-fuente=mono] .crm-texto-extenso-cuerpo[data-plegado] { max-height: calc(var(--crm-texto-lineas, 6) * 20px); } .crm-texto-extenso-vacio { color: var(--crm-dim); } .crm-texto-extenso-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: 32px; } .crm-texto-extenso-alternar { margin: 0; padding: 0; border: 0; background: none; color: var(--crm-text-2); font: inherit; font-size: 13px; line-height: 20px; cursor: pointer; text-decoration: underline; text-decoration-color: var(--crm-line-2); text-underline-offset: 2px; } .crm-texto-extenso-alternar:hover { color: var(--crm-text); text-decoration-color: currentColor; } .crm-texto-extenso-alternar:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-tabla-estado-punto { display: inline-block; box-sizing: border-box; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--crm-muted); vertical-align: middle; } [data-tono-estado=aviso] > .crm-tabla-estado-punto { background: var(--crm-aviso); } [data-tono-estado=error] > .crm-tabla-estado-punto { background: var(--crm-error); } [data-tono-estado=tenue] > .crm-tabla-estado-punto { border: 1px solid var(--crm-muted); background: transparent; } .crm-tabla-leyenda { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 8px; padding: 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; list-style: none; } .crm-tabla-leyenda > li { display: inline-flex; align-items: center; } .crm-tabla-subtotal > td { height: var(--crm-tabla-alto, 36px); padding: 0 12px; border-top: 1px solid var(--crm-line-2); border-bottom: 1px solid var(--crm-line); background: var(--crm-tabla-fondo); color: var(--crm-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; } .crm-tabla-subtotal[data-destacada] > td { color: var(--crm-text); font-weight: 500; } .crm-tabla-fila[data-anidada] { --crm-tabla-fila: var(--crm-bg); } .crm-tabla-fila[data-anidada] > :is(td, th)[data-principal] { padding-left: 32px; background-image: linear-gradient(var(--crm-line-2), var(--crm-line-2)); background-position: 18px 0; background-repeat: no-repeat; background-size: 1px 100%; } .crm-tabla-fila > :is(td, th)[data-calor] { background-image: linear-gradient(color-mix(in srgb, var(--crm-serie-1) calc(var(--crm-intensidad, 0) * 14%), transparent), color-mix(in srgb, var(--crm-serie-1) calc(var(--crm-intensidad, 0) * 14%), transparent)); } .crm-tabla-fila > :is(td, th)[data-resaltada] { color: var(--crm-text); font-weight: 500; } .crm-tabla-fila[data-destacada] { --crm-tabla-fila: var(--crm-panel-2); } .crm-tabla-fila[data-destacada]:not([data-elegida], [data-activa], [data-tono=aviso], [data-tono=error]) > :is(td, th)[data-principal] { box-shadow: inset 2px 0 0 var(--crm-text-2); } :where(.crm-tabla-fila > th[scope=row]) { font-weight: inherit; text-align: start; } .crm-celda-persona[data-situacion=provisional] .crm-celda-persona-marca, .crm-celda-persona-vacante { box-sizing: border-box; width: 24px; height: 24px; border: 1px dashed var(--crm-line-2); border-radius: 0; background: transparent; color: var(--crm-muted); } .crm-celda-persona-vacante { display: inline-flex; align-items: center; justify-content: center; } .crm-celda-persona-vacante svg { width: 14px; height: 14px; } .crm-celda-persona[data-situacion=vacante][data-tono=error] .crm-celda-persona-nombre { color: var(--crm-error); } .crm-celda-persona[data-situacion=vacante][data-tono=aviso] .crm-celda-persona-nombre { color: var(--crm-aviso); } .crm-celda-persona[data-situacion=vacante][data-tono=hecho] .crm-celda-persona-nombre { color: var(--crm-acento); } .crm-celda-persona[data-situacion=vacante][data-tono=espera] .crm-celda-persona-nombre { color: var(--crm-acento); } .crm-celda-persona[data-situacion=vacante][data-tono=neutro] .crm-celda-persona-nombre { color: var(--crm-muted); } .crm-celda-persona-marca { transition: border-color var(--crm-t-color) var(--crm-snap), background-color var(--crm-t-color) var(--crm-snap); } @media (prefers-reduced-motion: reduce) { .crm-celda-persona-marca { transition: none; } } .crm-lista[data-posicion-acciones=pie] > li[data-con-acciones] { flex-direction: column; align-items: stretch; } .crm-lista[data-posicion-acciones=pie] > li[data-con-acciones] > .crm-lista-fila { flex: none; } .crm-lista[data-posicion-acciones=pie] .crm-lista-acciones { justify-content: flex-end; gap: 8px; padding: 8px; padding-top: 0; } .crm-lista[data-posicion-acciones=pie] > li[data-con-acciones] > .crm-lista-fila:not([data-contenido]) + .crm-lista-acciones { padding-top: 8px; } .crm-lista > li[data-con-acciones] { display: flex; align-items: center; min-width: 0; border-bottom: 1px solid var(--crm-line); } .crm-lista > li[data-con-acciones] > .crm-lista-fila { flex: 1; min-width: 0; border-bottom: 0; } .crm-lista-acciones { display: flex; align-items: center; gap: 4px; padding-inline-end: 12px; flex-shrink: 0; } .crm-lista > li[aria-current=true] { position: relative; background: var(--crm-panel-3); } .crm-lista-fila[data-contenido] { height: auto; min-height: 40px; padding-block: 8px; } .crm-lista[data-densidad=compacta] .crm-lista-fila[data-contenido] { height: auto; min-height: 32px; } .crm-lista-contenido { flex: 1; min-width: 0; text-align: start; } .crm-texto-plegable { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 100%; } .crm-texto-plegable, .crm-texto-plegable *, .crm-texto-plegable *::before, .crm-texto-plegable *::after { box-sizing: border-box; } .crm-texto-plegable-texto { width: 100%; min-width: 0; overflow-wrap: anywhere; } .crm-texto-plegable-texto[data-plegado] { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: var(--crm-plegable-lineas, 2); line-clamp: var(--crm-plegable-lineas, 2); } .crm-texto-plegable-boton { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--crm-text); font-family: var(--crm-sans); font-size: 12px; font-weight: 500; line-height: 16px; text-decoration: underline; text-decoration-color: var(--crm-line-2); text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; transition: text-decoration-color var(--crm-t-color) ease-out; } .crm-texto-plegable-boton svg { width: 14px; height: 14px; color: var(--crm-muted); transition: transform var(--crm-t-gesto) var(--crm-snap); } .crm-texto-plegable[data-abierto] .crm-texto-plegable-boton svg { transform: rotate(180deg); } @media (hover: hover) { .crm-texto-plegable-boton:hover { text-decoration-color: var(--crm-text); } } .crm-texto-plegable-boton:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } @media (pointer: coarse) { .crm-texto-plegable-boton::after { content: ""; position: absolute; inset: -10px -8px; } } @media (prefers-reduced-motion: reduce) { .crm-texto-plegable-boton svg { transition: none; } } :is(.crm-expediente, .crm-sello, .crm-pista, .crm-reparto, .crm-guion, .crm-objecion, .crm-cierre, .crm-cuenta-ticket) *, :is(.crm-expediente, .crm-sello, .crm-pista, .crm-reparto, .crm-guion, .crm-objecion, .crm-cierre, .crm-cuenta-ticket) *::before, :is(.crm-expediente, .crm-sello, .crm-pista, .crm-reparto, .crm-guion, .crm-objecion, .crm-cierre, .crm-cuenta-ticket) *::after { box-sizing: border-box; } :is(.crm-expediente, .crm-sello, .crm-pista, .crm-reparto, .crm-guion, .crm-objecion, .crm-cierre, .crm-cuenta-ticket) { min-width: 0; color: var(--crm-text-2); font-family: var(--crm-sans); font-size: 13px; line-height: 20px; letter-spacing: -0.005em; } :is(.crm-expediente, .crm-sello, .crm-pista, .crm-guion) :focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; } .crm-expediente { container-type: inline-size; } .crm-expediente-carril { position: relative; display: grid; margin: 0; padding: 0; list-style: none; } .crm-expediente-carril::before { content: ""; position: absolute; top: 16px; bottom: 16px; left: 16px; width: 1px; background: var(--crm-line-2); } .crm-expediente-hito { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 16px; padding-bottom: 8px; } .crm-expediente-hito:not(:first-child) { padding-top: 40px; } .crm-expediente-cota { position: absolute; top: 0; left: 0; display: flex; align-items: center; height: 40px; padding-left: 8px; } .crm-expediente-cota::before, .crm-expediente-cota::after { content: ""; position: absolute; left: 12px; width: 9px; height: 1px; background: var(--crm-control); } .crm-expediente-cota::before { top: 8px; } .crm-expediente-cota::after { bottom: 8px; } .crm-expediente-cota > span { position: relative; padding: 2px 4px; background: var(--crm-bg); color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; white-space: nowrap; transform: translateX(-4px); } .crm-expediente-folio { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--crm-line-2); background: var(--crm-bg); color: var(--crm-text); font-family: var(--crm-mono); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; } .crm-expediente-hito[data-estado=hecho] .crm-expediente-folio { border-color: var(--crm-control); } .crm-expediente-hito[data-estado=pendiente] .crm-expediente-folio { border-style: dashed; border-color: var(--crm-acento-linea); color: var(--crm-acento); } .crm-expediente-hito[data-estado=pendiente] .crm-expediente-folio::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--crm-acento); opacity: 0; animation: crm-expediente-latido 2.4s var(--crm-curva) infinite; } .crm-expediente-hito[data-estado=vencido] .crm-expediente-folio { border-style: dashed; border-color: var(--crm-error-linea); color: var(--crm-error); } @keyframes crm-expediente-latido { 0% { opacity: 0.9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.35); } } .crm-expediente-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 12px; min-width: 0; } .crm-expediente-cabeza { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2px; min-width: 0; margin: -6px 0 0 -8px; padding: 6px 8px 8px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; transition: background-color var(--crm-t-salida) var(--crm-snap); } button.crm-expediente-cabeza { cursor: pointer; } @media (hover: hover) { button.crm-expediente-cabeza:hover { background: var(--crm-panel-2); transition-duration: 0ms; } } button.crm-expediente-cabeza:focus-visible { outline-offset: -1px; } .crm-expediente-abre { flex: none; width: 16px; height: 16px; color: var(--crm-muted); stroke-width: 1.6; transition: transform var(--crm-t-gesto) var(--crm-snap); } .crm-expediente-hito[data-abierto] .crm-expediente-abre { transform: rotate(180deg); color: var(--crm-text); } .crm-expediente-rotulo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-expediente-rotulo time { outline: 0; } .crm-expediente-tipo { display: inline-grid; place-items: center; width: 14px; height: 14px; } .crm-expediente-tipo svg { width: 14px; height: 14px; stroke-width: 1.5; } .crm-expediente-marca { margin-left: 4px; padding: 0 6px; border-left: 2px solid var(--crm-acento); color: var(--crm-acento); text-transform: none; letter-spacing: 0; } .crm-expediente-hito[data-estado=vencido] .crm-expediente-marca { border-left-color: var(--crm-error); color: var(--crm-error); } .crm-expediente-titulo { display: inline-flex; align-items: center; gap: 6px; color: var(--crm-text); font-size: 15px; font-weight: 500; line-height: 22px; letter-spacing: -0.01em; } .crm-expediente-quien { color: var(--crm-muted); } .crm-expediente-cita { display: block; max-width: 68ch; margin-top: 6px; padding-left: 12px; border-left: 1px solid var(--crm-line-2); color: var(--crm-text-2); font-size: 14px; line-height: 22px; quotes: "\ab" "\bb"; } .crm-expediente-accion { padding-top: 0; } .crm-expediente-contenido { position: relative; z-index: 1; background: var(--crm-bg); grid-column: 1 / -1; min-width: 0; margin-top: 12px; padding: 20px 0 8px; border-top: 1px solid var(--crm-line); animation: crm-expediente-abrir var(--crm-t-entrada) var(--crm-snap); } @container (max-width: 560px) { .crm-expediente-carril::before { left: 12px; top: 12px; bottom: 12px; } .crm-expediente-hito { grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; } .crm-expediente-hito:not(:first-child) { padding-top: 32px; } .crm-expediente-folio { width: 24px; height: 24px; font-size: 11px; } .crm-expediente-cota { height: 32px; padding-left: 4px; } .crm-expediente-cota::before, .crm-expediente-cota::after { left: 8px; } .crm-expediente-cuerpo { grid-template-columns: minmax(0, 1fr); row-gap: 8px; } .crm-expediente-accion { grid-column: 1; } .crm-expediente-contenido { margin-left: -36px; } } @keyframes crm-expediente-abrir { from { opacity: 0; transform: translateY(-4px); } } .crm-sello { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: start; gap: 20px; } .crm-sello[data-tamano=compacto] { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; } .crm-sello-total { display: grid; place-items: center; align-content: center; gap: 2px; width: 64px; height: 64px; border: 1px solid var(--crm-control); color: var(--crm-text); } .crm-sello[data-tamano=compacto] .crm-sello-total { width: 40px; height: 40px; } .crm-sello-total[data-clase=A] { border-color: var(--crm-acento-linea); box-shadow: inset 0 -2px 0 var(--crm-acento); } .crm-sello-total[data-clase=C] { color: var(--crm-muted); } .crm-sello-total-letra { display: inline-flex; align-items: baseline; font-size: 40px; font-weight: 500; line-height: 40px; letter-spacing: -0.035em; } .crm-sello[data-tamano=compacto] .crm-sello-total-letra { font-size: 24px; line-height: 24px; } .crm-sello-total-letra .crm-sello-aprox { margin-right: 2px; color: var(--crm-muted); font-size: 20px; line-height: 20px; } .crm-sello[data-tamano=compacto] .crm-sello-total-letra .crm-sello-aprox { font-size: 13px; } .crm-sello-total-rotulo { color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-sello[data-tamano=compacto] .crm-sello-total-rotulo { display: none; } .crm-sello-ejes { display: grid; gap: 8px; margin: 0; } .crm-sello[data-tamano=compacto] .crm-sello-ejes { grid-template-columns: repeat(3, max-content); column-gap: 12px; } .crm-sello[data-tamano=compacto] .crm-sello-eje { grid-template-columns: max-content; justify-items: start; row-gap: 2px; } .crm-sello-eje { display: grid; grid-template-columns: minmax(96px, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 4px; } .crm-sello[data-tamano=normal] .crm-sello-eje + .crm-sello-eje { padding-top: 8px; border-top: 1px solid var(--crm-line); } .crm-sello-nombre { display: flex; align-items: center; min-height: 28px; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-sello[data-tamano=compacto] .crm-sello-nombre { min-height: 16px; font-family: var(--crm-sans); font-size: 12px; letter-spacing: 0; text-transform: none; } .crm-sello[data-tamano=compacto] .crm-sello-valor > .crm-sello-letra { grid-column: 1; } .crm-sello[data-tamano=compacto] .crm-sello-letra:not([data-elegida]) { border-style: dashed; } .crm-sello-valor { display: contents; } .crm-sello-valor > .crm-sello-escala { grid-column: 2; } .crm-sello-escala { display: inline-flex; align-items: center; gap: 4px; height: 28px; } .crm-sello[data-tamano=compacto] .crm-sello-escala { height: 24px; } .crm-sello-letra { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 24px; padding: 0; border: 1px solid var(--crm-line); background: transparent; color: var(--crm-dim); font-family: var(--crm-sans); font-size: 13px; font-weight: 500; line-height: 20px; font-variant-numeric: tabular-nums; transition: background-color var(--crm-t-salida) var(--crm-snap), color var(--crm-t-color) var(--crm-snap); } .crm-sello[data-tamano=compacto] .crm-sello-letra { width: 24px; height: 20px; font-size: 12px; line-height: 16px; } .crm-sello-letra[data-elegida] { width: 40px; border-color: var(--crm-control); background: var(--crm-panel-3); color: var(--crm-text); clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%); padding-left: 6px; } .crm-sello[data-tamano=compacto] .crm-sello-letra[data-elegida] { width: 32px; clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%); padding-left: 4px; } .crm-sello-letra[data-elegida][data-clase=A] { box-shadow: inset 0 -2px 0 var(--crm-acento); } .crm-sello-letra .crm-sello-aprox { margin-right: 2px; color: var(--crm-muted); font-weight: 400; } button.crm-sello-letra { cursor: pointer; } @media (hover: hover) { button.crm-sello-letra:not([data-elegida]):hover { background: var(--crm-panel-2); color: var(--crm-text-2); transition-duration: 0ms; } } button.crm-sello-letra:active { transform: scale(0.96); transition: transform var(--crm-t-pulsar) var(--crm-snap); } .crm-sello-escala[aria-disabled=true] .crm-sello-letra { border-color: var(--crm-line-2); color: var(--crm-dim); cursor: not-allowed; } .crm-sello-eje[data-vacio] .crm-sello-letra { border-style: dashed; } .crm-sello-motivo { grid-column: 1 / -1; max-width: 68ch; color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-pista { display: grid; gap: 12px; margin: 0; } .crm-reparto { container-type: inline-size; display: grid; gap: 8px; padding-bottom: 20px; } .crm-reparto-cifras { display: flex; justify-content: space-between; align-items: baseline; color: var(--crm-muted); } .crm-reparto-cifra { color: var(--crm-text); font-size: 28px; font-weight: 500; line-height: 32px; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; } .crm-reparto[data-tamano=compacto] .crm-reparto-cifra { font-size: 20px; line-height: 28px; } .crm-reparto-cifra small, .crm-pista-dato small, .crm-cierre-cifra small { color: var(--crm-muted); font-size: 0.6em; font-weight: 400; letter-spacing: 0; } .crm-reparto-barra { position: relative; display: flex; height: 8px; background: var(--crm-panel-2); } .crm-reparto-cliente { background: var(--crm-serie-2); } .crm-reparto-hueco { background: var(--crm-panel-3); } .crm-reparto-nosotros { background: var(--crm-serie-6); } .crm-reparto-cota { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--crm-text); } .crm-reparto-cota > span { position: absolute; top: 16px; left: 0; padding-left: 6px; border-left: 1px solid var(--crm-text); color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; white-space: nowrap; } .crm-reparto-cota > span > b { font-weight: 400; } .crm-reparto-cota[data-ancla=derecha] > span { left: auto; right: 0; padding-left: 0; padding-right: 6px; border-left: 0; border-right: 1px solid var(--crm-text); } @container (max-width: 400px) { .crm-reparto-cota-texto { display: none; } } .crm-reparto[data-cumple] .crm-reparto-cota > span { color: var(--crm-acento); } .crm-reparto-ventana { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 16px 0 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-reparto-resto::before { content: ""; display: inline-block; width: 12px; height: 8px; margin-right: 6px; background: var(--crm-panel-3); border: 1px solid var(--crm-line-2); vertical-align: 0; } .crm-pista-mesa { position: relative; display: grid; border-top: 1px solid var(--crm-line); border-bottom: 1px solid var(--crm-line); } .crm-pista-regla, .crm-pista-voz, .crm-pista-marcas { display: grid; grid-template-columns: 112px minmax(0, 1fr) 48px; align-items: center; column-gap: 12px; } .crm-pista-regla { height: 24px; border-bottom: 1px solid var(--crm-line); } .crm-pista-escala { position: relative; align-self: stretch; min-width: 0; } .crm-pista-minuto { position: absolute; top: 4px; padding-left: 4px; border-left: 1px solid var(--crm-line-2); color: var(--crm-dim); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; } .crm-pista-minuto[data-fin] { padding-left: 0; padding-right: 4px; border-left: 0; border-right: 1px solid var(--crm-line-2); transform: translateX(-100%); } .crm-pista-voces { display: grid; margin: 0; padding: 0; list-style: none; } .crm-pista-voz { height: 36px; border-bottom: 1px solid var(--crm-line); transition: background-color var(--crm-t-salida) var(--crm-snap); } .crm-pista-voz:last-child { border-bottom: 0; } @media (hover: hover) { .crm-pista-voz:hover { background: var(--crm-panel-2); transition-duration: 0ms; } } .crm-pista-nombre { display: flex; align-items: baseline; gap: 6px; min-width: 0; padding-left: 8px; overflow: hidden; white-space: nowrap; } .crm-pista-quien { color: var(--crm-text); font-weight: 500; } .crm-pista-voz[data-lado=nosotros] .crm-pista-quien { color: var(--crm-text-2); font-weight: 400; } .crm-pista-rol { overflow: hidden; color: var(--crm-muted); font-size: 12px; text-overflow: ellipsis; } .crm-pista-ondas { position: absolute; top: 12px; left: 0; width: 100%; height: 12px; overflow: visible; } .crm-pista-voz[data-lado=cliente] .crm-pista-ondas rect { fill: var(--crm-serie-2); } .crm-pista-voz[data-lado=nosotros] .crm-pista-ondas rect { fill: var(--crm-serie-6); } .crm-pista-ondas rect { transform-origin: center; transform-box: fill-box; } .crm-pista-corte { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--crm-control); } .crm-pista-fuera { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient( 135deg, var(--crm-rejilla) 0 1px, transparent 1px 6px); pointer-events: none; } .crm-pista-dato { justify-self: end; padding-right: 8px; color: var(--crm-text); font-weight: 500; font-variant-numeric: tabular-nums; outline-offset: 2px; } .crm-pista-marcas { height: 44px; } .crm-pista-marca[data-fila="2"] { top: 24px; } .crm-pista-marca[data-fin] { padding-left: 0; padding-right: 4px; border-left: 0; border-right: 1px solid var(--crm-control); transform: translateX(-100%); } .crm-pista-marca { position: absolute; top: 4px; padding-left: 4px; border-left: 1px solid var(--crm-control); color: var(--crm-muted); font-size: 12px; line-height: 16px; white-space: nowrap; } .crm-pista-leyenda { display: flex; flex-wrap: wrap; gap: 16px; color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-pista-leyenda [data-lado]::before { content: ""; display: inline-block; width: 12px; height: 8px; margin-right: 6px; vertical-align: 0; } .crm-pista-leyenda [data-lado=cliente]::before { background: var(--crm-serie-2); } .crm-pista-leyenda [data-lado=nosotros]::before { background: var(--crm-serie-6); } .crm-pista-leyenda > :last-child { margin-left: auto; font-family: var(--crm-mono); font-size: 11px; } @container (max-width: 560px) { .crm-pista-regla, .crm-pista-voz, .crm-pista-marcas { grid-template-columns: 72px minmax(0, 1fr) 40px; column-gap: 8px; } .crm-pista-rol { display: none; } } @media (max-width: 560px) { .crm-pista-regla, .crm-pista-voz, .crm-pista-marcas { grid-template-columns: 72px minmax(0, 1fr) 40px; column-gap: 8px; } .crm-pista-rol { display: none; } .crm-pista-minuto:not([data-par]) { display: none; } } .crm-guion { display: grid; gap: 16px; } .crm-guion-herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .crm-guion-herramientas > .crm-campo-caja, .crm-guion-herramientas > :nth-child(2) { flex: 1 1 200px; max-width: 320px; } .crm-guion-cuenta { margin-left: auto; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; font-variant-numeric: tabular-nums; } .crm-guion-hoja { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--crm-line); } .crm-guion-parlamento { display: grid; grid-template-columns: 48px minmax(0, 68ch); column-gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--crm-line); } .crm-guion-capitulo { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-items: baseline; padding: 20px 0 8px; border-bottom: 1px solid var(--crm-line-2); color: var(--crm-text); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-guion-pliegue { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 8px; font-family: var(--crm-sans); font-size: 12px; letter-spacing: 0; text-transform: none; } .crm-guion-aviso { color: var(--crm-muted); } .crm-guion-desplegar { height: 24px; padding: 0 8px; border: 1px solid var(--crm-line-2); background: transparent; color: var(--crm-text-2); font-family: var(--crm-sans); font-size: 12px; line-height: 16px; cursor: pointer; transition: background-color var(--crm-t-salida) var(--crm-snap); } @media (hover: hover) { .crm-guion-desplegar:hover { background: var(--crm-panel-2); color: var(--crm-text); transition-duration: 0ms; } } .crm-guion-desplegar:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; } .crm-guion-capitulo[data-plegado] { border-bottom-style: dashed; } .crm-guion-capitulo > span:first-child { color: var(--crm-muted); letter-spacing: 0; font-variant-numeric: tabular-nums; } .crm-guion-tiempo { padding-top: 2px; color: var(--crm-dim); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; font-variant-numeric: tabular-nums; } .crm-guion-bloque { display: grid; gap: 4px; min-width: 0; } .crm-guion-personaje { color: var(--crm-text); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-guion-parlamento[data-lado=nosotros] .crm-guion-personaje { color: var(--crm-muted); } .crm-guion-parlamento[data-lado=cliente] .crm-guion-personaje::before, .crm-guion-parlamento[data-lado=nosotros] .crm-guion-personaje::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; vertical-align: 0; } .crm-guion-parlamento[data-lado=cliente] .crm-guion-personaje::before { background: var(--crm-serie-2); } .crm-guion-parlamento[data-lado=nosotros] .crm-guion-personaje::before { background: var(--crm-serie-6); } .crm-guion-texto { margin: 0; color: var(--crm-text-2); font-size: 14px; line-height: 22px; overflow-wrap: anywhere; } .crm-guion-parlamento[data-lado=nosotros] .crm-guion-texto { color: var(--crm-muted); } .crm-guion-texto mark { background: var(--crm-seleccion); color: var(--crm-text); } @media (max-width: 560px) { .crm-guion-parlamento { grid-template-columns: minmax(0, 1fr); row-gap: 4px; } } .crm-objecion { display: grid; gap: 8px; padding: 16px 20px; border: 1px solid var(--crm-line); border-left: 2px solid var(--crm-line-2); background: var(--crm-panel); } .crm-objecion[data-estado=abierta] { border-left-color: var(--crm-error); } .crm-objecion[data-estado=a_medias] { border-left-color: var(--crm-aviso); } .crm-objecion[data-estado=resuelta] { border-left-color: var(--crm-acento); } .crm-objecion-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 16px; } .crm-objecion-cita { color: var(--crm-text); font-size: 15px; font-weight: 500; line-height: 22px; letter-spacing: -0.01em; quotes: "\ab" "\bb"; } .crm-objecion-sello { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border: 1px solid currentColor; font-family: var(--crm-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; transform: rotate(-2deg); } .crm-objecion[data-estado=abierta] .crm-objecion-sello { color: var(--crm-error); } .crm-objecion[data-estado=a_medias] .crm-objecion-sello { color: var(--crm-aviso); } .crm-objecion[data-estado=resuelta] .crm-objecion-sello { color: var(--crm-acento); } .crm-objecion-meta { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; } .crm-objecion-meta > span:not(:last-child)::after { content: " \b7"; color: var(--crm-dim); } .crm-objecion-pares { display: grid; gap: 8px; margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--crm-line); } .crm-objecion-pares > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; } .crm-objecion-pares dt { color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 20px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-objecion-pares dd { margin: 0; max-width: 68ch; } .crm-objecion-pares [data-cierre] dd { color: var(--crm-text); } @media (max-width: 560px) { .crm-objecion { padding: 16px; } .crm-objecion-pares > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } } .crm-cierre { display: grid; gap: 12px; } .crm-cierre-lectura { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; } .crm-cierre-cifra { color: var(--crm-text); font-size: 40px; font-weight: 500; line-height: 44px; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; } .crm-cierre[data-tamano=compacto] .crm-cierre-cifra { font-size: 28px; line-height: 32px; } .crm-cierre-etiqueta { color: var(--crm-text-2); font-size: 14px; line-height: 22px; } .crm-cierre[data-tamano=compacto] .crm-cierre-etiqueta { font-size: 13px; line-height: 20px; } .crm-cierre-regla { position: relative; height: 32px; border-bottom: 1px solid var(--crm-control); } .crm-cierre-zona { position: absolute; top: 8px; right: 0; bottom: 0; background: repeating-linear-gradient( 135deg, var(--crm-rejilla) 0 1px, transparent 1px 6px); } .crm-cierre-avance { position: absolute; bottom: -1px; left: 0; height: 2px; background: var(--crm-text); transform-origin: left; animation: crm-cierre-dibujar var(--crm-t-dibujo) var(--crm-curva) both; } @keyframes crm-cierre-dibujar { from { transform: scaleX(0); } } .crm-cierre-marca { position: absolute; bottom: 0; width: 1px; height: 4px; background: var(--crm-line-2); } .crm-cierre-marca[data-mayor] { height: 8px; background: var(--crm-control); } .crm-cierre-marca > span { position: absolute; bottom: 12px; left: 0; color: var(--crm-dim); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; font-variant-numeric: tabular-nums; transform: translateX(-50%); } .crm-cierre-marca[data-borde=inicio] > span { transform: none; } .crm-cierre-marca[data-borde=fin] > span { left: auto; right: 0; transform: none; } .crm-cierre-aguja { position: absolute; bottom: 0; width: 1px; height: 20px; background: var(--crm-acento); } .crm-cierre-aguja::before { content: ""; position: absolute; top: -4px; left: -4px; width: 9px; height: 4px; background: var(--crm-acento); clip-path: polygon(0 0, 100% 0, 50% 100%); } .crm-cierre-hueco { position: absolute; bottom: -4px; width: 8px; height: 8px; border: 1px solid var(--crm-text-2); background: var(--crm-bg); transform: translateX(-4px) rotate(45deg); } .crm-cierre-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-cierre-segunda { display: inline-flex; align-items: center; gap: 8px; } .crm-cierre-segunda i { width: 8px; height: 8px; border: 1px solid var(--crm-text-2); transform: rotate(45deg); } .crm-cierre-segunda b { color: var(--crm-text); font-weight: 500; font-variant-numeric: tabular-nums; } .crm-cuenta-ticket { position: relative; display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 20px; border: 1px solid var(--crm-line); background: var(--crm-panel); } .crm-cuenta-ticket[data-recomendada] { border-color: var(--crm-line-2); box-shadow: inset 0 2px 0 var(--crm-acento); } .crm-cuenta-ticket-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 24px; } .crm-cuenta-ticket-estado { color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-cuenta-ticket-sello { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 1px solid var(--crm-acento-linea); color: var(--crm-acento); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; transform: rotate(-2deg); } .crm-cuenta-ticket-titulo { margin: 0; color: var(--crm-text); font-size: 15px; font-weight: 500; line-height: 22px; letter-spacing: -0.01em; } .crm-cuenta-ticket-lineas { flex: 1; align-content: start; display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .crm-cuenta-ticket-linea { display: grid; grid-template-columns: minmax(0, auto) minmax(16px, 1fr) auto; align-items: end; column-gap: 6px; } .crm-cuenta-ticket-concepto { display: grid; min-width: 0; } .crm-cuenta-ticket-concepto small { color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-cuenta-ticket-linea:not(:has(.crm-cuenta-ticket-importe)) .crm-cuenta-ticket-concepto { grid-column: 1 / -1; } .crm-cuenta-ticket-guia { height: 1px; margin-bottom: 6px; background: radial-gradient( circle, var(--crm-control) 0.5px, transparent 1px) 0 0 / 4px 1px repeat-x; } .crm-cuenta-ticket-importe { color: var(--crm-text); font-family: var(--crm-mono); font-size: 12px; line-height: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; } .crm-cuenta-ticket-corte { position: relative; height: 1px; margin: 4px -20px; background: repeating-linear-gradient( 90deg, var(--crm-line-2) 0 6px, transparent 6px 10px); } .crm-cuenta-ticket-corte::before, .crm-cuenta-ticket-corte::after { content: ""; position: absolute; top: -6px; width: 7px; height: 12px; border: 1px solid var(--crm-line); background: var(--crm-bg); } .crm-cuenta-ticket-corte::before { left: -1px; border-left: 0; border-radius: 0 6px 6px 0; } .crm-cuenta-ticket-corte::after { right: -1px; border-right: 0; border-radius: 6px 0 0 6px; } .crm-cuenta-ticket-total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; color: var(--crm-muted); } .crm-cuenta-ticket-total b { white-space: nowrap; color: var(--crm-text); font-size: 20px; font-weight: 500; line-height: 28px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; text-align: right; } .crm-cuenta-ticket-hueco { display: block; margin: -6px 0; } .crm-cuenta-ticket-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: stretch; gap: 16px; } @supports (grid-template-rows: subgrid) { .crm-cuenta-ticket-fila > .crm-cuenta-ticket { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 12px; } } .crm-cuenta-ticket-pie { margin: 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; } @media (prefers-reduced-motion: reduce) { .crm-expediente-hito[data-estado=pendiente] .crm-expediente-folio::after, .crm-expediente-contenido, .crm-cierre-avance { animation: none; } .crm-expediente-abre, button.crm-sello-letra:active { transition: none; transform: none; } .crm-expediente-hito[data-abierto] .crm-expediente-abre { transform: rotate(180deg); } } @media (forced-colors: active) { .crm-sello-letra[data-elegida], .crm-reparto-cliente, .crm-reparto-nosotros { forced-color-adjust: none; border: 1px solid CanvasText; } } :is(.crm-flaps, .crm-carrera, .crm-pizarra, .crm-mazo, .crm-contrato) *, :is(.crm-flaps, .crm-carrera, .crm-pizarra, .crm-mazo, .crm-contrato) *::before, :is(.crm-flaps, .crm-carrera, .crm-pizarra, .crm-mazo, .crm-contrato) *::after { box-sizing: border-box; } :is(.crm-flaps, .crm-carrera, .crm-pizarra, .crm-mazo, .crm-contrato) { min-width: 0; color: var(--crm-text-2); font-family: var(--crm-sans); font-size: 13px; line-height: 20px; letter-spacing: -0.005em; } .crm-flaps { display: inline-grid; justify-items: start; gap: 12px; } .crm-flaps-tablero { display: flex; gap: 4px; } .crm-flaps-casilla { position: relative; display: grid; place-items: center; width: 64px; height: 88px; overflow: hidden; background: var(--crm-panel-2); border: 1px solid var(--crm-line-2); perspective: 240px; } .crm-flaps-casilla::before { content: ""; position: absolute; inset: 0 0 50% 0; background: var(--crm-panel-3); } .crm-flaps-casilla::after { content: ""; position: absolute; top: calc(50% - 1px); left: 0; right: 0; height: 2px; background: var(--crm-bg); box-shadow: inset 4px 0 0 0 var(--crm-control), inset -4px 0 0 0 var(--crm-control); z-index: 3; } .crm-flaps-casilla[data-vacia] .crm-flaps-cifra { visibility: hidden; } .crm-flaps-cifra { position: relative; z-index: 1; color: var(--crm-text); font-family: var(--crm-sans); font-size: clamp(34px, 4vw, 58px); font-weight: 500; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } .crm-flaps-hoja { position: absolute; inset: 0 0 50% 0; z-index: 2; display: grid; place-items: end center; overflow: hidden; background: var(--crm-panel-3); transform-origin: 50% 100%; visibility: hidden; } .crm-flaps-hoja .crm-flaps-cifra { transform: translateY(50%); } .crm-flaps-hoja[data-cae] { visibility: visible; animation: crm-flaps-cae var(--crm-t-capa) var(--crm-snap) both; } @keyframes crm-flaps-cae { from { transform: rotateX(88deg); } to { transform: rotateX(0deg); visibility: hidden; } } .crm-flaps[data-tamano=compacto] .crm-flaps-casilla { width: 40px; height: 56px; } .crm-flaps[data-tamano=compacto] .crm-flaps-cifra { font-size: 28px; } .crm-flaps-rotulo { color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-flaps-pie { margin-top: -8px; color: var(--crm-muted); font-size: 13px; line-height: 20px; } .crm-carrera { container-type: inline-size; display: grid; gap: 32px; } .crm-carrera-lectura { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 24px; row-gap: 6px; } .crm-carrera-rotulo { grid-column: 1 / -1; margin: 0; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-carrera-cifra { margin: 0; color: var(--crm-text); font-size: 40px; font-weight: 500; line-height: 44px; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .crm-carrera-cifra small { margin-left: 4px; color: var(--crm-muted); font-size: 0.6em; font-weight: 400; letter-spacing: 0; } .crm-carrera-secundario { margin: 0; padding-bottom: 6px; color: var(--crm-muted); font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums; text-align: right; } .crm-carrera-pista { position: relative; height: 8px; margin: 36px 0 28px; background: var(--crm-panel-3); } .crm-carrera-salida { position: absolute; top: -8px; bottom: -8px; left: 0; width: 2px; background: var(--crm-text); } .crm-carrera-avance { position: absolute; inset: 0 auto 0 0; background: var(--crm-acento); transition: width var(--crm-t-dibujo) var(--crm-curva); } .crm-carrera-poste { position: absolute; top: -4px; width: 1px; height: 16px; background: var(--crm-line-2); transform: translateX(-1px); } .crm-carrera-poste > span { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); color: var(--crm-dim); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; } .crm-carrera-poste[data-ancla=fin] > span { left: auto; right: 0; transform: none; } .crm-carrera-poste[data-alcanzado] { width: 2px; background: var(--crm-acento); } .crm-carrera-poste[data-alcanzado] > span { color: var(--crm-text); } .crm-carrera-liebre { position: absolute; bottom: 100%; width: 1px; height: 20px; background: var(--crm-text); transform: translateX(-1px); transition: left var(--crm-t-dibujo) var(--crm-curva); } .crm-carrera-liebre::before { content: ""; position: absolute; top: -4px; left: -4px; width: 8px; height: 8px; border: 1px solid var(--crm-text); background: var(--crm-bg); } .crm-carrera-liebre > span { position: absolute; top: -8px; left: 12px; color: var(--crm-text-2); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; } .crm-carrera-liebre[data-ancla=derecha] > span { left: auto; right: 12px; } .crm-carrera-deuda { position: absolute; top: 0; bottom: 0; border: 1px dashed var(--crm-text-2); border-left: 0; transition: left var(--crm-t-dibujo) var(--crm-curva), width var(--crm-t-dibujo) var(--crm-curva); } @container (max-width: 400px) { .crm-carrera-lectura { grid-template-columns: minmax(0, 1fr); } .crm-carrera-secundario { padding-bottom: 0; text-align: left; } .crm-carrera-cifra { font-size: 28px; line-height: 32px; } .crm-carrera-poste:not([data-ancla=fin], [data-mitad]) > span { display: none; } } .crm-pizarra { container-type: inline-size; display: grid; gap: 12px; margin: 0; } .crm-pizarra-filas { display: grid; margin: 0; padding: 0; list-style: none; } .crm-pizarra-fila { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; column-gap: 16px; min-height: 44px; padding: 8px 0; border-bottom: 1px solid var(--crm-line); } .crm-pizarra-fila:first-child { border-top: 1px solid var(--crm-line); } .crm-pizarra-etiqueta { display: grid; color: var(--crm-text-2); font-size: 13px; line-height: 20px; } .crm-pizarra-palotes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; } .crm-pizarra-grupo { flex: none; display: block; } .crm-pizarra-grupo line { stroke: var(--crm-line-2); stroke-width: 1.6; stroke-linecap: square; } .crm-pizarra-grupo line[data-trazo=hecho] { stroke: var(--crm-text); } .crm-pizarra-grupo line[data-trazo=extra] { stroke: var(--crm-acento); } .crm-pizarra-vale { color: var(--crm-dim); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; white-space: nowrap; } .crm-pizarra-nada { display: block; width: 24px; height: 1px; background: var(--crm-line-2); } .crm-pizarra-cuenta { color: var(--crm-muted); font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .crm-pizarra-cuenta b { color: var(--crm-text); font-size: 20px; font-weight: 500; line-height: 28px; letter-spacing: -0.02em; } .crm-pizarra-fila[data-cumple] .crm-pizarra-cuenta b { color: var(--crm-acento); } .crm-pizarra-nota { color: var(--crm-dim); font-size: 12px; line-height: 16px; } @container (max-width: 400px) { .crm-pizarra-fila { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; } .crm-pizarra-fila > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; } } .crm-mazo { container-type: inline-size; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 208px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } .crm-mazo-hueco { display: grid; min-width: 0; } .crm-carta { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 12px; min-width: 0; min-height: 240px; padding: 20px; border: 1px solid var(--crm-line); background: var(--crm-panel); color: var(--crm-text-2); text-decoration: none; transition: background-color var(--crm-t-salida) var(--crm-snap), border-color var(--crm-t-color) var(--crm-snap); } .crm-carta-destacada::before { content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 2px; background: var(--crm-text); } @media (hover: hover) { .crm-carta:hover { background: var(--crm-panel-2); border-color: var(--crm-line-2); transition-duration: 0ms; } .crm-carta:hover .crm-carta-flecha { transform: translateX(2px); } .crm-carta:hover .crm-carta-indice { color: var(--crm-text); } } .crm-carta:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; } .crm-carta:active { background: var(--crm-panel-3); } .crm-carta-indice { color: var(--crm-muted); font-family: var(--crm-mono); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; transition: color var(--crm-t-color) var(--crm-snap); } .crm-carta-quien { display: grid; gap: 2px; min-width: 0; } .crm-carta-titulo { display: -webkit-box; overflow: hidden; color: var(--crm-text); font-size: 15px; font-weight: 500; line-height: 22px; letter-spacing: -0.01em; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; } .crm-carta-sub { color: var(--crm-muted); font-size: 12px; line-height: 16px; overflow-wrap: anywhere; } .crm-carta-motivos { display: flex; flex-wrap: wrap; gap: 4px; } .crm-carta-motivo { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 1px solid var(--crm-line-2); color: var(--crm-text-2); font-size: 12px; line-height: 16px; white-space: nowrap; } .crm-carta-accion { align-self: end; color: var(--crm-text); font-size: 14px; line-height: 22px; overflow-wrap: anywhere; } .crm-carta-pie { display: flex; align-items: center; gap: 6px; padding-top: 12px; border-top: 1px solid var(--crm-line); color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-carta-flecha { transition: transform var(--crm-t-gesto) var(--crm-snap); } @container (max-width: 560px) { .crm-carta { min-height: 0; grid-template-rows: auto; } } .crm-contrato { position: relative; container-type: inline-size; display: grid; gap: 16px; padding: 24px; overflow: hidden; border: 1px solid var(--crm-line-2); background: var(--crm-panel); } .crm-contrato-rotulo { margin: 0; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-contrato-titulo { margin: -8px 0 0; padding-right: 136px; color: var(--crm-text); font-size: 20px; font-weight: 500; line-height: 28px; letter-spacing: -0.02em; overflow-wrap: anywhere; } .crm-contrato-lineas { display: grid; gap: 8px; margin: 0; } .crm-contrato-linea { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .crm-contrato-linea dt { display: flex; flex: 1; align-items: baseline; gap: 8px; min-width: 0; color: var(--crm-text-2); } .crm-contrato-linea dt::after { content: ""; flex: 1; min-width: 16px; border-bottom: 1px dotted var(--crm-line-2); } .crm-contrato-linea dd { margin: 0; color: var(--crm-text); font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; } .crm-contrato-firmas { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 200px)); gap: 24px; margin-top: 24px; } .crm-contrato-firma { margin: 0; padding-top: 6px; border-top: 1px solid var(--crm-text-2); color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-contrato-pie { margin: 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-contrato-sello { position: absolute; top: 20px; right: 20px; display: grid; justify-items: center; gap: 2px; margin: 0; padding: 8px 12px; border: 2px solid var(--crm-acento); color: var(--crm-acento); transform: rotate(-6deg); } .crm-contrato-sello::before { content: ""; position: absolute; inset: 2px; border: 1px solid var(--crm-acento-linea); pointer-events: none; } .crm-contrato-sello b { font-family: var(--crm-mono); font-size: 20px; font-weight: 500; line-height: 28px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-contrato-sello span { font-family: var(--crm-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; } .crm-contrato-sello[data-vacio] { border: 1px dashed var(--crm-line-2); color: var(--crm-dim); } .crm-contrato-sello[data-vacio]::before { content: none; } .crm-contrato[data-animar] .crm-contrato-sello { animation: crm-sello-cae var(--crm-t-capa) var(--crm-snap) both; animation-delay: var(--crm-t-entrada); } @keyframes crm-sello-cae { from { opacity: 0; transform: rotate(-14deg) scale(1.6); } to { opacity: 1; transform: rotate(-6deg) scale(1); } } @container (max-width: 400px) { .crm-contrato-titulo { padding-right: 0; padding-top: 64px; } } @media (prefers-reduced-motion: reduce) { .crm-flaps-hoja[data-cae] { animation: none; visibility: hidden; } .crm-carrera-avance, .crm-carrera-liebre, .crm-carrera-deuda, .crm-carta, .crm-carta-flecha { transition: none; } .crm-carta:hover .crm-carta-flecha { transform: none; } .crm-contrato-sello[data-vacio] { border: 1px dashed var(--crm-line-2); color: var(--crm-dim); } .crm-contrato-sello[data-vacio]::before { content: none; } .crm-contrato[data-animar] .crm-contrato-sello { animation-name: crm-sello-aparece; } @keyframes crm-sello-aparece { from { opacity: 0; } to { opacity: 1; } } } @media (forced-colors: active) { .crm-carrera-avance, .crm-carrera-poste[data-alcanzado] { forced-color-adjust: none; background: Highlight; } .crm-flaps-casilla::after { forced-color-adjust: none; background: CanvasText; } } [data-crm-tema] { --crm-gr-banda-alfa-tema: 16%; } [data-crm-tema=claro] { --crm-gr-banda-alfa-tema: 24%; } @media (prefers-color-scheme: light) { [data-crm-tema=sistema] { --crm-gr-banda-alfa-tema: 24%; } } .crm-gr, .crm-gr-marco, .crm-gr-ampliado, .crm-gr-spark, .crm-gr-medidor { --crm-gr-fondo: var(--crm-bg); --crm-gr-resalte: var(--crm-panel-2); --crm-gr-area-alfa: 18%; --crm-gr-area-apilada: 28%; --crm-gr-banda-alfa: var(--crm-gr-banda-alfa-tema, 16%); --crm-gr-rejilla: var(--crm-rejilla); } .crm-gr { container-type: inline-size; position: relative; min-width: 0; margin: 0; color: var(--crm-text); font-family: var(--crm-sans); font-size: 13px; line-height: 20px; } .crm-gr-s1 { --s: var(--crm-serie-1); } .crm-gr-s2 { --s: var(--crm-serie-2); } .crm-gr-s3 { --s: var(--crm-serie-3); } .crm-gr-s4 { --s: var(--crm-serie-4); } .crm-gr-s5 { --s: var(--crm-serie-5); } .crm-gr-s6 { --s: var(--crm-serie-6); } .crm-gr-comparacion { --s: var(--crm-serie-comparacion); } .crm-gr-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .crm-gr-plano { position: relative; min-width: 0; } .crm-gr-plano[data-desplazable] { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--crm-line-2) transparent; } .crm-gr-svg { display: block; overflow: visible; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .crm-gr-rejilla line { stroke: var(--crm-gr-rejilla); stroke-width: 1; shape-rendering: crispEdges; } .crm-gr-rejilla line[data-cero] { stroke: var(--crm-line-2); } .crm-gr-eje text, .crm-gr-valor, .crm-gr-umbral text { fill: var(--crm-dim); font-family: var(--crm-mono); font-size: 11px; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; } .crm-gr-eje-nombre { fill: var(--crm-muted); } .crm-gr-valor { fill: var(--crm-muted); } .crm-gr-valor[data-activo] { fill: var(--crm-text); } .crm-gr-columna { fill: var(--crm-gr-resalte); } .crm-gr-guia { stroke: var(--crm-control); stroke-width: 1; stroke-dasharray: 2 2; shape-rendering: crispEdges; pointer-events: none; } .crm-gr-marca { fill: var(--s); stroke: var(--crm-gr-fondo); stroke-width: 1; } .crm-gr-marca[data-trazo] { fill: none; stroke: var(--s); stroke-width: 1.5; } .crm-gr-marca-activa { stroke-width: 2; pointer-events: none; } .crm-gr-final .crm-gr-marca { stroke: none; } .crm-gr-final .crm-gr-marca[data-trazo] { stroke: var(--s); } .crm-gr-latido { fill: var(--s); transform-box: fill-box; transform-origin: center; opacity: 0; pointer-events: none; } .crm-gr-trazo { fill: none; stroke: var(--s); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; } .crm-gr-trazo[data-comparacion] { stroke-dasharray: 4 4; stroke-linecap: butt; } .crm-gr-trazo[data-estimado] { stroke-dasharray: 4 3; stroke-linecap: butt; } .crm-gr-banda { fill: color-mix(in oklab, var(--s) var(--crm-gr-banda-alfa), transparent); stroke: none; pointer-events: none; } .crm-gr-relleno { fill: color-mix(in oklab, var(--s) var(--crm-gr-banda-alfa), transparent); stroke: none; pointer-events: none; } .crm-gr-extremo { stroke: var(--crm-gr-fondo); stroke-width: 2; pointer-events: none; } .crm-gr-extremo-max { fill: var(--crm-text); } .crm-gr-extremo-min { fill: var(--crm-muted); } .crm-gr-eje-limite { fill: var(--crm-text-2); } .crm-gr-recorte { fill: none; stroke: var(--crm-text-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } .crm-gr-marca-senalada { stroke-width: 1; } .crm-gr-columna[data-senalado] { fill: var(--crm-gr-resalte); } .crm-gr-grad-a { stop-color: color-mix(in oklab, var(--s) var(--crm-gr-area-alfa), transparent); } .crm-gr-grad-b { stop-color: var(--s); stop-opacity: 0; } .crm-gr-area[data-apilada] { fill: color-mix(in oklab, var(--s) var(--crm-gr-area-apilada), transparent); } .crm-gr-barra { fill: var(--s); stroke: none; transform-box: fill-box; transform-origin: 50% 100%; shape-rendering: crispEdges; } .crm-gr-barra[data-apilada] { stroke: var(--crm-gr-fondo); stroke-width: 1; } .crm-gr-barra[data-negativo] { transform-origin: 50% 0; } .crm-gr-barra[data-horizontal] { transform-origin: 0 50%; } .crm-gr-barra[data-reposo] { fill: var(--crm-serie-reposo); } .crm-gr-barra[data-destacada] { fill: var(--s); } .crm-gr-barra[data-destacada][data-vivo] { fill: var(--crm-serie-destacada); } .crm-gr-barra[data-reposo][data-activo] { fill: color-mix(in oklab, var(--crm-serie-reposo) 60%, var(--crm-text)); } .crm-gr-trama { stroke: none; pointer-events: none; } .crm-gr-trama-linea { stroke: var(--crm-gr-fondo); stroke-width: 1; } .crm-gr-trama-punto { fill: var(--crm-gr-fondo); } .crm-gr-barra[data-estimado]:not(.crm-gr-trama) { fill: color-mix(in oklab, var(--s) var(--crm-gr-area-apilada), transparent); stroke: var(--s); stroke-width: 1; } .crm-gr-categorias text { fill: var(--crm-text-2); font-family: var(--crm-sans); font-size: 13px; } .crm-gr-categorias text[data-activo], .crm-gr-valores text[data-activo] { fill: var(--crm-text); } .crm-gr-valores text { fill: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; font-variant-numeric: tabular-nums; } .crm-gr-umbral line { stroke: var(--crm-text-2); stroke-width: 1; stroke-dasharray: 2 2; shape-rendering: crispEdges; } .crm-gr-umbral text { fill: var(--crm-text-2); } .crm-gr-umbral[data-tipo=error] line { stroke: var(--crm-error); stroke-dasharray: 4 2; } .crm-gr-umbral[data-tipo=error] text { fill: var(--crm-error); } .crm-gr-media line { stroke: var(--crm-muted); stroke-width: 1; stroke-dasharray: 2 4; shape-rendering: crispEdges; } .crm-gr-media text { fill: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--crm-gr-fondo); stroke-width: 3px; } .crm-gr-media[data-activo] line { stroke: var(--crm-text); } .crm-gr-media[data-activo] text { fill: var(--crm-text); } .crm-gr-capas > g[data-atenuado] { opacity: var(--crm-apagado); } .crm-gr-trazo[data-atenuado] { stroke-opacity: var(--crm-apagado); } .crm-gr-area[data-atenuado] { fill-opacity: var(--crm-apagado); } .crm-gr-final[data-atenuado] .crm-gr-marca { fill-opacity: var(--crm-apagado); stroke-opacity: var(--crm-apagado); } .crm-gr-estadisticas { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 8px 0 0 -8px; padding: 0; list-style: none; } .crm-gr-estadistica { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border: 0; border-radius: 0; background: transparent; color: var(--crm-text); font-family: var(--crm-sans); font-size: 12px; font-weight: 400; line-height: 16px; text-transform: none; white-space: nowrap; transition: background-color var(--crm-t-color) ease; } button.crm-gr-estadistica { cursor: pointer; -webkit-tap-highlight-color: transparent; } .crm-gr-estadistica:hover, .crm-gr-estadistica[data-activo] { background: var(--crm-panel-2); transition-duration: 0ms; } .crm-gr-estadistica-clave { color: var(--crm-muted); } .crm-gr-estadistica-valor { font-variant-numeric: tabular-nums; } .crm-gr-tendencia { stroke: var(--crm-text-2); stroke-width: 1; stroke-dasharray: 4 4; pointer-events: none; } .crm-gr-punto { transition: opacity var(--crm-t-color) ease; } .crm-gr-punto[data-atenuado] { opacity: var(--crm-apagado); } .crm-gr-svg[data-seleccion] { cursor: crosshair; touch-action: none; } .crm-gr-seleccion { fill: color-mix(in oklab, var(--crm-text) 8%, transparent); stroke: var(--crm-line-2); stroke-width: 1; pointer-events: none; } .crm-gr-separadores line { stroke: var(--crm-line); stroke-dasharray: 1 6; stroke-width: 1; } .crm-gr-consejo { position: absolute; top: 0; left: 0; z-index: 3; opacity: 0; visibility: hidden; pointer-events: none; transition: none; } .crm-gr-consejo[data-visible] { opacity: 1; visibility: visible; transition: none; } .crm-gr-consejo-caja { width: max-content; min-width: 160px; max-width: min(280px, 80cqi); padding: 8px 12px; border: 1px solid var(--crm-line-2); background: var(--crm-panel-2); box-shadow: var(--crm-sombra-capa); color: var(--crm-text); font-size: 12px; line-height: 16px; } .crm-gr-consejo-titulo { margin: 0 0 4px; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; overflow-wrap: break-word; font-variant-numeric: tabular-nums; } .crm-gr-consejo dl { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; } .crm-gr-consejo-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; min-width: 0; min-height: 20px; } .crm-gr-consejo-fila dt { display: flex; flex: 0 1 auto; align-items: center; gap: 6px; min-width: 0; color: var(--crm-text-2); } .crm-gr-consejo-fila dt .crm-gr-muestra { flex: none; } .crm-gr-consejo-nombre { min-width: 0; overflow-wrap: break-word; } .crm-gr-consejo-fila dd { margin: 0 0 0 auto; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; } .crm-gr-consejo-fila[data-partes] { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; } .crm-gr-consejo-fila[data-partes] dt { grid-column: 1 / -1; min-height: 20px; } .crm-gr-consejo-fila dd.crm-gr-consejo-parte { display: contents; } .crm-gr-consejo-parte-rotulo { min-width: 0; padding-left: 22px; color: var(--crm-muted); overflow-wrap: break-word; } .crm-gr-consejo-parte-valor { font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .crm-gr-consejo-detalle { display: block; color: var(--crm-muted); font-size: 12px; font-weight: 400; line-height: 16px; text-align: right; } .crm-gr-consejo-detalle[data-sentido=bueno] { color: var(--crm-acento); } .crm-gr-consejo-detalle[data-sentido=malo] { color: var(--crm-error); } .crm-gr-consejo-fila[data-total] { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--crm-line-2); } .crm-gr-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin-top: 12px; } .crm-gr-leyenda { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 0 0 0 -8px; padding: 0; list-style: none; } .crm-gr-leyenda-item, .crm-gr-ver-datos { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border: 0; border-radius: 0; background: transparent; color: var(--crm-text-2); font-family: var(--crm-sans); font-size: 13px; font-weight: 400; line-height: 20px; letter-spacing: -0.005em; text-transform: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--crm-t-color) ease, color var(--crm-t-color) ease; } .crm-gr-leyenda-item:hover, .crm-gr-ver-datos:hover { background: var(--crm-panel-2); color: var(--crm-text); transition-duration: 0ms; } .crm-gr-leyenda-item:active, .crm-gr-ver-datos:active { background: var(--crm-panel-3); } .crm-gr-leyenda-item[aria-pressed=false] { color: var(--crm-dim); text-decoration: line-through; text-decoration-color: var(--crm-dim); } .crm-gr-leyenda-item[aria-pressed=false] .crm-gr-muestra { opacity: var(--crm-apagado); } .crm-gr-ver-datos { margin-left: auto; margin-right: -8px; color: var(--crm-muted); } .crm-gr-ver-datos svg { flex: none; width: 14px; height: 14px; } .crm-gr-ver-datos[aria-expanded=true] { color: var(--crm-text); } .crm-gr-muestra { flex: none; overflow: visible; } .crm-gr-muestra-linea { stroke: var(--s); stroke-width: 1.5; } .crm-gr-muestra-linea[data-comparacion] { stroke-dasharray: 3 2; } .crm-gr-muestra .crm-gr-marca { stroke: none; } .crm-gr-muestra .crm-gr-marca[data-trazo] { stroke: var(--s); } .crm-gr-muestra-bloque { fill: var(--s); } .crm-gr-muestra-trama { fill: none; stroke: var(--crm-gr-fondo); stroke-width: 1; } .crm-gr-muestra-trama[data-puntos] { stroke-width: 1; stroke-linecap: square; } .crm-gr-muestra-bloque[data-estimado] { fill: color-mix(in oklab, var(--s) var(--crm-gr-area-apilada), transparent); stroke: var(--s); stroke-width: 1; } .crm-gr-muestra-linea[data-estimado] { stroke-dasharray: 3 2; } .crm-gr-muestra-banda { fill: color-mix(in oklab, var(--s) var(--crm-gr-banda-alfa), transparent); } .crm-gr-intervalo, .crm-gr-muestra-intervalo { fill: none; stroke: var(--s); stroke-width: 1; stroke-linecap: butt; pointer-events: none; shape-rendering: crispEdges; } .crm-gr-intervalo[data-sobre-barra] { stroke: var(--crm-text); } .crm-gr-intervalo[data-atenuado] { opacity: var(--crm-apagado); } .crm-gr-intervalo-halo { fill: none; shape-rendering: crispEdges; stroke: var(--crm-gr-fondo, var(--crm-panel)); stroke-width: 3; stroke-linecap: butt; pointer-events: none; } @media (forced-colors: active) { .crm-gr-intervalo, .crm-gr-intervalo[data-sobre-barra], .crm-gr-muestra-intervalo { stroke: CanvasText; } .crm-gr-intervalo-halo { stroke: Canvas; } } .crm-gr-leyenda-item[data-fija], .crm-gr-leyenda-item[data-fija]:hover, .crm-gr-leyenda-item[data-fija]:active { background: transparent; color: var(--crm-text-2); cursor: default; } .crm-gr-tabla:not([data-visible]) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .crm-gr-tabla[data-visible] { max-height: 324px; margin-top: 12px; overflow: auto; border-top: 1px solid var(--crm-line); scrollbar-width: thin; scrollbar-color: var(--crm-line-2) transparent; } .crm-gr-tabla table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 20px; } .crm-gr-tabla caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .crm-gr-tabla th, .crm-gr-tabla td { height: 36px; padding: 0 12px; border-bottom: 1px solid var(--crm-line); text-align: right; white-space: nowrap; } .crm-gr-tabla th:first-child { padding-left: 0; text-align: left; } .crm-gr-tabla thead th { position: sticky; top: 0; height: 32px; background: var(--crm-gr-fondo); color: var(--crm-dim); font-family: var(--crm-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; } .crm-gr-tabla tbody tr:hover, .crm-gr-tabla tbody tr[data-activo] { background: var(--crm-gr-resalte); } .crm-gr-tabla tbody tr[data-activo] :is(th, td) { color: var(--crm-text); } .crm-gr-tabla tbody th { color: var(--crm-text-2); font-weight: 400; } .crm-gr-tabla td { color: var(--crm-text); font-variant-numeric: tabular-nums; } .crm-gr-donut { display: grid; grid-template-columns: var(--crm-gr-donut) minmax(0, 1fr); align-items: center; gap: 32px; } @container (max-width: 420px) { .crm-gr-donut { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 24px; } .crm-gr-donut-lista { justify-self: stretch; } } .crm-gr-donut-lienzo { position: relative; width: var(--crm-gr-donut); height: var(--crm-gr-donut); } .crm-gr-donut-mascara { mask-type: alpha; } .crm-gr-donut-revelado { fill: none; stroke: var(--crm-text); } .crm-gr-donut-pista { fill: none; stroke: var(--crm-line); } .crm-gr-segmento { fill: var(--s); stroke: none; transition: opacity var(--crm-t-color) ease; } .crm-gr-segmento[data-atenuado] { opacity: var(--crm-apagado); } .crm-gr-donut-centro { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2px; padding: 0 16px; text-align: center; pointer-events: none; } .crm-gr-donut-rotulo { max-width: 100%; overflow: hidden; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .crm-gr-donut-valor { font-size: 28px; font-weight: 500; line-height: 32px; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; } .crm-gr-donut-valor, .crm-gr-medidor-valor { max-width: 100%; white-space: nowrap; } .crm-gr-donut-valor[data-escalon="24"], .crm-gr-medidor-valor[data-escalon="24"] { font-size: 24px; line-height: 28px; } .crm-gr-donut-valor[data-escalon="20"], .crm-gr-medidor-valor[data-escalon="20"] { font-size: 20px; line-height: 24px; } .crm-gr-donut-valor[data-compacta], .crm-gr-medidor-valor[data-compacta] { pointer-events: auto; cursor: default; } .crm-gr-donut-pct { color: var(--crm-text-2); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; font-variant-numeric: tabular-nums; } .crm-gr-donut-lista { display: grid; margin: 0; padding: 0; list-style: none; } .crm-gr-donut-lista[hidden] { display: none; } .crm-gr-donut-centro[data-vacio] .crm-gr-donut-valor { color: var(--crm-dim); } .crm-gr-donut-vacio { max-width: 40ch; justify-self: center; margin: 0; text-align: center; color: var(--crm-muted); font-size: 13px; line-height: 20px; } .crm-gr-donut-lista li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto 48px; align-items: center; gap: 8px; height: 36px; border-top: 1px solid var(--crm-line); color: var(--crm-text-2); font-size: 13px; line-height: 20px; transition: background-color var(--crm-t-color) ease, color var(--crm-t-color) ease; } .crm-gr-donut-lista li:last-child { border-bottom: 1px solid var(--crm-line); } .crm-gr-donut-lista li[data-activo] { background: var(--crm-gr-resalte); color: var(--crm-text); transition-duration: 0ms; } .crm-gr-donut-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-gr-donut-cifra { color: var(--crm-text); font-weight: 500; font-variant-numeric: tabular-nums; } .crm-gr-donut-peso { color: var(--crm-dim); font-family: var(--crm-mono); font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; } .crm-gr-spark { --s: var(--crm-text-2); position: relative; display: block; width: 100%; min-width: 48px; } .crm-gr-spark[data-tono=acento] { --s: var(--crm-acento); } .crm-gr-spark svg { display: block; overflow: visible; } .crm-gr-spark[data-vacio] { display: flex; align-items: center; gap: 8px; } .crm-gr-spark-vacio { color: var(--crm-dim); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; white-space: nowrap; } .crm-gr-spark-vacio-filete { flex: 1; height: 1px; background: var(--crm-dim); } .crm-gr-spark-linea { fill: none; stroke: var(--s); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; } .crm-gr-spark-area { stroke: none; } .crm-gr-spark-barra { fill: var(--crm-serie-reposo); transform-box: fill-box; transform-origin: 50% 100%; shape-rendering: crispEdges; } .crm-gr-spark-barra[data-ultima] { fill: var(--s); } .crm-gr-spark-ref { stroke: var(--crm-line-2); stroke-dasharray: 2 2; shape-rendering: crispEdges; } .crm-gr-spark-punto { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--s); box-shadow: 0 0 0 2px var(--crm-gr-fondo); translate: -50% -50%; pointer-events: none; } .crm-gr-spark-barra[data-activo] { fill: var(--crm-text); } .crm-gr-spark-consejo { position: absolute; bottom: calc(100% + 6px); z-index: 3; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border: 1px solid var(--crm-line-2); background: var(--crm-panel-2); box-shadow: var(--crm-sombra-capa); color: var(--crm-text); font-family: var(--crm-sans); font-size: 12px; line-height: 16px; white-space: nowrap; translate: -50% 0; pointer-events: none; } .crm-gr-spark-consejo[data-lado=izquierda] { translate: -100% 0; } .crm-gr-spark-consejo[data-lado=derecha] { translate: 0 0; } .crm-gr-spark-consejo-rotulo { color: var(--crm-muted); } .crm-gr-spark-consejo-valor { font-weight: 500; font-variant-numeric: tabular-nums; } .crm-mc { display: flex; align-items: flex-start; min-width: 0; } .crm-mc-filas { flex: none; } .crm-mc-filas text { fill: var(--crm-dim); font-family: var(--crm-mono); font-size: 11px; font-variant-numeric: tabular-nums; } .crm-mc-filas text[data-activo], .crm-mc-svg .crm-gr-eje text[data-activo] { fill: var(--crm-text); } .crm-mc-desplaza { flex: 1 1 auto; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; } .crm-mc-desplaza[data-desborde=fin] { -webkit-mask-image: linear-gradient( to right, currentColor calc(100% - 24px), transparent); mask-image: linear-gradient( to right, currentColor calc(100% - 24px), transparent); } .crm-mc-desplaza[data-desborde=inicio] { -webkit-mask-image: linear-gradient( to left, currentColor calc(100% - 24px), transparent); mask-image: linear-gradient( to left, currentColor calc(100% - 24px), transparent); } .crm-mc-desplaza[data-desborde=ambos] { -webkit-mask-image: linear-gradient( to right, transparent, currentColor 24px, currentColor calc(100% - 24px), transparent); mask-image: linear-gradient( to right, transparent, currentColor 24px, currentColor calc(100% - 24px), transparent); } .crm-mc-lienzo { position: relative; } .crm-mc-svg:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: -1px; } .crm-mc-celda, .crm-mc-muestra { --crm-mc-serie: var(--crm-serie-1); fill: color-mix(in oklab, var(--crm-mc-serie) calc(6% + var(--t, 0) * 66%), var(--crm-gr-fondo)); background: color-mix(in oklab, var(--crm-mc-serie) calc(6% + var(--t, 0) * 66%), var(--crm-gr-fondo)); stroke: transparent; stroke-width: 1; } .crm-mc-celda[data-lado=neg], .crm-mc-muestra[data-lado=neg] { --crm-mc-serie: var(--crm-serie-2); } .crm-mc-celda[data-sin-dato], .crm-mc-muestra[data-sin-dato] { fill: none; background: none; stroke: var(--crm-line-2); stroke-dasharray: 1 2; } .crm-mc-celda[data-activo] { stroke: var(--crm-text); stroke-dasharray: none; } .crm-mc-escala { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; color: var(--crm-dim); font-family: var(--crm-mono); font-size: 11px; font-variant-numeric: tabular-nums; line-height: 16px; } .crm-mc-muestra { display: inline-block; width: 12px; height: 12px; } .crm-mc-muestra[data-sin-dato] { box-sizing: border-box; margin-left: 8px; border: 1px dashed var(--crm-line-2); } .crm-gr-celda, .crm-gr-celda-muestra { --crm-gr-calor: var(--crm-line); fill: var(--crm-gr-calor); stroke: transparent; stroke-width: 1.5; transition: stroke var(--crm-t-color) ease; } .crm-gr-celda[data-nivel="1"], .crm-gr-celda-muestra[data-nivel="1"] { --crm-gr-calor: color-mix(in oklab, var(--crm-serie-1) 20%, var(--crm-gr-fondo)); } .crm-gr-celda[data-nivel="2"], .crm-gr-celda-muestra[data-nivel="2"] { --crm-gr-calor: color-mix(in oklab, var(--crm-serie-1) 42%, var(--crm-gr-fondo)); } .crm-gr-celda[data-nivel="3"], .crm-gr-celda-muestra[data-nivel="3"] { --crm-gr-calor: color-mix(in oklab, var(--crm-serie-1) 68%, var(--crm-gr-fondo)); } .crm-gr-celda[data-nivel="4"], .crm-gr-celda-muestra[data-nivel="4"] { --crm-gr-calor: var(--crm-serie-1); } .crm-gr-celda[data-activo] { stroke: var(--crm-text); transition-duration: 0ms; } .crm-gr-celda[data-atenuado] { fill-opacity: 0.24; } .crm-gr-escala .crm-gr-celda-muestra { cursor: default; } .crm-gr-celda-muestra[data-activo] { outline: 1px solid var(--crm-text); outline-offset: 1px; } .crm-gr-celda-valores text { fill: var(--crm-text); font-family: var(--crm-mono); font-size: 11px; font-variant-numeric: tabular-nums; pointer-events: none; } .crm-gr-celda-valores text[data-nivel="3"] { fill: var(--crm-calor-tinta-3); } .crm-gr-celda-valores text[data-nivel="4"] { fill: var(--crm-sobre-serie-1); } .crm-gr-escala { display: inline-flex; align-items: center; gap: 2px; color: var(--crm-dim); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; } .crm-gr-escala > span:first-child { margin-right: 6px; } .crm-gr-escala > span:last-child { margin-left: 6px; } .crm-gr-celda-muestra { display: inline-block; width: 12px; height: 12px; background: var(--crm-gr-calor); } .crm-gr-embudo { display: grid; grid-template-columns: minmax(96px, 28%) minmax(0, 1fr) auto 56px; column-gap: 16px; } .crm-gr-embudo-cabecera, .crm-gr-embudo-fila, .crm-gr-embudo-total { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; } .crm-gr-embudo-cabecera { height: 32px; color: var(--crm-dim); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-gr-embudo-cabecera span:first-child { grid-column: 1 / 3; } .crm-gr-embudo-cabecera span:not(:first-child) { text-align: right; } .crm-gr-embudo-fila { height: 36px; border-top: 1px solid var(--crm-line); transition: background-color var(--crm-t-color) ease; } .crm-gr-embudo-fila:hover, .crm-gr-embudo-fila[data-activo] { background: var(--crm-gr-resalte); transition-duration: 0ms; } .crm-gr-embudo-fila[data-activo] .crm-gr-embudo-nombre { color: var(--crm-text); } .crm-gr-embudo-nombre { overflow: hidden; color: var(--crm-text-2); font-size: 13px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; } .crm-gr-embudo-pista { position: relative; display: block; height: 8px; } .crm-gr-embudo-barra, .crm-gr-embudo-perdida { position: absolute; top: 0; display: block; height: 8px; box-sizing: border-box; transform-origin: 0 50%; } .crm-gr-embudo-barra { left: 0; background: var(--crm-serie-reposo); } .crm-gr-embudo-barra[data-ultima] { background: var(--crm-serie-destacada); } .crm-gr-embudo-perdida { border: 1px dotted var(--crm-line-2); border-left: 0; background: transparent; } .crm-gr-embudo-valor { color: var(--crm-text); font-size: 13px; font-weight: 500; line-height: 20px; text-align: right; font-variant-numeric: tabular-nums; } .crm-gr-embudo-paso { color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; text-align: right; font-variant-numeric: tabular-nums; } .crm-gr-embudo-paso[data-inicio] { color: var(--crm-dim); } .crm-gr-embudo-total { height: 36px; border-block: 1px solid var(--crm-line-2); color: var(--crm-text-2); font-size: 13px; line-height: 20px; } .crm-gr-embudo-total span:first-child { grid-column: 1 / 4; } .crm-gr-embudo-total span:last-child { color: var(--crm-text); font-family: var(--crm-mono); font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; } @container (max-width: 420px) { .crm-gr-embudo { grid-template-columns: minmax(0, 1fr) auto 48px; column-gap: 12px; } .crm-gr-embudo-cabecera span:first-child { grid-column: 1; } .crm-gr-embudo-fila { grid-template-rows: 20px 8px; row-gap: 4px; align-content: center; height: 44px; } .crm-gr-embudo-pista { grid-row: 2; grid-column: 1 / -1; } .crm-gr-embudo-total span:first-child { grid-column: 1 / 3; } } .crm-gr-medidor { position: relative; display: inline-block; max-width: 100%; } .crm-gr-medidor svg { display: block; max-width: 100%; height: auto; } .crm-gr-medidor-pista { fill: none; stroke: var(--crm-line); } .crm-gr-medidor-arco { fill: none; stroke: var(--crm-serie-destacada); stroke-dasharray: var(--crm-gr-medidor-frac) 1; } .crm-gr-medidor-umbral { stroke: var(--crm-gr-fondo); stroke-width: 2; } .crm-gr-medidor[data-tono=aviso] .crm-gr-medidor-arco { stroke: var(--crm-aviso); } .crm-gr-medidor[data-tono=error] .crm-gr-medidor-arco { stroke: var(--crm-error); } .crm-gr-medidor[data-tono=aviso] .crm-gr-medidor-rotulo { color: var(--crm-aviso); } .crm-gr-medidor[data-tono=error] .crm-gr-medidor-rotulo { color: var(--crm-error); } .crm-gr-medidor-objetivo { stroke: var(--crm-text); stroke-width: 1.5; } .crm-gr-medidor-centro { position: absolute; inset-inline: 0; display: grid; justify-items: center; gap: 2px; translate: 0 -50%; text-align: center; } .crm-gr-medidor-valor { font-size: 28px; font-weight: 500; line-height: 32px; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; } .crm-gr-medidor-de { color: var(--crm-muted); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; } .crm-gr-medidor-rotulo { color: var(--crm-text-2); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; font-variant-numeric: tabular-nums; } .crm-gr-medidor[data-logrado] .crm-gr-medidor-rotulo { color: var(--crm-acento); } .crm-gr-marco { --crm-gr-fondo: var(--crm-panel); container-type: inline-size; min-width: 0; padding: 20px; border: 1px solid var(--crm-line); background: var(--crm-panel); color: var(--crm-text); font-family: var(--crm-sans); font-size: 13px; line-height: 20px; } .crm-gr-marco .crm-gr, .crm-gr-marco .crm-gr-medidor, .crm-gr-marco .crm-gr-spark, .crm-gr-ampliado .crm-gr { --crm-gr-fondo: var(--crm-panel); } .crm-gr-marco-cabecera { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 28px auto; align-items: center; column-gap: 16px; } .crm-gr-marco-titulo { grid-row: 1; grid-column: 1; min-width: 0; margin: 0; overflow: hidden; color: var(--crm-text); font-size: 15px; font-weight: 500; line-height: 22px; letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; } .crm-gr-marco-rotulo { margin: 0; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; font-weight: 400; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-gr-marco-cabecera > .crm-gr-marco-rotulo { grid-row: 2; grid-column: 1 / -1; } .crm-gr-marco-controles { grid-row: 1; grid-column: 2; display: flex; align-items: center; gap: 8px; height: 28px; } .crm-gr-marco-acciones { grid-row: 1; grid-column: -2; display: flex; align-items: center; gap: 4px; height: 28px; } .crm-gr-marco-cabecera:has(> .crm-gr-marco-controles):has(> .crm-gr-marco-acciones) { grid-template-columns: minmax(0, 1fr) auto auto; } .crm-gr-marco-controles + .crm-gr-marco-acciones { margin-left: -8px; } .crm-gr-marco-valor { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 12px; } .crm-gr-marco-cifra { color: var(--crm-text); font-size: 28px; font-weight: 500; line-height: 32px; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; } .crm-gr-variacion { display: inline-flex; align-items: center; gap: 4px; color: var(--crm-text-2); font-size: 12px; font-weight: 500; line-height: 16px; font-variant-numeric: tabular-nums; } .crm-gr-variacion svg { flex: none; width: 14px; height: 14px; } .crm-gr-variacion[data-mejora] { color: var(--crm-acento); } .crm-gr-variacion-contra { margin-left: 2px; color: var(--crm-dim); font-weight: 400; } .crm-gr-marco-cuerpo { margin-top: 16px; } .crm-gr-marco-aviso { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 0 16px; border-block: 1px solid var(--crm-line); } .crm-gr-marco-aviso[data-tipo=error] { border-color: var(--crm-error-linea); } .crm-gr-marco-aviso [role=alert] { display: inline-flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--crm-error); font-size: 13px; line-height: 20px; } .crm-gr-marco-aviso [role=alert] svg { flex: none; width: 16px; height: 16px; margin-top: 2px; } @container (max-width: 400px) { .crm-gr-marco-cabecera { grid-template-columns: minmax(0, 1fr); grid-template-rows: 28px auto auto; } .crm-gr-marco-cabecera:has(> .crm-gr-marco-controles):has(> .crm-gr-marco-acciones) { grid-template-columns: minmax(0, 1fr) auto; } .crm-gr-marco-cabecera:has(> .crm-gr-marco-acciones) { grid-template-columns: minmax(0, 1fr) auto; } .crm-gr-marco-acciones { grid-column: 2; } .crm-gr-marco-controles { grid-row: 3; grid-column: 1 / -1; flex-wrap: wrap; justify-content: flex-start; row-gap: 8px; height: auto; min-height: 28px; margin-top: 12px; } .crm-gr-marco-controles + .crm-gr-marco-acciones { margin-left: 0; } } @media (max-width: 480px) { .crm-gr-marco { padding: 16px; } } .crm-gr-esqueleto { position: relative; animation: crm-gr-aparece var(--crm-t-color) linear var(--crm-t-retardo) both; } .crm-gr-esqueleto svg { display: block; overflow: hidden; } .crm-gr-esqueleto-forma { fill: var(--crm-esqueleto-a); } .crm-gr-esqueleto-trazo { fill: none; stroke: var(--crm-esqueleto-b); stroke-width: 1.5; stroke-linecap: round; } .crm-gr-esqueleto-luz-a { stop-color: var(--crm-esqueleto-b); stop-opacity: 0; } .crm-gr-esqueleto-luz-b { stop-color: var(--crm-esqueleto-b); } .crm-gr-esqueleto-barrido { transform-box: fill-box; opacity: 0; } .crm-gr-capa { background: transparent; } .crm-gr-telon { position: fixed; inset: 0; z-index: 60; background: var(--crm-telon); } .crm-gr-ampliado { --crm-gr-fondo: var(--crm-panel); position: fixed; inset: 32px; z-index: 61; display: flex; flex-direction: column; padding: 0 20px 20px; border: 1px solid var(--crm-line-2); background: var(--crm-panel); box-shadow: var(--crm-sombra); color: var(--crm-text); font-family: var(--crm-sans); font-size: 13px; line-height: 20px; container-type: inline-size; } @media (max-width: 480px) { .crm-gr-ampliado { inset: 8px; padding: 0 16px 16px; } .crm-gr-ampliado-barra { margin-inline: -16px; padding-left: 16px; } } .crm-gr-ampliado-barra { display: flex; align-items: center; gap: 12px; height: 52px; margin: 0 -20px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--crm-line); } .crm-gr-ampliado-barra .crm-gr-marco-rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-gr-ampliado-barra > :last-child { margin-left: auto; } .crm-gr-ampliado-titulo { margin: 0; font-size: 15px; font-weight: 500; line-height: 22px; letter-spacing: -0.01em; white-space: nowrap; } .crm-gr-ampliado-cuerpo { display: flex; flex: 1; flex-direction: column; min-height: 0; margin-top: 16px; } .crm-gr-ampliado-cuerpo > .crm-gr { display: flex; flex: 1; flex-direction: column; min-height: 0; } .crm-gr-plano[data-ampliado] { flex: 1; min-height: 0; } .crm-gr-plano[data-ampliado][data-desplazable] { overflow-y: auto; } @media screen and (prefers-reduced-motion: no-preference) { .crm-gr-trazo:not([data-comparacion], [data-estimado]) { stroke-dasharray: 1 1; transition: stroke-dashoffset var(--crm-t-dibujo) var(--crm-curva) calc(min(var(--i, 0), 10) * var(--crm-t-escalon)); } .crm-gr:not([data-visto], [data-crm-estatico], [data-crm-estatico] *) .crm-gr-trazo:not([data-comparacion], [data-estimado]) { stroke-dashoffset: 1; } .crm-gr-trazo:is([data-comparacion], [data-estimado]), .crm-gr-area, .crm-gr-banda, .crm-gr-relleno, .crm-gr-final { transition: opacity var(--crm-t-dibujo) var(--crm-curva); } .crm-gr:not([data-visto], [data-crm-estatico], [data-crm-estatico] *) :is(.crm-gr-trazo[data-comparacion], .crm-gr-trazo[data-estimado], .crm-gr-area, .crm-gr-banda, .crm-gr-relleno, .crm-gr-final) { opacity: 0; } .crm-gr-barra { transition: scale var(--crm-t-dibujo) var(--crm-curva) calc(min(var(--i, 0), 10) * var(--crm-t-escalon)); } .crm-gr:not([data-visto], [data-crm-estatico], [data-crm-estatico] *) .crm-gr-barra { scale: 1 0; } .crm-gr:not([data-visto], [data-crm-estatico], [data-crm-estatico] *) .crm-gr-barra[data-horizontal] { scale: 0 1; } .crm-gr-final[data-vivo] .crm-gr-latido { animation: crm-gr-latido var(--crm-t-latido) var(--crm-curva) var(--crm-t-dibujo) infinite; } .crm-gr-donut-revelado { stroke-dasharray: 1 1; transition: stroke-dashoffset var(--crm-t-dibujo) var(--crm-curva); } .crm-gr:not([data-visto], [data-crm-estatico], [data-crm-estatico] *) .crm-gr-donut-revelado { stroke-dashoffset: 1; } .crm-gr-celda { transition: opacity var(--crm-t-dibujo) var(--crm-curva) calc(min(var(--i, 0), 10) * var(--crm-t-escalon)), stroke var(--crm-t-color) ease; } .crm-gr:not([data-visto], [data-crm-estatico], [data-crm-estatico] *) .crm-gr-celda { opacity: 0; } .crm-gr-embudo-barra, .crm-gr-embudo-perdida { transition: scale var(--crm-t-dibujo) var(--crm-curva) calc(min(var(--i, 0), 10) * var(--crm-t-escalon)); } .crm-gr:not([data-visto], [data-crm-estatico], [data-crm-estatico] *) .crm-gr-embudo-barra { scale: 0 1; } .crm-gr:not([data-visto], [data-crm-estatico], [data-crm-estatico] *) .crm-gr-embudo-perdida { scale: 0 1; } .crm-gr-medidor-arco { transition: stroke-dasharray var(--crm-t-dibujo) var(--crm-curva); } .crm-gr-medidor:not([data-visto], [data-crm-estatico], [data-crm-estatico] *) .crm-gr-medidor-arco { stroke-dasharray: 0 1; } .crm-gr-spark-linea { stroke-dasharray: 1 1; transition: stroke-dashoffset var(--crm-t-dibujo) var(--crm-curva); } .crm-gr-spark:not([data-visto], [data-crm-estatico], [data-crm-estatico] *) .crm-gr-spark-linea { stroke-dashoffset: 1; } .crm-gr-spark-barra { transition: scale var(--crm-t-dibujo) var(--crm-curva) calc(min(var(--i, 0), 10) * var(--crm-t-escalon)); } .crm-gr-spark:not([data-visto], [data-crm-estatico], [data-crm-estatico] *) .crm-gr-spark-barra { scale: 1 0; } .crm-gr-spark-punto, .crm-gr-spark-area { transition: opacity var(--crm-t-color) ease var(--crm-t-dibujo); } .crm-gr-spark:not([data-visto], [data-crm-estatico], [data-crm-estatico] *) :is(.crm-gr-spark-punto, .crm-gr-spark-area) { opacity: 0; } .crm-gr-esqueleto-barrido { opacity: 1; animation: crm-gr-barrido var(--crm-t-barrido) var(--crm-curva) infinite; } .crm-gr-telon { animation: crm-gr-aparece var(--crm-t-capa) var(--crm-snap); } .crm-gr-ampliado { animation: crm-gr-entra var(--crm-t-capa) var(--crm-snap); } } @keyframes crm-gr-latido { from { opacity: 0.5; scale: 1; } to { opacity: 0; scale: 3; } } @keyframes crm-gr-barrido { from { transform: translateX(0); } to { transform: translateX(200%); } } @keyframes crm-gr-aparece { from { opacity: 0; } } @keyframes crm-gr-entra { from { opacity: 0; translate: 0 4px; scale: 0.98; } } @media (prefers-reduced-motion: reduce) { .crm-gr-consejo, .crm-gr-barra, .crm-gr-leyenda-item, .crm-gr-ver-datos, .crm-gr-estadistica { transition: none; } .crm-gr-latido, .crm-gr-esqueleto-barrido { animation: none; } } .crm-gr-vacio { display: grid; align-content: center; } .crm-gr-vacio-linea { display: flex; align-items: center; gap: 12px; margin: 0; } .crm-gr-vacio-filete { flex: 1; height: 1px; background: var(--crm-dim); order: 2; } .crm-gr-vacio-texto { color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; white-space: nowrap; } .crm-gr-marco-acciones :is(button, [role=button]):disabled { border-color: var(--crm-linea-apagada); background: transparent; color: var(--crm-dim); opacity: 1; cursor: not-allowed; } .crm-gr-marco-acciones :is(button, [role=button]):disabled svg { color: var(--crm-dim); } .crm-cascada { container: crm-cascada / inline-size; min-width: 0; } .crm-cascada-lista { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; } .crm-cascada-paso { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 32px; } .crm-cascada-etiqueta { overflow: hidden; min-width: 0; color: var(--crm-text-2); font-size: 13px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; } .crm-cascada-pista { position: relative; height: 12px; background: var(--crm-line); } .crm-cascada-base { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--crm-muted); } .crm-cascada-barra { position: absolute; top: 0; bottom: 0; background: var(--crm-serie-2); } .crm-cascada-paso[data-tono=total] .crm-cascada-barra { background: var(--crm-text-2); } .crm-cascada-paso[data-tono=baja] .crm-cascada-barra { background: var(--crm-serie-3); } .crm-cascada-paso[data-tono=desfavorable] .crm-cascada-barra { background: var(--crm-error); } .crm-cascada-paso[data-tono=favorable] .crm-cascada-barra { background: var(--crm-muted); } .crm-cascada-paso[data-tono=residuo] .crm-cascada-barra { background: var(--crm-line-2); } .crm-cascada-cifra { min-width: 96px; color: var(--crm-text-2); font-size: 13px; font-variant-numeric: tabular-nums; line-height: 20px; text-align: right; white-space: nowrap; } .crm-cascada-paso[data-tipo=total] .crm-cascada-cifra { color: var(--crm-text); font-weight: 500; } @container crm-cascada (max-width: 559.98px) { .crm-cascada-paso { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; padding-block: 4px; } .crm-cascada-pista { grid-column: 1 / -1; grid-row: 2; } } @media (forced-colors: active) { .crm-cascada-barra { background: CanvasText; } } .crm-placa, .crm-placa-editor, .crm-placa *, .crm-placa *::before, .crm-placa *::after, .crm-placa-editor *, .crm-placa-editor *::before, .crm-placa-editor *::after { box-sizing: border-box; } .crm-placa { --crm-placa-alto: 48px; --crm-placa-banda: 24px; --crm-placa-estrellas: 16px; --crm-placa-relleno: 12px; position: relative; display: inline-flex; align-items: stretch; height: var(--crm-placa-alto); min-width: 0; max-width: 100%; overflow: hidden; border: 2px solid var(--crm-placa-tinta); border-radius: 0; background: var(--crm-placa-fondo); color: var(--crm-placa-tinta); vertical-align: middle; forced-color-adjust: none; } .crm-placa[data-tamano=pequena] { --crm-placa-alto: 32px; --crm-placa-banda: 16px; --crm-placa-estrellas: 12px; --crm-placa-relleno: 8px; border-width: 1px; } .crm-placa[data-tamano=grande] { --crm-placa-alto: 96px; --crm-placa-banda: 40px; --crm-placa-estrellas: 32px; --crm-placa-relleno: 24px; } .crm-placa-ue { display: flex; flex: none; flex-direction: column; align-items: center; justify-content: space-between; width: var(--crm-placa-banda); padding: 2px 0; background: var(--crm-placa-azul); color: var(--crm-placa-letra-ue); } .crm-placa[data-tamano=grande] .crm-placa-ue { padding: 8px 0 6px; } .crm-placa-estrellas { width: var(--crm-placa-estrellas); height: var(--crm-placa-estrellas); color: var(--crm-placa-estrella); } .crm-placa-pais { font-family: var(--crm-sans); font-size: 12px; font-weight: 500; line-height: 16px; } .crm-placa[data-tamano=pequena] .crm-placa-pais { font-size: 11px; line-height: 12px; } .crm-placa[data-tamano=grande] .crm-placa-pais { font-size: 20px; line-height: 24px; } .crm-placa-texto, .crm-placa-campo { display: flex; align-items: center; min-width: 0; margin: 0; padding: 0 var(--crm-placa-relleno); color: var(--crm-placa-tinta); font-family: var(--crm-mono); font-size: 28px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 32px; letter-spacing: 0.04em; white-space: nowrap; } .crm-placa[data-tamano=pequena] :is(.crm-placa-texto, .crm-placa-campo) { font-size: 20px; line-height: 24px; } .crm-placa[data-tamano=grande] :is(.crm-placa-texto, .crm-placa-campo) { font-size: 56px; line-height: 64px; } .crm-placa-texto[data-vacia] { color: var(--crm-placa-apagado); font-family: var(--crm-sans); font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: 0; text-transform: none; } .crm-placa[data-tamano=pequena] .crm-placa-texto[data-vacia] { font-size: 12px; line-height: 16px; } .crm-placa[data-tamano=grande] .crm-placa-texto[data-vacia] { font-size: 24px; line-height: 32px; } .crm-placa-editor { container: crm-placa-editor / inline-size; display: grid; justify-items: center; gap: 16px; width: 100%; min-width: 0; } .crm-placa-editor .crm-placa { width: min(560px, 100%); } .crm-placa-editor .crm-placa[data-tamano=normal] { width: min(320px, 100%); } .crm-placa-campo { width: 100%; border: 0; border-radius: 0; outline: none; background: transparent; caret-color: var(--crm-placa-tinta); } .crm-placa-campo::placeholder { color: var(--crm-placa-apagado); opacity: 1; } .crm-placa[data-editable]:focus-within { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-placa-editor[data-estado=error] .crm-placa:not(:focus-within) { outline: 1px solid var(--crm-error-linea); outline-offset: 2px; } .crm-placa[data-deshabilitado] { border-color: var(--crm-placa-apagado); cursor: not-allowed; } .crm-placa[data-deshabilitado] .crm-placa-campo { color: var(--crm-placa-apagado); cursor: not-allowed; } .crm-placa-mensaje { display: flex; align-items: flex-start; justify-content: center; gap: 8px; max-width: 68ch; min-height: 24px; margin: 0; color: var(--crm-muted); font-size: 15px; line-height: 24px; text-align: center; } .crm-placa-mensaje svg { flex: none; width: 16px; height: 16px; margin-top: 4px; stroke-width: 1.6; } .crm-placa-mensaje[data-estado=incompleta] { color: var(--crm-text-2); } .crm-placa-mensaje[data-estado=valida] { color: var(--crm-acento); } .crm-placa-mensaje[data-estado=error] { color: var(--crm-error); } @container crm-placa-editor (max-width: 560px) { .crm-placa[data-tamano=grande] { --crm-placa-banda: 32px; --crm-placa-estrellas: 24px; --crm-placa-relleno: 12px; } .crm-placa[data-tamano=grande] :is(.crm-placa-texto, .crm-placa-campo) { font-size: 32px; line-height: 40px; } } .crm-placa-hueco { color: var(--crm-placa-apagado); white-space: pre; } .crm-placa-cursor { display: inline-block; flex: none; width: 2px; height: 0.9em; margin: 0 1px; background: var(--crm-placa-tinta); } .crm-placa-cursor { animation: crm-placa-parpadeo var(--crm-t-corriente) steps(1) infinite; } @media (prefers-reduced-motion: reduce) { .crm-placa-cursor { animation: none; } } @keyframes crm-placa-parpadeo { 50% { opacity: 0; } } .crm-modo-foco { container: crm-foco / inline-size; position: fixed; z-index: 41; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; background: var(--crm-bg); color: var(--crm-text); font-family: var(--crm-sans); animation: crm-es-funde var(--crm-t-capa) var(--crm-snap); } .crm-modo-foco[data-en-linea] { position: relative; z-index: auto; inset: auto; box-sizing: border-box; width: 100%; min-height: 560px; border: 1px solid var(--crm-line); animation: none; } .crm-modo-foco :where(*), .crm-modo-foco ::before, .crm-modo-foco ::after { box-sizing: border-box; } .crm-foco-cabecera { display: grid; gap: 12px; padding: 16px 24px 0; } .crm-foco-fila { display: flex; align-items: center; justify-content: flex-end; min-width: 0; min-height: 48px; } .crm-foco-cabecera-acciones { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; } @container crm-pasos (max-width: 559.98px) { .crm-foco-pasos:not([data-con-acciones]) .crm-pasos-cuerpo { padding-top: 8px; } .crm-foco-pasos:not([data-con-acciones]) .crm-pasos-numero { position: static; width: 20px; height: 20px; overflow: visible; clip-path: none; } } .crm-foco-pasos[data-forma=estrecha]:not([data-con-acciones]) .crm-pasos-cuerpo { padding-top: 8px; } .crm-foco-pasos[data-forma=estrecha]:not([data-con-acciones]) .crm-pasos-numero { position: static; width: 20px; height: 20px; overflow: visible; clip-path: none; } .crm-foco-cuerpo { display: grid; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 32px 24px; } .crm-foco-contenido { display: grid; align-content: center; gap: 24px; width: min(768px, 100%); min-width: 0; margin: auto; } .crm-modo-foco[data-ancho=amplio] .crm-foco-contenido, .crm-modo-foco[data-ancho=amplio] .crm-foco-pie-interior { width: min(1600px, 100%); } .crm-modo-foco[data-alineacion=inicio] .crm-foco-contenido { align-content: start; margin-block: 0; } .crm-modo-foco[data-alineacion=inicio] .crm-foco-titulo, .crm-modo-foco[data-alineacion=inicio] .crm-foco-ayuda { text-align: start; margin-inline: 0; } .crm-foco-titulo { margin: 0; color: var(--crm-text); font-size: 40px; font-weight: 500; line-height: 44px; letter-spacing: -0.035em; text-align: center; text-wrap: balance; overflow-wrap: anywhere; } .crm-foco-titulo:focus, .crm-foco-titulo:focus-visible { outline: none; } .crm-foco-ayuda { max-width: 68ch; margin: -8px auto 0; color: var(--crm-text-2); font-size: 16px; line-height: 24px; text-align: center; text-wrap: pretty; overflow-wrap: anywhere; } .crm-foco-pie { position: relative; padding: 16px 24px; background: var(--crm-bg); } .crm-foco-pie::before { content: ""; position: absolute; inset: 0 0 auto; border-top: 1px solid var(--crm-line); pointer-events: none; } .crm-foco-pie-interior { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(768px, 100%); margin: 0 auto; } .crm-foco-pie-derecha { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; } .crm-foco-siguiente { min-width: 200px; } @container crm-foco (max-width: 719.98px) { .crm-foco-cabecera { padding: 12px 16px 0; } .crm-foco-cuerpo { padding: 24px 16px; } .crm-foco-titulo { font-size: 28px; line-height: 34px; } .crm-foco-pie { padding: 12px 16px; } .crm-modo-foco:not([data-en-linea]) .crm-foco-pie { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } } @container crm-foco (max-width: 399.98px) { .crm-foco-pie-derecha { flex: 1; } .crm-foco-pie-derecha .crm-foco-siguiente { flex: 1; min-width: 0; } } @media (prefers-reduced-motion: reduce) { .crm-modo-foco { animation: none; } } @media print { .crm-modo-foco { position: static; animation: none; } .crm-foco-pie, .crm-foco-cabecera-acciones { display: none; } } @media (forced-colors: active) { .crm-modo-foco { border: 1px solid CanvasText; } .crm-foco-pie::before { border-top-color: CanvasText; } } :where(.crm-ficha-opcion, .crm-grupo-fichas), :where(.crm-ficha-opcion, .crm-grupo-fichas)::before, :where(.crm-ficha-opcion, .crm-grupo-fichas)::after, :where(.crm-ficha-opcion, .crm-grupo-fichas) *, :where(.crm-ficha-opcion, .crm-grupo-fichas) ::before, :where(.crm-ficha-opcion, .crm-grupo-fichas) ::after { box-sizing: border-box; } .crm-grupo-fichas { --crm-ficha-columna-minima: 240px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--crm-ficha-columna-minima), 100%), 1fr)); gap: 12px; width: 100%; } .crm-grupo-fichas[data-disposicion=rejilla][data-columnas] { grid-template-columns: repeat(var(--crm-ficha-columnas), minmax(0, 1fr)); } .crm-grupo-fichas[data-disposicion=dos] { --crm-ficha-columna-minima: 280px; width: min(640px, 100%); } .crm-grupo-fichas[data-disposicion=lista] { grid-template-columns: minmax(0, 1fr); gap: 8px; } .crm-grupo-fichas > :not(.crm-ficha-opcion, .crm-grupo-fichas-vacio, .crm-grupo-fichas) { display: contents; } .crm-grupo-fichas-vacio { display: flex; grid-column: 1 / -1; align-items: center; gap: 8px; margin: 0; padding: 20px; border: 1px solid var(--crm-line); color: var(--crm-muted); font-family: var(--crm-sans); font-size: 14px; line-height: 22px; } .crm-grupo-fichas-vacio-icono { flex: none; width: 20px; height: 20px; stroke-width: 1.6; } .crm-grupo-fichas-vacio[data-propio] { display: block; padding: 0; border: 0; } .crm-ficha-opcion { position: relative; display: grid; grid-template-rows: auto auto auto auto; grid-template-columns: minmax(0, 1fr); align-content: start; row-gap: 0; min-width: 0; margin: 0; padding: 20px; border: 1px solid var(--crm-line-2); border-radius: 0; background: var(--crm-panel); color: var(--crm-text); font-family: var(--crm-sans); text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background-color var(--crm-t-color) ease-out, border-color var(--crm-t-color) ease-out, transform var(--crm-t-pulsar) var(--crm-snap); } .crm-grupo-fichas:is([data-disposicion=rejilla], [data-disposicion=dos]) { row-gap: 0; margin-block-end: -12px; } .crm-grupo-fichas:is([data-disposicion=rejilla], [data-disposicion=dos]) :is(.crm-ficha-opcion, .crm-grupo-fichas-vacio) { margin-block-end: 12px; } .crm-grupo-fichas:is([data-disposicion=rejilla], [data-disposicion=dos]) .crm-ficha-opcion:not([data-compacta]) { grid-row: span 4; grid-template-rows: subgrid; } .crm-ficha-opcion:not([data-compacta]) > .crm-ficha-opcion-cabeza { grid-row: 1; grid-column: 1 / -1; } .crm-ficha-opcion:not([data-compacta]) > .crm-ficha-opcion-texto { grid-row: 2; grid-column: 1 / -1; } .crm-ficha-opcion:not([data-compacta]) > .crm-ficha-opcion-cifras { grid-row: 3; grid-column: 1 / -1; } .crm-ficha-opcion:not([data-compacta]) > .crm-ficha-opcion-motivo { grid-row: 4; grid-column: 1 / -1; } .crm-ficha-opcion-cabeza { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 48px; margin-bottom: 16px; } .crm-ficha-opcion[data-cabeza=chip]:not([data-compacta]) > .crm-ficha-opcion-cabeza { min-height: 24px; margin-bottom: 12px; } .crm-ficha-opcion[data-cabeza=linea]:not([data-compacta]) { grid-template-columns: minmax(0, 1fr) auto; } .crm-ficha-opcion[data-cabeza=linea]:not([data-compacta]) > .crm-ficha-opcion-cabeza { grid-row: 2; grid-column: 2; min-height: 28px; margin: 0; margin-inline-start: 12px; } .crm-ficha-opcion[data-cabeza=linea]:not([data-compacta]) > .crm-ficha-opcion-texto { grid-column: 1; } .crm-ficha-opcion-icono { display: grid; flex: none; place-items: center; width: 48px; height: 48px; border: 1px solid var(--crm-line-2); color: var(--crm-text-2); } .crm-ficha-opcion-icono svg { width: 20px; height: 20px; stroke-width: 1.6; } .crm-ficha-opcion-distintivo { display: block; flex: 0 1 auto; min-width: 0; max-width: 240px; height: 24px; margin-inline-start: auto; padding: 0 8px; overflow: hidden; border: 1px solid var(--crm-line-2); color: var(--crm-text-2); font-size: 12px; font-weight: 400; line-height: 22px; white-space: nowrap; text-overflow: ellipsis; } .crm-ficha-opcion-flecha { flex: none; width: 16px; height: 16px; margin-inline-start: auto; color: var(--crm-muted); stroke-width: 1.6; transition: translate var(--crm-t-gesto) var(--crm-snap), color var(--crm-t-color) ease-out; } .crm-ficha-opcion-distintivo + .crm-ficha-opcion-flecha { margin-inline-start: 0; } .crm-ficha-opcion-flecha:dir(rtl) { scale: -1 1; } .crm-ficha-opcion-texto { display: grid; align-content: start; min-width: 0; } .crm-ficha-opcion-nombre { min-width: 0; overflow: hidden; font-size: 20px; font-weight: 500; line-height: 28px; letter-spacing: -0.02em; white-space: nowrap; text-overflow: ellipsis; } .crm-ficha-opcion-detalle { min-width: 0; margin-top: 4px; overflow: hidden; color: var(--crm-muted); font-size: 14px; line-height: 22px; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; } .crm-ficha-opcion-consejo-linea { display: block; } .crm-ficha-opcion[data-oculto] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .crm-ficha-opcion-cifras { display: grid; align-content: start; gap: 8px; min-width: 0; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--crm-line); } .crm-ficha-opcion-cifra { display: grid; min-width: 0; } .crm-ficha-opcion-cifra-rotulo { display: flex; align-items: center; column-gap: 8px; min-width: 0; color: var(--crm-muted); font-size: 13px; line-height: 20px; } .crm-ficha-opcion-cifra-rotulo-texto { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .crm-ficha-opcion-cifra-marca { display: inline-flex; flex: none; align-items: center; height: 20px; padding: 0 6px; border: 1px solid var(--crm-line-2); color: var(--crm-text-2); font-size: 12px; line-height: 16px; white-space: nowrap; } .crm-ficha-opcion-cifra[data-principal] .crm-ficha-opcion-cifra-valor, .crm-ficha-opcion-cifra[data-principal] .crm-ficha-opcion-cifra-falta { margin-top: 6px; } .crm-ficha-opcion-cifra-valor { display: block; min-width: 0; color: inherit; font-size: 24px; font-weight: 500; line-height: 28px; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; } .crm-ficha-opcion-cifra-visible { display: inline-flex; flex-wrap: wrap; align-items: baseline; max-width: 100%; } .crm-ficha-opcion-cifra-texto { white-space: nowrap; } .crm-ficha-opcion-cifra-unidad { color: var(--crm-muted); font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: 0; white-space: nowrap; } .crm-ficha-opcion-cifra[data-principal][data-escalon="20"] .crm-ficha-opcion-cifra-valor, .crm-grupo-fichas:has(.crm-ficha-opcion-cifra[data-escalon="20"]) .crm-ficha-opcion-cifra[data-principal] .crm-ficha-opcion-cifra-valor { font-size: 20px; line-height: 24px; } .crm-ficha-opcion-cifra[data-principal][data-escalon="20"] .crm-ficha-opcion-cifra-unidad, .crm-grupo-fichas:has(.crm-ficha-opcion-cifra[data-escalon="20"]) .crm-ficha-opcion-cifra[data-principal] .crm-ficha-opcion-cifra-unidad { font-size: 12px; line-height: 16px; } .crm-ficha-opcion-cifra-falta { min-width: 0; overflow-wrap: anywhere; color: var(--crm-muted); font-size: 14px; line-height: 22px; } .crm-ficha-opcion-cifra-nota { min-width: 0; margin-top: 4px; overflow-wrap: anywhere; color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-ficha-opcion-cifra:not([data-principal]) { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "rotulo rotulo" "valor marca" "nota nota"; align-items: center; column-gap: 8px; row-gap: 6px; } .crm-ficha-opcion-cifra:not([data-principal]) .crm-ficha-opcion-cifra-rotulo { display: contents; } .crm-ficha-opcion-cifra:not([data-principal]) .crm-ficha-opcion-cifra-rotulo-texto { grid-area: rotulo; color: var(--crm-muted); font-size: 13px; line-height: 20px; } .crm-ficha-opcion-cifra:not([data-principal]) .crm-ficha-opcion-cifra-marca { grid-area: marca; justify-self: start; } .crm-ficha-opcion-cifra:not([data-principal]) .crm-ficha-opcion-cifra-valor, .crm-ficha-opcion-cifra:not([data-principal]) .crm-ficha-opcion-cifra-falta { grid-area: valor; color: var(--crm-text-2); font-size: 13px; font-weight: 400; line-height: 20px; letter-spacing: 0; } .crm-ficha-opcion-cifra:not([data-principal]) .crm-ficha-opcion-cifra-falta { grid-column: 1 / -1; color: var(--crm-muted); } .crm-ficha-opcion-cifra:not([data-principal]) .crm-ficha-opcion-cifra-unidad { font-size: 13px; } .crm-ficha-opcion-cifra:not([data-principal]) .crm-ficha-opcion-cifra-nota { grid-area: nota; margin-top: 0; } .crm-ficha-opcion-motivo { display: grid; gap: 4px; min-width: 0; margin-top: 12px; overflow-wrap: anywhere; color: var(--crm-text-2); font-size: 13px; line-height: 20px; } :is(.crm-ficha-opcion-cabeza, .crm-ficha-opcion-texto, .crm-ficha-opcion-cifras, .crm-ficha-opcion-motivo) { align-self: start; } .crm-ficha-opcion-recuperacion { color: var(--crm-muted); } .crm-ficha-opcion-recuperacion[data-accion] { color: var(--crm-text); } .crm-ficha-opcion-recuperacion[data-accion] .crm-ficha-opcion-recuperacion-texto { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--crm-muted); } .crm-ficha-opcion-recuperacion-flecha { white-space: nowrap; } .crm-ficha-opcion-recuperacion-flecha svg { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; stroke-width: 1.5; transition: translate var(--crm-t-gesto) var(--crm-snap); } .crm-ficha-opcion-recuperacion-flecha svg:dir(rtl) { scale: -1 1; } @media (hover: hover) { .crm-ficha-opcion:hover:not([data-inactiva]) { border-color: var(--crm-control); background: var(--crm-panel-2); transition: transform var(--crm-t-pulsar) var(--crm-snap); } .crm-ficha-opcion:hover:not([data-inactiva]) .crm-ficha-opcion-flecha { color: var(--crm-text); translate: 2px 0; } .crm-ficha-opcion:hover:not([data-inactiva]) .crm-ficha-opcion-flecha:dir(rtl) { translate: -2px 0; } .crm-ficha-opcion[data-bloqueada]:hover:has(.crm-ficha-opcion-recuperacion[data-accion]) { border-color: var(--crm-muted); } .crm-ficha-opcion[data-recuperable]:hover .crm-ficha-opcion-recuperacion-flecha svg { translate: 2px 0; } .crm-ficha-opcion[data-recuperable]:hover .crm-ficha-opcion-recuperacion-flecha svg:dir(rtl) { translate: -2px 0; } .crm-ficha-opcion[data-recuperable]:hover .crm-ficha-opcion-recuperacion-texto { text-decoration-color: currentColor; } } .crm-ficha-opcion:active:not([data-inactiva]) { transform: translateY(0.5px); } .crm-ficha-opcion:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-ficha-opcion[aria-pressed=true] { border-color: var(--crm-acento-linea); background: var(--crm-panel-3); } .crm-ficha-opcion[aria-pressed=true]::before { content: ""; position: absolute; top: -1px; bottom: -1px; inset-inline-start: -1px; width: 2px; background: var(--crm-acento); } .crm-ficha-opcion[aria-pressed=true] .crm-ficha-opcion-icono { border-color: var(--crm-acento-linea); color: var(--crm-acento); } .crm-ficha-opcion[data-inactiva] { cursor: not-allowed; } .crm-ficha-opcion[aria-disabled=true]:not([data-bloqueada], [data-cargando]):not(.crm-grupo-fichas[data-solo-lectura] > *, .crm-grupo-fichas[aria-busy] > *) { border-color: var(--crm-linea-apagada); background: transparent; color: var(--crm-dim); } .crm-ficha-opcion[aria-disabled=true]:not([data-bloqueada], [data-cargando]):not(.crm-grupo-fichas[data-solo-lectura] > *, .crm-grupo-fichas[aria-busy] > *) :is(.crm-ficha-opcion-icono, .crm-ficha-opcion-detalle, .crm-ficha-opcion-distintivo, .crm-ficha-opcion-cifra-rotulo, .crm-ficha-opcion-cifra-unidad, .crm-ficha-opcion-cifra-falta, .crm-ficha-opcion-cifra-nota) { border-color: var(--crm-linea-apagada); color: var(--crm-dim); } .crm-ficha-opcion[data-bloqueada] { border-color: var(--crm-linea-apagada); background: transparent; color: var(--crm-text-2); } .crm-ficha-opcion[data-bloqueada] .crm-ficha-opcion-icono { border-color: var(--crm-linea-apagada); color: var(--crm-muted); } .crm-ficha-opcion[data-bloqueada]:has(.crm-ficha-opcion-recuperacion[data-accion]) { cursor: pointer; } .crm-ficha-opcion[data-cargando], .crm-grupo-fichas[aria-busy] > .crm-ficha-opcion { cursor: progress; } .crm-ficha-opcion-cargando { color: var(--crm-text-2); animation: crm-ctl-giro var(--crm-t-giro) linear infinite; } .crm-grupo-fichas[data-solo-lectura] > .crm-ficha-opcion { cursor: default; } .crm-ficha-opcion-motivo[data-lectura] { color: var(--crm-muted); } .crm-ficha-opcion[data-compacta] { grid-template-columns: [texto-start] minmax(0, 1fr) [texto-end] auto; grid-template-rows: none; grid-auto-rows: auto; align-content: center; align-items: center; column-gap: 16px; min-height: 88px; padding-block: 16px; } .crm-ficha-opcion[data-compacta]:has(.crm-ficha-opcion-distintivo + .crm-ficha-opcion-flecha) { grid-template-columns: [texto-start] minmax(0, 1fr) [texto-end] auto auto; } .crm-ficha-opcion[data-compacta][data-icono], .crm-grupo-fichas:has(.crm-ficha-opcion-icono) .crm-ficha-opcion[data-compacta] { grid-template-columns: 48px [texto-start] minmax(0, 1fr) [texto-end] auto; } .crm-ficha-opcion[data-compacta][data-icono]:has(.crm-ficha-opcion-distintivo + .crm-ficha-opcion-flecha), .crm-grupo-fichas:has(.crm-ficha-opcion-icono) .crm-ficha-opcion[data-compacta]:has(.crm-ficha-opcion-distintivo + .crm-ficha-opcion-flecha) { grid-template-columns: 48px [texto-start] minmax(0, 1fr) [texto-end] auto auto; } .crm-ficha-opcion[data-compacta] .crm-ficha-opcion-cabeza { display: contents; } .crm-ficha-opcion[data-compacta] .crm-ficha-opcion-icono { grid-column: 1; grid-row: 1 / span 3; align-self: center; } .crm-ficha-opcion[data-compacta] :is(.crm-ficha-opcion-texto, .crm-ficha-opcion-cifras, .crm-ficha-opcion-motivo) { grid-column: texto; } .crm-ficha-opcion[data-compacta] .crm-ficha-opcion-texto { grid-row: 1; } .crm-ficha-opcion[data-compacta] .crm-ficha-opcion-cifras { grid-row: 2; margin-top: 8px; padding-top: 0; border-top: 0; } .crm-ficha-opcion[data-compacta] .crm-ficha-opcion-motivo { grid-row: 3; } .crm-ficha-opcion[data-compacta] :is(.crm-ficha-opcion-distintivo, .crm-ficha-opcion-flecha) { grid-column: -2 / -1; grid-row: 1 / span 3; align-self: center; margin-inline-start: 0; } .crm-ficha-opcion[data-compacta] .crm-ficha-opcion-distintivo:has(+ .crm-ficha-opcion-flecha) { grid-column: -3 / -2; } @supports not (grid-template-rows: subgrid) { .crm-grupo-fichas:is([data-disposicion=rejilla], [data-disposicion=dos]) .crm-ficha-opcion:not([data-compacta]) { grid-row: auto; grid-template-rows: auto auto auto 1fr; } } @media (prefers-reduced-motion: reduce) { .crm-ficha-opcion, .crm-ficha-opcion-flecha, .crm-ficha-opcion-recuperacion-flecha svg { transition-property: background-color, border-color, color; } .crm-ficha-opcion:active:not([data-inactiva]) { transform: none; } .crm-ficha-opcion:hover:not([data-inactiva]) .crm-ficha-opcion-flecha, .crm-ficha-opcion[data-recuperable]:hover .crm-ficha-opcion-recuperacion-flecha svg { translate: none; } .crm-ficha-opcion-cargando { animation: none; } } @media (forced-colors: active) { .crm-ficha-opcion[aria-pressed=true]::before { background: Highlight; } .crm-ficha-opcion[data-bloqueada] { border-style: dashed; } .crm-ficha-opcion-cifras { border-top-color: CanvasText; } } .crm-ficha-opcion-atajo { position: absolute; right: 20px; bottom: 20px; } .crm-ficha-opcion:has(.crm-ficha-opcion-atajo):not([data-compacta]) .crm-ficha-opcion-texto { padding-right: 32px; } .crm-ficha-opcion[data-compacta] .crm-ficha-opcion-atajo { top: 50%; bottom: auto; transform: translateY(-50%); } .crm-ficha-opcion[data-compacta]:has(.crm-ficha-opcion-atajo) .crm-ficha-opcion-flecha { display: none; } @media (pointer: coarse) { .crm-ficha-opcion-atajo { display: none; } .crm-ficha-opcion[data-compacta]:has(.crm-ficha-opcion-atajo) .crm-ficha-opcion-flecha { display: block; } } .crm-ficha-opcion[data-lineas="2"] .crm-ficha-opcion-nombre { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; overflow-wrap: anywhere; } .crm-firma-pantalla, .crm-firma-pantalla * { box-sizing: border-box; } .crm-firma-pantalla { display: grid; gap: 16px; min-width: 0; width: 100%; color: var(--crm-text); font-family: var(--crm-sans); font-size: 15px; line-height: 1.5; } .crm-firma-pantalla-titulo { margin: 0; font-size: 20px; font-weight: 500; overflow-wrap: anywhere; } .crm-firma-pantalla-ayuda, .crm-firma-pantalla-estado { margin: 0; color: var(--crm-muted); } .crm-firma-pantalla-canvas { display: block; width: 100%; height: clamp(280px, 45vh, 520px); border: 1px solid var(--crm-line); border-radius: 0; background: var(--crm-bg); color: var(--crm-text); touch-action: none; user-select: none; cursor: crosshair; } .crm-firma-pantalla-acciones { display: flex; flex-wrap: wrap; gap: 12px; } .crm-firma-pantalla-error { margin: 0; color: var(--crm-text); font-weight: 500; } @media (max-width: 30em) { .crm-firma-pantalla-acciones { display: grid; grid-template-columns: minmax(0, 1fr); } .crm-firma-pantalla-acciones .crm-boton { width: 100%; } } @media (prefers-reduced-motion: reduce) { .crm-firma-pantalla .crm-boton { animation: none; transition: none; } } :where(.crm-ticket, .crm-puntos), :where(.crm-ticket, .crm-puntos) *, :where(.crm-ticket, .crm-puntos) ::before, :where(.crm-ticket, .crm-puntos) ::after { box-sizing: border-box; } .crm-ticket { container-type: inline-size; position: relative; width: min(560px, 100%); border: 1px solid var(--crm-line-2); border-bottom: 0; background: var(--crm-panel); color: var(--crm-text); font-family: var(--crm-sans); font-variant-numeric: tabular-nums; text-align: left; } .crm-ticket-papel { display: grid; grid-template-columns: minmax(0, 1fr); padding: 24px 24px 32px; } .crm-ticket-cabecera { display: grid; gap: 4px; padding-bottom: 16px; border-bottom: 1px dashed var(--crm-line-2); } .crm-ticket-rotulo { color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; overflow-wrap: anywhere; } .crm-ticket-titulo { font-size: 24px; font-weight: 500; line-height: 32px; letter-spacing: -0.02em; overflow-wrap: anywhere; } .crm-ticket-subtitulo { color: var(--crm-text-2); font-size: 15px; line-height: 24px; overflow-wrap: anywhere; } .crm-ticket-extra { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .crm-ticket-lineas { display: grid; grid-template-columns: minmax(0, 1fr) fit-content(50%); column-gap: 12px; margin: 0; padding: 8px 0; border-bottom: 1px dashed var(--crm-line-2); } .crm-ticket-lineas[data-con-acciones] { grid-template-columns: minmax(0, 1fr) fit-content(50%) auto; } .crm-ticket-linea { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; align-content: center; min-height: 36px; padding: 4px 0; } .crm-ticket-concepto { min-width: 0; color: var(--crm-text-2); font-size: 14px; line-height: 22px; overflow-wrap: break-word; } .crm-ticket-importe { grid-column: 2; display: grid; justify-items: end; gap: 4px; margin: 0; color: var(--crm-text); font-size: 14px; font-weight: 500; line-height: 22px; text-align: right; } .crm-ticket-cifra { white-space: nowrap; } .crm-ticket-importe .crm-ticket-unidad { color: var(--crm-muted); font-weight: 400; } .crm-ticket-falta { color: var(--crm-muted); font-weight: 400; overflow-wrap: anywhere; } .crm-ticket-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 8px; } .crm-ticket-motivo { color: var(--crm-muted); font-size: 12px; font-weight: 400; line-height: 16px; overflow-wrap: anywhere; } .crm-ticket-marca { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 1px solid var(--crm-aviso-linea); color: var(--crm-text-2); font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: 0; white-space: nowrap; } .crm-ticket-linea[data-estado=excluida] .crm-ticket-marca { border-color: var(--crm-line-2); } .crm-ticket-linea[data-estado=excluida] :is(.crm-ticket-concepto, .crm-ticket-cifra) { color: var(--crm-muted); } .crm-ticket-accion { grid-column: 3; margin: 0; } .crm-ticket-aviso { margin: 0; padding: 8px 0; border-bottom: 1px dashed var(--crm-line-2); color: var(--crm-text-2); font-size: 13px; line-height: 20px; } .crm-ticket-vacio { margin: 0; padding: 16px 0; border-bottom: 1px dashed var(--crm-line-2); color: var(--crm-muted); font-size: 14px; line-height: 22px; } .crm-ticket-total { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; padding-top: 20px; } .crm-ticket-total-rotulo { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 15px; font-weight: 500; line-height: 22px; } .crm-ticket-total-rotulo .crm-ticket-marca { align-self: center; } .crm-ticket-total-cifra { max-width: 100%; margin-left: auto; font-size: 40px; font-weight: 500; line-height: 44px; letter-spacing: -0.035em; white-space: nowrap; } .crm-ticket-total-cifra .crm-ticket-unidad { font-size: 24px; line-height: 1; letter-spacing: 0; } .crm-ticket-total-falta { margin-left: auto; color: var(--crm-muted); font-size: 15px; line-height: 22px; } .crm-ticket-total-nota { flex-basis: 100%; color: var(--crm-text-2); font-size: 12px; line-height: 16px; text-align: right; } .crm-ticket-total-cifra:not([data-medido])[data-largo] { font-size: 28px; line-height: 32px; } .crm-ticket-total-cifra:not([data-medido])[data-largo] .crm-ticket-unidad { font-size: 16px; } .crm-ticket-total-cifra[data-medido][data-escalon="40"] { font-size: 40px; line-height: 44px; } .crm-ticket-total-cifra[data-medido][data-escalon="40"] .crm-ticket-unidad { font-size: 24px; } .crm-ticket-total-cifra[data-medido][data-escalon="28"] { font-size: 28px; line-height: 32px; } .crm-ticket-total-cifra[data-medido][data-escalon="28"] .crm-ticket-unidad { font-size: 16px; } .crm-ticket-total-cifra[data-medido][data-escalon="24"] { font-size: 24px; line-height: 28px; } .crm-ticket-total-cifra[data-medido][data-escalon="24"] .crm-ticket-unidad { font-size: 14px; } .crm-ticket-total-cifra[data-medido][data-escalon="20"] { font-size: 20px; line-height: 24px; } .crm-ticket-total-cifra[data-medido][data-escalon="20"] .crm-ticket-unidad { font-size: 12px; } .crm-ticket-total-cifra[data-midiendo] { min-width: 0; max-width: 100%; overflow: hidden; } .crm-ticket-total-cifra[data-compacta] > .crm-ticket-cifra, .crm-ticket-total-cifra:not([data-compacta]) > .crm-ticket-compacta { display: none; } .crm-ticket-total-cifra[data-compacta]:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-ticket-total-exacta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (hover: none), (pointer: coarse), print { .crm-ticket-total-exacta { position: static; display: block; width: auto; height: auto; overflow: visible; clip-path: none; color: var(--crm-muted); font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: 0; text-align: right; white-space: normal; overflow-wrap: anywhere; } } .crm-ticket-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding-top: 16px; color: var(--crm-text-2); font-size: 13px; line-height: 20px; } .crm-ticket-troquel { position: absolute; bottom: -6px; left: -1px; width: calc(100% + 2px); height: 6px; overflow: visible; } .crm-ticket-diente { fill: var(--crm-panel); } .crm-ticket-diente-filo { fill: none; stroke: var(--crm-line-2); stroke-width: 1; } @media (pointer: coarse) { .crm-ticket-linea { min-height: 44px; padding: 8px 0; } } @container (max-width: 399px) { .crm-ticket-papel { padding: 16px 16px 24px; } .crm-ticket-lineas { grid-template-columns: minmax(0, 1fr) fit-content(36%); } .crm-ticket-lineas[data-con-acciones] { grid-template-columns: minmax(0, 1fr) fit-content(36%) auto; } .crm-ticket-total-cifra { font-size: 28px; line-height: 32px; } .crm-ticket-total-cifra .crm-ticket-unidad { font-size: 16px; } .crm-ticket-total-cifra:not([data-medido])[data-largo] { font-size: 24px; line-height: 28px; } .crm-ticket-total-cifra:not([data-medido])[data-largo] .crm-ticket-unidad { font-size: 14px; } } @media (forced-colors: active) { .crm-ticket-marca { border-color: CanvasText; } .crm-ticket-diente-filo { stroke: CanvasText; } } .crm-puntos { container-type: inline-size; width: 100%; min-width: 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 24px; color: var(--crm-text); font-family: var(--crm-sans); } .crm-puntos-carril { display: grid; flex: 1 1 480px; gap: 8px; min-width: 0; } .crm-puntos-resumen { display: none; margin: 0; color: var(--crm-text); font-size: 13px; font-weight: 500; line-height: 20px; font-variant-numeric: tabular-nums; } .crm-puntos-cuenta { color: var(--crm-muted); font-weight: 400; } .crm-puntos-motivo, .crm-puntos-vacio { margin: 0; color: var(--crm-text-2); font-size: 13px; line-height: 20px; overflow-wrap: anywhere; } .crm-puntos-vacio { color: var(--crm-muted); } .crm-puntos-lista { display: grid; margin: 0; padding: 0; list-style: none; } .crm-puntos-punto { position: relative; display: grid; justify-items: center; gap: 8px; min-width: 0; text-align: center; transition: none; } .crm-puntos-punto::before { content: ""; position: absolute; top: 7px; right: calc(50% + 8px); left: calc(-50% + 8px); height: 2px; background: var(--crm-line-2); transition: background-color var(--crm-t-color) var(--crm-snap); } .crm-puntos-punto:first-child::before { display: none; } .crm-puntos-punto:is([data-estado=hecho], [data-estado=actual])::before { background: var(--crm-acento); } .crm-puntos-marca { position: relative; display: grid; place-items: center; width: 16px; height: 16px; border: 2px solid var(--crm-line-2); border-radius: 50%; background: var(--crm-panel); transition: background-color var(--crm-t-color) var(--crm-snap), border-color var(--crm-t-color) var(--crm-snap); } .crm-puntos-marca svg { width: 12px; height: 12px; fill: none; stroke: var(--crm-sobre-acento); stroke-width: 1.6; stroke-linecap: square; } .crm-puntos-punto[data-estado=hecho] .crm-puntos-marca { border-color: var(--crm-acento); background: var(--crm-acento); } .crm-puntos-punto[data-estado=actual] .crm-puntos-marca { border-color: var(--crm-acento); } .crm-puntos-punto[data-estado=actual] .crm-puntos-marca::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--crm-acento); transition: none; } .crm-puntos-punto[data-estado=desconocido] .crm-puntos-marca { border-style: dashed; } .crm-puntos-punto[data-estado=parado] .crm-puntos-marca { border-color: var(--crm-muted); } .crm-puntos-punto[data-estado=parado] .crm-puntos-marca svg { stroke: var(--crm-muted); } .crm-puntos[data-estado=fallado] .crm-puntos-punto[data-estado=parado] .crm-puntos-marca { border-color: var(--crm-error); } .crm-puntos[data-estado=fallado] .crm-puntos-punto[data-estado=parado] .crm-puntos-marca svg { stroke: var(--crm-error); } .crm-puntos-nombre { max-width: 100%; overflow: hidden; color: var(--crm-muted); font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; } .crm-puntos-punto[data-estado=hecho] .crm-puntos-nombre { color: var(--crm-text-2); } .crm-puntos-punto:is([data-estado=actual], [data-estado=parado]) .crm-puntos-nombre { color: var(--crm-text); font-weight: 500; } .crm-puntos:is([data-estado=cancelado], [data-estado=fallado]) .crm-puntos-punto::before { background: var(--crm-linea-apagada); } .crm-puntos[data-estado=fallado] .crm-puntos-resumen { color: var(--crm-error); } .crm-puntos-accion { display: flex; flex-wrap: wrap; gap: 8px; } @container (max-width: 559px) { .crm-puntos-resumen { display: block; } .crm-puntos-nombre { display: none; } .crm-puntos-accion > * { flex: 1 1 auto; } } @media (forced-colors: active) { .crm-puntos-punto:is([data-estado=hecho], [data-estado=actual])::before, .crm-puntos-punto[data-estado=hecho] .crm-puntos-marca, .crm-puntos-punto[data-estado=actual] .crm-puntos-marca::after { background: Highlight; } .crm-puntos-punto:is([data-estado=hecho], [data-estado=actual]) .crm-puntos-marca { border-color: Highlight; } .crm-puntos-marca svg { stroke: CanvasText; } .crm-puntos-punto[data-estado=hecho] .crm-puntos-marca svg { stroke: HighlightText; } } .crm-ficha-vehiculo, .crm-ficha-vehiculo *, .crm-ficha-vehiculo *::before, .crm-ficha-vehiculo *::after { box-sizing: border-box; } .crm-ficha-vehiculo { --crm-fv-escalon: var(--crm-t-escalon, var(--crm-t-pulsar)); container: crm-ficha-vehiculo / inline-size; width: 100%; max-width: 1600px; min-width: 0; margin-inline: auto; color: var(--crm-text); font-family: var(--crm-sans); font-size: 14px; line-height: 22px; text-align: left; } .crm-ficha-vehiculo .crm-ficha-vehiculo-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .crm-ficha-vehiculo .crm-ficha-vehiculo-status { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; line-height: 20px; color: var(--crm-text-2); } .crm-ficha-vehiculo .crm-ficha-vehiculo-status::before { content: ""; flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--crm-muted); } .crm-ficha-vehiculo[data-estado=encontrado] .crm-ficha-vehiculo-status::before { background: var(--crm-acento); } .crm-ficha-vehiculo .crm-ficha-vehiculo-documento { border: 1px solid var(--crm-line-2); background: var(--crm-panel); } .crm-ficha-vehiculo[data-robo] .crm-ficha-vehiculo-documento { border-color: var(--crm-error-linea, var(--crm-error)); } .crm-ficha-vehiculo .crm-ficha-vehiculo-documento > * + * { border-top: 1px solid var(--crm-line); } .crm-ficha-vehiculo .crm-ficha-vehiculo-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; min-height: 48px; padding: 0 20px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-contexto { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; min-width: 0; } .crm-ficha-vehiculo .crm-ficha-vehiculo-cambiar { display: inline-flex; align-items: center; gap: 8px; height: 48px; margin-right: -16px; padding: 0 16px 0 14px; border: 0; border-radius: 0; background: transparent; color: var(--crm-text); font-family: var(--crm-sans); font-size: 15px; line-height: 20px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color var(--crm-t-color) var(--crm-snap); } .crm-ficha-vehiculo .crm-ficha-vehiculo-cambiar > svg { flex: none; color: var(--crm-muted); } .crm-ficha-vehiculo .crm-ficha-vehiculo-cambiar:hover { background: var(--crm-panel-2); } .crm-ficha-vehiculo .crm-ficha-vehiculo-cambiar:hover > svg { color: var(--crm-text); } .crm-ficha-vehiculo .crm-ficha-vehiculo-rotulo { margin-right: auto; font-family: var(--crm-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--crm-muted); } .crm-ficha-vehiculo .crm-ficha-vehiculo-fuente { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--crm-muted); } .crm-ficha-vehiculo .crm-ficha-vehiculo-fuente .crm-ficha-vehiculo-procedencia { margin: 0; } .crm-ficha-vehiculo .crm-ficha-vehiculo-visto { flex: none; width: 14px; height: 14px; color: var(--crm-acento); } .crm-ficha-vehiculo .crm-ficha-vehiculo-placa { position: relative; flex: none; max-width: 100%; overflow: hidden; } .crm-ficha-vehiculo .crm-placa { display: inline-flex; align-items: stretch; height: 32px; max-width: 100%; overflow: hidden; border: 1px solid var(--crm-placa-tinta); background: var(--crm-placa-fondo); color: var(--crm-placa-tinta); forced-color-adjust: none; vertical-align: top; } .crm-ficha-vehiculo .crm-placa-ue { display: flex; flex: none; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 16px; background: var(--crm-placa-azul); color: var(--crm-placa-letra-ue); } .crm-ficha-vehiculo .crm-placa-estrellas { width: 12px; height: 12px; color: var(--crm-placa-estrella); } .crm-ficha-vehiculo .crm-placa-pais { font-size: 11px; line-height: 12px; } .crm-ficha-vehiculo .crm-placa-texto { display: flex; align-items: center; min-width: 0; padding: 0 8px; font-family: var(--crm-mono); font-size: 20px; font-weight: 500; line-height: 24px; white-space: nowrap; } .crm-ficha-vehiculo .crm-ficha-vehiculo-escaner { display: none; } .crm-ficha-vehiculo .crm-ficha-vehiculo-placa[data-escaneando] .crm-ficha-vehiculo-escaner { position: absolute; display: block; inset: 0 auto 0 0; width: 2px; background: var(--crm-placa-azul); animation: crm-fv-escanear var(--crm-t-filo, var(--crm-t-dibujo)) var(--crm-curva) infinite alternate; } @keyframes crm-fv-escanear { from { left: 16px; } to { left: calc(100% - 2px); } } .crm-ficha-vehiculo .crm-ficha-vehiculo-espera { min-height: 160px; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 24px; text-align: center; } .crm-ficha-vehiculo .crm-ficha-vehiculo-espera > span { font-family: var(--crm-mono); font-size: 40px; line-height: 44px; color: var(--crm-muted); } .crm-ficha-vehiculo .crm-ficha-vehiculo-espera h3 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -0.02em; } .crm-ficha-vehiculo .crm-ficha-vehiculo-espera p, .crm-ficha-vehiculo .crm-ficha-vehiculo-vacio { margin: 0; color: var(--crm-text-2); } .crm-ficha-vehiculo .crm-ficha-vehiculo-vacio { padding: 12px 20px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-alerta { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 16px 20px; border-bottom: 2px solid var(--crm-error); background: var(--crm-error-suave); color: var(--crm-error); } .crm-ficha-vehiculo .crm-ficha-vehiculo-alerta > svg { margin-top: 1px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-alerta strong { display: block; font-size: 15px; line-height: 22px; font-weight: 500; } .crm-ficha-vehiculo .crm-ficha-vehiculo-alerta p { margin: 4px 0 0; font-size: 13px; line-height: 20px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-alerta .crm-ficha-vehiculo-procedencia { color: inherit; } .crm-ficha-vehiculo .crm-ficha-vehiculo-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); } .crm-ficha-vehiculo .crm-ficha-vehiculo-vehiculo { min-width: 0; } .crm-ficha-vehiculo .crm-ficha-vehiculo-identidad { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: 24px; padding: 12px 20px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-ilustracion { display: block; width: 200px; max-width: 100%; height: 96px; color: var(--crm-text-2); } .crm-ficha-vehiculo .crm-ficha-vehiculo-suelo { color: var(--crm-line-2); } .crm-ficha-vehiculo .crm-ficha-vehiculo-identidad > dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; min-width: 0; } .crm-ficha-vehiculo .crm-ficha-vehiculo-identidad [data-campo=modelo] { grid-column: 1 / -1; } .crm-ficha-vehiculo .crm-ficha-vehiculo-identidad .crm-ficha-vehiculo-dato { display: grid; align-content: center; } .crm-ficha-vehiculo .crm-ficha-vehiculo-identidad dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .crm-ficha-vehiculo .crm-ficha-vehiculo-identidad dd { margin: 0; } .crm-ficha-vehiculo .crm-ficha-vehiculo-identidad [data-campo=marca] dd { font-size: 15px; line-height: 24px; color: var(--crm-text-2); } .crm-ficha-vehiculo .crm-ficha-vehiculo-identidad [data-campo=modelo] h3 { margin: 0; font-size: 40px; line-height: 44px; letter-spacing: -0.035em; font-weight: 500; color: var(--crm-text); } .crm-ficha-vehiculo .crm-ficha-vehiculo-identidad [data-campo=version] dd { font-size: 15px; line-height: 24px; color: var(--crm-muted); } .crm-ficha-vehiculo .crm-ficha-vehiculo-identidad [data-campo][data-falta] dd { color: var(--crm-muted); } .crm-ficha-vehiculo .crm-ficha-vehiculo-tecnica { padding: 12px 20px; border-block: 1px solid var(--crm-line); background: var(--crm-panel-2); } .crm-ficha-vehiculo .crm-ficha-vehiculo-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 24px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-detalles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 24px; padding: 12px 20px; } .crm-ficha-vehiculo dl { margin: 0; } .crm-ficha-vehiculo dt { margin: 0; font-size: 12px; line-height: 16px; color: var(--crm-muted); } .crm-ficha-vehiculo dd { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; margin: 4px 0 0; min-width: 0; font-size: 15px; line-height: 24px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .crm-ficha-vehiculo dd > * { min-width: 0; max-width: 100%; } .crm-ficha-vehiculo dd > .crm-ficha-vehiculo-editor { flex: 1 1 100%; } .crm-ficha-vehiculo .crm-ficha-vehiculo-dato { position: relative; min-width: 0; } .crm-ficha-vehiculo .crm-ficha-vehiculo-dato[data-editable] { min-height: 48px; padding-right: 24px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-dato[data-editando] { grid-column: 1 / -1; padding-right: 0; } .crm-ficha-vehiculo .crm-ficha-vehiculo-dato[data-falta] dd { color: var(--crm-muted); } .crm-ficha-vehiculo .crm-ficha-vehiculo-dato[data-alerta] dd { color: var(--crm-error); font-weight: 500; } .crm-ficha-vehiculo [data-mono] dd { font-family: var(--crm-mono); font-size: 14px; line-height: 24px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-procedencia { display: block; margin-top: 2px; font-family: var(--crm-sans); font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: 0; color: var(--crm-muted); overflow-wrap: anywhere; } .crm-ficha-vehiculo dd > .crm-ficha-vehiculo-procedencia { margin-top: 0; } .crm-ficha-vehiculo .crm-ficha-vehiculo-procedencia[data-completa] { display: inline; } .crm-ficha-vehiculo .crm-ficha-vehiculo-procedencia[data-tipo=manual] { color: var(--crm-text-2); } .crm-ficha-vehiculo .crm-ficha-vehiculo-distintivo { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 24px; padding: 0 8px; background: var(--crm-panel); border: 1px solid var(--crm-line-2); color: var(--crm-text); font-family: var(--crm-mono); font-size: 13px; line-height: 20px; font-weight: 500; vertical-align: top; } .crm-ficha-vehiculo .crm-ficha-vehiculo-distintivo[data-etiqueta="0"] { background: var(--crm-fv-dgt-azul); color: var(--crm-fv-dgt-tinta); border-color: var(--crm-fv-dgt-tinta); } .crm-ficha-vehiculo .crm-ficha-vehiculo-distintivo[data-etiqueta=C] { background: var(--crm-fv-dgt-verde); color: var(--crm-fv-dgt-tinta); border-color: var(--crm-fv-dgt-tinta); } .crm-ficha-vehiculo .crm-ficha-vehiculo-distintivo[data-etiqueta=B] { background: var(--crm-fv-dgt-amarillo); color: var(--crm-fv-dgt-tinta); border-color: var(--crm-fv-dgt-tinta); } .crm-ficha-vehiculo .crm-ficha-vehiculo-distintivo[data-etiqueta=ECO] { position: relative; background: var(--crm-fv-dgt-verde); color: var(--crm-fv-dgt-tinta); border-color: var(--crm-fv-dgt-tinta); isolation: isolate; } .crm-ficha-vehiculo .crm-ficha-vehiculo-distintivo[data-etiqueta=ECO]::before { content: ""; position: absolute; inset: 0 0 0 50%; z-index: -1; background: var(--crm-fv-dgt-azul); } .crm-ficha-vehiculo .crm-ficha-vehiculo-tramite { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-width: 0; border-top: 1px solid var(--crm-line); } .crm-ficha-vehiculo .crm-ficha-vehiculo-lectura, .crm-ficha-vehiculo .crm-ficha-vehiculo-fiscal { min-width: 0; padding: 16px 20px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-fiscal { border-left: 1px solid var(--crm-line); } .crm-ficha-vehiculo .crm-ficha-vehiculo-km > label, .crm-ficha-vehiculo .crm-ficha-vehiculo-fiscal h3 { display: block; margin: 0 0 8px; font-size: 15px; line-height: 22px; font-weight: 500; letter-spacing: -0.01em; color: var(--crm-text); } .crm-ficha-vehiculo .crm-ficha-vehiculo-odometro { position: relative; display: flex; align-items: center; width: fit-content; max-width: 100%; min-height: 48px; border: 1px solid var(--crm-control); background: var(--crm-bg); } .crm-ficha-vehiculo .crm-ficha-vehiculo-rodillos { display: flex; min-width: 0; padding: 0 8px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-rodillo { display: flex; align-items: center; justify-content: center; overflow: hidden; width: 24px; height: 40px; border-right: 1px solid var(--crm-line); font-family: var(--crm-mono); font-size: 20px; line-height: 24px; font-variant-numeric: tabular-nums; } .crm-ficha-vehiculo .crm-ficha-vehiculo-rodillo > span { animation: crm-fv-rodillo var(--crm-t-gesto) var(--crm-snap); } @keyframes crm-fv-rodillo { from { transform: translateY(-24px); } to { transform: translateY(0); } } .crm-ficha-vehiculo .crm-ficha-vehiculo-odometro input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 48px; padding: 0 8px; border: 0; outline: 0; border-radius: 0; background: transparent; color: transparent; caret-color: var(--crm-text); font-family: var(--crm-mono); font-size: 20px; line-height: 24px; letter-spacing: 12px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-km-unidad { padding: 0 8px; font-size: 12px; line-height: 16px; color: var(--crm-muted); } .crm-ficha-vehiculo .crm-ficha-vehiculo-odometro:focus-within { border-color: var(--crm-acento); } .crm-ficha-vehiculo .crm-ficha-vehiculo-odometro[data-error] { border-color: var(--crm-error-linea, var(--crm-error)); } .crm-ficha-vehiculo .crm-ficha-vehiculo-km > p { margin: 8px 0 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-odometro[data-error] + p { color: var(--crm-error); } .crm-ficha-vehiculo .crm-ficha-vehiculo-itv { display: grid; gap: 4px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--crm-line); font-size: 12px; line-height: 16px; color: var(--crm-muted); } .crm-ficha-vehiculo .crm-ficha-vehiculo-itv strong { font-family: var(--crm-mono); font-size: 15px; line-height: 24px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--crm-text); } .crm-ficha-vehiculo .crm-ficha-vehiculo-fiscal dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-fiscal dd { font-family: var(--crm-mono); font-size: 20px; line-height: 24px; font-weight: 500; } .crm-ficha-vehiculo .crm-ficha-vehiculo-fiscal [data-falta] dd { font-family: var(--crm-sans); font-size: 15px; font-weight: 400; color: var(--crm-muted); } .crm-ficha-vehiculo .crm-ficha-vehiculo-fiscal p { margin: 8px 0 0; font-size: 12px; line-height: 16px; color: var(--crm-muted); overflow-wrap: anywhere; } .crm-ficha-vehiculo .crm-ficha-vehiculo-fiscal > .crm-ficha-vehiculo-procedencia { margin-top: 8px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-candidatos { display: grid; gap: 8px; margin-top: 8px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-mas { margin-top: 4px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-entradas-fiscales { grid-column: 1 / -1; padding: 0 20px 16px; border-top: 1px solid var(--crm-line); } .crm-ficha-vehiculo :is(.crm-ficha-vehiculo-entradas-fiscales, .crm-ficha-vehiculo-mas) summary { display: list-item; min-height: 48px; padding: 12px 0; font-size: 13px; line-height: 24px; color: var(--crm-text); cursor: pointer; } .crm-ficha-vehiculo .crm-ficha-vehiculo-entradas-fiscales dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-editar { position: absolute; inset: 0; display: flex; justify-content: flex-end; align-items: center; width: 100%; min-height: 48px; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; } .crm-ficha-vehiculo .crm-ficha-vehiculo-lapiz { flex: none; width: 16px; height: 16px; color: var(--crm-muted); transition: color var(--crm-t-color) var(--crm-snap); } .crm-ficha-vehiculo .crm-ficha-vehiculo-editar:hover .crm-ficha-vehiculo-lapiz { color: var(--crm-text); } .crm-ficha-vehiculo button:focus-visible, .crm-ficha-vehiculo summary:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; } .crm-ficha-vehiculo :is(button, summary):focus:not(:focus-visible) { outline: none; } .crm-ficha-vehiculo .crm-ficha-vehiculo-editor { display: grid; gap: 8px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-editor :is(input, select) { min-width: 0; width: 100%; height: 48px; padding: 0 12px; border: 1px solid var(--crm-control); border-radius: 0; outline: 0; background: var(--crm-bg); color: var(--crm-text); font-family: var(--crm-sans); font-size: 16px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-editor :is(input, select):focus-visible { border-color: var(--crm-acento); } .crm-ficha-vehiculo .crm-ficha-vehiculo-editor :is(input, select)[aria-invalid=true] { border-color: var(--crm-error-linea, var(--crm-error)); } .crm-ficha-vehiculo .crm-ficha-vehiculo-editor-acciones { display: flex; flex-wrap: wrap; gap: 8px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-editor-acciones button, .crm-ficha-vehiculo .crm-ficha-vehiculo-candidatos button { min-height: 48px; padding: 8px 16px; border: 1px solid var(--crm-control); border-radius: 0; background: transparent; color: var(--crm-text); font-family: var(--crm-sans); font-size: 15px; line-height: 20px; text-align: left; cursor: pointer; transition: background-color var(--crm-t-color) var(--crm-snap); } .crm-ficha-vehiculo .crm-ficha-vehiculo-editor-acciones button:hover, .crm-ficha-vehiculo .crm-ficha-vehiculo-candidatos button:hover { background: var(--crm-panel-2); } .crm-ficha-vehiculo .crm-ficha-vehiculo-editor p { margin: 0; font-size: 12px; line-height: 16px; color: var(--crm-error); } .crm-ficha-vehiculo .crm-ficha-vehiculo-candidatos button { display: flex; align-items: center; justify-content: space-between; gap: 8px; overflow-wrap: anywhere; } .crm-ficha-vehiculo .crm-ficha-vehiculo-candidatos [aria-pressed=true] { border-color: var(--crm-acento); box-shadow: inset 2px 0 0 var(--crm-acento); background: var(--crm-panel-3, var(--crm-panel-2)); } .crm-ficha-vehiculo :is(.crm-ficha-vehiculo-vehiculo, .crm-ficha-vehiculo-tramite) > * { animation: crm-fv-revelar var(--crm-t-capa) var(--crm-snap) both; } .crm-ficha-vehiculo .crm-ficha-vehiculo-vehiculo > :nth-child(2), .crm-ficha-vehiculo .crm-ficha-vehiculo-tramite > :nth-child(1) { animation-delay: var(--crm-fv-escalon); } .crm-ficha-vehiculo .crm-ficha-vehiculo-vehiculo > :nth-child(3), .crm-ficha-vehiculo .crm-ficha-vehiculo-tramite > :nth-child(2) { animation-delay: calc(var(--crm-fv-escalon) * 2); } .crm-ficha-vehiculo .crm-ficha-vehiculo-tramite > :nth-child(3) { animation-delay: calc(var(--crm-fv-escalon) * 3); } @keyframes crm-fv-revelar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .crm-ficha-vehiculo .crm-ficha-vehiculo-revelado .crm-ficha-vehiculo-ilustracion [pathLength] { animation: crm-fv-dibujar var(--crm-t-dibujo) var(--crm-curva) backwards; } @keyframes crm-fv-dibujar { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } } .crm-ficha-vehiculo[data-sin-tramite] .crm-ficha-vehiculo-tramite { display: none; } .crm-ficha-vehiculo[data-sin-tramite] .crm-ficha-vehiculo-cuerpo { grid-template-columns: minmax(0, 1fr); } @container crm-ficha-vehiculo (min-width: 1024px) { .crm-ficha-vehiculo .crm-ficha-vehiculo-cabecera { padding: 0 24px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-alerta { padding: 16px 24px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-cuerpo { grid-template-columns: minmax(0, 1fr) 400px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-identidad { padding: 12px 24px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-tecnica { padding: 12px 24px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-detalles { padding: 12px 24px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-tramite { display: flex; flex-direction: column; border-top: 0; border-left: 1px solid var(--crm-line); } .crm-ficha-vehiculo .crm-ficha-vehiculo-lectura, .crm-ficha-vehiculo .crm-ficha-vehiculo-fiscal { padding: 16px 24px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-fiscal { border-left: 0; border-top: 1px solid var(--crm-line); } .crm-ficha-vehiculo .crm-ficha-vehiculo-entradas-fiscales { padding: 0 24px 16px; } } @container crm-ficha-vehiculo (min-width: 1280px) { .crm-ficha-vehiculo .crm-ficha-vehiculo-cabecera { padding: 0 32px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-alerta { padding: 16px 32px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-cuerpo { grid-template-columns: minmax(0, 1fr) 480px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-identidad { gap: 32px; padding: 12px 32px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-tecnica { padding: 12px 32px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-chips, .crm-ficha-vehiculo .crm-ficha-vehiculo-detalles { column-gap: 32px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-detalles { padding: 12px 32px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-lectura, .crm-ficha-vehiculo .crm-ficha-vehiculo-fiscal { padding: 16px 32px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-entradas-fiscales { padding: 0 32px 16px; } } @container crm-ficha-vehiculo (max-width: 559px) { .crm-ficha-vehiculo .crm-ficha-vehiculo-cabecera { padding: 8px 16px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-fuente { order: 3; flex-basis: 100%; } .crm-ficha-vehiculo .crm-ficha-vehiculo-alerta { padding: 16px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-cambiar { margin-right: 0; } .crm-ficha-vehiculo .crm-ficha-vehiculo-identidad { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 16px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-ilustracion { width: 100px; height: 48px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-identidad [data-campo=modelo] h3 { font-size: 28px; line-height: 34px; letter-spacing: -0.03em; } .crm-ficha-vehiculo .crm-ficha-vehiculo-tecnica { padding: 12px 16px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-detalles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; padding: 12px 16px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-detalles [data-campo=bastidor] { grid-column: 1 / -1; } .crm-ficha-vehiculo .crm-ficha-vehiculo-tramite { grid-template-columns: minmax(0, 1fr); } .crm-ficha-vehiculo .crm-ficha-vehiculo-lectura, .crm-ficha-vehiculo .crm-ficha-vehiculo-fiscal { padding: 16px; } .crm-ficha-vehiculo .crm-ficha-vehiculo-fiscal { border-left: 0; border-top: 1px solid var(--crm-line); } .crm-ficha-vehiculo .crm-ficha-vehiculo-entradas-fiscales { padding: 0 16px 16px; } } @container crm-ficha-vehiculo (max-width: 399px) { .crm-ficha-vehiculo .crm-ficha-vehiculo-identidad > dl, .crm-ficha-vehiculo .crm-ficha-vehiculo-detalles, .crm-ficha-vehiculo .crm-ficha-vehiculo-fiscal dl, .crm-ficha-vehiculo .crm-ficha-vehiculo-entradas-fiscales dl { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .crm-ficha-vehiculo :is(.crm-ficha-vehiculo-vehiculo, .crm-ficha-vehiculo-tramite) > *, .crm-ficha-vehiculo .crm-ficha-vehiculo-ilustracion [pathLength], .crm-ficha-vehiculo .crm-ficha-vehiculo-rodillo > span, .crm-ficha-vehiculo .crm-ficha-vehiculo-escaner { animation: none !important; } .crm-ficha-vehiculo .crm-ficha-vehiculo-escaner { display: none !important; } } :where([data-crm-estatico]) .crm-ficha-vehiculo :is(.crm-ficha-vehiculo-vehiculo, .crm-ficha-vehiculo-tramite) > *, :where([data-crm-estatico]) .crm-ficha-vehiculo :is(.crm-ficha-vehiculo-ilustracion [pathLength], .crm-ficha-vehiculo-rodillo > span, .crm-ficha-vehiculo-escaner) { animation: none; } :where([data-crm-tema=contraste]) .crm-ficha-vehiculo :is(button, summary):focus-visible { outline-width: var(--crm-foco-ancho); } @media (forced-colors: active) { .crm-ficha-vehiculo .crm-ficha-vehiculo-odometro input { color: CanvasText; } .crm-ficha-vehiculo .crm-ficha-vehiculo-odometro[data-editable] .crm-ficha-vehiculo-rodillos { visibility: hidden; } .crm-ficha-vehiculo .crm-ficha-vehiculo-alerta { border: 2px solid CanvasText; } } @media print { .crm-ficha-vehiculo :is(.crm-ficha-vehiculo-vehiculo, .crm-ficha-vehiculo-tramite) > *, .crm-ficha-vehiculo .crm-ficha-vehiculo-ilustracion [pathLength], .crm-ficha-vehiculo .crm-ficha-vehiculo-rodillo > span { animation: none; } .crm-ficha-vehiculo .crm-ficha-vehiculo-escaner, .crm-ficha-vehiculo .crm-ficha-vehiculo-lapiz, .crm-ficha-vehiculo .crm-ficha-vehiculo-editor-acciones, .crm-ficha-vehiculo .crm-ficha-vehiculo-cambiar { display: none; } } :where(.crm-celebracion), :where(.crm-celebracion) *, :where(.crm-celebracion) ::before, :where(.crm-celebracion) ::after { box-sizing: border-box; } .crm-celebracion { container: crm-celebracion / inline-size; width: min(640px, 100%); min-width: 0; margin: 0 auto; border: 1px solid var(--crm-line-2); border-top: 2px solid var(--crm-acento); background: var(--crm-panel); color: var(--crm-text); font-family: var(--crm-sans); text-align: center; } .crm-celebracion:focus, .crm-celebracion:focus-visible { outline: none; } .crm-celebracion-interior { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 24px; padding: 32px; } .crm-celebracion-visto { display: block; width: 64px; height: 64px; color: var(--crm-acento); } .crm-celebracion-circulo, .crm-celebracion-trazo { stroke: currentColor; stroke-dasharray: 100; stroke-dashoffset: 0; } .crm-celebracion-circulo { stroke-width: 2; } .crm-celebracion-trazo { stroke-width: 3; stroke-linecap: square; } .crm-celebracion[data-animar] .crm-celebracion-circulo { animation: crm-celebracion-dibuja var(--crm-t-dibujo) var(--crm-curva) backwards; } .crm-celebracion[data-animar] .crm-celebracion-trazo { animation: crm-celebracion-dibuja var(--crm-t-panel) var(--crm-snap) var(--crm-t-capa) backwards; } @supports (margin-left: round(down, 1px, 1px)) { .crm-celebracion-visto { justify-self: start; margin-left: round(down, calc((100% - 64px) / 2), 1px); } } @keyframes crm-celebracion-dibuja { from { stroke-dashoffset: 100; } } .crm-celebracion-titulo { max-width: 100%; margin: 0; font-size: 28px; font-weight: 500; line-height: 34px; letter-spacing: -0.03em; overflow-wrap: anywhere; text-wrap: balance; } .crm-celebracion-numero { display: grid; justify-items: center; gap: 6px; min-width: 0; max-width: 100%; } .crm-celebracion-numero:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-celebracion-rotulo { max-width: 100%; overflow: hidden; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .crm-celebracion-cifra { max-width: 100%; font-family: var(--crm-mono); font-size: 40px; font-variant-numeric: tabular-nums; font-weight: 500; line-height: 44px; letter-spacing: -0.035em; overflow-wrap: break-word; } .crm-celebracion-cifra[data-forma=cifra] { font-family: var(--crm-sans); overflow-wrap: normal; } .crm-celebracion-numero[data-midiendo] .crm-celebracion-cifra { overflow: hidden; overflow-wrap: normal; white-space: nowrap; } .crm-celebracion-numero[data-compacta] .crm-celebracion-valor, .crm-celebracion-numero:not([data-compacta]) .crm-celebracion-compacta { display: none; } .crm-celebracion-compacta { white-space: nowrap; } .crm-celebracion-exacta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (hover: none), (pointer: coarse), print { .crm-celebracion-exacta { position: static; width: auto; max-width: 100%; height: auto; overflow: visible; clip-path: none; color: var(--crm-muted); font-size: 12px; font-variant-numeric: tabular-nums; line-height: 16px; white-space: normal; overflow-wrap: anywhere; } } .crm-celebracion-cifra[data-forma=cifra] .crm-celebracion-valor, .crm-celebracion-unidad { white-space: nowrap; } .crm-celebracion-unidad { display: inline-block; } .crm-celebracion-unidad { color: var(--crm-muted); font-size: 24px; font-weight: 400; letter-spacing: 0; } .crm-celebracion-numero[data-escalon="28"] .crm-celebracion-cifra { font-size: 28px; line-height: 32px; } .crm-celebracion-numero[data-escalon="28"] .crm-celebracion-unidad { font-size: 16px; } .crm-celebracion-numero[data-escalon="24"] .crm-celebracion-cifra { font-size: 24px; line-height: 28px; } .crm-celebracion-numero[data-escalon="24"] .crm-celebracion-unidad { font-size: 14px; } .crm-celebracion-numero[data-escalon="20"] .crm-celebracion-cifra { font-size: 20px; line-height: 24px; } .crm-celebracion-numero[data-escalon="20"] .crm-celebracion-unidad { font-size: 12px; } .crm-celebracion-cuerpo { display: grid; justify-items: center; gap: 12px; width: 100%; min-width: 0; color: var(--crm-text-2); font-size: 15px; line-height: 24px; overflow-wrap: anywhere; text-wrap: pretty; } .crm-celebracion-cuerpo > * { max-width: min(68ch, 100%); margin: 0; overflow-wrap: anywhere; } .crm-celebracion-cuerpo > :is(ul, ol) { width: min(68ch, 100%); padding-left: 20px; text-align: left; list-style-position: outside; } .crm-celebracion-cuerpo > ul { list-style-type: disc; } .crm-celebracion-cuerpo > ol { list-style-type: decimal; } .crm-celebracion-cuerpo > :is(ul, ol) > li::marker { color: var(--crm-muted); } .crm-celebracion-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; min-width: 0; } .crm-celebracion-acciones > * { min-width: 0; max-width: 100%; } @container crm-celebracion (max-width: 719.98px) { .crm-celebracion-titulo { font-size: 24px; line-height: 32px; } } @container crm-celebracion (max-width: 397.98px) { .crm-celebracion-interior { padding: 20px; } .crm-celebracion-numero:not([data-medido])[data-escalon="40"] .crm-celebracion-cifra { font-size: 28px; line-height: 32px; } .crm-celebracion-numero:not([data-medido])[data-escalon="40"] .crm-celebracion-unidad { font-size: 16px; } .crm-celebracion-numero:not([data-medido])[data-escalon="28"] .crm-celebracion-cifra { font-size: 24px; line-height: 28px; } .crm-celebracion-numero:not([data-medido])[data-escalon="28"] .crm-celebracion-unidad { font-size: 14px; } .crm-celebracion-numero:not([data-medido])[data-escalon="24"] .crm-celebracion-cifra { font-size: 20px; line-height: 24px; } .crm-celebracion-numero:not([data-medido])[data-escalon="24"] .crm-celebracion-unidad { font-size: 12px; } .crm-celebracion-acciones { flex-direction: column; align-items: stretch; } } @media (prefers-reduced-motion: reduce) { .crm-celebracion[data-animar] .crm-celebracion-circulo, .crm-celebracion[data-animar] .crm-celebracion-trazo { animation: none; } } [data-crm-estatico] .crm-celebracion[data-animar] .crm-celebracion-circulo, [data-crm-estatico] .crm-celebracion[data-animar] .crm-celebracion-trazo, .crm-celebracion[data-animar][data-crm-estatico] .crm-celebracion-circulo, .crm-celebracion[data-animar][data-crm-estatico] .crm-celebracion-trazo { animation: none; } @media print { .crm-celebracion[data-animar] .crm-celebracion-circulo, .crm-celebracion[data-animar] .crm-celebracion-trazo { animation: none; } } @media (forced-colors: active) { .crm-celebracion { border-top-color: Highlight; } .crm-celebracion-visto { color: Highlight; } } :where(.crm-documento-panel), :where(.crm-documento-panel) *, :where(.crm-documento-panel) ::before, :where(.crm-documento-panel) ::after { box-sizing: border-box; } .crm-capa:has(> .crm-documento-panel) { z-index: 41; } .crm-documento-cuerpo { display: flex; flex-direction: column; gap: 16px; overflow: hidden; } .crm-documento-pregunta { display: flex; flex: none; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--crm-line); font-size: 13px; line-height: 20px; } .crm-documento-pregunta-rotulo { color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-documento-pregunta-texto { min-width: 0; color: var(--crm-text); font-weight: 500; overflow-wrap: anywhere; text-wrap: pretty; } .crm-documento-vista { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 0; overflow: auto; } .crm-documento-lienzo { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 0; } .crm-documento-marco { display: block; flex: 1 1 auto; width: 100%; min-height: 0; border: 1px solid var(--crm-line); background: var(--crm-bg); } .crm-documento-marco:focus-visible { outline-offset: -1px; } .crm-documento-imagen-marco { flex: none; align-items: center; } .crm-documento-imagen { display: block; max-width: 100%; height: auto; border: 1px solid var(--crm-line); background: var(--crm-bg); } .crm-documento-imagen-marco[data-real] { align-items: flex-start; width: max-content; min-width: 100%; } .crm-documento-imagen-marco[data-real] .crm-documento-imagen { max-width: none; } .crm-documento-imagen-marco:not([data-cargado]) { aspect-ratio: 210 / 297; } .crm-documento-imagen-marco:not([data-cargado]) .crm-documento-imagen { visibility: hidden; } .crm-documento-zoom { margin-right: auto; } .crm-documento-cargando { display: grid; justify-items: center; } .crm-documento-hoja { width: 100%; max-width: 560px; height: auto; aspect-ratio: 210 / 297; } .crm-documento-tapa { position: absolute; inset: 0; width: auto; max-width: none; height: auto; aspect-ratio: auto; } .crm-documento-estado[data-estado=error] .crm-vacio-icono { border-color: var(--crm-error-linea); color: var(--crm-error); } @media (forced-colors: active) { .crm-documento-marco, .crm-documento-imagen { border-color: CanvasText; } .crm-documento-estado[data-estado=error] .crm-vacio-icono { border-color: CanvasText; color: CanvasText; } } :where(.crm-muestra-firma), :where(.crm-muestra-firma) *, :where(.crm-muestra-firma) ::before, :where(.crm-muestra-firma) ::after { box-sizing: border-box; } .crm-muestra-firma { --crm-muestra-papel: var(--crm-placa-fondo); --crm-muestra-renglon: var(--crm-placa-apagado); --crm-muestra-tope: 160px; container: crm-muestra-firma / inline-size; display: grid; gap: 8px; width: 100%; min-width: 0; max-width: 480px; color: var(--crm-text); font-family: var(--crm-sans); } .crm-muestra-firma-papel { --crm-muestra-relleno-x: 24px; display: grid; min-width: 0; padding: 16px var(--crm-muestra-relleno-x) 12px; border: 1px solid var(--crm-line); background: var(--crm-muestra-papel); forced-color-adjust: none; } .crm-muestra-firma-papel[data-estado=error] { border-color: var(--crm-error-linea); } .crm-muestra-firma-tinta { display: flex; align-items: flex-end; justify-content: center; min-width: 0; min-height: 64px; } .crm-muestra-firma-tinta[data-medida] { --crm-muestra-ancho-tinta: calc(100cqw - 2px - 2 * var(--crm-muestra-relleno-x)); --crm-muestra-ancho-imagen: min(var(--crm-muestra-ancho-tinta), calc(var(--crm-muestra-ancho) * 1px), calc(var(--crm-muestra-tope) * var(--crm-muestra-ancho) / var(--crm-muestra-alto))); --crm-muestra-alto-imagen: calc(var(--crm-muestra-ancho-imagen) * var(--crm-muestra-alto) / var(--crm-muestra-ancho)); height: max(64px, var(--crm-muestra-alto-imagen)); } @supports (height: round(up, 1.5px, 1px)) { .crm-muestra-firma-tinta[data-medida] { height: max(64px, round(up, var(--crm-muestra-alto-imagen), 1px)); } } .crm-muestra-firma-imagen { display: block; flex: none; width: min(100%, calc(var(--crm-muestra-ancho) * 1px), calc(var(--crm-muestra-tope) * var(--crm-muestra-ancho) / var(--crm-muestra-alto))); max-width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; user-select: none; -webkit-user-drag: none; } .crm-muestra-firma[data-estado=espera] .crm-muestra-firma-imagen { visibility: hidden; } .crm-muestra-firma-renglon { display: block; height: 0; border-top: 1px solid var(--crm-muestra-renglon); } .crm-muestra-firma-mensaje { display: flex; align-items: flex-start; gap: 8px; min-width: 0; margin: 0; color: var(--crm-muted); font-size: 13px; line-height: 20px; overflow-wrap: anywhere; text-wrap: pretty; } .crm-muestra-firma-mensaje[data-tono=error] { color: var(--crm-text-2); } .crm-muestra-firma-mensaje-titulo { color: var(--crm-text); font-weight: 500; } .crm-muestra-firma-mensaje svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--crm-error); stroke-width: 1.6; } @container crm-muestra-firma (max-width: 400px) { .crm-muestra-firma-papel { --crm-muestra-relleno-x: 16px; } } @media (forced-colors: active) { .crm-muestra-firma-papel, .crm-muestra-firma-papel[data-estado=error] { border-color: CanvasText; } .crm-muestra-firma-mensaje svg { color: CanvasText; } } .crm-mostrador { box-sizing: border-box; container: crm-mostrador / inline-size; min-width: 0; color: var(--crm-text); font-family: var(--crm-sans); } .crm-mostrador *, .crm-mostrador *::before, .crm-mostrador *::after { box-sizing: border-box; } .crm-marco-contenido:has(> .crm-mostrador) { padding-bottom: 0; } .crm-mostrador-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; } .crm-mostrador-cola { display: flex; flex-direction: column; min-width: 0; } .crm-mostrador-cabecera { flex: none; padding: 16px; border-bottom: 1px solid var(--crm-line); } .crm-mostrador-lista { min-height: 0; } .crm-mostrador-trabajo { display: none; min-width: 0; } .crm-mostrador[data-vista=trabajo] .crm-mostrador-cola { display: none; } .crm-mostrador[data-vista=trabajo] .crm-mostrador-trabajo { display: block; } @container crm-mostrador (min-width: 880px) { .crm-mostrador-rejilla { grid-template-columns: 400px minmax(0, 1fr); height: calc(var(--crm-marco-alto, 100dvh) - 76px); } .crm-mostrador-cola, .crm-mostrador[data-vista=trabajo] .crm-mostrador-cola { display: flex; min-height: 0; border-right: 1px solid var(--crm-line); } .crm-mostrador-lista { flex: 1; overflow-y: auto; overscroll-behavior: contain; } .crm-mostrador-trabajo { display: block; min-height: 0; overflow-y: auto; } .crm-mostrador-trabajo > .crm-modo-foco[data-en-linea] { min-height: 100%; } } .crm-cola { box-sizing: border-box; container: crm-cola / inline-size; min-width: 0; color: var(--crm-text); font-family: var(--crm-sans); font-size: 13px; line-height: 20px; -webkit-font-smoothing: antialiased; } .crm-cola *, .crm-cola *::before, .crm-cola *::after { box-sizing: border-box; } .crm-cola-grupo + .crm-cola-grupo { margin-top: 8px; } .crm-cola-rotulo { position: sticky; z-index: 1; top: 0; display: flex; align-items: center; gap: 8px; height: 32px; margin: 0; padding: 0 12px; border-bottom: 1px solid var(--crm-line); background: var(--crm-bg); color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; font-weight: 400; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-cola-lista { margin: 0; padding: 0; list-style: none; } .crm-cola-fila { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: 20px 20px; column-gap: 12px; align-items: center; width: 100%; min-height: 56px; margin: 0; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--crm-line); background: transparent; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background-color var(--crm-t-salida) linear; } .crm-cola-fila::before { content: ""; position: absolute; top: 0; bottom: -1px; left: 0; width: 2px; background: var(--crm-acento); opacity: 0; } .crm-cola-fila:hover { background: var(--crm-panel-2); transition-duration: 0ms; } .crm-cola-fila[data-elegida] { background: var(--crm-panel-3); } .crm-cola-fila[data-elegida]::before { opacity: 1; } .crm-cola-fila:focus { outline: none; } .crm-cola-fila:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: -1px; } .crm-cola-titulo { grid-column: 1; grid-row: 1; min-width: 0; overflow: hidden; color: var(--crm-text); font-weight: 500; letter-spacing: -0.005em; text-overflow: ellipsis; white-space: nowrap; } .crm-cola-tiempo { grid-column: 2; grid-row: 1; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; } .crm-cola-tiempo[data-tono=aviso] { color: var(--crm-aviso); } .crm-cola-tiempo[data-tono=error] { color: var(--crm-error); } .crm-cola-detalle { grid-column: 1; grid-row: 2; min-width: 0; overflow: hidden; color: var(--crm-muted); font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; } .crm-cola-etiquetas { display: flex; grid-column: 2; grid-row: 2; justify-content: flex-end; gap: 4px; min-width: 0; overflow: hidden; } .crm-cola-accion { display: inline-flex; grid-column: 3; grid-row: 1 / 3; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border: 1px solid var(--crm-line-2); color: var(--crm-text-2); font-size: 13px; font-weight: 500; white-space: nowrap; transition: color var(--crm-t-color) var(--crm-snap), border-color var(--crm-t-color) var(--crm-snap); } .crm-cola-accion svg { width: 14px; height: 14px; stroke-width: 1.5; transition: transform var(--crm-t-gesto) var(--crm-snap); } .crm-cola-fila:is(:hover, :focus-visible, [data-elegida]) .crm-cola-accion { border-color: var(--crm-text); color: var(--crm-text); } .crm-cola-fila:hover .crm-cola-accion svg { transform: translateX(2px); } .crm-cola-grupo-vacio { margin: 0; padding: 8px 12px 12px; border-bottom: 1px solid var(--crm-line); color: var(--crm-dim); font-size: 12px; line-height: 16px; } .crm-cola-vacia { padding: 24px 12px; } @container crm-cola (max-width: 360px) { .crm-cola-accion { width: 28px; padding: 0; justify-content: center; gap: 0; } .crm-cola-accion-texto { display: none; } } @media (prefers-reduced-motion: reduce) { .crm-cola-fila, .crm-cola-accion, .crm-cola-accion svg { transition: none; } .crm-cola-fila:hover .crm-cola-accion svg { transform: none; } } [data-crm-estatico] .crm-cola-accion svg { transition: none; } .crm-prod-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .crm-prod-chips > li { display: flex; min-width: 0; max-width: 100%; } .crm-prod-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; max-width: 100%; margin: 0; padding: 0 8px; border: 1px solid var(--crm-line-2); border-radius: 0; background: transparent; color: var(--crm-text-2); font-family: var(--crm-sans); font-size: 12px; font-weight: 400; line-height: 16px; text-align: left; cursor: pointer; transition: background-color var(--crm-t-color) var(--crm-snap), border-color var(--crm-t-color) var(--crm-snap), color var(--crm-t-color) var(--crm-snap); } .crm-prod-chip:hover { border-color: var(--crm-control); background: var(--crm-panel-2); color: var(--crm-text); transition-duration: 0ms; } .crm-prod-chip:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; } .crm-prod-chip[aria-pressed=true] { border-color: var(--crm-acento-linea); background: var(--crm-acento-suave); color: var(--crm-text); } .crm-prod-chip svg { flex: none; width: 14px; height: 14px; color: var(--crm-muted); } .crm-prod-chip-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-prod-chip-meta { flex: none; color: var(--crm-muted); font-variant-numeric: tabular-nums; } .crm-prod-chip-numero { flex: none; min-width: 14px; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; font-variant-numeric: tabular-nums; text-align: center; } .crm-prod-fragmento { margin: 0; padding: 12px 16px; border-left: 2px solid var(--crm-line-2); background: var(--crm-panel-2); color: var(--crm-text-2); font-size: 15.5px; line-height: 26px; white-space: pre-wrap; overflow-wrap: anywhere; } .crm-prod-fragmento mark { padding: 0 2px; background: var(--crm-acento-suave); box-shadow: inset 0 -1px 0 var(--crm-acento-linea); color: var(--crm-text); } .crm-prod-fragmento-vacio { margin: 0; color: var(--crm-muted); font-size: 13px; line-height: 20px; } .crm-mesa { container-type: inline-size; display: grid; grid-template-rows: minmax(0, 1fr) 44px; min-width: 0; border: 1px solid var(--crm-line); background: var(--crm-panel); color: var(--crm-text); font-family: var(--crm-sans); font-size: 13px; line-height: 20px; letter-spacing: -0.005em; } .crm-mesa-cuerpo { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); min-height: 0; } .crm-mesa-lado { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--crm-line); } .crm-mesa-cabecera { display: flex; flex: none; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--crm-line); } .crm-mesa-titulo { margin: 0; color: var(--crm-text); font-size: 13px; font-weight: 500; line-height: 20px; } .crm-mesa-pendientes { color: var(--crm-muted); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; } .crm-mesa-lista { flex: 1; min-height: 0; margin: 0; padding: 0; overflow-y: auto; list-style: none; outline: none; } .crm-mesa-lista[hidden] { display: none; } .crm-mesa-fila { position: relative; display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; grid-template-rows: 20px 16px; align-content: center; column-gap: 10px; height: 44px; padding: 0 16px 0 14px; border-bottom: 1px solid var(--crm-line); overflow: hidden; cursor: default; transition: background-color var(--crm-t-color) var(--crm-snap); } .crm-mesa-fila:hover { background: var(--crm-panel-2); transition-duration: 0ms; } .crm-mesa-fila[aria-selected=true] { background: var(--crm-panel-3); } .crm-mesa-fila[aria-selected=true]::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--crm-acento); } .crm-mesa-lista:focus-visible .crm-mesa-fila[aria-selected=true] { outline: 1px solid var(--crm-acento); outline-offset: -1px; } .crm-mesa-fila[data-esqueleto] { row-gap: 6px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; padding-left: 30px; } .crm-mesa-prioridad { grid-row: 1; grid-column: 1; align-self: center; width: 6px; height: 6px; border: 1px solid var(--crm-line-2); border-radius: 50%; background: transparent; } .crm-mesa-prioridad[data-prioridad=normal] { border-color: var(--crm-control); background: var(--crm-control); } .crm-mesa-prioridad[data-prioridad=alta] { border-color: var(--crm-aviso); background: var(--crm-aviso); } .crm-mesa-prioridad[data-prioridad=urgente] { border-color: var(--crm-error); background: var(--crm-error); box-shadow: 0 0 0 3px var(--crm-error-suave); } .crm-mesa-fila-titulo { grid-row: 1; grid-column: 2; min-width: 0; overflow: hidden; color: var(--crm-text); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } .crm-mesa-fila-importe { grid-row: 1; grid-column: 3; justify-self: end; color: var(--crm-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; } .crm-mesa-fila-meta { grid-row: 2; grid-column: 2; display: flex; gap: 6px; min-width: 0; overflow: hidden; color: var(--crm-muted); font-size: 12px; line-height: 16px; white-space: nowrap; } .crm-mesa-fila-meta > span:last-child { overflow: hidden; text-overflow: ellipsis; } .crm-mesa-fila-meta [data-pasado], .crm-mesa-fila-meta [data-error] { color: var(--crm-error); } .crm-mesa-fila-meta [data-aviso] { color: var(--crm-aviso); } .crm-mesa-fila-origen { grid-row: 2; grid-column: 3; justify-self: end; display: inline-flex; align-items: center; color: var(--crm-muted); } .crm-mesa-fila-origen svg { width: 14px; height: 14px; } .crm-mesa-fila[data-estado=resuelta] .crm-mesa-fila-titulo, .crm-mesa-fila[data-estado=caducada] .crm-mesa-fila-titulo { color: var(--crm-muted); } .crm-mesa-fila[data-saliendo] { pointer-events: none; animation: crm-mesa-pliega var(--crm-t-panel) var(--crm-snap) var(--crm-t-dibujo) forwards; } .crm-mesa-fila[data-saliendo] > * { opacity: 0.55; transition: opacity var(--crm-t-dibujo) var(--crm-curva); } .crm-mesa-fila[data-saliendo=aprobada] { background: var(--crm-acento-suave); } .crm-mesa-fila[data-saliendo=aprobada]::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--crm-acento); } .crm-mesa-fila[data-saliendo]::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 1px; background: linear-gradient( 90deg, transparent 0%, var(--crm-luz) 50%, transparent 100%) -60% 0 / 60% 100% no-repeat; box-shadow: 0 0 8px var(--crm-acento-linea); animation: crm-mesa-corriente var(--crm-t-dibujo) var(--crm-curva) forwards; } .crm-mesa-fila[data-saliendo=rechazada]::after, .crm-mesa-fila[data-saliendo=descartada]::after { background-image: linear-gradient( 90deg, transparent 0%, var(--crm-control) 50%, transparent 100%); box-shadow: none; } @keyframes crm-mesa-corriente { to { background-position: 160% 0; } } @keyframes crm-mesa-pliega { to { height: 0; border-bottom-width: 0; opacity: 0; } } .crm-mesa-vacia { display: grid; flex: 1; place-content: center; justify-items: center; gap: 8px; padding: 32px 24px; text-align: center; outline: none; } .crm-mesa-vacia:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: -1px; } .crm-mesa-c { margin: 0 0 12px; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 12px; letter-spacing: 0; white-space: pre; user-select: none; } .crm-mesa-vacia[data-celebra] .crm-mesa-c { background: linear-gradient( 100deg, var(--crm-acento) 0%, var(--crm-acento) 38%, var(--crm-luz) 50%, var(--crm-muted) 62%, var(--crm-muted) 100%) 100% 0 / 300% 100% no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; animation: crm-mesa-ilumina calc(var(--crm-t-dibujo) * 2) var(--crm-curva) 1 both; } @keyframes crm-mesa-ilumina { from { background-position: 100% 0; } to { background-position: 0% 0; } } .crm-mesa-vacia-titulo { margin: 0; color: var(--crm-text); font-size: 15px; font-weight: 500; line-height: 22px; letter-spacing: -0.01em; } .crm-mesa-vacia-texto { max-width: 44ch; margin: 0; color: var(--crm-muted); font-size: 13px; line-height: 20px; } .crm-mesa-error { padding: 16px; } .crm-mesa-detalle:focus-visible, .crm-pulso-cuerpo:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: -1px; } .crm-mesa-detalle { min-width: 0; min-height: 0; overflow-y: auto; } .crm-mesa-detalle-cuerpo { display: grid; align-content: start; gap: 16px; max-width: calc(68ch + 48px); padding: 24px; } .crm-mesa-detalle-vacio { color: var(--crm-muted); } .crm-mesa-detalle-vacio p { margin: 0; } .crm-mesa-volver { display: none; align-items: center; justify-self: start; gap: 6px; height: 28px; margin: 0; padding: 0 10px 0 6px; border: 0; background: transparent; color: var(--crm-muted); font: inherit; cursor: pointer; } .crm-mesa-volver svg { width: 14px; height: 14px; } .crm-mesa-volver:hover { background: var(--crm-panel-2); color: var(--crm-text); } .crm-mesa-volver:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; } .crm-mesa-detalle-rotulo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 -10px; color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-mesa-detalle-tipo { color: var(--crm-text-2); } .crm-mesa-origen { display: inline-flex; align-items: center; gap: 6px; } .crm-mesa-origen svg { width: 14px; height: 14px; } .crm-mesa-detalle-titulo { margin: 0; color: var(--crm-text); font-size: 20px; font-weight: 500; line-height: 28px; letter-spacing: -0.02em; overflow-wrap: anywhere; } .crm-mesa-datos { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0; } .crm-mesa-datos > div { display: grid; gap: 2px; } .crm-mesa-datos dt { color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-mesa-datos dd { margin: 0; color: var(--crm-text); } .crm-mesa-datos dd[data-pasado] { color: var(--crm-error); } .crm-mesa-cifra { font-variant-numeric: tabular-nums; } .crm-mesa-resumen { max-width: 68ch; margin: 0; color: var(--crm-text-2); font-size: 14px; line-height: 22px; } .crm-mesa-seccion { display: grid; gap: 8px; min-width: 0; } .crm-mesa-seccion-titulo { margin: 0; color: var(--crm-muted); font-size: 12px; font-weight: 400; line-height: 16px; } .crm-mesa-rechazo { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--crm-line-2); background: var(--crm-panel-2); } .crm-mesa-motivos { display: flex; flex-wrap: wrap; gap: 6px; } .crm-mesa-rechazo-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; } .crm-mesa-ayuda { margin-right: auto; color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-mesa-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; height: 44px; padding: 0 8px 0 16px; border-top: 1px solid var(--crm-line); background: var(--crm-panel); } .crm-mesa-barra-estado { display: flex; flex: 1; align-items: center; gap: 16px; min-width: 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; white-space: nowrap; } .crm-mesa-posicion { font-variant-numeric: tabular-nums; } .crm-mesa-resueltas { display: inline-flex; align-items: baseline; gap: 6px; } .crm-mesa-cuenta { display: inline-block; color: var(--crm-text); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; } .crm-mesa-cuenta[data-sube] { animation: crm-mesa-sube var(--crm-t-gesto) var(--crm-snap); } @keyframes crm-mesa-sube { from { opacity: 0; transform: translateY(6px); } } .crm-mesa-deshacer { position: relative; display: inline-flex; align-items: center; gap: 8px; min-width: 0; height: 28px; } .crm-mesa-deshacer::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: var(--crm-acento-linea); transform-origin: left; animation: crm-mesa-ventana var(--crm-mesa-ventana) linear forwards; } @keyframes crm-mesa-ventana { to { transform: scaleX(0); } } .crm-mesa-deshacer-texto { min-width: 0; overflow: hidden; color: var(--crm-text-2); text-overflow: ellipsis; } .crm-mesa-barra-acciones { display: flex; flex: none; align-items: center; gap: 8px; } .crm-mesa-guia { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; color: var(--crm-muted); font-size: 12px; line-height: 16px; } @container (max-width: 719px) { .crm-mesa-cuerpo { grid-template-columns: minmax(0, 1fr); } .crm-mesa-lado { border-right: 0; } .crm-mesa[data-vista-movil=lista] .crm-mesa-detalle, .crm-mesa[data-vista-movil=detalle] .crm-mesa-lado { display: none; } .crm-mesa-volver { display: inline-flex; } .crm-mesa-detalle-cuerpo { padding: 16px; } .crm-mesa-guia, .crm-mesa-posicion, .crm-mesa-barra .crm-boton-atajo { display: none; } } @container (max-width: 479px) { .crm-mesa-resueltas { display: none; } .crm-mesa-barra { padding: 0 8px; } } @media (prefers-reduced-motion: reduce) { .crm-ad-linea, .crm-mesa-fila[data-saliendo], .crm-mesa-fila[data-saliendo]::after, .crm-mesa-vacia[data-celebra] .crm-mesa-c, .crm-mesa-cuenta[data-sube], .crm-mesa-deshacer::after { animation: none; } .crm-mesa-vacia[data-celebra] .crm-mesa-c { background-position: 0% 0; } } .crm-ad { container-type: inline-size; display: grid; gap: 12px; min-width: 0; color: var(--crm-text); font-family: var(--crm-sans); font-size: 13px; line-height: 20px; letter-spacing: -0.005em; } .crm-ad-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .crm-ad-solo[aria-pressed=true] { border-color: var(--crm-acento-linea); background: var(--crm-acento-suave); color: var(--crm-text); } .crm-ad-resumen { margin-left: auto; color: var(--crm-muted); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; } .crm-ad[data-compacto] .crm-ad-resumen { margin-left: 0; } .crm-ad-campos { width: 100%; border-collapse: collapse; table-layout: fixed; } .crm-ad-campos th, .crm-ad-campos td { height: 36px; padding: 0 12px 0 0; border-bottom: 1px solid var(--crm-line); text-align: left; vertical-align: middle; overflow-wrap: anywhere; } .crm-ad-campos thead th { height: 32px; border-bottom-color: var(--crm-line-2); color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; font-weight: 400; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-ad-campos tbody th { color: var(--crm-muted); font-family: var(--crm-mono); font-size: 12px; font-weight: 400; line-height: 16px; } .crm-ad-campos td { font-variant-numeric: tabular-nums; } .crm-ad-campos tr[data-igual] td { color: var(--crm-muted); } .crm-ad-antes del { color: var(--crm-muted); text-decoration: line-through; text-decoration-color: var(--crm-control); } .crm-ad-despues ins { display: inline-block; padding-left: 8px; box-shadow: inset 2px 0 0 var(--crm-acento); color: var(--crm-text); text-decoration: none; } .crm-ad-texto { display: grid; min-width: 0; border: 1px solid var(--crm-line); background: var(--crm-bg); } .crm-ad-cabeceras { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: 32px; border-bottom: 1px solid var(--crm-line-2); color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-ad-cabeceras span { align-self: center; padding-left: 48px; } .crm-ad-cabeceras span + span { border-left: 1px solid var(--crm-line); align-self: stretch; display: flex; align-items: center; } .crm-ad-par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .crm-ad-par > .crm-ad-linea + .crm-ad-linea { border-left: 1px solid var(--crm-line); } .crm-ad-linea { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; min-width: 0; padding: 6px 12px 6px 0; border-bottom: 1px solid var(--crm-line); } .crm-ad-par:last-child .crm-ad-linea, .crm-ad-texto > .crm-ad-linea:last-child, .crm-ad-texto > .crm-ad-fila-pliegue:last-child { border-bottom: 0; } .crm-ad-linea[data-tipo=cambiado], .crm-ad-par[data-tipo=cambiado] .crm-ad-linea { background: var(--crm-panel); } .crm-ad-linea[data-tipo=insertado], .crm-ad-par[data-tipo=insertado] .crm-ad-linea[data-lado=despues] { box-shadow: inset 2px 0 0 var(--crm-acento); background: var(--crm-acento-suave); } .crm-ad-linea[data-tipo=borrado], .crm-ad-par[data-tipo=borrado] .crm-ad-linea[data-lado=antes] { box-shadow: inset 2px 0 0 var(--crm-control); background: var(--crm-panel-2); } .crm-ad-linea[data-vacia] { background: repeating-linear-gradient( 135deg, transparent 0 6px, var(--crm-line) 6px 7px); } .crm-ad-num { color: var(--crm-dim); font-family: var(--crm-mono); font-size: 11px; line-height: 22px; font-variant-numeric: tabular-nums; text-align: right; user-select: none; } .crm-ad-contenido { margin: 0; min-width: 0; color: var(--crm-text-2); font-size: 14px; line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; } .crm-ad-linea[data-tipo=igual] .crm-ad-contenido { color: var(--crm-muted); } .crm-ad-contenido del { color: var(--crm-muted); text-decoration: line-through; text-decoration-color: var(--crm-control); } .crm-ad-contenido del + ins { margin-left: 4px; } .crm-ad-contenido ins { background: var(--crm-acento-suave); color: var(--crm-text); text-decoration: underline; text-decoration-color: var(--crm-acento); text-decoration-thickness: 1px; text-underline-offset: 4px; } .crm-ad-fila-pliegue td { padding: 0; } .crm-ad-pliegue { display: flex; align-items: center; gap: 6px; width: 100%; height: 28px; margin: 0; padding: 0 12px 0 48px; border: 0; border-bottom: 1px solid var(--crm-line); background: var(--crm-panel-2); color: var(--crm-muted); font-family: var(--crm-sans); font-size: 12px; line-height: 16px; text-align: left; cursor: pointer; transition: color var(--crm-t-color) var(--crm-snap), background-color var(--crm-t-color) var(--crm-snap); } .crm-ad-campos .crm-ad-pliegue { padding-left: 0; background: transparent; } .crm-ad-pliegue svg { width: 14px; height: 14px; } .crm-ad-pliegue:hover { background: var(--crm-panel-3); color: var(--crm-text); transition-duration: 0ms; } .crm-ad-pliegue:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: -1px; } .crm-ad-linea { animation: crm-ad-despliega var(--crm-t-entrada) var(--crm-snap); } @keyframes crm-ad-despliega { from { opacity: 0; } } @container (max-width: 559px) { .crm-ad-par, .crm-ad-cabeceras { grid-template-columns: minmax(0, 1fr); } .crm-ad-cabeceras { display: none; } .crm-ad-par > .crm-ad-linea + .crm-ad-linea { border-left: 0; } .crm-ad-linea[data-vacia] { display: none; } .crm-ad-resumen { flex-basis: 100%; margin-left: 0; } } .crm-ad-esqueleto { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--crm-line); } .crm-ad-esqueleto .crm-esqueleto, .crm-mesa-detalle-cuerpo > .crm-esqueleto { display: block; } .crm-deslizante.crm-pq { --crm-desl-ancho: 480px; } .crm-pq-cuerpo { display: grid; gap: 24px; } .crm-pq-cifra { display: grid; gap: 6px; } .crm-pq-valor { margin: 0; color: var(--crm-text); font-size: 40px; font-weight: 500; line-height: 44px; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; } .crm-pq-unidad { margin-left: 4px; color: var(--crm-muted); font-size: 24px; letter-spacing: 0; } .crm-pq-variacion { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; } .crm-pq-variacion svg { width: 12px; height: 12px; } .crm-pq-variacion[data-sentido=bueno] { color: var(--crm-acento); } .crm-pq-variacion[data-sentido=fallo] { color: var(--crm-error); } .crm-pq-antes { color: var(--crm-muted); } .crm-pq-seccion { display: grid; gap: 12px; min-width: 0; } .crm-pq-seccion-titulo { margin: 0; color: var(--crm-muted); font-size: 12px; font-weight: 400; line-height: 16px; } .crm-pq-cascada { margin: 0; } .crm-pq-cascada svg { display: block; overflow: visible; } .crm-pq-cascada-base { stroke: var(--crm-line-2); stroke-width: 1; shape-rendering: crispEdges; } .crm-pq-escalon rect { fill: var(--crm-text-2); stroke: none; shape-rendering: crispEdges; transform-box: fill-box; transform-origin: 50% 100%; animation: crm-pq-crece var(--crm-t-dibujo) var(--crm-curva) both; animation-delay: calc(var(--i) * var(--crm-t-pulsar)); } .crm-pq-escalon[data-tipo=inicio] rect { fill: var(--crm-serie-reposo); } .crm-pq-escalon[data-tipo=baja] rect { fill: var(--crm-panel-2); stroke: var(--crm-text-2); stroke-width: 1; transform-origin: 50% 0; } .crm-pq-escalon[data-tipo=fin] rect { fill: var(--crm-text); } .crm-pq-escalon[data-principal] rect { fill: var(--crm-acento); stroke: none; } .crm-pq-conector { stroke: var(--crm-control); stroke-width: 1; stroke-dasharray: 2 2; shape-rendering: crispEdges; animation: crm-pq-aparece var(--crm-t-gesto) var(--crm-snap) both; animation-delay: calc(var(--i) * var(--crm-t-pulsar) + var(--crm-t-dibujo)); } .crm-pq-cascada-valor { fill: var(--crm-text-2); font-family: var(--crm-mono); font-size: 11px; font-variant-numeric: tabular-nums; animation: crm-pq-aparece var(--crm-t-gesto) var(--crm-snap) both; animation-delay: calc(var(--i) * var(--crm-t-pulsar) + var(--crm-t-dibujo)); } .crm-pq-escalon[data-principal] .crm-pq-cascada-valor { fill: var(--crm-acento); } .crm-pq-cascada-etiqueta { fill: var(--crm-muted); font-family: var(--crm-sans); font-size: 11px; } @keyframes crm-pq-crece { from { transform: scaleY(0); } } @keyframes crm-pq-aparece { from { opacity: 0; } } .crm-pq-causas { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; } .crm-pq-causa { display: grid; gap: 6px; padding-bottom: 16px; border-bottom: 1px solid var(--crm-line); } .crm-pq-causa:last-child { padding-bottom: 0; border-bottom: 0; } .crm-pq-causa-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .crm-pq-causa-titulo { color: var(--crm-text); font-size: 13px; font-weight: 500; line-height: 20px; } .crm-pq-peso { flex: none; color: var(--crm-text-2); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; font-variant-numeric: tabular-nums; } .crm-pq-medidor { display: block; height: 4px; background: var(--crm-panel-3); } .crm-pq-medidor > span { display: block; height: 100%; background: var(--crm-serie-reposo); transform-origin: left; animation: crm-pq-mide var(--crm-t-dibujo) var(--crm-curva) both; } .crm-pq-medidor > span[data-principal] { background: var(--crm-acento); } @keyframes crm-pq-mide { from { transform: scaleX(0); } } .crm-pq-causa-detalle { margin: 0; color: var(--crm-text-2); font-size: 13px; line-height: 20px; } .crm-pq-acciones { display: flex; flex-wrap: wrap; gap: 8px; } .crm-kpi[data-porque], .crm-pq-envoltorio { position: relative; } .crm-kpi[data-porque] { cursor: pointer; } .crm-kpi[data-porque]:hover { background: var(--crm-panel-2); } .crm-pq-esquina { position: absolute; top: 12px; right: 12px; opacity: 0; transition: opacity var(--crm-t-color) var(--crm-snap); } .crm-kpi[data-porque]:is(:hover, :focus-within) .crm-pq-esquina, .crm-pq-envoltorio:is(:hover, :focus-within) .crm-pq-esquina, .crm-pq-esquina[aria-expanded=true] { opacity: 1; } @media (hover: none) { .crm-pq-esquina { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .crm-pq-escalon rect, .crm-pq-conector, .crm-pq-cascada-valor, .crm-pq-medidor > span { animation: none; } } .crm-pulso { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--crm-line); background: var(--crm-panel); color: var(--crm-text); font-family: var(--crm-sans); font-size: 13px; line-height: 20px; letter-spacing: -0.005em; } .crm-pulso[data-variante=compacta] { width: 320px; max-width: 100%; } .crm-pulso-cabecera { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 44px; padding: 0 16px; border-bottom: 1px solid var(--crm-line); } .crm-pulso-titulo { margin: 0; color: var(--crm-text); font-size: 13px; font-weight: 500; line-height: 20px; } .crm-pulso-vivo { display: inline-flex; align-items: center; gap: 6px; color: var(--crm-acento); font-size: 12px; line-height: 16px; } .crm-pulso-vivo[data-pausado] { color: var(--crm-muted); } .crm-pulso-punto { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--crm-acento); box-shadow: 0 0 0 2px var(--crm-acento-suave); } .crm-pulso-punto::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--crm-acento); animation: crm-latido calc(var(--crm-t-dibujo) * 4) var(--crm-curva) infinite; } .crm-pulso-vivo[data-pausado] .crm-pulso-punto { background: var(--crm-control); box-shadow: none; } .crm-pulso-vivo[data-pausado] .crm-pulso-punto::after { animation: none; opacity: 0; } .crm-pulso-ritmo { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; } .crm-pulso-ritmo-rotulo { color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-pulso-ritmo svg { display: block; } .crm-pulso-barra { fill: var(--crm-serie-reposo); shape-rendering: crispEdges; } .crm-pulso-barra[data-vacia] { fill: var(--crm-line-2); } .crm-pulso-barra[data-ahora]:not([data-vacia]) { fill: var(--crm-acento); } .crm-pulso-latido { fill: var(--crm-luz); opacity: 0; shape-rendering: crispEdges; } .crm-pulso-latido[data-activo] { animation: crm-pulso-late var(--crm-t-capa) var(--crm-curva); } @keyframes crm-pulso-late { 30% { opacity: 1; } } .crm-pulso-filtros { display: flex; flex: none; align-items: center; gap: 6px; min-height: 40px; padding: 8px 16px; overflow-x: auto; border-bottom: 1px solid var(--crm-line); scrollbar-width: none; width: 0; min-width: 100%; } .crm-pulso-filtros .crm-prod-chip { flex: none; } .crm-pulso-cuerpo { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 0 0 16px; } .crm-pulso-nuevos { position: sticky; z-index: 1; top: 8px; display: flex; align-items: center; gap: 6px; height: 24px; margin: 8px auto -32px; padding: 0 10px 0 8px; border: 1px solid var(--crm-acento-linea); background: var(--crm-panel-2); box-shadow: var(--crm-sombra-capa); color: var(--crm-text); font-family: var(--crm-sans); font-size: 12px; line-height: 16px; cursor: pointer; animation: crm-pulso-baja var(--crm-t-entrada) var(--crm-snap); } .crm-pulso-nuevos svg { width: 14px; height: 14px; color: var(--crm-acento); } .crm-pulso-nuevos:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; } @keyframes crm-pulso-baja { from { opacity: 0; transform: translateY(-4px) scale(0.98); } } .crm-pulso-grupo { position: relative; content-visibility: auto; contain-intrinsic-size: auto 120px; } .crm-pulso-grupo::before { content: ""; position: absolute; top: 0; bottom: 0; left: 23px; width: 1px; background: var(--crm-line-2); } .crm-pulso-grupo:first-of-type::before { top: 34px; } .crm-pulso-grupo:last-of-type::before { bottom: auto; height: 100%; -webkit-mask-image: linear-gradient( 180deg, currentColor 70%, transparent); mask-image: linear-gradient( 180deg, currentColor 70%, transparent); } .crm-pulso-grupo-rotulo { position: sticky; z-index: 0; top: 0; margin: 0; padding: 12px 16px 4px 46px; background: linear-gradient( 90deg, transparent 32px, var(--crm-panel) 32px); color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; font-weight: 400; line-height: 16px; font-variant-numeric: tabular-nums; } .crm-pulso-lista { position: relative; margin: 0; padding: 0; list-style: none; } .crm-pulso-evento { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: start; column-gap: 16px; min-height: 36px; padding: 8px 16px 8px 18px; } .crm-pulso-nodo { position: relative; z-index: 1; width: 12px; height: 12px; margin-top: 4px; border: 1px solid var(--crm-control); border-radius: 50%; background: var(--crm-panel); } .crm-pulso-evento[data-estado=hecho] .crm-pulso-nodo { border-color: var(--crm-acento); background: var(--crm-acento); } .crm-pulso-evento[data-estado=trabajando] .crm-pulso-nodo { border-color: var(--crm-acento-linea); box-shadow: 0 0 0 3px var(--crm-acento-suave); } .crm-pulso-evento[data-estado=error] .crm-pulso-nodo { border-color: var(--crm-error); background: var(--crm-error-suave); } .crm-pulso-texto { display: grid; gap: 2px; min-width: 0; } .crm-pulso-evento-titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 0; color: var(--crm-text-2); font-size: 13px; line-height: 20px; } .crm-pulso-evento[data-importancia=alta] .crm-pulso-evento-titulo { color: var(--crm-text); font-weight: 500; } .crm-pulso-evento[data-importancia=baja] .crm-pulso-evento-titulo { color: var(--crm-muted); } .crm-pulso-enlace { padding: 2px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; } .crm-pulso-enlace:hover { color: var(--crm-text); text-decoration: underline; text-decoration-color: var(--crm-line-2); text-underline-offset: 3px; } .crm-pulso-enlace:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; } .crm-pulso-falla { color: var(--crm-error); font-size: 12px; font-weight: 400; line-height: 16px; } .crm-pulso-detalle { margin: 0; overflow: hidden; color: var(--crm-muted); font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; } .crm-pulso-hora { color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 20px; font-variant-numeric: tabular-nums; } .crm-pulso-evento[data-nuevo] { animation: crm-pulso-entra var(--crm-t-entrada) var(--crm-snap); } .crm-pulso-evento[data-nuevo]::before { content: ""; position: absolute; top: 0; bottom: 0; left: 23px; width: 1px; background: linear-gradient( 180deg, transparent, var(--crm-luz) 50%, transparent) 0 -40px / 100% 40px no-repeat; box-shadow: 0 0 8px var(--crm-acento-linea); animation: crm-pulso-corriente var(--crm-t-dibujo) var(--crm-curva) forwards; } .crm-pulso-evento[data-nuevo] .crm-pulso-nodo { box-shadow: 0 0 0 4px var(--crm-acento-suave); } @keyframes crm-pulso-entra { from { opacity: 0; transform: translateY(-6px); } } @keyframes crm-pulso-corriente { to { background-position: 0 calc(100% + 40px); } } .crm-pulso-esqueleto, .crm-pulso-error, .crm-pulso-vacio { display: grid; gap: 12px; padding: 16px; } .crm-pulso-esqueleto .crm-esqueleto { display: block; } .crm-pulso-vacio { justify-items: start; gap: 6px; padding: 24px 16px; } .crm-pulso-vacio-titulo { margin: 0; color: var(--crm-text); font-weight: 500; } .crm-pulso-vacio-texto { margin: 0 0 6px; color: var(--crm-muted); } .crm-pulso-mas { margin: 8px 0 0 44px; } .crm-pulso-centinela { height: 1px; } .crm-pulso[data-variante=compacta] .crm-pulso-ritmo { flex-basis: 100%; margin: 0 0 8px; } .crm-pulso[data-variante=compacta] .crm-pulso-cabecera { padding-top: 12px; } .crm-pulso[data-variante=compacta] .crm-pulso-filtros, .crm-pulso[data-variante=compacta] .crm-pulso-cabecera { padding-left: 12px; padding-right: 12px; } @media (prefers-reduced-motion: reduce) { .crm-pulso-punto::after, .crm-pulso-latido[data-activo], .crm-pulso-nuevos, .crm-pulso-evento[data-nuevo], .crm-pulso-evento[data-nuevo]::before { animation: none; } } .crm-visor { container-type: inline-size; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--crm-line); background: var(--crm-panel); color: var(--crm-text); font-family: var(--crm-sans); font-size: 13px; line-height: 20px; letter-spacing: -0.005em; } .crm-visor-barra { display: flex; flex: none; align-items: center; gap: 12px; height: 44px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--crm-line); } .crm-visor-titulo { flex: 1; min-width: 0; margin: 0; overflow: hidden; color: var(--crm-text); font-size: 13px; font-weight: 500; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; } .crm-visor-zoom { display: flex; align-items: center; gap: 2px; } .crm-visor-cifra { font-variant-numeric: tabular-nums; } .crm-visor-porcentaje { min-width: 44px; color: var(--crm-muted); font-size: 12px; line-height: 16px; text-align: center; } .crm-visor-cuerpo { display: grid; flex: 1; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); min-height: 0; } .crm-visor-lienzo { display: grid; align-content: start; justify-items: center; gap: 16px; min-width: 0; min-height: 0; padding: 16px; overflow: auto; background: var(--crm-bg); outline: none; } .crm-visor-lienzo:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: -1px; } .crm-visor-pagina { position: relative; max-width: none; margin: 0; border: 1px solid var(--crm-line-2); box-shadow: var(--crm-sombra-hundida); } .crm-visor-pagina img { display: block; width: 100%; height: 100%; user-select: none; } .crm-visor-numero { position: absolute; right: 8px; bottom: 8px; padding: 2px 6px; background: var(--crm-velo); color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; font-variant-numeric: tabular-nums; } .crm-visor-caja { --crm-caja: var(--crm-control); position: absolute; margin: 0; padding: 0; border: 1px solid var(--crm-caja); background: transparent; cursor: pointer; transition: background-color var(--crm-t-color) var(--crm-snap), opacity var(--crm-t-color) var(--crm-snap), box-shadow var(--crm-t-color) var(--crm-snap); } .crm-visor-caja[data-tono=alta] { --crm-caja: var(--crm-acento); } .crm-visor-caja[data-tono=baja] { --crm-caja: var(--crm-aviso); } .crm-visor-caja[data-estado=confirmado], .crm-visor-caja[data-estado=corregido] { --crm-caja: var(--crm-acento); } .crm-visor-caja[data-atenuada] { opacity: 0.45; } .crm-visor-caja[data-activa] { background: color-mix(in oklab, var(--crm-caja) 16%, transparent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--crm-caja) 28%, transparent); } .crm-visor-lado { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-left: 1px solid var(--crm-line); } .crm-visor-revision { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 52px; padding: 12px 16px; border-bottom: 1px solid var(--crm-line); } .crm-visor-cuenta { margin-left: auto; color: var(--crm-muted); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; } .crm-visor-progreso-texto { display: flex; flex-basis: 100%; justify-content: space-between; color: var(--crm-text); font-weight: 500; } .crm-visor-progreso { flex-basis: 100%; height: 4px; background: var(--crm-panel-3); } .crm-visor-progreso > span { display: block; height: 100%; background: var(--crm-acento); transition: width var(--crm-t-capa) var(--crm-curva); } .crm-visor-guia { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-visor-campos { flex: 1; min-height: 0; margin: 0; padding: 0; overflow-y: auto; list-style: none; } .crm-visor-campo { position: relative; } .crm-visor-fila, .crm-visor-edicion { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) 40px; grid-template-rows: 20px 4px; align-items: center; column-gap: 12px; row-gap: 0; width: 100%; min-height: 36px; margin: 0; padding: 4px 16px 3px 16px; border: 0; border-bottom: 1px solid var(--crm-line); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color var(--crm-t-color) var(--crm-snap); } .crm-visor-fila:hover { background: var(--crm-panel-2); transition-duration: 0ms; } .crm-visor-fila:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: -1px; } .crm-visor-campo[data-activo] .crm-visor-fila { background: var(--crm-panel-3); } .crm-visor-campo[data-activo]::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--crm-acento); } .crm-visor-clave { grid-row: 1; overflow: hidden; color: var(--crm-muted); font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; } .crm-visor-valor { grid-row: 1; overflow: hidden; color: var(--crm-text); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; } .crm-visor-campo[data-estado=corregido] .crm-visor-valor { color: var(--crm-text); box-shadow: inset 2px 0 0 var(--crm-acento); padding-left: 6px; } .crm-visor-pct { grid-row: 1; justify-self: end; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; font-variant-numeric: tabular-nums; } .crm-visor-campo[data-tono=baja] .crm-visor-pct { color: var(--crm-aviso); } .crm-visor-hecho { grid-row: 1; justify-self: end; width: 14px; height: 14px; color: var(--crm-acento); } .crm-visor-medidor { grid-row: 2; grid-column: 1 / -1; align-self: end; display: block; height: 4px; background: var(--crm-panel-3); } .crm-visor-medidor > span { display: block; height: 100%; background: var(--crm-control); } .crm-visor-campo[data-tono=alta] .crm-visor-medidor > span { background: var(--crm-acento); } .crm-visor-campo[data-tono=baja] .crm-visor-medidor > span { background: var(--crm-aviso); } .crm-visor-edicion { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) auto; grid-template-rows: 28px; cursor: default; background: var(--crm-panel-2); } .crm-visor-entrada { min-width: 0; height: 28px; padding: 0 8px; border: 1px solid var(--crm-acento); border-radius: 0; background: var(--crm-panel); box-shadow: var(--crm-foco-halo); color: var(--crm-text); font-family: var(--crm-sans); font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums; outline: none; } .crm-visor-acciones-edicion { display: inline-flex; gap: 2px; } .crm-visor-ayuda { flex: none; margin: 0; padding: 8px 16px; border-top: 1px solid var(--crm-line); color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-visor-mensaje { display: grid; flex: 1; place-content: center; justify-items: center; gap: 6px; padding: 32px 24px; text-align: center; } .crm-visor-vacio svg { width: 20px; height: 20px; margin-bottom: 6px; color: var(--crm-muted); } .crm-visor-vacio-titulo { margin: 0; color: var(--crm-text); font-size: 15px; font-weight: 500; line-height: 22px; } .crm-visor-vacio-texto { max-width: 44ch; margin: 0; color: var(--crm-muted); } .crm-visor-esqueleto { place-items: center; } .crm-visor-esqueleto .crm-esqueleto { display: block; } .crm-visor-esqueleto-lado { gap: 16px; padding: 16px; } .crm-visor-esqueleto-lado .crm-esqueleto { display: block; } @container (max-width: 719px) { .crm-visor-cuerpo { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); } .crm-visor-lado { border-top: 1px solid var(--crm-line); border-left: 0; } } @media (prefers-reduced-motion: reduce) { .crm-visor-progreso > span, .crm-visor-caja { transition: none; } } .crm-llamada { container-type: inline-size; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--crm-line); background: var(--crm-panel); color: var(--crm-text); font-family: var(--crm-sans); font-size: 13px; line-height: 20px; letter-spacing: -0.005em; } .crm-llamada-cabecera { display: flex; flex: none; align-items: center; gap: 12px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--crm-line); } .crm-llamada-estado { display: inline-flex; flex: none; align-items: center; gap: 6px; color: var(--crm-acento); font-size: 12px; line-height: 16px; } .crm-llamada-punto { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--crm-acento); box-shadow: 0 0 0 2px var(--crm-acento-suave); } .crm-llamada-estado[data-estado=en-curso] .crm-llamada-punto::after, .crm-llamada-estado[data-estado=sonando] .crm-llamada-punto::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: crm-latido calc(var(--crm-t-dibujo) * 2) var(--crm-curva) infinite; } .crm-llamada-estado[data-estado=sonando] { color: var(--crm-aviso); } .crm-llamada-estado[data-estado=sonando] .crm-llamada-punto { background: var(--crm-aviso); box-shadow: 0 0 0 2px var(--crm-aviso-suave); } .crm-llamada-estado[data-estado=en-espera] { color: var(--crm-muted); } .crm-llamada-estado[data-estado=en-espera] .crm-llamada-punto { background: transparent; border: 1px solid var(--crm-control); box-shadow: none; } .crm-llamada-estado[data-estado=terminada] { color: var(--crm-muted); } .crm-llamada-estado[data-estado=terminada] .crm-llamada-punto { background: var(--crm-control); box-shadow: none; } .crm-llamada-titulo { display: flex; flex: 1; align-items: baseline; gap: 8px; min-width: 0; margin: 0; overflow: hidden; font-size: 13px; font-weight: 500; line-height: 20px; white-space: nowrap; } .crm-llamada-titulo svg { align-self: center; flex: none; width: 14px; height: 14px; color: var(--crm-aviso); } .crm-llamada-nombre { overflow: hidden; color: var(--crm-text); text-overflow: ellipsis; } .crm-llamada-telefono { color: var(--crm-muted); font-size: 12px; font-weight: 400; line-height: 16px; font-variant-numeric: tabular-nums; } .crm-llamada-onda { flex: none; } .crm-llamada-onda rect { fill: var(--crm-serie-reposo); transform-box: fill-box; transform-origin: 50% 50%; transform: scaleY(0.35); transition: transform var(--crm-t-capa) var(--crm-snap); shape-rendering: crispEdges; } .crm-llamada-onda[data-hablando] rect { fill: var(--crm-acento); animation: crm-llamada-onda calc(var(--crm-t-capa) * 2) var(--crm-curva) infinite alternate; animation-delay: calc(var(--i) * var(--crm-t-pulsar) * -1); } @keyframes crm-llamada-onda { 0% { transform: scaleY(0.3); } 100% { transform: scaleY(1); } } .crm-llamada-crono { flex: none; min-width: 44px; color: var(--crm-text); font-family: var(--crm-mono); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; text-align: right; } .crm-llamada-cuerpo { display: grid; flex: 1; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); min-height: 0; } .crm-llamada-transcripcion { display: flex; flex-direction: column; gap: 12px; min-height: 0; margin: 0; padding: 16px; overflow-y: auto; list-style: none; outline: none; } .crm-llamada-transcripcion:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: -1px; } .crm-llamada-turno { display: grid; gap: 2px; max-width: min(68ch, 82%); padding: 8px 12px; border: 1px solid var(--crm-line); background: var(--crm-panel-2); animation: crm-llamada-turno var(--crm-t-entrada) var(--crm-snap); } .crm-llamada-turno[data-quien=agente] { align-self: flex-end; border-color: var(--crm-line); border-right: 2px solid var(--crm-acento-linea); background: var(--crm-panel); } .crm-llamada-turno[data-quien=persona] { align-self: flex-end; border-right: 2px solid var(--crm-text-2); background: var(--crm-panel); } @keyframes crm-llamada-turno { from { opacity: 0; transform: translateY(4px); } } .crm-llamada-quien { color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-llamada-texto { margin: 0; color: var(--crm-text-2); font-size: 14px; line-height: 22px; overflow-wrap: anywhere; } .crm-llamada-turno[data-parcial] .crm-llamada-texto { color: var(--crm-text); } .crm-llamada-cursor { display: inline-block; width: 24px; height: 2px; margin-left: 4px; vertical-align: middle; background: linear-gradient( 90deg, transparent, var(--crm-luz), transparent) -24px 0 / 24px 100% no-repeat; animation: crm-llamada-luz var(--crm-t-dibujo) var(--crm-curva) infinite; } @keyframes crm-llamada-luz { to { background-position: 24px 0; } } .crm-llamada-silencio { margin: auto; color: var(--crm-muted); } .crm-llamada-lado:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: -1px; } .crm-llamada-lado { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-y: auto; border-left: 1px solid var(--crm-line); } .crm-llamada-seccion { display: grid; gap: 8px; padding: 16px; border-bottom: 1px solid var(--crm-line); } .crm-llamada-seccion-titulo { display: flex; justify-content: space-between; gap: 8px; margin: 0; color: var(--crm-muted); font-size: 12px; font-weight: 400; line-height: 16px; } .crm-llamada-confianza { color: var(--crm-text-2); font-family: var(--crm-mono); font-size: 11px; font-variant-numeric: tabular-nums; } .crm-llamada-intencion { margin: 0; color: var(--crm-text); font-size: 15px; font-weight: 500; line-height: 22px; letter-spacing: -0.01em; } .crm-llamada-intencion[data-vacia] { color: var(--crm-muted); font-weight: 400; } .crm-llamada-datos, .crm-llamada-ficha { display: grid; margin: 0; } .crm-llamada-dato, .crm-llamada-ficha > div { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: 12px; min-height: 36px; border-bottom: 1px solid var(--crm-line); } .crm-llamada-dato:last-child, .crm-llamada-ficha > div:last-child { border-bottom: 0; } .crm-llamada-datos dt, .crm-llamada-ficha dt { color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-llamada-datos dd, .crm-llamada-ficha dd { display: grid; gap: 4px; min-width: 0; margin: 0; color: var(--crm-text); font-variant-numeric: tabular-nums; } .crm-llamada-dato[data-vacio] dd { color: var(--crm-dim); } .crm-llamada-dato:not([data-vacio]) .crm-llamada-valor { animation: crm-llamada-turno var(--crm-t-entrada) var(--crm-snap); } .crm-llamada-valor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-llamada-medidor { display: block; height: 4px; background: var(--crm-panel-3); } .crm-llamada-medidor > span { display: block; height: 100%; background: var(--crm-control); transition: width var(--crm-t-capa) var(--crm-curva); } .crm-llamada-dato[data-confirmado] .crm-llamada-medidor > span { background: var(--crm-acento); } .crm-llamada-dato[data-destello] { animation: crm-llamada-destello calc(var(--crm-t-dibujo) + var(--crm-t-capa)) var(--crm-curva); } @keyframes crm-llamada-destello { 20% { background: var(--crm-acento-suave); box-shadow: inset 2px 0 0 var(--crm-acento); } } .crm-llamada-barra { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 44px; padding: 7px 8px 8px; border-top: 1px solid var(--crm-line); } .crm-llamada-hueco { flex: 1; } @container (max-width: 639px) { .crm-llamada-cuerpo { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr); } .crm-llamada-lado { border-top: 1px solid var(--crm-line); border-left: 0; } .crm-llamada-telefono, .crm-llamada-barra .crm-boton-atajo { display: none; } .crm-llamada-turno { max-width: 92%; } } @media (prefers-reduced-motion: reduce) { .crm-llamada-punto::after, .crm-llamada-onda[data-hablando] rect, .crm-llamada-turno, .crm-llamada-cursor, .crm-llamada-dato[data-destello], .crm-llamada-dato:not([data-vacio]) .crm-llamada-valor { animation: none; } .crm-llamada-onda[data-hablando] rect { transform: scaleY(0.7); } .crm-llamada-cursor { background: var(--crm-acento-linea); } } .crm-parte { display: grid; gap: 24px; max-width: calc(68ch + 48px); margin: 0 auto; padding: 32px 24px 40px; border: 1px solid var(--crm-line); background: var(--crm-panel); color: var(--crm-text); font-family: var(--crm-sans); font-size: 15.5px; line-height: 26px; } .crm-parte-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--crm-line); } .crm-parte-firma { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; } .crm-parte-fecha { color: var(--crm-muted); font-size: 13px; line-height: 20px; } .crm-parte-herramientas { display: flex; flex-wrap: wrap; gap: 4px; } .crm-parte-rotulo { margin: 0 0 -18px; color: var(--crm-acento); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-parte-saludo { margin: 0; color: var(--crm-text); font-size: 24px; font-weight: 500; line-height: 32px; letter-spacing: -0.03em; text-wrap: balance; } .crm-parte-cifras { border-top: 1px solid var(--crm-line); border-bottom: 1px solid var(--crm-line); } .crm-parte-cuenta { font-variant-numeric: tabular-nums; } .crm-parte-seccion, .crm-parte-espera { display: grid; gap: 12px; } .crm-parte-titulo { margin: 0; color: var(--crm-text); font-size: 20px; font-weight: 500; line-height: 28px; letter-spacing: -0.02em; } .crm-parte-punto { max-width: 68ch; margin: 0; color: var(--crm-text-2); font-size: 15.5px; line-height: 26px; } .crm-parte-nota { margin-left: 2px; line-height: 0; } .crm-parte-nota button { min-width: 16px; height: 16px; margin: 0 1px; padding: 0 3px; border: 1px solid var(--crm-line-2); background: transparent; color: var(--crm-acento); font-family: var(--crm-mono); font-size: 11px; line-height: 14px; font-variant-numeric: tabular-nums; vertical-align: 2px; cursor: pointer; } .crm-parte-nota button:hover { border-color: var(--crm-acento-linea); background: var(--crm-acento-suave); } .crm-parte-nota button:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; } .crm-parte-espera { padding: 16px 20px 20px; border: 1px solid var(--crm-line-2); border-left: 2px solid var(--crm-acento); background: var(--crm-panel-2); } .crm-parte-pendientes { display: grid; margin: 0; padding: 0; list-style: none; } .crm-parte-pendiente { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 16px 20px; column-gap: 16px; align-content: center; width: 100%; min-height: 44px; margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--crm-line); background: transparent; color: inherit; font: inherit; font-size: 13px; line-height: 20px; text-align: left; } button.crm-parte-pendiente { cursor: pointer; } button.crm-parte-pendiente:hover .crm-parte-pendiente-titulo { text-decoration: underline; text-decoration-color: var(--crm-line-2); text-underline-offset: 3px; } button.crm-parte-pendiente:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: -1px; } .crm-parte-pendiente-tipo { grid-column: 1; color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-parte-pendiente-titulo { grid-column: 1; overflow: hidden; color: var(--crm-text); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } .crm-parte-pendiente-meta { display: grid; grid-column: 2; grid-row: 1 / 3; justify-items: end; align-content: center; color: var(--crm-muted); font-size: 12px; line-height: 16px; text-align: right; } .crm-parte-pendiente-meta [data-pasado] { color: var(--crm-error); } .crm-parte-cifra { color: var(--crm-text); font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums; } .crm-parte-mesa { justify-self: start; } .crm-parte-notas { padding-top: 12px; border-top: 1px solid var(--crm-line); color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-parte-notas ol { display: grid; gap: 4px; margin: 0; padding-left: 24px; list-style: decimal; } .crm-parte-notas li::marker { color: var(--crm-acento); font-family: var(--crm-mono); font-size: 11px; font-variant-numeric: tabular-nums; } .crm-parte-pie { margin: 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-parte-verde { color: var(--crm-acento); } @media (max-width: 599px) { .crm-parte { padding: 24px 16px 32px; } } @page { size: A4; margin: 18mm 18mm 20mm; } @media print { .crm-parte { max-width: none; padding: 0; border: 0; background: var(--crm-panel); font-size: 11pt; line-height: 1.6; } .crm-parte * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .crm-parte-herramientas, .crm-parte-mesa, .crm-kpi .crm-pq-esquina { display: none; } .crm-parte .crm-grupo-kpi { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } .crm-parte .crm-kpi { padding: 12px 14px; } .crm-parte-nota button { border: 0; padding: 0; color: var(--crm-text); } .crm-parte-seccion, .crm-parte-espera, .crm-parte-cifras { break-inside: avoid; } .crm-parte-espera { background: transparent; } } .crm-parte-esqueleto { display: grid; gap: 16px; } .crm-parte-esqueleto .crm-esqueleto, .crm-parte-esqueleto .crm-esqueleto-lineas { display: grid; gap: 10px; } .crm-recorrido { position: fixed; z-index: 60; inset: 0; pointer-events: none; font-family: var(--crm-sans); } .crm-recorrido-telon { position: fixed; border: 1px solid var(--crm-acento); box-shadow: 0 0 0 4px var(--crm-acento-suave), 0 0 0 100vmax var(--crm-telon); pointer-events: none; transition: top var(--crm-t-panel) var(--crm-snap), left var(--crm-t-panel) var(--crm-snap), width var(--crm-t-panel) var(--crm-snap), height var(--crm-t-panel) var(--crm-snap); } .crm-recorrido-telon[data-sin-hueco] { inset: 0; border: 0; background: var(--crm-telon); box-shadow: none; } .crm-recorrido-tarjeta { position: fixed; display: grid; gap: 12px; width: 320px; padding: 16px; border: 1px solid var(--crm-line-2); background: var(--crm-panel-2); box-shadow: var(--crm-sombra-capa); color: var(--crm-text); font-size: 13px; line-height: 20px; letter-spacing: -0.005em; pointer-events: auto; outline: none; transition: top var(--crm-t-panel) var(--crm-snap), left var(--crm-t-panel) var(--crm-snap); animation: crm-recorrido-entra var(--crm-t-entrada) var(--crm-snap); } .crm-recorrido-tarjeta:focus-visible { outline: none; border-color: var(--crm-acento-linea); } @keyframes crm-recorrido-entra { from { opacity: 0; transform: translateY(4px) scale(0.98); } } .crm-recorrido-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .crm-recorrido-paso { color: var(--crm-acento); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; } .crm-recorrido-saltar { height: 24px; margin: -4px -8px -4px 0; padding: 0 8px; border: 0; background: transparent; color: var(--crm-muted); font: inherit; font-size: 12px; line-height: 16px; cursor: pointer; } .crm-recorrido-saltar:hover { color: var(--crm-text); } .crm-recorrido-saltar:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; } .crm-recorrido-progreso { display: flex; gap: 2px; } .crm-recorrido-progreso > span { flex: 1; height: 2px; background: var(--crm-line-2); transition: background-color var(--crm-t-panel) var(--crm-curva); } .crm-recorrido-progreso > span[data-hecho], .crm-recorrido-progreso > span[data-actual] { background: var(--crm-acento); } .crm-recorrido-titulo { margin: 0; color: var(--crm-text); font-size: 15px; font-weight: 500; line-height: 22px; letter-spacing: -0.01em; } .crm-recorrido-texto { color: var(--crm-text-2); } .crm-recorrido-texto p { margin: 0; } .crm-recorrido-atajos { display: grid; margin: 8px 0 0; padding: 0; list-style: none; } .crm-recorrido-atajos li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; border-bottom: 1px solid var(--crm-line); } .crm-recorrido-atajos li:last-child { border-bottom: 0; } .crm-recorrido-requiere { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 10px; border: 1px dashed var(--crm-acento-linea); color: var(--crm-text); font-size: 12px; line-height: 16px; } .crm-recorrido-requiere[data-hecho] { border-style: solid; background: var(--crm-acento-suave); } .crm-recorrido-requiere svg { width: 14px; height: 14px; color: var(--crm-acento); } .crm-recorrido-punto { position: relative; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--crm-acento); } .crm-recorrido-punto::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--crm-acento); animation: crm-latido calc(var(--crm-t-dibujo) * 2) var(--crm-curva) infinite; } .crm-recorrido-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .crm-recorrido-hueco { flex: 1; } .crm-recorrido-salir { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--crm-line); color: var(--crm-text-2); } .crm-recorrido-salir .crm-recorrido-botones { justify-content: flex-end; } .crm-recorrido[data-movil] .crm-recorrido-tarjeta { top: auto; right: 0; bottom: 0; left: 0; width: auto; padding: 16px 16px max(16px, env(safe-area-inset-bottom)); border-right: 0; border-bottom: 0; border-left: 0; } @media (prefers-reduced-motion: reduce) { .crm-recorrido-telon, .crm-recorrido-tarjeta, .crm-recorrido-progreso > span { transition: none; animation: none; } .crm-recorrido-punto::after { animation: none; } } .crm-iban { display: inline-grid; grid-template-columns: minmax(0, max-content); row-gap: 2px; min-width: 0; max-width: 100%; vertical-align: top; } .crm-iban-linea { display: inline-flex; align-items: center; gap: 8px; min-width: 0; min-height: 24px; } .crm-iban-numero { display: inline-flex; gap: 6px; color: var(--crm-text-2); font-family: var(--crm-mono); font-size: 13px; font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: 0; line-height: 20px; white-space: nowrap; transition: gap var(--crm-t-salida) var(--crm-snap); } .crm-iban-grupo[data-lugar=primero] { color: var(--crm-muted); } .crm-iban-grupo[data-oculto] { color: var(--crm-dim); } .crm-iban-grupo[data-lugar=ultimo] { color: var(--crm-text); } .crm-iban[data-copiado] .crm-iban-numero { gap: 0; transition-duration: var(--crm-t-gesto); } .crm-iban[data-invalido] .crm-iban-grupo { color: var(--crm-text-2); } .crm-iban-aviso { flex: none; color: var(--crm-error); font-size: 12px; line-height: 16px; } .crm-iban-vacio { color: var(--crm-dim); font-size: 13px; line-height: 20px; } .crm-iban-copiar { display: inline-grid; flex: none; place-items: center; width: 24px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--crm-muted); cursor: pointer; transition: background-color var(--crm-t-salida) linear, color var(--crm-t-salida) linear; } .crm-iban-copiar svg { width: 14px; height: 14px; stroke-width: 1.5; } .crm-iban-copiar:hover, [data-crm-forzar~=hover] .crm-iban-copiar { background: var(--crm-panel-2); color: var(--crm-text); transition-duration: 0ms; } .crm-iban-copiar:active, [data-crm-forzar~=pulsado] .crm-iban-copiar { scale: 0.96; transition: scale var(--crm-t-pulsar) var(--crm-snap); } .crm-iban-copiar:focus-visible, [data-crm-forzar~=foco] .crm-iban-copiar { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-iban[data-copiado] .crm-iban-copiar { color: var(--crm-acento); } .crm-iban-meta { display: flex; gap: 8px; min-width: 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; white-space: nowrap; } .crm-iban-meta > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .crm-iban-meta > * + *::before { content: "\b7"; margin-right: 8px; color: var(--crm-dim); } .crm-iban-entidad { display: inline-flex; flex: none; gap: 6px; } .crm-iban-entidad-nombre { color: var(--crm-text-2); } .crm-iban-codigo { color: var(--crm-dim); font-family: var(--crm-mono); font-variant-numeric: tabular-nums; } @container (max-width: 399px) { .crm-iban-grupo[data-oculto] + .crm-iban-grupo[data-oculto] { display: none; } } .crm-banco-marca { display: inline-grid; flex: none; place-items: center; width: 32px; height: 32px; overflow: hidden; border: 1px solid var(--crm-line-2); background: var(--crm-panel-3); color: var(--crm-text-2); } .crm-banco-marca[data-tamano=pequena] { width: 16px; height: 16px; border: 0; } .crm-banco-marca[data-tamano=grande] { width: 48px; height: 48px; } .crm-banco-marca[data-logo] { border-color: var(--crm-line); background: var(--crm-panel-3); background: light-dark(var(--crm-panel), var(--crm-text)); } .crm-banco-marca-logo { display: block; width: 24px; height: 24px; object-fit: contain; } .crm-banco-marca[data-tamano=pequena] .crm-banco-marca-logo { width: 16px; height: 16px; padding: 2px; } .crm-banco-marca[data-tamano=grande] .crm-banco-marca-logo { width: 32px; height: 32px; } .crm-banco-marca-monograma { font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 16px; } .crm-banco-marca-monograma[data-largo] { font-size: 11px; letter-spacing: -0.02em; } .crm-banco-marca[data-tamano=pequena] .crm-banco-marca-monograma { font-size: 11px; line-height: 16px; } .crm-banco-marca[data-tamano=grande] .crm-banco-marca-monograma { font-size: 15px; line-height: 22px; } .crm-cuenta { container-type: inline-size; display: grid; gap: 12px; min-width: 0; padding: 20px; border: 1px solid var(--crm-line); background: var(--crm-panel); color: var(--crm-text); } .crm-cuenta-cuerpo { display: grid; grid-template-areas: "identidad saldo" "clase clase"; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: start; } .crm-cuenta-identidad { display: grid; grid-area: identidad; gap: 4px; min-width: 0; } .crm-cuenta-nombre { overflow: hidden; margin: 0; color: var(--crm-text); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; line-height: 22px; text-overflow: ellipsis; white-space: nowrap; } .crm-cuenta-saldo { display: grid; grid-area: saldo; gap: 6px; justify-items: end; text-align: right; } .crm-cuenta-cifra { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; } .crm-cuenta-cifra-numero { color: var(--crm-text); font-size: 20px; font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -0.035em; line-height: 24px; } .crm-cuenta-cifra-unidad { color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-cuenta-saldo[data-sin-saldo] .crm-cuenta-cifra-numero { color: var(--crm-dim); } .crm-cuenta-fecha { color: var(--crm-muted); font-size: 12px; line-height: 16px; white-space: nowrap; } .crm-cuenta-clase { display: flex; flex-wrap: wrap; grid-area: clase; align-items: center; gap: 8px 12px; padding-top: 16px; border-top: 1px solid var(--crm-line); } .crm-cuenta-bloqueo { color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-cuenta-motivo { margin: 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-cuenta[data-excluida] { border-style: dashed; border-color: var(--crm-line-2); background: var(--crm-bg); } .crm-cuenta[data-excluida] .crm-cuenta-nombre { color: var(--crm-text-2); } .crm-cuenta[data-excluida] :is(.crm-cuenta-cifra-numero, .crm-iban-grupo[data-lugar=ultimo]) { color: var(--crm-muted); } .crm-cuenta[data-excluida] .crm-cuenta-cifra-unidad { color: var(--crm-dim); } .crm-cuenta-confirmar { display: grid; gap: 8px; padding: 12px 0 0 14px; border-left: 2px solid var(--crm-acento-linea); } .crm-cuenta-confirmar-titulo { margin: 0; color: var(--crm-text); font-size: 13px; font-weight: 500; line-height: 20px; } .crm-cuenta-efecto { max-width: 68ch; margin: 0; color: var(--crm-text-2); font-size: 13px; line-height: 20px; } .crm-cuenta-efecto-antes, .crm-cuenta-efecto-despues { font-variant-numeric: tabular-nums; white-space: nowrap; } .crm-cuenta-efecto-antes { color: var(--crm-muted); } .crm-cuenta-efecto-despues { color: var(--crm-text); font-weight: 500; } .crm-cuenta-confirmar-acciones { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; } .crm-cuenta-fallo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; color: var(--crm-error); font-size: 12px; line-height: 16px; } .crm-cuenta[data-forma=fila] { gap: 8px; padding: 0 16px; border-width: 0 0 1px; background: transparent; } .crm-cuenta[data-forma=fila][data-excluida] { background: var(--crm-bg); } .crm-cuenta[data-forma=fila] .crm-cuenta-cuerpo { grid-template-areas: "identidad saldo clase"; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; min-height: 44px; gap: 0 24px; } .crm-cuenta[data-forma=fila] .crm-cuenta-identidad { gap: 0; } .crm-cuenta[data-forma=fila] .crm-cuenta-nombre { font-size: 13px; letter-spacing: -0.005em; line-height: 20px; } .crm-cuenta[data-forma=fila] .crm-iban { grid-template-columns: max-content minmax(0, 1fr); align-items: center; column-gap: 12px; } .crm-cuenta[data-forma=fila] .crm-cuenta-saldo { gap: 0; } .crm-cuenta[data-forma=fila] .crm-cuenta-cifra-numero { font-size: 13px; font-weight: 400; letter-spacing: 0; line-height: 20px; } .crm-cuenta[data-forma=fila] .crm-cuenta-cifra-unidad { font-size: 13px; line-height: 20px; } .crm-cuenta[data-forma=fila] .crm-cuenta-clase { flex-wrap: nowrap; padding: 0; border: 0; } .crm-cuenta[data-forma=fila] :is(.crm-cuenta-motivo, .crm-cuenta-confirmar, .crm-cuenta-fallo) { margin-bottom: 12px; } @container (max-width: 719px) { .crm-cuenta[data-forma=fila] .crm-cuenta-cuerpo { grid-template-areas: "identidad saldo" "clase clase"; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding-block: 12px; } .crm-cuenta[data-forma=fila] .crm-iban { grid-template-columns: minmax(0, max-content); } } @container (max-width: 399px) { .crm-cuenta-cuerpo, .crm-cuenta[data-forma=fila] .crm-cuenta-cuerpo { grid-template-areas: "identidad" "saldo" "clase"; grid-template-columns: minmax(0, 1fr); } .crm-cuenta-saldo { justify-items: start; text-align: left; } } .crm-sincro { container-type: inline-size; display: grid; gap: 8px; min-width: 0; color: var(--crm-text); } .crm-sincro-fila { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; min-height: 32px; } .crm-sincro-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; } .crm-sincro-meta { display: flex; flex-wrap: wrap; gap: 0 8px; min-width: 0; color: var(--crm-muted); font-size: 13px; line-height: 20px; } .crm-sincro-meta > * + *::before { content: "\b7"; margin-right: 8px; color: var(--crm-dim); } .crm-sincro-manual { display: flex; flex: none; align-items: center; gap: 12px; } .crm-sincro-cupo { display: inline-flex; align-items: center; gap: 8px; color: var(--crm-muted); font-size: 12px; line-height: 16px; white-space: nowrap; } .crm-cupo-marcas { display: inline-flex; flex: none; gap: 4px; } .crm-cupo-marca { position: relative; width: 4px; height: 14px; border: 1px solid var(--crm-linea-apagada); } .crm-cupo-marca::after { content: ""; position: absolute; inset: -1px; background: var(--crm-text-2); transform-origin: bottom; transition: scale var(--crm-t-gesto) var(--crm-snap); } .crm-cupo-marca[data-gastada]::after { scale: 1 0; } .crm-cupo-marcas[data-desconocido] .crm-cupo-marca { border-color: var(--crm-line); } .crm-cupo-marcas[data-desconocido] .crm-cupo-marca::after { background: var(--crm-esqueleto-b); } .crm-sincro[data-estado=en-curso] .crm-cupo-marca::after { background: var(--crm-text); } .crm-sincro-nota { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: start; gap: 4px 8px; padding-left: 12px; border-left: 2px solid var(--crm-line-2); } .crm-sincro[data-estado=limitada] .crm-sincro-nota { border-left-color: var(--crm-aviso-linea); } .crm-sincro:is([data-estado=error], [data-estado=caducada]) .crm-sincro-nota { border-left-color: var(--crm-error-linea); } .crm-sincro-nota-icono { display: grid; place-items: center; height: 20px; color: var(--crm-muted); } .crm-sincro-nota-icono svg { width: 16px; height: 16px; stroke-width: 1.6; } .crm-sincro[data-estado=limitada] .crm-sincro-nota-icono { color: var(--crm-aviso); } .crm-sincro:is([data-estado=error], [data-estado=caducada]) .crm-sincro-nota-icono { color: var(--crm-error); } .crm-sincro-nota-texto { max-width: 68ch; margin: 0; color: var(--crm-text-2); font-size: 13px; line-height: 20px; } .crm-sincro-nota-accion { display: flex; margin-top: -4px; } @container (max-width: 559px) { .crm-sincro-fila { flex-direction: column; align-items: stretch; } .crm-sincro-manual { justify-content: space-between; } .crm-sincro-nota { grid-template-columns: 16px minmax(0, 1fr); } .crm-sincro-nota-accion { grid-column: 2; margin-top: 4px; } } @container (max-width: 399px) { .crm-sincro-meta { display: grid; } .crm-sincro-meta > * + *::before { content: none; } } .crm-sello-zona { display: inline-grid; justify-items: start; gap: 12px; min-width: 0; max-width: 100%; } .crm-sello { position: relative; display: grid; gap: 4px; min-width: 240px; max-width: 100%; padding: 16px 20px 20px; border: 1px solid var(--crm-line-2); background: var(--crm-panel); } .crm-sello::before { content: ""; position: absolute; inset: 2px; border: 1px solid var(--crm-line); pointer-events: none; } .crm-sello-rotulo { overflow: hidden; margin: 0; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; letter-spacing: 0.06em; line-height: 16px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .crm-sello-cifra { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 0; } .crm-sello-numero { color: var(--crm-text); font-size: 28px; font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -0.035em; line-height: 32px; } .crm-sello-unidad { color: var(--crm-muted); font-size: 16px; line-height: 20px; } .crm-sello-pie { margin: 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-sello-regla { position: relative; height: 2px; margin-top: 12px; background: var(--crm-line-2); } .crm-sello-regla::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--crm-sello-resto, 1) * 100%); background: var(--crm-text-2); } .crm-sello-mes { position: absolute; top: -2px; left: calc(var(--crm-sello-mes) * 100%); width: 1px; height: 6px; background: var(--crm-panel); box-shadow: inset 0 0 0 1px var(--crm-line-2); } .crm-sello-zona[data-estado=por-caducar] .crm-sello { border-color: var(--crm-aviso-linea); } .crm-sello-zona[data-estado=por-caducar] .crm-sello-numero { color: var(--crm-aviso); } .crm-sello-zona[data-estado=por-caducar] .crm-sello-regla::before { background: var(--crm-aviso); } .crm-sello-zona[data-estado=caducada] .crm-sello { border-color: var(--crm-error-linea); } .crm-sello-zona[data-estado=caducada] .crm-sello-numero { color: var(--crm-error); } .crm-sello-zona[data-estado=sin-fecha] .crm-sello-numero { color: var(--crm-dim); } .crm-sello-renovar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .crm-sello-renovar-nota { color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-conectar-marco { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 640px; border: 1px solid var(--crm-line); background: var(--crm-bg); color: var(--crm-text); font-family: var(--crm-sans); } .crm-conectar-marco[data-pantalla-completa] { position: fixed; z-index: 41; inset: 0; min-height: 0; overflow-y: auto; border: 0; } .crm-conectar-marco:focus-visible { outline: none; } .crm-conectar { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; min-height: 100%; } .crm-conectar-cabecera { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 768px) minmax(0, 1fr); align-items: center; gap: 24px; padding: 12px 24px; } .crm-conectar-cabecera .crm-conectar-pasos { grid-column: 2; } .crm-conectar-salir { grid-column: 3; justify-self: end; } .crm-conectar-pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; } .crm-conectar-paso { display: grid; gap: 6px; min-width: 0; } .crm-conectar-paso-tramo { height: 2px; background: var(--crm-line-2); transition: background-color var(--crm-t-gesto) var(--crm-snap); } .crm-conectar-paso[data-estado=actual] .crm-conectar-paso-tramo { background: var(--crm-text-2); } .crm-conectar-paso[data-estado=hecho] .crm-conectar-paso-tramo { background: var(--crm-acento); } .crm-conectar-paso-nombre { overflow: hidden; color: var(--crm-dim); font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; } .crm-conectar-paso[data-estado=actual] .crm-conectar-paso-nombre { color: var(--crm-text); } .crm-conectar-paso[data-estado=hecho] .crm-conectar-paso-nombre { color: var(--crm-muted); } .crm-conectar-centro { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; justify-items: center; gap: 32px; padding: 40px 24px; padding-top: max(40px, round(down, 12vh, 4px)); } .crm-conectar-centro > * { width: min(768px, 100%); } .crm-conectar-pregunta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; text-align: center; } .crm-conectar-titulo { margin: 0; color: var(--crm-text); font-size: 28px; font-weight: 500; letter-spacing: -0.03em; line-height: 34px; text-wrap: balance; } .crm-conectar-ayuda { max-width: 68ch; margin: 0 auto; color: var(--crm-muted); font-size: 15px; line-height: 24px; text-wrap: pretty; } .crm-conectar-rotulo { overflow: hidden; margin: 0; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; letter-spacing: 0.06em; line-height: 16px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .crm-conectar-buscador { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } .crm-conectar-lista { max-height: 400px; overflow-y: auto; border: 1px solid var(--crm-line); background: var(--crm-panel); } .crm-conectar-lista:empty { display: none; } .crm-conectar-lista .crm-conectar-rotulo { padding: 12px 16px 4px; } .crm-conectar-banco { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 16px; align-items: center; gap: 12px; position: relative; min-height: 64px; padding: 0 16px; cursor: pointer; transition: background-color var(--crm-t-salida) linear; } .crm-conectar-banco + .crm-conectar-banco::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--crm-line); } .crm-conectar-banco[aria-selected=true] { background: var(--crm-panel-2); transition-duration: 0ms; } .crm-conectar-banco-texto { display: grid; min-width: 0; } .crm-conectar-banco-nombre { overflow: hidden; color: var(--crm-text); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; line-height: 22px; text-overflow: ellipsis; white-space: nowrap; } .crm-conectar-banco-meta { display: flex; gap: 8px; min-width: 0; overflow: hidden; color: var(--crm-muted); font-size: 12px; line-height: 16px; white-space: nowrap; } .crm-conectar-banco-meta > :last-child { overflow: hidden; text-overflow: ellipsis; } .crm-conectar-banco-codigo { color: var(--crm-dim); font-family: var(--crm-mono); font-variant-numeric: tabular-nums; } .crm-conectar-banco-flecha, .crm-conectar-ficha-flecha { width: 16px; height: 16px; color: var(--crm-dim); stroke-width: 1.6; transition: translate var(--crm-t-gesto) var(--crm-snap), color var(--crm-t-salida) linear; } .crm-conectar-banco[aria-selected=true] .crm-conectar-banco-flecha { color: var(--crm-text); translate: 2px 0; } .crm-conectar-cargando { display: grid; gap: 1px; } .crm-conectar-fichas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .crm-conectar-ficha { display: grid; grid-template-areas: "icono flecha" "titulo titulo" "detalle detalle"; grid-template-columns: minmax(0, 1fr) 16px; align-content: start; gap: 8px; margin: 0; padding: 20px; border: 1px solid var(--crm-line-2); border-radius: 0; background: var(--crm-panel); color: var(--crm-text); font: inherit; text-align: left; cursor: pointer; transition: background-color var(--crm-t-salida) linear, border-color var(--crm-t-salida) linear; } .crm-conectar-ficha-icono { display: grid; grid-area: icono; place-items: center start; height: 20px; color: var(--crm-muted); } .crm-conectar-ficha-icono svg { width: 16px; height: 16px; stroke-width: 1.6; } .crm-conectar-ficha-flecha { grid-area: flecha; align-self: center; } .crm-conectar-ficha-titulo { grid-area: titulo; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; line-height: 22px; } .crm-conectar-ficha-detalle { grid-area: detalle; color: var(--crm-muted); font-size: 13px; line-height: 20px; } .crm-conectar-ficha:hover, [data-crm-forzar~=hover] .crm-conectar-ficha { border-color: var(--crm-control); background: var(--crm-panel-2); transition-duration: 0ms; } .crm-conectar-ficha:is(:hover, :focus-visible) .crm-conectar-ficha-flecha, [data-crm-forzar~=hover] .crm-conectar-ficha .crm-conectar-ficha-flecha { color: var(--crm-text); translate: 2px 0; } .crm-conectar-ficha:active, [data-crm-forzar~=pulsado] .crm-conectar-ficha { background: var(--crm-panel-3); translate: 0 0.5px; } .crm-conectar-ficha:focus-visible, [data-crm-forzar~=foco] .crm-conectar-ficha { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-conectar-ficha[aria-checked=true] { border-color: var(--crm-line-2); background: var(--crm-panel-3); box-shadow: inset 2px 0 0 var(--crm-acento); } .crm-conectar-ficha[aria-disabled=true] { border-color: var(--crm-linea-apagada); background: transparent; color: var(--crm-dim); cursor: not-allowed; } .crm-conectar-ficha[aria-disabled=true] :is(.crm-conectar-ficha-icono, .crm-conectar-ficha-detalle) { color: var(--crm-dim); } .crm-conectar-autorizar { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 24px; } .crm-conectar-puente { display: grid; grid-template-columns: 48px minmax(64px, 1fr) 48px; align-items: center; width: min(336px, 100%); } .crm-conectar-puente-c { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--crm-line-2); background: var(--crm-panel); } .crm-conectar-puente-iso { width: 26px; height: 12px; background: var(--crm-text); -webkit-mask: var(--crm-isotipo) center / contain no-repeat; mask: var(--crm-isotipo) center / contain no-repeat; } .crm-conectar-puente-linea { display: flex; min-width: 0; height: 24px; } .crm-conectar-puente-tramo { position: relative; flex: 1; box-sizing: border-box; height: 1px; margin-top: 11px; border-top: 1px dashed var(--crm-line-2); } .crm-conectar-puente[data-estado=esperando] .crm-conectar-puente-tramo { border-top-style: solid; } .crm-conectar-puente[data-estado=esperando] .crm-conectar-puente-tramo::after { content: ""; position: absolute; inset: -1px 0 auto; height: 1px; background: linear-gradient( 90deg, transparent, var(--crm-luz) 50%, transparent) no-repeat; background-position: -40% 0; background-size: 40% 100%; animation: crm-filo-continuo var(--crm-t-corriente) linear infinite; } .crm-conectar-puente[data-estado=hecho] .crm-conectar-puente-tramo { border-top: 1px solid var(--crm-acento); } .crm-conectar-puente[data-estado=fallo] .crm-conectar-puente-tramo { border-top-color: var(--crm-error-linea); } .crm-conectar-puente-visto { display: grid; flex: none; place-items: center; box-sizing: border-box; width: 24px; height: 24px; border: 1px solid var(--crm-acento); background: var(--crm-bg); } .crm-conectar-notas { display: grid; justify-items: center; gap: 8px; } .crm-conectar-guia { display: grid; gap: 12px; width: min(440px, 100%); margin: 0; padding: 0; list-style: none; } .crm-conectar-guia li { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 12px; color: var(--crm-text-2); font-size: 15px; line-height: 24px; } .crm-conectar-guia-num { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--crm-line-2); color: var(--crm-muted); font-family: var(--crm-mono); font-size: 12px; font-variant-numeric: tabular-nums; line-height: 16px; } .crm-conectar-guia-con-icono { display: inline-flex; align-items: center; gap: 8px; } .crm-conectar-guia-con-icono svg { width: 16px; height: 16px; color: var(--crm-muted); stroke-width: 1.6; } .crm-conectar-guia[data-esperando] li { color: var(--crm-muted); } .crm-conectar-garantia, .crm-conectar-nota { display: inline-flex; align-items: center; justify-content: center; gap: 8px; max-width: 68ch; margin: 0; color: var(--crm-muted); font-size: 13px; line-height: 20px; text-align: center; } .crm-conectar-garantia svg { flex: none; width: 14px; height: 14px; stroke-width: 1.5; } .crm-conectar-hecho { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 32px; } .crm-conectar-celebracion { display: grid; justify-items: center; gap: 16px; } .crm-conectar-visto { width: 16px; height: 16px; fill: none; stroke: var(--crm-acento); stroke-linecap: square; stroke-width: 1.6; } .crm-conectar-visto path { stroke-dasharray: 1; stroke-dashoffset: 0; animation: crm-conectar-visto var(--crm-t-dibujo) var(--crm-curva) both; } .crm-conectar-cifra { display: flex; align-items: baseline; gap: 8px; margin: 0; } .crm-conectar-cifra-numero { color: var(--crm-text); font-size: 40px; font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -0.035em; line-height: 44px; } .crm-conectar-cifra-unidad { color: var(--crm-muted); font-size: 24px; line-height: 28px; } .crm-conectar-resguardo { display: grid; gap: 12px; width: min(480px, 100%); padding: 20px; border: 1px solid var(--crm-line); background: var(--crm-panel); } .crm-conectar-resguardo-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .crm-conectar-resguardo-lineas { display: grid; margin: 0; padding: 0; list-style: none; } .crm-conectar-resguardo-linea { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 16px; padding: 12px 0; border-top: 1px dashed var(--crm-line-2); } .crm-conectar-resguardo-cuenta { display: grid; min-width: 0; } .crm-conectar-resguardo-nombre { overflow: hidden; color: var(--crm-text); font-size: 13px; font-weight: 500; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; } .crm-conectar-resguardo-importe { color: var(--crm-text); font-size: 13px; font-variant-numeric: tabular-nums; line-height: 20px; white-space: nowrap; } .crm-conectar-resguardo-total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0; padding-top: 12px; border-top: 1px solid var(--crm-line-2); color: var(--crm-muted); font-size: 13px; line-height: 20px; } .crm-conectar-resguardo-total-cifra { color: var(--crm-text); font-size: 20px; font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -0.035em; line-height: 24px; white-space: nowrap; } .crm-conectar-resguardo-pie { margin: 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-conectar-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(768px, calc(100% - 48px)); margin: 0 auto; padding: 16px 0 24px; border-top: 1px solid var(--crm-line); } .crm-conectar-pie-izquierda { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; } .crm-conectar-planb { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 4px; min-width: 0; } .crm-conectar-planb-pregunta { color: var(--crm-muted); font-size: 13px; line-height: 20px; } .crm-conectar-pie-derecha { display: flex; flex: none; } .crm-conectar-pie:not(:has(.crm-boton)) { border-top-color: transparent; } @container (max-width: 1023px) { .crm-conectar-cabecera { grid-template-columns: minmax(0, 1fr) auto; } .crm-conectar-cabecera .crm-conectar-pasos { grid-column: 1; } .crm-conectar-salir { grid-column: 2; } } @container (max-width: 719px) { .crm-conectar-cabecera { padding: 12px 16px; } .crm-conectar-centro { align-content: start; gap: 24px; padding: 24px 16px; } .crm-conectar-titulo { font-size: 24px; line-height: 32px; } .crm-conectar-pie { width: calc(100% - 32px); } } @container (max-width: 559px) { .crm-conectar-fichas { grid-template-columns: minmax(0, 1fr); } .crm-conectar-pie { flex-direction: column-reverse; align-items: stretch; } .crm-conectar-pie-derecha, .crm-conectar-pie-derecha .crm-boton { width: 100%; } .crm-conectar-pie-izquierda { justify-content: center; } .crm-conectar-banco { grid-template-columns: 32px minmax(0, 1fr) auto; } .crm-conectar-banco-flecha { display: none; } } @container (max-width: 399px) { .crm-conectar-paso:not([data-estado=actual]) .crm-conectar-paso-nombre { visibility: hidden; } .crm-conectar-paso[data-estado=actual] .crm-conectar-paso-nombre { overflow: visible; } .crm-conectar-salir .crm-boton-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .crm-conectar-resguardo { padding: 16px; } } @keyframes crm-conectar-visto { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .crm-iban-numero, .crm-iban[data-copiado] .crm-iban-numero { gap: 6px; transition: none; } .crm-cupo-marca::after, .crm-conectar-paso-tramo, .crm-conectar-banco-flecha, .crm-conectar-ficha-flecha { transition: none; } .crm-conectar-banco[aria-selected=true] .crm-conectar-banco-flecha, .crm-conectar-ficha:is(:hover, :focus-visible) .crm-conectar-ficha-flecha { translate: none; } .crm-conectar-puente[data-estado=esperando] .crm-conectar-puente-tramo { border-top-color: var(--crm-acento-linea); } .crm-conectar-puente[data-estado=esperando] .crm-conectar-puente-tramo::after { content: none; } .crm-conectar-visto path { animation: none; } } @media print { .crm-conectar-puente[data-estado=esperando] .crm-conectar-puente-tramo::after { content: none; } .crm-conectar-visto path { animation: none; } } :where([data-crm-estatico]) .crm-conectar-visto path { animation: none; } :where([data-crm-estatico]) .crm-conectar-puente[data-estado=esperando] .crm-conectar-puente-tramo { border-top-color: var(--crm-acento-linea); } :where([data-crm-estatico]) .crm-conectar-puente[data-estado=esperando] .crm-conectar-puente-tramo::after { content: none; } @media (forced-colors: active) { .crm-cupo-marca::after { background: CanvasText; } .crm-cupo-marca[data-gastada]::after { scale: 1 0; } .crm-sello-regla::before, .crm-conectar-paso[data-estado=hecho] .crm-conectar-paso-tramo { background: Highlight; } .crm-conectar-puente-iso { background: CanvasText; } .crm-conectar-ficha[aria-checked=true] { outline: 2px solid Highlight; } } .crm-bid-placa { display: block; grid-area: placa; min-width: 0; } .crm-bid-placa .crm-banco-marca[data-tamano] { display: grid; width: 100%; height: 64px; } .crm-bid-placa .crm-banco-marca[data-tamano] .crm-banco-marca-logo { width: min(160px, calc(100% - 32px)); height: 28px; padding: 0; object-fit: contain; } .crm-bid-placa .crm-banco-marca[data-tamano] .crm-banco-marca-monograma { font-size: 20px; line-height: 28px; } .crm-bid-placa[data-forma=fila] { flex: none; width: 96px; } .crm-bid-placa[data-forma=fila] .crm-banco-marca[data-tamano] { height: 48px; } .crm-bid-placa[data-forma=fila] .crm-banco-marca[data-tamano] .crm-banco-marca-logo { width: 72px; height: 24px; } .crm-bid-placa[data-forma=fila] .crm-banco-marca[data-tamano] .crm-banco-marca-monograma { font-size: 15px; line-height: 22px; } .crm-bid-placa[data-forma=resumen] .crm-banco-marca[data-tamano] { height: 96px; } .crm-bid-placa[data-forma=resumen] .crm-banco-marca[data-tamano] .crm-banco-marca-logo { width: min(200px, calc(100% - 48px)); height: 40px; } .crm-bid-placa[data-forma=resumen] .crm-banco-marca[data-tamano] .crm-banco-marca-monograma { font-size: 28px; line-height: 34px; } .crm-bid-iban { display: inline-flex; flex: none; font-family: var(--crm-mono); font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: 0; line-height: 16px; } .crm-bid-iban > [aria-hidden] { display: inline-flex; gap: 4px; } .crm-bid-iban-oculto { color: var(--crm-dim); } .crm-bid-iban-codigo { color: var(--crm-text-2); } .crm-bid-iban[data-resaltar] .crm-bid-iban-codigo { color: var(--crm-text); text-decoration: underline 1px; text-underline-offset: 4px; } .crm-bid-matricula-marco { container-type: inline-size; display: block; width: 100%; min-width: 0; } .crm-bid-matricula { display: inline-grid; grid-auto-columns: auto; grid-auto-flow: column; justify-self: start; max-width: 100%; gap: 1px; border: 1px solid var(--crm-line-2); background: var(--crm-line); } .crm-bid-matricula-celda { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 12px; background: var(--crm-panel); } .crm-bid-matricula-valor { color: var(--crm-dim); font-family: var(--crm-mono); font-size: 13px; font-variant-numeric: tabular-nums; letter-spacing: 0; line-height: 20px; white-space: nowrap; } .crm-bid-matricula-celda[data-pieza=pais] .crm-bid-matricula-valor { color: var(--crm-muted); } .crm-bid-matricula-rotulo { color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; letter-spacing: 0.06em; line-height: 16px; text-transform: uppercase; white-space: nowrap; } .crm-bid-matricula-celda[data-pieza=entidad] { background: var(--crm-panel-2); } .crm-bid-matricula-celda[data-con-valor] .crm-bid-matricula-valor { color: var(--crm-text-2); } .crm-bid-matricula[data-estado=reconocido] .crm-bid-matricula-celda[data-pieza=entidad] .crm-bid-matricula-valor { color: var(--crm-text); } .crm-bid-matricula[data-estado=reconocido] .crm-bid-matricula-celda[data-pieza=entidad] .crm-bid-matricula-rotulo { color: var(--crm-acento); } .crm-bid-matricula[data-estado=reconocido] .crm-bid-matricula-celda[data-pieza=entidad]::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: var(--crm-acento); pointer-events: none; } @container (max-width: 559px) { .crm-bid-matricula { grid-auto-flow: row; grid-template-columns: repeat(3, auto); } } .crm-bid-iban-nota { max-width: 68ch; margin: 0; color: var(--crm-muted); font-size: 13px; line-height: 20px; text-wrap: pretty; } .crm-bid-iban-nota[data-tono=hecho] { color: var(--crm-text-2); } .crm-bid-iban-nota[data-tono=error] { color: var(--crm-error); } .crm-bid-ficha { position: relative; box-sizing: border-box; width: 100%; min-width: 0; margin: 0; border: 0; border-radius: 0; background: transparent; color: var(--crm-text); font: inherit; text-align: left; cursor: pointer; transition: background-color var(--crm-t-salida) linear, border-color var(--crm-t-salida) linear; } .crm-bid-ficha[data-solo-lectura] { cursor: default; } .crm-bid-ficha-texto { display: grid; grid-area: texto; gap: 2px; min-width: 0; } .crm-bid-ficha-nombre { overflow: hidden; color: var(--crm-text); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; line-height: 22px; text-overflow: ellipsis; white-space: nowrap; } .crm-bid-ficha-meta { display: flex; gap: 8px; min-width: 0; min-height: 16px; overflow: hidden; color: var(--crm-muted); font-size: 12px; line-height: 16px; white-space: nowrap; } .crm-bid-ficha-meta > :not(.crm-bid-iban) { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .crm-bid-ficha-meta > * + *::before { content: "\b7"; margin-right: 8px; color: var(--crm-dim); } .crm-bid-ficha-etiqueta { grid-area: etiqueta; flex: none; } .crm-bid-ficha-icono { grid-area: icono; flex: none; width: 16px; height: 16px; color: var(--crm-dim); stroke-width: 1.6; transition: translate var(--crm-t-gesto) var(--crm-snap), color var(--crm-t-salida) linear; } .crm-bid-ficha-icono[data-visto] { color: var(--crm-acento); } .crm-bid-ficha[data-forma=placa] { display: grid; grid-template-areas: "placa placa" "texto icono"; grid-template-columns: minmax(0, 1fr) 16px; row-gap: 12px; column-gap: 8px; height: 100%; padding: 16px; border: 1px solid var(--crm-line); background: var(--crm-panel); } .crm-bid-ficha[data-forma=placa] .crm-bid-ficha-meta { display: grid; gap: 2px; min-height: 34px; } .crm-bid-ficha[data-forma=placa] .crm-bid-ficha-meta > * + *::before { content: none; } .crm-bid-ficha[data-forma=placa] .crm-bid-ficha-meta > :not(.crm-bid-iban) { white-space: nowrap; } .crm-bid-ficha[data-forma=fila][aria-disabled=true] .crm-bid-ficha-meta { flex-wrap: wrap; row-gap: 2px; white-space: normal; } .crm-bid-ficha[data-forma=placa] .crm-bid-ficha-icono { align-self: start; margin-block: 3px; } .crm-bid-ficha-pruebas { color: var(--crm-aviso); } .crm-bid-ficha[data-forma=fila] { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 8px 16px 8px 8px; } .crm-bid-ficha[data-forma=fila] .crm-bid-ficha-texto { flex: 1; } .crm-bid-ficha[data-forma=fila]:has(> .crm-bid-ficha-etiqueta) { container: crm-bid-fila / inline-size; flex-wrap: wrap; row-gap: 4px; } @container crm-bid-fila (max-width: 375px) { .crm-bid-ficha[data-forma=fila] > .crm-bid-ficha-texto { flex-basis: calc(100% - 128px); } .crm-bid-ficha[data-forma=fila] > .crm-bid-ficha-icono { order: 1; } .crm-bid-ficha[data-forma=fila] > .crm-bid-ficha-etiqueta { order: 2; margin-left: 92px; } } .crm-bid-ficha:not([data-solo-lectura], [aria-disabled=true]):hover, [data-crm-forzar~=hover] .crm-bid-ficha:not([data-solo-lectura], [aria-disabled=true]) { background: var(--crm-panel-2); transition-duration: 0ms; } .crm-bid-ficha[data-forma=placa]:not([data-solo-lectura], [aria-disabled=true]):hover, [data-crm-forzar~=hover] .crm-bid-ficha[data-forma=placa]:not([data-solo-lectura], [aria-disabled=true]) { border-color: var(--crm-control); } .crm-bid-ficha:not([aria-disabled=true]):is(:hover, :focus-visible) .crm-bid-ficha-icono:not([data-visto]), [data-crm-forzar~=hover] .crm-bid-ficha .crm-bid-ficha-icono:not([data-visto]) { color: var(--crm-text); translate: 2px 0; } .crm-bid-ficha:not([data-solo-lectura], [aria-disabled=true]):active, [data-crm-forzar~=pulsado] .crm-bid-ficha:not([data-solo-lectura], [aria-disabled=true]) { background: var(--crm-panel-3); } .crm-bid-ficha:focus-visible, [data-crm-forzar~=foco] .crm-bid-ficha { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-bid-ficha[data-forma=fila]:focus-visible, [data-crm-forzar~=foco] .crm-bid-ficha[data-forma=fila] { outline-offset: -1px; } .crm-bid-ficha[data-estado=seleccionada] { background: var(--crm-panel-3); } .crm-bid-ficha[data-estado=seleccionada]::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--crm-acento); pointer-events: none; } .crm-bid-ficha[data-forma=placa][data-estado=seleccionada] { border-color: var(--crm-line-2); } .crm-bid-ficha[aria-disabled=true] { background: transparent; cursor: not-allowed; } .crm-bid-ficha[data-forma=placa][aria-disabled=true] { border-color: var(--crm-linea-apagada); } .crm-bid-ficha[aria-disabled=true] .crm-bid-ficha-nombre { color: var(--crm-dim); } .crm-bid-ficha-motivo { color: var(--crm-muted); } .crm-bid-selector { container-type: inline-size; min-width: 0; color: var(--crm-text); } .crm-bid-hoja { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 1024px; margin-inline: auto; } .crm-bid-cabecera { display: grid; gap: 8px; } .crm-bid-rotulo { overflow: hidden; margin: 0; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.06em; line-height: 16px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .crm-bid-titulo { margin: 0; color: var(--crm-text); font-size: 28px; font-weight: 500; letter-spacing: -0.03em; line-height: 34px; text-wrap: balance; } .crm-bid-mandos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } .crm-bid-barra { display: flex; align-items: center; min-height: 48px; } .crm-bid-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; min-width: 0; } .crm-bid-grupo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; } .crm-bid-placas, .crm-bid-filas { margin: 0; padding: 0; list-style: none; } .crm-bid-placas { display: grid; gap: 16px; } .crm-bid-placas[data-columnas="1"] { grid-template-columns: minmax(0, 1fr); } .crm-bid-placas[data-columnas="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .crm-bid-placas[data-columnas="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .crm-bid-placas[data-columnas="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } .crm-bid-placas[data-columnas=auto] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); } .crm-bid-item { position: relative; min-width: 0; } .crm-bid-filas { display: grid; grid-template-columns: minmax(0, 1fr); border-block: 1px solid var(--crm-line); } .crm-bid-filas > .crm-bid-item + .crm-bid-item::before { content: ""; position: absolute; z-index: 1; inset: 0 0 auto; height: 1px; background: var(--crm-line); pointer-events: none; } .crm-bid-paginas { display: flex; align-items: center; justify-content: center; gap: 16px; padding-top: 4px; } .crm-bid-paginas .crm-boton[data-tamano], .crm-bid-pie .crm-bid-planb[data-tamano], .crm-bid-elegido-acciones .crm-boton[data-tamano], .crm-bid-selector .crm-aviso .crm-boton[data-tamano], .crm-bid-selector .crm-vacio .crm-boton[data-tamano] { font-size: 15px; line-height: 22px; } .crm-bid-mandos .crm-entrada[data-tamano] { --crm-entrada-alto: 48px; } @media (pointer: fine) { .crm-bid-mandos .crm-entrada[data-tamano] { font-size: 15px; line-height: 22px; } } .crm-bid-paginas .crm-boton[data-tamano], .crm-bid-pie .crm-bid-planb[data-tamano], .crm-bid-elegido-acciones .crm-boton[data-tamano], .crm-bid-selector .crm-aviso .crm-boton[data-tamano], .crm-bid-selector .crm-vacio .crm-boton[data-tamano] { --crm-boton-alto: 48px; } .crm-bid-mandos .crm-entrada .crm-entrada-accion::after { content: ""; position: absolute; inset: -12px; } .crm-bid-barra .crm-conmutador[data-tamano] { --crm-conm-alto: 48px; --crm-conm-relleno: 16px; } .crm-bid-barra .crm-conmutador[data-tamano] .crm-conmutador-opcion { font-size: 15px; line-height: 22px; } .crm-bid-barra .crm-conmutador[data-tamano] .crm-conmutador-opcion::after { content: ""; position: absolute; inset: -2px 0; } .crm-bid-paginas-rango { min-width: 0; color: var(--crm-muted); font-size: 12px; font-variant-numeric: tabular-nums; line-height: 16px; white-space: nowrap; } .crm-bid-cargando { display: grid; gap: 32px; } .crm-bid-filas-esqueleto { display: grid; gap: 1px; } .crm-bid-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding-top: 16px; border-top: 1px solid var(--crm-line); } .crm-bid-nota { max-width: 68ch; margin: 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; text-wrap: pretty; } .crm-bid-planb { margin-left: auto; } @container (min-width: 720px) { .crm-bid-filas, .crm-bid-filas-esqueleto { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } .crm-bid-filas > .crm-bid-item:nth-child(2)::before { content: none; } } @container (max-width: 719px) { .crm-bid-titulo { font-size: 24px; line-height: 32px; } .crm-bid-placas[data-columnas="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container (max-width: 559px) { .crm-bid-hoja { gap: 24px; } .crm-bid-placas[data-columnas="3"] { grid-template-columns: minmax(0, 1fr); } .crm-bid-planb { margin-left: 0; } .crm-bid-barra .crm-conmutador[data-tamano] { display: flex; width: 100%; --crm-conm-relleno: 10px; } .crm-bid-barra .crm-conmutador[data-tamano] .crm-conmutador-opcion { flex: 1 0 auto; } .crm-bid-paginas { flex-wrap: wrap; gap: 12px; } .crm-bid-paginas-rango { order: -1; width: 100%; text-align: center; } } @container (max-width: 399px) { .crm-bid-placas { gap: 12px; } .crm-bid-ficha[data-forma=placa] { padding: 12px; row-gap: 8px; } .crm-bid-ficha[data-forma=placa] .crm-bid-placa .crm-banco-marca[data-tamano] { height: 48px; } .crm-bid-ficha[data-forma=placa] .crm-bid-placa .crm-banco-marca[data-tamano] .crm-banco-marca-logo { width: min(112px, calc(100% - 24px)); height: 24px; } .crm-bid-ficha[data-forma=fila] { gap: 12px; padding-right: 12px; } .crm-bid-placa[data-forma=fila] { width: 80px; } .crm-bid-placa[data-forma=fila] .crm-banco-marca[data-tamano] { height: 40px; } .crm-bid-placa[data-forma=fila] .crm-banco-marca[data-tamano] .crm-banco-marca-logo { width: 64px; height: 20px; } } .crm-bid-elegido { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; width: min(400px, 100%); margin-inline: auto; color: var(--crm-text); } .crm-bid-elegido-ticket { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 24px; border: 1px solid var(--crm-line-2); border-bottom-style: dashed; background: var(--crm-panel); animation: crm-bid-entra var(--crm-t-entrada) var(--crm-snap); } .crm-bid-elegido-ticket > .crm-bid-placa { grid-area: auto; } .crm-bid-elegido-identidad { display: grid; gap: 4px; min-width: 0; } .crm-bid-elegido-nombre { margin: 0; overflow-wrap: anywhere; color: var(--crm-text); font-size: 20px; font-weight: 500; letter-spacing: -0.02em; line-height: 28px; } .crm-bid-elegido-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-bid-elegido-meta > * + *::before { content: "\b7"; margin-right: 8px; color: var(--crm-dim); } .crm-bid-elegido-nota { margin: 0; padding-top: 12px; border-top: 1px solid var(--crm-line); color: var(--crm-muted); font-size: 13px; line-height: 20px; } .crm-bid-elegido-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } @keyframes crm-bid-entra { from { opacity: 0; translate: 0 4px; } } @media (prefers-reduced-motion: reduce) { .crm-bid-ficha, .crm-bid-ficha-icono { transition-property: background-color, border-color, color; } .crm-bid-ficha:not([aria-disabled=true]):is(:hover, :focus-visible) .crm-bid-ficha-icono:not([data-visto]), [data-crm-forzar~=hover] .crm-bid-ficha .crm-bid-ficha-icono:not([data-visto]) { translate: none; } .crm-bid-elegido-ticket { animation: none; } } @media (forced-colors: active) { .crm-bid-ficha[data-estado=seleccionada]::after, .crm-bid-matricula[data-estado=reconocido] .crm-bid-matricula-celda[data-pieza=entidad]::after { forced-color-adjust: none; background: Highlight; } .crm-bid-ficha[aria-disabled=true] .crm-bid-ficha-nombre { color: GrayText; } } .crm-bcx { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; border: 1px solid var(--crm-line); background: var(--crm-panel); color: var(--crm-text); } .crm-bcx-cabecera { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 16px 20px; } .crm-bcx-identidad { display: grid; flex: 1; gap: 2px; min-width: 0; } .crm-bcx-nombre { display: flex; min-width: 0; margin: 0; color: var(--crm-text); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; line-height: 22px; } .crm-bcx-nombre-texto { overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; } .crm-bcx-nombre-texto:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-bcx-cabecera > .crm-etiqueta { flex: none; } .crm-bcx-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 16px 24px; padding: 20px; border-top: 1px solid var(--crm-line); } .crm-bcx-cuerpo > :only-child { grid-column: 1 / -1; } .crm-bcx-ahora { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; min-height: 64px; padding: 8px 20px; border-top: 1px solid var(--crm-line); } .crm-bcx-ahora-texto { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: first baseline; column-gap: 16px; min-width: 0; } .crm-bcx-ahora-rotulo { margin: 0; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; letter-spacing: 0.06em; line-height: 16px; text-transform: uppercase; } .crm-bcx-ahora-frase { display: block; min-width: 0; max-width: 68ch; margin: 0; color: var(--crm-text-2); font-size: 14px; line-height: 22px; text-wrap: pretty; } .crm-bcx-ahora-accion { display: grid; } .crm-bcx-ahora-accion .crm-boton[data-tamano] { --crm-boton-alto: 48px; font-size: 15px; line-height: 22px; } @container (max-width: 559px) { .crm-bcx-cuerpo { grid-template-columns: minmax(0, 1fr); } .crm-bcx-ahora[data-con-accion] { grid-template-columns: minmax(0, 1fr); padding-bottom: 16px; } } @container (max-width: 399px) { .crm-bcx-cabecera, .crm-bcx-cuerpo { padding-inline: 16px; } .crm-bcx-cabecera { flex-wrap: wrap; gap: 12px; } .crm-bcx-cabecera > .crm-bcx-identidad { flex-basis: calc(100% - 92px); } .crm-bcx-cabecera > .crm-etiqueta { margin-left: 92px; } .crm-bcx-ahora { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-inline: 16px; } .crm-bcx-ahora-texto { grid-template-columns: minmax(0, 1fr); row-gap: 4px; } } .crm-bcx-lectura-col { display: grid; gap: 8px; min-width: 0; } .crm-bcx[data-cupo-grande] .crm-bcx-lectura .crm-sincro-manual, .crm-bcx[data-manual-en-pausa] .crm-bcx-lectura .crm-sincro-manual { display: none; } .crm-bcx-cupo { margin: 0; overflow-wrap: anywhere; color: var(--crm-text-2); font-size: 13px; font-variant-numeric: tabular-nums; line-height: 20px; } .crm-bcx-permiso-compacto { display: grid; gap: 4px; min-width: 0; max-width: 100%; padding: 16px 20px; border: 1px solid var(--crm-line-2); background: var(--crm-panel); } .crm-bcx-permiso-rotulo { overflow: hidden; margin: 0; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; letter-spacing: 0.06em; line-height: 16px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .crm-bcx-permiso-cifra { margin: 0; overflow-wrap: anywhere; color: var(--crm-text); font-size: 24px; font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -0.035em; line-height: 28px; } .crm-bcx-permiso-compacto[data-estado=por-caducar] .crm-bcx-permiso-cifra { color: var(--crm-aviso); } .crm-bcx-permiso-compacto[data-estado=caducada] .crm-bcx-permiso-cifra { color: var(--crm-error); } .crm-bcx-permiso-pie { margin: 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-documental { container: crm-documental / inline-size; min-width: 0; color: var(--crm-text); font-family: var(--crm-sans); font-size: 13px; line-height: 20px; border-radius: 0; } .crm-documental *, .crm-documental *::before, .crm-documental *::after { box-sizing: border-box; } .crm-documental :where(h3, h4, p, dl, dd, dt, ol, ul) { margin: 0; } .crm-documental :where(h3, h4, p, dd, dt, li, span, time) { min-width: 0; overflow-wrap: anywhere; } .crm-documental :where(h3) { font-size: 15px; line-height: 22px; font-weight: 500; letter-spacing: -0.01em; } .crm-documental :where(h4) { font-size: 13px; line-height: 20px; font-weight: 500; } .crm-documental svg { flex: none; width: 16px; height: 16px; stroke-width: 1.6; } .crm-documental .crm-boton { max-width: 100%; } .crm-doc-rotulo { font-family: var(--crm-mono); font-size: 11px; line-height: 16px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--crm-muted); } .crm-doc-referencia, .crm-doc-codigo, .crm-doc-numero, .crm-doc-cuenta { font-family: var(--crm-mono); font-variant-numeric: tabular-nums; } .crm-doc-referencia { color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-doc-estado, .crm-doc-motivo, .crm-doc-lectura { color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-doc-lectura { padding: 12px 16px; border-bottom: 1px solid var(--crm-line); } .crm-doc-estado[data-estado=listo], .crm-doc-listo { color: var(--crm-acento); } .crm-doc-estado[data-estado=rechazado] { color: var(--crm-error); } .crm-doc-estado[data-estado=por-revisar], .crm-doc-estado[data-estado=sin-confirmar] { color: var(--crm-aviso); } .crm-doc-grupo-titulo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--crm-line); } .crm-doc-cuenta { font-size: 12px; line-height: 16px; color: var(--crm-muted); } .crm-doc-cuenta[data-atencion] { color: var(--crm-acento); } .crm-doc-folios { list-style: none; padding: 0; } .crm-doc-folio { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: 4px 12px; width: 100%; min-height: 64px; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--crm-line); border-radius: 0; background: transparent; color: var(--crm-text); text-align: start; font-family: var(--crm-sans); cursor: pointer; transition: background-color var(--crm-t-color) var(--crm-curva); } .crm-doc-folio-nombre { font-size: 13px; line-height: 20px; font-weight: 500; } .crm-doc-folio-detalle { grid-column: 1 / 3; color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-doc-folio > svg { grid-column: 3; grid-row: 1 / 3; color: var(--crm-muted); transition: transform var(--crm-t-gesto) var(--crm-snap); } .crm-doc-folio[data-elegido] { background: var(--crm-panel-3); } .crm-doc-folio[data-elegido]::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--crm-acento); } .crm-doc-folio:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: -1px; } .crm-doc-folio:active { background: var(--crm-panel-3); } @media (hover: hover) { .crm-doc-folio:hover { background: var(--crm-panel-2); transition-duration: 0s; } .crm-doc-folio:hover > svg { transform: translateX(2px); } .crm-doc-folio[data-elegido]:hover { background: var(--crm-panel-3); } } .crm-doc-papel, .crm-doc-manifiesto, .crm-doc-resguardo { position: relative; background: var(--crm-panel); border: 1px solid var(--crm-line); } .crm-doc-papel::before { content: ""; position: absolute; top: 0; right: 0; width: 16px; height: 16px; background: var(--crm-panel-2); clip-path: polygon(0 0, 100% 100%, 0 100%); } .crm-doc-cabecera { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px; border-bottom: 1px solid var(--crm-line); } .crm-doc-cabecera > h3 { max-width: 100%; } .crm-doc-campos { padding: 0 20px; } .crm-doc-campo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px 24px; padding: 16px 0; border-bottom: 1px solid var(--crm-line); } .crm-doc-campo:last-child { border-bottom: 0; } .crm-doc-campo > dd { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 22px; } .crm-doc-campo[data-pendiente] > dt { border-left: 2px solid var(--crm-aviso); padding-left: 8px; } .crm-doc-frenos { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--crm-line); } .crm-doc-original { padding: 16px 20px; border-top: 1px solid var(--crm-line); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .crm-doc-enlace { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: 13px; line-height: 20px; color: var(--crm-text); text-decoration: underline; text-underline-offset: 4px; } .crm-doc-enlace:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-doc-enlace:active { color: var(--crm-text-2); } .crm-doc-visor { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .crm-doc-visor-pdf { width: 100%; aspect-ratio: 210 / 297; border: 1px solid var(--crm-line); background: var(--crm-bg); } .crm-doc-visor-pdf:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: -1px; } .crm-doc-visor-imagen { display: block; max-width: 100%; height: auto; object-fit: contain; border: 1px solid var(--crm-line); } .crm-doc-visor > .crm-doc-espera { padding: 8px 0; } .crm-doc-manifiesto-folios { list-style: none; padding: 0 20px; } .crm-doc-manifiesto-folio { display: grid; grid-template-columns: 24px minmax(0, 1fr) 16px; gap: 12px; padding: 20px 0; border-top: 1px solid var(--crm-line); } .crm-doc-numero { font-size: 12px; line-height: 20px; color: var(--crm-muted); } .crm-doc-manifiesto-dato { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .crm-doc-folio-icono { color: var(--crm-muted); } .crm-doc-pendientes { padding-left: 16px; font-size: 12px; line-height: 16px; color: var(--crm-aviso); display: flex; flex-direction: column; gap: 8px; } .crm-doc-listo { display: flex; gap: 6px; align-items: center; font-size: 12px; line-height: 16px; } .crm-doc-listo > svg { width: 14px; height: 14px; stroke-width: 1.5; } .crm-doc-resguardo { border-bottom: 1px dashed var(--crm-line-2); } .crm-doc-resguardo[data-estado=confirmado] { border-top: 2px solid var(--crm-acento); } .crm-doc-codigo { font-size: 20px; line-height: 28px; font-weight: 500; user-select: text; } .crm-doc-resguardo-folios { padding: 16px 20px 16px 40px; font-size: 12px; line-height: 16px; border-top: 1px solid var(--crm-line); color: var(--crm-muted); } .crm-doc-resguardo > .crm-doc-motivo { padding: 16px 20px; } .crm-doc-aviso { display: flex; align-items: flex-start; gap: 8px; padding: 12px 16px; border-left: 2px solid var(--crm-aviso); color: var(--crm-text-2); font-size: 13px; line-height: 20px; } .crm-doc-aviso[data-error] { border-left-color: var(--crm-error-linea); } .crm-doc-aviso > svg { color: var(--crm-aviso); margin-top: 2px; } .crm-doc-aviso[data-error] > svg { color: var(--crm-error); } .crm-doc-aviso > div { min-width: 0; } .crm-doc-aviso > div > .crm-boton { margin-top: 8px; } .crm-doc-acciones { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; padding: 20px; border-top: 1px solid var(--crm-line); } .crm-doc-acciones > p { align-self: stretch; } .crm-doc-espera { display: flex; align-items: center; gap: 8px; padding: 16px 20px; color: var(--crm-muted); font-size: 13px; line-height: 20px; } .crm-doc-espera > svg { color: var(--crm-luz); } .crm-doc-vacio { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px 20px; } .crm-doc-vacio > svg { width: 20px; height: 20px; color: var(--crm-muted); } .crm-doc-vacio > p { color: var(--crm-muted); max-width: 68ch; } @container crm-documental (max-width: 720px) { .crm-doc-cabecera, .crm-doc-acciones { padding: 16px; } .crm-doc-campos, .crm-doc-manifiesto-folios { padding-inline: 16px; } .crm-doc-frenos, .crm-doc-original { padding-inline: 16px; } .crm-doc-campo { column-gap: 16px; } } @container crm-documental (max-width: 400px) { .crm-doc-campo { grid-template-columns: minmax(0, 1fr); } .crm-doc-folio { grid-template-columns: minmax(0, 1fr) 16px; } .crm-doc-folio > .crm-doc-estado { grid-column: 1; } .crm-doc-folio-detalle { grid-column: 1; } .crm-doc-folio > svg { grid-column: 2; grid-row: 1 / 4; } .crm-doc-acciones { align-items: stretch; } .crm-doc-manifiesto-folio { grid-template-columns: 24px minmax(0, 1fr); } .crm-doc-folio-icono { display: none; } } @media (prefers-reduced-motion: reduce) { .crm-doc-folio > svg { transition: none; transform: none; } } @media (forced-colors: active) { .crm-doc-folio[data-elegido]::before { background: Highlight; } .crm-doc-folio:focus-visible, .crm-doc-enlace:focus-visible { outline-color: Highlight; } .crm-doc-papel::before { background: Canvas; } } .crm-marco-contenido:has(> .crm-ini), .crm-marco-contenido:has(> .crm-marca > .crm-ini) { display: flex; flex: 1 1 0px; flex-direction: column; padding-bottom: 0; } .crm-marco-contenido > .crm-marca:has(> .crm-ini) { flex: none; display: flex; flex-direction: column; height: calc(100dvh - var(--crm-marco-arriba, 44px) - var(--crm-marco-abajo, 32px)); } .crm-marco-contenido > .crm-marca > .crm-ini { flex: 1 1 auto; height: 100%; } .crm-marco-contenido > .crm-ini { flex: none; height: calc(100dvh - var(--crm-marco-arriba, 44px) - var(--crm-marco-abajo, 32px)); } .crm-ini { --crm-ini-vidrio: color-mix(in srgb, var(--crm-panel) 82%, transparent); --crm-ini-hueco: 12px; position: relative; flex: 1 1 auto; min-height: 0; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--crm-bg); color: var(--crm-text); font-family: var(--crm-sans); font-size: 13px; line-height: 1.45; container: crm-ini / inline-size; } .crm-ini *, .crm-ini *::before, .crm-ini *::after { box-sizing: border-box; } :where(.crm-ini) :where(h1, h2, h3, p, ol, ul, dl, dd) { margin: 0; padding: 0; } :where(.crm-ini) :where(ol, ul) { list-style: none; } :where(.crm-ini) :where(a) { color: inherit; text-decoration: none; } :where(.crm-ini) :where(svg) { fill: none; stroke: currentColor; stroke-width: 1.5; } .crm-ini-rotulo { font: 500 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--crm-dim); } .crm-ini-tenue { color: var(--crm-dim); } .crm-ini-verde { color: var(--crm-acento); } .crm-ini-punto { position: relative; display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--crm-acento); } .crm-ini-vivo { box-shadow: 0 0 0 3px var(--crm-acento-suave); } .crm-ini-vivo::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--crm-acento); animation: crm-latido var(--crm-t-latido) ease-out infinite; } .crm-ini-filo { position: relative; } .crm-ini-filo::before { content: ""; position: absolute; z-index: 1; inset: -1px -1px auto; height: 1px; background: linear-gradient( 90deg, transparent, var(--crm-acento) 50%, transparent) no-repeat -40% 0 / 40% 100%; opacity: 0; pointer-events: none; } .crm-ini-escena { position: relative; isolation: isolate; overflow: hidden; min-height: 0; display: grid; grid-template-columns: minmax(248px, 1fr) minmax(420px, 1.7fr) minmax(248px, 1fr); gap: clamp(16px, 2.2cqi, 36px); padding: clamp(12px, 2.2vh, 22px) clamp(14px, 1.6cqi, 24px); } .crm-ini-fondo { -webkit-mask-image: linear-gradient( 180deg, black 72%, transparent 100%); mask-image: linear-gradient( 180deg, black 72%, transparent 100%); } .crm-ini-ala { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); gap: var(--crm-ini-hueco); align-content: start; } .crm-ini-ala-cab { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0 2px; white-space: nowrap; } .crm-ini-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .crm-ini-kpi { position: relative; display: block; border: 1px solid var(--crm-line); background: var(--crm-ini-vidrio); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: border-color var(--crm-t-color) var(--crm-snap), background-color var(--crm-t-color) var(--crm-snap); } .crm-ini-kpi-dentro { display: grid; align-content: start; gap: 2px; padding: 11px 12px 12px; min-width: 0; } .crm-ini-kpi:hover { border-color: var(--crm-line-2); background: color-mix(in srgb, var(--crm-panel-2) 90%, transparent); } .crm-ini-kpi:hover::before { opacity: 1; animation: crm-filo calc(var(--crm-t-filo) * 2) var(--crm-curva) 1 both; } .crm-ini-kpi:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; } .crm-ini-kpi-cab { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12px; line-height: 16px; color: var(--crm-text-2); } .crm-ini-kpi-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-ini-estado { flex: none; width: 6px; height: 6px; background: var(--crm-control); } .crm-ini-estado[data-estado=bien] { background: var(--crm-acento); } .crm-ini-estado[data-estado=atencion] { background: var(--crm-aviso); } .crm-ini-estado[data-estado=frenado] { background: var(--crm-error); } .crm-ini-tendencia { margin-left: auto; font: 500 11px/16px var(--crm-mono); letter-spacing: 0; color: var(--crm-dim); white-space: nowrap; transition: opacity var(--crm-t-color); } .crm-ini-tendencia[data-tono=sube], .crm-ini-tendencia[data-tono=acento] { color: var(--crm-acento); } .crm-ini-tendencia[data-tono=aviso] { color: var(--crm-aviso); } .crm-ini-kpi-fila { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin-top: 6px; } .crm-ini-kpi-cifra { font: 500 24px/28px var(--crm-sans); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; white-space: nowrap; } .crm-ini-kpi-fila .crm-ini-tendencia { overflow: hidden; min-width: 0; text-overflow: ellipsis; } .crm-ini-kpi-unidad { overflow: hidden; font: 400 11px/16px var(--crm-mono); color: var(--crm-dim); text-overflow: ellipsis; white-space: nowrap; } .crm-ini-abrir { position: absolute; top: 12px; right: 10px; width: 12px; height: 12px; color: var(--crm-text); opacity: 0; transform: translate(-3px, 3px); transition: opacity var(--crm-t-color), transform var(--crm-t-gesto) var(--crm-snap); } .crm-ini-kpi:hover .crm-ini-abrir, .crm-ini-kpi:focus-visible .crm-ini-abrir { opacity: 1; transform: none; } .crm-ini-kpi:has([data-estado=frenado].crm-ini-kpi-dentro) { border-color: var(--crm-error-linea); background: linear-gradient(var(--crm-error-suave), transparent 85%), var(--crm-ini-vidrio); } .crm-ini-kpi-dentro[data-estado=frenado] .crm-ini-kpi-cifra { color: var(--crm-error); } .crm-ini-kpi-accion { display: inline-flex; gap: 6px; align-items: center; justify-self: start; margin-top: 4px; font: 500 12px/16px var(--crm-sans); color: var(--crm-error); } .crm-ini-kpi-accion i { font-style: normal; transition: transform var(--crm-t-gesto) var(--crm-snap); } .crm-ini-kpi:hover .crm-ini-kpi-accion i { transform: translateX(3px); } .crm-ini-hoja { position: relative; min-height: 0; overflow: hidden; display: grid; align-content: start; gap: 10px; padding: 12px 14px 14px; border: 1px solid var(--crm-line); background: var(--crm-ini-vidrio); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: border-color var(--crm-t-color); } .crm-ini-hoja:hover { border-color: var(--crm-line-2); } .crm-ini-hoja-estirar { grid-template-rows: auto auto minmax(0, 1fr); } .crm-ini-hoja-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .crm-ini-hoja-abrir { font: 400 11px/16px var(--crm-mono); color: var(--crm-dim); transition: color var(--crm-t-color); } .crm-ini-hoja-abrir:hover { color: var(--crm-text); } .crm-ini-hoja-cifra { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; } .crm-ini-hoja-cifra strong { font: 500 24px/28px var(--crm-sans); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; } .crm-ini-hoja-cifra span { font: 400 11px/16px var(--crm-mono); color: var(--crm-dim); } .crm-ini-hoja-cifra .crm-ini-tendencia { margin-left: auto; } .crm-ini-hoja-nota { font-size: 12px; line-height: 17px; color: var(--crm-muted); } .crm-ini-hoja-nota[hidden] { display: none; } .crm-ini-hoja-nota b { font-weight: 500; color: var(--crm-text-2); } .crm-ini-barra { display: flex; gap: 2px; height: 8px; } .crm-ini-barra i { display: block; min-width: 2px; height: 100%; background: var(--crm-ini-c); transform-origin: left; } .crm-ini[data-encendida] .crm-ini-barra i { animation: crm-ini-crecer var(--crm-t-dibujo) var(--crm-snap) both; } @keyframes crm-ini-crecer { from { transform: scaleX(0); } } .crm-ini-leyenda { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 16px; } .crm-ini-leyenda li { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12px; line-height: 17px; color: var(--crm-muted); } .crm-ini-leyenda span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-ini-leyenda i { flex: none; width: 6px; height: 6px; background: var(--crm-ini-c); } .crm-ini-leyenda b { margin-left: auto; font-weight: 400; color: var(--crm-text-2); font-variant-numeric: tabular-nums; } .crm-ini [data-tono=acento] { --crm-ini-c: var(--crm-acento); } .crm-ini [data-tono=aviso] { --crm-ini-c: var(--crm-aviso); } .crm-ini [data-tono=texto] { --crm-ini-c: var(--crm-text-2); } .crm-ini [data-tono=error] { --crm-ini-c: var(--crm-error); } .crm-ini [data-tono=apagado] { --crm-ini-c: var(--crm-linea-apagada); } .crm-ini-calendario { display: grid; align-content: start; overflow: hidden; min-height: 0; } .crm-ini-calendario li[hidden] { display: none; } .crm-ini-cal-fila { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--crm-line); transition: background-color var(--crm-t-color); } a.crm-ini-cal-fila:hover { background: color-mix(in srgb, var(--crm-panel-2) 60%, transparent); } .crm-ini-dia { display: grid; justify-items: center; padding: 2px 0 3px; border: 1px solid var(--crm-line-2); border-top: 3px solid var(--crm-line-2); background: var(--crm-panel-2); line-height: 1; } .crm-ini-dia b { font: 500 14px/16px var(--crm-sans); font-variant-numeric: tabular-nums; } .crm-ini-dia small { font: 500 11px/12px var(--crm-mono); letter-spacing: 0; letter-spacing: .06em; text-transform: uppercase; color: var(--crm-dim); } .crm-ini-calendario li[data-pronto] .crm-ini-dia { border-top-color: var(--crm-aviso); } .crm-ini-cal-txt { display: grid; min-width: 0; } .crm-ini-cal-txt > span { overflow: hidden; font-size: 12px; line-height: 16px; color: var(--crm-text-2); text-overflow: ellipsis; white-space: nowrap; } .crm-ini-cal-txt small { overflow: hidden; font: 400 11px/15px var(--crm-mono); color: var(--crm-dim); text-overflow: ellipsis; white-space: nowrap; } .crm-ini-cal-txt small b { font-weight: 400; color: var(--crm-text-2); } .crm-ini-calendario li[data-pronto] .crm-ini-cal-txt small b { color: var(--crm-aviso); } .crm-ini-cal-cifra { font: 500 13px/16px var(--crm-sans); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .crm-ini-grafico { display: block; width: 100%; overflow: visible; } .crm-ini-grafico text { fill: var(--crm-dim); stroke: none; font: 400 10px var(--crm-mono); letter-spacing: .04em; text-transform: uppercase; } .crm-ini-barras rect { fill: var(--crm-line-2); stroke: none; transition: fill var(--crm-t-color); } .crm-ini-barras g[data-mayor] rect { fill: var(--crm-text-2); } .crm-ini-barras rect[data-curso] { stroke: var(--crm-control); stroke-width: 1; } .crm-ini-rayado-fondo { fill: var(--crm-panel); stroke: none; } .crm-ini-rayado-linea { stroke: var(--crm-control); stroke-width: 1.5; } .crm-ini-barras g:hover rect { fill: var(--crm-acento); } .crm-ini-barras .crm-ini-valor { fill: var(--crm-text-2); opacity: 0; transition: opacity var(--crm-t-color); } .crm-ini-barras g[data-mayor] .crm-ini-valor, .crm-ini-barras g:hover .crm-ini-valor { opacity: 1; } .crm-ini-barras g:hover ~ g[data-mayor] .crm-ini-valor { opacity: 0; } .crm-ini-curva text[data-hoy] { fill: var(--crm-text-2); } .crm-ini-eje { stroke: var(--crm-line); stroke-width: 1; } .crm-ini-sombra-alta { stop-color: var(--crm-text-2); stop-opacity: .14; } .crm-ini-sombra-baja { stop-color: var(--crm-text-2); stop-opacity: 0; } .crm-ini-sombra { stroke: none; } .crm-ini-hoy { stroke: var(--crm-line-2); stroke-width: 1; stroke-dasharray: 2 3; } .crm-ini-pasado { fill: none; stroke: var(--crm-text-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .crm-ini-futuro { fill: none; stroke: var(--crm-control); stroke-width: 1.5; stroke-dasharray: 3 3; } .crm-ini-halo { fill: var(--crm-aviso); stroke: none; opacity: .18; } .crm-ini-punto-hoy { fill: var(--crm-aviso); stroke: none; } .crm-ini-centro { container: crm-ini-centro / inline-size; min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto auto; justify-items: center; align-content: safe center; gap: clamp(14px, 2.8vh, 30px); padding-bottom: clamp(0px, 1.6vh, 20px); } .crm-ini-voz, .crm-ini-plan, .crm-ini-pregunta, .crm-ini-ala-cab, .crm-ini-vehiculo { position: relative; } .crm-ini-voz::after, .crm-ini-plan::after, .crm-ini-pregunta::after, .crm-ini-ala-cab::after, .crm-ini-vehiculo::after { content: ""; position: absolute; z-index: -1; inset: -24px -32px; background: var(--crm-bg); pointer-events: none; -webkit-mask-image: linear-gradient( 90deg, transparent, black 32px, black calc(100% - 32px), transparent), linear-gradient( 180deg, transparent, black 24px, black calc(100% - 24px), transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient( 90deg, transparent, black 32px, black calc(100% - 32px), transparent), linear-gradient( 180deg, transparent, black 24px, black calc(100% - 24px), transparent); mask-composite: intersect; } .crm-ini-voz[data-pendiente] { visibility: hidden; } .crm-ini-voz { display: grid; justify-items: center; gap: 14px; width: 100%; max-width: 760px; text-align: center; } .crm-ini-lectura { display: block; max-width: 100%; min-height: 16px; font: 400 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; text-align: center; text-wrap: balance; color: var(--crm-dim); } .crm-ini-lectura > .crm-ini-punto { margin-right: 10px; vertical-align: 1px; } .crm-ini-lectura > .crm-ini-fuente + .crm-ini-fuente { margin-left: 10px; } .crm-ini-fuente { color: var(--crm-dim); opacity: .55; transition: color var(--crm-t-color), opacity var(--crm-t-color); } .crm-ini-fuente[data-estado=ahora] { color: var(--crm-text); opacity: 1; } .crm-ini-fuente[data-estado=ok] { color: var(--crm-dim); opacity: 1; } .crm-ini-fuente[data-estado=ok]::before { content: "\2713 "; color: var(--crm-acento); } .crm-ini-fuente[data-estado=falla] { color: var(--crm-error); opacity: 1; text-decoration: line-through; } .crm-ini-falla { color: var(--crm-error); } .crm-ini-titular { min-height: 2.08em; font-size: 56px; font-weight: 500; line-height: 1.04; letter-spacing: -0.04em; text-wrap: balance; } .crm-ini-resumen { min-height: 3.1em; max-width: 64ch; font-size: 15px; line-height: 1.55; color: var(--crm-muted); text-wrap: pretty; } .crm-ini-resumen b { font-weight: 500; color: var(--crm-text); } .crm-ini-cursor { display: inline-block; width: .5em; height: .9em; margin-left: 2px; vertical-align: -0.08em; background: var(--crm-acento); animation: crm-ini-parpadeo calc(var(--crm-t-panel) * 4) steps(1) infinite; } @keyframes crm-ini-parpadeo { 50% { opacity: 0; } } .crm-ini-plan { width: 100%; max-width: 760px; } .crm-ini-plan-cab { display: flex; align-items: center; gap: 16px; padding-bottom: 8px; } .crm-ini-plan-cab { white-space: nowrap; } .crm-ini-plan-cab > .crm-ini-tenue { overflow: hidden; text-overflow: ellipsis; } .crm-ini-empezar { flex: none; margin-left: auto; } .crm-ini-empezar { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border: 1px solid var(--crm-acento-linea); background: var(--crm-acento-suave); color: var(--crm-text); font: 500 12px var(--crm-sans); cursor: pointer; transition: background-color var(--crm-t-color), border-color var(--crm-t-color), transform var(--crm-t-pulsar); } .crm-ini-empezar:hover { border-color: var(--crm-acento); background: color-mix(in srgb, var(--crm-acento) 20%, transparent); } .crm-ini-empezar:active { transform: scale(.98); } .crm-ini-empezar:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; } .crm-ini-empezar-icono { width: 0; height: 0; border-block: 4px solid transparent; border-left: 6px solid var(--crm-acento); } .crm-ini-carril { position: relative; display: grid; } .crm-ini-carril::before { content: ""; position: absolute; top: 24px; bottom: 24px; left: 11px; width: 1px; background: linear-gradient( var(--crm-acento-linea), var(--crm-line-2) 35%, var(--crm-line-2)); } .crm-ini-paso { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 0 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--crm-line); } .crm-ini-paso:last-child { border-bottom: 1px solid var(--crm-line); } .crm-ini-nodo { position: relative; z-index: 1; display: grid; place-items: center; align-self: start; width: 23px; height: 24px; margin-top: 2px; border: 1px solid var(--crm-line-2); background: var(--crm-bg); font: 500 10px var(--crm-mono); color: var(--crm-dim); } .crm-ini-paso[data-principal] .crm-ini-nodo { border-color: var(--crm-acento); background: var(--crm-acento); color: var(--crm-sobre-acento); } .crm-ini-paso[data-principal] .crm-ini-nodo::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--crm-acento); animation: crm-ini-halo var(--crm-t-latido) ease-out infinite; } @keyframes crm-ini-halo { from { inset: -1px; opacity: .7; } to { inset: -7px; opacity: 0; } } .crm-ini-paso[data-resultado=hecho] .crm-ini-nodo { border-color: var(--crm-acento-linea); color: var(--crm-acento); } .crm-ini-paso[data-resultado=hecho] h3 { color: var(--crm-dim); text-decoration: line-through; text-decoration-color: var(--crm-line-2); } .crm-ini-paso-txt { display: grid; gap: 1px; min-width: 0; } .crm-ini-motivo { font: 500 11px/14px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--crm-dim); } .crm-ini-motivo[data-tono=aviso] { color: var(--crm-aviso); } .crm-ini-motivo[data-tono=acento], .crm-ini-paso[data-resultado=hecho] .crm-ini-motivo { color: var(--crm-acento); } .crm-ini-paso-txt h3 { overflow: hidden; font-size: 15px; font-weight: 500; line-height: 21px; letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; } .crm-ini-paso-linea { display: flex; align-items: baseline; gap: 12px; min-width: 0; } .crm-ini-paso-linea p { overflow: hidden; min-width: 0; font-size: 12px; line-height: 17px; color: var(--crm-muted); text-overflow: ellipsis; white-space: nowrap; } .crm-ini-porque { display: inline-flex; flex: none; align-items: center; gap: 5px; padding: 0; border: 0; background: none; font: 400 11px/16px var(--crm-mono); color: var(--crm-dim); cursor: pointer; transition: color var(--crm-t-color); } .crm-ini-porque:hover, .crm-ini-paso[data-abierto] .crm-ini-porque { color: var(--crm-text); } .crm-ini-porque i { display: inline-block; font-style: normal; transition: transform var(--crm-t-gesto) var(--crm-snap); } .crm-ini-paso[data-abierto] .crm-ini-porque i { transform: rotate(90deg); } .crm-ini-paso-der { display: flex; align-items: center; gap: 16px; } .crm-ini-paso-cifra { display: grid; text-align: right; } .crm-ini-paso-cifra strong { font: 500 16px/20px var(--crm-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; } .crm-ini-paso-cifra span { font: 400 11px/14px var(--crm-mono); color: var(--crm-dim); white-space: nowrap; } .crm-ini-boton { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 132px; height: 32px; padding: 0 12px; border: 1px solid var(--crm-line-2); background: var(--crm-bg); color: var(--crm-text); font: 500 13px var(--crm-sans); white-space: nowrap; cursor: pointer; transition: background-color var(--crm-t-color), border-color var(--crm-t-color), color var(--crm-t-color), transform var(--crm-t-pulsar); } .crm-ini-boton:hover { border-color: var(--crm-control); background: var(--crm-panel); } .crm-ini-boton:active { transform: scale(.98); } .crm-ini-boton:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; } .crm-ini-boton i { font-style: normal; color: var(--crm-dim); transition: transform var(--crm-t-gesto) var(--crm-snap), color var(--crm-t-color); } .crm-ini-boton:hover i { color: inherit; transform: translateX(3px); } .crm-ini-boton-principal { border-color: var(--crm-boton); background: var(--crm-boton); color: var(--crm-boton-tinta); } .crm-ini-boton-principal i { color: inherit; opacity: .55; font: 500 11px var(--crm-mono); } .crm-ini-boton-principal:hover { border-color: var(--crm-acento); background: var(--crm-acento); color: var(--crm-sobre-acento); } .crm-ini-paso[data-resultado=hecho] .crm-ini-boton { opacity: .6; } .crm-ini-razon { position: absolute; z-index: 8; top: calc(100% - 4px); right: 0; left: 38px; visibility: hidden; border: 1px solid var(--crm-line-2); background: var(--crm-panel-2); box-shadow: var(--crm-sombra-capa); opacity: 0; transform: translateY(-4px); transition: opacity var(--crm-t-panel) var(--crm-snap), transform var(--crm-t-panel) var(--crm-snap), visibility 0s linear var(--crm-t-panel); } .crm-ini-razon::before { content: ""; position: absolute; inset: -1px -1px auto; height: 1px; background: linear-gradient( 90deg, transparent, var(--crm-acento) 50%, transparent) no-repeat -40% 0 / 40% 100%; } .crm-ini-paso[data-abierto] .crm-ini-razon { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; } .crm-ini-paso[data-abierto] .crm-ini-razon::before { animation: crm-filo calc(var(--crm-t-filo) * 1.5) var(--crm-curva) 1 both; } .crm-ini-paso:last-child .crm-ini-razon { top: auto; bottom: calc(100% - 4px); transform: translateY(4px); } .crm-ini-razon dl, .crm-ini-foco-recomienda dl { display: grid; gap: 6px; padding: 14px 16px; font-size: 12px; line-height: 18px; color: var(--crm-text-2); } .crm-ini-razon dl > div, .crm-ini-foco-recomienda dl > div { display: grid; grid-template-columns: 80px 1fr; gap: 14px; } .crm-ini-razon dt, .crm-ini-foco-recomienda dt { font: 500 10px/18px var(--crm-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--crm-dim); } .crm-ini-pregunta { display: grid; gap: 10px; width: 100%; max-width: 760px; } .crm-ini-ideas { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } .crm-ini-idea { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 11px; border: 1px solid var(--crm-line); background: var(--crm-ini-vidrio); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--crm-text-2); font: 400 12px var(--crm-sans); text-align: left; cursor: pointer; transition: border-color var(--crm-t-color), color var(--crm-t-color); } .crm-ini-idea svg { flex: none; width: 14px; height: 14px; color: var(--crm-acento); } .crm-ini-idea span { white-space: nowrap; } .crm-ini-idea i { font-style: normal; color: var(--crm-dim); transition: transform var(--crm-t-gesto) var(--crm-snap), color var(--crm-t-color); } .crm-ini-idea:hover { border-color: var(--crm-line-2); color: var(--crm-text); } .crm-ini-idea:hover i { color: var(--crm-acento); transform: translateX(3px); } .crm-ini-idea:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; } .crm-ini-pie { position: relative; z-index: 2; display: flex; justify-content: center; padding: 6px 16px; border-top: 1px solid var(--crm-line); background: var(--crm-bg); } .crm-ini-atajos { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; } .crm-ini-atajo { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 9px 0 4px; border: 0; background: none; color: var(--crm-muted); font: 400 12px var(--crm-sans); white-space: nowrap; cursor: pointer; transition: color var(--crm-t-color), background-color var(--crm-t-color); } .crm-ini-atajo:hover, .crm-ini-atajo-caja[data-pulsada] .crm-ini-atajo { background: var(--crm-panel); color: var(--crm-text); } .crm-ini-atajo:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: -1px; } .crm-ini-tecla { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--crm-line-2); border-bottom-width: 2px; background: var(--crm-panel-2); font: 500 11px var(--crm-mono); color: var(--crm-muted); transition: color var(--crm-t-color), border-color var(--crm-t-color), transform var(--crm-t-pulsar); } .crm-ini-atajo:hover .crm-ini-tecla { border-color: var(--crm-control); color: var(--crm-text); } .crm-ini-atajo-caja[data-pulsada] .crm-ini-tecla { transform: translateY(1px); border-bottom-width: 1px; border-color: var(--crm-acento-linea); color: var(--crm-acento); } .crm-ini-pregunta { position: relative; } .crm-ini-respuesta { position: absolute; z-index: 9; right: 0; bottom: calc(100% + 8px); left: 0; max-height: min(52vh, 460px); overflow: auto; display: grid; gap: 10px; padding: 14px 16px 12px; border: 1px solid var(--crm-line-2); background: var(--crm-panel-2); box-shadow: var(--crm-sombra-capa); animation: crm-ini-sube var(--crm-t-capa) var(--crm-snap) both; } @keyframes crm-ini-sube { from { opacity: 0; transform: translateY(6px); } } .crm-ini-respuesta::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient( 90deg, transparent, var(--crm-acento) 50%, transparent) no-repeat -40% 0 / 40% 100%; } .crm-ini-respuesta[data-estado=pensando]::before { animation: crm-filo-continuo var(--crm-t-filo) var(--crm-curva) infinite; } .crm-ini-respuesta-cab { display: flex; align-items: baseline; gap: 12px; } .crm-ini-respuesta[data-estado=lista] .crm-ini-respuesta-cab .crm-ini-rotulo { color: var(--crm-acento); } .crm-ini-respuesta[data-estado=error] .crm-ini-respuesta-cab .crm-ini-rotulo { color: var(--crm-error); } .crm-ini-respuesta-pregunta { flex: 1; min-width: 0; overflow: hidden; font-size: 13px; color: var(--crm-text-2); text-overflow: ellipsis; white-space: nowrap; } .crm-ini-respuesta-cerrar { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid transparent; background: none; color: var(--crm-dim); cursor: pointer; transition: border-color var(--crm-t-color), color var(--crm-t-color); } .crm-ini-respuesta-cerrar svg { width: 12px; height: 12px; } .crm-ini-respuesta-cerrar:hover { border-color: var(--crm-line-2); color: var(--crm-text); } .crm-ini-respuesta-texto { font-size: 14px; line-height: 1.5; color: var(--crm-text); white-space: pre-line; } .crm-ini-respuesta-items { display: grid; } .crm-ini-respuesta-item { display: grid; gap: 1px; padding: 7px 0; border-top: 1px solid var(--crm-line); } .crm-ini-respuesta-item span { font-size: 13px; color: var(--crm-text-2); } .crm-ini-respuesta-item small { font: 400 11px/15px var(--crm-mono); color: var(--crm-dim); } a.crm-ini-respuesta-item:hover span { color: var(--crm-text); } .crm-ini-respuesta-pie { display: flex; justify-content: flex-end; } .crm-ini-foco { display: grid; gap: 16px; } .crm-ini-foco-recomienda { position: relative; display: grid; gap: 6px; padding: 14px 16px 2px 18px; border: 1px solid var(--crm-line); background: var(--crm-panel); } .crm-ini-foco-recomienda::before { content: ""; position: absolute; top: -1px; bottom: -1px; left: -1px; width: 2px; background: var(--crm-acento); } .crm-ini-foco-recomienda > p { font-size: 15px; line-height: 1.5; color: var(--crm-text); } .crm-ini-foco-recomienda dl { padding: 6px 0 12px; } .crm-ini-foco-ficha { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); border-top: 1px solid var(--crm-line); border-left: 1px solid var(--crm-line); } .crm-ini-foco-ficha > div { display: grid; align-content: start; gap: 2px; padding: 10px 12px; border-right: 1px solid var(--crm-line); border-bottom: 1px solid var(--crm-line); } .crm-ini-foco-ficha > div:first-child { grid-column: 1 / -1; } .crm-ini-foco-ficha > div[data-ancho=doble] { grid-column: span 2; } .crm-ini-foco-ficha > div[data-ancho=doble] dd { font-family: var(--crm-mono); font-size: 13px; } .crm-ini-foco-ficha > div:first-child dd { font-size: 16px; font-weight: 500; } .crm-ini-foco-ficha dt { font: 500 10px/14px var(--crm-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--crm-dim); } .crm-ini-foco-ficha dd { overflow-wrap: anywhere; font-size: 14px; line-height: 20px; color: var(--crm-text); font-variant-numeric: tabular-nums; } .crm-ini-aparece { opacity: 0; transform: translateY(6px); transition: opacity var(--crm-t-capa) var(--crm-snap), transform var(--crm-t-capa) var(--crm-snap); } .crm-ini[data-encendida] .crm-ini-aparece { opacity: 1; transform: none; } .crm-ini[data-encendida] .crm-ini-ala .crm-ini-aparece { transition-delay: var(--crm-t-gesto); } @media (max-height: 960px) { .crm-ini-titular { font-size: 48px; } .crm-ini-resumen { font-size: 14px; } .crm-ini-paso { padding: 9px 0; } } @media (max-height: 860px) { .crm-ini { --crm-ini-hueco: 8px; } .crm-ini-titular { font-size: 40px; } .crm-ini-centro { gap: 14px; } .crm-ini-kpi-dentro { padding: 8px 10px 9px; } .crm-ini-kpi-fila { margin-top: 3px; } .crm-ini-kpi-cifra { font-size: 20px; line-height: 24px; } .crm-ini-hoja { gap: 7px; padding: 10px 12px 11px; } .crm-ini-hoja-cifra strong { font-size: 20px; line-height: 24px; } .crm-ini-cal-fila { padding: 4px 0; } .crm-ini-leyenda li { font-size: 11px; line-height: 15px; } } @media (max-height: 820px) { .crm-ini-centro { gap: 10px; padding-bottom: 0; } .crm-ini-idea { min-height: 32px; } } @media (max-height: 820px) { .crm-ini-ideas { display: none; } } @media (max-height: 740px) { .crm-ini-ideas, .crm-ini-lectura { display: none; } .crm-ini-titular { font-size: 40px; } } @container crm-ini (max-width: 1240px) { .crm-ini-titular { font-size: 40px; } .crm-ini-ala-cab .crm-ini-tenue, .crm-ini-paso-cifra span { display: none; } .crm-ini-boton { min-width: 0; } } @container crm-ini-centro (max-width: 560px) { .crm-ini-plan-cab > .crm-ini-tenue { display: none; } } @container crm-ini (max-width: 820px) { .crm-ini-atajo span { display: none; } .crm-ini-atajo { padding: 0 4px; } } @container crm-ini (max-width: 1000px) { .crm-ini-escena { grid-template-columns: 1fr 1fr; overflow: visible; } .crm-ini-centro { grid-column: 1 / -1; order: -1; padding: 12px 0 20px; } } @container crm-ini (max-width: 640px) { .crm-ini-escena { grid-template-columns: 1fr; padding: 16px; } .crm-ini-titular { font-size: 40px; } .crm-ini-paso { grid-template-columns: 24px minmax(0, 1fr); } .crm-ini-paso-der { grid-column: 2; justify-content: space-between; padding-top: 8px; } .crm-ini-paso-cifra { text-align: left; } .crm-ini-razon { left: 0; } .crm-ini-plan-cab { flex-wrap: wrap; } .crm-ini-atajos { flex-wrap: nowrap; overflow-x: auto; justify-content: start; scrollbar-width: none; } } @media (max-width: 1240px), (max-height: 700px) { .crm-marco-contenido > .crm-ini, .crm-ini { height: auto; } .crm-ini-escena { overflow: visible; } .crm-ini-ala { grid-template-rows: none; } .crm-ini-voz::after, .crm-ini-plan::after, .crm-ini-pregunta::after, .crm-ini-ala-cab::after, .crm-ini-vehiculo::after { inset-inline: -12px; } } .crm-ini[data-pantalla] { height: 100dvh; } .crm-ini-cliente { gap: 12px; } .crm-ini-cliente-rotulo { display: flex; align-items: center; justify-content: center; height: 64px; padding: 8px 12px; border: 1px solid var(--crm-line); background: var(--crm-placa-fondo); forced-color-adjust: none; } .crm-ini-cliente-rotulo img { display: block; max-width: 100%; max-height: 48px; object-fit: contain; } .crm-ini-cliente-id { display: grid; gap: 2px; min-width: 0; } .crm-ini-cliente-id h3 { overflow-wrap: anywhere; font-size: 15px; font-weight: 500; line-height: 22px; letter-spacing: -0.01em; } .crm-ini-cliente-id h3[data-solo] { font-size: 20px; line-height: 28px; letter-spacing: -0.02em; } .crm-ini-cliente-id p { font-size: 12px; line-height: 16px; color: var(--crm-muted); } .crm-ini-cliente-texto { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 5; font-size: 13px; line-height: 20px; color: var(--crm-text-2); } .crm-ini-cliente-etiquetas { display: flex; flex-wrap: wrap; gap: 4px; } .crm-ini-cliente-etiquetas li { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border: 1px solid var(--crm-line-2); font-size: 12px; line-height: 16px; color: var(--crm-text-2); white-space: nowrap; } .crm-ini-cliente-sello { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; padding-top: 12px; border-top: 1px solid var(--crm-line); font: 400 11px/16px var(--crm-mono); color: var(--crm-dim); } .crm-ini-cliente-sello > span:first-child { color: var(--crm-acento); } .crm-ini-cliente-sello a { overflow-wrap: anywhere; color: var(--crm-text-2); transition: color var(--crm-t-color); } .crm-ini-cliente-sello a:hover { color: var(--crm-text); text-decoration: underline; text-decoration-color: var(--crm-line-2); text-underline-offset: 2px; } .crm-ini-lector-abrir { justify-self: start; } .crm-ini-lector { display: grid; gap: 8px; } .crm-ini-lector .crm-entrada { position: relative; } .crm-ini-lector .crm-entrada::after { content: ""; position: absolute; inset: -1px -1px auto; height: 1px; background: linear-gradient( 90deg, transparent, var(--crm-acento) 50%, transparent) no-repeat -40% 0 / 40% 100%; opacity: 0; pointer-events: none; } .crm-ini-lector[data-leyendo] .crm-entrada::after { opacity: 1; animation: crm-filo-continuo var(--crm-t-filo) var(--crm-curva) infinite; } .crm-ini-lector-dominio { font-family: var(--crm-mono); } .crm-ini-lector-dominio b { font-weight: 400; color: var(--crm-text); } .crm-ini-lector-acciones { display: flex; flex-wrap: wrap; gap: 8px; } .crm-ini-pares { display: grid; } .crm-ini-pares > div { display: grid; grid-template-columns: minmax(64px, auto) minmax(0, 1fr); gap: 12px; align-items: center; min-height: 40px; padding: 4px 0; border-top: 1px solid var(--crm-line); } .crm-ini-pares dt { font: 400 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--crm-dim); } .crm-ini-pares dd { display: flex; justify-content: flex-end; min-width: 0; overflow: hidden; font-size: 13px; line-height: 20px; color: var(--crm-text-2); text-align: right; text-overflow: ellipsis; white-space: nowrap; } .crm-ini-pares dd[data-mono] { font-family: var(--crm-mono); font-variant-numeric: tabular-nums; } .crm-ini-vehiculo { display: grid; justify-items: center; gap: 8px; width: 100%; max-width: 760px; } .crm-ini-vehiculo .crm-placa-editor { gap: 8px; } .crm-ini-vehiculo-pie { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(560px, 100%); } .crm-ini-vehiculo-nota { min-width: 0; font: 400 11px/16px var(--crm-mono); color: var(--crm-dim); } .crm-ini-vehiculo-pie > :last-child { margin-left: auto; } .crm-ini-vehiculo .crm-placa::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--crm-acento); opacity: 0; pointer-events: none; } .crm-ini-vehiculo[data-leyendo] .crm-placa::after { opacity: 1; animation: crm-ini-lector var(--crm-t-filo) var(--crm-curva) infinite alternate; } @keyframes crm-ini-lector { from { left: 0; } to { left: calc(100% - 2px); } } @container crm-ini-centro (max-width: 560px) { .crm-ini-vehiculo-pie { flex-direction: column; align-items: stretch; text-align: center; } .crm-ini-vehiculo-pie > :last-child { margin-left: 0; } } @media (max-height: 820px) { .crm-ini-vehiculo > .crm-ini-rotulo { display: none; } } .crm-ini-accesos-caja { width: 100%; max-width: 760px; } .crm-ini-accesos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .crm-ini-accesos > li:last-child:nth-child(odd) { grid-column: 1 / -1; } .crm-ini-acceso { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2px 12px; align-items: center; width: 100%; min-height: 64px; padding: 12px 12px 12px 16px; border: 1px solid var(--crm-line); background: var(--crm-ini-vidrio); color: var(--crm-text); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--crm-t-color), background-color var(--crm-t-color); } .crm-ini-acceso:hover { border-color: var(--crm-line-2); background: color-mix(in srgb, var(--crm-panel-2) 90%, transparent); } .crm-ini-acceso:hover::before { opacity: 1; animation: crm-filo calc(var(--crm-t-filo) * 2) var(--crm-curva) 1 both; } .crm-ini-acceso:active { background: var(--crm-panel-2); } .crm-ini-acceso-icono { display: grid; place-items: center; width: 16px; height: 16px; color: var(--crm-muted); } .crm-ini-acceso-icono svg { width: 16px; height: 16px; stroke-width: 1.6; } .crm-ini-acceso:hover .crm-ini-acceso-icono { color: var(--crm-text); } .crm-ini-acceso-titulo { overflow: hidden; font-size: 15px; font-weight: 500; line-height: 22px; letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; } .crm-ini-acceso-linea { grid-column: 2; overflow: hidden; font-size: 12px; line-height: 16px; color: var(--crm-muted); text-overflow: ellipsis; white-space: nowrap; } .crm-ini-acceso-distintivo { grid-column: 3; font: 400 11px/16px var(--crm-mono); color: var(--crm-dim); white-space: nowrap; } .crm-ini-accesos li[data-pulsada] .crm-ini-tecla { transform: translateY(1px); border-bottom-width: 1px; border-color: var(--crm-acento-linea); color: var(--crm-acento); } .crm-ini-acceso[aria-disabled=true] { border-color: var(--crm-linea-apagada); background: none; color: var(--crm-dim); cursor: not-allowed; } .crm-ini-acceso[aria-disabled=true]:hover::before { animation: none; opacity: 0; } .crm-ini-acceso[aria-disabled=true] .crm-ini-acceso-icono, .crm-ini-acceso[aria-disabled=true] .crm-ini-acceso-linea { color: var(--crm-dim); } @container crm-ini-centro (max-width: 560px) { .crm-ini-accesos { grid-template-columns: minmax(0, 1fr); } } .crm-ini-respuesta-sello { font: 400 11px/16px var(--crm-mono); color: var(--crm-dim); } button.crm-ini-respuesta-item { width: 100%; border: 0; border-top: 1px solid var(--crm-line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } button.crm-ini-respuesta-item:hover span { color: var(--crm-text); } @media (max-width: 1240px), (max-height: 700px) { .crm-ini[data-pantalla] { height: auto; min-height: 100dvh; } } @media (prefers-reduced-motion: reduce) { .crm-ini *, .crm-ini *::before, .crm-ini *::after { animation: none !important; transition-property: color, background-color, border-color, opacity, visibility !important; } .crm-ini-aparece { opacity: 1; transform: none; } .crm-ini-vehiculo[data-leyendo] .crm-placa::after, .crm-ini-lector[data-leyendo] .crm-entrada::after { opacity: 0; } } .crm-ini :is(.crm-ini-porque, .crm-ini-hoja-abrir, .crm-ini-respuesta-cerrar, .crm-ini-empezar, .crm-ini-idea, .crm-ini-boton, .crm-ini-kpi):focus-visible { outline: var(--crm-foco-ancho, 1px) solid var(--crm-acento); outline-offset: 2px; } .crm-ini :is(.crm-ini-acceso):focus-visible { outline: var(--crm-foco-ancho, 1px) solid var(--crm-acento); outline-offset: 2px; } .crm-ini .crm-ini-cliente-sello a:focus-visible { outline: var(--crm-foco-ancho, 1px) solid var(--crm-acento); outline-offset: 2px; } .crm-ini :is(.crm-ini-cal-fila, .crm-ini-respuesta-item, .crm-ini-atajo):focus-visible { outline: var(--crm-foco-ancho, 1px) solid var(--crm-acento); outline-offset: -1px; } .crm-ini-placa-viva { container-type: inline-size; width: 100%; display: flex; align-items: center; gap: 16px; min-width: 0; } .crm-ini-placa-viva .crm-placa { flex: none; } .crm-ini-placa-nota { min-width: 0; color: var(--crm-muted); font-size: 13px; line-height: 20px; } .crm-ini-placa-nota b { color: var(--crm-text); font-weight: 500; } .crm-ini-tecla-mini { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 3px; border: 1px solid var(--crm-line-2); border-bottom-width: 2px; font: 500 10px var(--crm-mono); color: var(--crm-text); vertical-align: -3px; margin-right: 4px; } .crm-compositor-pista [data-tono=error] { color: var(--crm-error); } @container (max-width: 360px) { .crm-ini-placa-nota { display: none; } } .crm-secretario { container: crm-secretario / inline-size; min-width: 0; color: var(--crm-text); font: 400 13px/20px var(--crm-sans); } .crm-secretario *, .crm-secretario *::before, .crm-secretario *::after { box-sizing: border-box; } .crm-secretario :where(h2, h3, h4, p, dl, dd, dt, ol, ul) { margin: 0; } .crm-secretario :where(h2, h3, h4, p, dd, dt, li, span, time) { min-width: 0; overflow-wrap: anywhere; } .crm-secretario :where(h2) { font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -.03em; } .crm-secretario :where(h3) { font-size: 15px; line-height: 22px; font-weight: 500; letter-spacing: -.01em; } .crm-secretario :where(h4) { font-size: 13px; line-height: 20px; font-weight: 500; } .crm-secretario svg { width: 16px; height: 16px; flex: none; stroke-width: 1.6; } .crm-secretario .crm-boton { max-width: 100%; } .crm-sec-rotulo { color: var(--crm-muted); font: 400 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; } .crm-sec-codigo, .crm-sec-numero, .crm-sec-cuenta, .crm-sec-valor { font-family: var(--crm-mono); font-variant-numeric: tabular-nums; } .crm-sec-ayuda { color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-sec-cabecera { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-bottom: 1px solid var(--crm-line); } .crm-sec-identidad { display: flex; flex-wrap: wrap; gap: 12px 24px; } .crm-sec-identidad > div { flex: 1 1 160px; min-width: 0; } .crm-sec-identidad dt { color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-sec-identidad dd { font-size: 13px; line-height: 20px; } .crm-sec-identidad[data-compacta] > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; } .crm-sec-asignacion { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-sec-mesa { border-top: 2px solid var(--crm-acento); } .crm-sec-mesa > .crm-sec-cabecera { padding-inline: 0; } .crm-sec-adelanto { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .crm-sec-salto { min-width: 0; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; max-width: 100%; color: var(--crm-text); font-size: 13px; line-height: 20px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; } .crm-sec-salto-texto { min-width: 0; overflow-wrap: anywhere; } .crm-sec-salto > svg { color: var(--crm-muted); transition: transform var(--crm-t-gesto) var(--crm-snap); } .crm-sec-salto:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-sec-salto:active { color: var(--crm-text-2); } .crm-sec-mesa :where([data-crm-sec-destino]) { outline: none; scroll-margin-top: 64px; } @media (hover: hover) { .crm-sec-salto:hover > svg { transform: translateY(2px); } } .crm-sec-trabajo { display: flex; flex-direction: column; gap: 24px; padding-block: 24px; } .crm-sec-siguiente { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 16px 20px; border-top: 1px solid var(--crm-line); } .crm-sec-siguiente > div:first-child { min-width: 0; display: flex; flex-direction: column; gap: 6px; } .crm-sec-mesa > .crm-sec-siguiente { padding-inline: 0; } .crm-sec-accion { display: flex; align-items: flex-start; flex-direction: column; gap: 8px; } .crm-sec-aviso { display: flex; align-items: flex-start; gap: 8px; color: var(--crm-aviso); padding: 16px 20px; font-size: 13px; line-height: 20px; } .crm-sec-aviso > svg { margin-top: 2px; } .crm-sec-aviso[data-error] { color: var(--crm-error); } .crm-sec-padding { padding: 12px 20px; } .crm-sec-sr { position: absolute; width: 1px; height: 1px; padding: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .crm-sec-cobertura { border-block: 1px solid var(--crm-line); } .crm-sec-cobertura-cabecera { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 16px 20px; } .crm-sec-cuenta { color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-sec-fuentes { list-style: none; padding: 0; } .crm-sec-fuentes > li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 12px; padding: 16px 20px; border-top: 1px solid var(--crm-line); } .crm-sec-fuente-marca { color: var(--crm-muted); padding-top: 2px; } .crm-sec-fuentes > li[data-estado=leida] .crm-sec-fuente-marca { color: var(--crm-acento); } .crm-sec-fuentes > li[data-estado=parcial] .crm-sec-fuente-marca, .crm-sec-fuentes > li[data-estado=obsoleta] .crm-sec-fuente-marca { color: var(--crm-aviso); } .crm-sec-fuentes > li[data-estado=error] .crm-sec-fuente-marca { color: var(--crm-error); } .crm-sec-fuente-cuerpo { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .crm-sec-fuente-titulo { display: flex; width: 100%; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; } .crm-sec-estado { color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-sec-intervalo { display: flex; flex-wrap: wrap; gap: 4px 16px; } .crm-sec-hallazgo { font-size: 14px; line-height: 22px; color: var(--crm-text-2); } .crm-sec-vacio { padding: 24px 20px; color: var(--crm-muted); } .crm-sec-cobertura > .crm-sec-accion { padding: 16px 20px; border-top: 1px solid var(--crm-line); } .crm-sec-revision { border: 1px solid var(--crm-line); background: var(--crm-panel); } .crm-sec-revision[data-estado=por-revisar] { border-top: 2px solid var(--crm-acento-linea); } .crm-sec-version { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; width: 100%; } .crm-sec-revision[data-estado=por-revisar] .crm-sec-version > .crm-sec-estado, .crm-sec-revision[data-estado=aprobada] .crm-sec-version > .crm-sec-estado { color: var(--crm-acento); } .crm-sec-revision[data-estado=caducada] .crm-sec-version > .crm-sec-estado, .crm-sec-revision[data-estado=obsoleta] .crm-sec-version > .crm-sec-estado { color: var(--crm-aviso); } .crm-sec-sobre { padding: 12px 20px; border-bottom: 1px solid var(--crm-line); } .crm-sec-sobre > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding-block: 8px; } .crm-sec-sobre dt { color: var(--crm-muted); } .crm-sec-sobre ul { list-style: none; padding: 0; } .crm-sec-sobre dd { color: var(--crm-text-2); } .crm-sec-texto { padding: 24px 20px; font-size: 15px; line-height: 24px; color: var(--crm-text-2); white-space: pre-wrap; overflow-wrap: anywhere; } .crm-sec-adjuntos, .crm-sec-cotejo { list-style: none; padding: 0 20px; } .crm-sec-adjuntos > li, .crm-sec-cotejo > li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding-block: 16px; border-top: 1px solid var(--crm-line); } .crm-sec-numero { color: var(--crm-muted); font-size: 12px; line-height: 20px; } .crm-sec-revision-pie { padding: 16px 20px; border-top: 1px solid var(--crm-line); display: flex; flex-direction: column; gap: 16px; } .crm-sec-revision-acciones { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; } .crm-sec-recibo { border: 1px solid var(--crm-line); background: var(--crm-panel); } .crm-sec-recibo-estado { display: flex; align-items: center; gap: 8px; color: var(--crm-muted); } .crm-sec-recibo[data-estado=confirmado] .crm-sec-recibo-estado { color: var(--crm-acento); } .crm-sec-recibo > .crm-sec-identidad { padding: 16px 20px; } .crm-sec-registro { padding: 16px 20px; border-block: 1px dashed var(--crm-control); display: flex; flex-direction: column; gap: 16px; } .crm-sec-registro dt { font-size: 12px; line-height: 16px; color: var(--crm-muted); } .crm-sec-registro dd { font-size: 14px; line-height: 22px; } .crm-sec-registro .crm-sec-codigo { font-size: 20px; line-height: 28px; } .crm-sec-recibo-acciones { padding: 16px 20px; } .crm-sec-recibo-acciones:empty { display: none; } .crm-sec-conflicto { border: 1px solid var(--crm-aviso-linea); background: var(--crm-panel); } .crm-sec-cotejo > li { padding-block: 20px; } .crm-sec-cotejo > li > div { display: flex; flex-direction: column; gap: 8px; } .crm-sec-valor { font-size: 20px; line-height: 28px; color: var(--crm-text); white-space: normal; } @container crm-secretario (max-width: 719px) { .crm-sec-siguiente { align-items: flex-start; flex-direction: column; } .crm-sec-cabecera, .crm-sec-cobertura-cabecera, .crm-sec-fuentes > li, .crm-sec-aviso, .crm-sec-sobre, .crm-sec-texto, .crm-sec-revision-pie, .crm-sec-registro, .crm-sec-recibo > .crm-sec-identidad, .crm-sec-recibo-acciones { padding-inline: 16px; } .crm-sec-adjuntos, .crm-sec-cotejo { padding-inline: 16px; } .crm-secretario .crm-boton, .crm-sec-salto { min-height: 48px; } } @container crm-secretario (max-width: 399px) { .crm-sec-identidad > div { flex-basis: 100%; } .crm-sec-adjuntos > li, .crm-sec-cotejo > li { grid-template-columns: 24px minmax(0, 1fr); } .crm-sec-adjuntos > li > .crm-boton, .crm-sec-cotejo > li > .crm-boton { grid-column: 2; justify-self: start; } .crm-sec-revision-acciones { flex-direction: column; } .crm-sec-sobre > div { grid-template-columns: minmax(0, 1fr); gap: 4px; } } @media (prefers-reduced-motion: reduce) { .crm-secretario .crm-boton, .crm-sec-salto > svg { transition: none; transform: none; } } @media (forced-colors: active) { .crm-sec-mesa, .crm-sec-revision, .crm-sec-recibo, .crm-sec-conflicto, .crm-sec-registro { border-color: CanvasText; } .crm-sec-estado, .crm-sec-aviso, .crm-sec-fuente-marca, .crm-sec-recibo-estado { color: CanvasText; } } .crm-ini-respuesta { grid-template-columns: minmax(0, 1fr); min-width: 0; } .crm-ini-respuesta > * { min-width: 0; } .crm-ini-respuesta-items { grid-template-columns: minmax(0, 1fr); } .crm-ini-respuesta-items > li { min-width: 0; } .crm-ini-respuesta-item { grid-template-columns: minmax(0, 1fr); min-width: 0; } .crm-ini-respuesta-texto, .crm-ini-respuesta-item span, .crm-ini-respuesta-item small { overflow-wrap: anywhere; } .crm-ini-respuesta-pie { min-width: 0; } .crm-ini-respuesta-pie > a { max-width: 100%; white-space: normal; overflow-wrap: anywhere; } .crm-ini[data-disposicion=mesa], .crm-marco-contenido > .crm-ini[data-disposicion=mesa] { height: auto; min-height: 100%; } .crm-ini[data-disposicion=mesa][data-pantalla] { min-height: 100dvh; } .crm-ini[data-disposicion=mesa] .crm-ini-escena { --crm-mesa-ancho: 1240px; overflow: visible; width: 100%; max-width: none; margin-inline: 0; grid-template-columns: minmax(0, 1.3fr) minmax(360px, 1fr); grid-template-areas: "centro centro" "izquierda derecha"; row-gap: clamp(40px, 7vh, 72px); column-gap: clamp(24px, 3cqi, 48px); padding: clamp(40px, 8vh, 88px) max(clamp(16px, 3cqi, 40px), calc((100% - var(--crm-mesa-ancho)) / 2)) 48px; } .crm-ini[data-disposicion=mesa] .crm-ini-centro { grid-area: centro; width: 100%; max-width: 880px; justify-self: center; justify-items: center; align-content: start; padding-bottom: 0; } .crm-ini[data-disposicion=mesa] .crm-ini-centro .crm-ini-pregunta { margin-inline: auto; } .crm-ini[data-disposicion=mesa] .crm-ini-ala[data-lado=izquierda] { grid-area: izquierda; } .crm-ini[data-disposicion=mesa] .crm-ini-ala[data-lado=derecha] { grid-area: derecha; } .crm-ini[data-disposicion=mesa] .crm-ini-ala { grid-template-rows: none; } .crm-ini[data-disposicion=mesa] .crm-ini-titular { min-height: 1.04em; } .crm-ini[data-disposicion=mesa] .crm-ini-resumen { min-height: 1.55em; } .crm-ini[data-disposicion=mesa] .crm-ini-fondo { -webkit-mask-image: linear-gradient( 180deg, var(--crm-bg) 0, var(--crm-bg) 38%, transparent 54%); mask-image: linear-gradient( 180deg, var(--crm-bg) 0, var(--crm-bg) 38%, transparent 54%); } @container crm-ini (max-width: 1000px) { .crm-ini[data-disposicion=mesa] .crm-ini-escena { grid-template-columns: minmax(0, 1fr); grid-template-areas: "centro" "izquierda" "derecha"; } } .crm-ini-plano { --crm-plano-alto: 104px; --crm-plano-calle: 32px; --crm-plano-muro: 12px; display: grid; gap: 16px; min-width: 0; } .crm-ini-plano-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; } .crm-ini-plano-cifras { display: flex; gap: 6px; } .crm-ini-plano-cifra { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 1px solid var(--crm-line); background: transparent; color: var(--crm-muted); font: 400 12px/16px var(--crm-sans); white-space: nowrap; transition: border-color var(--crm-t-color), background-color var(--crm-t-color), color var(--crm-t-color); } .crm-ini-plano-cifra[data-total] { border-color: transparent; padding-inline: 4px 8px; } .crm-ini-plano-cifra b { font: 500 20px/24px var(--crm-sans); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; color: var(--crm-text); } .crm-ini-plano-cifra i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--crm-control); } .crm-ini-plano-cifra[data-estado=parado] i { background: var(--crm-aviso); } .crm-ini-plano-cifra[data-estado=listo] i { background: var(--crm-acento); } button.crm-ini-plano-cifra { cursor: pointer; } button.crm-ini-plano-cifra:hover:not(:disabled) { border-color: var(--crm-line-2); color: var(--crm-text-2); } button.crm-ini-plano-cifra:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; } button.crm-ini-plano-cifra[aria-pressed=true] { border-color: var(--crm-line-2); background: var(--crm-panel-2); color: var(--crm-text); } button.crm-ini-plano-cifra:disabled { cursor: default; opacity: var(--crm-apagado); } .crm-ini-plano-nave { position: relative; display: grid; gap: 0; } .crm-ini-plano-hilera { position: relative; display: grid; grid-template-columns: repeat(var(--crm-plano-hilera), minmax(0, 1fr)); height: var(--crm-plano-alto); border-top: 1px solid var(--crm-line-2); } .crm-ini-plano-hilera[data-cara=arriba] { margin-top: var(--crm-plano-calle); border-top: 0; border-bottom: 1px solid var(--crm-line-2); } .crm-ini-plano-hilera[data-cara=abajo] + .crm-ini-plano-hilera[data-cara=abajo], .crm-ini-plano-hilera[data-cara=arriba] + .crm-ini-plano-hilera[data-cara=abajo] { margin-top: var(--crm-plano-muro); } .crm-ini-plano-hilera[data-cara=arriba]::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--crm-plano-calle) / -2); border-top: 1px dashed var(--crm-line); } .crm-ini-plaza { position: relative; display: grid; place-items: center; min-width: 0; border-left: 1px solid var(--crm-line-2); } .crm-ini-plaza:first-child { border-left: 0; } .crm-ini-plaza-num { position: absolute; top: 4px; left: 6px; font: 500 10px/12px var(--crm-mono); letter-spacing: .04em; color: var(--crm-linea-apagada); } .crm-ini-plano-hilera[data-cara=arriba] .crm-ini-plaza-num { top: auto; bottom: 4px; } .crm-ini-plaza[data-libre]::after { content: "LIBRE"; font: 500 10px/12px var(--crm-mono); letter-spacing: .08em; color: var(--crm-linea-apagada); } .crm-ini-coche-enlace { display: contents; } .crm-ini-coche { display: grid; justify-items: center; gap: 4px; padding: 6px 4px; margin: 0; border: 0; background: none; color: inherit; cursor: pointer; transition: transform var(--crm-t-gesto) var(--crm-snap), opacity var(--crm-t-color); } .crm-ini-plano-hilera[data-cara=arriba] .crm-ini-coche { grid-auto-flow: row; } .crm-ini-plano-hilera[data-cara=arriba] .crm-ini-coche-planta { order: 2; transform: rotate(180deg); } .crm-ini-coche:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; } .crm-ini-coche:hover, .crm-ini-coche:focus-visible { transform: translateY(-2px); } .crm-ini-coche-planta { display: block; width: 32px; height: 56px; overflow: visible; } .crm-ini-coche-carro { fill: var(--crm-panel-2); stroke: var(--crm-control); stroke-width: 1.5; transition: stroke var(--crm-t-color), fill var(--crm-t-color); } .crm-ini-coche-luna { fill: var(--crm-panel-3); stroke: var(--crm-control); stroke-width: 1; } .crm-ini-coche-techo { fill: var(--crm-panel); stroke: var(--crm-line-2); stroke-width: 1; } .crm-ini-coche-espejo { stroke: var(--crm-control); stroke-width: 1.5; fill: none; } .crm-ini-coche-luces rect { fill: var(--crm-line-2); stroke: none; } .crm-ini-coche-nuevo { fill: var(--crm-acento); stroke: var(--crm-bg); stroke-width: 2; opacity: 0; } .crm-ini-coche-placa { display: grid; justify-items: center; font: 500 10px/12px var(--crm-mono); letter-spacing: .04em; color: var(--crm-dim); white-space: nowrap; transition: color var(--crm-t-color); } .crm-ini-coche:hover .crm-ini-coche-carro, .crm-ini-coche:focus-visible .crm-ini-coche-carro { stroke: var(--crm-muted); } .crm-ini-coche:hover .crm-ini-coche-placa, .crm-ini-coche:focus-visible .crm-ini-coche-placa { color: var(--crm-text); } .crm-ini-plaza[data-nuevo] .crm-ini-coche-nuevo { opacity: 1; } .crm-ini-plaza[data-estado=parado] .crm-ini-coche-carro { stroke: var(--crm-aviso-linea); fill: color-mix(in srgb, var(--crm-aviso) 10%, var(--crm-panel-2)); } .crm-ini-plaza[data-estado=parado] .crm-ini-coche-luces rect { fill: var(--crm-aviso); animation: crm-ini-emergencia var(--crm-t-corriente) steps(1, end) infinite; } .crm-ini-plaza[data-estado=parado] .crm-ini-coche-placa { color: var(--crm-aviso); } @keyframes crm-ini-emergencia { 50% { fill: var(--crm-line-2); } } .crm-ini-plaza[data-estado=listo] .crm-ini-coche-carro { stroke: var(--crm-acento-linea); fill: color-mix(in srgb, var(--crm-acento) 9%, var(--crm-panel-2)); } .crm-ini-plaza[data-estado=listo] .crm-ini-coche-placa { color: var(--crm-text-2); } .crm-ini-plaza[data-apagado] .crm-ini-coche { opacity: var(--crm-apagado); } .crm-ini-plaza[data-apagado] .crm-ini-coche-luces rect { animation: none; } .crm-ini-plano-campa { justify-self: end; font: 500 11px/16px var(--crm-mono); letter-spacing: .04em; color: var(--crm-dim); } .crm-ini-plano-ficha { --crm-plano-x: calc(var(--crm-plano-col) * 100% / var(--crm-plano-hilera)); position: absolute; z-index: 3; left: var(--crm-plano-x); top: calc(var(--crm-plano-fila) * var(--crm-plano-alto) + var(--crm-plano-calles) * var(--crm-plano-calle) + var(--crm-plano-muros) * var(--crm-plano-muro) + var(--crm-plano-alto) + 6px); display: grid; justify-items: start; gap: 4px; min-width: 200px; max-width: 280px; padding: 10px 12px 11px; border: 1px solid var(--crm-line-2); background: var(--crm-panel-3); box-shadow: var(--crm-sombra-capa); pointer-events: none; animation: crm-ini-ficha var(--crm-t-entrada) var(--crm-snap) both; } .crm-ini-plano-ficha[data-hilera=abajo] { top: calc(var(--crm-plano-fila) * var(--crm-plano-alto) + var(--crm-plano-calles) * var(--crm-plano-calle) + var(--crm-plano-muros) * var(--crm-plano-muro) - 6px); translate: 0 -100%; } .crm-ini-plano-ficha[data-lado=derecha] { left: calc(var(--crm-plano-x) + 100% / var(--crm-plano-hilera)); translate: -100% 0; } .crm-ini-plano-ficha[data-lado=derecha][data-hilera=abajo] { translate: -100% -100%; } .crm-ini-plano-ficha b { margin-top: 4px; font: 500 13px/18px var(--crm-sans); color: var(--crm-text); } .crm-ini-plano-ficha small { font: 400 11px/14px var(--crm-mono); color: var(--crm-dim); } .crm-ini-plano-motivo { display: flex; gap: 8px; align-items: baseline; font: 500 12px/16px var(--crm-mono); color: var(--crm-text-2); } .crm-ini-plano-motivo em { font-style: normal; color: var(--crm-dim); } .crm-ini-plano-ficha[data-estado=parado] .crm-ini-plano-motivo { color: var(--crm-aviso); } .crm-ini-plano-ficha[data-estado=listo] .crm-ini-plano-motivo { color: var(--crm-acento); } @keyframes crm-ini-ficha { from { opacity: 0; } } @container crm-ini (max-width: 640px) { .crm-ini-plano-hilera { grid-template-columns: repeat(6, minmax(0, 1fr)); height: auto; grid-auto-rows: var(--crm-plano-alto); } .crm-ini-plaza:nth-child(6n+1) { border-left: 0; } .crm-ini-plano-ficha { display: none; } .crm-ini-plano-cifra[data-total] { display: none; } } @media (prefers-reduced-motion: reduce) { .crm-ini-plaza[data-estado=parado] .crm-ini-coche-luces rect { animation: none; } .crm-ini-coche, .crm-ini-plano-ficha { transition: none; animation: none; } .crm-ini-coche:hover, .crm-ini-coche:focus-visible { transform: none; } } .crm-ini-barra-sup { position: relative; min-width: 0; overflow: hidden; z-index: 2; display: flex; align-items: center; gap: 16px; height: 52px; padding: 0 clamp(16px, 2cqi, 24px); border-bottom: 1px solid var(--crm-line); background: color-mix(in srgb, var(--crm-bg) 86%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .crm-ini-barra-sep { flex: none; width: 1px; height: 20px; background: var(--crm-line-2); } .crm-ini-barra-cliente { display: inline-flex; align-items: center; gap: 10px; min-width: 0; height: 36px; padding: 0 8px 0 4px; margin: 0; border: 1px solid transparent; background: none; color: var(--crm-text); font: 500 13px/18px var(--crm-sans); transition: border-color var(--crm-t-color); } button.crm-ini-barra-cliente { cursor: pointer; } button.crm-ini-barra-cliente:hover { border-color: var(--crm-line-2); } button.crm-ini-barra-cliente:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; } .crm-ini-barra-chapa { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 2px; background: var(--crm-placa-fondo); forced-color-adjust: none; } .crm-ini-barra-chapa img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; } .crm-ini-barra-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-ini-barra-dominio { font: 400 11px/16px var(--crm-mono); color: var(--crm-dim); white-space: nowrap; } .crm-ini-barra-mas { width: 12px; height: 12px; color: var(--crm-dim); fill: none; stroke: currentColor; stroke-width: 1.5; } .crm-ini-barra-der { display: flex; align-items: center; gap: 16px; margin-left: auto; } .crm-ini-barra-estado { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } @media (max-width: 960px) { .crm-ini-barra-dominio, .crm-ini-barra-estado { display: none; } } @media (max-width: 560px) { .crm-ini-barra-sup { gap: 10px; padding-inline: 12px; } .crm-ini-barra-nombre, .crm-ini-barra-mas, .crm-ini-barra-sep { display: none; } } .crm-ini[data-disposicion=mesa] .crm-ini-escena { row-gap: clamp(32px, 5vh, 56px); padding-top: clamp(32px, 6vh, 64px); align-items: stretch; align-content: safe center; } .crm-ini[data-disposicion=mesa] .crm-ini-centro { gap: clamp(12px, 2.2vh, 22px); } .crm-ini[data-disposicion=mesa] .crm-ini-titular { font-size: clamp(36px, 3.6vw, 52px); } .crm-ini[data-disposicion=mesa] .crm-ini-ala { align-content: stretch; } .crm-ini[data-disposicion=mesa] .crm-ini-plano-cab, .crm-ini[data-disposicion=mesa] .crm-ini-plan-cab { box-sizing: border-box; height: 48px; align-items: center; padding: 0 0 12px; margin-bottom: 0; border-bottom: 1px solid var(--crm-line-2); } .crm-ini[data-disposicion=mesa] .crm-ini-plano-cab { flex-wrap: nowrap; } .crm-ini[data-disposicion=mesa] .crm-ini-plano { gap: 0; grid-template-rows: auto 1fr; height: 100%; } .crm-ini[data-disposicion=mesa] .crm-ini-plano-nave { padding-top: 16px; align-content: start; } .crm-ini[data-disposicion=mesa] .crm-ini-plano-hilera[data-cara=abajo]:first-child { border-top: 0; } .crm-ini[data-disposicion=mesa] .crm-ini-plan { max-width: none; height: 100%; display: grid; grid-template-rows: auto 1fr; } .crm-ini[data-disposicion=mesa] .crm-ini-plan > ol { display: grid; grid-auto-rows: 1fr; } .crm-ini[data-disposicion=mesa] .crm-ini-plan .crm-ini-paso:first-child { border-top: 0; } .crm-ini-plano-hilera[data-cara=arriba]::after { content: "ENTRADA \2192"; position: absolute; left: 0; top: calc(var(--crm-plano-calle) / -2 - 7px); padding-right: 10px; font: 500 10px/14px var(--crm-mono); letter-spacing: .1em; color: var(--crm-dim); background: var(--crm-bg); pointer-events: none; } .crm-ini-barra-chapa { width: auto; min-width: 28px; max-width: 112px; padding: 2px 6px; } .crm-ini-barra-chapa img { height: 24px; width: auto; max-width: 100px; } .crm-ini-orden { display: grid; gap: 20px; min-width: 0; color: var(--crm-text); font-family: var(--crm-sans); font-size: 13px; line-height: 1.45; } .crm-ini-orden :where(h3, h4, p) { margin: 0; } .crm-ini-orden-cab { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; } .crm-ini-llave { position: relative; display: grid; justify-items: center; align-content: end; gap: 2px; width: 72px; height: 104px; padding: 0 6px 10px; border: 1px solid var(--crm-line-2); background: var(--crm-panel-2); color: var(--crm-text); clip-path: polygon(22% 0, 78% 0, 100% 16%, 100% 100%, 0 100%, 0 16%); } .crm-ini-llave-ojal { position: absolute; top: 12px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border: 1px solid var(--crm-line-2); background: var(--crm-bg); } .crm-ini-llave small { font: 500 10px/12px var(--crm-mono); letter-spacing: .06em; color: var(--crm-dim); } .crm-ini-llave b { font: 600 24px/28px var(--crm-mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .crm-ini-orden[data-estado=parado] .crm-ini-llave { border-color: var(--crm-aviso-linea); background: color-mix(in srgb, var(--crm-aviso) 10%, var(--crm-panel-2)); } .crm-ini-orden[data-estado=listo] .crm-ini-llave { border-color: var(--crm-acento-linea); background: color-mix(in srgb, var(--crm-acento) 9%, var(--crm-panel-2)); } .crm-ini-orden-id { display: grid; justify-items: start; gap: 8px; min-width: 0; } .crm-ini-orden-id h3 { font: 500 20px/28px var(--crm-sans); letter-spacing: -0.02em; overflow-wrap: anywhere; } .crm-ini-orden-id p { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--crm-muted); } .crm-ini-orden-dias { font: 500 12px/18px var(--crm-mono); color: var(--crm-dim); } .crm-ini-orden-franja { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border: 1px solid var(--crm-line); background: var(--crm-panel); font-size: 13px; color: var(--crm-text-2); } .crm-ini-orden-franja b { font: 500 11px/16px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--crm-text); } .crm-ini-orden[data-estado=parado] .crm-ini-orden-franja { border-color: var(--crm-aviso-linea); background: var(--crm-aviso-suave); } .crm-ini-orden[data-estado=parado] .crm-ini-orden-franja b { color: var(--crm-aviso); } .crm-ini-orden[data-estado=listo] .crm-ini-orden-franja { border-color: var(--crm-acento-linea); background: var(--crm-acento-suave); } .crm-ini-orden[data-estado=listo] .crm-ini-orden-franja b { color: var(--crm-acento); } .crm-ini-orden-luces { display: grid; grid-template-columns: repeat(2, 6px); gap: 3px 10px; } .crm-ini-orden-luces i { width: 6px; height: 4px; background: var(--crm-aviso); animation: crm-ini-emergencia-bg var(--crm-t-corriente) steps(1, end) infinite; } @keyframes crm-ini-emergencia-bg { 50% { background: var(--crm-line-2); } } .crm-ini-orden-marcha { width: 6px; height: 6px; background: var(--crm-text-2); } .crm-ini-orden-trae, .crm-ini-orden-fases { display: grid; gap: 10px; } .crm-ini-orden-trae p { font-size: 15px; line-height: 22px; color: var(--crm-text-2); text-wrap: pretty; } .crm-ini-orden-otras { display: grid; justify-items: start; gap: 10px; } .crm-ini-orden-otras-abrir { padding: 0; border: 0; background: none; font: 400 12px/16px var(--crm-sans); color: var(--crm-muted); text-decoration: underline; text-decoration-color: var(--crm-line-2); text-underline-offset: 3px; cursor: pointer; } .crm-ini-orden-otras-abrir:hover { color: var(--crm-text); } .crm-ini-orden-otras-abrir:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; } .crm-ini-orden-chips { display: flex; flex-wrap: wrap; gap: 6px; } .crm-ini-orden-aviso { font: 500 12px/16px var(--crm-mono); color: var(--crm-acento); } .crm-ini-orden-aviso[data-tono=error] { color: var(--crm-error); } .crm-ini-orden-pie { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; border-top: 1px solid var(--crm-line); } @media (prefers-reduced-motion: reduce) { .crm-ini-orden-luces i { animation: none; } } .crm-ini-orden[data-estado=parado] .crm-puntos-punto[data-estado=actual] .crm-puntos-marca { border-color: var(--crm-aviso); } .crm-ini-orden[data-estado=parado] .crm-puntos-punto[data-estado=actual] .crm-puntos-marca::after { background: var(--crm-aviso); } .crm-ini-expediente { display: grid; gap: 24px; min-width: 0; color: var(--crm-text); font-family: var(--crm-sans); font-size: 13px; line-height: 1.45; } .crm-ini-expediente :where(h2, h3, p, ol, ul) { margin: 0; padding: 0; } .crm-ini-expediente :where(ol, ul) { list-style: none; } .crm-ini-expediente-cab .crm-ini-llave { width: 80px; height: 116px; } .crm-ini-expediente-cab .crm-ini-llave b { font-size: 28px; line-height: 32px; } .crm-ini-expediente .crm-ini-orden-id h2 { font: 500 28px/32px var(--crm-sans); letter-spacing: -0.03em; overflow-wrap: anywhere; } .crm-ini-expediente[data-estado=parado] .crm-ini-llave { border-color: var(--crm-aviso-linea); background: color-mix(in srgb, var(--crm-aviso) 10%, var(--crm-panel-2)); } .crm-ini-expediente[data-estado=listo] .crm-ini-llave { border-color: var(--crm-acento-linea); background: color-mix(in srgb, var(--crm-acento) 9%, var(--crm-panel-2)); } .crm-ini-expediente[data-estado=parado] .crm-ini-orden-franja { border-color: var(--crm-aviso-linea); background: var(--crm-aviso-suave); } .crm-ini-expediente[data-estado=parado] .crm-ini-orden-franja b { color: var(--crm-aviso); } .crm-ini-expediente[data-estado=listo] .crm-ini-orden-franja { border-color: var(--crm-acento-linea); background: var(--crm-acento-suave); } .crm-ini-expediente[data-estado=listo] .crm-ini-orden-franja b { color: var(--crm-acento); } .crm-ini-expediente-cab + .crm-ini-orden-franja { flex-wrap: wrap; row-gap: 4px; padding-block: 8px; } .crm-ini-expediente-dentro { margin-left: auto; font: 500 12px/16px var(--crm-mono); color: var(--crm-dim); white-space: nowrap; } .crm-ini-expediente-nota { margin-top: -16px !important; padding: 8px 12px; border-left: 2px solid var(--crm-aviso-linea); font-size: 13px; color: var(--crm-text-2); } .crm-ini-expediente-siguiente { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--crm-line-2); background: var(--crm-panel); } .crm-ini-expediente-siguiente > div { display: grid; gap: 4px; min-width: 0; } .crm-ini-expediente-siguiente-titulo { font: 500 16px/22px var(--crm-sans); letter-spacing: -0.01em; } .crm-ini-expediente-siguiente-detalle { font-size: 12px; line-height: 17px; color: var(--crm-muted); } .crm-ini-expediente-tira { display: grid; gap: 12px; } .crm-ini-expediente-tira-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .crm-ini-tira { --crm-tira-min: 56px; display: grid; gap: 2px; } .crm-ini-tira-fase { display: grid; gap: 6px; min-width: 0; } .crm-ini-tira-fase > i { display: block; height: 8px; background: var(--crm-line); } .crm-ini-tira-fase[data-estado=hecho] > i { background: var(--crm-acento-linea); } .crm-ini-tira-fase[data-estado=actual] > i { position: relative; overflow: hidden; background: var(--crm-acento); } .crm-ini-tira-fase[data-estado=actual] > i::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent, var(--crm-luz), transparent) no-repeat -60% 0 / 40% 100%; animation: crm-ini-tira-luz calc(var(--crm-t-filo) * 2) var(--crm-curva) infinite; } @keyframes crm-ini-tira-luz { to { background-position: 160% 0; } } .crm-ini-expediente[data-estado=parado] .crm-ini-tira-fase[data-estado=actual] > i { background: repeating-linear-gradient( -45deg, var(--crm-aviso) 0 4px, var(--crm-aviso-suave) 4px 8px); } .crm-ini-expediente[data-estado=parado] .crm-ini-tira-fase[data-estado=actual] > i::after { display: none; } .crm-ini-tira-nombre { overflow: hidden; font-size: 12px; line-height: 16px; color: var(--crm-muted); text-overflow: ellipsis; white-space: nowrap; } .crm-ini-tira-fase[data-estado=actual] .crm-ini-tira-nombre { font-weight: 500; color: var(--crm-text); } .crm-ini-tira-fase[data-estado=pendiente] .crm-ini-tira-nombre { color: var(--crm-dim); } .crm-ini-tira-dias { min-height: 16px; overflow: hidden; font: 500 11px/16px var(--crm-mono); color: var(--crm-dim); text-overflow: ellipsis; white-space: nowrap; } .crm-ini-expediente[data-estado=parado] .crm-ini-tira-fase[data-estado=actual] .crm-ini-tira-dias { color: var(--crm-aviso); } .crm-ini-expediente-pestanas { display: flex; gap: 20px; border-bottom: 1px solid var(--crm-line); } .crm-ini-expediente-pestana { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0; border: 0; background: none; color: var(--crm-muted); font: 500 13px/16px var(--crm-sans); cursor: pointer; } .crm-ini-expediente-pestana span { font: 500 11px/1 var(--crm-mono); color: var(--crm-dim); } .crm-ini-expediente-pestana[aria-selected=true] { color: var(--crm-text); } .crm-ini-expediente-pestana[aria-selected=true]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--crm-acento); } .crm-ini-expediente-pestana:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; } .crm-ini-expediente-panel { padding-top: 16px; } .crm-ini-expediente-vacio { color: var(--crm-dim); } .crm-ini-expediente-trabajo { display: grid; gap: 16px; } .crm-ini-expediente-presupuesto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; } .crm-ini-expediente-presupuesto b { font: 500 20px/24px var(--crm-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .crm-ini-expediente-presupuesto small { font: 400 11px/16px var(--crm-mono); color: var(--crm-dim); } .crm-ini-expediente-lineas { display: grid; } .crm-ini-expediente-lineas li { display: flex; align-items: center; gap: 10px; min-height: 36px; border-top: 1px solid var(--crm-line); color: var(--crm-text-2); } .crm-ini-expediente-lineas li i { flex: none; width: 12px; height: 12px; border: 1px solid var(--crm-control); } .crm-ini-expediente-lineas li[data-hecho] { color: var(--crm-muted); } .crm-ini-expediente-lineas li[data-hecho] i { border-color: var(--crm-acento); background: var(--crm-acento); } .crm-ini-expediente-horas { font: 500 12px/16px var(--crm-mono); color: var(--crm-dim); } .crm-ini-expediente-cargando { display: inline-flex; align-items: center; gap: 10px; color: var(--crm-muted); } .crm-ini-expediente-cargando i { position: relative; width: 48px; height: 1px; overflow: hidden; background: var(--crm-line-2); } .crm-ini-expediente-cargando i::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--crm-acento); animation: crm-copiloto-filo var(--crm-t-filo) var(--crm-curva) infinite; } .crm-ini-expediente-error { display: grid; justify-items: start; gap: 8px; color: var(--crm-error); } .crm-ini-plaza[data-seleccionado] .crm-ini-coche-carro { stroke: var(--crm-text); stroke-width: 2; } .crm-ini-plaza[data-resaltado] .crm-ini-coche { transform: translateY(-3px); } @media (max-width: 640px) { .crm-ini-expediente .crm-ini-orden-id h2 { font-size: 24px; line-height: 28px; } .crm-ini-expediente-siguiente { grid-template-columns: minmax(0, 1fr); } .crm-ini-tira { --crm-tira-min: 0px; } .crm-ini-tira-nombre, .crm-ini-tira-dias { display: none; } .crm-ini-expediente-dentro { margin-left: 0; } .crm-ini-tira-fase[data-estado=actual] .crm-ini-tira-nombre, .crm-ini-tira-fase[data-estado=actual] .crm-ini-tira-dias { display: block; overflow: visible; } } @media (prefers-reduced-motion: reduce) { .crm-ini-tira-fase[data-estado=actual] > i::after, .crm-ini-expediente-cargando i::after { animation: none; } } .crm-ini-reloj { --crm-ini-tramo: var(--crm-text-2); display: inline-flex; flex: none; align-items: center; gap: 8px; color: var(--crm-ini-tramo); } .crm-ini-reloj[data-tramo=aviso], .crm-ini-reloj-cita[data-tramo=pasada] { --crm-ini-tramo: var(--crm-aviso); } .crm-ini-reloj[data-tramo=vencido] { --crm-ini-tramo: var(--crm-error); } .crm-ini-reloj-esfera { display: block; flex: none; width: 24px; height: 24px; overflow: visible; } .crm-ini-reloj-caja { fill: var(--crm-panel); stroke: var(--crm-line-2); stroke-width: 1; } .crm-ini-reloj-corona { fill: var(--crm-line-2); stroke: none; } .crm-ini-reloj-cuna { fill: var(--crm-ini-tramo); fill-opacity: .16; stroke: none; transition: d var(--crm-t-dibujo) var(--crm-snap); } .crm-ini-reloj[data-tramo=vencido] .crm-ini-reloj-cuna { fill-opacity: .22; } .crm-ini-reloj-marca { stroke: var(--crm-acento); stroke-width: 1.5; stroke-linecap: square; } .crm-ini-reloj-aguja, .crm-ini-reloj-minutos { stroke: var(--crm-ini-tramo); stroke-width: 1.5; stroke-linecap: round; } .crm-ini-reloj-horas { stroke: var(--crm-ini-tramo); stroke-width: 2; stroke-linecap: round; } .crm-ini-reloj-eje { fill: var(--crm-ini-tramo); stroke: none; } .crm-ini-reloj-hora-marca { stroke: var(--crm-control); stroke-width: 1; } .crm-ini-reloj-cita[data-tramo=pronto] .crm-ini-reloj-minutos { stroke: var(--crm-acento); } .crm-ini-reloj-cita[data-tramo=pasada] .crm-ini-reloj-caja { stroke: var(--crm-aviso-linea); } .crm-ini-reloj[data-tramo=vencido] .crm-ini-reloj-caja { stroke: var(--crm-error-linea); } .crm-ini-reloj-texto { font: 400 11px/16px var(--crm-mono); font-variant-numeric: tabular-nums; white-space: nowrap; } .crm-ini-plazos, .crm-ini-docs { display: grid; align-content: start; overflow: hidden; min-height: 0; } .crm-ini-plazos li[hidden], .crm-ini-docs li[hidden] { display: none; } .crm-ini-plazo-fila { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 40px; padding: 4px 0; border-top: 1px solid var(--crm-line); transition: background-color var(--crm-t-color); } a.crm-ini-plazo-fila:hover, a.crm-ini-doc-fila:hover { background: color-mix(in srgb, var(--crm-panel-2) 60%, transparent); } .crm-ini-plazo-txt, .crm-ini-doc-txt { display: grid; min-width: 0; } .crm-ini-plazo-txt > span, .crm-ini-doc-txt > span { overflow: hidden; font-size: 12px; line-height: 16px; color: var(--crm-text-2); text-overflow: ellipsis; white-space: nowrap; } .crm-ini-plazo-txt small, .crm-ini-doc-txt small { overflow: hidden; font: 400 11px/16px var(--crm-mono); color: var(--crm-dim); text-overflow: ellipsis; white-space: nowrap; } .crm-ini-plazo-cifra { font: 500 12px/16px var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-text-2); text-align: right; white-space: nowrap; } .crm-ini-plazo-cifra[data-tramo=aviso], .crm-ini-plazo-cifra[data-tramo=pasada] { color: var(--crm-aviso); } .crm-ini-plazo-cifra[data-tramo=vencido] { color: var(--crm-error); } .crm-ini-plazo-cifra[data-tramo=pronto] { color: var(--crm-text); } .crm-ini-plazos-vacio { display: flex; align-items: center; gap: 8px; min-height: 40px; border-top: 1px solid var(--crm-line); font-size: 12px; line-height: 16px; color: var(--crm-muted); } .crm-ini-plazos-vacio > span { font: 500 12px/16px var(--crm-mono); color: var(--crm-acento); } .crm-ini-sello { position: relative; display: inline-grid; flex: none; padding: 2px; border: 1px solid var(--crm-line-2); background: var(--crm-panel); } .crm-ini-sello-dentro { display: grid; align-content: center; min-width: 64px; height: 28px; padding: 0 6px; border: 1px solid var(--crm-line-2); } .crm-ini-sello-tipo { font: 500 11px/12px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--crm-dim); white-space: nowrap; } .crm-ini-sello-num { display: flex; align-items: baseline; gap: 4px; font: 500 12px/14px var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-text); white-space: nowrap; } .crm-ini-sello-num small { font: 400 11px/14px var(--crm-mono); color: var(--crm-dim); } .crm-ini-sello[data-estado=borrador], .crm-ini-sello[data-estado=borrador] .crm-ini-sello-dentro { border-style: dashed; } .crm-ini-sello[data-estado=aceptado], .crm-ini-sello[data-estado=aceptado] .crm-ini-sello-dentro { border-color: var(--crm-acento-linea); } .crm-ini-sello[data-estado=aceptado] .crm-ini-sello-tipo { color: var(--crm-acento); } .crm-ini-sello-visto { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 12px; height: 12px; background: var(--crm-acento); color: var(--crm-sobre-acento); font: 500 11px/12px var(--crm-mono); } .crm-ini-sello[data-estado=caducado], .crm-ini-sello[data-estado=caducado] .crm-ini-sello-dentro { border-color: var(--crm-error-linea); } .crm-ini-sello[data-estado=caducado] .crm-ini-sello-num { color: var(--crm-dim); } .crm-ini-sello[data-estado=caducado]::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to top right, transparent calc(50% - .5px), var(--crm-error) calc(50% - .5px), var(--crm-error) calc(50% + .5px), transparent calc(50% + .5px)); pointer-events: none; } .crm-ini-docs li { position: relative; } .crm-ini-doc-fila { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 48px; padding: 6px 0; border-top: 1px solid var(--crm-line); transition: background-color var(--crm-t-color); } .crm-ini-doc-der { display: grid; justify-items: end; } .crm-ini-doc-der b { font: 500 13px/16px var(--crm-sans); font-variant-numeric: tabular-nums; white-space: nowrap; } .crm-ini-doc-der small { font: 400 11px/16px var(--crm-mono); color: var(--crm-dim); white-space: nowrap; } .crm-ini-doc-der small[data-aviso] { color: var(--crm-aviso); } .crm-ini-doc-frio { position: absolute; top: -1px; left: 0; width: 100%; height: 1px; background: var(--crm-aviso-linea); transform-origin: left; pointer-events: none; } .crm-ini-docs li[data-aviso] .crm-ini-doc-frio { background: var(--crm-aviso); } .crm-ini[data-encendida] .crm-ini-doc-frio { animation: crm-ini-crecer var(--crm-t-dibujo) var(--crm-snap) both; } .crm-ini :is(.crm-ini-plazo-fila, .crm-ini-doc-fila):focus-visible { outline: var(--crm-foco-ancho, 1px) solid var(--crm-acento); outline-offset: -1px; } @media (max-height: 860px) { .crm-ini-plazo-fila { min-height: 36px; padding: 2px 0; } .crm-ini-doc-fila { min-height: 44px; padding: 4px 0; } } @media (prefers-reduced-motion: reduce) { .crm-ini-reloj-cuna { transition: none; } } @media (forced-colors: active) { .crm-ini-reloj-cuna { fill: Highlight; } .crm-ini-reloj-marca { stroke: Highlight; } .crm-ini-sello-visto { forced-color-adjust: none; } } .crm-ini-estado[data-estado=sin-dato] { border: 1px solid var(--crm-control); background: none; } .crm-ini-kpi-dentro[data-estado=sin-dato] .crm-ini-kpi-cifra { color: var(--crm-dim); } .crm-modal.crm-espacio[data-tamano=completo] { --crm-espacio-ancho: 1120px; inset: auto; top: max(24px, 5vh); bottom: max(24px, 5vh); left: 50%; width: min(var(--crm-espacio-ancho), calc(100% - 48px)); translate: -50% 0; grid-template-rows: auto minmax(0, 1fr); background: var(--crm-bg); } .crm-espacio-barra { display: flex; align-items: center; gap: 16px; height: 48px; padding: 0 8px 0 20px; border-bottom: 1px solid var(--crm-line); } .crm-espacio-rotulo { font: 500 11px/16px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--crm-dim); } .crm-espacio-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; } .crm-espacio-flecha, .crm-espacio-cerrar { display: inline-grid; place-items: center; height: 28px; min-width: 28px; padding: 0 6px; border: 1px solid transparent; background: none; color: var(--crm-muted); cursor: pointer; transition: border-color var(--crm-t-color), color var(--crm-t-color), background-color var(--crm-t-color); } .crm-espacio-flecha svg, .crm-espacio-cerrar svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; } .crm-espacio-flecha:hover:not(:disabled), .crm-espacio-cerrar:hover:not(:disabled) { border-color: var(--crm-line-2); background: var(--crm-panel-2); color: var(--crm-text); } .crm-espacio-flecha:focus-visible, .crm-espacio-cerrar:focus-visible, .crm-espacio-pestana:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; } .crm-espacio-flecha:disabled, .crm-espacio-cerrar:disabled { color: var(--crm-linea-apagada); cursor: not-allowed; } .crm-espacio-cuenta { min-width: 64px; font: 500 12px/16px var(--crm-mono); letter-spacing: .04em; color: var(--crm-dim); text-align: center; font-variant-numeric: tabular-nums; } .crm-espacio-cuenta b { font-weight: 500; color: var(--crm-text); } .crm-espacio-cerrar { display: inline-flex; gap: 8px; } .crm-espacio-cerrar kbd { font: 500 11px/1 var(--crm-mono); color: var(--crm-dim); } .crm-espacio-nav + .crm-espacio-pestanas, .crm-espacio-nav ~ .crm-espacio-cerrar { margin-left: 0; } .crm-espacio-barra > .crm-espacio-cerrar:only-of-type { margin-left: auto; } .crm-espacio-pestanas { display: none; } .crm-espacio-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; } .crm-espacio-cuerpo[data-con-lateral] { grid-template-columns: minmax(0, 1.45fr) minmax(340px, 1fr); } .crm-espacio-principal { min-height: 0; overflow-y: auto; padding: 28px 32px 40px; scrollbar-gutter: stable; } .crm-espacio-lateral { display: grid; min-height: 0; border-left: 1px solid var(--crm-line); background: var(--crm-panel); } .crm-espacio-principal[data-desde=derecha] { animation: crm-espacio-derecha var(--crm-t-panel) var(--crm-snap); } .crm-espacio-principal[data-desde=izquierda] { animation: crm-espacio-izquierda var(--crm-t-panel) var(--crm-snap); } @keyframes crm-espacio-derecha { from { opacity: 0; transform: translateX(16px); } } @keyframes crm-espacio-izquierda { from { opacity: 0; transform: translateX(-16px); } } @media (max-width: 900px) { .crm-modal.crm-espacio[data-tamano=completo] { inset: 0; top: 0; bottom: 0; width: 100%; translate: none; border: 0; } .crm-espacio-barra { gap: 8px; padding-left: 16px; } .crm-espacio-rotulo { display: none; } .crm-espacio-nav { margin-left: 0; } .crm-espacio-pestanas { display: flex; margin-left: auto; border: 1px solid var(--crm-line-2); } .crm-espacio-pestana { height: 28px; padding: 0 10px; border: 0; background: none; color: var(--crm-muted); font: 500 12px/16px var(--crm-sans); cursor: pointer; } .crm-espacio-pestana[aria-selected=true] { background: var(--crm-panel-3); color: var(--crm-text); } .crm-espacio-cuerpo[data-con-lateral] { grid-template-columns: minmax(0, 1fr); } .crm-espacio[data-pestana=principal] .crm-espacio-lateral, .crm-espacio[data-pestana=lateral] .crm-espacio-principal { display: none; } .crm-espacio-lateral { border-left: 0; } .crm-espacio-principal { padding: 20px 16px 32px; } .crm-espacio-cerrar kbd { display: none; } } .crm-copiloto { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; font-family: var(--crm-sans); font-size: 13px; line-height: 1.5; color: var(--crm-text); } .crm-copiloto-hilo { display: grid; align-content: start; gap: 20px; min-height: 0; overflow-y: auto; padding: 24px 24px 12px; } .crm-copiloto-rotulo { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/16px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--crm-dim); } .crm-copiloto-rotulo i { width: 6px; height: 6px; border-radius: 50%; background: var(--crm-acento); box-shadow: 0 0 0 3px var(--crm-acento-suave); } .crm-copiloto-sintesis { display: grid; gap: 10px; padding-bottom: 20px; border-bottom: 1px solid var(--crm-line); } .crm-copiloto-sintesis-texto { font-size: 16px; line-height: 24px; letter-spacing: -0.01em; color: var(--crm-text); text-wrap: pretty; } .crm-copiloto-sintesis-texto b { font-weight: 500; } .crm-copiloto-sintesis-texto [data-tono=aviso] { color: var(--crm-aviso); } .crm-copiloto-turno { display: grid; gap: 10px; } .crm-copiloto-pregunta { justify-self: end; max-width: 85%; padding: 8px 12px; border: 1px solid var(--crm-line-2); background: var(--crm-panel-2); color: var(--crm-text-2); } .crm-copiloto-respuesta { display: grid; gap: 10px; } .crm-copiloto-respuesta > p { max-width: 62ch; color: var(--crm-text); text-wrap: pretty; } .crm-copiloto-anexos, .crm-copiloto-acciones { display: grid; gap: 8px; } .crm-copiloto-sello { font: 400 11px/16px var(--crm-mono); color: var(--crm-dim); } .crm-copiloto-pensando { position: relative; display: inline-flex; align-items: center; gap: 10px; color: var(--crm-muted); } .crm-copiloto-pensando i { position: relative; width: 48px; height: 1px; overflow: hidden; background: var(--crm-line-2); } .crm-copiloto-pensando i::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--crm-acento); animation: crm-copiloto-filo var(--crm-t-filo) var(--crm-curva) infinite; } @keyframes crm-copiloto-filo { from { transform: translateX(-100%); } to { transform: translateX(250%); } } .crm-copiloto-error { display: grid; justify-items: start; gap: 6px; color: var(--crm-error); } .crm-copiloto-reintentar, .crm-copiloto-idea { border: 1px solid var(--crm-line-2); background: none; color: var(--crm-text-2); font: 400 12px/16px var(--crm-sans); cursor: pointer; transition: border-color var(--crm-t-color), color var(--crm-t-color), background-color var(--crm-t-color); } .crm-copiloto-reintentar { padding: 6px 10px; } .crm-copiloto-pie { display: grid; gap: 10px; padding: 12px 24px 20px; border-top: 1px solid var(--crm-line); } .crm-copiloto-ideas { display: flex; flex-wrap: wrap; gap: 6px; } .crm-copiloto-idea { min-height: 28px; padding: 4px 10px; text-align: left; } .crm-copiloto-idea:hover:not(:disabled), .crm-copiloto-reintentar:hover { border-color: var(--crm-control); background: var(--crm-panel-2); color: var(--crm-text); } .crm-copiloto-idea:focus-visible, .crm-copiloto-reintentar:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; } .crm-copiloto-idea:disabled { color: var(--crm-dim); border-color: var(--crm-linea-apagada); cursor: not-allowed; } .crm-copiloto-sobre { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--crm-dim); } .crm-copiloto-sobre b { overflow: hidden; font-weight: 500; color: var(--crm-text-2); text-overflow: ellipsis; white-space: nowrap; } .crm-propuesta { position: relative; display: grid; gap: 6px; padding: 12px 14px 14px; border: 1px solid var(--crm-acento-linea); background: var(--crm-panel-2); } .crm-propuesta[data-estado=propuesta]::before { content: ""; position: absolute; inset: -1px -1px auto; height: 1px; pointer-events: none; background: linear-gradient( 90deg, transparent, var(--crm-acento) 50%, transparent) no-repeat -40% 0 / 40% 100%; animation: crm-propuesta-filo calc(var(--crm-t-filo) * 2) var(--crm-curva) infinite; } @keyframes crm-propuesta-filo { to { background-position: 140% 0; } } .crm-propuesta[data-estado=hecha] { border-color: var(--crm-line-2); background: var(--crm-panel); } .crm-propuesta[data-estado=error] { border-color: var(--crm-error-linea); } .crm-propuesta-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .crm-propuesta-rotulo { font: 500 11px/16px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--crm-acento); } .crm-propuesta[data-estado=hecha] .crm-propuesta-rotulo { color: var(--crm-dim); } .crm-propuesta-sello { padding: 2px 6px; border: 1px solid var(--crm-acento-linea); font: 600 10px/14px var(--crm-mono); letter-spacing: .1em; color: var(--crm-acento); } .crm-propuesta-titulo { font: 500 14px/20px var(--crm-sans); color: var(--crm-text); } .crm-propuesta-cambio { display: flex; align-items: center; gap: 10px; font: 500 12px/16px var(--crm-mono); color: var(--crm-muted); } .crm-propuesta-cambio i { position: relative; flex: 0 0 32px; height: 1px; background: var(--crm-line-2); } .crm-propuesta-cambio i::after { content: ""; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-top: 1px solid var(--crm-line-2); border-right: 1px solid var(--crm-line-2); transform: rotate(45deg); } .crm-propuesta-cambio b { font-weight: 500; color: var(--crm-text); } .crm-propuesta-motivo { font-size: 12px; line-height: 17px; color: var(--crm-muted); } .crm-propuesta-error { font-size: 12px; line-height: 17px; color: var(--crm-error); } .crm-propuesta-acciones { display: flex; gap: 6px; margin-top: 4px; } .crm-propuesta-descartada { font: 400 12px/16px var(--crm-sans); color: var(--crm-dim); text-decoration: line-through; text-decoration-color: var(--crm-line-2); } @media (prefers-reduced-motion: reduce) { .crm-espacio-principal[data-desde] { animation: none; } .crm-copiloto-pensando i::after, .crm-propuesta[data-estado=propuesta]::before { animation: none; } } .crm-canal { position: fixed; z-index: 30; left: 24px; bottom: 24px; width: min(380px, calc(100vw - 32px)); pointer-events: none; font-family: var(--crm-sans); } .crm-canal ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .crm-canal-aviso { display: grid; gap: 8px; padding: 12px 14px 14px; border: 1px solid var(--crm-line-2); background: var(--crm-panel-3); color: var(--crm-text); box-shadow: var(--crm-sombra-capa); pointer-events: auto; animation: crm-canal-entra var(--crm-t-capa) var(--crm-snap); } @keyframes crm-canal-entra { from { opacity: 0; transform: translateY(16px); } } .crm-canal-cab { display: flex; align-items: center; gap: 8px; } .crm-canal-nombre { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/16px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--crm-text-2); } .crm-canal-nombre i { width: 6px; height: 6px; border-radius: 50%; background: var(--crm-acento); box-shadow: 0 0 0 3px var(--crm-acento-suave); } .crm-canal-hora { margin-left: auto; font: 400 11px/16px var(--crm-mono); color: var(--crm-dim); } .crm-canal-cerrar { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; color: var(--crm-dim); cursor: pointer; } .crm-canal-cerrar svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.5; } .crm-canal-cerrar:hover { color: var(--crm-text); } .crm-canal-cerrar:focus-visible, .crm-canal-accion:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; } .crm-canal-texto { margin: 0; font-size: 14px; line-height: 20px; color: var(--crm-text); overflow-wrap: anywhere; } .crm-canal-texto b { font-weight: 500; } .crm-canal-escribe { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 12px; line-height: 16px; color: var(--crm-muted); } .crm-canal-escribe span { display: inline-flex; gap: 3px; } .crm-canal-escribe i { width: 4px; height: 4px; border-radius: 50%; background: var(--crm-muted); animation: crm-canal-punto 1.2s var(--crm-curva) infinite; } .crm-canal-escribe i:nth-child(2) { animation-delay: .15s; } .crm-canal-escribe i:nth-child(3) { animation-delay: .3s; } @keyframes crm-canal-punto { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } } .crm-canal-respuesta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding-top: 8px; border-top: 1px solid var(--crm-line); } .crm-canal-respuesta p { margin: 0; max-height: 7.5em; overflow: hidden; font-size: 12px; line-height: 17px; color: var(--crm-text-2); white-space: pre-line; overflow-wrap: anywhere; -webkit-mask-image: linear-gradient( 180deg, var(--crm-bg) 70%, transparent); mask-image: linear-gradient( 180deg, var(--crm-bg) 70%, transparent); } .crm-canal-visto { font: 600 11px/17px var(--crm-mono); letter-spacing: -0.12em; color: var(--crm-dim); transition: color var(--crm-t-color); } .crm-canal-aviso[data-estado=respondido] .crm-canal-visto { color: var(--crm-acento); } .crm-canal-aviso[data-estado=fallido] .crm-canal-visto { color: var(--crm-error); } .crm-canal-accion { justify-self: start; display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border: 1px solid var(--crm-line-2); background: var(--crm-bg); color: var(--crm-text); font: 500 12px/16px var(--crm-sans); cursor: pointer; } .crm-canal-accion:hover { border-color: var(--crm-control); } @media (max-width: 640px) { .crm-canal { left: 16px; bottom: 16px; } } @media (prefers-reduced-motion: reduce) { .crm-canal-aviso, .crm-canal-escribe i { animation: none; } } .crm-entrada.crm-tel { gap: 0; padding-left: 0; } .crm-tel-prefijo { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 100%; margin: 0; padding: 0 8px 0 6px; border: 0; border-right: 1px solid var(--crm-line-2); border-radius: 0; background: transparent; color: var(--crm-text); font: 400 13px/20px var(--crm-mono); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--crm-t-color); } @media (hover: hover) { .crm-tel-prefijo:hover:not(:disabled) { background: var(--crm-panel-2); } } .crm-tel-prefijo:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: -2px; } .crm-tel-prefijo:disabled { color: var(--crm-dim); cursor: not-allowed; } .crm-entrada.crm-tel:focus-within:has(.crm-tel-prefijo:focus) { border-color: var(--crm-control); } .crm-tel-banda { display: grid; flex: none; place-items: center; width: 20px; height: 20px; background: var(--crm-panel-3); color: var(--crm-text-2); font: 500 11px/12px var(--crm-mono); letter-spacing: 0; } .crm-tel-banda[data-ue] { background: var(--crm-placa-azul); color: var(--crm-placa-letra-ue); } .crm-tel-flecha { width: 14px; height: 14px; color: var(--crm-dim); } .crm-tel-cuerpo { position: relative; display: flex; flex: 1; align-items: center; min-width: 0; height: 100%; padding-left: 8px; } .crm-tel-cuerpo .crm-entrada-control { letter-spacing: 0; } .crm-tel[data-enfocado] .crm-entrada-control::placeholder { color: transparent; } .crm-tel-fantasma { position: absolute; inset: 0 0 0 8px; display: flex; align-items: center; overflow: hidden; color: var(--crm-dim); font: 400 13px/22px var(--crm-mono); letter-spacing: 0; white-space: pre; pointer-events: none; } .crm-tel-hecho { visibility: hidden; } .crm-tel-tipo { display: inline-flex; flex: none; align-items: center; gap: 4px; color: var(--crm-text-2); font: 400 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; } .crm-tel-tipo svg { width: 14px; height: 14px; color: var(--crm-acento); } .crm-tel[data-deshabilitado] .crm-tel-tipo, .crm-tel[data-deshabilitado] .crm-tel-tipo svg { color: var(--crm-dim); } .crm-tel-pista { flex: none; color: var(--crm-dim); font: 400 11px/16px var(--crm-mono); white-space: nowrap; } .crm-tel-lista { position: absolute; top: calc(100% + 4px); left: -1px; z-index: 30; display: grid; min-width: 240px; max-height: 320px; margin: 0; padding: 4px 0; overflow-y: auto; list-style: none; border: 1px solid var(--crm-line-2); background: var(--crm-panel); box-shadow: var(--crm-sombra-capa); animation: crm-ctl-capa-entra var(--crm-t-capa) var(--crm-snap) both; } .crm-tel-opcion { display: grid; grid-template-columns: 20px 48px minmax(0, 1fr); gap: 8px; align-items: center; min-height: 32px; padding: 0 12px; color: var(--crm-text); font-size: 13px; line-height: 20px; cursor: pointer; } .crm-tel-opcion[data-activo] { background: var(--crm-panel-2); } .crm-tel-opcion[aria-selected=true] { background: var(--crm-panel-3); box-shadow: inset 2px 0 var(--crm-acento); } .crm-tel-opcion-mas { font: 400 13px/20px var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-text-2); } .crm-tel-opcion-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-asig { display: grid; gap: 12px; min-width: 0; container-type: inline-size; } .crm-asig-rotulo { color: var(--crm-muted); font: 400 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; } .crm-asig-lista { display: grid; border-top: 1px solid var(--crm-line); } .crm-asig-fila { position: relative; display: grid; grid-template-columns: 20px 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 44px; padding: 4px 12px 4px 8px; border-bottom: 1px solid var(--crm-line); cursor: pointer; transition: background-color var(--crm-t-color); } @media (hover: hover) { .crm-asig-fila:hover:not([data-fuera]) { background: var(--crm-panel-2); transition: none; } } .crm-asig-fila[aria-checked=true] { background: var(--crm-panel-3); } .crm-asig-fila[aria-checked=true]::before { content: ""; position: absolute; top: -1px; bottom: -1px; left: 0; width: 2px; background: var(--crm-acento); } .crm-asig-fila:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: -1px; } .crm-asig-fila[data-fuera] { cursor: not-allowed; } .crm-asig-fila[data-fuera] .crm-asig-nombre { color: var(--crm-dim); } .crm-asig-fila[data-fuera] .crm-asig-detalle { color: var(--crm-aviso); } .crm-asig[data-ocupado] .crm-asig-fila { cursor: progress; } .crm-asig-quien { display: grid; min-width: 0; } .crm-asig-nombre { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--crm-text); font-size: 13px; line-height: 20px; } .crm-asig-nombre-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-asig-actual { display: inline-flex; align-items: center; height: 16px; padding: 0 4px; border: 1px solid var(--crm-line-2); color: var(--crm-muted); font: 400 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; } .crm-asig-detalle { overflow: hidden; color: var(--crm-muted); font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; } .crm-asig-sugerencia { color: var(--crm-text-2); } .crm-asig-sugerencia::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; background: var(--crm-acento); vertical-align: 1px; } .crm-asig-carga { display: inline-flex; align-items: center; gap: 8px; } .crm-asig-palotes { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; } .crm-asig-palotes i { display: block; width: 2px; height: 12px; background: var(--crm-text-2); } .crm-asig-palotes i[data-quinto] { height: 16px; margin-right: 2px; } .crm-asig-fila[data-fuera] .crm-asig-palotes i { background: var(--crm-line-2); } .crm-asig-cifra { min-width: 20px; color: var(--crm-text-2); font: 400 12px/16px var(--crm-mono); font-variant-numeric: tabular-nums; text-align: right; } .crm-asig-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .crm-asig-falta { color: var(--crm-aviso); font-size: 12px; line-height: 16px; } .crm-asig-error { margin: 0; padding-left: 8px; border-left: 2px solid var(--crm-error); color: var(--crm-text); font-size: 12px; line-height: 16px; } .crm-asig-vacio { margin: 0; color: var(--crm-muted); font-size: 13px; line-height: 20px; } @container (max-width: 400px) { .crm-asig-fila { grid-template-columns: 24px minmax(0, 1fr) auto; } .crm-asig-fila > .crm-tecla, .crm-asig-fila > span:first-child:empty { display: none; } } .crm-dup { position: relative; display: grid; gap: 8px; padding: 12px 16px; overflow: hidden; border: 1px solid var(--crm-line-2); border-left: 2px solid var(--crm-aviso); background: var(--crm-panel); } .crm-dup[data-estado=buscando] { border-left-color: var(--crm-line-2); } .crm-dup[data-estado=buscando]::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient( 90deg, transparent, var(--crm-acento) 50%, transparent) no-repeat; background-size: 40% 100%; background-position: -40% 0; animation: crm-filo-continuo var(--crm-t-filo) var(--crm-curva) infinite; } .crm-dup[data-estado=error] { border-left-color: var(--crm-error); } .crm-dup-rotulo { color: var(--crm-text-2); font: 400 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; } .crm-dup-texto { margin: 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-dup-lista { display: grid; margin: 0; padding: 0; list-style: none; } .crm-dup-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--crm-line); } .crm-dup-quien { display: grid; min-width: 0; } .crm-dup-titulo { overflow: hidden; color: var(--crm-text); font-size: 13px; font-weight: 500; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; } .crm-dup-detalle { overflow: hidden; color: var(--crm-muted); font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; } .crm-dup-casan { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; } .crm-dup-casa { display: inline-flex; align-items: baseline; gap: 6px; } .crm-dup-casa-etq { color: var(--crm-text-2); font-size: 12px; line-height: 16px; } .crm-dup-casa-valor { padding-bottom: 1px; border-bottom: 1px solid var(--crm-acento); color: var(--crm-text); font: 400 12px/16px var(--crm-mono); font-variant-numeric: tabular-nums; } .crm-dup-casa-valor > span { color: var(--crm-dim); } .crm-dup-pie { display: flex; justify-content: flex-end; } .crm-dup-limpio { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-dup-limpio svg, .crm-seg-vacio svg { flex: none; width: 14px; height: 14px; color: var(--crm-acento); } .crm-seg { display: grid; gap: 24px; min-width: 0; container-type: inline-size; } .crm-seg-tramo { display: grid; min-width: 0; } .crm-seg-cabeza { display: flex; align-items: center; justify-content: space-between; height: 32px; margin: 0; border-bottom: 1px solid var(--crm-line); color: var(--crm-muted); font: 400 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; } .crm-seg-cuenta { color: var(--crm-dim); font-variant-numeric: tabular-nums; } .crm-seg-cuenta[data-hay] { color: var(--crm-text-2); } .crm-seg-tramo[data-tramo=vencidas] .crm-seg-cuenta[data-hay] { color: var(--crm-error); } .crm-seg-lista { display: grid; margin: 0; padding: 0; list-style: none; } .crm-seg-fila { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--crm-line); transition: background-color var(--crm-t-color); } @media (hover: hover) { .crm-seg-fila:hover { background: var(--crm-panel-2); transition: none; } } .crm-seg-texto { display: grid; min-width: 0; color: inherit; text-decoration: none; } a.crm-seg-texto:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-seg-que { overflow: hidden; color: var(--crm-text); font-size: 13px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; } .crm-seg-para { overflow: hidden; color: var(--crm-text-2); font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; } .crm-seg-motivo { color: var(--crm-text); quotes: "\ab" "\bb"; } .crm-seg-antes { overflow: hidden; color: var(--crm-dim); font: 400 11px/16px var(--crm-mono); text-overflow: ellipsis; white-space: nowrap; } .crm-seg-der { display: inline-flex; align-items: center; gap: 8px; } .crm-seg-cifra { color: var(--crm-text-2); font: 400 12px/16px var(--crm-mono); font-variant-numeric: tabular-nums; white-space: nowrap; } .crm-seg-cifra[data-tramo=vencidas] { color: var(--crm-error); } .crm-seg-cifra[data-tramo=hoy] { color: var(--crm-text); } .crm-seg-acciones { position: absolute; top: 50%; right: 0; display: inline-flex; gap: 2px; padding-left: 8px; background: var(--crm-panel-2); visibility: hidden; transform: translateY(-50%); } .crm-seg-fila:hover .crm-seg-acciones, .crm-seg-fila:focus-within .crm-seg-acciones { visibility: visible; } @media (hover: none) { .crm-seg-fila { grid-template-columns: 24px minmax(0, 1fr) auto; } .crm-seg-acciones { position: static; grid-column: 2 / -1; padding-left: 0; background: none; visibility: visible; transform: none; } } .crm-seg-hoja { display: grid; align-content: center; justify-items: center; width: 24px; height: 28px; border: 1px solid var(--crm-line-2); border-top: 2px solid var(--crm-line-2); background: var(--crm-panel-2); line-height: 1; } .crm-seg-hoja b { color: var(--crm-text); font: 500 12px/12px var(--crm-sans); font-variant-numeric: tabular-nums; } .crm-seg-hoja small { color: var(--crm-dim); font: 400 11px/12px var(--crm-mono); text-transform: uppercase; } .crm-seg-hoja[data-tono=vencida] { border-top-color: var(--crm-error); } .crm-seg-hoja[data-tono=vencida] b { color: var(--crm-error); } .crm-seg-vacio { display: flex; align-items: center; gap: 8px; min-height: 40px; margin: 0; border-bottom: 1px solid var(--crm-line); color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-seg[data-estado=error] { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--crm-line-2); border-left: 2px solid var(--crm-error); } .crm-seg-error { margin: 0; color: var(--crm-text); font-size: 13px; line-height: 20px; } .crm-seg[data-estado=cargando] { gap: 0; } .crm-seg[data-estado=cargando] .crm-seg-fila { grid-template-columns: 24px minmax(0, 1fr); } @container (max-width: 560px) { .crm-seg-fila { grid-template-columns: 24px minmax(0, 1fr) auto; } .crm-seg-acciones { position: static; grid-column: 2 / -1; padding-left: 0; background: none; visibility: visible; transform: none; } } .crm-dict { display: grid; gap: 12px; min-width: 0; container-type: inline-size; } .crm-dict-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .crm-dict-grabando:focus { outline: none; } .crm-dict-vu { display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 0 8px; border: 1px solid var(--crm-line-2); background: var(--crm-panel); } .crm-dict-vu i { display: block; width: 2px; height: 20px; background: var(--crm-acento); transform-origin: center; transition: transform var(--crm-t-pulsar) linear; } .crm-dict-contador { color: var(--crm-text); font: 400 13px/20px var(--crm-mono); font-variant-numeric: tabular-nums; white-space: nowrap; } .crm-dict-contador small { color: var(--crm-dim); font-size: 11px; } .crm-dict-contador[data-aviso] { color: var(--crm-aviso); } .crm-dict-espera { position: relative; min-height: 32px; padding: 0 12px; overflow: hidden; border: 1px solid var(--crm-line-2); color: var(--crm-muted); font-size: 13px; line-height: 20px; } .crm-dict-espera::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient( 90deg, transparent, var(--crm-acento) 50%, transparent) no-repeat; background-size: 40% 100%; background-position: -40% 0; animation: crm-filo-continuo var(--crm-t-filo) var(--crm-curva) infinite; } .crm-dict-texto { display: grid; gap: 8px; } .crm-dict-propuesta { display: grid; gap: 12px; padding: 12px 16px; border: 1px solid var(--crm-line-2); background: var(--crm-panel); } .crm-dict-resumen { color: var(--crm-text-2); font-size: 13px; line-height: 20px; quotes: "\ab" "\bb"; } .crm-dict-cambios { display: grid; margin: 0; padding: 0; list-style: none; } .crm-dict-cambio { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 8px 0; border-top: 1px solid var(--crm-line); } .crm-dict-diff { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; min-width: 0; color: var(--crm-text); font-size: 13px; line-height: 20px; } .crm-dict-diff del { color: var(--crm-dim); text-decoration: line-through; } .crm-dict-diff ins { color: var(--crm-text); text-decoration: none; } .crm-dict-flecha { color: var(--crm-dim); } .crm-dict-nota { grid-column: 2; color: var(--crm-aviso); font-size: 12px; line-height: 16px; } .crm-dict-nada { margin: 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-dict-error { display: grid; gap: 8px; padding: 12px 16px; border: 1px solid var(--crm-line-2); border-left: 2px solid var(--crm-error); } .crm-dict-error p { margin: 0; color: var(--crm-text); font-size: 13px; line-height: 20px; } @container (max-width: 400px) { .crm-dict-cambio { grid-template-columns: minmax(0, 1fr); } .crm-dict-nota { grid-column: 1; } } @media (prefers-reduced-motion: reduce) { .crm-dict-vu i { transition: none; } .crm-dup[data-estado=buscando]::after, .crm-dict-espera::after { animation: none; background-position: 50% 0; } .crm-tel-lista { animation: none; } } @media (forced-colors: active) { .crm-asig-fila[aria-checked=true]::before, .crm-asig-sugerencia::before, .crm-dict-vu i { background: Highlight; forced-color-adjust: none; } .crm-tel-banda[data-ue] { forced-color-adjust: none; } } .crm-orbe { position: relative; display: inline-grid; place-items: center; flex: none; width: var(--crm-orbe, 64px); height: var(--crm-orbe, 64px); font-family: var(--crm-mono); color: var(--crm-dim); } .crm-orbe-lienzo { display: block; width: 100%; height: 100%; } .crm-voz { position: relative; display: grid; grid-template-rows: auto 1fr; gap: 12px; min-height: 100%; padding: 12px 16px 16px; background: var(--crm-panel); border: 1px solid var(--crm-acento); container-type: inline-size; } .crm-voz:focus { outline: none; } .crm-voz-cab { display: flex; align-items: center; gap: 12px; min-width: 0; } .crm-voz-estado { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; } .crm-voz-rotulo { font: 500 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--crm-acento); } .crm-voz[data-estado=pensando] .crm-voz-rotulo { color: var(--crm-dim); } .crm-voz-motor { font: 400 11px/16px var(--crm-mono); color: var(--crm-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crm-voz-reloj { font: 500 13px/20px var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-text); white-space: nowrap; } .crm-voz-reloj small { color: var(--crm-dim); font-size: 11px; } .crm-voz-reloj[data-aviso] { color: var(--crm-aviso); } .crm-voz-vu { display: inline-flex; align-items: center; gap: 2px; height: 24px; } .crm-voz-vu i { display: block; width: 2px; height: 20px; background: var(--crm-acento); transform-origin: center; transform: scaleY(.125); transition: transform 80ms linear; } .crm-voz-acciones { display: inline-flex; align-items: center; gap: 8px; } .crm-voz-texto { margin: 0; font: 400 16px/24px var(--crm-sans); color: var(--crm-text); overflow-wrap: anywhere; min-height: 48px; max-height: 240px; overflow: auto; } .crm-voz-texto .crm-voz-prov { color: var(--crm-dim); } .crm-voz-texto[data-vacio] { color: var(--crm-dim); font-size: 14px; } .crm-voz-cursor { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -0.15em; background: var(--crm-acento); animation: crm-voz-cursor 1s steps(1) infinite; } @keyframes crm-voz-cursor { 50% { opacity: 0; } } .crm-voz-aviso { font: 400 11px/16px var(--crm-sans); color: var(--crm-dim); } @media (prefers-reduced-motion: reduce) { .crm-voz-vu i { transition: none; } .crm-voz-cursor { animation: none; } } @container (max-width: 420px) { .crm-voz-vu { display: none; } } .crm-boton-voz { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 0; overflow: hidden; border: 1px solid var(--crm-line-2); background: var(--crm-bg); color: var(--crm-text); font: 500 13px/20px var(--crm-sans); cursor: pointer; transition: border-color var(--crm-t-pulsar, 120ms), background var(--crm-t-pulsar, 120ms); } .crm-boton-voz:hover:not(:disabled) { border-color: var(--crm-acento); } .crm-boton-voz:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; } .crm-boton-voz:disabled { color: var(--crm-dim); cursor: default; } .crm-boton-voz .crm-tecla { margin-left: 4px; } .crm-boton-voz[data-tactil] { height: 48px; padding: 0 16px 0 8px; } .crm-voz-rotulo, .crm-voz-estado { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } @container (max-width: 420px) { .crm-voz-cab { gap: 8px; } .crm-voz-motor { display: none; } .crm-voz-reloj small { display: none; } } .crm-dato-caja { container-type: inline-size; min-width: 0; } .crm-dato { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center; min-height: 32px; padding: 4px 0; } .crm-dato-rotulo { font: 500 11px/16px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--crm-dim); } .crm-dato-valor { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 28px; padding: 0 6px; margin-left: -6px; border: 1px solid transparent; background: transparent; color: var(--crm-text); text-align: left; cursor: text; font: 15px/22px var(--crm-sans); transition: border-color var(--crm-t-color, 120ms), background var(--crm-t-color, 120ms); } .crm-dato-valor[data-mono] { font: 14px/22px var(--crm-mono); font-variant-numeric: tabular-nums; } .crm-dato-valor:hover:not(:disabled) { border-color: var(--crm-line); background: var(--crm-panel-2, var(--crm-panel)); } .crm-dato-valor:disabled { cursor: default; } .crm-dato-valor:focus-visible, .crm-dato-hueco:focus-visible, .crm-dato-cambios:focus-visible { outline: var(--crm-foco-ancho, 1px) solid var(--crm-acento); outline-offset: 2px; } .crm-dato-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-dato-cambiar { margin-left: auto; font: 500 11px/16px var(--crm-mono); letter-spacing: .06em; color: var(--crm-dim); opacity: 0; transition: opacity var(--crm-t-color, 120ms); } .crm-dato-valor:hover .crm-dato-cambiar, .crm-dato-valor:focus-visible .crm-dato-cambiar { opacity: 1; } .crm-dato-valor[data-asentado] { animation: crm-dato-asienta 700ms var(--crm-snap, cubic-bezier(.2, .8, .2, 1)) both; } @keyframes crm-dato-asienta { 0% { transform: translateY(-2px); border-color: var(--crm-acento); background: var(--crm-acento-suave, transparent); } 60% { transform: translateY(0); border-color: var(--crm-acento-linea, var(--crm-acento)); } 100% { border-color: transparent; background: transparent; } } .crm-dato-hueco { display: inline-flex; align-items: center; gap: 8px; justify-self: start; min-height: 28px; padding: 0 10px; border: 1px dashed var(--crm-line-2, var(--crm-line)); background: transparent; color: var(--crm-muted, var(--crm-dim)); font: 14px/20px var(--crm-sans); white-space: nowrap; cursor: pointer; transition: color var(--crm-t-color, 120ms), border-color var(--crm-t-color, 120ms), background var(--crm-t-color, 120ms); } .crm-dato-hueco:hover { color: var(--crm-text); border-color: var(--crm-acento-linea, var(--crm-acento)); background: var(--crm-acento-suave, transparent); } .crm-dato-mas { font: 500 15px/1 var(--crm-mono); color: var(--crm-acento); } .crm-dato-falta { font: 14px/20px var(--crm-sans); color: var(--crm-dim); } .crm-dato-edicion { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; } .crm-dato-edicion > :first-child { flex: 1 1 220px; min-width: 0; } .crm-dato-problema { flex-basis: 100%; margin: 2px 0 0; font: 13px/18px var(--crm-sans); color: var(--crm-error); } .crm-dato-conflicto { flex-basis: 100%; display: grid; gap: 8px; margin-top: 4px; padding: 10px 12px; border: 1px solid var(--crm-aviso-linea, var(--crm-aviso)); border-left-width: 3px; background: var(--crm-panel); font: 13px/18px var(--crm-sans); color: var(--crm-text); } .crm-dato-conflicto p { margin: 0; } .crm-dato-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .crm-dato-dos span { display: grid; gap: 2px; } .crm-dato-dos small { font: 500 10px/14px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--crm-dim); } .crm-dato-dos b { font: 500 14px/20px var(--crm-mono); overflow-wrap: anywhere; } .crm-dato-acciones { display: flex; gap: 6px; justify-content: flex-end; } .crm-dato-pie { grid-column: 2; display: flex; align-items: center; gap: 10px; min-height: 0; } .crm-dato-pie:empty { display: none; } .crm-dato-sello { font: 11px/16px var(--crm-mono); color: var(--crm-dim); } .crm-dato-cambios { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; border-bottom: 1px solid var(--crm-line); background: transparent; color: var(--crm-muted, var(--crm-dim)); font: 11px/16px var(--crm-mono); cursor: pointer; } .crm-dato-cambios:hover { color: var(--crm-text); } .crm-dato-n { font-variant-numeric: tabular-nums; } .crm-dato-motivo { grid-column: 2; font: 12px/16px var(--crm-sans); color: var(--crm-dim); } .crm-dato > .crm-dato-historial { grid-column: 2; } .crm-dato-historial { display: grid; gap: 6px; margin: 4px 0 2px; padding: 8px 10px; list-style: none; border-left: 1px solid var(--crm-line); background: var(--crm-panel-2, transparent); } .crm-dato-historial li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font: 13px/18px var(--crm-mono); } .crm-dato-antes { color: var(--crm-dim); text-decoration: line-through; text-decoration-color: var(--crm-line-2, var(--crm-line)); } .crm-dato-flecha { color: var(--crm-dim); } .crm-dato-despues { color: var(--crm-text); } .crm-dato-quien { flex-basis: 100%; font: 11px/16px var(--crm-mono); color: var(--crm-dim); } @media (prefers-reduced-motion: reduce) { .crm-dato-valor[data-asentado] { animation: none; border-color: var(--crm-acento-linea, var(--crm-acento)); } } @container (max-width: 440px) { .crm-dato { grid-template-columns: 1fr; row-gap: 0; padding: 6px 0; } .crm-dato-pie, .crm-dato-motivo, .crm-dato > .crm-dato-historial { grid-column: 1; } .crm-dato-valor { margin-left: -6px; } } :is(.crm-entradas, .crm-marcador, .crm-anuncio, .crm-misiva, .crm-contacto-canal, .crm-origen, .crm-turno, .crm-pais-ue), :is(.crm-entradas, .crm-marcador, .crm-anuncio, .crm-misiva, .crm-contacto-canal) * { box-sizing: border-box; } .crm-turno { position: relative; display: inline-flex; flex: none; align-items: center; height: 16px; padding: 0 6px; border: 1px solid var(--crm-line-2); background: var(--crm-panel); color: var(--crm-dim); font: 500 10px/14px var(--crm-mono); letter-spacing: .04em; font-variant-numeric: tabular-nums; white-space: nowrap; -webkit-mask: radial-gradient( circle 3px at 0 50%, transparent 2.5px, currentColor 3px) left / 51% 100% no-repeat, radial-gradient( circle 3px at 100% 50%, transparent 2.5px, currentColor 3px) right / 51% 100% no-repeat; mask: radial-gradient( circle 3px at 0 50%, transparent 2.5px, currentColor 3px) left / 51% 100% no-repeat, radial-gradient( circle 3px at 100% 50%, transparent 2.5px, currentColor 3px) right / 51% 100% no-repeat; } .crm-origen { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--crm-text-2); font: 400 13px/20px var(--crm-sans); white-space: nowrap; } .crm-origen-marca { display: inline-grid; flex: none; place-items: center; width: 24px; height: 24px; border: 1px solid var(--crm-text-2); outline: 1px solid var(--crm-line-2); outline-offset: 1px; color: var(--crm-text); font: 500 10px/1 var(--crm-mono); letter-spacing: .02em; } .crm-origen[data-canal=sin] .crm-origen-marca, .crm-origen[data-canal=otro] .crm-origen-marca { border-style: dashed; color: var(--crm-dim); } .crm-origen-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .crm-origen-moneda { display: inline-grid; flex: none; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1px dotted var(--crm-text-2); box-shadow: inset 0 0 0 2px var(--crm-panel), inset 0 0 0 3px var(--crm-line-2); color: var(--crm-text); font: 500 9px/1 var(--crm-mono); } .crm-pais-ue { display: inline-flex; align-items: center; gap: 8px; color: var(--crm-text-2); font: 400 13px/20px var(--crm-sans); white-space: nowrap; } .crm-pais-ue-banda { display: inline-grid; grid-template-rows: 10px 8px; place-items: center; width: 16px; height: 24px; padding: 1px 0; background: var(--crm-panel-3); border: 1px solid var(--crm-line-2); } .crm-pais-ue[data-ue] .crm-pais-ue-banda { background: var(--crm-placa-azul); border-color: var(--crm-placa-azul); } .crm-pais-ue-estrellas { width: 10px; height: 10px; fill: var(--crm-placa-estrella); } .crm-pais-ue-codigo { color: var(--crm-text); font: 500 8px/8px var(--crm-mono); letter-spacing: 0; } .crm-pais-ue[data-ue] .crm-pais-ue-codigo { color: var(--crm-placa-letra-ue); } .crm-pais-ue[data-detectado] .crm-pais-ue-nombre { color: var(--crm-dim); text-decoration: underline dotted var(--crm-line-2); text-underline-offset: 3px; } .crm-marcador { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(112px, 1fr); border: 1px solid var(--crm-line); background: var(--crm-panel); overflow-x: auto; scrollbar-width: none; } .crm-marcador-casilla { position: relative; display: grid; gap: 4px; align-content: start; min-width: 0; margin: 0; padding: 12px 16px 12px; border: 0; border-right: 1px solid var(--crm-line); background: transparent; color: var(--crm-dim); text-align: left; cursor: pointer; transition: background-color var(--crm-t-color), color var(--crm-t-color); } .crm-marcador-casilla:last-child { border-right: 0; } .crm-marcador-casilla[aria-checked=true] { color: var(--crm-text); background: var(--crm-panel-2); } .crm-marcador-casilla[aria-checked=true]::before { content: ""; position: absolute; inset: -1px 0 auto; height: 2px; background: var(--crm-acento); } @media (hover: hover) { .crm-marcador-casilla:hover:not([aria-checked=true]) { background: var(--crm-panel-2); color: var(--crm-text-2); } } .crm-marcador-casilla:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: -2px; } .crm-marcador-cab { display: flex; align-items: flex-start; gap: 6px; min-width: 0; min-height: 32px; } .crm-marcador { container-type: inline-size; } .crm-marcador:has(> .crm-marcador-casilla:nth-child(8)) { grid-auto-columns: minmax(0, 1fr); } @container (max-width: 1100px) { .crm-marcador-casilla { padding: 12px 8px; } .crm-marcador-cab { gap: 4px; min-height: 48px; } .crm-marcador-etiqueta { font-size: 11px; letter-spacing: .02em; overflow-wrap: break-word; } } .crm-marcador-glifo { flex: none; margin-top: 1px; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: square; } .crm-marcador-etiqueta { font: 500 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere; } .crm-marcador-cifra { display: block; color: var(--crm-text); font: 500 24px/28px var(--crm-sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .crm-marcador-casilla[aria-checked=false] .crm-marcador-cifra { color: var(--crm-text-2); } .crm-marcador-casilla[data-tono=error] :is(.crm-marcador-glifo, .crm-marcador-cifra) { color: var(--crm-error); } .crm-marcador-casilla[data-tono=aviso] :is(.crm-marcador-glifo, .crm-marcador-cifra) { color: var(--crm-aviso); } .crm-marcador-cifra[data-cae] { animation: crm-marcador-cae var(--crm-t-capa) var(--crm-snap, ease-out) both; transform-origin: 50% 0; } @keyframes crm-marcador-cae { from { transform: perspective(200px) rotateX(-80deg); opacity: .2; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .crm-marcador-cifra[data-cae] { animation: none; } } .crm-entradas { position: relative; container: crm-entradas / inline-size; min-width: 0; border: 1px solid var(--crm-line); background: var(--crm-panel); } .crm-entradas[data-vacio] { display: grid; place-items: center; min-height: 240px; } .crm-entrada-fila { content-visibility: auto; contain-intrinsic-size: auto 52px; } .crm-entradas-rotulo { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 16px; border-bottom: 1px solid var(--crm-line); background: var(--crm-panel-2); color: var(--crm-dim); font: 500 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; } .crm-entradas-cuenta { font-variant-numeric: tabular-nums; } .crm-entradas-rotulo[data-tramo=ahora] { color: var(--crm-text); } .crm-entradas-rotulo[data-tramo=ahora]::after { content: ""; position: absolute; inset: auto 0 -1px; height: 1px; background: var(--crm-acento); animation: crm-entradas-latido var(--crm-t-latido, 1800ms) ease-in-out infinite; } @keyframes crm-entradas-latido { 50% { opacity: .25; } } @media (prefers-reduced-motion: reduce) { .crm-entradas-rotulo[data-tramo=ahora]::after { animation: none; } } .crm-entrada-fila { position: relative; display: grid; grid-template-columns: 96px minmax(176px, 1.1fr) minmax(0, 2.6fr) 148px 156px 112px; align-items: center; column-gap: 16px; height: 52px; padding: 0 16px; border-bottom: 1px solid var(--crm-line); background: var(--crm-panel); color: var(--crm-text-2); font: 400 13px/20px var(--crm-sans); cursor: pointer; transition: background-color var(--crm-t-color); } .crm-entradas-lista:has(.crm-entrada-sel) .crm-entrada-fila { grid-template-columns: 20px 96px minmax(176px, 1.1fr) minmax(0, 2.6fr) 148px 156px 112px; } .crm-entradas-lista[data-cifra] .crm-entrada-fila { grid-template-columns: 96px minmax(176px, 1.1fr) minmax(0, 2.3fr) 112px 148px 156px 112px; } .crm-entradas-lista[data-cifra]:has(.crm-entrada-sel) .crm-entrada-fila { grid-template-columns: 20px 96px minmax(176px, 1.1fr) minmax(0, 2.3fr) 112px 148px 156px 112px; } .crm-entrada-cifra { display: flex; justify-content: flex-end; min-width: 0; } @media (hover: hover) { .crm-entrada-fila:hover { background: var(--crm-panel-2); } } .crm-entrada-fila:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: -1px; } .crm-entrada-fila[data-activa] { background: var(--crm-panel-2); } .crm-entrada-fila[data-activa]::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--crm-acento); } .crm-entrada-fila[data-seleccionada] { background: var(--crm-seleccion, var(--crm-panel-2)); } .crm-entrada-sel { display: grid; place-items: center; } .crm-entrada-casilla { width: 14px; height: 14px; margin: 0; padding: 0; border: 1px solid var(--crm-control); background: var(--crm-panel); cursor: pointer; } .crm-entrada-casilla[aria-checked=true] { border-color: var(--crm-acento); background: var(--crm-acento); box-shadow: inset 0 0 0 2px var(--crm-panel); } .crm-entrada-reloj { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .crm-entrada-reloj .crm-ini-reloj { flex: none; } .crm-entrada-reloj .crm-ini-reloj-esfera { width: 20px; height: 20px; } .crm-entrada-reloj-hueco { flex: none; width: 20px; height: 20px; } .crm-entrada-edad { color: var(--crm-dim); font: 400 12px/16px var(--crm-mono); font-variant-numeric: tabular-nums; white-space: nowrap; } .crm-entrada-reloj[data-pendiente]:has([data-tramo=aviso]) .crm-entrada-edad { color: var(--crm-aviso); } .crm-entrada-reloj[data-pendiente]:has([data-tramo=vencido]) .crm-entrada-edad { color: var(--crm-error); } .crm-entrada-quien { display: grid; gap: 2px; min-width: 0; } .crm-entrada-nombre { overflow: hidden; color: var(--crm-text); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } .crm-entrada-nombre[data-detectado], .crm-entrada-tel[data-detectado] { text-decoration: underline dotted var(--crm-line-2); text-underline-offset: 3px; } .crm-entrada-nombre[data-detectado] { color: var(--crm-text-2); } .crm-entrada-sub { display: flex; overflow: hidden; align-items: center; gap: 8px; min-width: 0; color: var(--crm-dim); font-size: 12px; line-height: 16px; white-space: nowrap; } .crm-entrada-tel { flex: none; font: 400 12px/16px var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-text-2); } .crm-entrada-empresa { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .crm-entrada-lectura { display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; } .crm-entrada-pide { flex: none; max-width: 45%; overflow: hidden; color: var(--crm-text); font-weight: 500; text-overflow: ellipsis; } .crm-entrada-texto { min-width: 0; overflow: hidden; color: var(--crm-dim); text-overflow: ellipsis; } .crm-entrada-marcas { display: inline-flex; flex: none; align-items: center; gap: 4px; margin-left: auto; } .crm-entrada-origen { min-width: 0; overflow: hidden; } .crm-entrada-lleva { min-width: 0; } .crm-entrada-persona { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; color: var(--crm-text-2); white-space: nowrap; } .crm-entrada-persona > span:last-child { overflow: hidden; text-overflow: ellipsis; } .crm-entrada-persona[data-provisional] > span:last-child { color: var(--crm-dim); font-style: italic; } .crm-entrada-ranura { display: inline-flex; align-items: center; gap: 6px; height: 24px; margin: 0; padding: 0 8px; border: 1px dashed var(--crm-aviso-linea, var(--crm-aviso)); background: var(--crm-aviso-suave); color: var(--crm-aviso); font: 500 12px/16px var(--crm-sans); white-space: nowrap; cursor: pointer; } .crm-entrada-ranura[data-quieta] { cursor: default; } @media (hover: hover) { button.crm-entrada-ranura:hover { border-style: solid; } } .crm-entrada-ranura:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-entrada-estado { overflow: hidden; color: var(--crm-dim); font: 400 12px/16px var(--crm-mono); text-align: right; text-overflow: ellipsis; white-space: nowrap; } .crm-entrada-estado[data-tono=aviso] { color: var(--crm-aviso); } .crm-entrada-estado[data-tono=error] { color: var(--crm-error); } .crm-entrada-estado[data-tono=hecho] { color: var(--crm-acento); } .crm-entrada-acciones { position: absolute; inset: 0 0 0 auto; display: none; align-items: center; justify-content: flex-end; gap: 4px; width: calc(148px + 156px + 112px + 32px); padding: 0 16px 0 0; background: inherit; } @media (hover: hover) { .crm-entrada-fila:hover .crm-entrada-acciones { display: inline-flex; } .crm-entrada-fila:hover :is(.crm-entrada-origen, .crm-entrada-lleva, .crm-entrada-estado) { visibility: hidden; } } .crm-entrada-fila:is(:focus-visible, :focus-within) .crm-entrada-acciones { display: inline-flex; } .crm-entrada-fila:is(:focus-visible, :focus-within) :is(.crm-entrada-origen, .crm-entrada-lleva, .crm-entrada-estado) { visibility: hidden; } .crm-entradas-lote { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 16px; border-top: 1px solid var(--crm-line-2); background: var(--crm-panel-3); color: var(--crm-text-2); box-shadow: var(--crm-sombra-capa); animation: crm-entradas-lote var(--crm-t-capa) var(--crm-snap, ease-out) both; } @keyframes crm-entradas-lote { from { transform: translateY(100%); } } @media (prefers-reduced-motion: reduce) { .crm-entradas-lote { animation: none; } } .crm-entradas-lote-cuenta strong { color: var(--crm-text); font-weight: 500; font-variant-numeric: tabular-nums; } .crm-entradas-lote-acciones { display: inline-flex; flex: 1; gap: 8px; } @container crm-entradas (max-width: 1100px) { .crm-entrada-acciones { width: calc(36px + 140px + 32px); } .crm-entrada-fila, .crm-entradas-lista:has(.crm-entrada-sel) .crm-entrada-fila { grid-template-columns: 88px minmax(160px, 1fr) minmax(0, 2fr) 36px 140px; } .crm-entradas-lista:has(.crm-entrada-sel) .crm-entrada-fila { grid-template-columns: 20px 88px minmax(160px, 1fr) minmax(0, 2fr) 36px 140px; } .crm-entradas-lista[data-cifra] .crm-entrada-fila { grid-template-columns: 88px minmax(160px, 1fr) minmax(0, 2fr) 104px 36px 140px; } .crm-entradas-lista[data-cifra]:has(.crm-entrada-sel) .crm-entrada-fila { grid-template-columns: 20px 88px minmax(160px, 1fr) minmax(0, 2fr) 104px 36px 140px; } .crm-entrada-estado { display: none; } .crm-entrada-origen .crm-origen-nombre, .crm-entrada-origen .crm-origen-moneda { display: none; } } @container crm-entradas (max-width: 720px) { .crm-entrada-fila, .crm-entradas-lista:has(.crm-entrada-sel) .crm-entrada-fila { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "reloj quien origen" "reloj lectura lleva"; column-gap: 12px; row-gap: 4px; height: 64px; padding: 0 16px; align-content: center; } .crm-entrada-sel, .crm-entrada-estado, .crm-entrada-cifra { display: none; } .crm-entrada-reloj { grid-area: reloj; flex-direction: column; justify-content: center; gap: 4px; align-self: stretch; } .crm-entrada-quien { grid-area: quien; } .crm-entrada-quien .crm-entrada-sub { display: none; } .crm-entrada-lectura { grid-area: lectura; } .crm-entrada-origen { grid-area: origen; justify-self: end; } .crm-entrada-origen .crm-origen-nombre, .crm-entrada-origen .crm-origen-moneda { display: none; } .crm-entrada-lleva { grid-area: lleva; justify-self: end; } .crm-entrada-persona > span:last-child, .crm-entrada-marcas { display: none; } .crm-entrada-ranura { height: 20px; } .crm-entrada-acciones { display: none !important; } } .crm-anuncio { position: relative; display: grid; gap: 8px; margin: 0; padding: 16px 16px 0; border: 1px solid var(--crm-line-2); background: var(--crm-panel); color: var(--crm-text-2); } .crm-anuncio-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; } .crm-anuncio-rotulo { color: var(--crm-dim); font: 500 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } .crm-anuncio-hora { margin-left: auto; color: var(--crm-dim); font: 400 11px/16px var(--crm-mono); font-variant-numeric: tabular-nums; white-space: nowrap; } .crm-anuncio-titulo { color: var(--crm-text); font: 500 20px/24px var(--crm-sans); letter-spacing: -.01em; overflow-wrap: anywhere; } .crm-anuncio-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; } .crm-anuncio-ref { color: var(--crm-text-2); font: 400 12px/16px var(--crm-mono); font-variant-numeric: tabular-nums; } .crm-anuncio-ref > span { color: var(--crm-dim); } .crm-anuncio-tiras { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); grid-template-rows: 28px; grid-auto-rows: 0; overflow: hidden; height: 28px; margin: 0 -16px; border-top: 1px dashed var(--crm-line-2); } .crm-anuncio-tiras > span { display: grid; place-items: center; overflow: hidden; padding: 0 4px; border-right: 1px dashed var(--crm-line-2); color: var(--crm-dim); font: 400 10px/1 var(--crm-mono); letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; } .crm-misiva { position: relative; display: grid; gap: 12px; padding: 20px; border: 1px solid var(--crm-line-2); background: var(--crm-panel); color: var(--crm-text-2); } .crm-misiva-remite { color: var(--crm-dim); font: 400 12px/16px var(--crm-mono); letter-spacing: .04em; } .crm-misiva-aviso { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--crm-aviso-linea, var(--crm-aviso)); background: var(--crm-aviso-suave); color: var(--crm-aviso); font: 500 12px/16px var(--crm-sans); } .crm-misiva-cuerpo { display: grid; gap: 12px; color: var(--crm-text); font: 400 14px/22px var(--crm-sans); } .crm-misiva-cuerpo p { margin: 0; overflow-wrap: anywhere; } .crm-misiva-vacia { color: var(--crm-dim); } .crm-misiva-marca { padding: 0 1px; background: linear-gradient(transparent 58%, var(--crm-acento-suave) 58%); color: inherit; } .crm-misiva-firma { display: grid; gap: 2px; padding-top: 12px; border-top: 1px dashed var(--crm-line-2); } .crm-misiva-persona { color: var(--crm-text); font: 500 14px/20px var(--crm-sans); } .crm-misiva-empresa { color: var(--crm-dim); font: 400 13px/20px var(--crm-sans); } .crm-misiva-matasellos { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--crm-text-2); border-radius: 50%; outline: 1px dashed var(--crm-line-2); outline-offset: 2px; color: var(--crm-text-2); font: 500 11px/1 var(--crm-mono); letter-spacing: .06em; transform: rotate(-12deg); } .crm-misiva:has(.crm-misiva-matasellos) .crm-misiva-cuerpo { padding-right: 32px; } .crm-misiva-necesita { display: grid; gap: 8px; margin: 0; padding-top: 12px; border-top: 1px solid var(--crm-line); } .crm-misiva-necesita > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; } .crm-misiva-necesita dt { width: 72px; color: var(--crm-dim); font: 500 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; } .crm-misiva-necesita dd { margin: 0; padding: 0 6px; border: 1px solid var(--crm-line-2); color: var(--crm-text); font: 400 12px/20px var(--crm-sans); } .crm-contacto-canal { display: flex; flex-wrap: wrap; gap: 8px; } .crm-contacto-canal-llamar { gap: 12px; } .crm-contacto-canal-numero { font: 500 14px/20px var(--crm-mono); font-variant-numeric: tabular-nums; letter-spacing: .02em; } .crm-contacto-canal-numero[data-detectado] { text-decoration: underline dotted; text-underline-offset: 3px; } .crm-contacto-canal[data-sin] { display: grid; gap: 8px; padding: 12px; border: 1px dashed var(--crm-line-2); } .crm-contacto-canal-sin { color: var(--crm-dim); font: 400 13px/20px var(--crm-sans); } .crm-lista-ficha { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; container: crm-lista-ficha / inline-size; } .crm-lista-ficha[data-abierta] { grid-template-columns: minmax(0, 1fr) 9px var(--crm-ficha-ancho, 600px); } .crm-lista-ficha-lista { min-width: 0; } .crm-lista-ficha-borde { position: sticky; top: 0; display: grid; place-items: center; align-self: stretch; width: 9px; min-height: 100%; cursor: col-resize; touch-action: none; } .crm-lista-ficha-borde > span { width: 1px; height: 100%; background: var(--crm-line); box-shadow: 0 0 0 0 transparent; } .crm-lista-ficha-borde::after { content: ""; position: absolute; top: 50%; left: 3px; width: 3px; height: 20px; margin-top: -10px; background: radial-gradient( circle, var(--crm-line-2) 1.5px, transparent 1.6px) 0 0 / 3px 8px repeat-y; } .crm-lista-ficha-borde:is(:hover, :active, :focus-visible)::after { background-image: radial-gradient( circle, var(--crm-acento) 1.5px, transparent 1.6px); } .crm-lista-ficha-borde:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: -2px; } .crm-lista-ficha-ficha { position: sticky; top: 0; display: grid; align-content: start; gap: 16px; min-width: 0; max-height: calc(100dvh - var(--crm-marco-arriba, 44px) - var(--crm-marco-abajo, 32px)); overflow-y: auto; padding: 16px 20px 24px; border: 1px solid var(--crm-line); background: var(--crm-panel); overscroll-behavior: contain; animation: crm-ficha-entra var(--crm-t-panel, 240ms) var(--crm-snap, ease-out) both; } @keyframes crm-ficha-entra { from { transform: translateX(16px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .crm-lista-ficha-ficha { animation: none; } } .crm-lista-ficha-mandos { display: flex; justify-content: flex-end; gap: 4px; margin: -8px -12px 0 0; } .crm-lista-ficha[data-amplia] { grid-template-columns: minmax(0, 1fr); } .crm-lista-ficha[data-amplia] :is(.crm-lista-ficha-lista, .crm-lista-ficha-borde) { display: none; } .crm-lista-ficha[data-amplia] .crm-lista-ficha-ficha { max-height: none; padding: 24px max(24px, calc((100% - 880px) / 2)); } @container crm-lista-ficha (max-width: 960px) { .crm-lista-ficha[data-abierta] { grid-template-columns: minmax(0, 1fr); } .crm-lista-ficha-borde { display: none; } .crm-lista-ficha-ficha { position: fixed; inset: var(--crm-marco-arriba, 44px) 0 var(--crm-marco-abajo, 32px); z-index: 400; max-height: none; border: 0; padding-bottom: 24px; } .crm-lista-ficha-mandos { position: sticky; top: -16px; z-index: 1; margin: -16px -20px 0; padding: 8px 12px; border-bottom: 1px solid var(--crm-line); background: var(--crm-panel); } } .crm-entrada-nombre[data-anonimo] { color: var(--crm-dim); font-weight: 400; } .crm-misiva-adjunto { margin: -20px -20px 4px; } .crm-misiva-adjunto > .crm-anuncio { border-width: 0 0 1px; } .crm-misiva:has(.crm-misiva-adjunto) .crm-misiva-matasellos { position: static; justify-self: end; margin-bottom: -44px; transform: rotate(-12deg) translateY(4px); } .crm-modal.crm-ficha-modal { --crm-modal-ancho: min(1320px, 92vw); top: 50%; left: 50%; width: min(1320px, 92vw); height: min(88vh, 880px); max-height: none; translate: -50% -50%; grid-template-rows: auto minmax(0, 1fr); } .crm-modal.crm-ficha-modal[data-completa] { position: fixed; inset: auto; min-height: 0; max-height: none; translate: none; height: auto; border-width: 0 0 0 1px; box-shadow: none; } .crm-modal.crm-ficha-modal[data-completa]:not([style*=top]) { inset: 0; width: auto; } .crm-ficha-modal-cab { position: relative; z-index: 2; display: grid; gap: 12px; padding: 12px 20px 16px; border-bottom: 1px solid var(--crm-line); background: var(--crm-panel); } .crm-ficha-modal-barra { display: flex; align-items: center; gap: 12px; min-width: 0; } .crm-ficha-modal-rotulo { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; } .crm-ficha-modal-pos { display: inline-flex; align-items: center; gap: 4px; } .crm-ficha-modal-tique { display: inline-flex; align-items: baseline; gap: 4px; padding: 0 8px; border: 1px solid var(--crm-line-2); color: var(--crm-dim); font: 400 12px/22px var(--crm-mono); font-variant-numeric: tabular-nums; } .crm-ficha-modal-tique strong { display: inline-block; color: var(--crm-text); font-weight: 500; animation: crm-marcador-cae var(--crm-t-capa) var(--crm-snap, ease-out) both; transform-origin: 50% 0; } @media (prefers-reduced-motion: reduce) { .crm-ficha-modal-tique strong { animation: none; } } .crm-ficha-modal-mandos { display: inline-flex; gap: 4px; margin-left: auto; } .crm-ficha-modal-quien { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; } .crm-ficha-modal-nombre { display: grid; gap: 4px; min-width: 0; } .crm-modal-titulo.crm-ficha-modal-titulo { overflow: visible; font: 500 24px/28px var(--crm-sans); letter-spacing: -.01em; white-space: normal; overflow-wrap: anywhere; } .crm-ficha-modal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--crm-text-2); font: 400 13px/20px var(--crm-sans); } .crm-ficha-modal-accion { flex: none; } .crm-modal-cuerpo.crm-ficha-modal-cuerpo { padding: 20px; container: crm-ficha-modal / inline-size; } .crm-ficha-modal-columnas { display: grid; gap: 20px; align-items: start; } .crm-ficha-modal-principal, .crm-ficha-modal-hechos { display: grid; gap: 16px; align-content: start; min-width: 0; } @container crm-ficha-modal (min-width: 840px) { .crm-ficha-modal-columnas[data-con-hechos] { grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); gap: 32px; } .crm-ficha-modal-hechos { padding-left: 24px; border-left: 1px solid var(--crm-line); } } @media (max-width: 600px) { .crm-modal.crm-ficha-modal:not([data-completa]) { inset: 0; width: 100%; height: 100%; max-height: none; border: 0; translate: none; } .crm-ficha-modal-cab { padding: 8px 16px 12px; } .crm-ficha-modal-pos .crm-tecla, .crm-ficha-modal-mandos .crm-tecla { display: none; } .crm-ficha-modal-mandos > :first-child { display: none; } .crm-ficha-modal-barra { flex-wrap: wrap; } .crm-ficha-modal-accion { width: 100%; } .crm-modal-cuerpo.crm-ficha-modal-cuerpo { padding: 16px; } } .crm-producto { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; margin: 0; padding: 16px; border: 1px solid var(--crm-line-2); background: var(--crm-panel); } .crm-producto-ojal { position: absolute; top: -7px; left: 72px; width: 12px; height: 12px; border: 1px solid var(--crm-line-2); border-radius: 50%; background: var(--crm-bg); } .crm-producto-ojal::before { content: ""; position: absolute; bottom: 10px; left: 5px; width: 1px; height: 12px; background: var(--crm-line-2); } .crm-producto-foto { display: grid; place-items: center; width: 112px; height: 84px; overflow: hidden; border: 1px solid var(--crm-line); background: var(--crm-panel-2); } .crm-producto-foto img { width: 100%; height: 100%; object-fit: contain; } .crm-producto-datos { display: grid; align-content: start; gap: 2px; min-width: 0; } .crm-producto-procedencia { color: var(--crm-dim); font: 500 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; } .crm-producto-nombre { color: var(--crm-text); font: 500 16px/24px var(--crm-sans); overflow-wrap: anywhere; } .crm-producto-categoria { color: var(--crm-text-2); font: 400 13px/20px var(--crm-sans); } .crm-producto-pie { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-top: 4px; } .crm-producto-precio { color: var(--crm-text); font: 500 13px/20px var(--crm-mono); font-variant-numeric: tabular-nums; } .crm-tique-atrib { --crm-tique-perfo: radial-gradient( circle 4px at 50% 50%, var(--crm-bg) 3.5px, transparent 4px) 0 0 / 14px 8px repeat-x; position: relative; display: grid; gap: 14px; padding: 24px 24px 28px; border-inline: 1px solid var(--crm-line-2); background: var(--crm-panel); } .crm-tique-atrib::before, .crm-tique-atrib::after { content: ""; position: absolute; left: -1px; right: -1px; height: 8px; background: var(--crm-tique-perfo); } .crm-tique-atrib::before { top: -4px; } .crm-tique-atrib::after { bottom: -4px; } .crm-tique-atrib-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px dashed var(--crm-line-2); } .crm-tique-atrib-rotulo { color: var(--crm-dim); font: 500 12px/16px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; } .crm-tique-atrib-canal { display: inline-flex; align-items: center; gap: 10px; color: var(--crm-text); font: 500 16px/24px var(--crm-sans); } .crm-tique-atrib-moneda { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px dotted var(--crm-text-2); border-radius: 50%; box-shadow: inset 0 0 0 2px var(--crm-panel), inset 0 0 0 3px var(--crm-line-2); color: var(--crm-text); font: 500 12px/1 var(--crm-mono); } .crm-tique-atrib-hora { display: flex; align-items: baseline; gap: 12px; } .crm-tique-atrib-hora strong { color: var(--crm-text); font: 500 40px/44px var(--crm-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .crm-tique-atrib-hora span { color: var(--crm-text-2); font: 400 15px/20px var(--crm-sans); } .crm-tique-atrib-lineas { display: grid; gap: 8px; margin: 0; } .crm-tique-atrib-lineas > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .crm-tique-atrib-lineas dt { flex: none; color: var(--crm-text-2); font: 400 15px/24px var(--crm-sans); } .crm-tique-atrib-lineas > div::after { content: ""; order: 1; flex: 1; min-width: 16px; border-bottom: 1px dotted var(--crm-line-2); translate: 0 -6px; } .crm-tique-atrib-lineas dd { order: 2; display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 72%; margin: 0; overflow: hidden; color: var(--crm-text); font: 500 15px/24px var(--crm-sans); text-overflow: ellipsis; white-space: nowrap; } .crm-tique-atrib-lineas dd[data-mono] { font: 400 14px/24px var(--crm-mono); } .crm-tique-atrib-icono { display: inline-flex; color: var(--crm-text-2); } .crm-tique-atrib-icono svg { width: 16px; height: 16px; } .crm-tique-atrib-ok { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding-top: 14px; border-top: 1px dashed var(--crm-line-2); color: var(--crm-text); font: 500 15px/20px var(--crm-sans); } .crm-tique-atrib-ok svg { width: 20px; height: 20px; fill: none; stroke: var(--crm-acento); stroke-width: 1.5; } .crm-tique-atrib-vacio { margin: 0; color: var(--crm-dim); font: 400 15px/24px var(--crm-sans); } .crm-franja { display: grid; gap: 6px; } .crm-franja-texto { display: flex; align-items: baseline; gap: 8px; color: var(--crm-text-2); font: 400 13px/20px var(--crm-sans); } .crm-franja-texto strong { color: var(--crm-text); font: 500 13px/20px var(--crm-mono); font-variant-numeric: tabular-nums; } .crm-franja-texto em { color: var(--crm-acento); font: 500 11px/16px var(--crm-mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; } .crm-franja-regla { position: relative; height: 16px; border-bottom: 1px solid var(--crm-line-2); } .crm-franja-hora { position: absolute; bottom: 0; width: 1px; height: 4px; background: var(--crm-line-2); } .crm-franja-hora[data-par] { height: 8px; } .crm-franja-banda { position: absolute; bottom: 0; height: 8px; background: var(--crm-text-2); opacity: .35; } .crm-franja[data-dentro] .crm-franja-banda { background: var(--crm-acento); opacity: 1; } .crm-franja-aguja { position: absolute; bottom: -2px; width: 2px; height: 16px; margin-left: -1px; background: var(--crm-text); } .crm-franja-escala { display: flex; justify-content: space-between; color: var(--crm-dim); font: 400 10px/12px var(--crm-mono); } .crm-ficha-modal-quien[data-con-plazo] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 24px; } .crm-ficha-modal-plazo { display: grid; justify-items: center; gap: 4px; } .crm-ficha-modal-plazo .crm-ini-reloj-esfera { width: 68px; height: 68px; } .crm-modal-titulo.crm-ficha-modal-titulo { font: 500 40px/44px var(--crm-sans); letter-spacing: -.02em; } .crm-ficha-modal-meta { gap: 6px 16px; font: 400 16px/24px var(--crm-sans); } .crm-ficha-modal-cab { gap: 16px; padding: 14px 24px 20px; } .crm-modal-cuerpo.crm-ficha-modal-cuerpo { padding: 24px; font-size: 16px; line-height: 24px; } .crm-ficha-modal-columnas { align-items: stretch; } .crm-ficha-modal-principal { display: flex; flex-direction: column; gap: 20px; } .crm-ficha-modal-hechos { gap: 20px; } .crm-contacto-canal[data-grande] .crm-contacto-canal-numero { font: 500 16px/24px var(--crm-mono); letter-spacing: .02em; } .crm-contacto-canal-punto { opacity: .5; } .crm-misiva[data-destacada] { padding: 32px 32px 28px 72px; } .crm-misiva[data-destacada] .crm-misiva-cuerpo { gap: 14px; font: 400 20px/32px var(--crm-sans); letter-spacing: -.005em; } .crm-misiva[data-destacada] .crm-misiva-cuerpo { position: relative; } .crm-misiva[data-destacada] .crm-misiva-cuerpo::before { content: "\201c"; position: absolute; top: -10px; left: -52px; color: var(--crm-line-2); font: 500 80px/1 var(--crm-sans); } .crm-misiva[data-destacada] .crm-misiva-adjunto { margin: -32px -32px 8px -72px; } .crm-misiva[data-destacada] .crm-misiva-persona { font-size: 16px; } .crm-misiva[data-destacada] .crm-misiva-empresa { font-size: 15px; } @media (max-width: 600px) { .crm-ficha-modal-quien[data-con-plazo] { grid-template-columns: auto minmax(0, 1fr); } .crm-ficha-modal-quien[data-con-plazo] .crm-ficha-modal-accion { grid-column: 1 / -1; } .crm-ficha-modal-plazo .crm-ini-reloj-esfera { width: 48px; height: 48px; } .crm-modal-titulo.crm-ficha-modal-titulo { font-size: 28px; line-height: 32px; } .crm-misiva[data-destacada] { padding: 24px 20px 20px 52px; } .crm-misiva[data-destacada] .crm-misiva-cuerpo::before { left: -40px; font-size: 40px; } .crm-misiva[data-destacada] .crm-misiva-cuerpo { font-size: 16px; line-height: 24px; } .crm-misiva[data-destacada] .crm-misiva-adjunto { margin: -24px -20px 8px -52px; } } .crm-ficha-modal-cab, .crm-modal-cuerpo.crm-ficha-modal-cuerpo { position: relative; } .crm-modal-cuerpo.crm-ficha-modal-cuerpo { overflow-x: hidden; overscroll-behavior: contain; } .crm-ficha-modal-cab { overflow: hidden; } .crm-hoja[data-entra] { animation: crm-hoja-entra-abajo 220ms var(--crm-snap) both; } .crm-hoja[data-entra=arriba] { animation-name: crm-hoja-entra-arriba; } .crm-hoja[data-rafaga] { animation-duration: 90ms; } .crm-ficha-modal .crm-hoja-saliente { position: absolute; z-index: 1; margin: 0; pointer-events: none; animation: crm-hoja-sale-arriba 180ms var(--crm-snap) both; } .crm-ficha-modal .crm-hoja-saliente[data-sentido=arriba] { animation-name: crm-hoja-sale-abajo; } @keyframes crm-hoja-entra-abajo { from { opacity: 0; transform: translateY(24px); } 30% { opacity: 0; } } @keyframes crm-hoja-entra-arriba { from { opacity: 0; transform: translateY(-24px); } 30% { opacity: 0; } } @keyframes crm-hoja-sale-arriba { 60% { opacity: 0; } to { opacity: 0; transform: translateY(-24px); } } @keyframes crm-hoja-sale-abajo { 60% { opacity: 0; } to { opacity: 0; transform: translateY(24px); } } @keyframes crm-hoja-funde { from { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .crm-hoja[data-entra], .crm-hoja[data-entra=arriba] { animation: crm-hoja-funde 120ms linear both; } .crm-ficha-modal .crm-hoja-saliente { display: none; } } .crm-ficha-modal-tique .crm-odometro { display: inline-flex; color: var(--crm-text); font-weight: 500; animation: none; } .crm-odometro-casilla { display: inline-block; height: 20px; overflow: hidden; line-height: 20px; } .crm-odometro-tira { display: flex; flex-direction: column; } .crm-odometro-tira[data-sentido=abajo] { animation: crm-odo-sube 220ms var(--crm-snap) both; } .crm-odometro-tira[data-sentido=arriba] { animation: crm-odo-baja 220ms var(--crm-snap) both; } @keyframes crm-odo-sube { from { transform: translateY(0); } to { transform: translateY(-50%); } } @keyframes crm-odo-baja { from { transform: translateY(-50%); } to { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .crm-odometro-tira[data-sentido=abajo] { animation: none; transform: translateY(-50%); } .crm-odometro-tira[data-sentido=arriba] { animation: none; } } .crm-ficha-modal-barra { position: relative; } .crm-carpeta { --alto-lengueta: 26px; position: relative; display: flex; flex-direction: column; color: var(--crm-text); text-decoration: none; transition: transform var(--crm-t-gesto, 120ms) var(--crm-snap, ease-out); } .crm-carpeta:focus-visible { outline: none; } .crm-carpeta:focus-visible .crm-carpeta-lomo, .crm-carpeta:focus-visible .crm-carpeta-lengueta { border-color: var(--crm-acento); } .crm-carpeta-lengueta { position: relative; z-index: 1; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: var(--alto-lengueta); max-width: min(46%, 520px); margin-left: calc(var(--paso) * 17%); margin-bottom: -1px; padding: 0 14px 0 6px; border: 1px solid var(--crm-line); border-bottom-color: transparent; background: var(--crm-panel); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 0 100%); } .crm-carpeta-mono { flex: none; display: grid; place-items: center; min-width: 24px; height: 18px; padding: 0 3px; font: 500 10px/16px var(--crm-mono); letter-spacing: .06em; color: var(--crm-dim); border: 1px solid var(--crm-line); } .crm-carpeta-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13px/20px var(--crm-sans); } .crm-carpeta-nombre[data-sustituido] { font-style: italic; color: var(--crm-text-2, var(--crm-text)); } .crm-carpeta-lomo { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; height: 36px; padding: 0 12px; border: 1px solid var(--crm-line); background: var(--crm-panel); font: 12px/16px var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-dim); white-space: nowrap; } .crm-carpeta-lomo > * { flex: none; } .crm-carpeta-nota { flex: 1 1 auto !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 12px/16px var(--crm-sans); color: var(--crm-dim); } .crm-carpeta-punto { color: var(--crm-line-2, var(--crm-line)); } .crm-carpeta-quien { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--crm-line); font: 500 9px/14px var(--crm-mono); color: var(--crm-text-2, var(--crm-text)); } .crm-carpeta:hover, .crm-carpeta[data-activa] { transform: translateY(-2px); } .crm-carpeta:hover .crm-carpeta-lengueta, .crm-carpeta[data-activa] .crm-carpeta-lengueta, .crm-carpeta:hover .crm-carpeta-lomo, .crm-carpeta[data-activa] .crm-carpeta-lomo { background: var(--crm-panel-2, var(--crm-panel)); border-color: var(--crm-line-2, var(--crm-line)); } .crm-carpeta[data-activa] .crm-carpeta-lomo::before { content: ""; position: absolute; left: -9px; bottom: 10px; width: 2px; height: 16px; background: var(--crm-acento); } .crm-carpeta[data-estado=viva] .crm-carpeta-lengueta::before { content: ""; position: absolute; left: 0; right: 8px; top: -1px; height: 1px; background: linear-gradient( 90deg, transparent, var(--crm-acento) 20%, var(--crm-acento) 70%, transparent); box-shadow: 0 0 8px var(--crm-acento-suave); } .crm-carpeta[data-estado=viva] .crm-carpeta-mono { color: var(--crm-text); border-color: var(--crm-acento-linea, var(--crm-acento)); } .crm-carpeta[data-estado=dormida] .crm-carpeta-lengueta, .crm-carpeta[data-estado=dormida] .crm-carpeta-lomo { background: transparent; border-style: dashed; } .crm-carpeta[data-estado=dormida] .crm-carpeta-nombre { color: var(--crm-dim); font-weight: 400; } .crm-carpeta[data-estado=dormida]:not(:hover):not([data-activa]) { opacity: .72; } .crm-carpeta[data-leyendo] .crm-carpeta-nota { background: linear-gradient( 90deg, var(--crm-esqueleto-a, var(--crm-line)), transparent) 0 50% / 30% 6px no-repeat; } @media (max-width: 720px) { .crm-carpeta-lengueta { max-width: 80%; margin-left: calc(var(--paso) * 6%); } .crm-carpeta-lomo { height: auto; min-height: 36px; padding: 6px 10px; flex-wrap: wrap; row-gap: 4px; white-space: normal; } .crm-carpeta-nota { flex-basis: 100% !important; white-space: nowrap; } .crm-carpeta-punto { display: none; } } @media (prefers-reduced-motion: reduce) { .crm-carpeta, .crm-carpeta:hover, .crm-carpeta[data-activa] { transform: none; transition: none; } } .crm-cronodias { position: relative; } .crm-cronodias-dias { position: relative; list-style: none; margin: 0; padding: 0; } .crm-cronodias-dias::before { content: ""; position: absolute; left: 27px; top: 8px; bottom: 8px; width: 1px; background: var(--crm-line); } .crm-cronodias-dia { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 14px; padding: 10px 0; } .crm-cronodias-dia + .crm-cronodias-dia { margin-top: 18px; } .crm-cronodias-cota { position: absolute; left: 28px; top: -16px; transform: translateX(-50%); padding: 0 4px; background: var(--crm-panel); font: 500 10px/14px var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-dim); white-space: nowrap; } .crm-cronodias-fechador { position: relative; z-index: 1; align-self: start; display: flex; flex-direction: column; align-items: center; width: 56px; padding: 4px 0 3px; background: var(--crm-panel); border: 1px solid var(--crm-line); outline: 1px solid var(--crm-line); outline-offset: 2px; color: var(--crm-text-2, var(--crm-text)); } .crm-cronodias-fechador-dia { font: 500 18px/22px var(--crm-mono); font-variant-numeric: tabular-nums; } .crm-cronodias-fechador-mes { font: 500 9px/12px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--crm-dim); } .crm-cronodias-dia[data-hoy] .crm-cronodias-fechador { color: var(--crm-acento); border-color: var(--crm-acento-linea, var(--crm-acento)); outline-color: var(--crm-acento-suave); } .crm-cronodias-dia[data-hoy] .crm-cronodias-fechador-mes { color: var(--crm-acento); } .crm-cronodias-hechos { list-style: none; margin: 0; padding: 2px 0 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .crm-cronodias-hecho { display: grid; grid-template-columns: 40px 18px minmax(0, 1fr); align-items: baseline; gap: 8px; } .crm-cronodias-hora { font: 12px/20px var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-dim); } .crm-cronodias-tipo { display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--crm-dim); transform: translateY(3px); } .crm-cronodias-hecho[data-tipo=llamada] .crm-cronodias-tipo, .crm-cronodias-hecho[data-tipo=whatsapp] .crm-cronodias-tipo { color: var(--crm-text); } .crm-cronodias-hecho[data-tipo=documento] .crm-cronodias-tipo { color: var(--crm-acento); } .crm-cronodias-texto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; } .crm-cronodias-titulo { font: 500 14px/20px var(--crm-sans); color: var(--crm-text); } .crm-cronodias-quien { font: 12px/20px var(--crm-sans); color: var(--crm-dim); } .crm-cronodias-cita { flex-basis: 100%; margin-top: 2px; padding-left: 10px; border-left: 2px solid var(--crm-line); font: 13px/20px var(--crm-sans); color: var(--crm-text-2, var(--crm-text)); quotes: "\ab" "\bb"; } .crm-cronodias-anteriores { display: block; width: 100%; height: 28px; margin-top: 16px; border: 1px dashed var(--crm-line); background: transparent; color: var(--crm-dim); font: 500 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; } .crm-cronodias-anteriores:hover { color: var(--crm-text); border-color: var(--crm-line-2, var(--crm-line)); } .crm-cronodias-anteriores:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; } .crm-cronodias-vacio { padding: 8px 0; font: 13px/20px var(--crm-sans); color: var(--crm-dim); } @media (max-width: 560px) { .crm-cronodias-dias::before { left: 21px; } .crm-cronodias-dia { grid-template-columns: 44px minmax(0, 1fr); gap: 0 10px; } .crm-cronodias-fechador { width: 44px; } .crm-cronodias-cota { left: 22px; } .crm-cronodias-hecho { grid-template-columns: 36px minmax(0, 1fr); } .crm-cronodias-tipo { display: none; } } .crm-legajo { --legajo-hoja: color-mix(in oklab, var(--crm-panel) 82%, var(--crm-text) 6%); --legajo-alto-tapa: 160px; position: relative; display: flex; flex-direction: column; min-width: 0; perspective: 900px; isolation: isolate; color: var(--crm-text); text-decoration: none; outline: none; } .crm-legajo-pestana { position: relative; z-index: 1; align-self: flex-start; display: inline-flex; align-items: flex-start; gap: 8px; max-width: 100%; min-height: 30px; margin-bottom: -1px; padding: 6px 24px 5px 7px; background: var(--crm-panel-2, var(--crm-panel)); border: 1px solid var(--crm-line); border-bottom: 0; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 100%, 0 100%); } .crm-legajo-mono { flex: none; display: grid; place-items: center; min-width: 22px; height: 18px; margin-top: 1px; padding: 0 3px; font: 500 9px/14px var(--crm-mono); letter-spacing: .06em; color: var(--crm-dim); border: 1px solid var(--crm-line); } .crm-legajo-nombre { min-width: 0; font: 600 15px/19px var(--crm-sans); letter-spacing: -.005em; color: var(--crm-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .crm-legajo-nombre[data-sustituido] { font-style: italic; font-weight: 500; color: var(--crm-text-2, var(--crm-text)); } .crm-legajo-cuerpo { position: relative; display: block; height: calc(var(--legajo-alto-tapa) + 10px); } .crm-legajo[data-hojas="1"] .crm-legajo-cuerpo, .crm-legajo[data-hojas="2"] .crm-legajo-cuerpo { height: calc(var(--legajo-alto-tapa) + 40px); } .crm-legajo-trasera { position: absolute; inset: 0; background: var(--crm-panel-2, var(--crm-panel)); border: 1px solid var(--crm-line); } .crm-legajo-hojas { position: absolute; z-index: 2; left: 12px; right: 12px; top: 8px; height: 110px; pointer-events: none; } .crm-legajo-hoja { --y: 26px; --r: 0deg; position: absolute; top: 0; display: flex; flex-direction: column; gap: 1px; width: calc(50% - 4px); height: 100px; padding: 6px 9px; background: var(--legajo-hoja); border: 1px solid var(--crm-line); transform: translateY(var(--y)) rotate(var(--r)); transform-origin: 50% 100%; transition: transform var(--crm-t-panel) var(--crm-snap); transition-delay: calc(var(--i, 0) * var(--crm-t-escalon)); } .crm-legajo-hoja[data-i="0"] { --i: 1; left: 0; --r: -.6deg; } .crm-legajo-hoja[data-i="1"] { --i: 0; right: 0; --r: .6deg; } .crm-legajo-hoja > :not(.crm-legajo-hoja-renglones) { opacity: 0; transition: opacity var(--crm-t-color); } .crm-legajo-hoja-tipo { font: 500 9px/12px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--crm-dim); } .crm-legajo-hoja-titulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12px/16px var(--crm-sans); color: var(--crm-text); } .crm-legajo-hoja-renglones { flex: 1; margin-top: 4px; opacity: .55; background: repeating-linear-gradient( to bottom, transparent 0 7px, var(--crm-line) 7px 8px); mask-image: linear-gradient( to right, black 70%, transparent); } .crm-legajo-hoja[data-tipo=presupuesto]::after, .crm-legajo-hoja[data-tipo=proforma]::after { content: ""; position: absolute; top: -1px; left: -1px; width: 14px; height: 2px; background: var(--crm-acento); } .crm-legajo:hover .crm-legajo-hoja, .crm-legajo:focus-visible .crm-legajo-hoja, .crm-legajo[data-activa] .crm-legajo-hoja { --y: -4px; } .crm-legajo:hover .crm-legajo-hoja > *, .crm-legajo:focus-visible .crm-legajo-hoja > *, .crm-legajo[data-activa] .crm-legajo-hoja > * { opacity: 1; } .crm-legajo:hover .crm-legajo-hoja-renglones, .crm-legajo:focus-visible .crm-legajo-hoja-renglones, .crm-legajo[data-activa] .crm-legajo-hoja-renglones { opacity: .55; } .crm-legajo[data-abriendo] .crm-legajo-hoja { --y: -36px !important; } .crm-legajo-tapa { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: var(--legajo-alto-tapa); display: flex; flex-direction: column; gap: 6px; padding: 11px 14px 10px; min-width: 0; background: var(--crm-panel); border: 1px solid var(--crm-line); box-shadow: inset 0 1px 0 var(--crm-line-2, var(--crm-line)); transform-origin: 50% 100%; transform: rotateX(0deg); transition: transform var(--crm-t-panel) var(--crm-snap), border-color var(--crm-t-color); } .crm-legajo:hover .crm-legajo-tapa, .crm-legajo:focus-visible .crm-legajo-tapa, .crm-legajo[data-activa] .crm-legajo-tapa { transform: rotateX(-8deg); } .crm-legajo[data-activa] .crm-legajo-tapa { border-color: var(--crm-line-2, var(--crm-line)); } .crm-legajo:focus-visible .crm-legajo-tapa { border-color: var(--crm-acento); } .crm-legajo[data-abriendo] .crm-legajo-tapa { transform: rotateX(-68deg); transition-duration: var(--crm-t-capa); } .crm-legajo-fila { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; } .crm-legajo-contacto { display: flex; flex-direction: column; min-width: 0; } .crm-legajo-contacto-nombre { font: 500 13px/18px var(--crm-sans); color: var(--crm-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-legajo-contacto-cargo { font: 12px/16px var(--crm-sans); color: var(--crm-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-legajo-pulso { flex: none; display: inline-flex; align-items: center; gap: 7px; font: 12px/18px var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-dim); white-space: nowrap; } .crm-legajo-latido { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--crm-linea-apagada, var(--crm-line)); flex: none; } .crm-legajo-pulso[data-hoy] { color: var(--crm-text); } .crm-legajo-pulso[data-hoy] .crm-legajo-latido { background: var(--crm-acento); box-shadow: 0 0 0 3px var(--crm-acento-suave); } .crm-legajo-pulso[data-hoy] .crm-legajo-latido::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--crm-acento); animation: crm-latido var(--crm-t-latido) ease-out infinite; } .crm-legajo-dinero { display: flex; align-items: center; gap: 10px; min-height: 28px; } .crm-legajo-dinero b { font: 500 20px/24px var(--crm-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--crm-text); } .crm-legajo-pide { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .crm-legajo-pide > :first-child:not(.crm-legajo-pide-texto) { flex: none; } .crm-legajo-pide-texto { min-width: 0; font: 13px/18px var(--crm-sans); color: var(--crm-text-2, var(--crm-text)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .crm-legajo-proxima { display: flex; align-items: center; gap: 6px; min-width: 0; font: 12px/16px var(--crm-mono); color: var(--crm-text-2, var(--crm-text)); } .crm-legajo-proxima > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-legajo-proxima[data-vencida] { color: var(--crm-error); } .crm-legajo-reloj { width: 16px; height: 16px; flex: none; } .crm-legajo-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; min-width: 0; padding-top: 6px; border-top: 1px dashed var(--crm-line); } .crm-legajo-quien { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font: 12px/16px var(--crm-sans); color: var(--crm-text-2, var(--crm-text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crm-legajo-avatar { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--crm-line); font: 500 8px/12px var(--crm-mono); } .crm-legajo-nadie { font: 500 11px/16px var(--crm-mono); letter-spacing: .02em; color: var(--crm-aviso); white-space: nowrap; } .crm-legajo-recuento { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 11px/16px var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-dim); } .crm-legajo[data-estado=viva] .crm-legajo-pestana::before { content: ""; position: absolute; left: 0; right: 16px; top: 0; height: 1px; background: linear-gradient( 90deg, transparent, var(--crm-acento) 18%, var(--crm-acento) 72%, transparent); } .crm-legajo[data-estado=viva] .crm-legajo-mono { color: var(--crm-text); border-color: var(--crm-acento-linea, var(--crm-acento)); } .crm-legajo[data-estado=dormida] .crm-legajo-trasera, .crm-legajo[data-estado=dormida] .crm-legajo-pestana, .crm-legajo[data-estado=dormida] .crm-legajo-tapa { border-style: dashed; background: var(--crm-bg); box-shadow: none; } .crm-legajo[data-estado=dormida] .crm-legajo-nombre { color: var(--crm-dim); font-weight: 500; } .crm-legajo[data-estado=dormida]:not(:hover):not(:focus-visible):not([data-activa]) { opacity: .74; } .crm-legajo[data-leyendo] .crm-legajo-tapa::after { content: ""; position: absolute; left: 14px; right: 40%; top: 50px; height: 8px; background: linear-gradient( 90deg, var(--crm-esqueleto-a, var(--crm-line)), transparent); } @media (prefers-reduced-motion: reduce) { .crm-legajo-hoja, .crm-legajo-tapa { transition: none; } .crm-legajo:hover .crm-legajo-tapa, .crm-legajo:focus-visible .crm-legajo-tapa, .crm-legajo[data-activa] .crm-legajo-tapa, .crm-legajo[data-abriendo] .crm-legajo-tapa { transform: none; } .crm-legajo-pulso[data-hoy] .crm-legajo-latido::after { animation: none; } } .crm-cronamp { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; height: 100%; min-height: 0; } .crm-cronamp-carril { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 8px 32px 0; scrollbar-width: thin; mask-image: linear-gradient( to bottom, black calc(100% - 32px), transparent); } .crm-cronamp-dias { position: relative; list-style: none; margin: 0; padding: 0; } .crm-cronamp-dias::before { content: ""; position: absolute; left: 31px; top: 12px; bottom: 12px; width: 1px; background: var(--crm-line); } .crm-cronamp-dia { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 24px; padding: 8px 0 18px; } .crm-cronamp-salto { grid-column: 1 / -1; position: relative; display: flex; align-items: center; height: 36px; margin: -4px 0 8px; } .crm-cronamp-salto::before { content: ""; position: absolute; left: 22px; width: 20px; top: 8px; bottom: 8px; background: repeating-linear-gradient( to bottom, var(--crm-panel) 0 3px, transparent 3px 6px); } .crm-cronamp-salto > span { position: relative; z-index: 1; margin-left: 4px; padding: 1px 6px; background: var(--crm-panel); border: 1px dashed var(--crm-line); font: 500 11px/16px var(--crm-mono); color: var(--crm-dim); font-variant-numeric: tabular-nums; } .crm-cronamp-taco { position: relative; z-index: 1; align-self: start; display: flex; flex-direction: column; align-items: center; width: 64px; padding-bottom: 6px; background: var(--crm-panel); border: 1px solid var(--crm-line-2, var(--crm-line)); } .crm-cronamp-taco::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -4px; height: 3px; border: 1px solid var(--crm-line); border-top: 0; background: var(--crm-panel); } .crm-cronamp-taco-mes { width: 100%; padding: 2px 0; text-align: center; background: var(--crm-panel-2, var(--crm-bg)); border-bottom: 1px solid var(--crm-line); font: 500 10px/14px var(--crm-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--crm-dim); } .crm-cronamp-taco-dia { margin-top: 2px; font: 500 28px/32px var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-text); } .crm-cronamp-taco-sem { font: 500 10px/12px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--crm-dim); } .crm-cronamp-dia[data-hoy] .crm-cronamp-taco { border-color: var(--crm-acento-linea, var(--crm-acento)); } .crm-cronamp-dia[data-hoy] .crm-cronamp-taco-mes { background: var(--crm-acento); color: var(--crm-sobre-acento, var(--crm-bg)); border-color: var(--crm-acento); } .crm-cronamp-hechos { list-style: none; margin: 0; padding: 4px 0 0; display: flex; flex-direction: column; gap: 18px; min-width: 0; } .crm-cronamp-hecho { display: grid; grid-template-columns: 48px 30px minmax(0, 1fr); gap: 12px; align-items: start; } .crm-cronamp-hora { padding-top: 4px; font: 13px/20px var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-dim); } .crm-cronamp-icono { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--crm-line); background: var(--crm-panel); color: var(--crm-text-2, var(--crm-text)); } .crm-cronamp-hecho[data-tipo=documento] .crm-cronamp-icono { color: var(--crm-acento); border-color: var(--crm-acento-linea, var(--crm-acento)); } .crm-cronamp-hecho[data-tipo=web] .crm-cronamp-icono, .crm-cronamp-hecho[data-tipo=nota] .crm-cronamp-icono { color: var(--crm-dim); } .crm-cronamp-cuerpo { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .crm-cronamp-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; } .crm-cronamp-titulo { font: 500 18px/28px var(--crm-sans); letter-spacing: -.005em; color: var(--crm-text); } .crm-cronamp-veces { font: 500 12px/18px var(--crm-mono); padding: 0 6px; border: 1px solid var(--crm-line); color: var(--crm-text-2, var(--crm-text)); } .crm-cronamp-cita { max-width: 72ch; padding-left: 12px; border-left: 2px solid var(--crm-line); font: 15px/24px var(--crm-sans); color: var(--crm-text-2, var(--crm-text)); quotes: "\ab" "\bb"; } .crm-cronamp-chapa { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px 0 2px; border: 1px solid var(--crm-line); border-radius: 12px; background: var(--crm-bg); max-width: 220px; } .crm-cronamp-chapa-ini { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--crm-panel-2, var(--crm-panel)); border: 1px solid var(--crm-line); font: 500 9px/12px var(--crm-mono); color: var(--crm-text); } .crm-cronamp-chapa-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 12px/16px var(--crm-sans); color: var(--crm-text-2, var(--crm-text)); } .crm-cronamp-nadie { font: 12px/16px var(--crm-mono); color: var(--crm-dim); } .crm-cronamp-sello { align-self: flex-start; padding: 2px 8px; border: 2px double currentColor; transform: rotate(-1.5deg); font: 600 12px/18px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--crm-text-2, var(--crm-text)); } .crm-cronamp-sello[data-tono=bien] { color: var(--crm-acento); } .crm-cronamp-sello[data-tono=mal] { color: var(--crm-error); } .crm-cronamp-cambio { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 15px/22px var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-dim); } .crm-cronamp-cambio-que { font: 500 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--crm-dim); } .crm-cronamp-cambio del { color: var(--crm-dim); text-decoration-thickness: 1px; } .crm-cronamp-cambio ins { text-decoration: none; color: var(--crm-text); font-weight: 500; } .crm-cronamp-ticket { --muesca: 7px; position: relative; align-self: flex-start; display: inline-grid; grid-auto-flow: column; align-items: baseline; gap: 14px; padding: 8px 18px; background: var(--crm-bg); border: 1px solid var(--crm-line-2, var(--crm-line)); -webkit-mask: radial-gradient( circle var(--muesca) at 0 50%, transparent 98%, black) left / 51% 100% no-repeat, radial-gradient( circle var(--muesca) at 100% 50%, transparent 98%, black) right / 51% 100% no-repeat; mask: radial-gradient( circle var(--muesca) at 0 50%, transparent 98%, black) left / 51% 100% no-repeat, radial-gradient( circle var(--muesca) at 100% 50%, transparent 98%, black) right / 51% 100% no-repeat; } .crm-cronamp-ticket::before { content: ""; position: absolute; left: 0; top: -1px; width: 22px; height: 2px; background: var(--crm-acento); } .crm-cronamp-ticket-rotulo { font: 500 10px/14px var(--crm-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--crm-dim); } .crm-cronamp-ticket-num { font: 500 15px/20px var(--crm-mono); color: var(--crm-text); white-space: nowrap; } .crm-cronamp-ticket-importe { font: 500 20px/24px var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-text); white-space: nowrap; } .crm-cronamp-ticket-visto { position: absolute; top: 4px; right: 12px; display: grid; place-items: center; width: 16px; height: 16px; background: var(--crm-acento); color: var(--crm-sobre-acento, var(--crm-bg)); font: 600 11px/12px var(--crm-mono); } .crm-cronamp-ticket[data-estado=aceptado] { border-color: var(--crm-acento-linea, var(--crm-acento)); } .crm-cronamp-ticket[data-estado=caducado] { opacity: .6; } .crm-cronamp-ticket[data-estado=borrador] { border-style: dashed; } .crm-cronamp-ticket-suelto { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 14px 22px 12px; min-width: 0; } .crm-cronamp-ticket-suelto .crm-cronamp-ticket-num { font-size: 20px; line-height: 24px; } .crm-cronamp-ticket-que { font: 14px/20px var(--crm-sans); color: var(--crm-text-2, var(--crm-text)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-cronamp-ticket-corte { height: 0; margin: 4px -22px; border-top: 1px dashed var(--crm-line); } .crm-cronamp-ticket-pie { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font: 12px/16px var(--crm-mono); color: var(--crm-dim); } .crm-cronamp-ticket-suelto .crm-cronamp-ticket-importe { font-size: 24px; line-height: 28px; } .crm-cronamp-lectura { display: flex; flex-direction: column; gap: 20px; min-height: 0; overflow-y: auto; padding-left: 24px; border-left: 1px solid var(--crm-line); } .crm-cronamp-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; margin: 0; } .crm-cronamp-cifra { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .crm-cronamp-cifra:last-child:nth-child(odd) { grid-column: 1 / -1; } .crm-cronamp-cifra dt { font: 500 10px/14px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--crm-dim); } .crm-cronamp-cifra dd { margin: 0; font: 500 26px/32px var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-text); overflow-wrap: anywhere; } .crm-cronamp-cifra .crm-cronamp-cifra-detalle { font: 13px/18px var(--crm-sans); color: var(--crm-dim); } .crm-cronamp-cifra[data-tono=aviso] dd:first-of-type { color: var(--crm-aviso); } .crm-cronamp-cifra[data-tono=error] dd:first-of-type { color: var(--crm-error); } .crm-cronamp-fichas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .crm-cronamp-ficha { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 44px; padding: 0 14px; border: 1px solid var(--crm-line); background: var(--crm-bg); color: var(--crm-text-2, var(--crm-text)); font: 14px/20px var(--crm-sans); cursor: pointer; transition: border-color var(--crm-t-color), background var(--crm-t-color); } .crm-cronamp-ficha b { font: 500 16px/20px var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-text); } .crm-cronamp-ficha:hover:not(:disabled) { border-color: var(--crm-line-2, var(--crm-line)); } .crm-cronamp-ficha[aria-checked=true] { border-color: var(--crm-acento); background: var(--crm-acento-suave, var(--crm-bg)); color: var(--crm-text); } .crm-cronamp-ficha:disabled { opacity: .45; cursor: default; } .crm-cronamp-ficha:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; } .crm-cronamp-pie { margin-top: auto; } .crm-cronamp-vacio { padding: 24px 0; font: 15px/24px var(--crm-sans); color: var(--crm-dim); } @media (max-width: 900px) { .crm-cronamp { grid-template-columns: minmax(0, 1fr); height: auto; } .crm-cronamp-lectura { order: -1; padding-left: 0; border-left: 0; } .crm-cronamp-carril { overflow: visible; mask-image: none; } .crm-cronamp-dia { grid-template-columns: 52px minmax(0, 1fr); gap: 0 14px; } .crm-cronamp-taco { width: 52px; } .crm-cronamp-dias::before { left: 25px; } .crm-cronamp-hecho { grid-template-columns: 40px minmax(0, 1fr); } .crm-cronamp-icono { display: none; } .crm-cronamp-titulo { font-size: 16px; line-height: 24px; } } .crm-sobre { container: crm-sobre / inline-size; display: grid; grid-template-columns: minmax(240px, 300px) 1fr; grid-template-areas: "escena datos" "escena vuelta" "aviso aviso" "pie pie" "falta falta"; column-gap: 24px; row-gap: 16px; align-items: start; } .crm-sobre-titulo, .crm-sobre .crm-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .crm-sobre > .crm-aviso { grid-area: aviso; } .crm-sobre-problema { grid-area: aviso; } .crm-sobre-escena { --crm-sobre-progreso: 0; --sobre-papel: var(--crm-panel); --sobre-filo: var(--crm-line-2); position: relative; grid-area: escena; aspect-ratio: 5 / 4; margin-top: 56px; isolation: isolate; } .crm-sobre-fondo, .crm-sobre-frente, .crm-sobre-solapa { position: absolute; inset: 0; } .crm-sobre-fondo { z-index: 0; background: var(--crm-panel-2); border: 1px solid var(--sobre-filo); } .crm-sobre-hoja { position: absolute; z-index: 1; left: 9%; right: 9%; top: -48px; height: 92%; overflow: hidden; background: var(--crm-papel-sobre-blanco); border: 1px solid var(--sobre-filo); box-shadow: var(--crm-sombra); opacity: 0; transform: translateY(24px); transition: transform var(--crm-t-panel, 260ms) var(--crm-snap), opacity var(--crm-t-entrada) var(--crm-snap); } .crm-sobre[data-lleno] .crm-sobre-hoja { opacity: 1; transform: translateY(calc(var(--crm-sobre-progreso) * 48px)); } .crm-sobre-miniatura { display: block; width: 100%; height: auto; } .crm-sobre-lineas { display: grid; gap: 7px; padding: 14px 12px; } .crm-sobre-lineas i { display: block; height: 4px; background: var(--crm-papel-sobre-1); } .crm-sobre-lineas i:nth-child(1) { width: 46%; height: 6px; background: var(--crm-papel-sobre-2); } .crm-sobre-lineas i:nth-child(3) { width: 82%; } .crm-sobre-lineas i:nth-child(5) { width: 64%; } .crm-sobre-lineas[data-leyendo] i { animation: crm-sobre-leer 1.2s var(--crm-curva) infinite alternate; } @keyframes crm-sobre-leer { to { opacity: .45; } } .crm-sobre-ensayo { position: absolute; top: 10px; right: -30px; width: 120px; padding: 2px 0; background: var(--crm-aviso); color: var(--crm-papel-sobre-tinta); font: 600 10px/14px var(--crm-mono); letter-spacing: .14em; text-align: center; text-transform: uppercase; transform: rotate(35deg); } .crm-sobre-frente { z-index: 2; top: 30%; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto auto; align-content: start; gap: 6px 12px; padding: 14px 14px 12px; background: linear-gradient( to top right, transparent calc(50% - .5px), var(--sobre-filo) 50%, transparent calc(50% + .5px)) left top / 50% 46% no-repeat, linear-gradient( to top left, transparent calc(50% - .5px), var(--sobre-filo) 50%, transparent calc(50% + .5px)) right top / 50% 46% no-repeat, var(--sobre-papel); border: 1px solid var(--sobre-filo); } .crm-sobre-para { grid-column: 1 / -1; grid-row: 3; display: grid; gap: 2px; min-width: 0; } .crm-sobre-matasellos { grid-column: 2; grid-row: 1; } .crm-sobre-rotulo { font: 500 11px/14px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--crm-dim); } .crm-sobre-empresa { overflow: hidden; color: var(--crm-text); font: 500 14px/18px var(--crm-sans); text-overflow: ellipsis; white-space: nowrap; } .crm-sobre-contacto { overflow: hidden; color: var(--crm-text-2); font: 400 13px/18px var(--crm-sans); text-overflow: ellipsis; white-space: nowrap; } .crm-sobre-matasellos { position: relative; display: block; width: 116px; height: 62px; color: var(--crm-text-2); opacity: .78; transform: rotate(-8deg); } .crm-sobre-matasellos svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.2; } .crm-sobre-matasellos-texto { position: absolute; left: 0; top: 0; display: grid; place-content: center; width: 53%; height: 100%; text-align: center; font-family: var(--crm-mono); font-variant-numeric: tabular-nums; } .crm-sobre-matasellos-texto small { font-size: 8px; line-height: 10px; letter-spacing: .12em; text-transform: uppercase; } .crm-sobre-matasellos-texto b { font-size: 9px; line-height: 11px; font-weight: 500; white-space: nowrap; } .crm-sobre-papel, .crm-sobre-invita { grid-column: 1 / -1; grid-row: 4; align-self: end; display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; } .crm-sobre-nombre { flex: 1; min-width: 0; overflow: hidden; color: var(--crm-text); font: 400 12px/16px var(--crm-mono); text-overflow: ellipsis; white-space: nowrap; } .crm-sobre-peso { flex: none; color: var(--crm-dim); font: 400 12px/16px var(--crm-mono); font-variant-numeric: tabular-nums; } .crm-sobre-invita { justify-content: space-between; color: var(--crm-text-2); font: 400 13px/18px var(--crm-sans); } .crm-sobre-barra { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--crm-line); } .crm-sobre-barra i { display: block; height: 100%; width: calc(var(--crm-sobre-progreso) * 100%); background: var(--crm-acento); transition: width var(--crm-t-entrada) linear; } .crm-sobre-solapa { z-index: 0; bottom: auto; top: 30%; height: 26%; background: var(--crm-panel-3); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top center; transform: translateY(-100%) rotateX(180deg); transition: transform 520ms var(--crm-curva), z-index 0s 260ms; } .crm-sobre[data-fase=hecho] .crm-sobre-solapa { z-index: 3; transform: translateY(0) rotateX(0deg); border-bottom: 0; } .crm-sobre[data-fase=hecho] .crm-sobre-hoja { transform: translateY(56px); } .crm-sobre-estampa { position: absolute; z-index: 4; right: 10%; top: 44%; transform: rotate(-7deg) scale(1); animation: crm-sobre-estampa 420ms var(--crm-snap) 380ms both; } .crm-sobre-estampa .crm-ini-sello { background: var(--sobre-papel); box-shadow: var(--crm-sombra); } @keyframes crm-sobre-estampa { from { opacity: 0; transform: rotate(-16deg) scale(1.6); } 60% { opacity: 1; transform: rotate(-6deg) scale(.94); } to { opacity: 1; transform: rotate(-7deg) scale(1); } } .crm-sobre[data-encima] .crm-sobre-frente, .crm-sobre[data-encima] .crm-sobre-fondo { border-color: var(--crm-acento); } .crm-sobre[data-encima] .crm-sobre-escena { animation: crm-sobre-respira 1.1s var(--crm-curva) infinite alternate; } @keyframes crm-sobre-respira { to { transform: scale(1.015); } } .crm-sobre:not([data-lleno]) .crm-sobre-frente { border-style: dashed; } .crm-sobre-datos { grid-area: datos; display: grid; grid-template-columns: minmax(160px, 1.3fr) minmax(140px, 1fr) minmax(110px, .9fr); gap: 12px; align-items: start; } .crm-sobre-cheque .crm-entrada { border-width: 0 0 1px; border-radius: 0; background: transparent; } .crm-sobre-cheque .crm-entrada-control { font: 500 20px/28px var(--crm-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; } .crm-sobre-cheque .crm-entrada::after { content: "\20ac"; align-self: center; margin-left: 2px; color: var(--crm-text-2); font: 400 16px/20px var(--crm-mono); } .crm-sobre-mono .crm-entrada-control, .crm-sobre-mono { font-family: var(--crm-mono); font-variant-numeric: tabular-nums; } .crm-sobre-vuelta { grid-area: vuelta; display: grid; gap: 8px; } .crm-sobre-fichas { display: flex; flex-wrap: wrap; gap: 6px; } .crm-sobre-ficha { display: grid; gap: 1px; min-width: 72px; padding: 6px 10px; border: 1px solid var(--crm-line-2); background: var(--crm-panel); color: var(--crm-text); font: 500 13px/18px var(--crm-sans); text-align: left; cursor: pointer; transition: border-color var(--crm-t-color), background-color var(--crm-t-color); } .crm-sobre-ficha small { color: var(--crm-dim); font: 400 11px/14px var(--crm-mono); font-variant-numeric: tabular-nums; white-space: nowrap; } @media (hover: hover) { .crm-sobre-ficha:hover:not(:disabled) { background: var(--crm-panel-2); } } .crm-sobre-ficha[aria-checked=true] { border-color: var(--crm-acento); background: var(--crm-acento-suave); } .crm-sobre-ficha[aria-checked=true] small { color: var(--crm-text-2); } .crm-sobre-ficha:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-sobre-ficha:disabled { cursor: not-allowed; opacity: .6; } .crm-sobre-pie { grid-area: pie; display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--crm-line); } .crm-sobre-resumen { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; margin: 0; color: var(--crm-text-2); font: 400 12px/16px var(--crm-mono); font-variant-numeric: tabular-nums; } .crm-sobre-resumen b { color: var(--crm-text); font-weight: 500; } .crm-sobre-falta { grid-area: falta; margin: -8px 0 0; color: var(--crm-text-2); font: 400 12px/16px var(--crm-sans); text-align: right; } @container crm-sobre (max-width: 640px) { .crm-sobre { grid-template-columns: 1fr; grid-template-areas: "escena" "aviso" "datos" "vuelta" "pie" "falta"; } .crm-sobre-escena { width: min(100%, 320px); justify-self: center; } .crm-sobre-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .crm-sobre-cheque { grid-column: 1 / -1; } .crm-sobre-pie { flex-wrap: wrap; } .crm-sobre-resumen { flex-basis: 100%; } .crm-sobre-pie .crm-boton:last-child { flex: 1; } } @media (max-width: 680px) { .crm-sobre { grid-template-columns: minmax(0, 1fr); grid-template-areas: "escena" "aviso" "datos" "vuelta" "pie" "falta"; } } @media (prefers-reduced-motion: reduce) { .crm-sobre-hoja, .crm-sobre-solapa, .crm-sobre-barra i { transition: none; } .crm-sobre-estampa, .crm-sobre[data-encima] .crm-sobre-escena, .crm-sobre-lineas[data-leyendo] i { animation: none; } } .crm-sobre { --crm-papel-sobre-1: #e6e3dc; --crm-papel-sobre-2: #d4d0c7; --crm-papel-sobre-blanco: #fff; --crm-papel-sobre-tinta: #1b1405; } .crm-tasa { position: relative; padding-top: 14px; padding-left: 18px; } .crm-ticket-cordel { position: absolute; left: 0; top: 0; width: 44px; height: 28px; pointer-events: none; } .crm-ticket-cordel svg { width: 100%; height: 100%; overflow: visible; } .crm-ticket-cordel path { fill: none; stroke: var(--crm-dim); stroke-width: 1.25; stroke-linecap: round; } .crm-ticket-carton { position: relative; display: grid; gap: 10px; padding: 14px 18px 14px 34px; background: var(--crm-panel); border: 1px solid var(--crm-line-2); clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px); transform-origin: 18px 14px; animation: crm-ticket-colgar 900ms var(--crm-snap) both; } .crm-ticket-carton::before { content: ""; position: absolute; left: 0; top: 0; width: 20px; height: 20px; background: linear-gradient( 135deg, transparent 9.5px, var(--crm-line-2) 9.5px, var(--crm-line-2) 10.5px, transparent 10.5px); pointer-events: none; } @keyframes crm-ticket-colgar { 0% { transform: rotate(-3.5deg); } 45% { transform: rotate(1.6deg); } 75% { transform: rotate(-0.6deg); } 100% { transform: rotate(0deg); } } .crm-ticket-ojal { position: absolute; left: 12px; top: 12px; width: 11px; height: 11px; border-radius: 50%; background: var(--crm-bg); box-shadow: 0 0 0 2px var(--crm-panel-2), 0 0 0 3px var(--crm-line-2); } .crm-ticket-cabeza { display: flex; align-items: baseline; gap: 10px; min-height: 16px; } .crm-ticket-est-rotulo { font: 500 11px/1 var(--crm-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--crm-dim); } .crm-ticket-version { font: 400 11px/1 var(--crm-mono); color: var(--crm-muted); } .crm-ticket-ensayo { margin-left: auto; padding: 2px 6px; font: 500 10px/1.2 var(--crm-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--crm-aviso); border: 1px solid var(--crm-aviso-linea); transform: rotate(-4deg); } .crm-ticket-est-cifra { margin: 0; font: 600 28px/1.05 var(--crm-sans); font-variant-numeric: tabular-nums; letter-spacing: -0.015em; color: var(--crm-text); white-space: nowrap; } .crm-ticket-guion { margin: 0 0.18em; color: var(--crm-dim); font-weight: 400; } .crm-ticket-aprox { margin-right: 0.2em; color: var(--crm-dim); font-weight: 400; } .crm-ticket-est-linea { margin: -4px 0 0; font: 400 13px/1.35 var(--crm-sans); color: var(--crm-text-2); } .crm-ticket-sin { margin: 0; font: 600 20px/1.1 var(--crm-sans); color: var(--crm-text-2); } .crm-ticket-regla { position: relative; height: 12px; margin: 2px 0 0; border-bottom: 1px solid var(--crm-line-2); } .crm-ticket-rayas { position: absolute; inset: 0; } .crm-ticket-rayas i { position: absolute; bottom: -1px; width: 1px; height: 5px; background: var(--crm-line-2); } .crm-ticket-rayas i[data-r="1k"] { left: 0; } .crm-ticket-rayas i[data-r="3k"] { left: 23.86%; } .crm-ticket-rayas i[data-r="10k"] { left: 50%; height: 8px; } .crm-ticket-rayas i[data-r="30k"] { left: 73.86%; } .crm-ticket-rayas i[data-r="100k"] { right: 0; } .crm-ticket-escala { display: flex; justify-content: space-between; margin: 4px 0 2px; font: 400 10px/1 var(--crm-mono); color: var(--crm-muted); } .crm-ticket-tramo { position: absolute; bottom: 2px; height: 6px; background: var(--crm-text); transform-origin: left center; animation: crm-ticket-tramo var(--crm-t-dibujo, 520ms) var(--crm-snap) 200ms both; } .crm-tasa[data-confianza=media] .crm-ticket-tramo { background: var(--crm-text-2); } .crm-tasa[data-confianza=baja] .crm-ticket-tramo { background: repeating-linear-gradient( 90deg, var(--crm-text-2) 0 4px, transparent 4px 7px); } @keyframes crm-ticket-tramo { from { transform: scaleX(0); } to { transform: scaleX(1); } } .crm-ticket-est-marca { position: absolute; bottom: -1px; width: 2px; height: 14px; margin-left: -1px; background: var(--crm-acento); } .crm-ticket-est-marca::before { content: ""; position: absolute; top: -5px; left: -4px; border: 5px solid transparent; border-top-color: var(--crm-acento); } .crm-ticket-est-marca[data-tono=fuera] { background: var(--crm-aviso); } .crm-ticket-est-marca[data-tono=fuera]::before { border-top-color: var(--crm-aviso); } .crm-ticket-est-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .crm-ticket-muescas { display: inline-flex; align-items: center; gap: 8px; } .crm-ticket-muescas-marcas { display: inline-flex; gap: 3px; } .crm-ticket-muescas-marcas i { display: block; width: 5px; height: 11px; border: 1px solid var(--crm-line-2); background: transparent; } .crm-ticket-muescas-marcas i[data-llena] { background: var(--crm-text); border-color: var(--crm-text); } .crm-ticket-muescas[data-confianza=alta] .crm-ticket-muescas-marcas i[data-llena] { background: var(--crm-acento); border-color: var(--crm-acento); } .crm-ticket-muescas[data-confianza=baja] .crm-ticket-muescas-marcas i[data-llena] { background: var(--crm-aviso); border-color: var(--crm-aviso); } .crm-ticket-muescas-texto { font: 500 11px/1 var(--crm-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--crm-text-2); } .crm-ticket-porque-boton { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; font: 500 12px/1 var(--crm-sans); color: var(--crm-text-2); background: transparent; border: 1px solid var(--crm-line-2); cursor: pointer; transition: color var(--crm-t-color) var(--crm-snap), border-color var(--crm-t-color) var(--crm-snap); } .crm-ticket-porque-boton:hover { color: var(--crm-text); border-color: var(--crm-dim); } .crm-ticket-porque-boton:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-ticket-porque-boton span { font-family: var(--crm-mono); } .crm-ticket-porque { display: grid; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--crm-line-2); } .crm-ticket-porque ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; } .crm-ticket-porque li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font: 400 12.5px/1.4 var(--crm-sans); color: var(--crm-text-2); } .crm-ticket-motivos li { color: var(--crm-dim); } .crm-ticket-motivos li::before { content: "\b7"; margin-right: 6px; color: var(--crm-muted); } .crm-ticket-motivos li { justify-content: flex-start; } .crm-ticket-n { flex: none; font: 500 11px/1 var(--crm-mono); color: var(--crm-dim); } .crm-ticket-nota { margin: 0; font: 400 11.5px/1.4 var(--crm-sans); color: var(--crm-muted); } .crm-ticket-comercial { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--crm-line); } .crm-ticket-comercial-valor { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; } .crm-ticket-comercial-valor > * { min-width: 0; } .crm-ticket-comercial-cifra { font: 600 16px/1.2 var(--crm-sans); font-variant-numeric: tabular-nums; color: var(--crm-text); } .crm-ticket-comercial-vacio { font: 400 13px/1.35 var(--crm-sans); color: var(--crm-dim); } .crm-ticket-veredicto { font: 500 11px/1 var(--crm-mono); letter-spacing: 0.04em; color: var(--crm-acento); } .crm-ticket-veredicto[data-tono=fuera] { color: var(--crm-aviso); } .crm-ticket-chip { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 8px 0 6px; font: 500 12px/1 var(--crm-sans); font-variant-numeric: tabular-nums; color: var(--crm-text); background: var(--crm-panel-2); border: 1px solid var(--crm-line-2); clip-path: polygon(6px 0, 100% 0, 100% 100%, 6px 100%, 0 50%); padding-left: 12px; white-space: nowrap; } .crm-ticket-chip[data-vacio] { color: var(--crm-muted); background: transparent; } .crm-ticket-chip-ojal { width: 4px; height: 4px; margin-left: -4px; border-radius: 50%; background: var(--crm-bg); box-shadow: 0 0 0 1px var(--crm-line-2); } .crm-ticket-chip .crm-ticket-muescas-marcas i { width: 3px; height: 8px; } @media (prefers-reduced-motion: reduce) { .crm-ticket-carton, .crm-ticket-tramo { animation: none; } } .crm-esq-vista { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; height: 100%; } .crm-esq-cuerpo { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; opacity: 0; animation: crm-esq-aparece var(--crm-t-pulsar, 160ms) var(--crm-curva) var(--crm-esq-retardo, 300ms) forwards; } .crm-esq { position: relative; display: block; flex: none; max-width: 100%; overflow: hidden; background: var(--crm-esqueleto-a); } .crm-esq::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 105deg, transparent 30%, var(--crm-esqueleto-b) 46%, color-mix(in oklab, var(--crm-esqueleto-b), var(--crm-acento) 10%) 50%, var(--crm-esqueleto-b) 54%, transparent 70%) no-repeat; background-size: 60% 100%; background-position: -60% 0; background-attachment: fixed; animation: crm-esq-luz 1.8s var(--crm-curva) infinite; } .crm-esq-redondo { border-radius: 999px; } .crm-esq-chip { border: 1px solid var(--crm-line); background: transparent; } .crm-esq-texto { display: inline-block; vertical-align: -0.1em; opacity: 0; animation: crm-esq-aparece var(--crm-t-pulsar, 160ms) var(--crm-curva) 300ms forwards; } .crm-esq-col { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; gap: 7px; } .crm-esq-relleno { flex: 1 1 auto; } .crm-esq-marco { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--crm-line); background: var(--crm-panel); overflow: hidden; } .crm-esq-lista { display: flex; flex-direction: column; } .crm-esq-fila { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 0 18px; border-bottom: 1px solid var(--crm-line); } .crm-esq-lf { display: grid; flex: 1 1 auto; min-height: 0; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 0; } .crm-esq-lf > .crm-esq-marco + .crm-esq-marco { border-left: 0; } .crm-esq-lf-ancha { grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); } .crm-esq-ficha { display: flex; flex: 1 1 auto; flex-direction: column; gap: 14px; min-height: 320px; padding: 28px 32px; } .crm-esq-par { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; } .crm-esq-caja { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--crm-line); } .crm-esq-acciones { display: flex; gap: 10px; padding-top: 18px; border-top: 1px solid var(--crm-line); } .crm-esq-agenda { gap: 0; padding-top: 14px; } .crm-esq-agenda > .crm-esq:first-child { margin: 0 18px 10px; } .crm-esq-aguja { position: relative; display: flex; align-items: center; height: 22px; margin: 0 0 0 10px; } .crm-esq-aguja::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--crm-acento); } .crm-esq-aguja::after { content: ""; flex: 1 1 auto; height: 1px; margin-left: 8px; background: var(--crm-acento-linea); } .crm-esq-aguja > span { order: 2; padding: 0 10px 0 8px; color: var(--crm-acento); font-family: var(--crm-mono); font-size: 11px; letter-spacing: 0.12em; } .crm-esq-carpetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px 16px; } .crm-esq-carpeta { position: relative; display: flex; flex-direction: column; gap: 9px; height: 132px; padding: 22px 16px 14px; border: 1px solid var(--crm-line); background: var(--crm-panel); } .crm-esq-pestana { position: absolute; top: -9px; left: 14px; width: 64px; height: 9px; border: 1px solid var(--crm-line); border-bottom: 0; background: var(--crm-panel); } .crm-esq-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; } .crm-esq-cifras-col { display: flex; flex-direction: column; } .crm-esq-cifra { display: flex; flex-direction: column; gap: 10px; min-height: 108px; padding: 18px; border: 1px solid var(--crm-line); background: var(--crm-panel); } .crm-esq-crono { display: flex; flex-direction: column; gap: 18px; padding: 18px 0; } .crm-esq-hecho { display: grid; grid-template-columns: 56px 48px minmax(0, 1fr); align-items: start; gap: 12px; } .crm-esq-hoja { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 0; border: 1px solid var(--crm-line); } .crm-esq-hoja-vacia { border: 0; padding: 0; } .crm-esq-modal { display: flex; flex: 1 1 auto; flex-direction: column; gap: 20px; min-height: 0; } .crm-esq-cabeza { display: flex; align-items: center; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--crm-line); } .crm-esq-lanzadera { display: grid; flex: 1 1 auto; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(240px, 280px); gap: 32px; } .crm-esq-centro { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; } .crm-carga-c { display: inline-flex; flex-direction: column; align-items: center; gap: 12px; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 12px; letter-spacing: 0.02em; animation: crm-esq-aparece var(--crm-t-pulsar, 160ms) var(--crm-curva) both; } .crm-carga-c[data-superpuesta] { position: absolute; top: 50%; left: 50%; z-index: 1; padding: 18px 26px; transform: translate(-50%, -50%); border: 1px solid var(--crm-line); background: var(--crm-panel); } .crm-carga-c-frase { animation: crm-esq-frase 260ms var(--crm-curva) both; } @keyframes crm-esq-aparece { from { opacity: 0; } to { opacity: 1; } } @keyframes crm-esq-luz { 0% { background-position: -60% 0; } 60%, 100% { background-position: 160% 0; } } @keyframes crm-esq-frase { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @media (max-width: 900px) { .crm-esq-lf, .crm-esq-lf-ancha, .crm-esq-lanzadera { grid-template-columns: minmax(0, 1fr); } .crm-esq-lf > :last-child, .crm-esq-lanzadera > :not(.crm-esq-centro) { display: none; } } @media (prefers-reduced-motion: reduce) { .crm-esq::after, .crm-carga-c-frase { animation: none; } } .crm-briefing { display: grid; justify-items: center; gap: clamp(10px, 1.6vh, 16px); width: min(100%, 780px); } .crm-briefing-texto { margin: 0; text-shadow: 0 0 2px var(--crm-bg), 0 0 6px var(--crm-bg), 0 0 12px var(--crm-bg); font: 400 clamp(16px, 2.1vh, 19px)/1.55 var(--crm-sans); color: var(--crm-text-2, var(--crm-text)); text-wrap: pretty; min-height: calc(3 * 1.55em); cursor: default; } .crm-briefing-enlace { color: var(--crm-text); font-weight: 500; text-decoration: none; background: linear-gradient(var(--crm-acento), var(--crm-acento)) 0 100% / 100% 1px no-repeat; padding-bottom: 1px; transition: background-size var(--crm-t-color, 160ms) var(--crm-snap, ease-out), color var(--crm-t-color, 120ms); } .crm-briefing-enlace:hover { background-size: 100% 100%; color: var(--crm-sobre-acento); } .crm-briefing-enlace:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; } .crm-briefing-enlace--aviso { background-image: linear-gradient(var(--crm-aviso), var(--crm-aviso)); } .crm-briefing-enlace--error { background-image: linear-gradient(var(--crm-error), var(--crm-error)); } .crm-briefing-cursor { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -.15em; background: var(--crm-acento); animation: crm-briefing-parpadeo 1s steps(2) infinite; } @keyframes crm-briefing-parpadeo { 50% { opacity: 0; } } .crm-briefing-preguntas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; } .crm-briefing-pregunta { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 6px 0 12px; border: 1px dashed var(--crm-line-2); background: transparent; color: var(--crm-text-2, var(--crm-text)); font: 400 14px/1 var(--crm-sans); cursor: pointer; } .crm-briefing-pregunta:hover { border-style: solid; color: var(--crm-text); } .crm-briefing-pregunta[aria-pressed=true] { border-style: solid; border-color: var(--crm-acento); color: var(--crm-text); } .crm-briefing-pregunta:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; } .crm-briefing-pregunta-cifra { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; background: var(--crm-panel-2, var(--crm-line)); font: 500 12px/1 var(--crm-mono); font-variant-numeric: tabular-nums; } .crm-briefing-respuesta { width: 100%; border: 1px solid var(--crm-line-2); background: var(--crm-panel); text-align: left; } .crm-briefing-resp-cab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-bottom: 1px solid var(--crm-line); } .crm-briefing-volver, .crm-briefing-ver-todo { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--crm-dim); font: 500 13px/1 var(--crm-sans); text-decoration: none; cursor: pointer; } .crm-briefing-volver:hover, .crm-briefing-ver-todo:hover { color: var(--crm-text); } .crm-briefing-resp-titulo { font: 500 12px/16px var(--crm-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--crm-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crm-briefing-filas { margin: 0; padding: 0; list-style: none; } .crm-briefing-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; height: 48px; padding: 0 12px; border-bottom: 1px solid var(--crm-line); color: var(--crm-text); text-decoration: none; } .crm-briefing-filas li:last-child .crm-briefing-fila { border-bottom: 0; } .crm-briefing-fila:hover { background: var(--crm-hover, var(--crm-panel-2)); box-shadow: inset 2px 0 0 var(--crm-acento); } .crm-briefing-fila-texto { display: grid; min-width: 0; } .crm-briefing-fila-texto b { font-size: 15px; line-height: 20px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crm-briefing-fila-texto span { font-size: 12px; line-height: 16px; color: var(--crm-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crm-briefing-fila-cifra { font: 500 14px/1 var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-text-2, var(--crm-dim)); } .crm-briefing-fila-accion { display: inline-flex; align-items: center; gap: 4px; font: 500 13px/1 var(--crm-sans); color: var(--crm-acento); } @media (prefers-reduced-motion: reduce) { .crm-briefing-cursor { animation: none; } .crm-briefing-enlace { transition: none; } } .crm-escala { display: flex; gap: 0; border-top: 1px solid var(--crm-text); border-bottom: 1px solid var(--crm-line); } .crm-escala-tramo { all: unset; box-sizing: border-box; flex-basis: 0; min-width: 96px; cursor: pointer; display: grid; gap: 2px; padding: 8px 12px 10px; border-left: 1px solid var(--crm-line); position: relative; } .crm-escala-tramo:first-child { border-left: 0; } .crm-escala-tramo:hover { background: var(--crm-hover, color-mix(in srgb, var(--crm-text) 4%, transparent)); } .crm-escala-tramo:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: -1px; } .crm-escala-tramo[aria-pressed=true]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--crm-acento); } .crm-escala-tramo[data-vacio] { color: var(--crm-dim); } .crm-escala-rotulo { font: 500 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--crm-dim); } .crm-escala-cifra { font: 500 16px/22px var(--crm-mono); font-variant-numeric: tabular-nums; white-space: nowrap; } .crm-escala-n { font: 400 12px/16px var(--crm-mono); color: var(--crm-dim); white-space: nowrap; } @media (max-width: 720px) { .crm-escala { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); } .crm-escala-tramo { min-width: 0; border-left: 0; border-bottom: 1px solid var(--crm-line); } .crm-escala-n { white-space: normal; } } .crm-lienzo { position: relative; display: flex; flex-direction: column; min-height: 0; height: 100%; border: 1px solid var(--crm-line); background: var(--crm-panel); } .crm-lienzo[data-ampliado] { position: fixed; inset: 56px 16px 40px 16px; z-index: 40; box-shadow: var(--crm-sombra-capa); animation: crm-lienzo-entra 180ms var(--crm-snap, cubic-bezier(0.2, 0.8, 0.2, 1)); } @keyframes crm-lienzo-entra { from { opacity: 0; transform: scale(0.985); } } .crm-lienzo__cab { display: flex; align-items: stretch; gap: 12px; border-bottom: 1px solid var(--crm-line); min-height: 44px; } .crm-lienzo__pestanas { display: flex; min-width: 0; flex: 1; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; mask-image: linear-gradient( 90deg, black calc(100% - 28px), transparent); } .crm-lienzo__pestanas::-webkit-scrollbar { display: none; } .crm-lienzo__pestana { position: relative; display: flex; flex: 0 0 auto; align-items: center; border-right: 1px solid var(--crm-line); min-width: 132px; max-width: 240px; color: var(--crm-dim); } .crm-lienzo__pestana[data-activa] { color: var(--crm-text); background: var(--crm-bg); } .crm-lienzo__pestana[data-activa]::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--crm-acento); } .crm-lienzo__pestana-boton { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 4px 0 14px; height: 44px; background: none; border: 0; color: inherit; font: 500 14px/1 var(--crm-sans); cursor: pointer; } .crm-lienzo__pestana-boton:focus-visible, .crm-lienzo__cerrar:focus-visible, .crm-lienzo__ampliar:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: -2px; } .crm-lienzo__sello { font: 600 10px/1 var(--crm-mono); letter-spacing: 0.08em; padding: 3px 5px; border: 1px solid currentColor; opacity: 0.8; } .crm-lienzo__titulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crm-lienzo__cerrar { display: grid; place-items: center; width: 28px; height: 28px; margin-right: 6px; background: none; border: 0; color: var(--crm-dim); cursor: pointer; } .crm-lienzo__cerrar:hover { color: var(--crm-text); background: var(--crm-hover); } .crm-lienzo__ampliar { display: flex; align-items: center; gap: 8px; padding: 0 14px; background: none; border: 0; border-left: 1px solid var(--crm-line); color: var(--crm-text-2, var(--crm-dim)); font: 500 13px/1 var(--crm-sans); cursor: pointer; } .crm-lienzo__ampliar:hover { color: var(--crm-text); background: var(--crm-hover); } .crm-lienzo__tecla { font: 500 10px/1 var(--crm-mono); padding: 3px 5px; border: 1px solid var(--crm-line-2); color: var(--crm-dim); } .crm-lienzo__cuerpo { flex: 1; min-height: 0; overflow: auto; animation: crm-lienzo-aparece 220ms var(--crm-snap, ease-out); } @keyframes crm-lienzo-aparece { from { opacity: 0; transform: translateY(6px); } } .crm-lienzo__mesa { flex: 1; display: grid; place-items: center; background-image: linear-gradient(var(--crm-line) 1px, transparent 1px), linear-gradient( 90deg, var(--crm-line) 1px, transparent 1px); background-size: 32px 32px; background-position: -1px -1px; } .crm-taximetro { position: relative; padding: 18px 18px 14px; background: var(--crm-taxi-1); border: 1px solid var(--crm-taxi-2); color: var(--crm-taxi-3); box-shadow: inset 0 1px 0 var(--crm-taxi-4); } .crm-taximetro__bandera { position: absolute; top: -11px; right: 16px; padding: 4px 10px; font: 700 11px/1 var(--crm-mono); letter-spacing: 0.14em; background: var(--crm-taxi-5); color: var(--crm-taxi-6); } .crm-taximetro__bandera[data-libre] { background: var(--crm-acento); color: var(--crm-taxi-1); } .crm-taximetro__ventanilla { display: flex; align-items: flex-end; gap: 3px; padding: 10px 12px; background: var(--crm-taxi-7); border: 1px solid var(--crm-taxi-8); box-shadow: inset 0 2px 10px var(--crm-taxi-9); } .crm-taximetro__digito { display: inline-grid; place-items: center; width: 34px; height: 50px; background: linear-gradient(var(--crm-taxi-10) 0 49%, var(--crm-taxi-11) 51% 100%); font: 600 34px/1 var(--crm-mono); color: var(--crm-taxi-12); text-shadow: 0 0 10px var(--crm-taxi-13); } .crm-taximetro__coma { font: 600 30px/1 var(--crm-mono); color: var(--crm-taxi-12); padding: 0 1px 4px; } .crm-taximetro__moneda { margin-left: 8px; padding-bottom: 6px; font: 600 16px/1 var(--crm-mono); color: var(--crm-taxi-14); } .crm-taximetro__cinta { position: relative; height: 8px; margin-top: 14px; background: var(--crm-taxi-8); } .crm-taximetro__hecho { position: absolute; inset: 0 auto 0 0; background: var(--crm-acento); } .crm-taximetro__hecho[data-alerta] { background: var(--crm-aviso); } .crm-taximetro__proy { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--crm-taxi-3); } .crm-taximetro__pie { display: flex; justify-content: space-between; margin: 8px 0 0; font: 500 11.5px/1 var(--crm-mono); color: var(--crm-taxi-14); } @media (prefers-reduced-motion: reduce) { .crm-lienzo[data-ampliado], .crm-lienzo__cuerpo { animation: none; } } .crm-ficha-cat { padding: 28px 32px 32px; display: flex; flex-direction: column; gap: 18px; max-width: 920px; } .crm-ficha-cat__rotulo { margin: 0; font: 500 11px/1 var(--crm-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--crm-dim); } .crm-ficha-cat__titulo { margin: -6px 0 0; font: 600 30px/1.15 var(--crm-sans); letter-spacing: -0.015em; color: var(--crm-text); text-wrap: balance; } .crm-ficha-cat__estado { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: -8px 0 0; font: 400 15px/1.4 var(--crm-sans); color: var(--crm-text-2, var(--crm-dim)); } .crm-ficha-cat__punto { width: 8px; height: 8px; border-radius: 50%; background: var(--crm-aviso); } .crm-ficha-cat__punto[data-bien] { background: var(--crm-acento); } .crm-ficha-cat__chapa { padding: 3px 7px; border: 1px solid var(--crm-line-2); font: 500 12px/1 var(--crm-mono); color: var(--crm-text); } .crm-ficha-cat__galeria { margin: 0; display: flex; flex-direction: column; gap: 8px; } .crm-ficha-cat__marco { aspect-ratio: 16 / 10; background: var(--crm-bg); border: 1px solid var(--crm-line); display: grid; place-items: center; overflow: hidden; } .crm-ficha-cat__marco img { width: 100%; height: 100%; object-fit: contain; } .crm-ficha-cat__tira { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; } .crm-ficha-cat__diapo { position: relative; flex: 0 0 72px; height: 54px; padding: 0; border: 1px solid var(--crm-line-2); background: var(--crm-bg); cursor: pointer; opacity: 0.62; transition: opacity 140ms var(--crm-snap, ease); } .crm-ficha-cat__diapo img { width: 100%; height: 100%; object-fit: cover; display: block; } .crm-ficha-cat__diapo span { position: absolute; left: 3px; bottom: 2px; font: 600 9px/1 var(--crm-mono); color: var(--crm-pliego-1); text-shadow: 0 0 3px var(--crm-pliego-2); letter-spacing: 0.06em; } .crm-ficha-cat__diapo[aria-selected=true] { opacity: 1; border-color: var(--crm-acento); box-shadow: inset 0 2px 0 var(--crm-acento); } .crm-ficha-cat__diapo:hover { opacity: 0.9; } .crm-ficha-cat__diapo:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-ficha-cat__nota { display: flex; align-items: center; gap: 6px; margin: 0; font: 400 13px/1.4 var(--crm-mono); color: var(--crm-dim); } .crm-ficha-cat__placa { position: relative; padding: 18px 22px 14px; border: 1px solid var(--crm-line-2); background: repeating-linear-gradient( 90deg, transparent 0 2px, color-mix(in srgb, var(--crm-text) 2.5%, transparent) 2px 3px), var(--crm-panel-2, var(--crm-bg)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--crm-text) 8%, transparent); } .crm-ficha-cat__remache { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient( circle at 35% 35%, color-mix(in srgb, var(--crm-text) 55%, transparent), color-mix(in srgb, var(--crm-text) 18%, transparent)); } .crm-ficha-cat__remache[data-r="1"] { top: 8px; left: 8px; } .crm-ficha-cat__remache[data-r="2"] { top: 8px; right: 8px; } .crm-ficha-cat__remache[data-r="3"] { bottom: 8px; left: 8px; } .crm-ficha-cat__remache[data-r="4"] { bottom: 8px; right: 8px; } .crm-ficha-cat__placa-cab { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 12px; font: 700 15px/1 var(--crm-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--crm-text); } .crm-ficha-cat__placa-cab span { font: 500 10px/1 var(--crm-mono); letter-spacing: 0.1em; color: var(--crm-dim); } .crm-ficha-cat__specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; margin: 0; } .crm-ficha-cat__specs .crm-ficha-cat__dato dd { font-family: var(--crm-mono); font-size: 15px; } .crm-ficha-cat__datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px 22px; margin: 0; } .crm-ficha-cat__dato { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .crm-ficha-cat__dato dt { font: 500 10.5px/1 var(--crm-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--crm-dim); } .crm-ficha-cat__dato dd { margin: 0; font: 500 16px/1.35 var(--crm-sans); color: var(--crm-text); overflow-wrap: anywhere; } .crm-ficha-cat__dato[data-falta] dd { font: italic 400 13px/1.35 var(--crm-mono); color: var(--crm-dim); } .crm-ficha-cat__enlace { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; color: var(--crm-text); text-decoration: underline; text-decoration-color: var(--crm-acento); text-underline-offset: 3px; } .crm-ficha-cat__fuente { display: flex; gap: 8px; margin: 0; font: 400 12px/1.3 var(--crm-mono); color: var(--crm-dim); } .crm-ficha-cat__fuente span { text-transform: uppercase; letter-spacing: 0.08em; color: var(--crm-acento); } @media (max-width: 900px) { .crm-ficha-cat__specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .crm-ficha-cat { padding: 20px 18px 24px; } } .crm-pliego { position: relative; margin: 0; border: 1px solid var(--crm-line-2); background: var(--crm-bg); } .crm-pliego--cerrado { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 18px 16px 22px; background: var(--crm-panel-2, var(--crm-bg)); color: var(--crm-text); text-align: left; cursor: pointer; } .crm-pliego--cerrado:hover { background: var(--crm-hover); } .crm-pliego--cerrado:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-pliego__texto { display: flex; flex-direction: column; gap: 4px; } .crm-pliego__texto b { font: 600 15px/1.2 var(--crm-sans); } .crm-pliego__texto em { font: 400 12px/1 var(--crm-mono); font-style: normal; color: var(--crm-dim); } .crm-pliego__pinza { position: absolute; top: -5px; left: 18px; width: 34px; height: 9px; border: 1px solid var(--crm-line-2); border-bottom: 0; background: var(--crm-panel, var(--crm-bg)); } .crm-pliego__pinza::after { content: ""; position: absolute; left: 50%; top: 2px; width: 10px; height: 3px; margin-left: -5px; background: var(--crm-acento); } .crm-pliego figcaption { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 22px; border-bottom: 1px solid var(--crm-line); font: 500 12px/1 var(--crm-mono); color: var(--crm-text); } .crm-pliego figcaption a { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; color: var(--crm-dim); text-decoration: none; } .crm-pliego figcaption a:hover { color: var(--crm-text); } .crm-pliego figcaption button { display: grid; place-items: center; width: 26px; height: 28px; border: 1px solid var(--crm-line-2); background: none; color: var(--crm-dim); cursor: pointer; } .crm-pliego iframe { display: block; width: 100%; height: min(68vh, 760px); border: 0; background: var(--crm-pliego-1); } .crm-pliego__cargando { height: 360px; background: linear-gradient( 100deg, var(--crm-line) 30%, var(--crm-line-2) 50%, var(--crm-line) 70%); background-size: 300% 100%; animation: crm-pliego-brillo 1.2s linear infinite; } @keyframes crm-pliego-brillo { from { background-position: 100% 0; } to { background-position: 0 0; } } .crm-pliego__fallo { margin: 24px; font: 400 14px/1.5 var(--crm-sans); color: var(--crm-dim); } .crm-legajo { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px dashed var(--crm-line-2); } .crm-legajo__titulo { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 15px/1.2 var(--crm-sans); color: var(--crm-text); } .crm-legajo__titulo b { font: 600 11px/1 var(--crm-mono); padding: 3px 6px; border: 1px solid var(--crm-line-2); color: var(--crm-dim); } .crm-legajo__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .crm-legajo__lista li { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 4px; padding: 10px 12px; border: 1px solid var(--crm-line); border-left: 2px solid var(--crm-line-2); } .crm-legajo__solapa { grid-row: span 2; align-self: start; display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border: 1px solid var(--crm-line-2); font: 600 10px/1 var(--crm-mono); letter-spacing: 0.08em; color: var(--crm-text); } .crm-legajo__nombre { font: 500 14px/1.3 var(--crm-sans); color: var(--crm-text); overflow-wrap: anywhere; } .crm-legajo__meta { font: 400 11.5px/1.3 var(--crm-mono); color: var(--crm-dim); overflow-wrap: anywhere; } .crm-legajo__extracto { grid-column: 1 / -1; margin-top: 4px; font: 400 13px/1.5 var(--crm-sans); color: var(--crm-text-2, var(--crm-dim)); quotes: "\ab" "\bb"; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--crm-acento) 45%, transparent); text-underline-offset: 3px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .crm-legajo__vacio { display: flex; align-items: center; gap: 6px; margin: 0; font: 400 14px/1.4 var(--crm-sans); color: var(--crm-dim); } .crm-legajo__leyendo { display: flex; flex-direction: column; gap: 10px; } .crm-legajo__leyendo span { display: block; height: 14px; width: 80%; background: linear-gradient( 100deg, var(--crm-line) 30%, var(--crm-line-2) 50%, var(--crm-line) 70%); background-size: 300% 100%; animation: crm-pliego-brillo 1.2s linear infinite; } .crm-legajo__leyendo span + span { width: 60%; } @media (prefers-reduced-motion: reduce) { .crm-pliego__cargando, .crm-legajo__leyendo span, .crm-ficha-cat__diapo { animation: none; transition: none; } } .crm-alertas { border: 1px solid var(--crm-line); background: var(--crm-panel); display: flex; flex-direction: column; } .crm-alertas__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px dashed var(--crm-line); } .crm-alertas__rotulo { font-family: var(--crm-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--crm-muted); } .crm-alertas__fecha { letter-spacing: 0.06em; } .crm-alertas__cupo { display: inline-flex; align-items: center; gap: 4px; } .crm-alertas__muesca { width: 6px; height: 12px; border: 1px solid var(--crm-line-2); } .crm-alertas__muesca[data-usada] { background: var(--crm-text); border-color: var(--crm-text); } .crm-alertas__cupo-num { font-family: var(--crm-mono); font-size: 11px; color: var(--crm-muted); margin-left: 6px; font-variant-numeric: tabular-nums; } .crm-alertas__lista { list-style: none; margin: 0; padding: 0; } .crm-alertas__fila { display: grid; grid-template-columns: 72px minmax(0, 1fr) 28px auto; align-items: center; gap: 12px; padding: 10px 16px 10px 13px; border-left: 3px solid transparent; border-bottom: 1px solid var(--crm-line); animation: crm-alertas-entra 220ms var(--crm-snap, cubic-bezier(0.2, 0.8, 0.2, 1)) both; } .crm-alertas__fila:last-child { border-bottom: 0; } .crm-alertas__fila:nth-child(2) { animation-delay: 40ms; } .crm-alertas__fila:nth-child(3) { animation-delay: 80ms; } .crm-alertas__fila:nth-child(4) { animation-delay: 120ms; } .crm-alertas__fila:nth-child(5) { animation-delay: 160ms; } @keyframes crm-alertas-entra { from { opacity: 0; transform: translateY(4px); } } .crm-alertas__fila[data-gravedad=alta] { border-left-color: var(--crm-error); } .crm-alertas__fila[data-gravedad=media] { border-left-color: var(--crm-aviso); } .crm-alertas__cifra { font-family: var(--crm-mono); font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--crm-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crm-alertas__fila[data-gravedad=alta] .crm-alertas__cifra { color: var(--crm-error); } .crm-alertas__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .crm-alertas__titulo { font-size: 14px; color: var(--crm-text); line-height: 1.3; } .crm-alertas__detalle { font-size: 12px; color: var(--crm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crm-alertas__fuente { font-family: var(--crm-mono); font-size: 11px; } .crm-alertas__chapa { width: 28px; height: 28px; display: inline-grid; place-items: center; border: 1px solid var(--crm-line); font-family: var(--crm-mono); font-size: 11px; color: var(--crm-text); background: var(--crm-bg); } .crm-alertas__accion { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border: 1px solid var(--crm-line); background: transparent; color: var(--crm-text); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; } .crm-alertas__accion:hover { border-color: var(--crm-text); } .crm-alertas__accion:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-alertas__aldia { display: flex; align-items: center; gap: 8px; margin: 0; padding: 16px; font-size: 14px; color: var(--crm-muted); } .crm-alertas__aldia svg { color: var(--crm-acento); } .crm-alertas__fila--esqueleto span { display: block; height: 12px; background: var(--crm-line); } .crm-alertas__fila--esqueleto span:first-child { height: 24px; width: 40px; } .crm-alertas__pie { padding: 8px 16px; border-top: 1px dashed var(--crm-line); font-size: 12px; color: var(--crm-muted); } @media (prefers-reduced-motion: reduce) { .crm-alertas__fila { animation: none; } } @media (max-width: 720px) { .crm-alertas__fila { grid-template-columns: 52px minmax(0, 1fr) auto; } .crm-alertas__chapa { display: none; } .crm-alertas__cifra { font-size: 20px; } } .crm-taximetro { --crm-taxi-1: #0d0e0f; --crm-taxi-2: #2a2c2e; --crm-taxi-3: #e8e6df; --crm-taxi-4: rgb(255 255 255 / 0.05); --crm-taxi-5: #3a3d40; --crm-taxi-6: #d6d3cb; --crm-taxi-7: #050606; --crm-taxi-8: #1d1f20; --crm-taxi-9: rgb(0 0 0 / 0.8); --crm-taxi-10: #1a1c1d; --crm-taxi-11: #121314; --crm-taxi-12: #f2c94c; --crm-taxi-13: rgb(242 201 76 / 0.35); --crm-taxi-14: #9b988f; } .crm-ficha-cat__diapo, .crm-pliego { --crm-pliego-1: #fff; --crm-pliego-2: #000; } .crm-pregunta-capa { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: center; align-items: flex-start; padding: 11vh 16px 16px; background: color-mix(in srgb, var(--crm-bg) 55%, transparent); backdrop-filter: blur(2px); animation: crm-pregunta-capa 140ms ease-out; } @keyframes crm-pregunta-capa { from { opacity: 0; } } .crm-pregunta { position: relative; display: flex; flex-direction: column; width: min(780px, 100%); max-height: 76vh; background: var(--crm-panel); border: 1px solid var(--crm-line-2, var(--crm-line)); color: var(--crm-text); box-shadow: var(--crm-sombra-capa); animation: crm-pregunta-entra 180ms var(--crm-snap, cubic-bezier(0.2, 0.8, 0.2, 1)); } @keyframes crm-pregunta-entra { from { opacity: 0; transform: translateY(-8px) scale(0.99); } } .crm-pregunta::before { content: ""; position: absolute; inset: -1px -1px auto -1px; height: 2px; background: var(--crm-acento); transform-origin: left; transform: scaleX(0.18); transition: transform 420ms var(--crm-snap, ease-out); } .crm-pregunta[data-pensando]::before { animation: crm-pregunta-filo 1.4s ease-in-out infinite; } @keyframes crm-pregunta-filo { 0% { transform: scaleX(0.1); } 50% { transform: scaleX(0.9); } 100% { transform: scaleX(0.1); transform-origin: right; } } .crm-pregunta__contexto { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px 0 0; border-bottom: 1px solid var(--crm-line); overflow: hidden; } .crm-pregunta__pestana { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-right: 1px solid var(--crm-line); background: var(--crm-bg); white-space: nowrap; } .crm-pregunta__sello { font: 600 10px/1 var(--crm-mono); letter-spacing: 0.12em; color: var(--crm-acento); } .crm-pregunta__pantalla { font: 500 13px/1 var(--crm-sans); color: var(--crm-text); max-width: 260px; overflow: hidden; text-overflow: ellipsis; } .crm-pregunta__detalles { display: flex; gap: 6px; min-width: 0; overflow: hidden; } .crm-pregunta__chapa { flex: none; font: 500 11px/1 var(--crm-mono); padding: 5px 7px; border: 1px solid var(--crm-line); color: var(--crm-dim); white-space: nowrap; } .crm-pregunta__campo { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 18px; } .crm-pregunta__orbe { flex: none; display: grid; place-items: center; width: 32px; height: 32px; } .crm-pregunta__entrada { flex: 1; min-width: 0; height: 40px; border: 0; outline: 0; background: transparent; color: var(--crm-text); font: 400 22px/1.2 var(--crm-sans); letter-spacing: -0.01em; } .crm-pregunta__entrada::placeholder { color: var(--crm-dim); } .crm-pregunta__accion { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--crm-line-2, var(--crm-line)); background: var(--crm-bg); color: var(--crm-text); cursor: pointer; } .crm-pregunta__accion:disabled { color: var(--crm-dim); cursor: default; } .crm-pregunta__accion:not(:disabled):hover { border-color: var(--crm-acento); } .crm-pregunta__accion:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-pregunta__sugerencias { list-style: none; margin: 0; padding: 4px 0 8px; border-top: 1px solid var(--crm-line); } .crm-pregunta__sugerencias button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 18px; border: 0; background: none; color: var(--crm-text-2, var(--crm-text)); font: 400 15px/1.3 var(--crm-sans); text-align: left; cursor: pointer; } .crm-pregunta__sugerencias li[data-elegida] button { background: var(--crm-panel-2); color: var(--crm-text); box-shadow: inset 2px 0 0 var(--crm-acento); } .crm-pregunta__flecha { font: 500 12px/1 var(--crm-mono); color: var(--crm-dim); } .crm-pregunta__sugerencias li[data-elegida] .crm-pregunta__flecha { color: var(--crm-acento); } .crm-pregunta__pasos { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 10px 18px; border-top: 1px solid var(--crm-line); font: 500 11.5px/1.2 var(--crm-mono); color: var(--crm-dim); } .crm-pregunta__pasos li { display: inline-flex; align-items: center; gap: 6px; } .crm-pregunta__punto { width: 6px; height: 6px; border: 1px solid currentColor; } .crm-pregunta__pasos li:not([data-hecho]) .crm-pregunta__punto { animation: crm-pregunta-punto 900ms ease-in-out infinite alternate; } .crm-pregunta__pasos li[data-hecho] { color: var(--crm-text-2, var(--crm-text)); } .crm-pregunta__pasos li[data-hecho] .crm-pregunta__punto { background: var(--crm-acento); border-color: var(--crm-acento); } @keyframes crm-pregunta-punto { to { opacity: 0.3; } } .crm-pregunta__respuesta { flex: 1; min-height: 0; overflow: auto; padding: 14px 18px 18px; border-top: 1px solid var(--crm-line); font: 400 16px/1.55 var(--crm-sans); } .crm-pregunta__pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; border-top: 1px solid var(--crm-line); background: var(--crm-bg); font: 500 11px/1 var(--crm-mono); color: var(--crm-dim); } .crm-pregunta__regleta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .crm-pregunta__regleta kbd, .crm-explica__lengueta kbd { font: 500 10px/1 var(--crm-mono); padding: 3px 5px; margin-right: 6px; border: 1px solid var(--crm-line-2, var(--crm-line)); color: var(--crm-text-2, var(--crm-text)); background: var(--crm-panel); } .crm-pregunta__seguir { display: inline-flex; align-items: center; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; } .crm-pregunta__seguir:hover { color: var(--crm-text); } .crm-pregunta__seguir:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 3px; } [data-explicable] { cursor: help; } [data-explicable][data-explicando] { outline: 1px dashed var(--crm-acento); outline-offset: 3px; } .crm-explica__lengueta { position: fixed; z-index: 55; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 4px 0 8px; border: 1px solid var(--crm-acento); background: var(--crm-panel); color: var(--crm-text); font: 600 11px/1 var(--crm-sans, sans-serif); cursor: pointer; animation: crm-explica-asoma 140ms var(--crm-snap, ease-out); } .crm-explica__lengueta kbd { margin: 0 0 0 4px; } .crm-explica__lengueta:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } @keyframes crm-explica-asoma { from { opacity: 0; transform: translateY(4px); } } .crm-explica { position: fixed; z-index: 56; width: min(400px, calc(100vw - 32px)); max-height: 56vh; display: flex; flex-direction: column; background: var(--crm-panel); color: var(--crm-text); border: 1px solid var(--crm-line-2); box-shadow: var(--crm-sombra-capa); animation: crm-explica-entra 160ms var(--crm-snap, ease-out); } .crm-explica[data-arriba] { animation-name: crm-explica-entra-arriba; } @keyframes crm-explica-entra { from { opacity: 0; transform: translateY(-6px); } } @keyframes crm-explica-entra-arriba { from { opacity: 0; transform: translateY(6px); } } .crm-explica__cab { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 6px 0 14px; border-bottom: 1px solid var(--crm-line); } .crm-explica__rotulo { font: 600 10px/1 var(--crm-mono, monospace); letter-spacing: 0.12em; text-transform: uppercase; color: var(--crm-acento); } .crm-explica__cerrar { display: grid; place-items: center; width: 24px; height: 24px; border: 0; background: none; color: var(--crm-dim); cursor: pointer; } .crm-explica__cerrar:hover { color: var(--crm-text); background: var(--crm-panel-2); } .crm-explica__cifra { display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 14px 14px 0; } .crm-explica__valor { font: 600 30px/1 var(--crm-sans, sans-serif); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .crm-explica__etiqueta { font: 500 11px/1.2 var(--crm-mono, monospace); letter-spacing: 0.06em; text-transform: uppercase; color: var(--crm-dim); } .crm-explica__regla { margin: 10px 14px 0; padding-top: 6px; border-top: 1px dashed var(--crm-line-2); font: 500 10.5px/1 var(--crm-mono, monospace); color: var(--crm-dim); } .crm-explica__cuerpo { flex: 1; min-height: 0; overflow: auto; padding: 8px 14px 14px; font: 400 14.5px/1.5 var(--crm-sans, sans-serif); } .crm-explica__pensando { color: var(--crm-dim); font-style: italic; } .crm-explica__pie { padding: 8px 14px; border-top: 1px solid var(--crm-line); font: 500 11px/1 var(--crm-mono, monospace); color: var(--crm-dim); } @media (prefers-reduced-motion: reduce) { .crm-pregunta-capa, .crm-pregunta, .crm-explica, .crm-explica__lengueta { animation: none; } .crm-pregunta[data-pensando]::before, .crm-pregunta__pasos li .crm-pregunta__punto { animation: none; } } @media (max-width: 720px) { .crm-pregunta-capa { padding: 8px; } .crm-pregunta { max-height: calc(100vh - 16px); } .crm-pregunta__detalles { display: none; } .crm-pregunta__entrada { font-size: 20px; } } .crm-propuesta { position: relative; display: grid; gap: 14px; padding: 18px 16px 16px 20px; border: 1px solid var(--crm-line-2); background: var(--crm-panel); color: var(--crm-text); } .crm-propuesta::before { content: ""; position: absolute; inset: -1px auto -1px -1px; width: 3px; background: var(--crm-dim); transition: background-color 180ms var(--crm-curva); } .crm-propuesta[data-tono=positivo]::before { background: var(--crm-acento); } .crm-propuesta[data-tono=negativo]::before { background: var(--crm-error); } .crm-propuesta::after { content: ""; position: absolute; top: -5px; left: 12px; right: 12px; height: 8px; background: radial-gradient( circle at 4px 4px, var(--crm-bg) 2.5px, transparent 3px) 0 0 / 12px 8px repeat-x; } .crm-propuesta[data-sellado]::after { top: -1px; height: 1px; background: var(--crm-acento); } .crm-propuesta-firma { margin: 0; color: var(--crm-acento); font: 500 12px/16px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; } .crm-propuesta-cuerpo { display: grid; gap: 14px; min-width: 0; } .crm-propuesta-campo { display: grid; gap: 6px; min-width: 0; } .crm-propuesta-rotulo { color: var(--crm-dim); font: 500 12px/16px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; } .crm-propuesta-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .crm-propuesta-descartar, .crm-propuesta-confirmar { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 14px; border: 1px solid transparent; font: 500 14px/20px var(--crm-sans); cursor: pointer; } .crm-propuesta-descartar { background: none; color: var(--crm-text-2); } .crm-propuesta-descartar:hover:not(:disabled) { color: var(--crm-text); } .crm-propuesta-confirmar { border-color: var(--crm-text); background: var(--crm-text); color: var(--crm-bg); } .crm-propuesta-confirmar:hover:not(:disabled) { background: var(--crm-text-2); border-color: var(--crm-text-2); } .crm-propuesta-confirmar:active:not(:disabled) { transform: translateY(1px); } .crm-propuesta-confirmar:disabled, .crm-propuesta-descartar:disabled { opacity: .5; cursor: not-allowed; } .crm-propuesta-confirmar[aria-busy] { cursor: progress; } .crm-propuesta-descartar:focus-visible, .crm-propuesta-confirmar:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-propuesta-sello { display: flex; align-items: baseline; gap: 10px; margin: 0; color: var(--crm-text); font: 500 15px/24px var(--crm-sans); animation: crm-propuesta-sella 220ms var(--crm-curva); } .crm-propuesta-sello-marca { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--crm-acento); color: var(--crm-acento); font: 600 13px/1 var(--crm-mono); transform: rotate(-6deg); } @keyframes crm-propuesta-sella { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .crm-propuesta-sello { animation: none; } .crm-propuesta::before { transition: none; } } @media (max-width: 480px) { .crm-propuesta { padding: 16px 12px 12px 16px; } .crm-propuesta-acciones > * { flex: 1 1 auto; justify-content: center; } } @media (min-width: 900px) and (min-height: 560px) { .crm-modal.crm-ficha-modal[data-ajustada] .crm-modal-cuerpo.crm-ficha-modal-cuerpo { display: flex; flex-direction: column; overflow: hidden; } .crm-modal.crm-ficha-modal[data-ajustada] .crm-ficha-modal-columnas { flex: 1 1 auto; min-height: 0; align-items: stretch; } .crm-modal.crm-ficha-modal[data-ajustada] :is(.crm-ficha-modal-principal, .crm-ficha-modal-hechos) { display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow: hidden; } .crm-modal.crm-ficha-modal[data-ajustada] :is(.crm-ficha-modal-principal, .crm-ficha-modal-hechos) > * { flex: none; } .crm-modal.crm-ficha-modal[data-ajustada] :is(.crm-ficha-modal-principal, .crm-ficha-modal-hechos) > .crm-recorte { flex: 1 1 0; min-height: 64px; } .crm-modal.crm-ficha-modal[data-ajustada] .crm-recorte { position: relative; display: flex; flex-direction: column; min-height: 0; } .crm-modal.crm-ficha-modal[data-ajustada] .crm-recorte-dentro { flex: 1 1 auto; min-height: 0; overflow: hidden; } .crm-modal.crm-ficha-modal[data-ajustada] .crm-recorte[data-cortado] .crm-recorte-dentro { -webkit-mask-image: linear-gradient( to bottom, black calc(100% - 56px), transparent); mask-image: linear-gradient( to bottom, black calc(100% - 56px), transparent); } @media (max-height: 800px) { .crm-modal.crm-ficha-modal[data-ajustada] :is(.crm-ficha-modal-principal, .crm-ficha-modal-hechos) { gap: 12px; } .crm-modal.crm-ficha-modal[data-ajustada] :is(.crm-ficha-modal-principal, .crm-ficha-modal-hechos) > .crm-recorte { min-height: 72px; } .crm-modal.crm-ficha-modal[data-ajustada] :is(.crm-ficha-modal-principal, .crm-ficha-modal-hechos) > .crm-recorte { order: 1; } .crm-modal.crm-ficha-modal[data-ajustada] .crm-producto { grid-template-columns: 80px minmax(0, 1fr); gap: 12px; padding: 10px 14px; } .crm-modal.crm-ficha-modal[data-ajustada] .crm-producto-foto { width: 80px; height: 60px; } .crm-modal.crm-ficha-modal[data-ajustada] .crm-producto-categoria { display: none; } .crm-modal.crm-ficha-modal[data-ajustada] .crm-triage { gap: 8px; padding: 10px 14px; } .crm-modal.crm-ficha-modal[data-ajustada] .crm-triage-guion li { height: 24px; font-size: 13px; } .crm-modal.crm-ficha-modal[data-ajustada] .crm-triage-resumen li { font-size: 14px; line-height: 20px; } .crm-modal.crm-ficha-modal[data-ajustada] .crm-triage:not([data-compacta]) .crm-triage-rotulo { display: none; } .crm-modal.crm-ficha-modal[data-ajustada] .crm-triage-resumen li:nth-child(2) { display: none; } .crm-modal.crm-ficha-modal[data-ajustada] .crm-triage-guion { gap: 4px; } .crm-modal.crm-ficha-modal[data-ajustada] .crm-triage-guion li { padding-right: 6px; } } } .crm-recorte-mas.crm-recorte-mas { position: absolute; right: 8px; bottom: 6px; z-index: 1; } .crm-recorte:not([data-cortado]) .crm-recorte-mas { display: none; } .crm-recorte-modal .crm-modal-cuerpo .crm-misiva { max-height: none; } .crm-tique-atrib[data-compacto] { display: flex; flex-wrap: nowrap; align-items: center; gap: 14px; min-width: 0; padding: 10px 16px; cursor: default; } .crm-tique-atrib[data-compacto] .crm-tique-atrib-canal { flex: none; gap: 8px; font-size: 15px; line-height: 20px; } .crm-tique-atrib[data-compacto] .crm-tique-atrib-moneda { width: 20px; height: 20px; font-size: 11px; } .crm-tique-atrib-hora-corta { display: inline-flex; flex: none; align-items: baseline; gap: 6px; } .crm-tique-atrib-hora-corta strong { color: var(--crm-text); font: 500 15px/20px var(--crm-mono); font-variant-numeric: tabular-nums; } .crm-tique-atrib-hora-corta span { color: var(--crm-text-2); font: 400 13px/20px var(--crm-sans); } .crm-tique-atrib-campana { flex: 1 1 0; min-width: 0; overflow: hidden; color: var(--crm-text-2); font: 400 14px/20px var(--crm-sans); text-overflow: ellipsis; white-space: nowrap; } .crm-tique-atrib-campana[data-mono] { font: 400 13px/20px var(--crm-mono); } .crm-tique-atrib[data-compacto] .crm-tique-atrib-ok { flex: none; padding: 0; border: 0; } .crm-tique-atrib[data-compacto] .crm-tique-atrib-ok svg { width: 18px; height: 18px; } .crm-tique-atrib-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .crm-triage { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--crm-line); border-left: 2px solid var(--crm-acento); background: var(--crm-panel); } .crm-triage[data-compacta] { gap: 6px; padding: 8px 12px; border-left-width: 1px; } .crm-triage-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; } .crm-triage[data-compacta] .crm-triage-cab { flex-wrap: nowrap; } .crm-triage-rotulo { color: var(--crm-dim); font: 500 12px/16px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; } .crm-triage-muescas { display: inline-flex; flex: none; align-items: center; gap: 3px; } .crm-triage-muescas i { width: 6px; height: 12px; border: 1px solid var(--crm-line-2); } .crm-triage-muescas i[data-consta] { border-color: var(--crm-acento); background: var(--crm-acento); } .crm-triage-muescas b { margin-left: 6px; color: var(--crm-text-2); font: 500 12px/16px var(--crm-mono); font-variant-numeric: tabular-nums; } .crm-triage-guion { display: flex; flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin: 0; padding: 0; list-style: none; } .crm-triage-guion li { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px 0 4px; border: 1px dashed var(--crm-line-2); color: var(--crm-text-2); font: 400 13px/16px var(--crm-sans); cursor: help; } .crm-triage-guion li[data-consta] { border-style: solid; border-color: var(--crm-line); color: var(--crm-text); } .crm-triage-casilla { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--crm-line-2); } .crm-triage-guion li[data-consta] .crm-triage-casilla { border-color: var(--crm-acento); color: var(--crm-acento); } .crm-triage-casilla svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; } .crm-triage-faltan { flex: 1 1 0; min-width: 0; overflow: hidden; color: var(--crm-text-2); font: 400 14px/20px var(--crm-sans); text-overflow: ellipsis; white-space: nowrap; cursor: help; } .crm-triage-cifra { flex: none; margin-left: auto; color: var(--crm-text); font: 500 15px/20px var(--crm-mono); font-variant-numeric: tabular-nums; white-space: nowrap; } .crm-triage-resumen { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: crm-triage; } .crm-triage-resumen li { position: relative; padding-left: 22px; color: var(--crm-text); font: 400 15px/22px var(--crm-sans); } .crm-triage-resumen li::before { counter-increment: crm-triage; content: counter(crm-triage); position: absolute; left: 0; top: 3px; color: var(--crm-dim); font: 500 11px/16px var(--crm-mono); } .crm-triage-resumen li:first-child { font-weight: 500; } .crm-triage-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0; color: var(--crm-text-2); font: 400 14px/20px var(--crm-sans); } .crm-triage[data-compacta] .crm-triage-pie { font-size: 13px; line-height: 18px; } .crm-triage-hueco { flex: 1 1 0; height: 10px; background: var(--crm-line); } .crm-triage-lineas { display: grid; gap: 8px; } .crm-triage-lineas i { height: 12px; background: var(--crm-line); } .crm-triage-lineas i:nth-child(1) { width: 78%; } .crm-triage-lineas i:nth-child(2) { width: 64%; } .crm-triage-lineas i:nth-child(3) { width: 52%; } .crm-triage[data-cargando] :is(.crm-triage-lineas i, .crm-triage-hueco, .crm-triage-muescas i) { animation: crm-triage-brillo 1.4s ease-in-out infinite; } @keyframes crm-triage-brillo { 50% { opacity: .45; } } @media (prefers-reduced-motion: reduce) { .crm-triage[data-cargando] :is(.crm-triage-lineas i, .crm-triage-hueco, .crm-triage-muescas i) { animation: none; } } .crm-papelpres { position: relative; display: grid; gap: 18px; padding: 26px 28px 22px; background: var(--crm-panel); border: 1px solid var(--crm-line-2); overflow: hidden; animation: crm-papel-entrar 520ms var(--crm-snap) both; } .crm-papelpres::before, .crm-papelpres::after { content: ""; position: absolute; left: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--crm-bg); box-shadow: 0 0 0 1px var(--crm-line-2); } .crm-papelpres::before { top: 34%; } .crm-papelpres::after { top: 66%; } @keyframes crm-papel-entrar { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .crm-papelpres__sello { position: absolute; top: 22px; right: 26px; padding: 4px 10px; font: 600 12px/1 var(--crm-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--crm-aviso); border: 2px solid var(--crm-aviso); transform: rotate(-7deg); opacity: 0.82; pointer-events: none; animation: crm-papel-sellar 420ms 240ms var(--crm-snap) both; } @keyframes crm-papel-sellar { from { opacity: 0; transform: rotate(-7deg) scale(1.6); } to { opacity: 0.82; transform: rotate(-7deg) scale(1); } } .crm-papelpres__membrete { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 14px; border-bottom: 1px dashed var(--crm-line-2); } .crm-papelpres__rotulo { margin: 0 0 6px; font: 500 11px/1.2 var(--crm-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--crm-dim); } .crm-papelpres__titulo { margin: 0; max-width: 32ch; font: 600 22px/1.2 var(--crm-sans); color: var(--crm-text); } .crm-papelpres__para { margin: 8px 0 0; font: 400 14px/1.4 var(--crm-sans); color: var(--crm-text-2); } .crm-papelpres__para span { margin-right: 8px; font: 500 11px/1 var(--crm-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--crm-dim); } .crm-papelpres__numero { display: grid; gap: 6px; align-content: end; margin: 0; text-align: right; } .crm-papelpres__numero div { display: grid; gap: 2px; } .crm-papelpres__numero dt { font: 500 10px/1 var(--crm-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--crm-dim); } .crm-papelpres__numero dd { margin: 0; font: 500 13px/1.2 var(--crm-mono); color: var(--crm-text-2); } .crm-papelpres__lineas { width: 100%; border-collapse: collapse; font: 400 14px/1.35 var(--crm-sans); color: var(--crm-text); } .crm-papelpres__lineas th { padding: 0 0 8px; text-align: left; font: 500 10px/1 var(--crm-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--crm-dim); border-bottom: 1px solid var(--crm-line-2); } .crm-papelpres__lineas td { padding: 12px 0; vertical-align: top; border-bottom: 1px solid var(--crm-line); } .crm-papelpres__lineas tr[data-falta] td:first-child { box-shadow: inset 2px 0 0 var(--crm-error); padding-left: 10px; } .crm-papelpres__num { text-align: right !important; white-space: nowrap; padding-left: 14px !important; } .crm-papelpres__concepto { display: block; font-weight: 500; } .crm-papelpres__fuente { display: block; margin-top: 3px; font: 400 11px/1.3 var(--crm-mono); color: var(--crm-dim); } tr[data-falta] .crm-papelpres__fuente { color: var(--crm-error); } .crm-papelpres__cifra { font: 500 14px/1.3 var(--crm-mono); font-variant-numeric: tabular-nums; } .crm-papelpres__hueco { font: 400 12px/1 var(--crm-mono); color: var(--crm-error); } .crm-papelpres__cantidad, .crm-papelpres__precio { width: 9ch; padding: 4px 6px; font: 500 14px/1.2 var(--crm-mono); text-align: right; color: var(--crm-text); background: transparent; border: 0; border-bottom: 1px dashed var(--crm-line-2); border-radius: 0; } .crm-papelpres__cantidad { width: 6ch; } .crm-papelpres__precio { width: 18ch; border-bottom-color: var(--crm-error); } .crm-papelpres__precio::placeholder { color: var(--crm-error); opacity: 0.8; font-size: 12px; } .crm-papelpres__cantidad:focus-visible, .crm-papelpres__precio:focus-visible { outline: none; border-bottom: 1px solid var(--crm-acento); } .crm-papelpres__cambiar { margin-left: 8px; padding: 0; font: 400 11px/1 var(--crm-mono); color: var(--crm-dim); background: none; border: 0; text-decoration: underline dotted; cursor: pointer; } .crm-papelpres__totales { display: flex; justify-content: flex-end; } .crm-papelpres__totales dl { display: grid; gap: 6px; min-width: 260px; margin: 0; } .crm-papelpres__totales dl div { display: flex; justify-content: space-between; gap: 24px; } .crm-papelpres__totales dt { font: 400 13px/1.3 var(--crm-sans); color: var(--crm-text-2); } .crm-papelpres__totales dd { margin: 0; font: 500 14px/1.3 var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-text); } .crm-papelpres__total { padding-top: 8px; border-top: 1px solid var(--crm-line-2); } .crm-papelpres__total dt { font-weight: 500; color: var(--crm-text); } .crm-papelpres__total dd { font-size: 20px; font-weight: 500; } .crm-papelpres__sin-total { margin: 0; max-width: 46ch; font: 400 13px/1.45 var(--crm-mono); color: var(--crm-error); text-align: right; } .crm-papelpres__pendientes { display: grid; gap: 4px; margin: 0; padding: 10px 12px; list-style: none; background: var(--crm-panel-2); border-left: 2px solid var(--crm-aviso); } .crm-papelpres__pendientes li { font: 400 13px/1.4 var(--crm-sans); color: var(--crm-text-2); } .crm-papelpres__pendientes li::before { content: "\b7 "; color: var(--crm-aviso); } .crm-papelpres__acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .crm-papelpres__pie { margin: 0; font: 400 11px/1.4 var(--crm-mono); color: var(--crm-dim); } .crm-comparador { display: grid; gap: 14px; padding: 20px 22px; background: var(--crm-panel); border: 1px solid var(--crm-line-2); } .crm-comparador__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; } .crm-comparador__versiones { display: flex; gap: 10px; margin: 0; font: 500 12px/1 var(--crm-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--crm-text-2); } .crm-comparador__delta { margin: 0; font: 600 22px/1 var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-text); } .crm-comparador__delta[data-tono=sube] { color: var(--crm-acento); } .crm-comparador__delta[data-tono=baja] { color: var(--crm-error); } .crm-comparador__delta em { font: 400 13px/1 var(--crm-mono); font-style: normal; color: var(--crm-dim); } .crm-comparador__filas { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; } .crm-comparador__filas li { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--crm-line); } .crm-comparador__marca { font: 600 14px/1 var(--crm-mono); color: var(--crm-dim); text-align: center; } li[data-cambio=nueva] .crm-comparador__marca { color: var(--crm-acento); } li[data-cambio=quitada] .crm-comparador__marca, li[data-cambio=quitada] .crm-comparador__concepto { color: var(--crm-error); } li[data-cambio=quitada] .crm-comparador__concepto { text-decoration: line-through; } li[data-cambio=cambia] .crm-comparador__marca { color: var(--crm-aviso); } .crm-comparador__concepto { font: 400 14px/1.35 var(--crm-sans); color: var(--crm-text); } .crm-comparador__cifras { display: flex; gap: 10px; font: 400 13px/1.2 var(--crm-mono); font-variant-numeric: tabular-nums; white-space: nowrap; } .crm-comparador__cifras s { color: var(--crm-dim); } .crm-comparador__cifras b { font-weight: 500; color: var(--crm-text); } .crm-comparador__totales { display: flex; justify-content: flex-end; gap: 28px; margin: 0; } .crm-comparador__totales div { display: grid; gap: 4px; text-align: right; } .crm-comparador__totales dt { font: 500 10px/1 var(--crm-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--crm-dim); } .crm-comparador__totales dd { margin: 0; font: 600 16px/1 var(--crm-mono); color: var(--crm-text); } @media (max-width: 720px) { .crm-papelpres { padding: 20px 16px 18px 22px; } .crm-papelpres__membrete { flex-direction: column; } .crm-papelpres__numero { text-align: left; } .crm-papelpres__precio { width: 12ch; } } @media (prefers-reduced-motion: reduce) { .crm-papelpres, .crm-papelpres__sello { animation: none; } } .crm-recado { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); border: 1px solid var(--crm-line-2); background: var(--crm-panel); color: var(--crm-text); } .crm-recado::before { content: ""; position: absolute; inset: -1px auto -1px -1px; width: 3px; background: var(--crm-recado); } .crm-recado[data-tono=error]::before { background: var(--crm-error); } .crm-recado[data-tono=acento]::before { background: var(--crm-acento); } .crm-recado-margen { display: grid; align-content: start; justify-items: center; gap: 10px; padding: 14px 0 12px; border-right: 1px dashed var(--crm-line-2); } .crm-recado-hora { color: var(--crm-text-2); font: 500 12px/16px var(--crm-mono); letter-spacing: .04em; transform: rotate(-4deg); } .crm-recado-muescas { display: grid; gap: 3px; } .crm-recado-muescas i { display: block; width: 14px; height: 3px; background: var(--crm-line-2); } .crm-recado-muescas[data-n="1"] i:nth-child(3), .crm-recado-muescas[data-n="2"] i:nth-child(n+2), .crm-recado-muescas[data-n="3"] i { background: var(--crm-text-2); } .crm-recado-cuerpo { display: grid; gap: 6px; min-width: 0; padding: 12px 14px 12px 14px; } .crm-recado-titulo { margin: 0; font: 500 15px/21px var(--crm-sans); text-wrap: pretty; } .crm-recado-detalle { margin: 0; color: var(--crm-dim); font: 400 12px/18px var(--crm-mono); letter-spacing: .01em; overflow-wrap: anywhere; } .crm-recado-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; } .crm-recado-accion { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border: 1px solid var(--crm-text); background: var(--crm-text); color: var(--crm-bg); font: 500 14px/20px var(--crm-sans); text-decoration: none; cursor: pointer; } .crm-recado-accion span { transition: transform 160ms var(--crm-curva); } .crm-recado-accion:hover span { transform: translateX(2px); } .crm-recado-visto { min-height: 32px; padding: 0 6px; border: 0; background: none; color: var(--crm-dim); font: 500 12px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; } .crm-recado-visto:hover { color: var(--crm-text); } .crm-recado-accion:focus-visible, .crm-recado-visto:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-campana { position: relative; display: inline-flex; } .crm-campana-boton { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--crm-line-2); background: var(--crm-panel); color: var(--crm-text-2); cursor: pointer; } .crm-campana-boton:hover { color: var(--crm-text); } .crm-campana-boton[aria-expanded=true] { color: var(--crm-text); border-color: var(--crm-text-2); } .crm-campana-boton:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-campana-cifra { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--crm-acento); color: var(--crm-bg); font: 600 11px/16px var(--crm-mono); text-align: center; } .crm-campana-panel { position: absolute; z-index: 60; top: calc(100% + 8px); right: 0; width: min(420px, calc(100vw - 32px)); max-height: min(70vh, 640px); display: grid; grid-template-rows: auto minmax(0, 1fr); border: 1px solid var(--crm-line-2); background: var(--crm-bg); box-shadow: var(--crm-sombra-capa); animation: crm-campana-entra 160ms var(--crm-curva); } .crm-campana-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--crm-line-2); color: var(--crm-acento); font: 500 12px/16px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; } .crm-campana-dia { color: var(--crm-dim); } .crm-campana-lista { display: grid; gap: 10px; padding: 12px; overflow: auto; overscroll-behavior: contain; } .crm-campana-vacio { display: flex; gap: 10px; align-items: baseline; margin: 0; padding: 18px 14px; color: var(--crm-text-2); font: 400 14px/20px var(--crm-sans); } .crm-campana-vacio span { color: var(--crm-acento); font-family: var(--crm-mono); } .crm-campana-espera { display: grid; gap: 10px; padding: 12px; } .crm-campana-espera i { display: block; height: 76px; border: 1px solid var(--crm-line); background: linear-gradient( 100deg, transparent 30%, var(--crm-panel-2) 50%, transparent 70%) 0 0 / 300% 100%, var(--crm-panel); animation: crm-campana-brillo 1.4s linear infinite; } @keyframes crm-campana-entra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } @keyframes crm-campana-brillo { from { background-position: 100% 0, 0 0; } to { background-position: -100% 0, 0 0; } } @media (prefers-reduced-motion: reduce) { .crm-campana-panel, .crm-campana-espera i { animation: none; } .crm-recado-accion span { transition: none; } } @media (max-width: 480px) { .crm-recado { grid-template-columns: 44px minmax(0, 1fr); } .crm-campana-panel { position: fixed; top: 56px; right: 16px; left: 16px; width: auto; } } .crm-gvivo { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--crm-line); border-left: 2px solid var(--crm-error); background: var(--crm-panel); } .crm-gvivo[data-estado=colgada] { border-left-color: var(--crm-line-2); } .crm-gvivo-cab { display: flex; align-items: center; gap: 10px; min-width: 0; } .crm-gvivo-aire { display: inline-flex; flex: none; align-items: center; gap: 7px; height: 22px; padding: 0 8px; border: 1px solid var(--crm-error-linea); background: var(--crm-error-suave); color: var(--crm-error); font: 600 11px/14px var(--crm-mono); letter-spacing: .12em; text-transform: uppercase; } .crm-gvivo-aire i { width: 7px; height: 7px; border-radius: 50%; background: var(--crm-error); animation: crm-gvivo-aire 1.6s ease-in-out infinite; } .crm-gvivo[data-estado=colgada] .crm-gvivo-aire { border-color: var(--crm-line); background: transparent; color: var(--crm-dim); } .crm-gvivo[data-estado=colgada] .crm-gvivo-aire i { background: var(--crm-line-2); animation: none; } @keyframes crm-gvivo-aire { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .crm-gvivo-crono { color: var(--crm-text); font: 500 14px/18px var(--crm-mono); font-variant-numeric: tabular-nums; } .crm-gvivo-muescas { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; cursor: default; } .crm-gvivo-muescas i { width: 6px; height: 12px; border: 1px solid var(--crm-line-2); transition: background var(--crm-t-color, 160ms) ease, border-color var(--crm-t-color, 160ms) ease; } .crm-gvivo-muescas i[data-hecha] { border-color: var(--crm-acento); background: var(--crm-acento); } .crm-gvivo-muescas b { margin-left: 6px; color: var(--crm-text-2); font: 500 12px/16px var(--crm-mono); font-variant-numeric: tabular-nums; } .crm-gvivo-cambiar { flex: none; height: 24px; padding: 0 8px; border: 1px solid var(--crm-line-2); background: none; color: var(--crm-text-2); font: 500 12px/16px var(--crm-sans); cursor: pointer; } .crm-gvivo-cambiar[aria-pressed=true] { border-color: var(--crm-text-2); color: var(--crm-text); } .crm-gvivo-cambiar:focus-visible, .crm-gvivo-punto:focus-visible, .crm-gvivo-sello:focus-visible, .crm-gvivo-fichas button:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 1px; } .crm-gvivo-cuerpo, .crm-gvivo-objeciones { display: grid; gap: 6px; min-width: 0; } .crm-gvivo-apertura { overflow: hidden; margin: 0; color: var(--crm-text-2); font: italic 400 14px/20px var(--crm-sans); text-overflow: ellipsis; white-space: nowrap; } .crm-gvivo-sellos { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; } .crm-gvivo-sello { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 7px 0 4px; border: 1px solid var(--crm-acento-linea, var(--crm-acento)); background: var(--crm-acento-suave); color: var(--crm-text); font: 400 12px/16px var(--crm-sans); cursor: pointer; } .crm-gvivo-sello[data-consta] { border-color: var(--crm-line); background: transparent; color: var(--crm-dim); cursor: help; } .crm-gvivo-sello svg { width: 11px; height: 11px; fill: none; stroke: var(--crm-acento); stroke-width: 2.6; } .crm-gvivo-sello[data-consta] svg { stroke: var(--crm-dim); } .crm-gvivo-sello:not([data-consta]) { animation: crm-gvivo-sello var(--crm-t-pulsar, 180ms) var(--crm-snap, ease-out); } @keyframes crm-gvivo-sello { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } } .crm-gvivo-lista { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; } .crm-gvivo-punto { display: flex; align-items: center; gap: 8px; width: 100%; height: 28px; padding: 0 6px 0 2px; border: 0; background: none; color: var(--crm-text); font: 400 14px/18px var(--crm-sans); text-align: left; cursor: pointer; } .crm-gvivo-punto:hover:not(:disabled) { background: var(--crm-panel-2); } .crm-gvivo-casilla { flex: none; width: 15px; height: 15px; border: 1px solid var(--crm-line-2); } .crm-gvivo-punto:hover:not(:disabled) .crm-gvivo-casilla { border-color: var(--crm-acento); } .crm-gvivo-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-gvivo-pista { margin: 0; color: var(--crm-dim); font: 400 13px/18px var(--crm-sans); } .crm-gvivo-fichas { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; } .crm-gvivo-fichas button { height: 24px; padding: 0 8px; border: 1px dashed var(--crm-line-2); background: none; color: var(--crm-text-2); font: 400 13px/16px var(--crm-sans); cursor: pointer; } .crm-gvivo-fichas button::before { content: "\ab"; } .crm-gvivo-fichas button::after { content: "\bb"; } .crm-gvivo-fichas button[aria-expanded=true] { border-style: solid; border-color: var(--crm-text-2); color: var(--crm-text); } .crm-gvivo-respuesta { margin: 0; padding: 6px 10px; border-left: 2px solid var(--crm-acento); background: var(--crm-panel-2); color: var(--crm-text); font: 400 14px/20px var(--crm-sans); } .crm-gvivo-siguiente { color: var(--crm-acento); font: 500 13px/20px var(--crm-mono); white-space: nowrap; } .crm-gvivo-cierre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; } .crm-gvivo-falta { display: grid; flex: 1 1 0; gap: 2px; min-width: 0; margin: 0; color: var(--crm-text-2); font: 400 15px/22px var(--crm-sans); } .crm-gvivo-falta b { color: var(--crm-text); font-weight: 500; } .crm-gvivo-regla { color: var(--crm-dim); font: 400 13px/18px var(--crm-sans); } .crm-gvivo-contar { display: inline-flex; flex: none; align-items: center; gap: 10px; height: 32px; padding: 0 14px; border: 1px solid var(--crm-boton); background: var(--crm-boton); color: var(--crm-boton-tinta); font: 500 14px/18px var(--crm-sans); cursor: pointer; } .crm-gvivo-contar kbd { padding: 0 5px; border: 1px solid currentColor; font: 500 11px/16px var(--crm-mono); opacity: .7; } .crm-gvivo-contar:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .crm-gvivo-aire i, .crm-gvivo-sello:not([data-consta]) { animation: none; } } .crm-gvivo-cuerpo > .crm-gvivo-punto { height: 32px; font-size: 15px; } .crm-gvivo-cuerpo > .crm-gvivo-punto .crm-gvivo-casilla { width: 16px; height: 16px; border-color: var(--crm-text-2); } .crm-gvivo-luego { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; } .crm-gvivo-luego button { height: 24px; padding: 0 7px; border: 1px dashed var(--crm-line-2); background: none; color: var(--crm-text-2); font: 400 12px/16px var(--crm-sans); cursor: pointer; } .crm-gvivo-luego button:hover { border-color: var(--crm-text-2); color: var(--crm-text); } .crm-gvivo-luego button:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 1px; } .crm-gvivo-dijo { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--crm-text); font: 500 14px/20px var(--crm-sans); } .crm-gvivo-otras { display: inline-grid; place-items: center; width: 22px; height: 24px; border: 1px solid var(--crm-line-2); background: none; color: var(--crm-text-2); font: 500 14px/1 var(--crm-mono); cursor: pointer; } .crm-gvivo-otras:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 1px; } .crm-gvivo { gap: 6px; padding: 8px 12px; } .crm-guion-tarjeta { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 14px 16px; border: 1px solid var(--crm-line); background: var(--crm-panel); color: var(--crm-text); } .crm-guion-tarjeta-rotulo { display: flex; justify-content: space-between; align-items: baseline; font: 500 11px/16px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--crm-dim); } .crm-guion-tarjeta-cuenta { font-variant-numeric: tabular-nums; color: var(--crm-text); } .crm-guion-tarjeta-lista { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; padding: 0; list-style: none; } .crm-guion-tarjeta-fila { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; padding: 7px 0; border-bottom: 1px dashed var(--crm-line); outline: 0; } .crm-guion-tarjeta-fila:focus-visible { box-shadow: inset calc(2 * var(--crm-foco-ancho)) 0 0 var(--crm-acento); } .crm-guion-tarjeta-agujero { width: 14px; height: 14px; margin-top: 2px; border: 1px solid var(--crm-line-2); border-radius: 50%; transition: background .25s ease, border-color .25s ease, transform .25s ease; } .crm-guion-tarjeta-fila[data-hecha] .crm-guion-tarjeta-agujero { background: var(--crm-acento); border-color: var(--crm-acento); transform: scale(1.06); } .crm-guion-tarjeta-fila[data-siguiente] .crm-guion-tarjeta-agujero { border-color: var(--crm-acento); border-style: dashed; } .crm-guion-tarjeta-texto { display: grid; gap: 2px; min-width: 0; } .crm-guion-tarjeta-texto strong { font-size: 13px; line-height: 18px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-guion-tarjeta-fila[data-hecha] strong { color: var(--crm-dim); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--crm-dim) 60%, transparent); } .crm-guion-tarjeta-pregunta { display: none; font-size: 12px; line-height: 16px; color: var(--crm-dim); } .crm-guion-tarjeta-fila[data-siguiente] .crm-guion-tarjeta-pregunta { display: block; color: var(--crm-text-2, var(--crm-text)); } .crm-guion-tarjeta-fila:not([data-siguiente]):is(:hover, :focus-visible) .crm-guion-tarjeta-pregunta { display: block; position: absolute; z-index: 2; left: 28px; right: 0; top: 100%; padding: 8px 10px; border: 1px solid var(--crm-line-2); background: var(--crm-panel); color: var(--crm-text); } .crm-guion-tarjeta-estado { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .crm-guion-tarjeta-marcador { display: flex; justify-content: space-between; margin-top: auto; font: 400 12px/16px var(--crm-mono); color: var(--crm-dim); } .crm-guion-tarjeta-marcador b { font-weight: 500; color: var(--crm-text); font-variant-numeric: tabular-nums; } .crm-guion-tarjeta-accion > * { width: 100%; } @media (max-height: 820px) { .crm-guion-tarjeta { gap: 8px; padding: 12px 14px; } .crm-guion-tarjeta-lista { grid-template-columns: 1fr 1fr; column-gap: 12px; } .crm-guion-tarjeta-fila { padding: 6px 0; } .crm-guion-tarjeta-fila[data-siguiente] { grid-column: 1 / -1; } } @media (prefers-reduced-motion: reduce) { .crm-guion-tarjeta-agujero { transition: none; } } .crm-orden-pastilla { position: fixed; left: 50%; bottom: 56px; z-index: 60; transform: translateX(-50%); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; width: min(560px, calc(100vw - 32px)); padding: 10px 16px 10px 10px; border: 1px solid var(--crm-line-2); background: var(--crm-panel); color: var(--crm-text); animation: crm-orden-entra 180ms cubic-bezier(.2, .8, .2, 1); } .crm-orden-pastilla[data-fase=escuchando] { border-color: var(--crm-acento); } .crm-orden-pastilla[data-fase=error] { border-color: var(--crm-error); } @keyframes crm-orden-entra { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } } @media (prefers-reduced-motion: reduce) { .crm-orden-pastilla { animation: none; } } .crm-orden-cuerpo { display: grid; gap: 2px; min-width: 0; } .crm-orden-rotulo { font: 500 11px/16px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--crm-dim); } .crm-orden-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; line-height: 22px; } .crm-orden-accion { margin-left: 10px; font-weight: 500; color: var(--crm-acento); } .crm-orden-boton { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border: 1px solid var(--crm-line-2); background: transparent; color: var(--crm-text); cursor: pointer; touch-action: none; } .crm-orden-boton kbd { font: 500 11px/1 var(--crm-mono); color: var(--crm-dim); } .crm-orden-boton:active { border-color: var(--crm-acento); color: var(--crm-acento); } .crm-orden-boton:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-placatec { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 16px; min-height: 0; overflow: auto; padding: 22px 26px 18px; border: 1px solid var(--crm-line-2); background: repeating-linear-gradient( 90deg, var(--crm-panel) 0 2px, var(--crm-panel-2) 2px 3px); } .crm-placatec-remache { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--crm-line-2); box-shadow: inset 1px 1px 0 var(--crm-bg); } .crm-placatec-remache[data-p="1"] { top: 9px; left: 9px; } .crm-placatec-remache[data-p="2"] { top: 9px; right: 9px; } .crm-placatec-remache[data-p="3"] { bottom: 9px; left: 9px; } .crm-placatec-remache[data-p="4"] { bottom: 9px; right: 9px; } .crm-placatec-cabeza { display: grid; gap: 4px; } .crm-placatec-rotulo { font: 500 11px/16px var(--crm-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--crm-dim); } .crm-placatec-titulo { margin: 0; font: 600 22px/1.2 var(--crm-sans); letter-spacing: -.01em; color: var(--crm-text); } .crm-placatec-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font: 400 13px/20px var(--crm-mono); color: var(--crm-text-2); } .crm-placatec-meta a { display: inline-flex; align-items: center; gap: 4px; color: var(--crm-text); text-decoration: underline; text-underline-offset: 3px; } .crm-placatec-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; align-content: start; } .crm-placatec-celda { display: grid; gap: 6px; align-content: start; padding: 12px 14px; border: 1px solid var(--crm-line); background: var(--crm-bg); min-height: 74px; } .crm-placatec-celda[data-estado=consta] { min-height: 0; background: transparent; border-color: transparent; border-bottom: 1px solid var(--crm-line); padding: 8px 2px; } .crm-placatec-celda[data-estado=consta] .crm-placatec-valor { font: 500 14px/20px var(--crm-mono); overflow-wrap: anywhere; } .crm-placatec-celda[data-estado=hueco] { border-style: dashed; background: transparent; } .crm-placatec-celda[data-estado=aprobado] { border-color: var(--crm-acento); } .crm-placatec-celda[data-estado=descartado] { opacity: .55; } .crm-placatec-celda-rotulo { font: 500 11px/16px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--crm-dim); } .crm-placatec-hueco { font: 400 13px/18px var(--crm-mono); color: var(--crm-dim); font-style: italic; } .crm-placatec-valor { font: 600 18px/22px var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-text); } .crm-placatec-fuente { margin: 0; padding: 8px 10px; border: 1px solid var(--crm-line-2); border-left: 3px solid var(--crm-acento); background: var(--crm-panel); } .crm-placatec-fuente[data-tipo=otra] { border-left-color: var(--crm-aviso); } .crm-placatec-fuente figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 500 12px/16px var(--crm-mono); } .crm-placatec-fuente figcaption a { color: var(--crm-text); text-decoration: underline; text-underline-offset: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-placatec-sello { padding: 1px 6px; border: 1px solid var(--crm-acento); font: 500 10px/14px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--crm-acento); } .crm-placatec-fuente[data-tipo=otra] .crm-placatec-sello { border-color: var(--crm-aviso); color: var(--crm-aviso); } .crm-placatec-fuente blockquote { margin: 6px 0 0; font: 400 12px/18px var(--crm-sans); color: var(--crm-text-2); max-height: 72px; overflow: auto; } .crm-placatec-acciones { display: flex; gap: 6px; } .crm-placatec-nota { font: 400 12px/18px var(--crm-mono); color: var(--crm-dim); } .crm-placatec-celda[data-estado=aprobado] .crm-placatec-nota { color: var(--crm-acento); } .crm-placatec-celda[data-estado=error] .crm-placatec-nota { color: var(--crm-error); } .crm-placatec-pie { display: grid; gap: 8px; padding-top: 12px; border-top: 1px dashed var(--crm-line-2); } @media (prefers-reduced-motion: no-preference) { .crm-placatec-celda { transition: border-color .2s ease, opacity .2s ease; } } .crm-papel-borrador { position: relative; padding: 18px 18px 14px 34px; border: 1px solid var(--crm-line-2); background: var(--crm-bg); background-image: linear-gradient( 90deg, transparent 22px, var(--crm-line) 22px, var(--crm-line) 23px, transparent 23px); } .crm-papel-borrador-sello { position: absolute; top: -10px; right: 14px; padding: 2px 8px; border: 1px dashed var(--crm-aviso); background: var(--crm-panel); font: 500 10px/14px var(--crm-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--crm-aviso); transform: rotate(-2deg); } .crm-papel-borrador-texto { width: 100%; resize: vertical; min-height: 180px; border: 0; background: transparent; font: 400 15px/24px var(--crm-sans); color: var(--crm-text); outline: none; } .crm-papel-borrador-texto:focus-visible { box-shadow: inset 0 calc(-1 * var(--crm-foco-ancho)) 0 var(--crm-acento); } .crm-respuesta { font: 400 16px/1.55 var(--crm-sans); color: var(--crm-text); } .crm-respuesta p { margin: 0 0 10px; } .crm-respuesta > :last-child { margin-bottom: 0; } .crm-respuesta ul { margin: 0 0 10px; padding: 0; list-style: none; } .crm-respuesta ul > li { position: relative; margin: 3px 0; padding-left: 16px; } .crm-respuesta ul > li::before { content: "\2013"; position: absolute; left: 0; color: var(--crm-acento); } .crm-respuesta strong { font-weight: 500; color: var(--crm-text); } .crm-respuesta .crm-respuesta__pregunta { margin: 0 0 12px; font: 500 13px/1.4 var(--crm-mono); color: var(--crm-dim); } .crm-respuesta__pregunta::before { content: "\203a "; color: var(--crm-acento); } .crm-respuesta__cita { display: inline-flex; align-items: center; height: 20px; margin: 0 2px; padding: 0 6px; vertical-align: 1px; border: 1px solid var(--crm-line-2, var(--crm-line)); border-top-color: var(--crm-acento); background: var(--crm-bg); color: var(--crm-text); font: 500 10px/1 var(--crm-mono); letter-spacing: 0.08em; text-transform: uppercase; } button.crm-respuesta__cita { cursor: pointer; } button.crm-respuesta__cita:hover { border-color: var(--crm-acento); } button.crm-respuesta__cita:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 1px; } .crm-respuesta .crm-respuesta__pensando { color: var(--crm-dim); font: 400 13px/1.4 var(--crm-mono); } .crm-respuesta .crm-respuesta__aviso { margin: 10px 0 0; padding: 6px 10px; border-left: 2px solid var(--crm-aviso, var(--crm-acento)); font: 400 13.5px/1.45 var(--crm-sans); color: var(--crm-text-2, var(--crm-dim)); } @media (prefers-reduced-motion: no-preference) { .crm-respuesta[data-pensando] .crm-respuesta__pensando { animation: crm-respuesta-late 1.4s ease-in-out infinite; } } @keyframes crm-respuesta-late { 50% { opacity: 0.45; } } .crm-conector-foco .crm-foco-pie .crm-boton[data-tamano=grande], .crm-conector-foco .crm-wa-enlace-acciones .crm-boton[data-tamano=grande] { --crm-boton-alto: 48px; font-size: 15px; } .crm-conector-foco .crm-wa-requisitos .crm-opcion-fila { min-height: 48px; } .crm-conector-foco .crm-wa-requisitos .crm-opcion-etiqueta { font-size: 15px; line-height: 24px; } .crm-conector-foco .crm-wa-requisitos .crm-casilla { margin-top: 4px; } .crm-wa-pantalla { container: crm-wa-pantalla / inline-size; width: 100%; min-width: 0; } .crm-wa-permisos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--crm-line); } .crm-wa-permisos-lista { min-width: 0; padding: 20px 20px 20px 0; } .crm-wa-permisos-lista + .crm-wa-permisos-lista { padding: 20px 0 20px 20px; border-left: 1px solid var(--crm-line); } .crm-wa-permisos-rotulo { margin: 0 0 12px; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; font-weight: 400; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-wa-permisos ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } .crm-wa-permisos li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; color: var(--crm-text); font-size: 15px; line-height: 24px; } .crm-wa-permisos li svg { width: 16px; height: 16px; margin-top: 4px; color: var(--crm-text-2); stroke-width: 1.6; } .crm-wa-permisos-lista[data-tono=nunca] li { color: var(--crm-text-2); } .crm-wa-permisos-lista[data-tono=nunca] li svg { color: var(--crm-muted); } @container crm-wa-pantalla (max-width: 559px) { .crm-wa-permisos { grid-template-columns: minmax(0, 1fr); } .crm-wa-permisos-lista, .crm-wa-permisos-lista + .crm-wa-permisos-lista { padding: 16px 0; border-left: 0; } .crm-wa-permisos-lista + .crm-wa-permisos-lista { border-top: 1px solid var(--crm-line); } } .crm-wa-modos { display: grid; justify-items: center; gap: 16px; width: 100%; } .crm-wa-modos-consecuencias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: min(640px, 100%); margin: 0; } .crm-wa-modos-consecuencias[data-columnas="1"] { grid-template-columns: minmax(0, 1fr); } .crm-wa-modos-consecuencia { min-width: 0; } .crm-wa-modos-consecuencia dt { margin: 0 0 4px; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-wa-modos-consecuencia dd { margin: 0; color: var(--crm-text-2); font-size: 13px; line-height: 20px; } @container crm-wa-pantalla (max-width: 559px) { .crm-wa-modos-consecuencias { grid-template-columns: minmax(0, 1fr); } } .crm-wa-fallo-ayuda, .crm-wa-fallo-servidor { display: block; } .crm-wa-fallo-servidor { margin-top: 4px; color: var(--crm-muted); overflow-wrap: anywhere; } .crm-wa-requisitos, .crm-wa-fallo { display: grid; gap: 16px; width: 100%; } .crm-wa-enlace { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 32px; width: 100%; } .crm-wa-enlace-otro { justify-self: start; } .crm-wa-enlace-lado { display: grid; justify-items: start; gap: 16px; min-width: 0; } .crm-wa-enlace-acciones { display: grid; gap: 8px; width: 100%; } .crm-wa-enlace-acciones .crm-boton { justify-content: flex-start; width: 100%; } .crm-wa-enlace-host { display: flex; align-items: baseline; gap: 8px; min-width: 0; max-width: 100%; margin: 0; overflow: hidden; color: var(--crm-text-2); font-family: var(--crm-mono); font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; } .crm-wa-enlace-host-rotulo { color: var(--crm-muted); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-wa-enlace-nota { margin: 0; color: var(--crm-muted); font-size: 13px; line-height: 20px; } @container crm-wa-pantalla (max-width: 559px) { .crm-wa-enlace { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 24px; } .crm-wa-enlace-lado { justify-items: stretch; width: 100%; } } .crm-qr { display: inline-block; flex: none; padding: 0; border: 1px solid var(--crm-line-2); line-height: 0; forced-color-adjust: none; } .crm-qr-placa { display: block; } .crm-qr-fondo { fill: var(--crm-boton); } .crm-qr-modulos { fill: var(--crm-boton-tinta); } .crm-qr[data-invertir] .crm-qr-fondo { fill: var(--crm-boton-tinta); } .crm-qr[data-invertir] .crm-qr-modulos { fill: var(--crm-boton); } .crm-conector-sello { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-width: 0; } .crm-conector-sello-interior { display: grid; gap: 2px; padding: 8px 12px; border: 1px solid var(--crm-line-2); background: var(--crm-panel); box-shadow: inset 0 0 0 2px var(--crm-panel), inset 0 0 0 3px var(--crm-line-2); } .crm-conector-sello-rotulo { color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-conector-sello-fecha { color: var(--crm-text); font-size: 20px; font-weight: 500; line-height: 28px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .crm-conector-sello-detalle { color: var(--crm-muted); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; } .crm-conector-sello[data-estado=por-caducar] .crm-conector-sello-interior { border-color: var(--crm-aviso-linea); box-shadow: inset 0 0 0 2px var(--crm-panel), inset 0 0 0 3px var(--crm-aviso-linea); } .crm-conector-sello[data-estado=por-caducar] .crm-conector-sello-detalle { color: var(--crm-aviso); } .crm-conector-sello[data-estado=caducado] .crm-conector-sello-interior { border-color: var(--crm-error-linea); box-shadow: inset 0 0 0 2px var(--crm-panel), inset 0 0 0 3px var(--crm-error-linea); } .crm-conector-sello[data-estado=caducado] :is(.crm-conector-sello-rotulo, .crm-conector-sello-detalle) { color: var(--crm-error); } .crm-wa-espera { display: grid; width: 100%; margin: 0; padding: 0; border-top: 1px solid var(--crm-line); list-style: none; } .crm-wa-espera > li { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--crm-line); } .crm-wa-espera > li > svg { width: 16px; height: 16px; color: var(--crm-acento); stroke-width: 1.6; } .crm-wa-espera-texto { min-width: 0; color: var(--crm-text); font-size: 15px; line-height: 24px; } .crm-wa-espera-meta { color: var(--crm-muted); font-family: var(--crm-mono); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; } .crm-wa-espera-punto { justify-self: center; width: 8px; height: 8px; border: 1px solid var(--crm-acento); border-radius: 50%; } .crm-wa-espera > li[data-pendiente]::after { content: ""; position: absolute; inset: auto 0 -1px; height: 1px; background: linear-gradient( 90deg, transparent, var(--crm-acento) 50%, transparent); background-size: 40% 100%; background-repeat: no-repeat; background-position: -40% 0; pointer-events: none; animation: crm-filo-continuo var(--crm-t-filo) var(--crm-curva) infinite; } .crm-wa-espera > li.crm-wa-espera-ultima { display: block; min-height: 0; padding: 12px 0 0; border-bottom: 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; } @media (prefers-reduced-motion: reduce) { .crm-wa-espera > li[data-pendiente]::after { animation: none; background: var(--crm-acento-linea); background-size: auto; } } .crm-wa-celebracion .crm-wa-numero { margin-top: 24px; } .crm-wa-activo { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; } .crm-wa-activo li { display: flex; align-items: center; gap: 8px; color: var(--crm-text-2); font-size: 13px; line-height: 20px; } .crm-wa-activo svg { flex: none; width: 14px; height: 14px; color: var(--crm-muted); stroke-width: 1.5; } .crm-wa-numero { min-width: 0; max-width: 100%; } .crm-wa-numero[data-forma=resguardo] { container: crm-wa-numero / inline-size; width: 100%; max-width: 560px; text-align: left; } .crm-wa-resguardo { display: grid; grid-template-columns: 64px 1px minmax(0, 1fr); border: 1px solid var(--crm-line-2); background: var(--crm-panel); } .crm-wa-talon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px 8px; } .crm-wa-talon-rotulo { color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-wa-talon-iso { color: var(--crm-text); font-family: var(--crm-mono); font-size: 13px; font-weight: 500; line-height: 20px; } .crm-wa-talon-prefijo { color: var(--crm-muted); font-family: var(--crm-mono); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; } .crm-wa-corte { position: relative; border-left: 1px dashed var(--crm-line-2); } .crm-wa-corte::before, .crm-wa-corte::after { content: ""; position: absolute; left: -4px; width: 6px; height: 6px; border: 1px solid var(--crm-line-2); background: var(--crm-bg); } .crm-wa-corte::before { top: -1px; border-top: 0; } .crm-wa-corte::after { bottom: -1px; border-bottom: 0; } .crm-conector-ficha .crm-wa-corte::before, .crm-conector-ficha .crm-wa-corte::after { background: var(--crm-panel); } .crm-wa-cuerpo { display: grid; justify-items: start; gap: 4px; min-width: 0; padding: 12px 16px; } .crm-wa-cifra-fila { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; } .crm-wa-cifra { color: var(--crm-text); font-family: var(--crm-mono); font-size: 28px; font-weight: 500; line-height: 32px; font-variant-numeric: tabular-nums; white-space: nowrap; } .crm-wa-cifra .crm-copiable-texto { overflow: visible; } .crm-wa-nombre { margin: 0; color: var(--crm-text); font-size: 15px; font-weight: 500; line-height: 22px; overflow-wrap: anywhere; } .crm-wa-nombre[data-pendiente] { color: var(--crm-muted); font-size: 13px; font-weight: 400; line-height: 20px; } @container crm-wa-numero (max-width: 399px) { .crm-wa-resguardo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1px auto; } .crm-wa-talon { flex-direction: row; justify-content: flex-start; gap: 8px; padding: 8px 16px; } .crm-wa-corte { border-top: 1px dashed var(--crm-line-2); border-left: 0; } .crm-wa-corte::before { top: -4px; left: -1px; border-top: 1px solid var(--crm-line-2); border-left: 0; } .crm-wa-corte::after { top: -4px; right: -1px; bottom: auto; left: auto; border-right: 0; border-bottom: 1px solid var(--crm-line-2); } .crm-wa-cifra { font-size: 20px; line-height: 24px; } } .crm-wa-numero[data-forma=linea] { display: inline-flex; flex-wrap: wrap; align-items: center; row-gap: 4px; gap: 8px; min-width: 0; } .crm-wa-iso { display: inline-flex; flex: none; align-items: center; justify-content: center; box-sizing: border-box; width: 24px; height: 20px; padding: 0 4px; border: 1px solid var(--crm-line-2); color: var(--crm-text-2); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; } .crm-wa-iso[data-vacio] { visibility: hidden; } .crm-wa-numero-texto { flex: none; color: var(--crm-text); font-family: var(--crm-mono); font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; } .crm-wa-numero-texto .crm-copiable-texto { overflow: visible; } .crm-wa-numero-nombre { min-width: 0; overflow: hidden; color: var(--crm-muted); font-size: 13px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; } .crm-wa-numero-invalido { color: var(--crm-dim); font-size: 13px; line-height: 20px; } .crm-conector-ficha { container: crm-conector-ficha / inline-size; display: flex; flex-direction: column; gap: 16px; height: 100%; min-width: 0; padding: 20px; border: 1px solid var(--crm-line); background: var(--crm-panel); } .crm-conector-ficha-cabeza { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: start; gap: 12px; } .crm-conector-ficha-icono { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--crm-line-2); color: var(--crm-text-2); } .crm-conector-ficha-icono svg { width: 16px; height: 16px; stroke-width: 1.6; } .crm-conector-ficha-titulo { min-width: 0; } .crm-conector-ficha-nombre { margin: 0; overflow: hidden; color: var(--crm-text); font-size: 15px; font-weight: 500; line-height: 22px; letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; } .crm-conector-ficha-que { display: -webkit-box; margin: 0; overflow: hidden; color: var(--crm-muted); font-size: 13px; line-height: 20px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .crm-conector-ficha-estado { display: flex; justify-content: flex-end; min-width: 0; } .crm-conector-ficha-identidad, .crm-conector-ficha-cuerpo { display: grid; gap: 12px; min-width: 0; } .crm-conector-ficha-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; min-height: 32px; margin-top: auto; } .crm-conector-ficha-actividad { flex: 1 0 auto; max-width: 100%; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .crm-conector-ficha-actividad:empty { display: none; } .crm-conector-ficha-accion { min-width: 0; max-width: min(100%, 320px); } .crm-conector-ficha-accion-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-conector-ficha[data-disponibilidad=proximamente] .crm-conector-ficha-nombre { color: var(--crm-text-2); } .crm-conector-ficha[data-disponibilidad=proximamente] .crm-conector-ficha-icono { color: var(--crm-muted); } .crm-conector-ficha[data-esqueleto] { gap: 12px; min-height: 160px; } @container crm-conector-ficha (max-width: 319px) { .crm-conector-ficha-cabeza { grid-template-columns: 32px minmax(0, 1fr); } .crm-conector-ficha-estado { grid-column: 2; justify-content: flex-start; } } .crm-conectores { container: crm-conectores / inline-size; display: grid; gap: 32px; min-width: 0; } .crm-conectores-barra { display: flex; align-items: center; gap: 8px; max-width: 320px; } .crm-conectores-barra > * { flex: 1; } .crm-conectores-secciones { display: grid; gap: 32px; } .crm-conectores-seccion { display: grid; gap: 12px; min-width: 0; } .crm-conectores-rotulo { display: flex; align-items: baseline; gap: 8px; margin: 0; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; font-weight: 400; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-conectores-cuenta { color: var(--crm-dim); font-variant-numeric: tabular-nums; } .crm-conectores-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } .crm-conectores-rejilla > li { min-width: 0; } .crm-conectores-rejilla > li[data-ancho=doble] { grid-column: span 2; } @container crm-conectores (max-width: 719px) { .crm-conectores-barra { max-width: none; } .crm-conectores-rejilla > li[data-ancho=doble] { grid-column: auto; } } .crm-wa-bandeja { container: crm-wa-bandeja / inline-size; display: grid; grid-template-columns: auto minmax(0, 1fr); height: 100%; min-height: 480px; border: 1px solid var(--crm-line); background: var(--crm-bg); } .crm-wa-bandeja[data-vacia] { display: block; padding: 48px 24px; } .crm-wa-lista { display: flex; flex-direction: column; width: 320px; min-width: 0; min-height: 0; border-right: 1px solid var(--crm-line); background: var(--crm-panel); } .crm-wa-lista-cabecera { display: flex; align-items: center; box-sizing: border-box; height: 44px; min-width: 0; padding: 0 12px; border-bottom: 1px solid var(--crm-line); } .crm-wa-lista-busqueda { padding: 8px 12px; border-bottom: 1px solid var(--crm-line); } .crm-wa-conversaciones { flex: 1; min-height: 0; margin: 0; padding: 0; overflow-y: auto; list-style: none; } .crm-wa-conversacion { position: relative; display: grid; align-content: center; box-sizing: border-box; width: 100%; min-height: 44px; margin: 0; padding: 4px 12px; border: 0; border-bottom: 1px solid var(--crm-line); border-radius: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color var(--crm-t-salida) linear; } @media (hover: hover) { .crm-wa-conversacion:hover { background: var(--crm-panel-2); transition-duration: 0ms; } } .crm-wa-conversacion[aria-current=true] { background: var(--crm-panel-3); } .crm-wa-conversacion[aria-current=true]::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--crm-acento); } .crm-wa-conversacion:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: -1px; } .crm-wa-conversacion-fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; } .crm-wa-conversacion-nombre { min-width: 0; overflow: hidden; color: var(--crm-text); font-size: 13px; font-weight: 500; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; } .crm-wa-conversacion-nombre[data-numero] { font-family: var(--crm-mono); font-weight: 400; font-variant-numeric: tabular-nums; } .crm-wa-conversacion-hora { flex: none; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; } .crm-wa-conversacion-ultimo { min-width: 0; overflow: hidden; color: var(--crm-muted); font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; } .crm-wa-conversacion[data-sin-leer] .crm-wa-conversacion-ultimo { color: var(--crm-text-2); } .crm-wa-conversacion-esqueleto { display: grid; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--crm-line); } .crm-wa-lista-cargando { flex: 1; } .crm-wa-paginas { display: flex; align-items: center; gap: 8px; box-sizing: border-box; min-width: 0; max-width: 100%; height: 44px; padding: 0 8px 0 12px; border-top: 1px solid var(--crm-line); } .crm-wa-paginas-botones { display: flex; flex: none; gap: 4px; } .crm-wa-paginas-rango { margin-right: auto; white-space: nowrap; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; } .crm-wa-hilo { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .crm-wa-hilo > .crm-vacio, .crm-wa-hilo > .crm-aviso, .crm-wa-hilo-cargando { margin: 24px; } .crm-wa-hilo-cabecera { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--crm-line); } .crm-wa-hilo-nombre { min-width: 0; overflow: hidden; color: var(--crm-text); font-size: 13px; font-weight: 500; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; } .crm-wa-volver { display: none; } .crm-wa-conversacion-hilo { flex: 1; min-height: 0; } .crm-wa-conversacion-hilo .crm-conversacion-columna { padding-inline: 16px; } .crm-wa-conversacion-hilo .crm-conversacion-pie { padding-bottom: 16px; } .crm-wa-anteriores { display: flex; justify-content: center; padding: 8px 0; } .crm-wa-dia { margin: 16px 0 8px; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-align: center; text-transform: uppercase; } .crm-wa-texto { max-width: 68ch; margin: 0; font-size: 14px; line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; } .crm-wa-texto[data-no-soportado] { color: var(--crm-muted); } .crm-wa-plantilla-rotulo { margin: 0 0 4px; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-wa-entrega { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; } .crm-wa-entrega svg { flex: none; width: 14px; height: 14px; stroke-width: 1.5; } .crm-wa-entrega[data-estado=leido] { color: var(--crm-text-2); } .crm-wa-entrega[data-estado=fallido] { color: var(--crm-error); } .crm-wa-adjunto { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 8px; max-width: 360px; padding: 8px; border: 1px solid var(--crm-line-2); background: var(--crm-panel); } .crm-wa-adjunto-icono { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--crm-line); color: var(--crm-text-2); } .crm-wa-adjunto-icono svg { width: 16px; height: 16px; stroke-width: 1.6; } .crm-wa-adjunto-texto { display: grid; min-width: 0; } .crm-wa-adjunto-nombre { overflow: hidden; color: var(--crm-text); font-size: 13px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; } .crm-wa-adjunto-meta { color: var(--crm-muted); font-family: var(--crm-mono); font-size: 12px; line-height: 16px; } .crm-wa-adjunto-pie { grid-column: 1 / -1; margin: 0; font-size: 14px; line-height: 22px; overflow-wrap: anywhere; } .crm-wa-pie { display: grid; gap: 8px; } .crm-wa-ventana { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; } .crm-wa-ventana svg { flex: none; margin-top: 1px; width: 14px; height: 14px; stroke-width: 1.5; } .crm-wa-ventana[data-cerca] { color: var(--crm-aviso); } .crm-wa-ventana[data-estado=cerrada] { color: var(--crm-text-2); } .crm-wa-propuesta { display: grid; gap: 8px; padding: 12px 12px 12px 14px; border: 1px solid var(--crm-line-2); border-left: 2px solid var(--crm-acento-linea); background: var(--crm-panel); } .crm-wa-propuesta-rotulo { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-wa-propuesta-rotulo svg { width: 14px; height: 14px; stroke-width: 1.5; } .crm-wa-propuesta-texto { margin: 0; color: var(--crm-text-2); font-size: 14px; line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; } .crm-wa-propuesta-acciones { display: flex; gap: 8px; } .crm-wa-envio-plantilla { display: grid; gap: 12px; } .crm-wa-plantilla-variables { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; } .crm-wa-plantilla-vista { margin: 0; padding: 12px; border: 1px dashed var(--crm-line-2); color: var(--crm-text-2); font-size: 14px; line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; } .crm-wa-envio-plantilla-pie { display: flex; justify-content: flex-end; } .crm-wa-hilo-numero { display: flex; flex: none; min-width: 0; } @container crm-wa-bandeja (max-width: 719px) { .crm-wa-bandeja[data-vista=lista] .crm-wa-hilo, .crm-wa-bandeja[data-vista=hilo] .crm-wa-lista { display: none; } .crm-wa-lista, .crm-wa-hilo { grid-column: 1 / -1; width: auto; border-right: 0; } .crm-wa-volver { display: inline-flex; } .crm-wa-hilo-numero { display: none; } .crm-wa-adjunto { max-width: 100%; } } :where(.crm-actividad, .crm-aviso-conector), :where(.crm-actividad, .crm-aviso-conector) *, :where(.crm-actividad, .crm-aviso-conector) ::before, :where(.crm-actividad, .crm-aviso-conector) ::after { box-sizing: border-box; } .crm-actividad { container-type: inline-size; display: grid; gap: 16px; min-width: 0; color: var(--crm-text-2); font-family: var(--crm-sans); font-size: 13px; line-height: 20px; letter-spacing: -0.005em; } .crm-actividad-registro { display: grid; gap: 16px; min-width: 0; } .crm-actividad-dia { --crm-actividad-hora: 40px; min-width: 0; } .crm-actividad-registro:has(.crm-actividad-desfase) .crm-actividad-dia { --crm-actividad-hora: 80px; } .crm-actividad-dia-rotulo { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; height: 32px; margin: 0; border-bottom: 1px solid var(--crm-line); color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; font-weight: 400; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-actividad-dia-rotulo > span { overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; } .crm-actividad-zona { flex: none; color: var(--crm-dim); letter-spacing: 0; text-transform: none; } .crm-actividad-carril, .crm-actividad-esqueleto { position: relative; margin: 0; padding: 0; list-style: none; } .crm-actividad-carril::before, .crm-actividad-esqueleto::before { content: ""; position: absolute; top: 0; bottom: 0; left: 7px; width: 1px; background: var(--crm-line-2); } .crm-actividad-fila { position: relative; display: grid; grid-template-columns: 16px var(--crm-actividad-hora, 40px) minmax(0, 1fr); align-items: center; column-gap: 12px; min-height: 36px; padding: 8px 8px 8px 0; outline: none; transition: background-color var(--crm-t-salida) var(--crm-snap); } .crm-actividad-fila::after { content: ""; position: absolute; right: 0; bottom: 0; left: 28px; height: 1px; background: var(--crm-line); } .crm-actividad-fila:last-child::after { content: none; } @media (hover: hover) { .crm-actividad-carril .crm-actividad-fila:hover { background: var(--crm-panel-2); transition-duration: 0ms; } } .crm-actividad-fila:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: -1px; } .crm-actividad-fila[data-crm-forzar=hover] { background: var(--crm-panel-2); } .crm-actividad-fila[data-crm-forzar=foco] { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: -1px; } .crm-actividad-muesca { position: absolute; top: 17px; left: 3px; width: 9px; height: 1px; background: var(--crm-muted); } .crm-actividad-fila[data-resultado=error] .crm-actividad-muesca { top: 15px; left: 5px; width: 5px; height: 5px; background: var(--crm-error); } .crm-actividad-hora { grid-column: 2; display: flex; align-items: baseline; gap: 6px; min-width: 0; color: var(--crm-text-2); font-family: var(--crm-mono); font-size: 12px; font-variant-numeric: tabular-nums; line-height: 20px; white-space: nowrap; cursor: default; } .crm-actividad-desfase { color: var(--crm-muted); font-size: 11px; line-height: 16px; } .crm-actividad-cuerpo { grid-column: 3; display: flex; align-items: baseline; gap: 12px; min-width: 0; } .crm-actividad-hora, .crm-actividad-que, .crm-actividad-quien, .crm-actividad-motivo { position: relative; } .crm-actividad-que { display: flex; flex: 1 1 0%; align-items: baseline; color: var(--crm-text); white-space: nowrap; } .crm-actividad-accion { flex: none; } .crm-actividad-que .crm-actividad-conector { overflow: hidden; min-width: 0; flex: 1 1 0%; contain: inline-size; text-overflow: ellipsis; white-space: pre; } .crm-actividad-conector { color: var(--crm-muted); } .crm-actividad-conector-meta { display: none; } .crm-actividad-meta { display: flex; flex: 0 1 auto; align-items: baseline; gap: 12px; min-width: 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-actividad-quien { flex: 0 4 auto; overflow: hidden; min-width: 0; max-width: 160px; text-overflow: ellipsis; white-space: nowrap; } .crm-actividad-motivo { flex: 0 1 auto; display: block; overflow: hidden; min-width: 0; max-width: 280px; color: var(--crm-error); text-overflow: ellipsis; white-space: nowrap; } .crm-actividad-motivo svg { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; } .crm-actividad-esqueleto .crm-actividad-fila { grid-template-columns: 16px 40px minmax(0, 1fr); } .crm-actividad-esq-hora { grid-column: 2; } .crm-actividad-esq-texto { grid-column: 3; } .crm-actividad-espera { min-height: 216px; } .crm-actividad-paginas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding-top: 12px; border-top: 1px solid var(--crm-line); } .crm-actividad-tramo { color: var(--crm-text-2); font-family: var(--crm-mono); font-size: 12px; font-variant-numeric: tabular-nums; line-height: 16px; white-space: nowrap; } .crm-actividad-de { color: var(--crm-muted); } .crm-actividad-pasar { display: flex; gap: 8px; } @container (max-width: 559px) { .crm-actividad-fila { align-items: start; } .crm-actividad-cuerpo { flex-direction: column; align-items: stretch; gap: 0; } .crm-actividad-que { display: block; white-space: normal; overflow-wrap: anywhere; } .crm-actividad-que .crm-actividad-conector { display: none; } .crm-actividad-conector-meta { display: inline; color: var(--crm-text-2); overflow-wrap: anywhere; } .crm-actividad-quien { max-width: 100%; } .crm-actividad-registro:has(.crm-actividad-desfase) .crm-actividad-dia { --crm-actividad-hora: 40px; } .crm-actividad-hora { flex-direction: column; align-items: flex-start; gap: 0; } .crm-actividad-meta { flex-wrap: wrap; gap: 0 12px; min-width: 0; } .crm-actividad-motivo { max-width: 100%; } .crm-actividad-pasar { flex: 1 1 100%; } .crm-actividad-pasar .crm-boton { flex: 1 1 0; } } .crm-aviso-conector { --crm-aviso-conector-tono: var(--crm-aviso); container-type: inline-size; min-width: 0; font-family: var(--crm-sans); } .crm-aviso-conector[data-tono=error] { --crm-aviso-conector-tono: var(--crm-error); } .crm-aviso-conector[data-tono=hecho] { --crm-aviso-conector-tono: var(--crm-acento); } .crm-aviso-conector-caja { display: grid; grid-template-columns: minmax(0, 1fr) auto; border: 1px solid var(--crm-line-2); border-left-color: var(--crm-aviso-conector-tono); background: var(--crm-panel); } .crm-aviso-conector-cuerpo { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-content: center; gap: 2px 8px; min-width: 0; padding: 12px 16px; } .crm-aviso-conector-icono { grid-row: 1; width: 16px; height: 16px; margin-top: 2px; color: var(--crm-aviso-conector-tono); } .crm-aviso-conector-titulo { grid-column: 2; margin: 0; color: var(--crm-text); font-size: 13px; font-weight: 500; line-height: 20px; letter-spacing: -0.005em; overflow-wrap: anywhere; } .crm-aviso-conector-detalle { grid-column: 2; margin: 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; overflow-wrap: anywhere; } .crm-aviso-conector-talon { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 12px 16px; border-left: 1px dashed var(--crm-line-2); } .crm-aviso-conector-talon[data-sin-permiso] { max-width: 280px; color: var(--crm-muted); font-size: 12px; line-height: 16px; } .crm-aviso-conector-candado { flex: none; width: 14px; height: 14px; } @container (max-width: 479px) { .crm-aviso-conector-caja { grid-template-columns: minmax(0, 1fr); } .crm-aviso-conector-talon { padding: 12px 16px; border-top: 1px dashed var(--crm-line-2); border-left: 0; } .crm-aviso-conector-talon[data-sin-permiso] { max-width: none; } .crm-aviso-conector-talon .crm-boton { flex: 1 1 auto; } } .crm-actividad .crm-boton.crm-boton[data-tamano=compacto] .crm-boton-icono svg, .crm-aviso-conector .crm-boton.crm-boton[data-tamano=compacto] .crm-boton-icono svg { stroke-width: 1.6; } @media (pointer: coarse) { :is(.crm-actividad, .crm-aviso-conector) .crm-boton.crm-boton { --crm-boton-alto: 48px; min-width: 48px; } :is(.crm-actividad, .crm-aviso-conector) .crm-boton.crm-boton::after { content: none; } } @media (forced-colors: active) { .crm-actividad-muesca, .crm-actividad-carril::before, .crm-actividad-esqueleto::before { background: CanvasText; } .crm-aviso-conector-caja { border-left-color: CanvasText; } } @media (prefers-reduced-motion: reduce) { .crm-actividad-fila { transition: none; } } :where(.crm-alta) :where(.crm-alta-alcance, .crm-alta-autorizacion, .crm-alta-fichero, .crm-alta-resumen), :where(.crm-alta) :where(.crm-alta-alcance, .crm-alta-autorizacion, .crm-alta-fichero, .crm-alta-resumen) * { box-sizing: border-box; } .crm-alta .crm-boton, .crm-alta .crm-zona-soltar button { min-height: 48px; min-width: 48px; } .crm-alta-campo .crm-entrada { --crm-entrada-alto: 48px; } .crm-alta-eleccion { container-type: inline-size; } @container (max-width: 743px) { .crm-alta-eleccion .crm-alta-fichas.crm-alta-fichas[data-disposicion] { grid-template-columns: minmax(0, 1fr); } } .crm-alta-alcance { container-type: inline-size; display: grid; border-top: 1px solid var(--crm-line); } .crm-alta-alcance-bloque { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--crm-line); } .crm-alta-rotulo { margin: 0; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; font-weight: 400; line-height: 16px; padding-top: 4px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-alta-lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .crm-alta-lista li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; color: var(--crm-text-2); font-size: 15px; line-height: 24px; } .crm-alta-lista-icono { display: flex; height: 24px; align-items: center; color: var(--crm-muted); } .crm-alta-alcance-bloque[data-tono=puede] .crm-alta-lista-icono { color: var(--crm-acento); } .crm-alta-lista-icono svg { width: 16px; height: 16px; stroke-width: 1.6; } .crm-alta-vacio, .crm-alta-nota { margin: 0; color: var(--crm-muted); font-size: 15px; line-height: 24px; } @container (max-width: 559px) { .crm-alta-alcance-bloque { grid-template-columns: minmax(0, 1fr); gap: 8px; } } .crm-alta-autorizacion { display: grid; gap: 24px; } .crm-alta-autorizacion-accion { display: flex; justify-content: flex-start; } .crm-alta-celebracion .crm-alta-resumen { width: 100%; min-width: 0; margin-top: 24px; text-align: left; container-type: inline-size; } @container (max-width: 399px) { .crm-alta-resumen .crm-lista-desc-par { grid-template-columns: minmax(0, 1fr); gap: 4px; } } .crm-alta svg { stroke-width: 1.6; } .crm-alta .crm-ficha-opcion-icono svg { width: 16px; height: 16px; } @media (forced-colors: active) { .crm-alta .crm-boton[data-variante=principal]:not([data-deshabilitado], :disabled), .crm-alta .crm-boton[data-variante=principal]:not([data-deshabilitado], :disabled):hover, .crm-alta .crm-boton[data-variante=principal]:not([data-deshabilitado], :disabled):active { forced-color-adjust: none; border-color: var(--crm-boton); background: var(--crm-boton); color: var(--crm-boton-tinta); } } @media (prefers-reduced-motion: reduce) { .crm-alta-alcance, .crm-alta-autorizacion, .crm-alta-fichero { transition: none; animation: none; } } .crm-alta-identidad-prevista { margin: 0; padding: 16px; border: 1px solid var(--crm-line); font: 400 13px/20px var(--crm-mono); overflow-wrap: anywhere; } .crm-verifactu-identidad { display: grid; gap: 4px; overflow-wrap: anywhere; } .crm-verifactu-identidad > span { font-family: var(--crm-mono); } .crm-verifactu-nota, .crm-verifactu-qr-nota { margin: 0; color: var(--crm-text-2); font-size: 13px; line-height: 20px; overflow-wrap: anywhere; } .crm-verifactu-qr { display: grid; align-content: start; align-self: start; justify-items: start; gap: 8px; margin: 0; max-width: 100%; } .crm-verifactu-qr-titulo { color: var(--crm-text); font: 500 13px/20px var(--crm-sans); } .crm-verifactu-qr-imagen { display: block; width: 47mm; height: auto; max-width: 100%; } .crm-verifactu-qr-enlace { display: inline-flex; align-items: center; min-height: 48px; color: var(--crm-text); font-size: 13px; text-underline-offset: 3px; } .crm-verifactu-qr-enlace:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; } .crm-verifactu-qr-grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); align-content: start; gap: 24px; max-width: 1000px; margin: 40px auto; padding: 24px; } .crm-verifactu-qr-grilla-compacta { margin: 0; padding: 0; } .crm-verifactu-lamina { box-sizing: border-box; width: 100%; max-width: 1100px; min-width: 0; margin: 0 auto; padding: 32px; } .crm-verifactu-lamina-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; min-width: 0; } .crm-verifactu-lamina-leyenda { margin: 0 0 8px; color: var(--crm-text-2); font-size: 13px; line-height: 20px; } .crm-verifactu-lamina-titulo { margin: 0 0 20px; color: var(--crm-text); font: 500 20px/28px var(--crm-sans); } @media (max-width: 719px) { .crm-verifactu-lamina { padding: 16px; } } :where(.crm-cobros, .crm-mandato), :where(.crm-cobros, .crm-mandato) * { box-sizing: border-box; } .crm-cobros { display: grid; min-width: 0; } .crm-cobros .crm-boton { min-height: 48px; min-width: 48px; } .crm-cobros svg.lucide { stroke-width: 1.6; } .crm-cobros-identidad { overflow-wrap: anywhere; color: var(--crm-text); font-family: var(--crm-mono); font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums; } .crm-cobros-nota { margin: 0; overflow-wrap: anywhere; color: var(--crm-text-2); font-size: 13px; line-height: 20px; } .crm-mandato { container: crm-mandato / inline-size; position: relative; display: grid; min-width: 0; margin: 0; border: 1px solid var(--crm-line); background: var(--crm-panel); color: var(--crm-text); } .crm-mandato[data-estado=pendiente]::before { content: ""; position: absolute; inset: -1px auto -1px -1px; width: 2px; background: var(--crm-acento); } .crm-mandato-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: 48px; padding: 12px 20px; border-bottom: 1px solid var(--crm-line); } .crm-mandato-rotulo { margin: 0; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; font-weight: 400; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-mandato-referencia { display: grid; gap: 8px; min-width: 0; padding: 20px 20px 16px; } .crm-mandato-renglon { display: block; min-width: 0; padding-bottom: 8px; border-bottom: 1px solid var(--crm-control); overflow-wrap: anywhere; color: var(--crm-text); font-family: var(--crm-mono); font-size: 20px; font-weight: 500; line-height: 28px; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; } .crm-mandato-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--crm-line); } .crm-mandato-dato { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 12px 20px 16px; } .crm-mandato-dato + .crm-mandato-dato { border-left: 1px solid var(--crm-line); } .crm-mandato-dato dd { margin: 0; overflow-wrap: anywhere; color: var(--crm-text); font-size: 15px; line-height: 24px; } .crm-mandato .crm-mandato-cuenta { font-family: var(--crm-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; -webkit-user-select: none; user-select: none; } .crm-mandato-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .crm-mandato-pie { padding: 16px 20px; border-top: 1px solid var(--crm-line); } .crm-mandato svg.lucide { stroke-width: 1.6; } @container crm-mandato (max-width: 479px) { .crm-mandato-cabeza, .crm-mandato-referencia, .crm-mandato-dato, .crm-mandato-pie { padding-right: 16px; padding-left: 16px; } .crm-mandato-renglon { font-size: 16px; line-height: 24px; } .crm-mandato-datos { grid-template-columns: minmax(0, 1fr); } .crm-mandato-dato + .crm-mandato-dato { border-top: 1px solid var(--crm-line); border-left: 0; } } @media (forced-colors: active) { .crm-cobros .crm-boton[data-variante=principal]:not([data-deshabilitado], :disabled), .crm-cobros .crm-boton[data-variante=principal]:not([data-deshabilitado], :disabled):hover, .crm-cobros .crm-boton[data-variante=principal]:not([data-deshabilitado], :disabled):active { forced-color-adjust: none; border-color: var(--crm-boton); background: var(--crm-boton); color: var(--crm-boton-tinta); } } .crm-cobros-catalogo { display: grid; min-width: 0; } .crm-cobros-catalogo .crm-boton { min-height: 48px; min-width: 48px; } .crm-cobros-catalogo svg.lucide { stroke-width: 1.6; } .crm-cobros-catalogo .crm-conectores-barra .crm-entrada .crm-entrada-icono svg.lucide { stroke-width: 1.6; } .crm-cobros-catalogo .crm-vacio-icono svg { width: 16px; height: 16px; } @container crm-conectores (max-width: 719px) { .crm-cobros-catalogo .crm-conectores-barra .crm-entrada { --crm-entrada-alto: 48px; } } @media (forced-colors: active) { .crm-cobros-catalogo .crm-boton[data-variante=principal]:not([data-deshabilitado], :disabled), .crm-cobros-catalogo .crm-boton[data-variante=principal]:not([data-deshabilitado], :disabled):hover, .crm-cobros-catalogo .crm-boton[data-variante=principal]:not([data-deshabilitado], :disabled):active { forced-color-adjust: none; border-color: var(--crm-boton); background: var(--crm-boton); color: var(--crm-boton-tinta); } } :where(.crm-marca, .crm-pie, .crm-firma, .crm-iso-fondo), :where(.crm-marca, .crm-pie, .crm-firma, .crm-iso-fondo) *, :where(.crm-marca, .crm-pie, .crm-firma, .crm-iso-fondo) ::before, :where(.crm-marca, .crm-pie, .crm-firma, .crm-iso-fondo) ::after { box-sizing: border-box; } .crm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .crm-firma { --crm-h: 20px; position: relative; display: inline-flex; align-items: flex-end; gap: calc(var(--crm-h) * 0.3); color: var(--crm-text); line-height: 1; } .crm-firma[data-tamano=md] { --crm-h: 32px; } .crm-firma[data-tamano=lg] { --crm-h: clamp(36px, 5vw, 72px); } .crm-firma[data-tamano=fluida] { --crm-h: calc(100cqi / (7.4 + var(--crm-letras, 0) * 0.6 + 0.3)); display: flex; } .crm-firma-lockup { position: relative; flex: none; display: block; height: var(--crm-h); aspect-ratio: 7029.559 / 1000; width: calc(var(--crm-h) * 7.029559); background-color: currentColor; -webkit-mask: var(--crm-lockup) center / contain no-repeat; mask: var(--crm-lockup) center / contain no-repeat; } .crm-firma-apellido { color: var(--crm-acento); font-family: var(--crm-sans); font-size: calc(var(--crm-h) * 0.7713); font-weight: 500; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; margin-bottom: calc(var(--crm-h) * 0.104); } @supports (font-size: round(down, 1px, 1px)) { .crm-firma-apellido { font-size: round(down, calc(var(--crm-h) * 0.7713), 1px); } } .crm-firma[data-mayus] { --crm-h: var(--crm-firma-caja); gap: var(--crm-firma-hueco); } .crm-firma[data-mayus] .crm-firma-apellido { font-size: var(--crm-firma-letra); margin-bottom: var(--crm-firma-base); } .crm-firma-zona { display: flex; flex: 1 1 auto; align-items: center; min-width: 0; overflow: hidden; } .crm-firma-zona > .crm-firma { flex: none; } .crm-isotipo.crm-firma-isotipo > span { height: var(--crm-firma-caja); } .crm-firma-brillo { position: absolute; inset: 0; background: linear-gradient( 100deg, transparent 40%, color-mix(in oklab, var(--crm-acento) 95%, transparent) 50%, transparent 60%); background-size: 260% 100%; background-position: 115% 0; animation: crm-barrido-lento calc(var(--crm-t-filo) * 8) var(--crm-curva) infinite calc(var(--crm-t-filo) * 1.5); } .crm-firma:hover .crm-firma-brillo { animation: crm-barrido-ya var(--crm-t-dibujo) var(--crm-curva) 1 both; } .crm-iso-fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient( 180deg, currentColor 72%, transparent 100%); mask-image: linear-gradient( 180deg, currentColor 72%, transparent 100%); } .crm-iso-fondo { font-family: var(--crm-mono); } .crm-iso-lienzo { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity var(--crm-t-dibujo) var(--crm-snap); } .crm-iso-fondo[data-listo] .crm-iso-lienzo { opacity: 1; } .crm-marca { color: var(--crm-text); font-family: var(--crm-sans); -webkit-font-smoothing: antialiased; } .crm-acceso { container: crm-acceso / size; background: var(--crm-bg); position: relative; isolation: isolate; overflow-x: clip; overflow-y: visible; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; min-height: 100dvh; } .crm-acceso-barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; max-width: 1440px; margin-inline: auto; padding: 20px 16px; } .crm-acceso-volver { min-width: 0; max-width: 45%; text-align: right; } .crm-acceso-volver, .crm-acceso-volver a { color: var(--crm-muted); font-family: var(--crm-sans); font-size: 13px; line-height: 20px; text-decoration: none; } .crm-acceso-volver a { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .crm-acceso-volver a::after { content: ""; position: absolute; inset: -8px -4px; } .crm-acceso-volver svg { display: inline-block; flex: none; width: 16px; height: 16px; } .crm-acceso-volver a:hover { color: var(--crm-acento); } .crm-acceso-centro { display: grid; align-items: center; width: 100%; max-width: 1440px; margin-inline: auto; padding: 24px 16px; } .crm-acceso-panel { container: crm-acceso-panel / inline-size; position: relative; z-index: 1; display: grid; width: 100%; max-width: 460px; justify-self: center; border: 1px solid var(--crm-line-2); background: var(--crm-panel); box-shadow: var(--crm-sombra); clip-path: inset(-1px -128px -128px -128px); } .crm-acceso-panel::before { content: ""; position: absolute; z-index: 1; inset: -1px -1px auto; height: 1px; background: linear-gradient( 90deg, transparent, var(--crm-acento) 50%, transparent); background-size: 40% 100%; background-repeat: no-repeat; background-position: -40% 0; animation: crm-filo calc(var(--crm-t-filo) * 4) var(--crm-curva) infinite calc(var(--crm-t-filo) * 0.75); } .crm-acceso-panel[data-estado=accediendo]::before, .crm-acceso-panel[data-estado=dentro]::before { animation: crm-filo-continuo var(--crm-t-filo) var(--crm-curva) infinite; } .crm-acceso-cliente { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 16px 24px; border-bottom: 1px solid var(--crm-line); } .crm-acceso-logo { --crm-logo-h: 48px; display: flex; align-items: center; flex: none; max-width: 120px; } .crm-acceso-logo img, .crm-acceso-logo svg { display: block; width: auto; max-width: 120px; height: var(--crm-logo-h); object-fit: contain; } .crm-acceso-cliente-texto { display: grid; gap: 4px; min-width: 0; } .crm-acceso-cliente-rotulo { color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-acceso-cliente-nombre { color: var(--crm-text); font-size: 15px; font-weight: 500; line-height: 22px; letter-spacing: -0.01em; overflow-wrap: anywhere; } .crm-acceso-cuerpo { display: grid; align-content: start; gap: 24px; min-width: 0; padding: 32px 24px; } .crm-acceso-titulo { margin: 0; color: var(--crm-text); font-family: var(--crm-sans); font-size: 40px; font-weight: 500; line-height: 44px; letter-spacing: -0.04em; text-wrap: balance; overflow-wrap: anywhere; } @container crm-acceso-panel (min-width: 720px) { .crm-acceso-titulo { font-size: 48px; line-height: 52px; } } @container crm-acceso-panel (min-width: 1280px) { .crm-acceso-titulo { font-size: 56px; line-height: 60px; } } .crm-acceso-descripcion { margin: -8px 0 0; color: var(--crm-muted); font-size: 15px; line-height: 24px; } .crm-acceso-nota { color: var(--crm-muted); font-family: var(--crm-sans); font-size: 12px; line-height: 16px; overflow-wrap: anywhere; } .crm-acceso-nota a { position: relative; color: var(--crm-text-2); text-decoration: underline; text-decoration-color: var(--crm-line-2); text-decoration-thickness: 1px; text-underline-offset: 4px; } .crm-acceso-nota a::after { content: ""; position: absolute; inset: -16px -4px; } .crm-acceso-nota a:hover { color: var(--crm-acento); text-decoration-color: var(--crm-acento-linea); } .crm-acceso-formulario { display: grid; min-width: 0; border-top: 1px solid var(--crm-line); } .crm-acceso-formulario:empty { display: none; } .crm-acceso form { display: grid; min-width: 0; } .crm-campo { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: center; column-gap: 12px; min-height: 48px; padding: 0 4px; box-shadow: inset 0 -1px 0 var(--crm-line); transition: background-color var(--crm-t-color) ease, box-shadow var(--crm-t-gesto) var(--crm-snap); } .crm-campo-accion { grid-template-columns: 16px minmax(0, 1fr) auto; padding-right: 0; } .crm-campo:focus-within:not(:has(.crm-campo-boton:focus)) { background: var(--crm-panel-2); box-shadow: inset 0 -2px 0 var(--crm-acento); } .crm-campo-icono { display: grid; color: var(--crm-muted); transition: color var(--crm-t-color) ease; } .crm-campo-icono svg { width: 16px; height: 16px; } .crm-campo:focus-within:not(:has(.crm-campo-boton:focus)) .crm-campo-icono { color: var(--crm-acento); } .crm-campo-texto { position: relative; display: grid; align-self: stretch; min-width: 0; } .crm-campo-etiqueta { position: absolute; top: 4px; right: 0; left: 0; overflow: hidden; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; pointer-events: none; } .crm-campo-entrada { display: block; width: 100%; height: 48px; margin: 0; padding: 20px 0 4px; border: 0; border-radius: 0; background: transparent; color: var(--crm-text); font-family: var(--crm-mono); font-size: 16px; line-height: 24px; outline: none; } .crm-campo-entrada:focus-visible { outline: none; } .crm-campo-entrada::placeholder { color: var(--crm-dim); } .crm-campo-entrada:-webkit-autofill { -webkit-text-fill-color: var(--crm-text); transition: background-color calc(var(--crm-t-dibujo) * 100000) ease-out; } .crm-campo-boton { position: relative; display: inline-grid; place-items: center; min-width: 48px; height: 48px; margin: 0; padding: 0 12px; border: 0; border-radius: 0; background: transparent; color: var(--crm-muted); font-family: var(--crm-sans); font-size: 13px; font-weight: 500; line-height: 20px; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .crm-campo-boton::before { content: ""; position: absolute; inset: 8px 4px; border: 1px solid var(--crm-line-2); pointer-events: none; transition: border-color var(--crm-t-color) ease; } .crm-campo-boton:hover, .crm-campo-boton:focus-visible { color: var(--crm-text); } .crm-campo-boton:hover::before { border-color: var(--crm-muted); } .crm-campo-boton:focus-visible { outline: none; } .crm-campo-boton:focus-visible::before { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-acceso-acciones { display: grid; padding-top: 24px; } .crm-boton-acceso { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 48px; padding: 0 24px; border: 0; background: var(--crm-text); color: var(--crm-bg); font-family: var(--crm-mono); font-size: 13px; line-height: 20px; text-transform: uppercase; cursor: pointer; touch-action: manipulation; transition: background-color var(--crm-t-color) ease; } .crm-boton-acceso:hover { background: var(--crm-acento); } .crm-boton-acceso:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; } .crm-boton-acceso:disabled { cursor: progress; background: var(--crm-text-2); } .crm-boton-acceso svg { width: 16px; height: 16px; transition: transform var(--crm-t-gesto) var(--crm-snap); } .crm-boton-acceso:hover svg { transform: translateX(4px); } .crm-acceso-aviso, .crm-acceso-dentro { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 12px; align-items: center; min-height: 48px; margin: 0; padding: 4px; box-shadow: inset 0 -1px 0 var(--crm-line); font-size: 14px; line-height: 22px; overflow-wrap: anywhere; } .crm-acceso-aviso { color: var(--crm-error); } .crm-acceso-dentro { color: var(--crm-acento); } .crm-acceso-aviso svg, .crm-acceso-dentro svg { display: block; width: 16px; height: 16px; } @container crm-acceso (min-width: 560px) { .crm-acceso-cliente, .crm-acceso-cuerpo { padding-inline: 40px; } } @container crm-acceso (min-width: 720px) { .crm-acceso-barra, .crm-acceso-centro { padding-inline: 24px; } } @container crm-acceso (min-width: 1280px) { .crm-acceso-barra, .crm-acceso-centro { padding-inline: 32px; } } .crm-pie { container: crm-pie / inline-size; --crm-pie-h: clamp(84px, 15vh, 156px); position: relative; isolation: isolate; min-width: 0; min-height: var(--crm-pie-h); overflow: hidden; border-top: 1px solid var(--crm-line); background: linear-gradient( 180deg, var(--crm-pie-fondo), var(--crm-bg)), var(--crm-bg); color: var(--crm-muted); font-family: var(--crm-sans); } .crm-pie-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 28px; max-width: 1440px; margin-inline: auto; padding: clamp(10px, 1.6vh, 16px) clamp(16px, 2.6vw, 36px); } .crm-pie-vivo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; } .crm-pie-estado, .crm-pie-hora, .crm-pie-soporte, .crm-pie-legal { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-family: var(--crm-mono); font-size: 12px; text-transform: uppercase; } .crm-pie-legal { text-transform: none; font-family: var(--crm-sans); font-size: 13px; } .crm-pie-soporte a, .crm-pie-enlaces a { white-space: nowrap; color: var(--crm-text-2); text-decoration: none; text-transform: none; } .crm-pie-soporte a:hover, .crm-pie-enlaces a:hover { color: var(--crm-acento); } @container crm-pie (max-width: 719.98px) { .crm-pie-base, .crm-pie-vivo { flex-direction: column; align-items: flex-start; gap: 4px; } .crm-pie-soporte { flex-wrap: wrap; } .crm-pie .crm-pie-legal { white-space: normal; } .crm-pie .crm-pie-base { text-shadow: none; } .crm-pie .crm-pie-gigante { position: relative; z-index: auto; inset: auto; padding-top: 8px; } } .crm-pie-hora-valor { color: var(--crm-text-2); } .crm-punto { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--crm-dim); } .crm-pie-estado[data-estado=ok] .crm-punto { background: var(--crm-acento); box-shadow: 0 0 0 3px var(--crm-acento-suave); } .crm-pie-estado[data-estado=ok] .crm-punto::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--crm-acento); animation: crm-latido var(--crm-t-latido) ease-out infinite; } .crm-pie-estado[data-estado=sin-respuesta] .crm-punto { background: var(--crm-error); } .crm-pie-gigante { position: relative; max-width: 1440px; margin-inline: auto; padding: 8px clamp(16px, 2.6vw, 36px) 0; container-type: inline-size; display: flex; justify-content: center; align-items: flex-start; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient( 180deg, currentColor 70%, transparent 100%); mask-image: linear-gradient( 180deg, currentColor 70%, transparent 100%); } .crm-pie-base { position: relative; text-shadow: 0 1px 10px var(--crm-bg), 0 0 2px var(--crm-bg); } .crm-pie-gigante .crm-firma { flex: none; color: var(--crm-pie-lockup); } .crm-pie-gigante .crm-firma[data-ajustada] { transform: scale(var(--crm-escala, 1)); transform-origin: 50% 0; margin-bottom: calc(var(--crm-h) * (var(--crm-escala, 1) - 1)); } .crm-pie-gigante .crm-firma-apellido { color: var(--crm-pie-apellido); } .crm-pie-gigante .crm-firma-brillo { background-image: linear-gradient( 100deg, transparent 40%, color-mix(in oklab, var(--crm-acento) 55%, transparent) 50%, transparent 60%); animation: crm-barrido calc(var(--crm-t-barrido) * 4) var(--crm-curva) infinite calc(var(--crm-t-barrido) / 2); } @media (max-width: 40em) { .crm-pie { --crm-pie-h: 96px; } } .crm-acceso .crm-pie { --crm-pie-h: 0px; } .crm-acceso .crm-pie-base { padding: 12px 16px; } .crm-acceso :is(.crm-pie-estado, .crm-pie-hora, .crm-pie-soporte) { line-height: 16px; } .crm-acceso .crm-pie-legal { line-height: 20px; } .crm-acceso .crm-pie-gigante { padding: 8px 16px 0; } @container crm-acceso (min-width: 720px) { .crm-acceso .crm-pie-base { gap: 8px 24px; padding-inline: 24px; } .crm-acceso .crm-pie-vivo { gap: 8px 24px; } .crm-acceso .crm-pie-gigante { padding-inline: 24px; } } @container crm-acceso (min-width: 1280px) { .crm-acceso :is(.crm-pie-base, .crm-pie-gigante) { padding-inline: 32px; } } @container crm-acceso (max-height: 799px) { .crm-acceso .crm-pie { --crm-pie-gigante-alto: 80px; } .crm-acceso-barra { padding-block: 12px; } .crm-acceso-centro { padding-block: 8px; } .crm-acceso-cliente { padding-block: 12px; } .crm-acceso-logo { --crm-logo-h: 40px; } .crm-acceso-cuerpo { gap: 16px; padding-block: 24px; } .crm-acceso-acciones { padding-top: 16px; } } @container crm-acceso (max-height: 699px) { .crm-acceso .crm-pie { --crm-pie-gigante-alto: 56px; } .crm-acceso-barra { padding-block: 8px; } .crm-acceso-cliente { padding-block: 8px; } .crm-acceso-cuerpo { gap: 12px; padding-block: 16px; } .crm-acceso-descripcion { margin-top: -4px; } .crm-acceso-nota { margin-top: 4px; } } @container crm-acceso (max-height: 619px) { .crm-acceso .crm-pie { --crm-pie-gigante-alto: 40px; } } @container crm-acceso (max-height: 599px) and (min-width: 960px) { .crm-acceso-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr); max-width: 912px; } .crm-acceso-cliente { grid-column: 1; grid-row: 1; padding-block: 12px; } .crm-acceso-logo { --crm-logo-h: 40px; } .crm-acceso-cuerpo { display: contents; } .crm-acceso-titulo { grid-column: 1; grid-row: 2; padding: 24px 40px 0; } .crm-acceso-descripcion { grid-column: 1; grid-row: 3; margin: 0; padding: 8px 40px 0; } .crm-acceso-nota { grid-column: 1; grid-row: 4; align-self: end; padding: 16px 40px 24px; } .crm-acceso-formulario { grid-column: 2; grid-row: 1 / -1; align-self: center; align-content: center; padding: 0 40px; border-top: 0; border-left: 1px solid var(--crm-line); } .crm-acceso-formulario::before { content: ""; display: block; box-sizing: content-box; height: 24px; border-bottom: 1px solid var(--crm-line); } .crm-acceso-formulario::after { content: ""; display: block; height: 24px; } } @keyframes crm-filo { 0% { background-position: -40% 0; } 36%, 100% { background-position: 140% 0; } } @keyframes crm-filo-continuo { from { background-position: -40% 0; } to { background-position: 140% 0; } } @keyframes crm-barrido { 0% { background-position: 115% 0; } 40%, 100% { background-position: 0% 0; } } @keyframes crm-barrido-lento { 0% { background-position: 115% 0; } 18%, 100% { background-position: 0% 0; } } @keyframes crm-barrido-ya { from { background-position: 115% 0; } to { background-position: 0% 0; } } @keyframes crm-latido { from { opacity: 0.6; scale: 1; } to { opacity: 0; scale: 2.6; } } @media (prefers-reduced-motion: reduce) { .crm-acceso-panel::before, .crm-pie-estado[data-estado=ok] .crm-punto::after { animation: none; } .crm-iso-lienzo { transition: none; } .crm-firma-brillo, .crm-acceso-panel::before { display: none; } .crm-campo, .crm-campo-boton::before, .crm-boton-acceso svg { transition: none; } .crm-boton-acceso:hover svg { transform: none; } } .crm-va { background: var(--crm-bg); --crm-va-col: 820px; --crm-va-coral: var(--crm-error); position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); flex: 1 1 auto; width: 100%; min-width: 0; height: 100dvh; overflow: hidden; } .crm-va ::selection { background: color-mix(in srgb, var(--crm-acento) 28%, transparent); color: var(--crm-text); } .crm-va * { scrollbar-color: var(--crm-line-2) transparent; scrollbar-width: thin; } .crm-va-barra { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; box-sizing: border-box; height: 44px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--crm-line); background: var(--crm-bg); } .crm-va-identidad { display: flex; align-items: center; gap: 12px; min-width: 0; } .crm-va-org { min-width: 0; overflow: hidden; padding-left: 12px; border-left: 1px solid var(--crm-line-2); color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; letter-spacing: 0.06em; line-height: 16px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .crm-va-derecha { display: flex; justify-content: flex-end; align-items: center; gap: 8px; min-width: 0; } .crm-va-extra { display: flex; align-items: center; gap: 8px; } .crm-va-barra[data-cabecera=marco] { grid-template-columns: minmax(0, 1fr); } .crm-va-vistas { display: inline-flex; align-items: center; gap: 2px; box-sizing: border-box; height: 28px; padding: 1px; border: 1px solid var(--crm-line-2); background: var(--crm-panel); } .crm-va-vista { display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; height: 24px; padding: 0 10px; border: 0; background: transparent; color: var(--crm-muted); font-family: var(--crm-sans); font-size: 13px; font-weight: 400; letter-spacing: -0.005em; line-height: 20px; white-space: nowrap; cursor: default; transition: background-color var(--crm-t-color) var(--crm-snap), color var(--crm-t-color) var(--crm-snap); } .crm-va-vista:hover { color: var(--crm-text); transition-duration: 0ms; } .crm-va-vista[aria-pressed=true] { background: var(--crm-panel-3); color: var(--crm-text); font-weight: 500; } .crm-va-vista:focus-visible { outline-offset: -1px; } .crm-va-vista .crm-punto { width: 6px; height: 6px; } .crm-va-vivo { background: var(--crm-acento) !important; box-shadow: 0 0 0 3px var(--crm-acento-suave); } .crm-va-vivo::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--crm-acento); animation: crm-latido var(--crm-t-latido) ease-out infinite; } .crm-va-acciones { display: flex; justify-content: flex-end; align-items: center; gap: 4px; } .crm-va-icono { display: grid; place-items: center; box-sizing: border-box; width: 28px; height: 28px; border: 1px solid transparent; background: transparent; color: var(--crm-text-2); cursor: default; transition: border-color var(--crm-t-color) var(--crm-snap), color var(--crm-t-color) var(--crm-snap), transform var(--crm-t-pulsar) var(--crm-snap); } .crm-va-icono:hover:not(:disabled) { border-color: var(--crm-line-2); color: var(--crm-text); transition-duration: 0ms, 0ms, var(--crm-t-pulsar); } .crm-va-icono:active:not(:disabled) { transform: scale(0.96); } .crm-va-icono:disabled { color: var(--crm-dim); cursor: not-allowed; } .crm-va-icono svg { width: 14px; height: 14px; stroke-width: 1.5; } .crm-va-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; } .crm-va-conversacion { position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; } .crm-va-cargando { margin: 0; padding: 10px 20px; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 12px; } @media (min-width: 1100px) { .crm-va[data-mesa] .crm-va-cuerpo { grid-template-columns: minmax(0, 1fr) minmax(440px, 46%); } .crm-va[data-mesa] { --crm-va-col: 680px; } } .crm-va-mesa { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; border-left: 1px solid var(--crm-line-2); background: var(--crm-panel); box-shadow: var(--crm-sombra-capa); animation: crm-va-mesa var(--crm-t-capa) var(--crm-snap) both; } .crm-va-mesa::before { content: ""; position: absolute; z-index: 1; inset: -1px -1px auto; height: 1px; background: linear-gradient( 90deg, transparent, var(--crm-acento) 50%, transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: crm-filo calc(var(--crm-t-filo) * 4) var(--crm-curva) infinite calc(var(--crm-t-filo) / 4); } @media (max-width: 1099.98px) { .crm-va-mesa { position: fixed; z-index: 30; inset: 0; border-left: 0; } } .crm-va-mesa-barra { display: flex; align-items: center; gap: 12px; box-sizing: border-box; min-width: 0; height: 52px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--crm-line); } .crm-va-mesa-rotulo { flex: none; color: var(--crm-acento); font-family: var(--crm-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; } .crm-va-mesa-titulo { flex: 1; min-width: 0; overflow: hidden; color: var(--crm-text); font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } .crm-va-mesa-cuerpo { display: flex; flex-direction: column; min-height: 0; overflow: auto; } .crm-va-mesa-cuerpo > * { flex: 1 0 auto; } .crm-va-inicio { position: relative; isolation: isolate; display: grid; flex: 1; align-content: center; justify-items: center; gap: clamp(18px, 3.4vh, 30px); min-height: 0; padding: clamp(20px, 5vh, 56px) clamp(16px, 4vw, 48px); overflow-y: auto; } .crm-va-inicio-texto { position: relative; display: grid; justify-items: center; gap: 12px; text-align: center; } .crm-va-inicio :is(.crm-va-inicio-texto, .crm-va-compositor, .crm-va-ideas, .crm-va-pie-inicio) { position: relative; } .crm-va-inicio :is(.crm-va-inicio-texto, .crm-va-compositor, .crm-va-ideas, .crm-va-pie-inicio)::before { content: ""; position: absolute; z-index: -1; inset: -24px -32px; background: var(--crm-bg); -webkit-mask-image: linear-gradient( 90deg, transparent, currentColor 32px, currentColor calc(100% - 32px), transparent), linear-gradient( 180deg, transparent, currentColor 24px, currentColor calc(100% - 24px), transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient( 90deg, transparent, currentColor 32px, currentColor calc(100% - 32px), transparent), linear-gradient( 180deg, transparent, currentColor 24px, currentColor calc(100% - 24px), transparent); mask-composite: intersect; pointer-events: none; } .crm-va-titulo { margin: 0; color: var(--crm-text); font-family: var(--crm-sans); font-size: 40px; font-weight: 500; line-height: 1; letter-spacing: -0.04em; text-wrap: balance; } @media (min-width: 720px) { .crm-va-titulo { font-size: 48px; } } @media (min-width: 1280px) { .crm-va-titulo { font-size: 56px; } } .crm-va-intro { margin: 0; max-width: 46ch; color: var(--crm-muted); font-size: 15px; line-height: 1.5; } .crm-va-ideas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; width: min(720px, 100%); margin: 0; padding: 0; list-style: none; } .crm-va-idea { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--crm-line); background: color-mix(in srgb, var(--crm-panel) 78%, transparent); color: var(--crm-text-2); font-family: var(--crm-sans); font-size: 14px; text-align: left; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: border-color var(--crm-t-color) ease, color var(--crm-t-color) ease; } .crm-va-idea > svg:first-child { flex: none; width: 15px; height: 15px; color: var(--crm-acento); } .crm-va-idea span { flex: 1; } .crm-va-idea-flecha { flex: none; width: 14px; height: 14px; color: var(--crm-dim); transition: transform var(--crm-t-gesto) var(--crm-snap), color var(--crm-t-color) ease; } .crm-va-idea:hover { border-color: var(--crm-line-2); color: var(--crm-text); } .crm-va-idea:hover .crm-va-idea-flecha { transform: translateX(3px); color: var(--crm-acento); } .crm-va-pie-inicio { margin: 0; color: var(--crm-dim); font-family: var(--crm-mono); font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; } .crm-va-verde { color: var(--crm-acento); } .crm-va-compositor { width: min(var(--crm-va-col), 100%); min-width: 0; } .crm-va-compositor[data-lugar=inicio] { width: min(720px, 100%); } .crm-va-caja { position: relative; border: 1px solid var(--crm-line-2); background: var(--crm-panel); box-shadow: var(--crm-sombra-capa); transition: border-color var(--crm-t-color) ease, box-shadow var(--crm-t-capa) var(--crm-snap); } .crm-va-caja::before { content: ""; position: absolute; z-index: 1; inset: -1px -1px auto; height: 1px; background: linear-gradient( 90deg, transparent, var(--crm-acento) 50%, transparent); background-size: 40% 100%; background-repeat: no-repeat; background-position: -40% 0; opacity: 0; transition: opacity var(--crm-t-entrada) ease; } .crm-va-caja:focus-within { border-color: var(--crm-acento-linea); box-shadow: var(--crm-sombra-capa); } .crm-va-caja:focus-within::before { opacity: 1; animation: crm-filo calc(var(--crm-t-filo) * 3) var(--crm-curva) infinite; } .crm-va-compositor[data-ocupado] .crm-va-caja::before { opacity: 1; animation: crm-filo-continuo var(--crm-t-filo) var(--crm-curva) infinite; } .crm-va-cursor { position: absolute; left: 18px; top: 13px; color: var(--crm-acento); font-family: var(--crm-mono); font-size: 20px; line-height: 1.4; pointer-events: none; } .crm-va-texto { display: block; width: 100%; min-height: 56px; max-height: min(11rem, 32dvh); padding: 15px 18px 6px 42px; border: 0; background: transparent; color: var(--crm-text); font-family: var(--crm-sans); font-size: 16px; line-height: 1.5; resize: none; outline: none; overflow-y: auto; } .crm-va-compositor[data-lugar=inicio] .crm-va-texto { min-height: 84px; } .crm-va-texto::placeholder { color: var(--crm-dim); } .crm-va-texto:disabled { color: var(--crm-muted); } .crm-va-caja-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px 10px 18px; } .crm-va-estado { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; } .crm-va-estado .crm-punto { flex: none; background: var(--crm-acento); } .crm-va-enviar { display: inline-flex; flex: none; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border: 1px solid var(--crm-boton); background: var(--crm-boton); color: var(--crm-boton-tinta); font-family: var(--crm-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: background-color var(--crm-t-color) ease, border-color var(--crm-t-color) ease, opacity var(--crm-t-color) ease; } .crm-va-enviar svg { width: 15px; height: 15px; } .crm-va-enviar:hover:not(:disabled) { border-color: var(--crm-acento); background: var(--crm-acento); color: var(--crm-sobre-acento); } .crm-va-enviar:disabled { border-color: var(--crm-linea-apagada); background: transparent; color: var(--crm-dim); cursor: not-allowed; } .crm-va-enviar[data-detener] { border-color: var(--crm-line-2); background: transparent; color: var(--crm-text); } .crm-va-enviar[data-detener] svg { width: 11px; height: 11px; fill: currentColor; } .crm-va-error { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; color: var(--crm-va-coral); font-size: 14px; } .crm-va-error svg { flex: none; width: 16px; height: 16px; margin-top: 2px; } .crm-va-recuperacion { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .crm-va-ayuda { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 8px 0 0; color: var(--crm-dim); font-family: var(--crm-mono); font-size: 11px; } .crm-va-ayuda svg { width: 11px; height: 11px; } .crm-va-casos { display: grid; flex: 1; align-content: start; gap: 44px; min-height: 0; padding: 36px max(16px, calc((100% - var(--crm-va-col)) / 2)) 28px; overflow-y: auto; } .crm-va-caso:last-child { animation: crm-va-entra var(--crm-t-dibujo) var(--crm-snap) both; } .crm-va-peticion { position: relative; margin: 0 0 18px; padding-left: 46px; color: var(--crm-text); font-size: 20px; font-weight: 500; line-height: 1.35; letter-spacing: -0.015em; white-space: pre-wrap; overflow-wrap: anywhere; } .crm-va-peticion::before { content: "\203a"; position: absolute; left: 9px; top: -1px; color: var(--crm-acento); font-family: var(--crm-mono); font-size: 20px; font-weight: 400; } .crm-va-carril { position: relative; margin: 0; padding: 0; list-style: none; } .crm-va-carril::before, .crm-va-carril[data-vivo]::after { content: ""; position: absolute; left: 15px; top: -10px; bottom: 10px; width: 1px; } .crm-va-carril::before { background: linear-gradient( 180deg, var(--crm-acento-linea), var(--crm-line-2) 60%, transparent); } .crm-va-carril[data-vivo]::after { background: linear-gradient( 180deg, transparent 0%, var(--crm-luz) 50%, transparent 100%) 0 -60px / 100% 60px no-repeat; box-shadow: 0 0 10px var(--crm-acento-linea); animation: crm-va-corriente var(--crm-t-corriente) linear infinite; } .crm-va-paso { position: relative; padding: 0 0 16px 46px; } .crm-va-paso:last-child { padding-bottom: 0; } .crm-va-nodo { position: absolute; left: 5px; top: -1px; display: grid; place-items: center; width: 21px; height: 21px; border: 1px solid var(--crm-line-2); border-radius: 50%; background: var(--crm-bg); } .crm-va-nodo svg { width: 11px; height: 11px; stroke-width: 2.6; } .crm-va-paso[data-paso=hecho] .crm-va-nodo { border-color: var(--crm-acento); background: var(--crm-acento); color: var(--crm-sobre-acento); box-shadow: 0 0 0 4px var(--crm-acento-suave); } .crm-va-paso[data-paso=trabajando] .crm-va-nodo { border-color: var(--crm-acento-linea); } .crm-va-paso[data-paso=trabajando] .crm-va-nodo::after { content: ""; position: absolute; inset: -5px; border: 1.5px solid transparent; border-top-color: var(--crm-acento); border-right-color: var(--crm-acento); border-radius: 50%; animation: crm-va-girar var(--crm-t-giro) linear infinite; } .crm-va-paso[data-paso=error] .crm-va-nodo { border-color: var(--crm-va-coral); color: var(--crm-va-coral); } .crm-va-paso-etiqueta { font-weight: 400; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; letter-spacing: 0.04em; line-height: 1.6; text-transform: uppercase; } .crm-va-paso-estado { color: var(--crm-acento); } .crm-va-paso[data-paso=error] .crm-va-paso-estado, .crm-va-carril[data-estado=error] .crm-va-paso-estado { color: var(--crm-va-coral); } .crm-va-carril[data-estado=error] .crm-va-nodo { border-color: var(--crm-va-coral); background: transparent; color: var(--crm-va-coral); box-shadow: none; } .crm-va-sep { color: var(--crm-line-2); } .crm-va-respuesta { margin: 12px 0 0; max-width: 68ch; color: var(--crm-text-2); font-size: 15px; line-height: 1.68; white-space: pre-wrap; overflow-wrap: anywhere; } .crm-va-nota, .crm-va-filtros { margin: 12px 0 0; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 12px; } .crm-va-items { margin: 16px 0 0; padding: 0; border-top: 1px solid var(--crm-line); list-style: none; } .crm-va-item { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 54px; padding: 10px 8px; border: 0; border-bottom: 1px solid var(--crm-line); background: transparent; color: inherit; font: inherit; text-align: left; } button.crm-va-item { cursor: pointer; transition: background-color var(--crm-t-color) ease; } button.crm-va-item::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 2px; background: var(--crm-acento); transform: scaleY(0); transform-origin: top; transition: transform var(--crm-t-gesto) var(--crm-snap); } button.crm-va-item:hover { background: var(--crm-panel-2); } button.crm-va-item:hover::before { transform: scaleY(1); } .crm-va-item-imagen { flex: none; width: 40px; height: 40px; object-fit: cover; border: 1px solid var(--crm-line-2); } .crm-va-item-texto { display: grid; flex: 1; gap: 3px; min-width: 0; } .crm-va-item-titulo { color: var(--crm-text); font-size: 14px; line-height: 1.35; } .crm-va-item-detalle { color: var(--crm-muted); font-family: var(--crm-mono); font-size: 12px; line-height: 1.45; } .crm-va-item-flecha { flex: none; width: 15px; height: 15px; color: var(--crm-dim); transition: transform var(--crm-t-gesto) var(--crm-snap), color var(--crm-t-color) ease; } button.crm-va-item:hover .crm-va-item-flecha { transform: translateX(3px); color: var(--crm-acento); } .crm-va-tarjeta { position: relative; display: grid; gap: 8px; margin-top: 16px; padding: 16px 18px 18px; border: 1px solid var(--crm-line-2); background: var(--crm-panel); } .crm-va-tarjeta[data-tipo=approval] { border-color: var(--crm-acento-linea); background: linear-gradient( 180deg, color-mix(in srgb, var(--crm-acento) 7%, transparent), transparent 70%), var(--crm-panel); } .crm-va-tarjeta[data-tipo=approval]::before { content: ""; position: absolute; inset: -1px -1px auto; height: 1px; background: linear-gradient( 90deg, transparent, var(--crm-acento) 50%, transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: crm-filo calc(var(--crm-t-filo) * 2.5) var(--crm-curva) infinite; } .crm-va-tarjeta[data-tipo=error] { border-color: var(--crm-error-linea); } .crm-va-chip { display: inline-flex; align-items: center; justify-self: start; gap: 7px; margin: 0; padding: 3px 8px; border: 1px solid var(--crm-line-2); color: var(--crm-text-2); font-family: var(--crm-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; } .crm-va-chip svg { width: 12px; height: 12px; } .crm-va-tarjeta[data-tipo=approval] .crm-va-chip, .crm-va-tarjeta[data-tipo=result] .crm-va-chip { border-color: var(--crm-acento-linea); background: var(--crm-acento-suave); color: var(--crm-acento); } .crm-va-tarjeta[data-tipo=error] .crm-va-chip { border-color: var(--crm-error-linea); color: var(--crm-va-coral); } .crm-va-tarjeta-titulo { margin: 4px 0 0; color: var(--crm-text); font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; } .crm-va-tarjeta-texto { margin: 0; color: var(--crm-text-2); font-size: 14px; line-height: 1.6; } .crm-va-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .crm-va-boton { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--crm-line-2); background: transparent; color: var(--crm-text); font-family: var(--crm-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: background-color var(--crm-t-color) ease, border-color var(--crm-t-color) ease, color var(--crm-t-color) ease; } .crm-va-boton svg { width: 14px; height: 14px; transition: transform var(--crm-t-gesto) var(--crm-snap); } .crm-va-boton:hover:not(:disabled) { border-color: var(--crm-text-2); } .crm-va-boton:hover:not(:disabled) svg { transform: translateX(3px); } .crm-va-boton:disabled { border-color: var(--crm-linea-apagada); background: transparent; color: var(--crm-dim); cursor: not-allowed; } .crm-va-boton-principal { border-color: var(--crm-boton); background: var(--crm-boton); color: var(--crm-boton-tinta); } .crm-va-boton-principal:hover:not(:disabled) { border-color: var(--crm-acento); background: var(--crm-acento); color: var(--crm-sobre-acento); } .crm-va-bloque-propio { margin-top: 16px; } .crm-va-dock { position: relative; display: grid; justify-items: center; padding: 12px clamp(16px, 4vw, 48px) 14px; background: linear-gradient( 180deg, transparent, var(--crm-bg) 30%); } @media (max-width: 720px) { .crm-va-barra { height: auto; min-height: 44px; padding-block: 8px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "identidad acciones" "vistas extra"; row-gap: 8px; column-gap: 8px; } .crm-va-identidad { grid-area: identidad; } .crm-va-derecha { display: contents; } .crm-va-acciones { grid-area: acciones; } .crm-va-extra { grid-area: extra; } .crm-va-vistas { grid-area: vistas; grid-column: 1 / -1; justify-self: stretch; justify-content: center; } .crm-va-barra:has(.crm-va-extra) .crm-va-vistas { grid-column: auto; } .crm-va-barra[data-cabecera=marco] { height: 44px; padding-block: 0; grid-template-columns: minmax(0, 1fr); grid-template-areas: none; } .crm-va-barra[data-cabecera=marco] .crm-va-derecha { display: flex; } .crm-va-vista { flex: 1; justify-content: center; } .crm-va-org { display: none; } .crm-va-casos { gap: 34px; padding-top: 24px; } .crm-va-peticion { font-size: 16px; } .crm-va-ayuda-extra { display: none; } .crm-va-dock .crm-va-ayuda { display: none; } } @media (max-height: 640px) { .crm-va-pie-inicio, .crm-va-dock .crm-va-ayuda { display: none; } .crm-va-compositor[data-lugar=inicio] .crm-va-texto { min-height: 60px; } } @media (max-height: 480px) { .crm-va-inicio { align-content: start; gap: 12px; padding-block: 12px 0; } .crm-va-titulo { font-size: 24px; } .crm-va-intro { display: none; } .crm-va-compositor[data-lugar=inicio] { position: sticky; bottom: 0; z-index: 2; padding-bottom: 12px; background: var(--crm-bg); } .crm-va-casos { gap: 24px; padding-top: 16px; padding-bottom: 12px; } .crm-va-dock { padding-top: 8px; padding-bottom: 8px; background: var(--crm-bg); } .crm-va-texto { max-height: 96px; } .crm-va-error, .crm-va-recuperacion { margin-top: 8px; } .crm-va-ayuda, .crm-va-pie-inicio { display: none; } .crm-va-estado { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-va-estado .crm-punto { display: inline-block; margin-right: 8px; vertical-align: middle; } .crm-va-compositor:has(.crm-va-error) .crm-va-estado { visibility: hidden; } .crm-va-compositor:has(.crm-va-error) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; } .crm-va-compositor:has(.crm-va-error) > .crm-va-caja { grid-column: 1 / -1; } .crm-va-compositor:has(.crm-va-error) > .crm-va-recuperacion { justify-content: flex-end; } .crm-va-texto { min-height: 44px; padding-top: 10px; } .crm-va-compositor[data-lugar=inicio] .crm-va-texto { min-height: 44px; } } @media (max-height: 400px) { .crm-va-inicio:has(.crm-va-error) .crm-va-inicio-texto { display: none; } .crm-va-compositor:has(.crm-va-error) .crm-va-texto { max-height: 44px; } } @keyframes crm-va-entra { from { opacity: 0; translate: 0 10px; } } @keyframes crm-va-mesa { from { opacity: 0; translate: 24px 0; } } @keyframes crm-va-corriente { to { background-position: 0 calc(100% + 60px); } } @keyframes crm-va-girar { to { rotate: 360deg; } } @media (prefers-reduced-motion: reduce) { .crm-va-caso:last-child, .crm-va-mesa, .crm-va-mesa::before, .crm-va-caja::before, .crm-va-carril[data-vivo]::after, .crm-va-paso[data-paso=trabajando] .crm-va-nodo::after, .crm-va-tarjeta[data-tipo=approval]::before, .crm-va-vivo::after { animation: none; } } .crm-va-historial { position: fixed; inset: 0 auto 0 0; width: min(400px, 100vw); max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; border-right: 1px solid var(--crm-line); background: var(--crm-panel); color: var(--crm-text); font-family: var(--crm-sans); box-shadow: var(--crm-sombra); } .crm-va-historial[open] { animation: crm-va-historial-entra var(--crm-t-capa) var(--crm-snap); } .crm-va-historial::backdrop { background: var(--crm-telon); } @keyframes crm-va-historial-entra { from { transform: translateX(-24px); opacity: 0; } } .crm-va-historial-cuerpo { display: grid; grid-template-rows: auto auto auto auto auto minmax(0, 1fr); height: 100%; } .crm-va-historial-cabecera { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "rotulo cerrar" "titulo cerrar"; align-items: center; column-gap: 12px; padding: 18px 16px 0 22px; } .crm-va-historial-cabecera .crm-va-mesa-rotulo { grid-area: rotulo; } .crm-va-historial-cabecera .crm-va-icono { grid-area: cerrar; } .crm-va-historial-titulo { grid-area: titulo; margin: 4px 0 0; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; } .crm-va-historial-texto { margin: 8px 22px 0; color: var(--crm-muted); font-size: 13px; line-height: 1.5; } .crm-va-historial-busca { position: relative; display: flex; align-items: center; margin: 18px 22px 0; border: 1px solid var(--crm-line-2); background: var(--crm-bg); transition: border-color var(--crm-t-color) ease; } .crm-va-historial-busca:focus-within { border-color: var(--crm-acento-linea); } .crm-va-historial-busca > svg { flex: none; width: 15px; height: 15px; margin-left: 12px; color: var(--crm-dim); } .crm-va-historial-campo { flex: 1; min-width: 0; height: 40px; padding: 0 10px; border: 0; outline: 0; background: transparent; color: var(--crm-text); font: inherit; font-size: 14px; } .crm-va-historial-campo::placeholder { color: var(--crm-dim); } .crm-va-historial-campo::-webkit-search-cancel-button { filter: invert(0.6); } .crm-va-historial-tecla { margin-right: 10px; color: var(--crm-dim); font-family: var(--crm-mono); font-size: 12px; } .crm-va-historial-filtro { display: flex; gap: 0; margin: 12px 22px 0; border: 1px solid var(--crm-line); width: fit-content; } .crm-va-historial-filtro button { min-height: 32px; padding: 0 12px; border: 0; background: transparent; color: var(--crm-muted); font-family: var(--crm-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; } .crm-va-historial-filtro button[aria-pressed=true] { background: var(--crm-panel-2); color: var(--crm-text); box-shadow: inset 0 -1px 0 var(--crm-acento); } .crm-va-historial-deshacer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 22px 0; padding: 8px 8px 8px 12px; border: 1px solid var(--crm-acento-linea); background: var(--crm-acento-suave); font-size: 13px; } .crm-va-historial-deshacer button { border: 0; background: transparent; color: var(--crm-acento); font-family: var(--crm-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; } .crm-va-historial-lista { overflow-y: auto; margin-top: 14px; padding: 4px 12px 24px; border-top: 1px solid var(--crm-line); } .crm-va-historial-grupo-titulo { margin: 16px 10px 6px; color: var(--crm-dim); font-family: var(--crm-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; } .crm-va-historial-grupo ul { margin: 0; padding: 0; list-style: none; } .crm-va-historial-hilo { position: relative; display: flex; align-items: center; } .crm-va-historial-hilo::before { content: ""; position: absolute; inset: 10px auto 10px 0; width: 2px; background: transparent; transition: background-color var(--crm-t-color) ease; } .crm-va-historial-hilo[data-actual]::before { background: var(--crm-acento); } .crm-va-historial-abrir { display: flex; flex: 1; min-width: 0; align-items: baseline; gap: 12px; min-height: 44px; padding: 10px 10px 10px 12px; border: 0; background: transparent; color: var(--crm-text-2); font: inherit; text-align: left; cursor: pointer; transition: background-color var(--crm-t-color) ease, color var(--crm-t-color) ease; } .crm-va-historial-abrir:hover:not(:disabled), .crm-va-historial-hilo[data-actual] .crm-va-historial-abrir { background: var(--crm-panel-2); color: var(--crm-text); } .crm-va-historial-abrir:disabled { cursor: default; } .crm-va-historial-nombre { flex: 1; min-width: 0; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; } .crm-va-historial-hora { flex: none; color: var(--crm-dim); font-family: var(--crm-mono); font-size: 11px; } .crm-va-historial-hilo[data-actual] .crm-va-historial-hora { color: var(--crm-acento); } .crm-va-historial-archivar { width: 34px; height: 34px; opacity: 0; } .crm-va-historial-hilo:hover .crm-va-historial-archivar, .crm-va-historial-archivar:focus-visible { opacity: 1; } @media (hover: none) { .crm-va-historial-archivar { opacity: 1; } } .crm-va-historial-confirmar { width: 100%; margin: 4px 0; padding: 14px; border: 1px solid var(--crm-line-2); background: var(--crm-bg); font-size: 13px; line-height: 1.5; } .crm-va-historial-confirmar p { margin: 0; color: var(--crm-text-2); } .crm-va-historial-confirmar strong { color: var(--crm-text); font-weight: 500; } .crm-va-historial-confirmar .crm-va-botones { margin-top: 12px; } .crm-va-historial-cargando { display: grid; gap: 10px; margin: 18px 10px; } .crm-va-historial-hueco { height: 18px; background: linear-gradient( 90deg, var(--crm-panel-2), var(--crm-line), var(--crm-panel-2)); background-size: 200% 100%; animation: crm-va-hueco var(--crm-t-barrido) linear infinite; } .crm-va-historial-hueco:nth-child(odd) { width: 72%; } @keyframes crm-va-hueco { to { background-position: -200% 0; } } .crm-va-historial-vacio, .crm-va-historial-aviso { margin: 28px 10px; color: var(--crm-muted); font-size: 13px; line-height: 1.55; } .crm-va-historial-vacio p, .crm-va-historial-aviso p { margin: 0 0 12px; } .crm-va-historial-vacio-titulo { color: var(--crm-text); font-size: 15px; } .crm-va-historial-aviso p { color: var(--crm-va-coral); } .crm-va-historial-mas { width: 100%; justify-content: center; margin-top: 16px; } @media (prefers-reduced-motion: reduce) { .crm-va-historial[open], .crm-va-historial-hueco { animation: none; } }