/* ============================================================ HOME - listado (carpetas, imagenes, diseños) Estilos tomados del diseño "Folders And Photos List" ============================================================ */ /* el CSS antiguo ya pone un icono con ::before en estos badges; como ahora el icono viene en el HTML (SVG), anulamos el duplicado */ .label-mydesigns .flex-label > span::before, .label-mydesigns .flex-label > span::after { content: none !important; display: none !important; } /* ---------- CARPETA: caja con pestaña ---------- */ .img-design.folder-card { display: flex; flex-direction: column; gap: 10px; } .img-design.folder-card .folder-figure { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 0 10px 10px 10px; background: #e9e9ed; display: grid; place-items: center; padding: 13%; box-sizing: border-box; margin-top: 14px; /* hueco para la pestaña */ } /* pestaña superior izquierda */ .img-design.folder-card .folder-figure::before { content: ""; position: absolute; top: -14px; left: 0; width: 46%; height: 14px; border-radius: 8px 10px 0 0; background: #e4e4e8; } /* variante compartida (lila) */ .img-design.folder-card.is-shared .folder-figure { background: #e8e5ff; } .img-design.folder-card.is-shared .folder-figure::before { background: #ddd9f6; } /* miniatura del ultimo diseño dentro de la carpeta */ .img-design.folder-card .folder-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.09); display: block; } .img-design.folder-card .folder-empty { font-size: 12px; color: #a0a0aa; text-align: center; } /* ---------- IMAGEN: contenida sobre caja gris ---------- */ .img-design.image-card { display: flex; flex-direction: column; gap: 10px; } .img-design.image-card > figure { margin: 0; aspect-ratio: 4 / 3; border-radius: 10px; background: #f2f2f5; display: grid; place-items: center; padding: 12px; box-sizing: border-box; } .img-design.image-card > figure img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; /* no recorta */ display: block; } /* ---------- FOOTER comun (nombre + badge + meta + bolitas) ---------- */ .label-mydesigns { display: flex; flex-direction: column; align-items: stretch; gap: 5px; } /* fila 1: titulo a la izquierda, bolitas a la derecha */ .label-mydesigns .text-mail { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; } .label-mydesigns > .titl, .label-mydesigns .text-mail .titl { flex: 1; min-width: 0; } .label-mydesigns .titl { font-size: 14px; font-weight: 500; color: #16151a; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .label-mydesigns .flex-label { display: flex; align-items: center; gap: 6px; min-width: 0; } /* badge del tipo (privado / compartido / conmigo) */ .label-mydesigns .flex-label > span { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; background: #f2f2f5; font-size: 11px; font-weight: 500; color: #56555f; white-space: nowrap; flex: none; } .label-mydesigns .flex-label > span svg { flex: none; } /* badge compartido = lila */ .label-mydesigns.team-label .flex-label > span.badge-shared { background: #e8e5ff; color: #3a2ecb; } /* meta a la derecha del badge (elementos / peso / fecha) */ .label-mydesigns .flex-label > p { margin: 0; font-size: 12px; color: #a0a0aa; white-space: nowrap; } /* ---------- BOLITAS de personas con acceso ---------- */ .label-mydesigns .home-mails, .fc2-foot .home-mails { display: flex; flex: none; margin-top: 2px; } .label-mydesigns .home-mails > div { width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; font-size: 9.5px; font-weight: 600; box-shadow: 0 0 0 2px #fff; overflow: hidden; position: relative; background: #edeef1; color: #5b5b6b; line-height: 1; text-indent: 0; } .label-mydesigns .home-mails > div + div { margin-left: -7px; } .label-mydesigns .home-mails > div .ini { display: block; line-height: 1; text-indent: 0; color: inherit; font-size: 9.5px; font-weight: 600; } /* (las bolitas van ahora en la fila del titulo, dentro de .text-mail) */ /* ============================================================ Estado vacio del listado HOME ============================================================ */ .home-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 20px; width: 100%; min-height: 340px; box-sizing: border-box; grid-column: 1 / -1; /* si el padre es grid, ocupa todas las columnas */ } .home-empty-icon { width: 64px; height: 64px; color: #b6bcc6; margin-bottom: 22px; } .home-empty-icon svg { width: 100%; height: 100%; display: block; } .home-empty-title { font-size: 24px; font-weight: 800; color: #1c2333; margin: 0 0 10px; } .home-empty-sub { font-size: 15px; color: #9aa1ad; line-height: 1.5; max-width: 420px; margin: 0 0 26px; } .home-empty-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .home-empty-btn { border: none; border-radius: 12px; padding: 14px 26px; font-size: 15px; font-weight: 700; cursor: pointer; } .home-empty-btn.primary { background: #3533AD; color: #fff; } .home-empty-btn.primary:hover { background: #2a289c; } .home-empty-btn.secondary { background: #fff; color: #1c2333; border: 1px solid #d7d9e0; } .home-empty-btn.secondary:hover { background: #f5f5f7; } /* ---------- GRID del listado home (4 columnas) ---------- */ .home-grid-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 24px; align-items: start; } /* el estado vacio ocupa todo el ancho de la grid */ .home-grid-list .home-empty { grid-column: 1 / -1; } @media (max-width: 1500px) { .home-grid-list { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1100px) { .home-grid-list { grid-template-columns: repeat(2, 1fr); } } /* bolita contador +N (gris, como miembro) */ .label-mydesigns .home-mails > div.number { background: #e6e6ea; color: #555; } /* ============================================================ TARJETA de carpeta del Inicio (rediseño mockup) ============================================================ */ .folder-card2 { display: flex; flex-direction: column; gap: 10px; cursor: pointer; } .fc2-thumb { aspect-ratio: 1; position: relative; } .fc2-tab { position: absolute; left: 0; top: 8%; width: 52%; height: 14%; background: #dfe2e4; border-radius: 7px 7px 0 0; } .fc2-body { position: absolute; left: 0; right: 0; top: 17%; bottom: 7%; background: #eceef0; border-radius: 10px; overflow: hidden; } .fc2-frame { position: absolute; inset: 13% 9% 11%; background: #fff; border: 1px solid #e2e5e8; box-sizing: border-box; overflow: hidden; } .fc2-frame img { width: 100%; height: 100%; object-fit: cover; display: block; } .fc2-name { margin: 0; font-size: 14px; font-weight: 600; color: #16151a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fc2-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .fc2-count { font-size: 12.5px; color: #8b8b96; white-space: nowrap; } /* 3 puntitos sobre la miniatura, SIEMPRE visibles (tambien movil) */ .folder-card2 .fc2-dots { position: absolute; top: 8px; right: 8px; z-index: 2; display: block !important; opacity: 1 !important; visibility: visible !important; } .folder-card2 .fc2-dots .dropbtn { width: 28px; height: 28px; border: none; border-radius: 8px; background: rgba(255,255,255,0.92); box-shadow: 0 1px 4px rgba(0,0,0,0.14); cursor: pointer; } .folder-card2 .fc2-dots .dropbtn:hover { background: #fff; } /* selector: opcion activa con sombreado gris (igual que el resto del sitio) */ .title-selector .selector .options button.selected { background: #f0f0f2; font-weight: 600; color: #16151a; } .title-selector .selector .options button:hover { background: #f6f6f8; } /* ===== 3 puntitos de carpetas del Inicio: iguales a los de imágenes ===== */ /* ocultos por defecto, aparecen en hover de la tarjeta (desktop) */ .folder-card2 .fc2-dots { position: absolute; top: 8px; left: 8px; z-index: 3; opacity: 0; transition: opacity .12s ease; } .folder-card2:hover .fc2-dots { opacity: 1; } .folder-card2 .fc2-dots .dropbtn { width: 28px; height: 28px; border: none; border-radius: 8px; background: rgba(255,255,255,0.92); box-shadow: 0 1px 4px rgba(0,0,0,0.16); cursor: pointer; position: relative; padding: 0; background-image:none !important; } /* los 3 puntos dibujados con pseudo-elementos */ .folder-card2 .fc2-dots .dropbtn::before { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: #56555f; transform: translate(-50%, -50%); box-shadow: 0 -5px 0 #56555f, 0 5px 0 #56555f; } .dropdownExample .dropdown-content.show ~ .dropbtn{ opacity: 1; } /* la tarjeta necesita ser contenedor de posicionamiento */ .folder-card2 { position: relative; } /* ===== MÓVIL: sin hover, los 3 puntitos siempre visibles ===== */ @media (max-width: 900px), (hover: none) { .folder-card2 .fc2-dots, .image-card .side-options, .img-design .side-options { opacity: 1 !important; } } /* ajustes 08/11/2026 data-title home-categorias */ .label-mydesigns .home-mails > div[data-title]:after{ top: 30px; white-space: nowrap; bottom: auto; } .fc2-mails .home-mails > div[data-title]:after { bottom: -30px; } .label-mydesigns .home-mails > div, .fc2-mails .home-mails > div, .image-card .home-mails > div{overflow:visible !important;} /* ajustes 08/11/2026 home-categorias */ .ai-categories .title#title_sparks_buscador, .ai-categories2 .title#title_sparks_buscador{min-height: 44px} .tooltipSelectCategories .new_categories.aaaaa .title#timelineTitle{display:block !important;margin:0 0 20px;} .loadingCat:not([style*="display: none;"]) + .frame-overflow section .tooltipSelectDesign .title#timelineTitle{display:block} .tooltipSelectCategories .new_categories.aaaaa .title#timelineTitle + #templates_list2{margin-top:0;} .tooltipSelectCategories .title#timelineTitle{min-height: 23px;display:inline-block !important;} #tooltipSelectFormat.tooltipSelectFormat .wide{position: relative;z-index: 9999} .ai-categories2 .textarea-button div{padding:20px 28px 34px;} .tooltipSelectDesign .selectDesign .gradient-background + .wide .new_categories:empty{display:none;} .tooltipSelectDesign .selectDesign .gradient-background + .wide + .new_categories:empty{display:none;} .tooltipSelectDesign .selectDesign .gradient-background + .wide + .new_categories:empty + .new_categories.listModules{width:calc(100% - 122px);margin:0 auto;} @media(max-width: 1023px){ .tooltipSelectDesign .selectDesign .gradient-background + .wide + .new_categories:empty + .new_categories.listModules{width:calc(100% - 32px)} } .tooltipSelectDesign .selectDesign .p-title-section:empty{display:none;} .tooltipSelectFormat .selectDesign .overflowSelect .new_categories .contenedor-padre_list .Notscrolleable:has(.home-empty){display:block;} /* ajustes 08/11/2026 home-categorias filtros select */ @media(max-width: 640px){ .new_categories .title-selector{width:90%;margin:30px auto 20px !important;} .new_categories .title-selector .selector{flex:auto;min-width: auto !important;max-width: 30%} } @media(max-width: 480px){ .new_categories .title-selector{padding-top:30px;} .new_categories .title-selector .label{position:absolute;top:0;left:0;text-align:left;} .new_categories .title-selector .selector{max-width:50%;} .home-empty .home-empty-btns .home-empty-btn{width:100%;} } /* ajustes 08/11/2026 data-title myteams */ .brand_template[data-title]:hover:after{ white-space: nowrap; text-transform: none; left: 64%; bottom:-25px; } /* ============================================================ FICHA DE BRAND KIT en el listado del Inicio (vista de marca: logotipo sobre el color principal + franja de paleta) ============================================================ */ .brandkit-card { display: flex; flex-direction: column; gap: 10px; position: relative; cursor: pointer; } .brandkit-card .bk-thumb { border-radius: 14px; border: 1px solid #e6e8ef; overflow: hidden; background: #fff; display: flex; flex-direction: column; aspect-ratio: 4 / 3; } /* zona del logo: ocupa el alto restante sobre el color de marca */ .brandkit-card .bk-logo-zone { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 16px; box-sizing: border-box; } .brandkit-card .bk-logo-zone img { max-width: 62%; max-height: 74%; width: auto; height: auto; object-fit: contain; display: block; } /* placeholder cuando el kit todavia no tiene logo */ .brandkit-card .bk-logo-ph { display: flex; align-items: center; justify-content: center; width: 62%; height: 62%; border-radius: 8px; background: #fff; border: 1px dashed #c3c8d4; font-size: 11px; font-weight: 800; letter-spacing: .1em; color: #98a0b0; text-align: center; line-height: 1.35; } /* franja inferior con los colores del kit */ .brandkit-card .bk-palette { display: flex; height: 30px; flex: none; border-top: 1px solid rgba(255,255,255,.9); } .brandkit-card .bk-palette > span { flex: 1; } /* 3 puntitos: mismo comportamiento que carpetas e imagenes */ .brandkit-card .side-options { position: absolute; top: 8px; right: 8px; z-index: 3; opacity: 0; transition: opacity .12s ease; } .brandkit-card:hover .side-options { opacity: 1; } @media (max-width: 900px), (hover: none) { .brandkit-card .side-options { opacity: 1 !important; } } /* ================================================================ CABECERA DEL PANEL DE INICIO (namespace ehdr-) Reset primero: este bloque vive dentro de .title-section .lookTitle .catTitle, que impone uppercase, 22px y centrado a sus hijos. Todo lo que se hereda de ahi se anula aqui antes de maquetar. ================================================================ */ .ehdr, .ehdr * { box-sizing: border-box; text-transform: none !important; text-align: left; } .ehdr a { text-decoration: none; } .ehdr a:hover { text-decoration: none; } .ehdr button { border: 0; padding: 0 5px; margin: 0; background: rgba(255, 255, 255, .86); height: 40px; border-radius: 60px } .ehdr svg { display: block; flex: none; } .ehdr { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 40px; font-size: 14px; color: #2b3990; } /* ---------- los cuatro enlaces ---------- */ .ehdr-tabs { display: flex; align-items: center; gap: 24px; height: auto; } /* el CSS antiguo del carrusel de categorias maquetaba estos como tarjetas: transform de -82px, top 99, left -24, width 67 fijo, height 164 y margin 17. Hay que anularlo todo antes de maquetar */ .ehdr-tab { position: relative; width: auto; height: 28px; font-size: 16px; font-weight: 600; color: #2b3990; white-space: nowrap; display:flex; align-items: center; } .ehdr-tab::before, .ehdr-tab::after { transform: none; } /* el hover antiguo pintaba caja blanca con sombra, como si fuera una tarjeta */ .ehdr-tab:hover, .ehdr-tab:focus, .ehdr-tab:active { color: #1c2668; } .ehdr-tab-on { font-weight: 700; } .ehdr-tab-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; background: #2b3990; border-radius: 2px; } .ehdr-fill { flex: 1 1 auto; min-width: 4px; } /* ---------- sin equipo ---------- */ .ehdr-new { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 15px; border: 1px dashed rgba(43, 57, 144, .34) !important; border-radius: 999px; background: rgba(255, 255, 255, .86) !important; white-space: nowrap; } .ehdr-new:hover { background: #fff !important; border-color: #2b3990 !important; } .ehdr-new-plus { font-size: 15px !important; font-weight: 600; color: #2b3990 !important;padding-right:0 !important;padding-left:15px !important; } .ehdr-new-txt { font-size: 13px !important; font-weight: 700; color: #1c2668 !important;padding-left:0 !important;padding-right: 15px !important; } /* ---------- con equipo ---------- */ .ehdr-team { position: relative; flex: 0 0 auto; } .ehdr button.ehdr-pill { display: inline-flex; align-items: center; gap: 9px; padding-right:12px; border: 1px solid rgba(43, 57, 144, .14); } .ehdr-pill:hover { background: #fff !important; } .ehdr-avs { display: inline-flex; flex: none; align-items: center; } .ehdr-av { width: 30px; height: 30px; padding: 0; margin: 0 0 0 -9px; border: 2px solid #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px !important; font-weight: 800; color: #fff; } .ehdr-av:first-of-type{margin:0;} .ehdr-av + .ehdr-av { margin-left: -9px; } .ehdr-av-more { background: #e9e9ef; color: #55555f; font-size: 10px !important; } .ehdr .ehdr-name { font-size: 13px !important; font-weight: 700 !important; color: #1c2668 !important; text-transform: none !important; letter-spacing: normal !important; white-space: nowrap; max-width: 170px; overflow: hidden; text-overflow: ellipsis; line-height: 1.2 !important; } .ehdr .ehdr-badge { flex: none; width: auto !important; height: auto !important; padding: 3px 7px !important; margin: 0 !important; border: 0 !important; border-radius: 999px !important; background: #17879b !important; font-size: 9px !important; font-weight: 800 !important; letter-spacing: .06em !important; color: #fff !important; text-transform: none !important; } /* la flecha se dibuja con bordes: cualquier border heredado la deforma */ .ehdr .ehdr-caret { flex: none; width: 0 !important; height: 0 !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; background: none !important; border-style: solid !important; border-width: 5px 4px 0 4px !important; border-color: #7a7a86 transparent transparent transparent !important; border-radius: 0 !important; } /* ---------- menu ---------- */ .ehdr-menu { display: none; position: absolute; top: 44px; right: 0; z-index: 60; width: 296px; padding: 7px; background: #fff; border: 1px solid #e6e6ec; border-radius: 13px; box-shadow: 0 16px 40px rgba(20, 20, 30, .18); flex-direction: column; gap: 2px; } .ehdr-team.ehdr-open .ehdr-menu { display: flex; } .ehdr-team .ehdr-pill .ehdr-avs .ehdr-av, .ehdr-team .ehdr-pill .ehdr-avs{display:flex !important; align-items: center !important} .ehdr-team .ehdr-pill .ehdr-avs .ehdr-av{color:white !important; justify-content: center !important;letter-spacing: 0 !important} .ehdr-team .ehdr-pill .ehdr-avs .ehdr-av.ehdr-av-more{color:#55555f !important;} .ehdr-menu button.ehdr-mi { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border-radius: 9px; height: 44px; } .ehdr-menu button.ehdr-mi:hover { background: rgb(246, 247, 253); } .ehdr-mi-ico { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; } .ehdr-mi-blue { background: #eef1fb; color: #2b3990; } .ehdr-mi-violet { background: #f2eefb; color: #5b2ab5; } .ehdr .ehdr-mi-txt { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600; color: #17171c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ehdr .ehdr-mi-ico { width: 26px; height: 26px; display:flex; align-items: center; justify-content: center; } .ehdr .ehdr-mi-ico svg{ position:relative; width:14px; height: 14px; } .ehdr-mi-hint { flex: none; padding: 3px 8px; border-radius: 999px; background: #e8f4f6; font-size: 11px !important; font-weight: 700; color: #17879b; white-space: nowrap; } .ehdr-mi-sep { display: block; height: 1px; margin: 5px 9px; background: #ececf1; } @media (max-width: 1100px) { .ehdr { flex-wrap: wrap; gap: 10px; } .ehdr-team{margin-right:15px;} .ehdr-tabs { gap: 16px; } .ehdr-tab { font-size: 13px !important; } .ehdr-fill { display: none; } .ehdr-menu { width: min(296px, calc(100vw - 40px)); } } @media (max-width: 680px) { .ehdr { flex-direction: column;align-items: flex-start;} .ehdr-menu{left:0;right:auto;} } body .tooltipSelectDesign .selectDesign .title-section.lookTitle{ z-index: 999999999; width:94%; padding-right:0; padding-left: 0; display:flex; flex-direction: column; position: relative; } /* avance miembros 21/8/2026 */ .ehbn{ margin: 22px 0 0; border: 1px solid rgb(214, 236, 240); border-radius: 14px; padding: 22px 24px; display: flex; align-items: center; gap: 16px; background: rgb(244, 251, 252); } @media(max-width: 840px){ .ehbn{ flex-direction: column; } .ehbn-txt, .ehbn-acciones, .ehbn-invite{ width:100%; } .ehbn.ehbn-pro{ flex-direction: row; } .ehbn-pro .ehbn-txt{ flex:auto; } .ehbn-acciones{ width: auto; } } @media(max-width: 720px){ .ehbn.ehbn-pro{ flex-direction: row; flex-wrap:wrap; } .ehbn-pro .ehbn-star{ flex: 0 0 auto; } .ehbn-pro .ehbn-txt{ flex: 1 1 0; min-width: 0; } .ehbn-acciones{ flex: 0 0 100%; } } .ehbn.ehbn-pro{ padding:15px 20px; } .ehbn *{ text-transform:none; } .ehbn-star{ width: 30px; height: 30px; border-radius: 8px; background: rgb(23, 135, 155); color: rgb(255, 255, 255); font-size: 14px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .ehbn-txt{ flex: 1 1 0%; display: flex; flex-direction: column; gap: 7px; } .ehbn-pro .ehbn-txt{ gap:2px; } .ehbn-txt *{ margin:0; } .ehbn-title{ font-size: 17px; font-weight: 800; color: rgb(28, 38, 104); } .ehbn-pro .ehbn-title{ font-size: 14px; } .ehbn-desc{ font-size: 13.5px; color: rgb(85, 85, 95); font-weight:400; max-width: 520px; line-height: 1.5; } .ehbn-pro .ehbn-desc{ max-width: inherit; font-size: 12.5px; line-height: normal; } .ehbn-acciones{ display: flex; align-items: center; gap: 16px; } .ehbn-pro .ehbn-acciones{ gap:12px; } .ehbn-acciones *{ display:block; } .ehbn-bar{ width: 150px; height: 6px; border-radius: 3px; background: rgb(220, 238, 241); overflow: hidden; } .ehbn-bar-in{ height: 6px; border-radius: 3px; background: rgb(23, 135, 155); } .ehbn-link{ font-size: 13.5px; font-weight: 700; color: rgb(43, 57, 144); cursor: pointer; white-space: nowrap; } .ehbn-pro .ehbn-link{ font-size: 13px; } .ehbn-cta{ border-radius: 10px; padding: 12px 20px; font-size: 13.5px; font-weight: 800; color: rgb(255, 255, 255); cursor: pointer; white-space: nowrap; background: linear-gradient(90deg, rgb(31, 127, 168), rgb(43, 57, 144)); } #ehbn_invitar{ gap:22px; } .ehbn-invite{ display: flex; flex-direction: column; gap: 8px; width: 340px; } .ehbn-invite-row{ display: flex; gap: 8px; } .ehbn-input{ flex: 1 1 0%; font-family: inherit; font-size: 13.5px; color: rgb(23, 23, 28); border: 1px solid rgb(220, 220, 226); border-radius: 10px; padding: 11px 13px; outline: none; background: rgb(255, 255, 255); } .ehbn-hint{ font-weight: 700; color: rgb(43, 57, 144); font-size:12px; } .ehbn-hint:empty{ display:none; } /* avance miembros 21/8/2026 */ /* la X vive dentro del bloque, arriba a la derecha. El padding-right del .ehbn le reserva sitio para que no se monte sobre botones ni texto */ .ehbn { position: relative !important; padding-right: 52px !important; } .ehbn-x { position: absolute !important; top: 12px; right: 12px; width: 26px !important; height: 26px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important; background: none !important; color: #9a9aa6 !important; cursor: pointer; z-index: 3; } .ehbn-x::before, .ehbn-x::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.6px; background: currentColor; border-radius: 2px; } .ehbn-x::before { transform: translate(-50%, -50%) rotate(45deg); } .ehbn-x::after { transform: translate(-50%, -50%) rotate(-45deg); } .ehbn-x:hover { background: rgba(20, 20, 30, .06) !important; color: #17171c !important; } body .sidebar .sidebarMenu .sideBarNav button .name, .sidebar .sidebarMenu .sideBarNav .dots .name { color: #1a1c1f !important; } header.premiumHeader { background: var(--hb-bar-bg, #2E2A96) !important; } body .sidebar .sidebarMenu .sideBarNav button .figure, .sidebar .sidebarMenu .sideBarNav .dots .figure { opacity: 1 !important; } /* ============================================================ EDIT.org — Header: botones File → Download Mockup 9a · índigo #3533ad + chips blanco 12 % Cargar DESPUÉS del CSS actual del editor. Notas sobre el CSS antiguo que hay que pisar: - header tiene background #15b7b5 - .redimension .more-button-aperture tiene margin-right: 15px - .more-button-aperture p tiene overflow: auto ← pintaba una barra de scroll (el "cuadradito" con flechas) al bajar el line-height. Por eso forzamos overflow: visible. - File y Resize son AMBOS .more-button-aperture; se distinguen por data-title y por el contenedor (#redimension_menu2 / #redimension_menu). La clase .header-nav-btn no existe en producción. ============================================================ */ :root { --hb-h: 38px; --hb-radius: 8px; /* Barra */ --hb-bar-bg: #2E2A96; /* Chips traslúcidos */ --hb-chip: rgba(255, 255, 255, 0.12); --hb-chip-hover: rgba(255, 255, 255, 0.22); --hb-text: #fff; --hb-text-muted: rgba(255, 255, 255, 0.55); /* Líneas: divisor interno del chip y separador antes de Download */ --hb-line: rgba(255, 255, 255, 0.2); --hb-line-suave: rgba(255, 255, 255, 0.12); /* Acción principal */ --hb-primary-bg: #fff; --hb-primary-bg-hover: #e9e6ff; --hb-primary-text: #3533ad; /* Texto secundario (nombre del diseño) */ --hb-dim: #b3aee0; --hb-font: 14.5px; --hb-gap: 8px; --eb-indigo: #3533AD; --eb-indigo-hover: #2A288C; --eb-indigo-press: #1F1E6B; --eb-indigo-soft: #F0EFFA; --eb-indigo-border: #DDD9F4; --eb-indigo-ink: #241D63; --eb-indigo-off: #C9C8E4; --eb-danger: #C0223C; --eb-danger-hover: #9D1930; --eb-danger-press: #7D1325; --eb-danger-off: #E7C4CA; --eb-focus: 0 0 0 2px #fff, 0 0 0 4px #A9A7E6; --eb-focus-danger: 0 0 0 2px #fff, 0 0 0 4px #EAA3AD; --eb-radio: 8px; --eb-peso: 600; --eb-h-sm: 36px; --eb-h-md: 44px; --eb-h-lg: 48px; --eb-indigo-press-soft: #E5E1FA; --eb-gris-hover: #F2F2F5; --eb-circulo-borde: #C9CAD4; --eb-circulo-hover: #9FA1B0; --eb-indigo-press-border: #B9B3E8; --eb-off-border: #ECECEF; --eb-off-ink: #B6B8C4; } @media (max-width:640px) { body header .leftSide .space-hamburguer { border: 0px ! important; } } body .scrollingWrap.re-design-forma-popup#selectordeFormatos #downloadfile #DownloadBTN { display: flex; align-items: center; justify-content: center; box-sizing: border-box; font-size: 15px; font-weight: var(--eb-peso, 600); line-height: 1; margin: 0 auto; padding: 0 24px !important; height: var(--eb-h-lg, 48px); width: auto; border-radius: var(--eb-radio, 8px) !important; background: var(--eb-indigo, #3533AD); color: #fff; transition: background .15s ease; } body .scrollingWrap.re-design-forma-popup#selectordeFormatos #downloadfile #DownloadBTN:hover { background: var(--eb-indigo-hover, #2A288C); } body .scrollingWrap.re-design-forma-popup#selectordeFormatos #downloadfile #DownloadBTN:active { background: var(--eb-indigo-press, #1F1E6B); } body .scrollingWrap.re-design-forma-popup#selectordeFormatos #downloadfile #DownloadBTN:focus-visible { box-shadow: var(--eb-focus, 0 0 0 2px #fff, 0 0 0 4px #A9A7E6); } body .scrollingWrap .scrollingBox .tooltipBox.get-premium.newDownloadFile.boxShareDesign.share-group-system .double-share .colit .btns button { display: inline-grid; place-items: center; box-sizing: border-box; margin: 0 auto; height: var(--eb-h-md, 44px); border-radius: var(--eb-radio, 8px); padding: 0 20px; font-size: 15px; font-weight: var(--eb-peso, 600); line-height: 1; color: #fff; text-align: center; text-transform: none; transition: background .15s ease; } body .scrollingWrap .scrollingBox .tooltipBox.get-premium.newDownloadFile.boxShareDesign.share-group-system .double-share .colit .btns button.send { background: var(--eb-indigo, #3533AD); } body .scrollingWrap .scrollingBox .tooltipBox.get-premium.newDownloadFile.boxShareDesign.share-group-system .double-share .colit .btns button.send:hover { background: var(--eb-indigo-hover, #2A288C); } body .scrollingWrap .scrollingBox .tooltipBox.get-premium.newDownloadFile.boxShareDesign.share-group-system .double-share .colit .btns button.send:active { background: var(--eb-indigo-press, #1F1E6B); } body .scrollingWrap .scrollingBox .tooltipBox.get-premium.newDownloadFile.boxShareDesign.share-group-system .double-share .colit .btns button.send:focus-visible { box-shadow: var(--eb-focus, 0 0 0 2px #fff, 0 0 0 4px #A9A7E6); } body .scrollingWrap .scrollingBox .tooltipBox.get-premium.newDownloadFile.boxShareDesign.share-group-system .double-share .colit .btns button.send[disabled] { background: var(--eb-indigo-off, #C9C8E4); cursor: default; } /* Fondo de la barra — fuera del media query para que también aplique en móvil. Bórralo si el header debe seguir turquesa. */ #headerEditas { background: var(--hb-bar-bg) !important; } @media (min-width: 1024px) { /* ---------- Contenedor: alinea y separa los chips ---------- */ #headerEditas .nameProyect-fieldSearch { display: flex !important; align-items: center; gap: var(--hb-gap); } #headerEditas #redimension_menu, #headerEditas #redimension_menu2 { display: flex !important; align-items: center; position: relative; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; } #headerEditas #redimension_menu .more-buttons-box, #headerEditas #redimension_menu2 .more-buttons-box { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; } /* ---------- Base común de los 5 chips ---------- */ #headerEditas .more-button-aperture, #headerEditas #share_button_header, #headerEditas #botonUpdate, #headerEditas #botonFinalizar { display: inline-flex !important; align-items: center; justify-content: center; box-sizing: border-box; height: var(--hb-h) !important; min-height: var(--hb-h) !important; line-height: 1 !important; margin: 0 !important; /* pisa el margin-right: 15px antiguo */ border: 0 !important; border-radius: var(--hb-radius) !important; background: var(--hb-chip) !important; color: var(--hb-text) !important; font-family: inherit; font-size: var(--hb-font) !important; font-weight: 600 !important; text-transform: none !important; text-decoration: none !important; white-space: nowrap; cursor: pointer; opacity: 1 !important; /* header .rightSide button lo pone a 0 */ box-shadow: none !important; transition: background-color .15s ease, color .15s ease; } #headerEditas .more-button-aperture:hover, #headerEditas #share_button_header:hover, #headerEditas #botonUpdate:hover { background: var(--hb-chip-hover) !important; } /* 1c: Archivo y Redimensionar pasan a ghost. Son navegacion, no acciones, y con chip competian visualmente con Compartir y Guardar. Solo se tintan al pasar el raton. */ #headerEditas .more-button-aperture { background: transparent !important; padding: 0 12px !important; } #headerEditas .more-button-aperture:hover { background: var(--hb-chip) !important; } #headerEditas .more-button-aperture:focus-visible, #headerEditas #share_button_header:focus-visible, #headerEditas #botonUpdate:focus-visible, #headerEditas #botonFinalizar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* ---------- Texto interno ---------- */ #headerEditas .more-button-aperture p, #headerEditas #share_button_header span:not(.icon), #headerEditas #botonUpdate #spanSaveText, #headerEditas #botonFinalizar span:not(.icon) { margin: 0 !important; padding: 0 !important; font-size: inherit !important; font-weight: inherit !important; color: inherit !important; line-height: 1 !important; overflow: visible !important; /* mata la barra de scroll del

*/ overflow-x: visible !important; overflow-y: visible !important; } #headerEditas .more-button-aperture p::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } /* ---------- File / Resize: chip partido con divisor ---------- */ #headerEditas .more-button-aperture { gap: 0; padding: 0 0 0 18px !important; overflow: hidden; } /* Dentro solo sobreviven el

y la flecha */ #headerEditas .more-button-aperture > *:not(p):not(.icon-arrow) { display: none !important; } #headerEditas .more-button-aperture::before, #headerEditas .more-button-aperture::after, #headerEditas .more-button-aperture > p::before, #headerEditas .more-button-aperture > p::after { content: none !important; display: none !important; background: none !important; } /* Zona de la flecha: 34px de ancho, divisor a la izquierda */ #headerEditas .more-button-aperture .icon-arrow { position: relative; display: block !important; width: 34px !important; height: var(--hb-h) !important; margin: 0 0 0 15px !important; padding: 0 !important; flex: 0 0 auto; border: 0 !important; background: none !important; -webkit-mask: none !important; mask: none !important; font-size: 0 !important; line-height: 0 !important; color: transparent !important; overflow: hidden; } #headerEditas .more-button-aperture .icon-arrow::before { content: "" !important; display: block !important; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 20px; background: var(--hb-line) !important; } #headerEditas .more-button-aperture .icon-arrow::after { content: "" !important; display: block !important; position: absolute; inset: 0; border: 0 !important; transform: none !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 10 10'%3E%3Cpath d='M1.4 3.4 L5 7 L8.6 3.4' fill='none' stroke='%23ffffff' stroke-opacity='.7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px 11px no-repeat !important; } /* ---------- Share ---------- */ #headerEditas #share_button_header { padding: 0 18px !important; } #headerEditas #share_button_header .icon { display: none !important; } /* ---------- Save ---------- */ #headerEditas #botonUpdate { position: relative; padding: 0 18px !important; margin-right: 9px !important; color: inherit !important; } #headerEditas #botonUpdate #icon_save_original { display: none !important; } #headerEditas #botonUpdate #icon_save_loading { width: 15px !important; height: 15px !important; margin-right: 8px; background-size: 15px 15px !important; background-repeat: no-repeat !important; background-position: center !important; } /* Separador vertical entre Save y Download */ #headerEditas #botonUpdate::before { content: ""; position: absolute; right: -9px; top: 50%; transform: translateY(-50%); width: 1px; height: 26px; /* al 20% se leian demasiado; el separador debe insinuarse, no dividir */ background: var(--hb-line-suave); pointer-events: none; padding: 0; } /* ---------- Download (acción principal) ---------- */ #headerEditas #botonFinalizar { gap: 9px; padding: 0 22px !important; background: var(--hb-primary-bg) !important; color: var(--hb-primary-text) !important; font-weight: 700 !important; } #headerEditas #botonFinalizar:hover { background: var(--hb-primary-bg-hover) !important; } #headerEditas #botonFinalizar .icon { width: 16px !important; height: 16px !important; margin: 0 !important; flex: 0 0 auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 2 L8 10.4 M4.6 7.2 L8 10.6 L11.4 7.2' fill='none' stroke='%233533ad' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3 12.8 L13 12.8' stroke='%233533ad' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat !important; } /* ---------- Nombre del diseño ---------- */ #headerEditas #nombreTemplate { color: var(--hb-dim) !important; background: transparent !important; border: 0 !important; font-size: var(--hb-font) !important; } #headerEditas #nombreTemplate::placeholder { color: var(--hb-dim) !important; opacity: 1; } /* ---------- Undo / Redo ---------- */ #headerEditas #zoomBar #undo, #headerEditas #zoomBar #redo { width: 40px !important; height: 40px !important; border-radius: 20px !important; background-color: transparent !important; border: 0 !important; opacity: 1 !important; transition: background-color .15s ease; } #headerEditas #zoomBar #undo:hover, #headerEditas #zoomBar #redo:not([disabled]):hover { background-color: rgba(255, 255, 255, 0.1) !important; } #headerEditas #zoomBar #redo[disabled] { opacity: .45 !important; cursor: default; } /* ============================================================ OPCIONAL A — Estados de Save Requiere añadir/quitar la clase en el ============================================================ */ /* Hay cambios sin guardar: Save pasa a blanco */ #headerEditas #botonUpdate.has-changes { background: var(--hb-primary-bg) !important; color: var(--hb-primary-text) !important; font-weight: 700 !important; } #headerEditas #botonUpdate.has-changes:hover { background: var(--hb-primary-bg-hover) !important; } /* ...y entonces Download baja a chip traslúcido */ #headerEditas #botonUpdate.has-changes ~ #botonFinalizar { background: var(--hb-chip) !important; color: var(--hb-text) !important; font-weight: 600 !important; } #headerEditas #botonUpdate.has-changes ~ #botonFinalizar:hover { background: var(--hb-chip-hover) !important; } #headerEditas #botonUpdate.has-changes ~ #botonFinalizar .icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 2 L8 10.4 M4.6 7.2 L8 10.6 L11.4 7.2' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3 12.8 L13 12.8' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") !important; } /* Guardando: inactivo para evitar doble clic */ #headerEditas #botonUpdate.is-saving { background: var(--hb-chip) !important; color: var(--hb-text-muted) !important; font-weight: 600 !important; pointer-events: none; opacity: .7 !important; } } /* fin @media */ /* ============================================================ ICONOS DEL SIDEBAR — color por CSS ------------------------------------------------------------ Con background-image el SVG va como imagen y su color no se puede tocar desde CSS: haria falta una copia del data URI por cada estado. Con mask-image el SVG define solo la FORMA y el color lo pone background-color, asi que un mismo icono sirve para reposo, hover y activo. IMPORTANTE: el data URI del icono NO puede llevar la cabecera , ni , ni