/* Panel de cliente — reconstruido 1:1 desde el mockup de escritorio (artifact 3gactaCzgbAkuoSRGX6LVk, TarjetaEditorDesktop.dc.html / DashboardDesktop.dc.html): sidebar fijo + contenido con vista previa en vivo a la derecha. Valores (colores, radios, sombras, tipografías) copiados literales del mockup. Adaptado de 1440px fijo (lienzo de diseño) a un layout fluido con los mismos valores, y con una versión de una sola columna en móvil (el mockup de escritorio no define un breakpoint propio). */ .smc-panel { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #F7F8FA; min-height: 100vh; display: flex; align-items: stretch; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .smc-panel * { box-sizing: border-box; } .smc-panel a { text-decoration: none; } /* El tema (Elementor/Royal Addons) trae su propio estilo de botón (contorno azul, pill) que gana por encima del nuestro si su hoja carga después — "no se ve premium" (2 oct 2026). Reset defensivo: todo botón/enlace-botón del panel parte en blanco y las reglas de abajo (que sí traen su propio !important) deciden el look real. */ .smc-panel button, .smc-panel a.smc-card__candado-cta, .smc-panel a.smc-portada-tile-candado, .smc-panel a.smc-sidebar__nav-candado, .smc-panel a.smc-agregar-link { -webkit-appearance: none; appearance: none; box-shadow: none !important; outline: none; text-decoration: none !important; font-family: inherit; } /* Sidebar */ .smc-sidebar { flex: 0 0 264px; background: #FFFFFF; border-right: 1px solid #ECEDF0; display: flex; flex-direction: column; position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; } .smc-sidebar__marca { display: flex; align-items: center; gap: 9px; padding: 26px 24px 22px; } .smc-sidebar__marca-icono { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .smc-sidebar__marca-texto { font-size: 15.5px; font-weight: 800; color: #14171F; letter-spacing: -.01em; } .smc-sidebar__nav { padding: 8px 14px; display: flex; flex-direction: column; gap: 2px; } .smc-sidebar__nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; color: #6B6E76; font-size: 14.5px; font-weight: 600; transition: background .15s ease, color .15s ease; } .smc-sidebar__nav a:hover { background: #F2F3F5; } .smc-sidebar__nav a.activo { background: color-mix(in srgb, var(--smc-accent, #2554EB) 10%, transparent); font-weight: 700; } .smc-sidebar__nav svg { flex-shrink: 0; } .smc-sidebar__nav-pronto { opacity: .7; cursor: default; } .smc-sidebar__nav-pronto:hover { background: none !important; } .smc-sidebar__nav-candado { opacity: .85; } .smc-sidebar__nav-candado:hover { background: #F2F3F5 !important; opacity: 1; } .smc-sidebar__nav-candado-insignia { margin-left: auto; font-size: 10px; font-weight: 700; color: #8A5B00 !important; background: #FFF3D6 !important; border-radius: 999px; padding: 2px 8px; white-space: nowrap; } .smc-sidebar__relleno { flex: 1 1 auto; } .smc-sidebar__cuenta { margin: 6px 14px 0; padding-top: 14px; border-top: 1px solid #ECEDF0; display: flex; align-items: center; gap: 10px; } .smc-sidebar__avatar { width: 34px; height: 34px; border-radius: 50%; background: #E8EBFB; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; flex-shrink: 0; } .smc-sidebar__cuenta-nombre { font-size: 14px; font-weight: 700; color: #14171F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .smc-sidebar__cuenta-salir { font-size: 12.5px; color: #8A8D94; } .smc-sidebar__cuenta-salir:hover { text-decoration: underline; } .smc-sidebar__idioma { padding: 12px 16px 18px; } .smc-sidebar__idioma a { display: inline-flex; align-items: center; gap: 7px; color: #6B6E76; font-size: 13.5px; font-weight: 700; } .smc-sidebar__idioma span { font-size: 17px; } /* Menú lateral en móvil (hamburguesa + cajón deslizable), portado literal de TarjetaEditor.dc.html (Mobile) — fondo oscuro + aside deslizable con botón de cerrar, en vez del menú horizontal aproximado que había antes. */ .smc-sidebar__cerrar { display: none !important; width: 30px; height: 30px; border-radius: 8px !important; align-items: center; justify-content: center; color: #6B6E76 !important; background: none !important; border: none !important; flex-shrink: 0; } .smc-boton-menu-movil { display: none !important; width: 34px; height: 34px; border-radius: 10px !important; background: #FFFFFF !important; border: 1px solid #ECEDF0 !important; align-items: center; justify-content: center; color: #14171F !important; flex-shrink: 0; cursor: pointer; } .smc-titulo-fila { display: flex; align-items: center; gap: 12px; } .smc-sidebar-fondo { display: none; position: fixed; inset: 0; background: rgba(20,23,31,.45); z-index: 90; } .smc-sidebar-fondo.smc-sidebar-fondo--visible { display: block; } .smc-vista-previa__cabecera-movil { display: none; } /* Barra fija inferior (móvil): Vista previa + Guardar cambios, botones píldora. */ .smc-barra-movil { display: none; } .smc-barra-movil__boton { flex: 1; text-align: center; padding: 13px; border-radius: 12px !important; font-size: 13.5px; font-weight: 700; border: none !important; cursor: pointer; background: #F2F3F5 !important; color: #14171F !important; } .smc-barra-movil__boton--acento { color: #FFFFFF !important; background: var(--smc-accent, #2554EB) !important; } .smc-barra-movil__relleno { display: none; } /* Contenido principal */ .smc-panel__main { flex: 1 1 auto; min-width: 0; padding: 40px 48px 56px; max-width: 1220px; } .smc-migaja { display: flex; align-items: center; gap: 8px; } .smc-migaja a { font-size: 12.5px; font-weight: 700; color: #8A8D94; } .smc-migaja a:hover { text-decoration: underline; } .smc-migaja span.sep { font-size: 12.5px; color: #C7C9CE; } .smc-migaja span.actual { font-size: 12.5px; font-weight: 700; color: #14171F; } .smc-panel h1.smc-titulo { margin: 6px 0 0; font-size: 24px; font-weight: 800; color: #14171F; } .smc-panel p.smc-subtitulo { margin: 6px 0 0; font-size: 14px; color: #6B6E76; } .smc-aviso-guardado { background: #E6F6EC; color: #1D9A5B; font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 8px; text-align: center; margin: 8px auto 0; width: fit-content; } /* Tarjetas/secciones compartidas (Resumen y Editor) */ .smc-card { border: 1px solid #ECEDF0; border-radius: 16px; background: #FFFFFF; padding: 24px; box-shadow: 0 1px 2px rgba(20,23,31,.04), 0 12px 28px -18px rgba(20,23,31,.14); transition: box-shadow .2s ease; } .smc-card:hover { box-shadow: 0 1px 2px rgba(20,23,31,.04), 0 16px 32px -18px rgba(20,23,31,.22); } .smc-card__titulo { font-size: 14px; font-weight: 700; color: #14171F; } .smc-card__nota { margin: 6px 0 0; font-size: 12px; color: #8A8D94; } /* ---- Secciones Premium candadas dentro del editor del plan Básico ---- */ .smc-card--candado { background: #FAFAF9 !important; border-style: dashed !important; } .smc-card__insignia { display: inline-block; font-size: 10.5px; font-weight: 700; color: #8A5B00; background: #FFF3D6; border-radius: 999px; padding: 2px 9px; margin-left: 6px; vertical-align: middle; } .smc-card__candado-cta { margin-top: 12px; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--smc-accent, #2554EB) !important; background: none !important; border: none !important; padding: 0 !important; } .smc-card__candado-cta:hover { text-decoration: underline; } .smc-portada-tile-candado { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 5px; border: 2px dashed #DADCE0 !important; border-radius: 12px !important; padding: 12px 8px; text-align: center; background: none !important; cursor: pointer; } .smc-portada-tile-candado svg { margin: 0; opacity: .55; } .smc-portada-tile-candado span { font-size: 11px; font-weight: 700; color: #8A8D94; } /* ---- Resumen ---- */ .smc-resumen-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .smc-resumen-cabecera h1 { margin: 0; } .smc-resumen-cabecera .smc-subtitulo { margin-top: 6px; } .smc-resumen-rango { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 10px; border: 1px solid #E3E0D8; background: #FFFFFF; font-size: 13px; font-weight: 700; color: #14171F; flex-shrink: 0; } .smc-resumen-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; } .smc-card--grafica { padding: 24px 28px; } .smc-grafica__cabeza { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; } .smc-grafica__total { font-size: 12px; color: #8A8D94; } .smc-grafica__meses { display: flex; justify-content: space-between; margin-top: 8px; } .smc-grafica__meses span { font-size: 11.5px; color: #8A8D94; } .smc-resumen-card__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .smc-resumen-card__titulo-fila { display: flex; align-items: center; gap: 9px; } .smc-resumen-card__icono { width: 30px; height: 30px; border-radius: 8px; background: rgba(37,84,235,.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .smc-resumen-card__titulo { font-size: 13.5px; font-weight: 700; color: #14171F; } .smc-resumen-card__link { font-size: 12.5px; font-weight: 700; white-space: nowrap; } .smc-resumen-card__link:hover { text-decoration: underline; } .smc-metricas-fila { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; } .smc-metricas-fila .valor { font-size: 34px; font-weight: 800; color: #14171F; line-height: 1; } .smc-metricas-fila .etiqueta { font-size: 12.5px; color: #6B6E76; } .smc-metricas-fila .cambio { margin-left: auto; display: flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; } .smc-metricas-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding-top: 16px; border-top: 1px solid #F2F3F5; } .smc-metricas-grid .valor { font-size: 18px; font-weight: 800; color: #14171F; } .smc-metricas-grid .etiqueta { font-size: 11.5px; color: #8A8D94; } .smc-aviso-vacio { font-size: 11.5px; color: #8A8D94; background: #F7F8FA; border-radius: 10px; padding: 10px 12px; margin-top: 12px; } /* ---- Analítica ---- */ .smc-analitica-metricas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .smc-metrica-card { padding: 18px 20px; } .smc-metrica-card__etiqueta { font-size: 11.5px; font-weight: 700; color: #8A8D94; text-transform: uppercase; letter-spacing: .06em; } .smc-metrica-card__valor-fila { margin-top: 8px; display: flex; align-items: baseline; gap: 6px; } .smc-metrica-card__valor { font-size: 26px; font-weight: 800; color: #14171F; } .smc-metrica-card__cambio { font-size: 11.5px; font-weight: 700; } .smc-analitica-fila-inferior { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; } .smc-desglose-clics { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; } .smc-desglose-clics__cabeza { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 5px; } .smc-desglose-clics__label { color: #14171F; font-weight: 600; } .smc-desglose-clics__total { color: #6B6E76; } .smc-desglose-clics__barra { height: 7px; border-radius: 999px; background: #F2F3F5; } .smc-desglose-clics__barra > div { height: 100%; border-radius: 999px; } .smc-contactos-recientes { margin-top: 14px; display: flex; flex-direction: column; } .smc-contactos-recientes__fila { display: flex; align-items: center; gap: 10px; padding: 10px 6px; border-bottom: 1px solid #F2F3F5; border-radius: 8px; } .smc-contactos-recientes__fila:hover { background: #FAFAFB; } .smc-contactos-recientes__fila:last-child { border-bottom: none; } .smc-contactos-recientes__icono { width: 30px; height: 30px; border-radius: 50%; background: #F2F3F5; color: #6B6E76; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .smc-contactos-recientes__titulo { font-size: 13px; font-weight: 700; color: #14171F; } .smc-contactos-recientes__fecha { font-size: 11.5px; color: #8A8D94; } @media (max-width: 820px) { .smc-analitica-metricas { grid-template-columns: repeat(2, 1fr); } .smc-analitica-fila-inferior { grid-template-columns: 1fr; } } /* ---- Editor: layout de dos columnas + vista previa ---- */ .smc-editor-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: start; margin-top: 20px; } .smc-editor-columna { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .smc-campo { display: block; margin-top: 14px; } .smc-seccion-editor > .smc-campo:first-of-type, .smc-card > .smc-campo:first-of-type { margin-top: 16px; } .smc-campo > span { display: block; font-size: 12px; font-weight: 700; color: #6B6E76; margin-bottom: 6px; } .smc-campo input[type=text], .smc-campo input[type=url], .smc-campo input[type=email], .smc-campo input[type=password], .smc-campo textarea, .smc-campo select { width: 100%; padding: 11px 13px; border: 1px solid #E3E0D8; border-radius: 10px; font-size: 13.5px; color: #14171F; background: #FFFFFF; font-family: inherit; } .smc-campo textarea { resize: vertical; } .smc-campo input:focus, .smc-campo textarea:focus, .smc-campo select:focus { outline: none; border-color: var(--smc-accent, #2554EB); } .smc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; } .smc-grid-2 .smc-campo { margin-top: 0; } /* Pedro pidió (2 oct 2026): el recuadro de color de Apariencia "se ve mal" — se le dio más presencia (caja con borde propio, swatch más grande con anillo) en vez del cuadrito suelto de antes. */ .smc-campo-color { display: flex; align-items: center; gap: 10px; margin-top: 8px; max-width: 340px; padding: 6px; border: 1px solid #E3E0D8; border-radius: 12px; background: #FFFFFF; } .smc-campo-color input[type=color] { width: 40px; height: 40px; border-radius: 9px; border: 1px solid #E3E0D8; padding: 0; flex-shrink: 0; box-shadow: 0 0 0 3px #F2F3F5; cursor: pointer; } .smc-campo-color input[type=text] { flex: 1; padding: 10px 12px; border: 1px solid #E3E0D8; border-radius: 9px; font-size: 13px; font-weight: 600; color: #14171F; background: #FBFBFC; } /* Selector de pastillas (alineación, transición, estilo básico, fondo) */ .smc-opciones-fila { display: flex; gap: 6px; margin-top: 6px; max-width: 360px; } .smc-opciones-fila label { flex: 1; text-align: center; padding: 9px 4px; border-radius: 8px; font-size: 11.5px; font-weight: 700; border: 1px solid #E3E0D8; color: #14171F; cursor: pointer; } .smc-opciones-fila input { display: none; } .smc-opciones-fila input:checked + label { background: var(--smc-accent, #2554EB); color: #FFFFFF; border-color: var(--smc-accent, #2554EB); } /* Selector de tipo de portada (tarjetas grandes con ícono, como el mockup) */ .smc-portada-tiles { margin-top: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .smc-portada-tiles--3 { grid-template-columns: repeat(3, 1fr); } .smc-portada-tiles input { display: none; } .smc-portada-tiles label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 2px solid #ECEDF0; border-radius: 12px; padding: 12px 8px; text-align: center; cursor: pointer; } .smc-portada-tiles input:checked + label { border-color: var(--smc-accent, #2554EB); } .smc-portada-tiles svg { margin: 0; } .smc-portada-tiles span { font-size: 11px; font-weight: 700; color: #14171F; } .smc-subseccion { margin-top: 16px; border-top: 1px solid #F2F3F5; padding-top: 16px; } .smc-subseccion-par { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 420px; } .smc-subseccion-par .etiqueta { font-size: 11px; font-weight: 700; color: #6B6E76; } /* Campo de imagen única, con el media uploader nativo de WordPress */ .smc-campo-media { display: flex; align-items: center; gap: 14px; } .smc-campo-media__miniatura { width: 96px; height: 54px; border-radius: 8px; flex-shrink: 0; background-size: cover; background-position: center; } .smc-campo-media__miniatura--vacia { background-color: #F2F3F5; border: 1px dashed #D8DAE0; } .smc-campo-media__info { flex: 1; min-width: 0; max-width: 340px; } .smc-campo-media__etiqueta { display: block; font-size: 12px; font-weight: 700; color: #6B6E76; margin-bottom: 2px; } /* Botón "Subir ..." del mockup: pastilla gris clara con ícono + texto en línea. */ .smc-boton-subir { font-size: 12px !important; font-weight: 700 !important; padding: 6px 12px !important; border-radius: 9px !important; border: none !important; background: #F2F3F5 !important; color: #14171F !important; cursor: pointer; display: inline-flex !important; align-items: center; gap: 6px; line-height: 1.2 !important; } .smc-boton-subir:hover { background: #E8EAED !important; } /* Pedro pidió (2 oct 2026): todos los botones de subir imagen, al menos 30% más chicos. */ .smc-boton-subir--chico { font-size: 10px !important; padding: 5px 9px !important; gap: 4px !important; } .smc-boton-subir--chico svg { width: 11px !important; height: 11px !important; } /* Campo de galería (varias imágenes), mismo media uploader con selección múltiple */ .smc-campo-galeria { margin-top: 14px; } .smc-galeria-grid__item { position: relative; } .smc-galeria-grid__item .smc-galeria-grid__miniatura { width: 100%; height: 100%; } .smc-galeria-grid__quitar { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; min-width: 0 !important; min-height: 0 !important; border-radius: 50% !important; background: #14171F !important; color: #FFFFFF !important; border: 2px solid #FFFFFF !important; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 !important; } .smc-galeria-grid__quitar svg { width: 9px; height: 9px; display: block; } .smc-campo-galeria .smc-boton-subir { margin-top: 12px; } /* Casilla punteada "+" para agregar fotos directo en la cuadrícula, igual al mockup. */ .smc-galeria-grid__agregar { border: 1.5px dashed #D8DAE0 !important; border-radius: 10px !important; background: #FBFBFC !important; color: #8A8D94 !important; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .smc-galeria-grid__agregar:hover { border-color: var(--smc-accent, #2554EB) !important; color: var(--smc-accent, #2554EB) !important; background: #F7F8FA !important; } /* Filas dinámicas: redes sociales, FAQ, catálogo */ .smc-fila-dinamica { border: 1px solid #ECEDF0; border-radius: 12px; padding: 14px; position: relative; margin-top: 12px; } .smc-fila-dinamica:first-of-type { margin-top: 14px; } /* Quitar: botón de icono (bote de basura), sutil, mismo lenguaje que .smc-icono-boton */ .smc-fila-dinamica__quitar { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; color: #8A8D94 !important; background: #FFFFFF !important; border: 1px solid #ECEDF0 !important; border-radius: 9px !important; padding: 0 !important; cursor: pointer; } .smc-fila-dinamica__quitar:hover { background: #FBEAE8 !important; color: #C7382C !important; border-color: #F3D3CF !important; } .smc-fila-dinamica__grid--red { grid-template-columns: 1fr 1.5fr auto; align-items: end; } .smc-fila-dinamica__grid--red .smc-fila-dinamica__quitar { position: static; align-self: end; margin-bottom: 1px; height: 40px; width: 40px; } .smc-fila-dinamica .smc-campo { margin-top: 10px; } .smc-fila-dinamica .smc-campo:first-of-type { margin-top: 0; } .smc-fila-dinamica__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .smc-fila-dinamica__grid .smc-campo { margin-top: 0; } /* Horario de citas (2 oct 2026) */ .smc-horario-desplegable { margin-top: 14px; border: 1px solid #ECEDF0; border-radius: 10px; } .smc-horario-desplegable > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; cursor: pointer; list-style: none; font-size: 13px; color: #14171F; } .smc-horario-desplegable > summary::-webkit-details-marker { display: none; } .smc-horario-desplegable > summary em { font-style: normal; color: #8A8D94; font-size: 12px; margin-left: 6px; } .smc-horario-desplegable > summary svg { color: #8A8D94; transition: transform .15s ease; flex-shrink: 0; } .smc-horario-desplegable[open] > summary svg { transform: rotate(180deg); } .smc-horario-desplegable .smc-horario-dias { margin: 0; padding: 0 10px 10px; } .smc-horario-fila .smc-horario-fila__check { flex: 1; font-size: 13px; font-weight: 600; color: #14171F; width: auto; } .smc-horario-dias { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; } .smc-horario-fila { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #F7F8FA; border-radius: 10px; } .smc-horario-fila__check { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: #14171F; width: 92px; flex-shrink: 0; } .smc-horario-fila input[type="time"] { border: 1px solid #E2E4E9; border-radius: 7px; padding: 5px 7px; font-size: 12.5px; color: #14171F; background: #FFFFFF; } .smc-horario-fila input[type="time"]:disabled { opacity: .45; } .smc-horario-fila span { font-size: 12px; color: #8A8D94; } @media ( max-width: 480px ) { .smc-horario-fila { flex-wrap: wrap; } } /* Selector de "Red social" (plan Básico) con el icono de la red dentro, pedido de Pedro (2 oct 2026). Las 5 insignias se renderizan todas (SMC_Panel::iconos_red()) y panel.js solo alterna cuál se ve al cambiar de red, sin reconstruir el select. */ .smc-red-social-select { position: relative; } .smc-red-social-select select { padding-left: 40px; } .smc-red-social-icono { display: none; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; pointer-events: none; } .smc-red-social-icono--activo { display: block; } .smc-red-social-icono svg { display: block; } /* Botón sutil (no texto suelto): mismo lenguaje que .smc-icono-boton / bordes #ECEDF0 */ .smc-agregar-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; font-size: 12.5px; font-weight: 600; color: #14171F !important; background: #FFFFFF !important; border: 1px solid #ECEDF0 !important; border-radius: 9px !important; cursor: pointer; padding: 6px 12px !important; } .smc-agregar-link:hover { background: #F2F3F5 !important; border-color: #DADCE0 !important; text-decoration: none; } /* Galería */ .smc-galeria-grid { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; } .smc-galeria-grid__miniatura { width: 84px; height: 84px; border-radius: 10px; background-size: cover; background-position: center; } /* ---- Catálogo: fila compacta (resumen) + modal de edición, igual al mockup ---- La fila (.smc-fila-dinamica con [data-smc-item]) muestra solo nombre/subtítulo + lápiz/basura. El formulario completo vive en .smc-fila-dinamica__campos, oculto hasta que se abre — al abrirse (.smc-editando) la misma fila se convierte en el overlay del modal, en vez de mover los campos a otro elemento del DOM. */ .smc-fila-dinamica[data-smc-item] { padding: 10px 14px; } .smc-fila-dinamica__resumen { display: flex; align-items: center; gap: 10px; } .smc-fila-dinamica__texto { flex: 1; min-width: 0; } .smc-fila-dinamica__titulo { font-size: 13.5px; font-weight: 700; color: #14171F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .smc-fila-dinamica__subtitulo { font-size: 12px; color: #8A8D94; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .smc-icono-boton { width: 30px; height: 30px; min-width: 0 !important; min-height: 0 !important; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin: 0; padding: 0 !important; line-height: 1; color: #8A8D94 !important; background: #FFFFFF !important; border: 1px solid #ECEDF0 !important; border-radius: 9px !important; cursor: pointer; } .smc-icono-boton svg { width: 14px; height: 14px; } .smc-icono-boton:hover { background: #F2F3F5 !important; color: #14171F !important; } .smc-icono-boton--peligro:hover { background: #FBEAE8 !important; color: #C7382C !important; border-color: #F3D3CF !important; } .smc-icono-boton--mini { width: 24px; height: 24px; border-radius: 7px !important; } .smc-icono-boton--mini svg { width: 11px; height: 11px; } .smc-card__pie { display: flex; justify-content: flex-end; gap: 6px; margin-top: 14px; } /* Secciones de la tarjeta (catálogo/video/FAQ/especiales/mapa): toggle + reordenar (4 oct 2026). */ .smc-card__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .smc-card[data-smc-primera] [data-smc-seccion-subir], .smc-card[data-smc-ultima] [data-smc-seccion-bajar] { opacity: .3; pointer-events: none; } .smc-fila-switch { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid #ECEDF0; font-size: 13px; color: #14171F; } .smc-toggle { position: relative; display: inline-flex; flex-shrink: 0; width: 32px; height: 19px; cursor: pointer; } .smc-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .smc-toggle__riel { position: absolute; inset: 0; background: #DADCE0; border-radius: 999px; transition: background .15s ease; } .smc-toggle__riel::before { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; background: #FFFFFF; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s ease; } .smc-toggle input:checked + .smc-toggle__riel { background: var(--smc-accent, #2554EB); } .smc-toggle input:checked + .smc-toggle__riel::before { transform: translateX(13px); } .smc-toggle input:focus-visible + .smc-toggle__riel { outline: 2px solid var(--smc-accent, #2554EB); outline-offset: 2px; } .smc-fila-dinamica__campos { display: none; } .smc-fila-dinamica.smc-editando { position: fixed; inset: 0; margin: 0; padding: 24px; border: none; border-radius: 0; background: rgba(20,23,31,.5); z-index: 200; display: flex; align-items: center; justify-content: center; } .smc-fila-dinamica.smc-editando .smc-fila-dinamica__resumen { display: none; } .smc-fila-dinamica.smc-editando .smc-fila-dinamica__campos { display: block; width: 560px; max-width: 100%; max-height: 86vh; overflow-y: auto; background: #FFFFFF; border-radius: 18px; padding: 22px 26px 26px; box-shadow: 0 20px 60px rgba(20,23,31,.28); } .smc-modal-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid #ECEDF0; margin-bottom: 4px; } .smc-modal-cabecera__titulo { font-size: 15px; font-weight: 800; color: #14171F; } .smc-modal-cerrar { width: 30px; height: 30px; min-width: 0 !important; min-height: 0 !important; display: inline-flex; align-items: center; justify-content: center; padding: 0 !important; color: #8A8D94 !important; background: #FFFFFF !important; border: 1px solid #ECEDF0 !important; border-radius: 9px !important; cursor: pointer; } .smc-modal-cerrar svg { width: 14px; height: 14px; } .smc-modal-cerrar:hover { background: #F2F3F5 !important; color: #14171F !important; } .smc-modal-acciones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #ECEDF0; } /* Vista previa en vivo */ .smc-vista-previa { position: sticky; top: 24px; } .smc-vista-previa__etiqueta { font-size: 12.5px; font-weight: 700; color: #8A8D94; text-transform: uppercase; letter-spacing: .05em; } .smc-vista-previa__tarjeta { margin-top: 12px; border-radius: 16px; overflow: hidden; border: 1px solid #ECEDF0; } .smc-vista-previa__portada { height: 130px; background-size: cover; background-position: center; position: relative; } /* Estilo de portada del plan Básico, igual que en la tarjeta pública real (ver tarjeta.css) — se ve en vivo apenas lo eligen, antes de guardar (2 oct 2026). */ .smc-vista-previa__portada--degradado { -webkit-mask-image: linear-gradient( 180deg, #000 55%, transparent 100% ); mask-image: linear-gradient( 180deg, #000 55%, transparent 100% ); } .smc-vista-previa__portada--curvo { padding-bottom: 36px; border-radius: 0 0 50% 50% / 0 0 36px 36px; } .smc-vista-previa__cuerpo { background: #FFFFFF; padding: 0 18px 20px; text-align: center; position: relative; z-index: 2; } .smc-vista-previa__avatar { width: 68px; height: 68px; border-radius: 50%; background: #E8EBFB; border: 3px solid #FFFFFF; margin: -34px auto 0; box-shadow: 0 2px 8px rgba(20,23,31,.15); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; position: relative; z-index: 2; } .smc-vista-previa__nombre { margin-top: 10px; font-size: 15px; font-weight: 800; color: #14171F; } .smc-vista-previa__puesto { font-size: 12px; color: #6B6E76; margin-top: 2px; } .smc-vista-previa__empresa { font-size: 11.5px; color: #8A8D94; margin-top: 1px; } .smc-vista-previa__botones { margin-top: 14px; display: flex; gap: 8px; } .smc-vista-previa__boton { flex: 1; padding: 8px; border-radius: 8px; font-size: 11px; font-weight: 700; } .smc-vista-previa__boton--acento { color: #FFFFFF; } .smc-vista-previa__boton--gris { background: #F2F3F5; color: #14171F; } .smc-vista-previa__pie { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid #ECEDF0; display: flex; flex-direction: column; gap: 10px; } .smc-vista-previa__pie p { margin: 0; font-size: 11.5px; color: #8A8D94; } .smc-vista-previa__pie-botones { display: flex; align-items: center; gap: 8px; width: 100%; } .smc-vista-previa__pie-botones .smc-boton { text-decoration: none !important; flex: 1; min-width: 0; } .smc-boton { flex-shrink: 1; min-width: 0; display: inline-block; padding: 7px 14px; border-radius: 10px !important; font-size: 12.5px; font-weight: 700; border: none !important; cursor: pointer; background: #F2F3F5 !important; color: #14171F !important; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; } .smc-boton--acento { color: #FFFFFF !important; background: var(--smc-accent, #2554EB) !important; } /* Login (sin mockup propio) */ .smc-panel--login { display: flex; align-items: center; justify-content: center; width: 100%; padding: 40px 20px; } .smc-panel--login .smc-card { max-width: 360px; width: 100%; } @media (max-width: 820px) { .smc-editor-grid { grid-template-columns: 1fr; } .smc-vista-previa { position: static; order: -1; } } /* Pedro pidió (2 oct 2026): el cajón deslizable (hamburguesa, "✕", barra inferior) no debe aparecer "en la versión escritorio" — ahora solo entra en celulares reales, no en una ventana de escritorio angosta. El sidebar sigue estático (columna fija, sin position:fixed ni transform) en todo lo demás, por eso el breakpoint bajó de 760px a 480px. */ @media (max-width: 820px) { .smc-panel { flex-direction: column; } /* Sidebar = cajón deslizable fijo (igual a TarjetaEditor.dc.html), no una barra horizontal. */ .smc-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 296px; max-width: 84vw; flex: none; transform: translateX(-100%); transition: transform .22s ease; z-index: 100; box-shadow: 4px 0 24px rgba(20,23,31,.18); border-right: none; overflow-y: auto; } .smc-sidebar.smc-sidebar--abierta { transform: translateX(0); } .smc-sidebar__cerrar { display: flex !important; } .smc-boton-menu-movil { display: flex !important; } .smc-panel__main { padding: 24px 16px 40px; } .smc-grid-2, .smc-fila-dinamica__grid { grid-template-columns: 1fr; } .smc-portada-tiles { grid-template-columns: repeat(2, 1fr); } /* Vista previa: en el mockup móvil no va fija/inline en la página — es una pantalla completa que solo aparece al tocar "Vista previa" en la barra inferior. */ .smc-vista-previa { position: fixed; inset: 0; z-index: 300; background: #FFFFFF; order: 0; display: none; overflow-y: auto; } .smc-vista-previa.smc-vista-previa--abierta { display: block; } .smc-vista-previa .smc-card { border: none; border-radius: 0; box-shadow: none; height: 100%; padding: 0; } .smc-vista-previa__etiqueta { display: none; } .smc-vista-previa__cabecera-movil { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #ECEDF0; } .smc-vista-previa__cabecera-movil span { font-size: 14px; font-weight: 800; color: #14171F; } .smc-vista-previa__cerrar { width: 30px; height: 30px; border-radius: 8px; border: none; background: none; display: flex; align-items: center; justify-content: center; color: #6B6E76; cursor: pointer; } .smc-vista-previa__tarjeta { margin-top: 0; border: none; border-radius: 0; } /* El "Guardar cambios" de esta tarjeta queda reemplazado por el de la barra inferior. */ .smc-vista-previa__pie { display: none; } /* Barra fija inferior: Vista previa (abre la pantalla completa de arriba) + Guardar cambios. */ /* Sin barra blanca: solo dos botones flotantes que no tapan la edición. */ .smc-barra-movil { display: flex; position: fixed; left: 0; right: 0; bottom: 12px; z-index: 80; background: transparent; border: 0; padding: 0 16px; gap: 10px; box-shadow: none; pointer-events: none; } .smc-barra-movil__boton { pointer-events: auto; box-shadow: 0 6px 18px rgba(20,23,31,.22); background: #14171F !important; color: #fff !important; } .smc-barra-movil__boton--acento { background: var(--smc-accent, #2554EB) !important; } .smc-barra-movil__relleno { display: block; height: 64px; } } /* ---- Mi lealtad / Escanear cliente (Negocio-Panel.dc.html / Negocio-Escanear.dc.html) ---- */ .smc-escanear-visor { position: relative; width: 100%; max-width: 280px; aspect-ratio: 1; margin: 0 auto; border-radius: 16px; overflow: hidden; background: #0D0F14; } .smc-escanear-visor video { width: 100%; height: 100%; object-fit: cover; } .smc-escanear-reticula { position: absolute; inset: 12%; border: 3px solid; border-radius: 14px; pointer-events: none; opacity: .85; } .smc-escanear-cliente { display: flex; align-items: center; gap: 12px; } .smc-escanear-cliente__avatar { width: 48px; height: 48px; border-radius: 50%; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; flex-shrink: 0; } .smc-escanear-cliente__nombre { font-size: 15px; font-weight: 800; color: #14171F; } .smc-escanear-cliente__sub { font-size: 11.5px; color: #8A8D94; margin-top: 2px; } .smc-escanear-estado { font-size: 20px; font-weight: 800; color: #14171F; margin-top: 4px; } .smc-escanear-listo { text-align: center; padding: 10px 0 18px; } .smc-escanear-listo__icono { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; } .smc-escanear-listo p { font-size: 13px; color: #565A63; line-height: 1.5; max-width: 280px; margin: 0 auto; } .smc-fila-dinamica__grid--red .smc-fila-dinamica__quitar { justify-self: end; } .smc-fila-dinamica__grid.smc-fila-dinamica__grid--red { grid-template-columns: 1fr 1.5fr auto; } @media (max-width: 560px) { .smc-fila-dinamica__grid.smc-fila-dinamica__grid--red { grid-template-columns: 1fr auto; } .smc-fila-dinamica__grid--red .smc-campo:nth-child(2) { grid-column: 1 / -1; order: 3; } } /* Vista previa real: arranca arriba (a la altura del título), alta, y se queda fija; Guardar siempre visible abajo. */ @media (min-width: 821px) { .smc-vista-previa { position: sticky; top: 16px; margin-top: calc(-1 * var(--smc-cab-alto, 128px)); height: calc(100vh - 32px); align-self: start; z-index: 5; } .smc-vista-previa > .smc-card { height: 100%; display: flex; flex-direction: column; padding: 16px; box-sizing: border-box; } .smc-vista-previa__tarjeta--real { flex: 1 1 auto; min-height: 0; margin-top: 10px; } .smc-vista-previa__marco { height: 100% !important; } .smc-vista-previa__pie { flex: 0 0 auto; padding-top: 10px; } .smc-vista-previa__pie p { margin: 0; font-size: 12px; color: #8A8D94; } /* Sin barra inferior en computadora: Guardar cambios vive bajo la vista previa. */ .smc-barra-movil, .smc-barra-movil__relleno { display: none !important; } .smc-vista-previa__cabecera-movil { display: none; } } .smc-vista-previa__tarjeta--real { background: #FFFFFF; border-radius: 20px; border: 1px solid #E3E5EA; overflow: hidden; box-shadow: 0 10px 30px -18px rgba(20,23,31,.25); } .smc-vista-previa__marco { display: block; width: 100%; height: 640px; border: 0; background: #FFFFFF; } @media (max-width: 820px) { .smc-vista-previa__tarjeta--real { border: 0; border-radius: 0; box-shadow: none; } .smc-vista-previa__marco { height: calc(100vh - 62px); } } .smc-autoguardado { color: #6B6E76; font-weight: 600; } /* Texturas de fondo — miniaturas del editor */ .smc-textura-opciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; } .smc-textura-opciones input { position: absolute; opacity: 0; pointer-events: none; } .smc-textura-opciones label { display: block; cursor: pointer; border: 1px solid #E3E5EA; border-radius: 12px; overflow: hidden; background: #FFFFFF; text-align: center; font-size: 11.5px; font-weight: 700; color: #4A4D55; } .smc-textura-opciones label span.smc-textura-mini { display: block; height: 54px; background-color: #FFFFFF; } .smc-textura-opciones label em { display: block; font-style: normal; padding: 6px 0 7px; } .smc-textura-opciones input:checked + label { border-color: #2554EB; box-shadow: 0 0 0 2px rgba(37,84,235,.18); } .smc-panel [hidden] { display: none !important; } .smc-autoguardado { color: #6B6E76; font-weight: 600; } /* Selector de imágenes propio (solo las imágenes de la persona) */ .smc-fotos { position: fixed; inset: 0; z-index: 100000; background: rgba(20,23,31,.5); display: flex; align-items: center; justify-content: center; padding: 16px; } .smc-fotos__caja { background: #FFFFFF; border-radius: 20px; width: 100%; max-width: 620px; max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 30px 80px -20px rgba(20,23,31,.5); overflow: hidden; } .smc-fotos__cabecera { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #ECEDF0; } .smc-fotos__titulo { font-size: 15px; font-weight: 800; color: #14171F; } .smc-fotos__cuerpo { padding: 16px 20px; overflow-y: auto; flex: 1; } .smc-fotos__zona { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 22px 16px; border: 1.5px dashed #CFD2D9; border-radius: 16px; color: #6B6E76; cursor: pointer; background: #FAFAFB; font-size: 12px; } .smc-fotos__zona strong { color: #14171F; font-size: 14px; } .smc-fotos__zona--sobre, .smc-fotos__zona:hover { border-color: #2554EB; background: #F3F6FF; } .smc-fotos__estado { min-height: 18px; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: #6B6E76; } .smc-fotos__subtitulo { margin: 10px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8A8D94; } .smc-fotos__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; } .smc-fotos__item { aspect-ratio: 1 / 1; border-radius: 12px !important; border: 2px solid transparent !important; background-size: cover; background-position: center; background-color: #F1F2F5 !important; padding: 0 !important; min-width: 0 !important; min-height: 0 !important; cursor: pointer; } .smc-fotos__item--elegida { border-color: #2554EB !important; box-shadow: 0 0 0 3px rgba(37,84,235,.2); } .smc-fotos__vacio { grid-column: 1 / -1; padding: 18px 0; text-align: center; font-size: 12.5px; color: #8A8D94; } .smc-fotos__pie { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid #ECEDF0; } .smc-fotos__pie .smc-boton:disabled { opacity: .45; cursor: default; } /* Opciones en fila: botones simétricos, mismo ancho/alto y texto en una línea (4 oct 2026) */ .smc-opciones-fila label { flex: 1 1 0 !important; min-width: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; height: 40px !important; padding: 0 12px !important; white-space: nowrap !important; line-height: 1 !important; box-sizing: border-box; } .smc-subseccion-par { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) !important; max-width: 600px !important; } .smc-subseccion-par .smc-opciones-fila { max-width: none; } @media (max-width: 480px) { .smc-subseccion-par { grid-template-columns: 1fr !important; } } /* Quitar foto de la galería: botón de vidrio con ícono de papelera, dentro de la esquina de la miniatura (4 oct 2026) */ .smc-galeria-grid__quitar { top: auto !important; right: 6px !important; bottom: 6px !important; width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; border-radius: 9px !important; background: rgba(255,255,255,.82) !important; color: #14171F !important; border: 1px solid rgba(255,255,255,.7) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 2px 8px rgba(20,23,31,.18) !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer; transition: background .15s, color .15s; } .smc-galeria-grid__quitar:hover { background: #FFFFFF !important; color: #D92D20 !important; } .smc-galeria-grid__quitar svg { width: 14px !important; height: 14px !important; display: block; } /* Texturas de fondo (generadas): sutiles y coloridas */ .smc-textura-mini[data-smc-textura="puntos"] { background-image: radial-gradient(rgba(20,23,31,.16) 1.3px, transparent 1.6px); background-size: 16px 16px; } .smc-textura-mini[data-smc-textura="cuadricula"] { background-image: linear-gradient(rgba(20,23,31,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(20,23,31,.07) 1px, transparent 1px); background-size: 24px 24px; } .smc-textura-mini[data-smc-textura="diagonales"] { background-image: repeating-linear-gradient(45deg, rgba(20,23,31,.07) 0 1px, transparent 1px 11px); } .smc-textura-mini[data-smc-textura="ondas"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='20' viewBox='0 0 60 20'%3E%3Cpath d='M0 10 Q15 0 30 10 T60 10' fill='none' stroke='%2314171F' stroke-opacity='.10' stroke-width='1.2'/%3E%3C/svg%3E"); background-size: 60px 20px; } .smc-textura-mini[data-smc-textura="grano"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .09 0 0 0 0 .12 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"); } .smc-textura-mini[data-smc-textura="lino"] { background-image: repeating-linear-gradient(0deg, rgba(20,23,31,.05) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(20,23,31,.05) 0 1px, transparent 1px 4px); } .smc-textura-mini[data-smc-textura="cruces"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2724%27%20height=%2724%27%20viewBox=%270%200%2024%2024%27%3E%3Cpath%20d=%27M12%208v8M8%2012h8%27%20stroke=%27%2314171F%27%20stroke-opacity=%27.16%27%20stroke-width=%271.2%27%20stroke-linecap=%27round%27/%3E%3C/svg%3E"); background-size: 24px 24px; } .smc-textura-mini[data-smc-textura="rombos"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2728%27%20height=%2728%27%20viewBox=%270%200%2028%2028%27%3E%3Cpath%20d=%27M14%202l12%2012-12%2012L2%2014z%27%20fill=%27none%27%20stroke=%27%2314171F%27%20stroke-opacity=%27.09%27%20stroke-width=%271.1%27/%3E%3C/svg%3E"); background-size: 28px 28px; } .smc-textura-mini[data-smc-textura="escamas"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2732%27%20height=%2720%27%20viewBox=%270%200%2032%2020%27%3E%3Cpath%20d=%27M0%2020a16%2016%200%200%201%2032%200M-16%2010a16%2016%200%200%201%2032%200M16%2010a16%2016%200%200%201%2032%200%27%20fill=%27none%27%20stroke=%27%2314171F%27%20stroke-opacity=%27.10%27%20stroke-width=%271.1%27/%3E%3C/svg%3E"); background-size: 32px 20px; } .smc-textura-mini[data-smc-textura="triangulos"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2730%27%20height=%2726%27%20viewBox=%270%200%2030%2026%27%3E%3Cpath%20d=%27M15%203l12%2020H3z%27%20fill=%27none%27%20stroke=%27%2314171F%27%20stroke-opacity=%27.09%27%20stroke-width=%271.1%27/%3E%3C/svg%3E"); background-size: 30px 26px; } .smc-textura-mini[data-smc-textura="circulos"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2736%27%20height=%2736%27%20viewBox=%270%200%2036%2036%27%3E%3Ccircle%20cx=%2718%27%20cy=%2718%27%20r=%2712%27%20fill=%27none%27%20stroke=%27%2314171F%27%20stroke-opacity=%27.09%27%20stroke-width=%271.1%27/%3E%3Ccircle%20cx=%2718%27%20cy=%2718%27%20r=%275%27%20fill=%27none%27%20stroke=%27%2314171F%27%20stroke-opacity=%27.09%27%20stroke-width=%271.1%27/%3E%3C/svg%3E"); background-size: 36px 36px; } .smc-textura-mini[data-smc-textura="topografia"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%27120%27%20height=%27120%27%20viewBox=%270%200%20120%20120%27%3E%3Cg%20fill=%27none%27%20stroke=%27%2314171F%27%20stroke-opacity=%27.10%27%20stroke-width=%271.1%27%3E%3Cpath%20d=%27M0%2030c20-14%2040%2014%2060%200s40-14%2060%200%27/%3E%3Cpath%20d=%27M0%2060c20-14%2040%2014%2060%200s40-14%2060%200%27/%3E%3Cpath%20d=%27M0%2090c20-14%2040%2014%2060%200s40-14%2060%200%27/%3E%3Cpath%20d=%27M0%20118c20-14%2040%2014%2060%200s40-14%2060%200%27/%3E%3C/g%3E%3C/svg%3E"); background-size: 120px 120px; } .smc-textura-mini[data-smc-textura="aurora"] { background-image: radial-gradient(circle at 15% 8%, color-mix(in srgb, var(--smc-acento,#2554EB) 22%, transparent), transparent 46%), radial-gradient(circle at 88% 38%, color-mix(in srgb, var(--smc-acento,#2554EB) 16%, transparent), transparent 44%), radial-gradient(circle at 30% 85%, color-mix(in srgb, var(--smc-acento,#2554EB) 14%, transparent), transparent 48%); } .smc-textura-mini[data-smc-textura="amanecer"] { background-image: linear-gradient(180deg, rgba(255,183,120,.30) 0%, rgba(255,140,170,.22) 40%, rgba(160,140,255,.16) 100%); } .smc-textura-mini[data-smc-textura="atardecer"] { background-image: linear-gradient(180deg, rgba(255,120,90,.26) 0%, rgba(214,70,140,.22) 45%, rgba(90,60,200,.20) 100%); } .smc-textura-mini[data-smc-textura="oceano"] { background-image: linear-gradient(180deg, rgba(56,189,248,.24) 0%, rgba(37,99,235,.18) 50%, rgba(20,184,166,.20) 100%); } .smc-textura-mini[data-smc-textura="menta"] { background-image: radial-gradient(circle at 10% 10%, rgba(52,211,153,.30), transparent 50%), radial-gradient(circle at 90% 70%, rgba(110,231,183,.26), transparent 52%); } .smc-textura-mini[data-smc-textura="lavanda"] { background-image: radial-gradient(circle at 85% 8%, rgba(167,139,250,.32), transparent 50%), radial-gradient(circle at 10% 75%, rgba(244,114,182,.20), transparent 52%); } .smc-textura-mini[data-smc-textura="malla"] { background-image: radial-gradient(circle at 12% 12%, rgba(255,107,129,.26), transparent 42%), radial-gradient(circle at 88% 20%, rgba(94,129,255,.26), transparent 44%), radial-gradient(circle at 20% 88%, rgba(45,212,191,.24), transparent 44%), radial-gradient(circle at 85% 85%, rgba(250,204,21,.24), transparent 42%); } .smc-textura-mini[data-smc-textura="neon"] { background-image: radial-gradient(circle at 0% 30%, rgba(236,72,153,.30), transparent 45%), radial-gradient(circle at 100% 65%, rgba(34,211,238,.30), transparent 45%); } .smc-textura-mini[data-smc-textura="prisma"] { background-image: conic-gradient(from 210deg at 50% 38%, rgba(255,107,129,.20), rgba(250,204,21,.18), rgba(52,211,153,.18), rgba(56,189,248,.20), rgba(167,139,250,.20), rgba(255,107,129,.20)); } .smc-textura-mini[data-smc-textura="confeti"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2770%27%20height=%2770%27%20viewBox=%270%200%2070%2070%27%3E%3Cg%3E%3Ccircle%20cx=%279%27%20cy=%2711%27%20r=%272.2%27%20fill=%27%23F43F5E%27%20fill-opacity=%27.45%27/%3E%3Ccircle%20cx=%2740%27%20cy=%277%27%20r=%271.8%27%20fill=%27%23FACC15%27%20fill-opacity=%27.6%27/%3E%3Ccircle%20cx=%2762%27%20cy=%2724%27%20r=%272.2%27%20fill=%27%2338BDF8%27%20fill-opacity=%27.5%27/%3E%3Ccircle%20cx=%2724%27%20cy=%2736%27%20r=%271.8%27%20fill=%27%2334D399%27%20fill-opacity=%27.55%27/%3E%3Ccircle%20cx=%2752%27%20cy=%2752%27%20r=%272.2%27%20fill=%27%23A78BFA%27%20fill-opacity=%27.5%27/%3E%3Ccircle%20cx=%2710%27%20cy=%2760%27%20r=%271.8%27%20fill=%27%23FB923C%27%20fill-opacity=%27.55%27/%3E%3Crect%20x=%2734%27%20y=%2726%27%20width=%275%27%20height=%272%27%20rx=%271%27%20fill=%27%23F43F5E%27%20fill-opacity=%27.4%27%20transform=%27rotate(35%2036%2027)%27/%3E%3Crect%20x=%2714%27%20y=%2730%27%20width=%275%27%20height=%272%27%20rx=%271%27%20fill=%27%2338BDF8%27%20fill-opacity=%27.45%27%20transform=%27rotate(-30%2016%2031)%27/%3E%3Crect%20x=%2758%27%20y=%2762%27%20width=%275%27%20height=%272%27%20rx=%271%27%20fill=%27%2334D399%27%20fill-opacity=%27.45%27%20transform=%27rotate(60%2060%2063)%27/%3E%3C/g%3E%3C/svg%3E"); background-size: 70px 70px; } .smc-textura-mini[data-smc-textura="burbujas"] { background-image: radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--smc-acento,#2554EB) 14%, transparent) 0 28px, transparent 29px), radial-gradient(circle at 78% 30%, rgba(236,72,153,.12) 0 44px, transparent 45px), radial-gradient(circle at 35% 70%, rgba(34,211,238,.14) 0 36px, transparent 37px), radial-gradient(circle at 85% 88%, rgba(250,204,21,.16) 0 30px, transparent 31px); } .smc-textura-mini[data-smc-textura="bruma"] { background-image: linear-gradient(180deg, color-mix(in srgb, var(--smc-acento,#2554EB) 18%, transparent) 0%, transparent 70%); } /* Menú desplegable de texturas */ .smc-textura-menu { margin-top: 10px; border: 1px solid #E3E5EA; border-radius: 12px; background: #FFFFFF; max-width: 420px; } .smc-textura-menu > summary { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 700; color: #14171F; } .smc-textura-menu > summary::-webkit-details-marker { display: none; } .smc-textura-menu > summary .smc-textura-mini { width: 44px; height: 34px; flex: 0 0 44px; border-radius: 8px; border: 1px solid #E3E5EA; background-color: #FFFFFF; } .smc-textura-menu__nombre { flex: 1; } .smc-textura-menu > summary svg { flex: 0 0 14px; width: 14px; height: 14px; color: #8A8F9C; transition: transform .2s; } .smc-textura-menu[open] > summary svg { transform: rotate(180deg); } .smc-textura-menu__lista { padding: 4px 12px 14px; border-top: 1px solid #EEF0F3; max-height: 340px; overflow-y: auto; } .smc-textura-menu__grupo { display: block; margin: 12px 0 0; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8A8F9C; } /* Oscurecer la foto: 4 botones caben en una línea */ label[for="smc_osc_normal"], label[for="smc_osc_suave"], label[for="smc_osc_minimo"], label[for="smc_osc_blur"] { padding: 0 4px !important; font-size: 11px !important; } .smc-opciones-fila label[for="smc_osc_blur"] { font-size: 10.5px !important; letter-spacing: -.01em; padding: 0 2px !important; } /* Color del velo */ .smc-velo-color { margin-top: 10px; max-width: 360px; } .smc-velo-color__texto { flex: 1; font-size: 12.5px; font-weight: 700; color: #6B6E76; } .smc-velo-color__reset { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #E3E0D8; background: #FFFFFF; color: #6B6E76; cursor: pointer; padding: 0; } .smc-velo-color__reset:hover { color: #14171F; background: #F2F3F5; } /* Catálogo: cada campo se muestra solo para su tipo (data-smc-tipo en la tarjeta Catálogo) */ .smc-card[data-smc-tipo] .smc-cat-solo { display: none !important; } .smc-card[data-smc-tipo="servicios"] .smc-cat-solo--servicios, .smc-card[data-smc-tipo="productos"] .smc-cat-solo--productos, .smc-card[data-smc-tipo="menu"] .smc-cat-solo--menu, .smc-card[data-smc-tipo="propiedades"] .smc-cat-solo--propiedades, .smc-card[data-smc-tipo="autos"] .smc-cat-solo--autos { display: block !important; } .smc-card[data-smc-tipo="servicios"] span.smc-cat-solo--servicios, .smc-card[data-smc-tipo="productos"] span.smc-cat-solo--productos, .smc-card[data-smc-tipo="menu"] span.smc-cat-solo--menu, .smc-card[data-smc-tipo="propiedades"] span.smc-cat-solo--propiedades, .smc-card[data-smc-tipo="autos"] span.smc-cat-solo--autos { display: inline !important; } /* Solicitudes */ .smc-sol-filtros { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 14px; } .smc-sol-filtros button { border: 1px solid #E3E5EA; background: #fff; color: #5B6270; border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; } .smc-sol-filtros button.is-activo { background: #14171F; color: #fff; border-color: #14171F; } .smc-sol-lista { padding: 6px 20px; } .smc-sol-vacio { color: #8A91A0; font-size: 14px; padding: 22px 0; margin: 0; text-align: center; } .smc-sol-fila { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid #F2F3F5; } .smc-sol-fila:last-child { border-bottom: 0; } .smc-sol-chip { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 4px 9px; border-radius: 8px; background: #F2F3F5; color: #5B6270; flex: none; min-width: 64px; text-align: center; } .smc-sol-chip--cita { background: #E8F0FE; color: #2F5FD0; } .smc-sol-chip--pedido { background: #E7F6EE; color: #1D9A5B; } .smc-sol-chip--contacto { background: #FFF1E0; color: #B86A10; } .smc-sol-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .smc-sol-cuerpo strong { font-size: 14.5px; color: #14171F; } .smc-sol-meta { font-size: 12.5px; color: #8A91A0; } .smc-sol-detalle { font-size: 13px; color: #3A4150; margin-top: 4px; white-space: normal; word-break: break-word; } .smc-sol-estado { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: #F2F3F5; color: #5B6270; flex: none; } .smc-sol-estado--pendiente, .smc-sol-estado--nueva { background: #FFF1E0; color: #B86A10; } .smc-sol-estado--confirmada, .smc-sol-estado--atendida { background: #E7F6EE; color: #1D9A5B; } .smc-sol-estado--cancelada { background: #FDECEA; color: #C7382C; } .smc-sol-acciones { display: flex; gap: 6px; flex: none; } .smc-sol-icono { width: 32px; height: 32px; border-radius: 9px; border: 1px solid #E3E5EA; background: #fff; color: #5B6270; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; text-decoration: none; } .smc-sol-icono:hover { color: #14171F; border-color: #C9CDD6; } @media (max-width: 640px) { .smc-sol-fila { flex-wrap: wrap; } .smc-sol-cuerpo { flex-basis: calc(100% - 90px); } .smc-sol-acciones { margin-left: auto; } } .smc-vista-previa__pie-botones { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .smc-boton--guardar { background: var(--smc-accent, #2554EB) !important; color: #fff !important; border-color: transparent !important; cursor: pointer; } /* Analítica por período */ .smc-an-controles { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .smc-an-segmento { display: inline-flex; border: 1px solid #E3E5EA; border-radius: 12px; padding: 3px; background: #fff; } .smc-an-segmento a { padding: 7px 16px; border-radius: 9px; font-size: 13px; font-weight: 700; color: #6B6E76; text-decoration: none; } .smc-an-segmento a.is-activo { background: #14171F; color: #fff; } .smc-an-descargas { display: inline-flex; gap: 6px; } .smc-an-descarga { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid #E3E5EA; border-radius: 10px; background: #fff; color: #3A4150; font-size: 12.5px; font-weight: 700; text-decoration: none; } .smc-an-descarga:hover { border-color: #C9CDD6; color: #14171F; } .smc-an-rango { font-size: 12.5px; color: #8A8D94; margin: 4px 0 14px; } .smc-analitica-metricas--6 { grid-template-columns: repeat(3, 1fr); } .smc-metrica-card { position: relative; } .smc-metrica-card__icono { position: absolute; right: 16px; top: 16px; opacity: .8; } .smc-desglose-clics__total small { font-weight: 600; color: #8A8D94; font-size: 11px; } .smc-an-tabla-caja { max-height: 260px; overflow: auto; margin-top: 10px; } .smc-an-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; } .smc-an-tabla th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #8A8D94; padding: 6px 8px; position: sticky; top: 0; background: #fff; } .smc-an-tabla td { padding: 7px 8px; border-top: 1px solid #F2F3F5; color: #14171F; } @media (max-width: 720px) { .smc-analitica-metricas--6 { grid-template-columns: repeat(2, 1fr); } .smc-an-controles { justify-content: flex-start; margin-top: 12px; } } /* Resumen mejorado */ .smc-rs-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .smc-rs-kpi { padding: 16px 18px; } .smc-rs-kpi__top { display: flex; align-items: center; justify-content: space-between; } .smc-rs-kpi__et { font-size: 11.5px; font-weight: 700; color: #8A8D94; text-transform: uppercase; letter-spacing: .06em; } .smc-rs-kpi__valor { font-size: 28px; font-weight: 800; color: #14171F; margin-top: 8px; display: flex; align-items: baseline; gap: 8px; } .smc-rs-kpi__cambio { font-size: 12px; font-weight: 700; } .smc-rs-kpi__sub { font-size: 11.5px; color: #8A8D94; margin-top: 2px; } .smc-rs-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; } .smc-rs-contador { display: inline-block; min-width: 20px; padding: 1px 7px; margin-left: 6px; border-radius: 999px; background: #FFF1E0; color: #B86A10; font-size: 11.5px; font-weight: 800; text-align: center; } .smc-rs-lista { margin-top: 8px; } .smc-rs-fila { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid #F2F3F5; } .smc-rs-fila:first-child { border-top: 0; } .smc-rs-fila__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .smc-rs-fila__txt strong { font-size: 13.5px; color: #14171F; } .smc-rs-fila__txt span { font-size: 12px; color: #8A8D94; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .smc-rs-link { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 8px 8px 12px; border: 1px solid #ECEDF0; border-radius: 12px; background: #F8F9FB; } .smc-rs-link__url { flex: 1; min-width: 0; font-size: 13px; color: #3A4150; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .smc-rs-progreso { margin-top: 16px; } .smc-rs-progreso__fila { display: flex; justify-content: space-between; font-size: 12.5px; color: #6B6E76; margin-bottom: 6px; } .smc-rs-progreso__fila strong { color: #14171F; } .smc-rs-progreso__barra { height: 7px; border-radius: 999px; background: #F0F1F4; overflow: hidden; } .smc-rs-progreso__barra div { height: 100%; border-radius: 999px; } .smc-rs-checks { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; } .smc-rs-checks li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #8A8D94; } .smc-rs-checks li span { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #D5D8DF; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; flex: none; } .smc-rs-checks li.ok { color: #3A4150; } .smc-rs-checks li.ok span { background: #1D9A5B; border-color: #1D9A5B; } @media (max-width: 900px) { .smc-rs-kpis { grid-template-columns: repeat(2, 1fr); } .smc-rs-dos { grid-template-columns: 1fr; } } /* Insignia de pendientes en el menú: píldora con el color de acento (mockup panel-cliente) */ .smc-sidebar__insignia { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; padding: 1px 8px; border: 0; border-radius: 999px; background: var(--smc-accent, #2554EB); color: #fff; font-size: 11px; font-weight: 700; line-height: 1.5; height: auto; } .smc-sidebar__insignia::before, .smc-sidebar__insignia::after { content: none; } .smc-sidebar__insignia b { display: inline; min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; color: inherit; font-size: inherit; font-weight: 700; line-height: inherit; } /* Cuenta */ .smc-cuenta-aviso { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; } .smc-cuenta-aviso--ok { background: #E6F6EC; color: #1D9A5B; } .smc-cuenta-aviso--mal { background: #FDECEC; color: #C0343A; } .smc-panel .smc-cuenta-plan__fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; } .smc-cuenta-plan__nombre { font-size: 20px; font-weight: 800; color: #14171F; } .smc-cuenta-plan__sub { font-size: 12.5px; color: #6B6E76; margin-top: 2px; } .smc-cuenta-plan__precio { font-size: 15px; font-weight: 700; color: var(--smc-accent, #2E7BD6); white-space: nowrap; } .smc-cuenta-plan__acciones, .smc-cuenta-guardar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .smc-panel a.smc-cuenta-boton, .smc-panel button.smc-cuenta-boton { display: inline-block !important; background: var(--smc-accent, #2E7BD6) !important; color: #fff !important; border: 1px solid transparent !important; border-radius: 10px !important; padding: 9px 16px !important; font-size: 13px !important; font-weight: 700 !important; text-decoration: none !important; cursor: pointer; line-height: 1.2 !important; box-shadow: none !important; } .smc-panel a.smc-cuenta-boton--suave { background: #fff !important; color: #14171F !important; border-color: #D9DBE1 !important; } .smc-cuenta-hero { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 22px 24px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, var(--smc-accent, #2E7BD6), #14171F 140%); margin-bottom: 8px; } .smc-cuenta-hero__etq { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .75; } .smc-cuenta-hero__nombre { font-size: 28px; font-weight: 800; margin-top: 4px; line-height: 1.1; } .smc-cuenta-hero__sub { font-size: 13px; opacity: .85; margin-top: 4px; } .smc-cuenta-hero__precio { font-size: 16px; font-weight: 700; background: rgba(255,255,255,.18); padding: 8px 14px; border-radius: 999px; white-space: nowrap; } .smc-cuenta-h2 { font-size: 15px; font-weight: 800; color: #14171F; margin: 22px 0 10px; } .smc-cuenta-planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; } .smc-cuenta-plancard { position: relative; background: #fff; border: 1px solid #E3E5EA; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; } .smc-cuenta-plancard.is-recomendado { border: 2px solid var(--smc-accent, #2E7BD6); } .smc-cuenta-plancard__tag { position: absolute; top: -10px; right: 16px; background: var(--smc-accent, #2E7BD6); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; } .smc-cuenta-plancard__nombre { font-size: 17px; font-weight: 800; color: #14171F; } .smc-cuenta-plancard__precio { font-size: 22px; font-weight: 800; color: var(--smc-accent, #2E7BD6); margin-top: 2px; } .smc-cuenta-plancard__sub { font-size: 12.5px; color: #6B6E76; margin-top: 2px; } .smc-cuenta-plancard ul { list-style: none; margin: 14px 0 18px; padding: 0; flex: 1; } .smc-cuenta-plancard li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: #14171F; padding: 4px 0; } .smc-cuenta-plancard li svg { color: #1D9A5B; flex: none; margin-top: 3px; } .smc-cuenta-plancard form { margin: 0; } .smc-cuenta-plancard .smc-cuenta-boton { width: 100%; text-align: center; box-sizing: border-box; } .smc-cuenta-nota { font-size: 12.5px; color: #6B6E76; margin: 12px 0 0; } .smc-cuenta-nota a { color: var(--smc-accent, #2E7BD6); font-weight: 700; } @media (max-width: 640px) { .smc-cuenta-hero { flex-direction: column; align-items: flex-start; } } .smc-sidebar__marca-logo { display: block; height: 40px; width: auto; max-width: 180px; object-fit: contain; } /* Responsive: nada debe desbordar el ancho de la pantalla */ .smc-panel__contenido { max-width: 100%; box-sizing: border-box; } .smc-panel__main { min-width: 0; } .smc-panel__contenido > *, .smc-rs-kpis > *, .smc-rs-dos > *, .smc-analitica-metricas > *, .smc-cuenta-planes > * { min-width: 0; max-width: 100%; box-sizing: border-box; } .smc-panel__contenido .smc-card { overflow-wrap: anywhere; } .smc-rs-link__url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 720px) { .smc-panel__contenido { padding-left: 16px !important; padding-right: 16px !important; } .smc-resumen-cabecera { flex-direction: column; align-items: stretch !important; gap: 12px; } .smc-an-controles { flex-wrap: wrap; width: 100%; } .smc-rs-checks { grid-template-columns: 1fr !important; } .smc-titulo { font-size: 22px; } .smc-grafica__cabeza { flex-wrap: wrap; gap: 4px; } } @media (max-width: 420px) { .smc-rs-kpis, .smc-analitica-metricas { grid-template-columns: 1fr 1fr !important; gap: 10px; } .smc-rs-kpi__valor { font-size: 24px; } } .smc-an-tabla th, .smc-an-tabla td { white-space: nowrap; } @media (max-width: 720px) { .smc-an-tabla { font-size: 12.5px; } .smc-an-tabla th, .smc-an-tabla td { padding-left: 6px !important; padding-right: 6px !important; } .smc-an-tabla th { font-size: 10px; letter-spacing: 0; } } /* Selector de color (mismo en todo el panel): círculo limpio */ .smc-panel input[type=color], .smc-diseno__sw input[type=color] { -webkit-appearance: none; appearance: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(20,23,31,.18); overflow: hidden; flex-shrink: 0; } .smc-panel input[type=color]::-webkit-color-swatch-wrapper { padding: 0; } .smc-panel input[type=color]::-webkit-color-swatch { border: 0; border-radius: 50%; } .smc-panel input[type=color]::-moz-color-swatch { border: 0; border-radius: 50%; } .smc-panel .smc-campo-color input[type=color] { width: 40px; height: 40px; box-shadow: inset 0 0 0 1px rgba(20,23,31,.18); } .smc-diseno__sw input[type=color].is-vacio { background: conic-gradient(#F87171, #FBBF24, #34D399, #60A5FA, #A78BFA, #F87171); } .smc-diseno__sw input[type=color].is-vacio::-webkit-color-swatch { opacity: 0; } /* Diseño (admin) */ .smc-diseno__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-top: 10px; align-items: start; } .smc-diseno__bloque { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .smc-diseno__campo { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 700; color: #6B6E76; min-width: 0; } .smc-diseno__campo small { font-weight: 500; color: #9A9DA5; } .smc-diseno__campo--ancho { grid-column: 1 / -1; } .smc-diseno__campo b { float: right; color: #17181C; } .smc-diseno__campo select, .smc-diseno__fila select { width: 100%; height: 40px; border: 1px solid #E3E0D8; border-radius: 10px; padding: 0 10px; font-size: 13px; background: #fff; } .smc-diseno__tipo { display: flex; align-items: center; gap: 10px; } .smc-diseno__tipo select { flex: 1; min-width: 0; } .smc-diseno__tipo .smc-diseno__color { flex: 0 0 150px; } .smc-diseno__color input[type=text] { min-width: 0; width: 100%; text-transform: uppercase; } .smc-diseno__color input[type=color].is-vacio { background: conic-gradient(#F87171, #FBBF24, #34D399, #60A5FA, #A78BFA, #F87171); } .smc-diseno__color input[type=color].is-vacio::-webkit-color-swatch { opacity: 0; } .smc-diseno__tipo--cat { align-items: flex-end; gap: 32px; margin: 0 0 12px; } .smc-diseno__tipo--cat .smc-campo { margin: 0; } .smc-diseno__conetq { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #6B6E76; text-align: center; } .smc-diseno__conetq .smc-diseno__color { width: 150px; } .smc-diseno__ib { width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #E3E0D8 !important; background: #fff !important; color: #5B5E66 !important; border-radius: 9px !important; padding: 0 !important; cursor: pointer; } .smc-diseno__plantillas { margin-top: 16px; border-top: 1px solid #F1F2F5; padding-top: 12px; } .smc-diseno__sub { font-size: 12px; font-weight: 700; color: #17181C; } .smc-diseno__fila { display: flex; gap: 8px; margin-top: 8px; } @media (max-width: 560px) { .smc-diseno__rejilla { grid-template-columns: 1fr; } .smc-diseno__tipo--cat { flex-wrap: wrap; gap: 14px; } } /* ===== Selector de color: sutil y uniforme en todo el panel ===== */ .smc-panel .smc-campo-color { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 3px 10px 3px 4px; border: 1px solid #E3E0D8; border-radius: 999px; background: #fff; max-width: none; width: auto; } .smc-panel .smc-campo-color input[type=color], .smc-panel .smc-diseno__color input[type=color] { width: 24px; height: 24px; box-shadow: inset 0 0 0 1px rgba(20,23,31,.18); } .smc-panel .smc-campo-color input[type=text] { flex: none; width: 74px; padding: 3px 0; border: 0; background: none; font-size: 12.5px; font-weight: 600; color: #3A3D45; text-transform: uppercase; box-shadow: none; } .smc-panel .smc-velo-color { max-width: none; } .smc-panel .smc-velo-color__texto { flex: none; font-size: 12.5px; font-weight: 600; color: #3A3D45; } .smc-panel .smc-velo-color__reset { width: 22px; height: 22px; border: 0 !important; background: none !important; color: #9A9DA5 !important; } .smc-panel .smc-diseno__tipo .smc-diseno__color { flex: none; } .smc-panel .smc-diseno__tipo--cat { align-items: flex-end; gap: 28px; flex-wrap: wrap; } .smc-panel .smc-diseno__conetq { align-items: flex-start; text-align: left; gap: 0; } .smc-panel .smc-diseno__conetq .smc-diseno__color { width: auto; margin-top: 5px; } .smc-panel .smc-diseno__conetq > span { font-size: 12px; font-weight: 700; color: #6B6E76; } /* Menú lateral: más aire a la izquierda */ .smc-panel .smc-sidebar__nav { padding: 8px 20px 8px 24px !important; } .smc-panel .smc-sidebar__cuenta { margin: 6px 20px 0 24px !important; } .smc-panel .smc-sidebar__idioma { padding: 12px 24px 18px !important; } /* Menú lateral: contenido bien separado del borde izquierdo */ .smc-panel .smc-sidebar { flex-basis: 280px; } .smc-panel .smc-sidebar__marca { padding: 26px 20px 22px 32px !important; } .smc-panel .smc-sidebar__nav { padding: 8px 18px 8px 28px !important; } .smc-panel .smc-sidebar__nav a { padding: 10px 14px 10px 16px !important; } .smc-panel .smc-sidebar__cuenta { margin: 6px 18px 0 28px !important; padding-left: 4px; } .smc-panel .smc-sidebar__idioma { padding: 12px 18px 18px 32px !important; } @media (max-width: 820px) { .smc-panel .smc-sidebar { flex-basis: auto; width: 304px; } } /* Selectores de color de Diseño: pequeños (no ocupan todo el ancho) */ .smc-panel .smc-diseno__campo .smc-campo-color, .smc-panel .smc-diseno__conetq .smc-campo-color { align-self: flex-start; width: auto; } .smc-panel .smc-diseno__tipo .smc-campo-color { flex: none; } .smc-panel .smc-diseno__campo .smc-campo-color input[type=text] { width: 70px; } /* Traductor de Google oculto: solo se usa su motor (5 oct 2026). */ .smc-traductor-oculto { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; } .goog-te-banner-frame, .skiptranslate > iframe, #goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip { display: none !important; } body { top: 0 !important; } .smc-panel [data-smc-escanear-sellar][hidden], .smc-panel [data-smc-escanear-canjear][hidden], .smc-panel [data-smc-escanear-cupones][hidden], .smc-panel [data-smc-escanear-monedero][hidden], .smc-panel [data-smc-escanear-compra][hidden], .smc-panel [data-smc-escanear-puntos-canjear][hidden] { display: none !important; } /* 0.1.223 — Escanear cliente: escenario oscuro del mockup Negocio-Escanear, dentro del panel claro. */ .smc-esc { max-width: 440px; background: #0D0F14; color: #FFFFFF; border-radius: 26px; padding: 22px; box-shadow: 0 24px 50px -28px rgba(13,15,20,.55); } .smc-esc * { box-sizing: border-box; } .smc-esc__visor { position: relative; width: 100%; max-width: 300px; aspect-ratio: 1; margin: 6px auto 0; border-radius: 20px; overflow: hidden; background: #161922; } .smc-esc__visor video { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; } .smc-esc__vacio { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 0; } .smc-esc__esq { position: absolute; width: 38px; height: 38px; z-index: 2; border: 0 solid var(--esc); } .smc-esc__esq--a { top: 12px; left: 12px; border-top-width: 4px; border-left-width: 4px; border-radius: 12px 0 0 0; } .smc-esc__esq--b { top: 12px; right: 12px; border-top-width: 4px; border-right-width: 4px; border-radius: 0 12px 0 0; } .smc-esc__esq--c { bottom: 12px; left: 12px; border-bottom-width: 4px; border-left-width: 4px; border-radius: 0 0 0 12px; } .smc-esc__esq--d { bottom: 12px; right: 12px; border-bottom-width: 4px; border-right-width: 4px; border-radius: 0 0 12px 0; } .smc-esc__tit { text-align: center; font-size: 16px; font-weight: 800; margin-top: 20px; } .smc-esc__sub { text-align: center; font-size: 12.5px; color: rgba(255,255,255,.55); margin: 6px auto 0; max-width: 300px; line-height: 1.45; } .smc-esc__buscar { display: flex; gap: 8px; margin-top: 18px; } .smc-esc input[type=text], .smc-esc input[type=number] { flex: 1; min-width: 0; background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 12px !important; color: #FFFFFF !important; padding: 12px 14px !important; font-size: 13.5px !important; } .smc-esc input::placeholder { color: rgba(255,255,255,.4) !important; } .smc-esc .smc-boton { background: rgba(255,255,255,.1) !important; color: #FFFFFF !important; border-radius: 12px !important; } .smc-esc .smc-boton--acento { background: var(--esc) !important; } .smc-esc__resultados { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .smc-esc__resultados[hidden] { display: none; } .smc-esc__resultados .smc-boton { width: 100%; text-align: left; white-space: normal; } .smc-esc__vidrio { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 16px; } .smc-esc__persona { display: flex; align-items: center; gap: 12px; } .smc-esc__avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--esc); display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; flex-shrink: 0; } .smc-esc__nombre { font-size: 16px; font-weight: 800; } .smc-esc__miembro { font-size: 11.5px; color: rgba(255,255,255,.5); margin-top: 2px; } .smc-esc__etq { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.45); } .smc-esc__estado { font-size: 22px; font-weight: 800; margin-top: 6px; } .smc-esc__estado-sub { font-size: 12.5px; color: rgba(255,255,255,.55); margin-top: 4px; } .smc-esc__fila { display: flex; gap: 8px; margin-top: 8px; } .smc-esc__grande { display: flex; width: 100%; align-items: center; justify-content: center; margin-top: 16px; padding: 16px; border-radius: 16px !important; border: none !important; background: var(--esc) !important; color: #FFFFFF !important; font-size: 14.5px; font-weight: 800; cursor: pointer; } .smc-esc__grande[hidden] { display: none !important; } .smc-esc__suave { display: block; width: 100%; margin-top: 10px; padding: 13px; border-radius: 14px !important; border: none !important; background: rgba(255,255,255,.1) !important; color: #FFFFFF !important; font-size: 13.5px; font-weight: 700; cursor: pointer; } .smc-esc__suave[hidden] { display: none !important; } .smc-esc__listo { text-align: center; padding: 20px 0 6px; } .smc-esc__check { width: 72px; height: 72px; border-radius: 50%; background: var(--esc); display: flex; align-items: center; justify-content: center; margin: 0 auto; } .smc-esc__error { margin-top: 14px; background: rgba(255,255,255,.08); border-radius: 12px; padding: 12px 14px; font-size: 12.5px; color: #FFD9A8; line-height: 1.45; } .smc-esc__error[hidden] { display: none; } /* Programa: formulario + vista previa en vivo */ .smc-prog { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; align-items: start; } .smc-prog__prev { position: sticky; top: 20px; } .smc-prev { border-radius: 20px; padding: 16px; transition: background .2s; } .smc-prev__fila { display: flex; align-items: center; gap: 10px; } .smc-prev__logo { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.18) center/contain no-repeat; flex-shrink: 0; } .smc-prev__nombre { font-size: 15px; font-weight: 800; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .smc-prev__cont { font-size: 12px; opacity: .8; } .smc-prev__sellos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 14px; } .smc-prev__sello { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; } .smc-prev__sello svg { width: 56%; height: 56%; } .smc-prev__premio { font-size: 12px; margin-top: 12px; opacity: .85; } .smc-prev__bienv { font-size: 12px; margin-top: 8px; opacity: .7; font-style: italic; } @media (max-width: 1100px) { .smc-prog { grid-template-columns: 1fr; } .smc-prog__prev { position: static; order: -1; } } /* Franja de administrador (0.1.228): arriba, no abajo. */ .smc-franja-admin { position: sticky; top: 0; z-index: 70; background: #14171F; color: #fff; padding: 11px 20px; font-size: 13px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .smc-franja-admin a { color: #F3D3A8 !important; font-weight: 800; text-decoration: none; white-space: nowrap; } /* ===================================================================================== Panel de Lealtad 0.1.231 — copia de los mockups P1–P12 (naranja #D97706, fondo cálido). Todo cuelga de .smc-panel--ly para no tocar el panel de Tarjetas. ===================================================================================== */ .smc-panel--ly { background: #FBF9F6; color: #1C1917; } .smc-panel--ly .smc-sidebar { flex: 0 0 262px; width: 262px; background: #fff; border-right: 1px solid #ECE7E0; } .smc-panel--ly .smc-sidebar__marca { padding: 22px 20px 20px; } .smc-panel--ly .smc-sidebar__marca-texto { font-size: 16px; font-weight: 800; color: #1C1917; } .smc-panel--ly .smc-sidebar__nav { padding: 0 14px; gap: 4px; } .smc-panel--ly .smc-sidebar__nav a { gap: 12px; padding: 11px 14px; border-radius: 12px; color: #57534E; font-size: 14.5px; font-weight: 700; } .smc-panel--ly .smc-sidebar__nav a:hover { background: #FBF3E8; } .smc-panel--ly .smc-sidebar__nav a.activo { background: #FDF1E3; color: #D97706; } .ly-nav-etq { font-size: 10.5px; letter-spacing: .14em; color: #A8A29E; font-weight: 700; padding: 0 14px 8px; } .smc-panel--ly .smc-sidebar__cuenta { border-top: 1px solid #ECE7E0; margin: 6px 14px 14px; padding: 14px 8px 0; } .smc-panel--ly .smc-sidebar__avatar { width: 34px; height: 34px; border-radius: 10px; background: #D97706; color: #fff; font-size: 13px; font-weight: 800; } .smc-panel--ly .smc-sidebar__cuenta-nombre { font-size: 13px; font-weight: 800; color: #1C1917; } .smc-panel--ly .smc-sidebar__cuenta-salir { font-size: 11.5px; color: #78716C; } .smc-panel--ly .smc-panel__main { padding: 32px 40px 56px; max-width: 1180px; } .smc-panel--ly .smc-franja-admin { margin: 0; } .ly-pagina { color: #1C1917; } .ly-pagina b, .ly-pagina strong, .ly-modal b { font-weight: 700; } .ly-pagina h1 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: #1C1917; line-height: 1.15; } .ly-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .ly-head p { margin: 5px 0 0; font-size: 14px; color: #78716C; } .ly-head__t { display: flex; align-items: center; gap: 12px; } .ly-head__d { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .ly-mu { color: #78716C; } .ly-t { font-size: 15px; font-weight: 800; } .ly-s { font-size: 13px; color: #78716C; } .ly-etq { font-size: 12px; letter-spacing: .12em; color: #78716C; font-weight: 700; margin-bottom: 16px; } .ly-link { background: none !important; border: 0 !important; padding: 0 !important; font-size: 13px; font-weight: 700; color: #D97706 !important; cursor: pointer; text-decoration: none; } .ly-link:hover { text-decoration: underline !important; } .ly-acc { font-size: 12.5px; font-weight: 700; color: #D97706; } .ly-stack { display: flex; flex-direction: column; gap: 18px; } .ly-stack--10 { gap: 10px; } .ly-sep { border-top: 1px solid #ECE7E0; padding-top: 18px; } .ly-card { background: #fff; border: 1px solid #ECE7E0; border-radius: 18px; padding: 24px; box-shadow: 0 1px 2px rgba(28,25,23,.04), 0 14px 30px -20px rgba(28,25,23,.18); } .ly-card__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .ly-x { background: none !important; border: 0 !important; color: #78716C !important; cursor: pointer; padding: 4px; display: inline-flex; } /* Botones */ .smc-panel .ly-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 12px !important; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; text-decoration: none !important; border: 1px solid transparent !important; line-height: 1; } .smc-panel .ly-btn--p { background: #D97706 !important; color: #fff !important; border-color: #D97706 !important; } .smc-panel .ly-btn--p:hover { background: #C26A05 !important; } .smc-panel .ly-btn--s { background: #fff !important; color: #1C1917 !important; border-color: #E2DBD1 !important; } .smc-panel .ly-btn--s:hover { background: #FAF7F2 !important; } .smc-panel .ly-btn--g { background: transparent !important; color: #57534E !important; } .smc-panel .ly-btn--g:hover { background: #F1ECE4 !important; } .smc-panel .ly-btn--o { background: transparent !important; color: #fff !important; border-color: #57534E !important; } .smc-panel .ly-btn--peligro { background: #fff !important; color: #B42318 !important; border-color: #F3C9C9 !important; } .smc-panel .ly-btn--big { height: 48px; font-size: 14px; } .smc-panel .ly-btn--w { width: 100%; } .smc-panel .ly-btn[disabled] { opacity: .45; cursor: not-allowed; } /* Chips */ .ly-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 99px; padding: 5px 11px; font-size: 12px; font-weight: 700; white-space: nowrap; } .ly-chip i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: currentColor; } .ly-chip--ok { background: #E8F6EE; color: #1D9A5B; } .ly-chip--amb { background: #FEF3C7; color: #B45309; } .ly-chip--gris { background: #F1ECE4; color: #78716C; } .ly-chip--gris::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .ly-chip--pausa { background: #FEF3C7; color: #B45309; } .ly-av { border-radius: 50%; background: #D97706; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; } .ly-aviso { border-radius: 12px; padding: 11px 16px; font-size: 13.5px; font-weight: 600; margin: -8px 0 18px; } .ly-aviso--ok { background: #F3FBF6; border: 1px solid #CFE9DA; color: #166A40; } .ly-aviso--no { background: #FEF3F2; border: 1px solid #F3C9C9; color: #B42318; } /* Columnas */ .ly-dos { display: flex; gap: 20px; margin-bottom: 20px; align-items: flex-start; } .ly-dos > * { min-width: 0; } .ly-prevcol { width: 420px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; padding: 22px 24px 26px; } .ly-sharecol { flex: 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; } .ly-campo-ro { height: 46px; border: 1px solid #E2DBD1; border-radius: 12px; background: #fff; display: flex; align-items: center; gap: 10px; padding: 0 14px; font-size: 14px; color: #78716C; overflow: hidden; } .ly-campo-ro span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1C1917; } .ly-fila2 { display: flex; gap: 10px; margin-top: 12px; } .ly-fila2 .ly-btn { flex: 1; } .ly-mini3 { display: flex; gap: 12px; } .ly-mini { flex: 1; border: 1px solid #ECE7E0; border-radius: 14px; padding: 14px 16px; background: #fff; min-width: 0; } .ly-mini__l { font-size: 12.5px; color: #78716C; font-weight: 600; } .ly-mini__v { font-size: 26px; font-weight: 800; margin: 2px 0; } .ly-mini__s { font-size: 11.5px; color: #1D9A5B; font-weight: 700; } .ly-fila { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid #F3EEE7; } .ly-vacio { padding: 26px 20px; font-size: 13.5px; color: #78716C; text-align: center; } /* Primeros pasos */ .ly-pasos { margin-bottom: 20px; padding: 20px 24px; } .ly-pasos__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 10px; } .ly-pasos__fila { display: flex; gap: 14px; } .ly-paso { flex: 1; border: 1px solid #ECE7E0; border-radius: 14px; padding: 14px 16px; display: flex; gap: 12px; align-items: center; color: inherit; min-width: 0; } .ly-paso--hecho { border-color: #CFE9DA; background: #F3FBF6; } .ly-paso--act { border: 1.5px solid #D97706; background: #FDF1E3; } .ly-paso__n { width: 28px; height: 28px; border-radius: 50%; background: #D97706; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; flex-shrink: 0; } .ly-paso__n--ok { background: #1D9A5B; } .ly-paso__n--off { background: #EFE9E0; color: #A8A29E; } .ly-paso__t { font-size: 13.5px; font-weight: 800; } .ly-paso__s { font-size: 12px; color: #78716C; } /* Selector de tarjetas */ .ly-selector { position: relative; margin: -8px 0 20px; } .smc-panel .ly-selector__btn { display: inline-flex; align-items: center; gap: 10px; border: 1px solid #E2DBD1 !important; background: #fff !important; border-radius: 12px !important; height: 44px; padding: 0 14px; font-size: 14px; font-weight: 700; color: #1C1917 !important; cursor: pointer; } .ly-selector__mini { width: 26px; height: 26px; border-radius: 8px; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; background: #3B2616; } .ly-selector__mini--g { width: 34px; height: 34px; border-radius: 10px; font-size: 13px; } .ly-selector__panel { position: absolute; left: 0; top: 50px; width: 360px; max-width: 92vw; background: #fff; border: 1px solid #ECE7E0; border-radius: 16px; box-shadow: 0 24px 48px -16px rgba(28,25,23,.35); padding: 8px; z-index: 20; } .ly-selector__etq { font-size: 11px; letter-spacing: .12em; color: #A8A29E; font-weight: 700; padding: 8px 14px 6px; } .ly-selector__item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; color: #1C1917; } .ly-selector__item:hover, .ly-selector__item.on { background: #FDF1E3; } .ly-selector__item b { display: block; font-size: 14px; font-weight: 700; } .ly-selector__item small { display: block; font-size: 12px; color: #78716C; } .ly-selector__ck { width: 22px; height: 22px; border-radius: 50%; background: #D97706; display: flex; align-items: center; justify-content: center; } .smc-panel .ly-selector__nueva { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; background: none !important; border: 0 !important; color: #D97706 !important; font-weight: 800; font-size: 14px; cursor: pointer; text-align: left; } .ly-selector__nueva span { width: 34px; height: 34px; border-radius: 10px; border: 1.5px dashed #D97706; display: flex; align-items: center; justify-content: center; } /* Segmentados, tabs */ .ly-segm { display: inline-flex; gap: 2px; background: #F1ECE4; border-radius: 12px; padding: 4px; } .ly-segm button, .ly-segm a, .ly-segm--radio span { padding: 8px 16px; border-radius: 9px !important; font-size: 13px; font-weight: 700; background: transparent !important; color: #78716C !important; border: 0 !important; cursor: pointer; text-decoration: none; display: inline-block; line-height: 1.2; } .ly-segm button.on, .ly-segm a.on { background: #fff !important; color: #1C1917 !important; box-shadow: 0 1px 3px rgba(28,25,23,.12) !important; } .ly-segm--radio label { cursor: pointer; display: inline-block; } .ly-segm--radio input { position: absolute; opacity: 0; pointer-events: none; } .ly-segm--radio input:checked + span { background: #fff !important; color: #1C1917 !important; box-shadow: 0 1px 3px rgba(28,25,23,.12); } .ly-prevcol .ly-segm { margin-bottom: 18px; } .ly-tabs { display: flex; border-bottom: 1px solid #ECE7E0; margin: -4px 0 22px; flex-wrap: wrap; } .smc-panel .ly-tabs button { padding: 11px 4px; margin-right: 22px; font-size: 14px; font-weight: 600; color: #78716C !important; background: none !important; border: 0 !important; border-bottom: 2.5px solid transparent !important; border-radius: 0 !important; cursor: pointer; } .smc-panel .ly-tabs button.on { color: #1C1917 !important; font-weight: 800; border-bottom-color: #D97706 !important; } .smc-panel .ly-tabs--grande { margin: 0 0 22px; } .smc-panel .ly-tabs--grande button { padding: 12px 4px; margin-right: 28px; font-size: 15px; display: inline-flex; align-items: center; border-bottom-width: 3px !important; } .smc-panel .ly-tabs--grande button[disabled] { cursor: default; opacity: 1; } .ly-tabs em { margin-left: 8px; font-size: 10.5px; font-style: normal; background: #F1ECE4; color: #78716C; border-radius: 99px; padding: 2px 8px; font-weight: 700; } /* Tarjeta de Wallet (vista previa) */ .ly-wc { width: 300px; max-width: 100%; border-radius: 22px; padding: 22px; box-shadow: 0 18px 36px -16px rgba(28,25,23,.45); } .ly-wc--google { border-radius: 16px; } .ly-wc__cab { display: flex; align-items: center; gap: 10px; } .ly-wc__ini { width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; } .ly-wc__logo { width: 30px; height: 30px; border-radius: 9px; object-fit: cover; } .ly-wc__logo--h { width: auto; max-width: 100%; height: 34px; object-fit: contain; border-radius: 0; } .ly-wc__nom { font-size: 16px; font-weight: 700; } .ly-wc__tira { margin: 20px -22px 16px; padding: 0 22px; background-size: cover; background-position: center; } .ly-wc__tira.con-img { padding-top: 14px; padding-bottom: 14px; } .ly-wc__grid { display: grid; gap: 9px; } .ly-wc__s { aspect-ratio: 1/1; border-radius: 50%; border: 1.5px solid transparent; display: flex; align-items: center; justify-content: center; overflow: hidden; } .ly-wc__s--on { border-color: transparent; } .ly-wc__s img { width: 100%; height: 100%; object-fit: cover; } .ly-wc__pie { font-size: 12px; opacity: .85; } .ly-wc__etq { font-size: 9.5px; letter-spacing: .14em; opacity: .55; margin-top: 14px; } .ly-wc__tit { font-size: 13.5px; font-weight: 600; } .ly-wc__qr { background: #fff; border-radius: 14px; padding: 10px; width: 124px; margin: 16px auto 0; } /* KPIs */ .ly-kpis { display: flex; gap: 16px; margin-bottom: 20px; } .ly-kpis--3 { gap: 14px; margin-bottom: 16px; } .ly-kpi { padding: 18px 20px; flex: 1; position: relative; min-width: 0; } .ly-kpi__i { position: absolute; right: 16px; top: 16px; width: 34px; height: 34px; border-radius: 11px; background: #FDF1E3; color: #D97706; display: flex; align-items: center; justify-content: center; } .ly-kpi__l { font-size: 13px; color: #78716C; font-weight: 600; padding-right: 40px; } .ly-kpi__v { font-size: 30px; font-weight: 800; margin-top: 6px; letter-spacing: -.02em; } .ly-kpi__s { font-size: 12px; color: #1D9A5B; font-weight: 700; margin-top: 2px; } /* Formularios */ .ly-fld { display: block; } .ly-fld__l { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; } .ly-fld small { display: block; font-size: 12px; color: #78716C; margin-top: 6px; } .smc-panel .ly-fld input[type=text], .smc-panel .ly-fld input[type=tel], .smc-panel .ly-fld input[type=email], .smc-panel .ly-fld input[type=password], .smc-panel .ly-fld input[type=number], .smc-panel .ly-in, .smc-panel .ly-input-ico input { width: 100%; height: 46px; border: 1px solid #E2DBD1 !important; border-radius: 12px !important; background: #fff !important; padding: 0 14px; font-size: 14px; color: #1C1917 !important; box-shadow: none !important; } .smc-panel .ly-fld input:disabled { background: #FAF7F2 !important; color: #78716C !important; } .smc-panel .ly-fld input:focus, .smc-panel .ly-in:focus, .smc-panel .ly-input-ico input:focus { border-color: #D97706 !important; outline: none; box-shadow: 0 0 0 3px rgba(217,119,6,.15) !important; } .ly-par { display: flex; gap: 14px; } .ly-par > * { flex: 1; min-width: 0; } .ly-input-ico { display: flex; align-items: center; position: relative; flex: 1; color: #78716C; } .ly-input-ico svg { position: absolute; left: 14px; } .smc-panel .ly-input-ico input { padding-left: 42px; } .ly-trow { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #FAF7F2; border-radius: 14px; padding: 14px 16px; cursor: pointer; } .ly-trow b { display: block; font-size: 14px; font-weight: 700; } .ly-trow small { display: block; font-size: 12.5px; color: #78716C; margin-top: 2px; } .ly-sw { position: absolute; opacity: 0; pointer-events: none; } .ly-tg { width: 42px; height: 24px; border-radius: 99px; background: #D6D3D1; position: relative; display: inline-block; flex-shrink: 0; transition: background .15s; } .ly-tg::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .15s; } .ly-sw:checked + .ly-tg { background: #D97706; } .ly-sw:checked + .ly-tg::after { left: 20px; } .ly-reg { display: flex; align-items: center; justify-content: space-between; background: #FAF7F2; border-radius: 14px; padding: 10px 16px; gap: 10px; flex-wrap: wrap; } .ly-reg > span:first-child { font-size: 14px; font-weight: 700; } .ly-stp { display: inline-flex; align-items: center; border: 1px solid #E2DBD1; border-radius: 12px; background: #fff; height: 46px; } .smc-panel .ly-stp button { width: 46px; height: 44px; display: flex; align-items: center; justify-content: center; color: #78716C !important; background: none !important; border: 0 !important; cursor: pointer; } .smc-panel .ly-stp button.mas { color: #D97706 !important; } .smc-panel .ly-stp input { width: 50px; text-align: center; font-size: 16px; font-weight: 800; border: 0 !important; background: none !important; padding: 0 !important; height: 44px; -moz-appearance: textfield; box-shadow: none !important; } .ly-stp input::-webkit-outer-spin-button, .ly-stp input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Editor */ .ly-stepper { display: flex; align-items: center; margin: 0 0 24px; } .ly-stepper__p { display: flex; align-items: center; gap: 10px; } .ly-stepper__c { width: 30px; height: 30px; border-radius: 50%; background: #EFE9E0; color: #A8A29E; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; } .ly-stepper__t { font-size: 14px; font-weight: 600; color: #A8A29E; } .ly-stepper__p.on .ly-stepper__c { background: #D97706; color: #fff; box-shadow: 0 0 0 5px #FBE3C6; } .ly-stepper__p.on .ly-stepper__t { font-weight: 800; color: #1C1917; } .ly-stepper__p.hecho .ly-stepper__c { background: #D97706; color: #fff; } .ly-stepper__p.hecho .ly-stepper__t { color: #1C1917; } .ly-stepper__l { flex: 1; height: 2px; background: #EFE9E0; margin: 0 14px; } .ly-stepper__l.hecho { background: #D97706; } .ly-form { flex: 1; min-width: 0; } .ly-prev { width: 380px; flex-shrink: 0; overflow: hidden; align-self: flex-start; position: sticky; top: 16px; } .ly-prev__top { padding: 18px 20px; border-bottom: 1px solid #ECE7E0; display: flex; align-items: center; gap: 8px; font-size: 14.5px; } .ly-prev__body { background: #F6F1EA; padding: 22px 0 24px; display: flex; flex-direction: column; align-items: center; } .ly-prev__body .ly-segm { margin-bottom: 18px; } .ly-prev__nota { text-align: center; margin-top: 14px; font-size: 12px; } .ly-pie { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; } .ly-opts { display: flex; flex-direction: column; gap: 12px; } .ly-opt { border: 1px solid #ECE7E0; background: #fff; border-radius: 16px; padding: 18px 20px; display: flex; gap: 16px; align-items: center; } .ly-opt.on { border: 1.5px solid #D97706; background: #FDF1E3; } .ly-opt.soon { opacity: .55; } .ly-opt__i { width: 46px; height: 46px; border-radius: 13px; background: #F1ECE4; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ly-opt.on .ly-opt__i { background: #D97706; } .ly-opt__t { font-size: 16px; font-weight: 800; } .ly-opt__s { font-size: 13.5px; color: #78716C; margin-top: 3px; } .ly-opt__ej { display: inline-block; margin-top: 10px; background: #fff; border: 1px solid #ECE7E0; border-radius: 9px; padding: 5px 10px; font-size: 12px; font-weight: 600; color: #57534E; } .ly-opt__ck { width: 26px; height: 26px; border-radius: 50%; background: transparent; border: 2px solid #D9D3C9; box-sizing: border-box; display: flex; align-items: center; justify-content: center; } .ly-opt__ck svg { opacity: 0; } .ly-opt.on .ly-opt__ck { background: #D97706; border-color: #D97706; } .ly-opt.on .ly-opt__ck svg { opacity: 1; } .ly-lab { font-size: 13.5px; font-weight: 800; margin-bottom: 10px; } .ly-lab small { display: block; font-size: 12.5px; color: #78716C; margin-top: 2px; font-weight: 400; } .ly-temas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; } .smc-panel .ly-tema { background: none !important; border: 0 !important; padding: 0; cursor: pointer; text-align: center; color: #1C1917 !important; } .ly-tema span { height: 74px; border-radius: 14px; display: flex; align-items: center; justify-content: center; } .ly-tema.on span { outline: 3px solid #1C1917; outline-offset: 2px; } .ly-tema b { display: block; font-size: 12px; font-weight: 700; margin-top: 7px; } .ly-logos { display: flex; gap: 26px; margin-top: 26px; flex-wrap: wrap; } .ly-subir-wrap { position: relative; display: inline-block; } .ly-subir { border: 1.5px dashed #D6CFC4; border-radius: 16px; background: #FAF7F2 center/contain no-repeat; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #78716C; font-size: 12px; font-weight: 600; cursor: pointer; max-width: 100%; } .ly-subir.tiene { border-style: solid; background-color: #fff; color: transparent; } .ly-subir.tiene svg, .ly-subir.tiene span { opacity: 0; } .ly-subir:hover { border-color: #D97706; } .smc-panel .ly-subir-x { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50% !important; background: #1C1917 !important; color: #fff !important; border: 2px solid #fff !important; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .ly-sw-fila { display: flex; gap: 10px; flex-wrap: wrap; } .smc-panel .ly-muestra { width: 38px; height: 38px; border-radius: 11px !important; border: 1px solid #E2DBD1 !important; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; position: relative; } .ly-muestra.on { outline: 3px solid #1C1917; outline-offset: 2px; } .smc-panel .ly-muestra--mas { background: conic-gradient(#f43f5e, #f59e0b, #22c55e, #06b6d4, #8b5cf6, #f43f5e) !important; border: 0 !important; overflow: hidden; } .ly-muestra--mas input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .ly-contraste { display: flex; align-items: center; gap: 10px; background: #F3FBF6; border-radius: 12px; padding: 11px 14px; margin: 12px 0 24px; font-size: 13px; flex-wrap: wrap; } .ly-contraste i { width: 9px; height: 9px; border-radius: 50%; background: #1D9A5B; } .ly-contraste span { color: #78716C; } .ly-contraste--med { background: #FEF8E7; } .ly-contraste--med i { background: #D97706; } .ly-contraste--mal { background: #FEF3F2; } .ly-contraste--mal i { background: #B42318; } .ly-formas { display: flex; gap: 10px; flex-wrap: wrap; } .smc-panel .ly-forma { width: 48px; height: 48px; border-radius: 13px !important; display: flex; align-items: center; justify-content: center; background: #fff !important; border: 1px solid #E2DBD1 !important; color: #57534E !important; cursor: pointer; } .smc-panel .ly-forma.on { background: #FDF1E3 !important; border: 1.5px solid #D97706 !important; color: #D97706 !important; } .ly-barra { position: sticky; bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: #1C1917; color: #fff; border-radius: 16px; padding: 14px 20px; margin-top: 20px; z-index: 30; } .ly-barra[hidden] { display: none !important; } .ly-barra > div:first-child { display: flex; align-items: center; gap: 10px; font-size: 14px; flex-wrap: wrap; } .ly-barra i { width: 9px; height: 9px; border-radius: 50%; background: #F59E0B; display: inline-block; } .ly-barra span { color: #D6D3D1; } /* Clientes */ .ly-busca { display: flex; gap: 12px; margin-bottom: 14px; align-items: center; flex-wrap: wrap; } .ly-lista { padding: 0; overflow: hidden; } .ly-cl { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid #F3EEE7; cursor: pointer; } .ly-cl:first-child { border-top: 0; } .ly-cl:hover, .ly-cl.sel { background: #FFFAF2; } .ly-cl__n { flex: 1; min-width: 0; } .ly-cl__n b { display: block; font-size: 14px; font-weight: 700; } .ly-cl__n small { display: block; font-size: 12.5px; color: #78716C; } .ly-prog { display: flex; align-items: center; gap: 8px; width: 130px; } .ly-prog span { flex: 1; height: 6px; border-radius: 9px; background: #F1ECE4; display: block; } .ly-prog i { display: block; height: 6px; border-radius: 9px; background: #D97706; } .ly-prog b { font-size: 12px; } .ly-cl__h { width: 90px; font-size: 12.5px; color: #78716C; text-align: right; } .ly-lista__pie { padding: 14px 18px; border-top: 1px solid #F3EEE7; font-size: 12.5px; color: #78716C; display: flex; justify-content: space-between; } .ly-drawer { width: 340px; flex-shrink: 0; align-self: flex-start; position: sticky; top: 16px; } .ly-dr__id { display: flex; gap: 12px; align-items: center; margin: 18px 0; } .ly-dr__n { font-size: 16px; font-weight: 800; } .ly-dr__sellos { background: #FAF7F2; border-radius: 14px; padding: 14px; } .ly-mini-sellos { display: grid; gap: 6px; } .ly-mini-sellos--g { gap: 8px; margin: 18px 0; } .ly-mst { aspect-ratio: 1/1; border-radius: 50%; border: 1.5px solid #E2DBD1; display: flex; align-items: center; justify-content: center; background: transparent; } .ly-mst--on { background: #D97706; border-color: #D97706; } .ly-hist { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid #F3EEE7; font-size: 13px; } .ly-dr__error { margin-top: 12px; background: #FEF3F2; color: #B42318; border-radius: 10px; padding: 10px 12px; font-size: 12.5px; } /* Modales */ .ly-modal { position: fixed; inset: 0; background: rgba(28,25,23,.5); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; } .ly-modal[hidden] { display: none !important; } .ly-modal__c { width: 460px; max-width: 100%; max-height: 90vh; overflow: auto; } /* Analítica */ .ly-kpis--4 .ly-kpi { padding: 18px 20px; } .ly-barras { display: flex; align-items: flex-end; gap: 12px; height: 180px; margin-top: 14px; } .ly-barra-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 7px; } .ly-barra-v { font-size: 11.5px; font-weight: 700; color: #78716C; } .ly-barra-b { width: 100%; max-width: 40px; border-radius: 9px 9px 4px 4px; background: #F3D3A8; } .ly-barra-b.on { background: #D97706; } .ly-barra-l { font-size: 11.5px; color: #A8A29E; font-weight: 600; } /* Ajustes */ .ly-ajustes { max-width: 720px; } .ly-codigo { flex: 1; min-width: 0; height: 46px; background: #FAF7F2; border-radius: 12px; display: flex; align-items: center; padding: 0 16px; font-family: monospace; font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ly-peligro { border-color: #F3C9C9; } .ly-peligro__t { font-size: 15px; font-weight: 800; color: #B42318; } /* Escáner */ .ly-esc { max-width: 640px; margin: 0 auto; } .ly-busc { display: flex; gap: 10px; } .ly-esc__res { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .ly-esc__res .smc-boton { width: 100%; text-align: left; white-space: normal; background: #fff; border: 1px solid #E2DBD1; border-radius: 12px; padding: 12px 14px; font-size: 14px; font-weight: 600; cursor: pointer; } .ly-oesc { display: flex; align-items: center; gap: 14px; margin: 20px 0; color: #A8A29E; font-size: 12px; letter-spacing: .12em; font-weight: 700; } .ly-oesc span { flex: 1; height: 1px; background: #ECE7E0; } .ly-cam { background: #1C1917; border-radius: 22px; height: 300px; position: relative; overflow: hidden; color: #fff; } .ly-cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; } .ly-cam__vacio { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 20px; } .ly-cam__ic { width: 64px; height: 64px; border-radius: 50%; background: #fff; color: #1C1917; display: flex; align-items: center; justify-content: center; } .ly-cam__t { font-size: 14px; color: #D6D3D1; text-align: center; max-width: 300px; } .ly-esc.ly-cam-on .ly-cam video { display: block; } .ly-esc.ly-cam-on .ly-cam__vacio { display: none; } .ly-esc.ly-cam-on .ly-cam { box-shadow: inset 0 0 0 3px #D97706; } .ly-esc__pie { text-align: center; font-size: 13px; color: #78716C; margin-top: 18px; } .ly-esc__ayuda { margin-top: 10px; background: #fff; border: 1px solid #ECE7E0; border-radius: 12px; padding: 12px 14px; text-align: left; } .ly-esc__nombre { font-size: 18px; font-weight: 800; } .ly-esc__est { margin: 16px 0 0; display: flex; flex-direction: column; gap: 2px; } .ly-esc__est b { font-size: 20px; font-weight: 800; } .ly-esc__est span { font-size: 13px; color: #78716C; } .ly-esc__ok { display: flex; align-items: center; gap: 12px; background: #F3FBF6; border: 1px solid #CFE9DA; border-radius: 14px; padding: 14px 18px; margin-bottom: 16px; } .ly-esc__ok > span { width: 30px; height: 30px; border-radius: 50%; background: #1D9A5B; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ly-esc__botones { display: flex; gap: 10px; } .ly-esc__botones > :first-child { flex: 3; } .ly-esc__botones > :last-child { flex: 2; } .ly-esc__extra { margin-top: 12px; } .ly-esc__extra .ly-etq { margin-bottom: 8px; } .ly-esc__fila { display: flex; gap: 8px; margin-top: 8px; } .ly-esc__fila input { flex: 1; min-width: 0; height: 44px; border: 1px solid #E2DBD1; border-radius: 12px; padding: 0 14px; background: #fff; font-size: 14px; } .ly-esc__error { margin-top: 14px; background: #FEF3F2; border: 1px solid #F3C9C9; color: #B42318; border-radius: 12px; padding: 12px 14px; font-size: 13px; } .ly-esc__error[hidden] { display: none; } /* Celular */ @media (max-width: 980px) { .ly-dos { flex-direction: column; } .ly-dos > * { width: 100% !important; } .ly-prevcol { align-items: center; } .ly-prev { position: static; } .ly-drawer { position: static; } .ly-pasos__fila { flex-direction: column; } .ly-kpis--4, .ly-kpis { flex-wrap: wrap; } .ly-kpis--4 .ly-kpi, .ly-kpis .ly-kpi { flex: 1 1 calc(50% - 16px); } } @media (max-width: 820px) { .smc-panel--ly .smc-panel__main { padding: 20px 16px 40px; } .ly-pagina h1 { font-size: 24px; } .ly-mini3 { flex-wrap: wrap; } .ly-temas { grid-template-columns: repeat(3, 1fr); } .ly-par { flex-direction: column; } .ly-prog { width: 80px; } .ly-cl__h { display: none; } .ly-esc__botones { flex-direction: column; } .ly-logos { gap: 16px; } .ly-subir[style*="width:460px"], .ly-subir[style*="width:300px"] { width: 100% !important; } } .smc-panel--ly .smc-sidebar { min-height: 100vh; } .smc-panel--ly .smc-sidebar__cuenta-salir { display: block; } .smc-panel--ly .ly-salir { color: #78716C; display: inline-flex; padding: 4px; } .smc-panel--ly .smc-sidebar__idioma { padding: 6px 22px 8px; } .smc-panel--ly .smc-sidebar__idioma a { color: #57534E; font-size: 13px; text-decoration: none; } .ly-tipo-tag { display: inline-block; border-radius: 99px; padding: 2px 9px; margin-left: 4px; font-size: 11px; font-weight: 700; background: #FDF1E3; color: #D97706; } .ly-cats { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 12px; padding-bottom: 4px; } .smc-panel .ly-cat { flex: none; border: 1px solid #E2DDD3 !important; border-radius: 99px !important; padding: 6px 13px !important; font-size: 12.5px; font-weight: 700; color: #6B645C !important; background: #fff !important; cursor: pointer; } .smc-panel .ly-cat.on { background: #D97706 !important; border-color: #D97706 !important; color: #fff !important; } .smc-panel .ly-forma[hidden] { display: none !important; } .ly-selector__row { display: flex; align-items: center; border-radius: 12px; } .ly-selector__row:hover, .ly-selector__row.on { background: #FDF1E3; } .ly-selector__row .ly-selector__item { flex: 1; min-width: 0; background: none !important; } .ly-selector__ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: none !important; border: 0 !important; cursor: pointer; padding: 0; margin-right: 4px; } .ly-selector__ic:hover { background: #fff !important; } .ly-selector__row .ly-selector__ck { margin-right: 2px; } .ly-selector__conf { margin: 2px 8px 8px; padding: 12px; border: 1px solid #F1C9C4; background: #FDF3F2; border-radius: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: #57534E; } .ly-selector__conf[hidden] { display: none; } .ly-selector__conf input[type=text] { height: 38px; border: 1px solid #E2DBD1; border-radius: 9px; padding: 0 10px; font-size: 14px; } .smc-panel .ly-selector__conf button { height: 38px; border: 0 !important; border-radius: 9px !important; background: #C0392B !important; color: #fff !important; font-weight: 800; cursor: pointer; } /* Notificaciones */ .ly-notif-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .ly-notif-tab { border: 1px solid #E2DBD1; border-radius: 12px; padding: 8px 14px; background: #fff; min-width: 0; } .ly-notif-tab b { display: block; font-size: 14px; } .ly-notif-tab small { color: #78716C; font-size: 12px; } .ly-notif-tab.on { background: #FDF1E3; border-color: #D97706; } .ly-notif-tab.on b { color: #D97706; } .ly-notif-tab.off { opacity: .55; } .ly-notif-cols { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; } .ly-notif-chips { display: flex; gap: 6px; flex-wrap: wrap; } .smc-panel .ly-notif-chip { border: 1px solid #E2DBD1 !important; border-radius: 99px !important; padding: 5px 12px; font-weight: 600; font-size: 13px; background: #fff !important; color: #1C1917 !important; cursor: pointer; } .smc-panel .ly-notif-chip:hover { border-color: #D97706 !important; } .ly-notif-cnt { color: #78716C; font-size: 12px; text-align: right; margin-top: 4px; } .ly-notif-alc { display: flex; gap: 12px; align-items: center; background: #FDF1E3; border-radius: 10px; padding: 10px 12px; margin-top: 12px; } .ly-notif-alc b { font-size: 22px; color: #D97706; } .ly-notif-alc small { display: block; color: #78716C; } .ly-notif-esp { margin-top: 14px; border: 1px solid #E2DBD1; border-radius: 12px; padding: 12px 14px; background: #fff; } .ly-notif-esp > div:first-child { display: flex; justify-content: space-between; gap: 10px; align-items: center; } .ly-notif-esp b { font-variant-numeric: tabular-nums; color: #78716C; } .ly-notif-bar { height: 8px; border-radius: 99px; background: #FDF1E3; margin-top: 10px; overflow: hidden; } .ly-notif-bar i { display: block; height: 100%; background: #D97706; border-radius: 99px; transition: width 1s linear; } .ly-notif-tel { width: 270px; max-width: 100%; margin: 12px auto 0; background: #171717; border-radius: 28px; padding: 22px 14px 18px; color: #fff; text-align: center; } .ly-notif-fecha { opacity: .7; font-size: 12px; } .ly-notif-hora { font-size: 44px; font-weight: 300; margin-top: 4px; } .ly-notif-nt { background: rgba(255,255,255,.93); color: #14171F; border-radius: 16px; padding: 10px 12px; text-align: left; margin-top: 60px; } .ly-notif-nt > div { display: flex; justify-content: space-between; font-size: 12px; } .ly-notif-nt span { color: #888; } .ly-notif-nt p { margin: 3px 0 0; font-size: 13px; word-break: break-word; } .ly-notif-fila { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid #ECE7E0; } .ly-notif-fila small { display: block; color: #78716C; } .ly-notif-tag { border-radius: 99px; padding: 2px 9px; font-size: 11px; font-weight: 700; background: #E6F2EA; color: #2F7D4F; white-space: nowrap; } .smc-panel .ly-fld textarea { width: 100%; min-height: 84px; border: 1px solid #E2DBD1 !important; border-radius: 12px !important; background: #fff !important; padding: 12px 14px; font: inherit; font-size: 14px; color: #1C1917 !important; box-shadow: none !important; resize: vertical; } .smc-panel .ly-fld textarea:focus { border-color: #D97706 !important; outline: none; box-shadow: 0 0 0 3px rgba(217,119,6,.15) !important; } .smc-panel .ly-fld textarea:disabled { background: #FAF7F2 !important; color: #78716C !important; } .ly-notif-alc > div { font-size: 14px; font-weight: 600; color: #1C1917; } .ly-notif-alc small { font-size: 12px; font-weight: 400; } .ly-notif-esp { font-size: 14px; } .ly-notif-fila { font-size: 14px; } .ly-notif-fila small { font-size: 12.5px; margin-top: 2px; } .ly-notif-para { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; font-size: 14px; color: #57534E; } .ly-notif-para b { color: #1C1917; } .smc-panel .ly-notif-para select { height: 40px; border: 1px solid #E2DBD1 !important; border-radius: 10px !important; background: #fff !important; padding: 0 12px; font-weight: 700; font-size: 14px; color: #1C1917 !important; max-width: 100%; } .smc-panel .ly-selector__conf .ly-selector__no { background: #fff !important; color: #57534E !important; border: 1px solid #E2DBD1 !important; flex: 1; } .smc-panel .ly-selector__conf button[type=submit] { flex: 1; } /* Pie del menú siempre visible: idioma + cuenta no se van con el scroll */ .smc-sidebar__pie { position: sticky; bottom: 0; background: #fff; z-index: 2; margin-top: auto; border-top: 1px solid #ECEDF0; } .smc-sidebar__pie .smc-sidebar__idioma { padding-top: 10px !important; padding-bottom: 8px !important; } .smc-sidebar__pie .smc-sidebar__cuenta { border-top: 0; padding-top: 4px; margin-bottom: 14px !important; } .smc-sidebar__volver { display: inline-block; margin-top: 6px; padding: 4px 10px; border-radius: 8px; background: #FDF1E3; color: #D97706 !important; font-size: 12px; font-weight: 800; white-space: nowrap; } .smc-sidebar__volver:hover { background: #FBE3C2; } /* Con la barra de WordPress (administradores) el menú mide lo que queda de pantalla, para que el pie no se salga */ .admin-bar .smc-sidebar { top: 32px; height: calc(100vh - 32px); } @media (max-width: 782px) { .admin-bar .smc-sidebar { top: 46px; height: calc(100vh - 46px); } } .admin-bar .smc-panel--ly .smc-sidebar { min-height: 0; top: 32px; height: calc(100vh - 32px); } @media (max-width: 782px) { .admin-bar .smc-panel--ly .smc-sidebar { top: 46px; height: calc(100vh - 46px); } } @media (max-width: 820px) { .admin-bar .smc-panel--ly .smc-sidebar { top: 0; height: auto; } } .ly-notif-tab { text-decoration: none; color: inherit; display: block; } a.ly-notif-tab:hover { border-color: #D97706; } .ly-notif-sw { display: flex; justify-content: space-between; gap: 14px; align-items: center; cursor: pointer; } .ly-notif-sw b { display: block; font-size: 15px; } .ly-notif-sw small { display: block; color: #78716C; font-size: 12.5px; margin-top: 2px; } .ly-notif-sw input { width: 22px; height: 22px; accent-color: #D97706; flex: none; } .ly-notif-horas { display: flex; gap: 8px; flex-wrap: wrap; } .ly-notif-horas label { cursor: pointer; } .ly-notif-horas input { position: absolute; opacity: 0; pointer-events: none; } .ly-notif-horas span { display: block; border: 1px solid #E2DBD1; border-radius: 10px; padding: 8px 14px; font-weight: 700; background: #fff; color: #78716C; } .ly-notif-horas input:checked + span { background: #FDF1E3; border-color: #D97706; color: #D97706; } .ly-notif-tag--gris { background: #F1ECE4; color: #78716C; } .ly-notif-btns { display: flex; gap: 6px; flex: none; } .ly-notif-b { border: 1px solid #E2DBD1; border-radius: 99px; padding: 6px 14px; font-weight: 700; font-size: 13px; background: #fff; color: #1C1917; text-decoration: none; } .ly-notif-b--wa { background: #E6F2EA; border-color: #E6F2EA; color: #2F7D4F; } .ly-notif-ubic { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid #ECE7E0; border-radius: 12px; margin-bottom: 8px; background: #FAF7F2; } .smc-panel .ly-notif-ubic input[type=text] { height: 42px; border: 1px solid #E2DBD1 !important; border-radius: 10px !important; background: #fff !important; padding: 0 12px; font-size: 14px; color: #1C1917 !important; box-shadow: none !important; } .smc-panel .ly-notif-ubic .ly-notif-b { align-self: flex-start; cursor: pointer; } .smc-panel .ly-notif-ubic .ly-btn { align-self: flex-start; } .ly-notif-aviso { margin-top: 14px; padding: 12px 14px; border: 1px solid #ECE7E0; border-radius: 12px; font-size: 13px; color: #57534E; } .ly-notif-aviso p { margin: 6px 0 0; } /* Listas de WhatsApp / SMS: compactas, con scroll */ .ly-wa-card { padding-bottom: 12px; } .ly-wa-card textarea { min-height: 0; } .ly-wa-lista { max-height: 250px; overflow-y: auto; margin-top: 8px; border-top: 1px solid #ECE7E0; } .ly-wa-lista .ly-notif-fila { padding: 7px 0; } .ly-wa-lista .ly-notif-fila:first-child { border-top: 0; } .ly-wa-lista .ly-notif-b { padding: 4px 11px; font-size: 12px; } .ly-notif-b.is-off { opacity: .45; pointer-events: none; } /* Analítica: gráfica de visitas (línea + área) */ .ly-graf__tot { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; } .ly-graf__tot b { font-size: 34px; letter-spacing: -.02em; color: #1C1917; } .ly-graf__dl { background: #E6F2EA; color: #2F7D4F; border-radius: 99px; padding: 3px 10px; font-size: 12px; font-weight: 700; } .ly-graf__dl:empty { display: none; } .ly-graf__ch { position: relative; margin-top: 14px; } .ly-graf__ch svg { width: 100%; height: auto; display: block; overflow: visible; } .ly-graf__tip { position: absolute; pointer-events: none; background: #1C1917; color: #fff; border-radius: 10px; padding: 6px 10px; font-size: 12px; font-weight: 700; transform: translate(-50%, -125%); white-space: nowrap; opacity: 0; transition: opacity .12s; z-index: 2; } .ly-graf__leg { display: flex; gap: 16px; flex-wrap: wrap; color: #78716C; font-size: 12px; margin-top: 10px; } .ly-graf__leg i { display: inline-block; width: 14px; border-top: 2.5px solid #D97706; vertical-align: middle; margin-right: 6px; } .ly-graf__leg i.p { border-top: 2px solid #F4C98C; } .ly-graf__leg i.d { border-top: 2px dashed #78716C; } .ly-graf__mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; } .ly-graf__mini div { background: #FDF1E3; border-radius: 14px; padding: 12px 14px; } .ly-graf__mini span { color: #78716C; font-size: 12px; display: block; } .ly-graf__mini b { font-size: 19px; color: #1C1917; } @media (max-width: 520px) { .ly-graf__mini { grid-template-columns: 1fr 1fr; } } .goog-te-spinner-pos,.goog-te-spinner-animation,.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,.VIpgJd-ZVi9od-aZ2wEe-OiiCO,.VIpgJd-ZVi9od-ORHb-OEVmcd{display:none !important} body{top:0 !important} .goog-text-highlight{background:none !important;box-shadow:none !important} /* 0.1.326 — "+ Tarjeta de presentación / + Programa de lealtad": píldora discreta debajo del menú lateral. */ .smc-sidebar__agregar { display: flex; align-items: center; width: fit-content; margin: 8px 14px 0; padding: 5px 11px; border: 1px dashed #D9DCE2; border-radius: 99px; font-size: 12px; font-weight: 600; line-height: 1.3; color: #8A8D94; text-decoration: none !important; } .smc-sidebar__agregar:hover { color: var(--smc-ag, #2554EB); border-color: var(--smc-ag, #2554EB); } /* Logo grande (Ajustes → Marca): sin recuadro; en modo «grande» tampoco se muestra el nombre. */ .smc-ob-marca__logo:has(.smc-logo-grande),.smc-sidebar__marca-icono:has(.smc-logo-grande),.ll-logo__i:has(.smc-logo-grande){width:auto !important;height:auto !important;background:none !important;border-radius:0 !important;backdrop-filter:none !important} .smc-ob-marca__logo-fila:has(.smc-logo-grande--grande) .smc-ob-marca__texto,.smc-sidebar__marca:has(.smc-logo-grande--grande) .smc-sidebar__marca-texto{display:none} /* 0.1.333 — Iconos en «tile» de color, igual en el panel de Tarjetas y en el de Lealtad. */ .smc-panel .smc-sidebar__nav a { --smc-tile: var(--smc-accent, #2554EB); } .smc-panel--ly .smc-sidebar__nav a { --smc-tile: #D97706; } .smc-panel .smc-sidebar__nav a > svg { box-sizing: content-box; width: 18px; height: 18px; padding: 7px; border-radius: 10px; flex: none; color: var(--smc-tile); background: color-mix(in srgb, var(--smc-tile) 12%, transparent); transition: background .15s ease, color .15s ease; } .smc-panel .smc-sidebar__nav a:hover > svg { background: color-mix(in srgb, var(--smc-tile) 20%, transparent); } .smc-panel .smc-sidebar__nav a.activo > svg { background: var(--smc-tile); color: #fff; } .smc-panel .smc-sidebar__nav a.smc-sidebar__nav-candado > svg { color: #94A3B8; background: #F1F5F9; } /* Pie del menú lateral (mockup menu_final, 16 oct 2026): aviso del otro producto + usuario + iconos cerrar/idioma. */ .smc-pie { position: sticky; bottom: 0; z-index: 2; margin-top: auto; background: #fff; border-top: 1px solid #ECEDF0; padding: 12px 14px 26px; display: flex; flex-direction: column; gap: 10px; --smc-pie-t: color-mix(in srgb, var(--smc-pie, #2554EB) 12%, #fff); } .smc-pie__cta { display: block; padding: 12px; border-radius: 12px; background: linear-gradient(135deg, var(--smc-ag), color-mix(in srgb, var(--smc-ag) 72%, #000)); color: #fff !important; text-decoration: none !important; } .smc-pie__cta-k { display: block; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .85; } .smc-pie__cta b { display: block; font-size: 14.5px; font-weight: 700; margin: 3px 0 2px; color: #fff; } .smc-pie__cta-t { display: block; font-size: 12px; line-height: 1.35; opacity: .92; margin-bottom: 9px; } .smc-pie__cta-b { display: inline-flex; background: #fff; color: var(--smc-ag); font-size: 12.5px; font-weight: 700; padding: 6px 11px; border-radius: 8px; } .smc-pie__cuenta { display: flex; align-items: center; gap: 8px; padding: 0 4px; } .smc-pie__avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--smc-pie); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; flex: none; } .smc-pie__nombre { flex: 1; min-width: 0; } .smc-pie__nombre b { display: block; font-size: 13px; font-weight: 700; color: #14171F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .smc-pie__nombre .smc-sidebar__volver { margin-top: 3px; padding: 3px 9px; font-size: 11.5px; border-radius: 7px; background: var(--smc-pie-t); color: var(--smc-pie) !important; } .smc-pie__ib { width: 30px; height: 30px; border: 1px solid #E3E5E9; border-radius: 9px; display: inline-grid; place-items: center; color: #6B6E76 !important; background: #fff; text-decoration: none !important; flex: none; } .smc-pie__ib:hover { color: var(--smc-pie) !important; border-color: var(--smc-pie); } .smc-pie__idioma { display: inline-flex; } .smc-pie__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .smc-pie__plan { display: block; font-size: 11.5px; color: #6B7280; margin-top: 1px; } /* ---- 0.1.369 · ¿Necesitas algo? (Cuenta de Tarjetas y Ajustes de Lealtad) ---- */ .smc-na__txt { margin: 0 0 14px; color: #6B7280; font-size: 13.5px; line-height: 1.5; } .smc-na__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .smc-panel button.smc-na__tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border: 1px solid #E8EAEE; border-radius: 12px; background: #fff; color: #14171F; text-align: left; cursor: pointer; font: inherit; box-shadow: none; } .smc-panel button.smc-na__tile:hover { border-color: var(--smc-accent, #2554EB); } .smc-na__tile b { font-size: 13.5px; font-weight: 600; } .smc-na__tile > span:last-child { font-size: 12px; color: #6B7280; line-height: 1.35; } .smc-na__ico { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--smc-accent, #2554EB); background: color-mix(in srgb, var(--smc-accent, #2554EB) 10%, #fff); margin-bottom: 6px; } .smc-na-modal { position: fixed; inset: 0; z-index: 100000; background: rgba(8, 10, 16, .5); display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; } .smc-na-modal[hidden] { display: none; } .smc-na-modal__caja { width: 100%; max-width: 460px; max-height: 90vh; overflow: auto; background: #fff; color: #14171F; border-radius: 16px; padding: 22px; box-sizing: border-box; box-shadow: 0 24px 60px rgba(0, 0, 0, .3); } .smc-na-modal__caja form { display: flex; flex-direction: column; gap: 14px; } .smc-na-modal__cab { display: flex; align-items: center; justify-content: space-between; font-size: 18px; } .smc-na-modal__x { width: 32px; height: 32px; border: 1px solid #E8EAEE; border-radius: 8px; background: #fff; color: #14171F; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .smc-na-modal__g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .smc-na-modal__nota { margin: 0; font-size: 12.5px; color: #6B7280; } .smc-na-modal__pie { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .smc-na-modal__pie .smc-cuenta-boton { text-align: center; } [data-smc-tema="oscuro"] .smc-na__txt, [data-smc-tema="oscuro"] .smc-na__tile > span:last-child { color: #8C94A4; } @media (max-width: 760px) { .smc-na__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .smc-na-modal { align-items: flex-end; padding: 0; } .smc-na-modal__caja { max-width: none; border-radius: 16px 16px 0 0; } }