/* ========================================================================== LATAM Streaming — capa de interfaz Selectores de idioma/moneda + panel de usuario responsive. Se carga después de tema.css, así que puede sobrescribirlo. ========================================================================== */ /* Los colores --marca-* llegan de marca.css, que se carga antes. */ :root { /* Color de realce: azul en claro, cian en oscuro (regla 1 del manual). */ --ls-primary: var(--marca-azul); --ls-primary-dark: var(--marca-azul-texto); /* Relleno de botones y pastillas activas. Siempre azul, en los dos temas: es el único color de la paleta que aguanta texto blanco encima (5.09). Sobre cian, amarillo, verde o rojo el blanco baja de 3.3 y hay que usar Tinta, que es lo que hace --ls-on-marca. */ --ls-primary-fill: var(--marca-azul); --ls-on-primary: #ffffff; --ls-on-marca: var(--marca-tinta); --ls-text: var(--marca-tinta); --ls-muted: #5A6B8C; --ls-border: #dce4f5; --ls-surface: #ffffff; --ls-bg: var(--marca-humo); --ls-radius: 3px; --ls-shadow: none; --ls-shadow-sm: none; /* Fondo del buscador de la cabecera. */ --ls-field-bg: #ffffff; /* Estados de la suscripción. */ --ls-exito: var(--marca-verde-texto); --ls-aviso: var(--marca-ambar-texto); --ls-peligro: var(--marca-rojo-texto); --ls-realce: var(--marca-cian-texto); /* tema.css pinta todos sus enlaces con esta variable. Cambiarla aquí es lo que pone en marca los enlaces sueltos del contenido (por ejemplo "Condiciones de uso" en la ficha de producto). */ --link-color: var(--marca-azul-texto); } /* El tema traía un gris neutro de fondo. Humo es casi igual de claro pero lleva el matiz azul de la marca, que es lo que hace que el blanco de las tarjetas se despegue del fondo en vez de confundirse con él. */ body { background-color: var(--ls-bg); } /* ========================================================================== 0a. Tema oscuro ========================================================================== El tema se marca con data-theme en . Un script en el lo aplica antes de pintar para que no haya destello blanco al cargar. ========================================================================== */ :root[data-theme="dark"] { /* Aquí el cian sustituye al azul como color de realce: es la regla 1 del manual y la razón por la que existen dos variables distintas. El azul sigue rellenando los botones, donde sí funciona con texto blanco. */ --ls-primary: var(--marca-cian); --ls-primary-dark: #67E3F5; --ls-text: var(--marca-humo); --ls-muted: #93A2C4; --ls-border: #1E2A4A; --ls-surface: var(--marca-grafito); --ls-bg: var(--marca-tinta); --ls-shadow: none; --ls-shadow-sm: none; /* Un tono más hundido que la cabecera, para que el campo se distinga. */ --ls-field-bg: var(--marca-tinta); /* Sobre Tinta y Grafito los colores de marca se leen tal cual (verde 8.61, ámbar 10.73, rojo 6.05, cian 10.85): no hace falta oscurecerlos como en el tema claro. */ --ls-exito: var(--marca-verde); --ls-aviso: var(--marca-ambar); --ls-peligro: var(--marca-rojo); --ls-realce: var(--marca-cian); /* Sobre Tinta el azul de los enlaces daba 3.28. */ --link-color: var(--marca-cian); } /* Interruptor de tema */ .ls-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; margin-right: .2rem; border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--ls-text); cursor: pointer; transition: background-color .15s ease, border-color .15s ease; } .ls-theme-toggle:hover, .ls-theme-toggle:focus-visible { background: rgba(11, 99, 246, .1); border-color: rgba(11, 99, 246, .22); outline: none; } .ls-theme-icon { width: 19px; height: 19px; } /* En claro se ofrece pasar a oscuro (luna); en oscuro, volver a claro (sol). */ .ls-theme-icon--sun { display: none; } .ls-theme-icon--moon { display: block; } :root[data-theme="dark"] .ls-theme-icon--sun { display: block; } :root[data-theme="dark"] .ls-theme-icon--moon { display: none; } /* --- Superficies del tema original, que trae los colores fijos --- */ /* El envoltorio de la página lo pinta tema.css con `#pagina-publica-g .pagina-publica`, y ese id gana a cualquier selector de clase: en oscuro quedaba el gris claro del tema por debajo y los textos que van sueltos sobre el fondo (las etiquetas de categoría) salían blanco sobre blanco. Por eso aquí se repite el id. */ :root[data-theme="dark"] body, :root[data-theme="dark"] .pagina-publica, :root[data-theme="dark"] #pagina-publica-g .pagina-publica { background-color: var(--ls-bg); color: var(--ls-text); } :root[data-theme="dark"] article.art, :root[data-theme="dark"] .heading-title, :root[data-theme="dark"] .bloque, :root[data-theme="dark"] .card, :root[data-theme="dark"] .list-group-item { background-color: var(--ls-surface); color: var(--ls-text); border-color: var(--ls-border); } :root[data-theme="dark"] .art-name a, :root[data-theme="dark"] .art-name span, :root[data-theme="dark"] .art-genericname a, :root[data-theme="dark"] .art-price-value, :root[data-theme="dark"] .producto-varios, :root[data-theme="dark"] .catmenu-item, :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4 { color: var(--ls-text); } :root[data-theme="dark"] .text-gray-700, :root[data-theme="dark"] .text-muted { color: var(--ls-muted) !important; } /* Campos de formulario. El buscador se controla aparte con --ls-field-bg. */ :root[data-theme="dark"] .form-control, :root[data-theme="dark"] .form-select, :root[data-theme="dark"] textarea, :root[data-theme="dark"] input[type="text"], :root[data-theme="dark"] input[type="email"], :root[data-theme="dark"] input[type="password"], :root[data-theme="dark"] input[type="number"] { background-color: var(--ls-surface); border-color: var(--ls-border); color: var(--ls-text); } :root[data-theme="dark"] .form-control::placeholder, :root[data-theme="dark"] .instasearch-term::placeholder { color: var(--ls-muted); } /* Tablas */ :root[data-theme="dark"] .table { --bs-table-bg: transparent; color: var(--ls-text); } :root[data-theme="dark"] .table th, :root[data-theme="dark"] .table td { border-color: var(--ls-border); } :root[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255, 255, 255, .03); color: var(--ls-text); } /* Los discos de categoría se mantienen blancos: los logos de las marcas están pensados sobre fondo claro y sobre negro se pierden. */ :root[data-theme="dark"] .ls-cats-disc { background: #fff; } /* La cabecera y el pie ya eran oscuros en el tema original. */ :root[data-theme="dark"] .breadcrumb-wrapper { background: var(--ls-surface); border-bottom-color: var(--ls-border); } /* Los círculos pastel de los iconos del panel deslumbran sobre fondo oscuro. */ :root[data-theme="dark"] .bg-blue-100 { background-color: rgba(34, 211, 238, .16); } :root[data-theme="dark"] .bg-orange-100 { background-color: rgba(255, 176, 32, .18); } :root[data-theme="dark"] .text-blue-600 { color: var(--marca-cian); } :root[data-theme="dark"] .text-orange-600 { color: var(--marca-ambar); } :root[data-theme="dark"] .ls-user-balance { background: rgba(34, 197, 94, .16); color: var(--marca-verde); } :root[data-theme="dark"] .ls-user-balance:hover { background: rgba(34, 197, 94, .24); color: var(--marca-verde); } /* ========================================================================== 0. Base responsive ========================================================================== El tema traía imágenes sin límite de ancho (logo y banners de 1920px), que provocaban desplazamiento horizontal en móvil. ========================================================================== */ html { overflow-x: hidden; } body { overflow-x: hidden; } img, video, iframe { max-width: 100%; height: auto; } /* Las tablas anchas se desplazan dentro de su contenedor, no de la página. */ .table-responsive { overflow-x: auto; max-width: 100%; } /* ========================================================================== 1. Selectores de idioma y moneda ========================================================================== */ .ls-switchers { display: flex; align-items: center; gap: .25rem; flex-wrap: nowrap; } .ls-switch { position: relative; } .ls-switch-toggle { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .6rem; border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--ls-text); font-size: .875rem; font-weight: 500; line-height: 1.2; cursor: pointer; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease; } .ls-switch-toggle:hover, .ls-switch-toggle:focus-visible { background: rgba(11, 99, 246, .08); border-color: rgba(11, 99, 246, .18); outline: none; } .ls-switch.is-open .ls-switch-toggle { background: rgba(11, 99, 246, .1); border-color: rgba(11, 99, 246, .25); } .ls-flag { font-size: 1.05rem; line-height: 1; } .ls-switch-label-sm { display: none; } .ls-caret { width: 10px; height: 6px; flex: none; transition: none; } .ls-switch.is-open .ls-caret { transform: rotate(180deg); } .ls-menu { display: none; position: absolute; top: calc(100% + .4rem); left: 0; z-index: 1080; min-width: 220px; margin: 0; padding: .35rem; list-style: none; background: var(--ls-surface); border: 1px solid var(--ls-border); border-radius: var(--ls-radius); } /* Se muestra con display para que el menú siga siendo utilizable aunque el navegador no ejecute la animación. */ .ls-switch.is-open .ls-menu { display: block; animation: ls-menu-in .16s ease-out; } @keyframes ls-menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .ls-switch.is-open .ls-menu { animation: none; } } /* El segundo selector se abre hacia la izquierda para no salirse en pantallas angostas. */ .ls-switch:last-child .ls-menu { left: auto; right: 0; } .ls-option { display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem; border-radius: 3px; color: var(--ls-text); font-size: .9rem; text-decoration: none; transition: background-color .13s ease, color .13s ease; } .ls-option:hover { background: rgba(11, 99, 246, .09); color: var(--ls-text); text-decoration: none; } .ls-option.is-active { /* Relleno, no realce: en oscuro --ls-primary es cian y el blanco encima daría 1.81. El azul aguanta blanco en los dos temas. */ background: var(--ls-primary-fill); color: var(--ls-on-primary); font-weight: 600; } .ls-option.is-active:hover { background: var(--marca-azul-texto); color: var(--ls-on-primary); } .ls-option-name { white-space: nowrap; } @media (max-width: 767.98px) { /* Los selectores están pegados al borde derecho, así que en pantallas angostas todos los menús se abren hacia la izquierda. */ .ls-switch .ls-menu { left: auto; right: 0; } } @media (max-width: 575.98px) { .ls-switch-label { display: none; } .ls-switch-label-sm { display: inline; font-weight: 600; } .ls-menu { min-width: 190px; } } /* ========================================================================== 2. Cabecera de la tienda — ajustes responsive ========================================================================== */ .ls-topbar { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--ls-border); /* Blanco en tema claro y gris oscuro en tema oscuro. */ background: var(--ls-surface); } .ls-topbar .container { display: flex; align-items: center; /* Idioma y moneda a la izquierda; contacto a la derecha. */ justify-content: space-between; gap: 1rem; } .ls-topbar-extra { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; } .ls-topbar-link { display: inline-flex; align-items: center; gap: .45rem; color: var(--ls-text); font-size: .875rem; text-decoration: none; white-space: nowrap; transition: color .15s ease; } .ls-topbar-link:hover { color: var(--ls-primary); text-decoration: none; } .ls-topbar-link i { font-size: 1rem; /* Verde de marca: el manual lo asigna a WhatsApp. Sobre la barra blanca hay que usar la versión oscurecida, el verde vivo da 2.28. */ color: var(--ls-exito); } .ls-topbar-link strong { font-weight: 600; } @media (max-width: 767.98px) { /* En móvil sobra la etiqueta: basta el icono y el número. */ .ls-topbar-link-label { display: none; } .ls-topbar-extra { gap: .75rem; } } @media (max-width: 479.98px) { .ls-topbar-link strong { display: none; } } /* ========================================================================== 2c. Barra principal: logo, buscador y accesos ========================================================================== */ /* tema.css deja esta franja transparente mediante `#pagina-publica-g .barratienda-seccion`, así que se veía el gris del fondo de página y la cabecera quedaba en dos tonos. Se repite ese selector (misma especificidad, hoja posterior) para que use la misma superficie que la barra superior. */ #pagina-publica-g .barratienda-seccion, .barratienda-seccion { background: var(--ls-surface); border-bottom: 1px solid var(--ls-border); } /* Buscador en forma de píldora, con la lupa dentro. El radio se fija con la variable del propio tema, que tema.css declara en `.instasearch-form`: su regla `.instasearch-form:not(.open) .instasearch-term` tiene más especificidad que la de aquí y ganaría si se pusiera border-radius directamente. */ .instasearch-form { --search-border-radius: 3px; position: relative; } .instasearch-form .instasearch-term { height: 46px; padding-left: 1.15rem; padding-right: 3rem; border: 1px solid var(--ls-border); background: var(--ls-field-bg); font-size: .95rem; transition: border-color .15s ease; } /* El input del buscador también lleva la clase form-control, y la regla `:root[data-theme="dark"] .form-control` gana por especificidad a la de arriba. Se repite aquí con el ámbito del tema para que mande el token. */ :root[data-theme="dark"] .instasearch-form .instasearch-term { background: var(--ls-field-bg); } .instasearch-form .instasearch-term:focus { border-color: var(--ls-primary); outline: 3px solid rgba(11, 99, 246, .35); outline-offset: 1px; outline: none; } .instasearch-form .instasearch-term::placeholder { color: var(--ls-muted); } .instasearch-form .instasearch-icon { position: absolute; top: 50%; right: 1.1rem; /* Centrado vertical, no un salto: este translateY es POSICION. La regla contra los saltos al pasar el raton no aplica aqui. */ transform: translateY(-50%); color: var(--ls-muted); pointer-events: none; } /* Círculo con el icono de usuario, como en el diseño de referencia. */ .ls-guest-avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: .35rem; border: 1px solid var(--ls-border); border-radius: 50%; color: var(--ls-muted); flex: none; } @media (max-width: 575.98px) { .ls-guest-avatar { display: none; } .instasearch-form .instasearch-term { height: 42px; } } /* ========================================================================== 1b. Tira de categorías en movimiento continuo ========================================================================== La lista se repite dos veces en el HTML y se desplaza media longitud: al terminar vuelve al inicio y el salto no se nota. Se detiene al pasar el ratón para poder hacer clic con calma. ========================================================================== */ .ls-cats { margin: 1.5rem 0 2rem; } .ls-cats-viewport { position: relative; overflow: hidden; /* Los extremos se desvanecen para dar sensación de continuidad. */ } .ls-cats-track { display: flex; gap: 1.15rem; width: max-content; margin: 0; padding: .35rem 0 1rem; list-style: none; animation: ls-cats-scroll var(--ls-cats-duration, 40s) linear infinite; } .ls-cats-viewport:hover .ls-cats-track, .ls-cats-track:focus-within { animation-play-state: paused; } @keyframes ls-cats-scroll { from { transform: translateX(0); } /* La mitad del recorrido equivale a la lista original completa, incluida la separación que la sigue. */ to { transform: translateX(calc(-50% - .575rem)); } } @media (prefers-reduced-motion: reduce) { .ls-cats-track { animation: none; } /* Sin animación la tira se recorre a mano. */ .ls-cats-viewport { overflow-x: auto; } } .ls-cats-item { flex: none; } .ls-cats-item > a { display: flex; flex-direction: column; align-items: center; gap: .6rem; width: 128px; text-decoration: none; } .ls-cats-disc { display: flex; align-items: center; justify-content: center; width: 128px; height: 128px; padding: 1.1rem; border-radius: 50%; background: #fff; overflow: hidden; transition: none; } .ls-cats-disc img { max-width: 100%; max-height: 100%; object-fit: contain; } .ls-cats-label { color: var(--ls-text); font-size: .875rem; font-weight: 600; text-align: center; line-height: 1.25; /* Dos líneas como máximo para que todas las fichas midan igual. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 767.98px) { .ls-cats-item > a, .ls-cats-disc { width: 96px; } .ls-cats-disc { height: 96px; padding: .8rem; } .ls-cats-label { font-size: .8rem; } } /* ========================================================================== 1b2. Etiquetas de la tarjeta de producto (Nuevo, descuento, Oferta) ========================================================================== */ .ls-etiquetas { display: flex; flex-wrap: wrap; gap: .3rem; margin: .5rem 0 .1rem; } .ls-etiqueta { display: inline-block; padding: .18rem var(--e-2); border-radius: var(--radio); font-size: var(--t-1); font-weight: var(--p-fuerte); line-height: 1.35; color: var(--ls-on-marca); white-space: nowrap; } /* Etiquetas en color de marca con texto Tinta encima, que es lo que aguanta el contraste: verde 8.61, ámbar 10.73, cian 10.85. Con texto blanco los tres bajarían de 2.3. El rojo no aparece aquí a propósito: en esta marca significa "vencido", y gastarlo en una oferta le quitaría el aviso que sí importa. */ .ls-etiqueta--nuevo { background: var(--marca-verde); } .ls-etiqueta--descuento { background: var(--marca-ambar); } .ls-etiqueta--oferta { background: var(--marca-cian); } /* ========================================================================== 1b1. La ventana de las fichas del producto ========================================================================== Condiciones de uso, descripción y detalle de solicitud. Estaba escrita a mano en el pie con `background: white` fijo: en modo oscuro quedaba texto claro sobre fondo blanco. Ahora sigue la escala: radio 3px, una línea de 1px bajo el título, sin sombras. */ .my-modal { position: fixed; inset: 0; background: rgba(6, 11, 26, 0.55); display: none; justify-content: center; align-items: center; z-index: 1050; padding: 1rem; } .my-modal.show { display: flex; } .my-modal-content { background: #FFFFFF; color: #1A2233; border: 1px solid #E3E8F2; border-radius: 3px; max-width: 32rem; width: 100%; max-height: 85vh; overflow-y: auto; } :root[data-theme="dark"] .my-modal-content { background: #0D1526; color: #E8EDF8; border-color: #232E4A; } .my-modal-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid #E3E8F2; } :root[data-theme="dark"] .my-modal-header { border-color: #232E4A; } .my-modal-header h5 { margin: 0; font-size: 1rem; font-weight: 600; color: inherit; } .my-modal-close { flex-shrink: 0; width: 1.75rem; height: 1.75rem; padding: 0; line-height: 1; font-size: 1.25rem; border: 1px solid transparent; border-radius: 3px; background: transparent; color: #5B6478; cursor: pointer; } .my-modal-close:hover { border-color: #E3E8F2; color: #1A2233; } :root[data-theme="dark"] .my-modal-close { color: #93A2C4; } :root[data-theme="dark"] .my-modal-close:hover { border-color: #232E4A; color: #E8EDF8; } #modalBody { padding: 1.25rem 1.5rem; font-size: 0.875rem; line-height: 1.6; white-space: pre-wrap; } #modalBody p:last-child { margin-bottom: 0; } /* ========================================================================== 1b2a. Acceso con Google ========================================================================== Botón blanco con línea de 1px: el estándar que la gente reconoce. El icono multicolor es la marca de Google, no un adorno nuestro. */ .ls-boton-google { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1rem; font-size: 0.875rem; font-weight: 500; border: 1px solid #D5DBE7; border-radius: 3px; background: #FFFFFF; color: #1A2233; text-decoration: none; } .ls-boton-google:hover { border-color: #9AA7BD; color: #1A2233; text-decoration: none; } :root[data-theme="dark"] .ls-boton-google { background: #101B31; border-color: #232E4A; color: #E8EDF8; } .ls-o-divisor { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0; color: #5B6478; font-size: 0.75rem; } .ls-o-divisor::before, .ls-o-divisor::after { content: ""; flex: 1; border-top: 1px solid #E3E8F2; } :root[data-theme="dark"] .ls-o-divisor::before, :root[data-theme="dark"] .ls-o-divisor::after { border-color: #232E4A; } /* ========================================================================== 1b2b. El logo del encabezado, uno por tema ========================================================================== El lockup normal lleva «LATAM» en tinta y desaparece sobre el fondo oscuro; el claro lleva el texto en blanco. Mismo criterio que el pie. */ .tienda-logo .marca img { max-width: 100%; height: auto; } .logo-tema-oscuro { display: none; } :root[data-theme="dark"] .logo-tema-claro { display: none; } :root[data-theme="dark"] .logo-tema-oscuro { display: inline-block; } /* ========================================================================== 1b3. Jerarquía de la tarjeta: el título y el precio son lo único fuerte. El problema no era el título (ya va a 600): era que el stock a 18px, la renovación en verde y el proveedor competían con él. Se callan los datos y el título gana solo. ========================================================================== */ .art-name > a { color: #1A2233; } :root[data-theme="dark"] .art-name > a { color: #E8EDF8; } /* Los datos (stock, proveedor, renovación, precio opuesto): gris uniforme. */ .producto-varios { color: #5B6478; } :root[data-theme="dark"] .producto-varios { color: #93A2C4; } /* El «1000» del stock iba a 18px: más grande que el propio título. */ .producto-varios strong.f-s-18 { font-size: var(--t-2); font-weight: var(--p-fuerte); font-variant-numeric: tabular-nums; color: inherit; } /* La renovación era verde brillante: un dato informativo vestido de estado. El !important es porque tema.css lo trae puesto. */ .producto-varios .text-complementario-1 { color: #5B6478 !important; } :root[data-theme="dark"] .producto-varios .text-complementario-1 { color: #93A2C4 !important; } /* El precio principal, tabular y sin pelear con nadie. */ .art-price-value { font-variant-numeric: tabular-nums; } /* «Mas bajo» no lleva color propio: ya hay tres etiquetas de color y una cuarta las pondria a competir. Es un dato de comparacion, no un reclamo de la casa, asi que va en tinta sobre el fondo de la tarjeta. */ .ls-etiqueta--barato { background: transparent; border: var(--linea) solid currentColor; /* --ls-text ya cambia con el tema; una variable propia aqui se quedaria fija en un tema u otro. */ color: var(--ls-text); } /* Precio anterior junto al rebajado. */ .ls-precio-antes { margin-left: .35rem; font-size: .8em; font-weight: 500; color: var(--ls-muted); text-decoration: line-through; } /* ========================================================================== 1c. Botones de acción ========================================================================== COMPRAR es la acción principal de cada tarjeta y no necesita latir, brillar ni saltar para serlo: es el único elemento con el color de acento, y con eso basta. Antes tenía degradado, halo pulsante y destello al pasar — el trío completo del "estilo IA" que esta hoja fue quitándose de encima. ========================================================================== */ .btn-comprar { padding: .68rem 1.1rem; border: 0; border-radius: 3px; background: var(--marca-azul); color: var(--ls-on-primary); font-size: .875rem; font-weight: 600; } .btn-comprar:hover, .btn-comprar:focus-visible { color: #fff; background: var(--ls-primary-dark, #0B3FA8); } .btn-comprar:focus-visible { outline: 3px solid rgba(11, 99, 246, .35); outline-offset: 1px; } /* --- Ingresar / Registrarse de la cabecera --- */ #barratieneda-usuario .gt-btn { position: relative; overflow: hidden; padding: .58rem 1.15rem; border: 0; border-radius: 3px; color: #fff; font-weight: 600; letter-spacing: .01em; transition: transform .16s ease, filter .16s ease; } #barratieneda-usuario .gt-btn.btn-info { background: var(--marca-azul); } #barratieneda-usuario .gt-btn.btn-danger { /* Rojo de marca oscurecido: el #FF4D5E de la paleta con texto blanco encima da 3.24 y este botón lleva texto. */ background: #D42133; } #barratieneda-usuario .gt-btn:hover, #barratieneda-usuario .gt-btn:focus-visible { color: #fff; filter: saturate(1.1); outline: none; } } @media (prefers-reduced-motion: reduce) { .btn-comprar::before, #barratieneda-usuario .gt-btn.btn-danger { animation: none; } .btn-comprar:hover::after, #barratieneda-usuario .gt-btn:hover::after { animation: none; opacity: 0; } } /* La franja blanca que se veía sobre el botón COMPRAR: tema.css envuelve el botón en un `.art-drop` con fondo `--art-active-bg-color` (blanco) y `padding-top: 1px`. Sobre tarjeta clara no se nota; sobre la oscura ese píxel quedaba como una raya blanca cruzando cada tarjeta. */ :root[data-theme="dark"] .art-drop { background-color: transparent; } /* En oscuro se conserva el mismo degradado: aclararlo bajaba el contraste del texto por debajo del mínimo. El halo va en el azul de marca y no en un azul pálido: el de antes (92,153,255 al 38%) se mezclaba con la tarjeta en #2D4A81, un gris azulado más claro que el fondo que ensuciaba el contorno. Con el azul primario la mezcla da #0E3477 y se lee como luz del propio botón. */ /* ========================================================================== 2a. Menú de usuario en la cabecera ========================================================================== Antes había aquí una barra con Dashboard, perfil, billetera, compras, soporte y salir: seis elementos que se encimaban y que ya están en el menú lateral del panel. Queda sólo saldo, entrada al panel y cerrar sesión. ========================================================================== */ .ls-user { display: flex; align-items: center; gap: .4rem; flex-wrap: nowrap; } .ls-user-balance, .ls-user-panel { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .7rem; border-radius: 3px; font-size: .875rem; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color .15s ease, color .15s ease; } .ls-user-balance { background: rgba(34, 197, 94, .12); color: var(--ls-exito); } .ls-user-balance:hover { background: rgba(34, 197, 94, .2); color: var(--ls-exito); text-decoration: none; } .ls-user-panel { background: rgba(11, 99, 246, .1); color: var(--ls-primary); } .ls-user-panel:hover { background: rgba(11, 99, 246, .18); color: var(--ls-primary-dark); text-decoration: none; } .ls-user-name { max-width: 13ch; overflow: hidden; text-overflow: ellipsis; } .ls-user-logout-form { margin: 0; } .ls-user-logout { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--ls-border); border-radius: 3px; background: transparent; color: var(--ls-muted); cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .ls-user-logout:hover { background: rgba(255, 77, 94, .1); border-color: rgba(255, 77, 94, .3); color: var(--ls-peligro); } @media (max-width: 767.98px) { /* En móvil sólo iconos y saldo: el nombre se lee en el panel. */ .ls-user-name { display: none; } .ls-user-balance, .ls-user-panel { padding: .45rem .55rem; } } /* ========================================================================== 2a2. Menú de la tienda en móvil ========================================================================== La barra de categorías del tema lleva `d-none d-lg-block`, así que por debajo de 992px desaparecía por completo y no había forma de llegar a los productos. Este cajón la sustituye en pantallas pequeñas. ========================================================================== */ .ls-menu-tienda-boton { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; margin-right: .6rem; padding: 0; flex: none; border: 1px solid var(--ls-border); border-radius: 3px; background: var(--ls-surface); color: var(--ls-text); font-size: 1.05rem; cursor: pointer; } .ls-menu-tienda-boton:hover { background: rgba(11, 99, 246, .08); border-color: rgba(11, 99, 246, .25); color: var(--ls-primary); } .ls-menu-movil[hidden] { display: none; } .ls-menu-movil { position: fixed; inset: 0; z-index: 1100; } .ls-menu-movil-fondo { position: absolute; inset: 0; background: rgba(10, 14, 20, .5); } .ls-menu-movil-panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(82vw, 320px); padding: 1rem 0 2rem; overflow-y: auto; background: var(--ls-surface); } .ls-menu-movil-cabecera { display: flex; align-items: center; justify-content: space-between; padding: .25rem 1.1rem 1rem; margin-bottom: .5rem; border-bottom: 1px solid var(--ls-border); font-size: 1rem; font-weight: 600; color: var(--ls-text); } .ls-menu-movil-cerrar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: var(--ls-muted); font-size: 1.1rem; cursor: pointer; } .ls-menu-movil-cerrar:hover { background: rgba(0, 0, 0, .06); color: var(--ls-text); } .ls-menu-movil-panel ul { margin: 0; padding: 0; list-style: none; } .ls-menu-movil-panel a { display: flex; align-items: center; gap: .65rem; padding: .85rem 1.1rem; color: var(--ls-text); font-size: .95rem; font-weight: 500; text-decoration: none; } .ls-menu-movil-panel a:hover { background: rgba(11, 99, 246, .08); color: var(--ls-primary); text-decoration: none; } .ls-menu-movil-panel i { width: 1.1rem; color: var(--ls-muted); } /* El botón sólo aparece donde la barra de categorías está oculta. */ @media (max-width: 991.98px) { .ls-menu-tienda-boton { display: inline-flex; } /* El globo del botón de WhatsApp mide 254px y se despliega hacia la izquierda, tapando los botones de la página. En móvil se oculta: el icono verde ya se entiende solo. */ .whatsapp-tooltip { display: none !important; } .whatsapp-button { bottom: 16px !important; right: 16px !important; } .whatsapp-button img { width: 54px !important; height: 54px !important; } } /* ========================================================================== 2b. Breadcrumb ========================================================================== El partial de breadcrumb viene del tema "homepage", cuyo CSS no se carga en el sitio: sin estilos, sus tres imágenes decorativas se mostraban a tamaño completo (641x472) encima del contenido. Se ocultan y se le da formato propio a la banda de título. ========================================================================== */ .breadcrumb-wrapper { position: relative; padding: 1.75rem 0; margin-bottom: .5rem; background: var(--ls-bg); border-bottom: 1px solid var(--ls-border); overflow: hidden; } .breadcrumb-wrapper .shape1, .breadcrumb-wrapper .shape2, .breadcrumb-wrapper .shape3 { display: none; } .breadcrumb-wrapper .page-heading h1 { margin: 0 0 .35rem; font-size: 1.5rem; font-weight: 600; color: var(--ls-text); } .breadcrumb-wrapper .breadcrumb-items { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; padding: 0; list-style: none; font-size: .875rem; color: var(--ls-muted); } .breadcrumb-wrapper .breadcrumb-items a { color: var(--ls-primary); text-decoration: none; } .breadcrumb-wrapper .breadcrumb-items a:hover { text-decoration: underline; } .breadcrumb-wrapper .breadcrumb-items i { font-size: .65rem; opacity: .6; } @media (max-width: 575.98px) { .breadcrumb-wrapper { padding: 1.25rem 0; } .breadcrumb-wrapper .page-heading h1 { font-size: 1.2rem; } } /* ========================================================================== 3. Panel de usuario ========================================================================== Las vistas del panel venían escritas con utilidades de Tailwind que nunca se cargaron en el sitio. Abajo se define el layout propio y, más adelante, un equivalente mínimo de esas utilidades para que las vistas que aún las usan se vean correctamente. ========================================================================== */ .dashboard-container { display: flex; align-items: flex-start; gap: 1.5rem; max-width: 1320px; margin: 0 auto; padding: 1.5rem 1rem 3rem; } .dashboard-container .sidebar { flex: 0 0 262px; width: 262px; position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: .15rem; padding: 1.25rem; background: var(--ls-surface); border: 1px solid var(--ls-border); border-radius: 0; } .dashboard-container .sidebar .user-info { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding-bottom: 1.1rem; margin-bottom: .85rem; border-bottom: 1px solid var(--ls-border); text-align: center; } .dashboard-container .sidebar .avatar { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(11, 99, 246, .18); background: var(--ls-bg); } .dashboard-container .sidebar .user-info h3 { margin: 0; font-size: 1.02rem; font-weight: 600; color: var(--ls-text); word-break: break-word; } .dashboard-container .sidebar > a { display: flex; align-items: center; gap: .65rem; padding: .68rem .8rem; border-radius: 3px; color: var(--ls-muted); font-size: .925rem; font-weight: 500; text-decoration: none; transition: background-color .14s ease, color .14s ease; } .dashboard-container .sidebar > a:hover { background: rgba(11, 99, 246, .08); color: var(--ls-primary); text-decoration: none; } .dashboard-container .sidebar > a.active { background: var(--ls-primary-fill); color: var(--ls-on-primary); } .dashboard-container .main-content { flex: 1 1 auto; min-width: 0; } /* Botón que despliega el menú lateral en móvil */ .ls-sidebar-toggle { display: none; align-items: center; justify-content: center; gap: .5rem; width: 100%; padding: .7rem 1rem; margin-bottom: 1rem; border: 1px solid var(--ls-border); border-radius: 3px; background: var(--ls-surface); color: var(--ls-text); font-size: .95rem; font-weight: 600; cursor: pointer; } @media (max-width: 991.98px) { .dashboard-container { flex-direction: column; /* Al apilar en columna, flex-start encogería las tarjetas al ancho de su contenido en lugar de ocupar todo el ancho disponible. */ align-items: stretch; gap: 0; padding: 1rem .85rem 2.5rem; } .dashboard-container .main-content { width: 100%; } .ls-sidebar-toggle { display: flex; } .dashboard-container .sidebar { position: static; flex: 1 1 auto; width: 100%; margin-bottom: 1rem; } /* Colapsado por defecto en móvil; se abre con el botón. */ .dashboard-container .sidebar[data-collapsed="true"] { display: none; } .dashboard-container .sidebar .user-info { flex-direction: row; text-align: left; } .dashboard-container .sidebar .avatar { width: 52px; height: 52px; } } /* ========================================================================== 3a. Bienvenida del panel ========================================================================== */ .ls-bienvenida { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.25rem; } .ls-bienvenida-texto { margin: 0; font-size: 1.6rem; font-weight: 600; color: var(--ls-text); line-height: 1.25; } /* La frase del día pesa menos que el saludo con el nombre. */ .ls-bienvenida-frase { display: block; margin-top: .15rem; font-size: 1rem; font-weight: 500; color: var(--ls-muted); } .ls-voz { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; flex: none; border: 1px solid var(--ls-border); border-radius: 50%; background: var(--ls-surface); color: var(--ls-primary); cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .ls-voz:hover, .ls-voz:focus-visible { background: var(--ls-primary-fill); border-color: var(--ls-primary-fill); color: var(--ls-on-primary); outline: none; } .ls-voz[hidden] { display: none; } /* Silenciado: se atenúa y se tacha con una barra. */ .ls-voz.is-silenciado { color: var(--ls-muted); position: relative; } .ls-voz.is-silenciado::after { content: ''; position: absolute; left: 8px; right: 8px; top: 50%; height: 2px; background: currentColor; transform: rotate(-45deg); } @media (max-width: 575.98px) { .ls-bienvenida-texto { font-size: 1.3rem; } .ls-bienvenida-frase { font-size: .92rem; } } /* ========================================================================== 3b. Billetera del panel ========================================================================== */ .ls-billetera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.5rem; margin-bottom: 1.25rem; border-radius: 0; background: var(--marca-azul); color: var(--ls-on-primary); } .ls-billetera-info { display: flex; flex-direction: column; gap: .25rem; min-width: 0; } .ls-billetera-etiqueta { font-size: .9rem; opacity: .85; } .ls-billetera-saldo { font-size: 2.1rem; font-weight: 600; line-height: 1.1; } .ls-billetera-aviso { display: inline-flex; align-items: center; gap: .4rem; margin-top: .35rem; padding: .3rem .6rem; border-radius: 3px; background: rgba(255, 255, 255, .18); font-size: .8rem; } .ls-billetera-acciones { display: flex; flex-wrap: wrap; gap: .6rem; } /* Botón secundario: sólo contorno sobre el degradado. El fondo hay que declararlo: la regla `.btn` de tema.css aplica `background: var(--btn-bg)`, que aquí resolvía a blanco y dejaba el texto blanco sobre blanco, invisible. */ .ls-billetera .btn-outline-light { background: transparent; border: 1px solid rgba(255, 255, 255, .55); color: #fff; border-radius: 3px; padding: .68rem 1.1rem; font-weight: 600; font-size: .875rem; transition: background-color .15s ease, border-color .15s ease; } .ls-billetera .btn-outline-light:hover, .ls-billetera .btn-outline-light:focus-visible { background: rgba(255, 255, 255, .18); border-color: #fff; color: #fff; } /* El botón principal ya trae su propio degradado azul, que aquí se perdería contra el fondo: se pasa a blanco sólido. */ .ls-billetera .btn-comprar, .ls-billetera .btn-comprar::before { background: #fff; } .ls-billetera .btn-comprar { color: #0C46A8; } .ls-billetera .btn-comprar:hover { color: #0C46A8; } @media (max-width: 575.98px) { .ls-billetera { padding: 1.25rem; } .ls-billetera-saldo { font-size: 1.75rem; } .ls-billetera-acciones .btn { flex: 1 1 auto; text-align: center; } } /* ========================================================================== 4. Tarjetas de estadística del panel ========================================================================== */ .dashboard-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; } .stat-box { padding: 1.5rem; background: var(--ls-surface); border: 1px solid var(--ls-border); border-radius: 0; transition: none; } /* ========================================================================== 5. Equivalente mínimo de las utilidades de Tailwind usadas en las vistas ========================================================================== */ .grid { display: grid; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .gap-6 { gap: 1.5rem; } .flex { display: flex; } .items-center { align-items: center; } .mx-auto { margin-left: auto; margin-right: auto; } .p-3 { padding: .75rem; } .p-4 { padding: 1rem; } .p-6 { padding: 1.5rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .py-8 { padding-top: 2rem; padding-bottom: 2rem; } .pt-4 { padding-top: 1rem; } .mr-4 { margin-right: 1rem; } .mt-4 { margin-top: 1rem; } .mb-8 { margin-bottom: 2rem; } .h-8 { height: 2rem; } .w-8 { width: 2rem; } .bg-white { background-color: var(--ls-surface); } .bg-blue-100 { background-color: rgba(11, 99, 246, .12); } .bg-orange-100 { background-color: rgba(255, 176, 32, .18); } .text-blue-600 { color: var(--marca-azul-texto); } .text-orange-600 { color: var(--ls-aviso); } .rounded-lg { border-radius: var(--ls-radius); } .rounded-full { border-radius: 50%; } .shadow-md { box-shadow: none; } .shadow-lg { box-shadow: none; } .border-t { border-top: 1px solid var(--ls-border); } .border-gray-100 { border-color: var(--ls-border); } .text-sm { font-size: .875rem; color: var(--ls-muted); } .text-lg { font-size: 1.05rem; } .text-3xl { font-size: 1.9rem; line-height: 1.2; } .font-medium { font-weight: 500; } .font-bold { font-weight: 600; } .transition-transform { transition: none; } @media (min-width: 768px) { .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================================== 5b. Recarga de saldo con pago manual ========================================================================== */ .ls-recarga-form { max-width: 520px; } .ls-metodos { display: flex; flex-wrap: wrap; gap: .6rem; } .ls-metodo { flex: 1 1 150px; display: flex; align-items: center; gap: .55rem; padding: .75rem .9rem; border: 1px solid var(--ls-border); border-radius: 0; background: var(--ls-surface); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; } .ls-metodo:hover { border-color: var(--ls-primary); } /* El método elegido se resalta entero, no sólo el círculo del radio. Ver .ls-metodo.es-elegida más abajo. */ .ls-metodo input { accent-color: var(--ls-primary); } .ls-metodo-nombre { font-weight: 600; font-size: .92rem; color: var(--ls-text); } /* ------------------------------------------------------------------ Pasarelas automáticas: tarjetas con logo ------------------------------------------------------------------ Sustituyen a un desplegable que escondía todas las formas de pago menos la primera. El logo es lo que reconoce el cliente antes que el nombre, así que manda él y el texto acompaña. */ .ls-pasarelas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; } .ls-pasarela { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: .75rem; border: 1px solid var(--ls-border); background: var(--ls-surface); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; } .ls-pasarela:hover { border-color: var(--ls-primary); } /* La elegida se marca con el borde y un fondo tenue del mismo acento: un solo color en toda la pantalla, sin una franja por tarjeta. Va por clase en vez de :has(input:checked) para no dejar sin resaltado a quien tenga un navegador anterior a :has() —Firefox no lo trajo hasta finales de 2023, y aquí entra gente con teléfonos viejos. La clase sale ya puesta del servidor, así que la primera se ve bien aunque el JS no llegue a ejecutarse. */ .ls-pasarela.es-elegida, .ls-metodo.es-elegida { border-color: var(--ls-primary); background: rgba(11, 99, 246, .07); } .ls-pasarela input { accent-color: var(--ls-primary); margin: 0; } .ls-pasarela-logo { display: flex; align-items: center; justify-content: flex-start; height: 32px; width: 100%; } .ls-pasarela-logo img { max-height: 32px; max-width: 100%; object-fit: contain; } /* Sin logo cargado no se deja un hueco: la inicial mantiene la fila a la misma altura y la rejilla no se descuadra. */ .ls-pasarela-inicial { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--ls-border); font-size: 1rem; font-weight: 600; color: var(--ls-muted); } .ls-pasarela-nombre { font-weight: 600; font-size: .92rem; color: var(--ls-text); } /* El aviso de la comisión de red, sólo en la tarjeta de cripto. */ .ls-pasarela-aviso { font-size: .78rem; line-height: 1.35; color: var(--ls-muted); } .ls-pasarela-recargo { font-size: .78rem; color: var(--ls-muted); font-variant-numeric: tabular-nums; } /* Atajos de importe */ .ls-montos { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; } .ls-monto { padding: .4rem .85rem; border: 1px solid var(--ls-border); background: var(--ls-surface); color: var(--ls-text); font-size: .85rem; font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color .15s ease; } .ls-monto:hover { border-color: var(--ls-primary); } .ls-metodo-datos { padding: 1rem; margin-bottom: 1rem; border: 1px dashed var(--ls-border); border-radius: 0; background: var(--ls-bg); } .ls-metodo-instrucciones { margin: 0 0 .65rem; font-size: .9rem; color: var(--ls-muted); } .ls-metodo-instrucciones:empty { display: none; } .ls-metodo-cuenta { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: .95rem; color: var(--ls-text); } .ls-metodo-cuenta strong { font-size: 1.05rem; letter-spacing: .02em; } .ls-copiar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--ls-border); border-radius: 3px; background: var(--ls-surface); color: var(--ls-muted); cursor: pointer; transition: color .15s ease, border-color .15s ease; } .ls-copiar:hover, .ls-copiar.is-copiado { color: var(--ls-primary); border-color: var(--ls-primary); } /* Cuánto debe enviar realmente el cliente: es el dato que va a copiar al hacer el Yape, así que se destaca sobre el resto del formulario. */ .ls-conversion { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; padding: .85rem 1rem; margin-bottom: 1rem; border: 1px solid rgba(34, 197, 94, .35); border-radius: 0; background: rgba(34, 197, 94, .09); } .ls-conversion[hidden] { display: none; } .ls-conversion-etiqueta { font-size: .9rem; color: var(--ls-text); } .ls-conversion-monto { font-size: 1.35rem; font-weight: 600; color: var(--ls-exito); line-height: 1.1; } .ls-conversion-tasa { font-size: .8rem; color: var(--ls-muted); } :root[data-theme="dark"] .ls-conversion-monto { color: var(--marca-verde); } .ls-metodo-qr { display: block; max-width: 210px; margin-top: .85rem; border-radius: 3px; } /* ========================================================================== 5a. Campo de WhatsApp con prefijo por país ========================================================================== */ .ls-whatsapp { display: flex; gap: .5rem; } .ls-whatsapp-pais { flex: 0 0 auto; /* Ancho suficiente para el prefijo sin comerse el campo del número. */ width: 7.5rem; padding-left: .6rem; padding-right: 1.6rem; font-size: .9rem; /* El nombre del país va en la lista desplegada, no en el campo cerrado. */ text-overflow: ellipsis; } .ls-whatsapp-numero { flex: 1 1 auto; min-width: 0; } @media (max-width: 400px) { .ls-whatsapp { flex-direction: column; } .ls-whatsapp-pais { width: 100%; } } /* ========================================================================== 5b2. Ventana de compra ========================================================================== */ .ls-compra-precio { display: block; font-size: 1.9rem; font-weight: 600; color: var(--ls-text); line-height: 1.1; } /* Precio de lista cuando hay oferta: tachado junto al precio grande. */ .ls-compra-precio-lista { font-size: .9rem; color: var(--ls-muted); } /* El anzuelo del plan de socios bajo el precio de la tarjeta: una sola línea pequeña en el color de marca. Es un dato con destino (la página de planes), por eso es un enlace y no un rótulo. */ .ls-gancho-plan { display: block; /* La fila del precio es flex: sin esto, en tarjetas sin oferta el anzuelo se pegaba al lado del precio en vez de debajo. */ flex-basis: 100%; width: 100%; font-size: .75rem; font-weight: 400; margin-top: .125rem; color: var(--marca-azul-texto, #0A47B0); text-decoration: none; } .ls-gancho-plan:hover { text-decoration: underline; color: var(--marca-azul-texto, #0A47B0); } :root[data-theme="dark"] .ls-gancho-plan, :root[data-theme="dark"] .ls-gancho-plan:hover { color: var(--marca-cian, #57A8FF); } /* La misma promesa dentro de la ventana de compra, con el ahorro dicho en claro. */ .ls-compra-gancho { margin: .75rem 0 0; padding: .5rem .75rem; border: 1px solid var(--marca-azul-texto, #0A47B0); border-radius: 3px; font-size: .8125rem; } .ls-compra-gancho a { color: var(--marca-azul-texto, #0A47B0); } :root[data-theme="dark"] .ls-compra-gancho { border-color: var(--marca-cian, #57A8FF); } :root[data-theme="dark"] .ls-compra-gancho a { color: var(--marca-cian, #57A8FF); } .ls-compra-equivalente { display: block; margin-top: .1rem; font-size: .9rem; color: var(--ls-muted); } .ls-compra-duracion { display: flex; align-items: baseline; gap: .5rem; padding: .75rem 0; } .ls-compra-etiqueta { font-size: .9rem; color: var(--ls-muted); } .ls-compra-duracion strong { font-size: 1.05rem; color: var(--ls-text); } /* Condiciones plegadas: están disponibles sin alargar la ventana. */ .ls-compra-condiciones details { padding: .55rem 0; border-top: 1px solid var(--ls-border); } .ls-compra-condiciones summary { cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--ls-primary); } .ls-compra-condiciones p { margin: .5rem 0 0; font-size: .875rem; color: var(--ls-muted); /* El texto se escribe con saltos de línea desde el panel. */ white-space: pre-line; } .ls-compra-saldo { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .85rem; padding: .7rem .9rem; border-radius: 0; background: rgba(34, 197, 94, .1); font-size: .9rem; color: var(--ls-text); } .ls-compra-saldo.is-insuficiente { background: rgba(255, 77, 94, .1); } .ls-compra-falta { font-weight: 600; color: var(--ls-peligro); } /* ========================================================================== 5c. Confirmación de compra y credenciales entregadas ========================================================================== */ .ls-gracias { max-width: 820px; margin: 0 auto; padding: 2.5rem 1rem 3rem; } .ls-gracias-cabecera { text-align: center; margin-bottom: 1.75rem; } .ls-gracias-check { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; margin-bottom: 1rem; border-radius: 50%; background: rgba(34, 197, 94, .14); color: var(--ls-exito); font-size: 1.6rem; } .ls-gracias-cabecera h1 { margin: 0 0 .4rem; font-size: 1.75rem; font-weight: 600; color: var(--ls-text); } .ls-gracias-cabecera p { margin: 0; color: var(--ls-muted); } .ls-gracias-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.1rem; } .ls-gracias-datos span { display: block; font-size: .8rem; color: var(--ls-muted); } .ls-gracias-datos strong { font-size: 1.05rem; color: var(--ls-text); word-break: break-word; } .ls-gracias-total { color: var(--ls-primary) !important; } /* Credenciales: cada dato en su fila, con botón de copiar. */ .ls-credenciales { display: flex; flex-direction: column; gap: .6rem; } .ls-credencial { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; padding: .8rem 1rem; border: 1px solid var(--ls-border); border-radius: 0; background: var(--ls-bg); } .ls-credencial-etiqueta { flex: 0 0 190px; font-size: .85rem; color: var(--ls-muted); } .ls-credencial-valor { flex: 1 1 200px; font-weight: 600; color: var(--ls-text); word-break: break-all; } .ls-gracias-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.75rem; } @media (max-width: 575.98px) { .ls-credencial-etiqueta { flex: 1 1 100%; } .ls-gracias-cabecera h1 { font-size: 1.4rem; } } /* ========================================================================== 5d. Buscador de la lista de pedidos ========================================================================== Los filtros, la cuenta regresiva y los botones de cada fila viven en assets/pedidos.css, que cargan también las pantallas del administrador. ========================================================================== */ .ls-buscador-pedidos { max-width: 340px; flex: 1 1 240px; margin: 0; } @media (max-width: 575.98px) { .ls-buscador-pedidos { max-width: 100%; } } /* ========================================================================== 5e. Soporte: conversación del ticket ========================================================================== */ .ls-ticket-cabecera { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem; padding-bottom: 1rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--ls-border); } .ls-ticket-estados { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } .ls-conversacion { display: flex; flex-direction: column; gap: .85rem; margin-bottom: 1.5rem; } .ls-mensaje { max-width: 78%; padding: .85rem 1rem; border-radius: 0; font-size: .93rem; } .ls-mensaje p { margin: 0; /* El mensaje se escribe con saltos de línea; hay que conservarlos. */ white-space: pre-line; color: var(--ls-text); } .ls-mensaje-autor { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-bottom: .3rem; font-weight: 600; font-size: .85rem; color: var(--ls-text); } .ls-mensaje-autor small { font-weight: 400; color: var(--ls-muted); } /* Los mensajes del cliente a la derecha y los de soporte a la izquierda: así se ve de un vistazo quién dijo qué. */ .ls-mensaje--cliente { align-self: flex-end; background: rgba(11, 99, 246, .1); } .ls-mensaje--soporte { align-self: flex-start; background: var(--ls-bg); border: 1px solid var(--ls-border); } .ls-responder { padding-top: 1.1rem; border-top: 1px solid var(--ls-border); } @media (max-width: 575.98px) { .ls-mensaje { max-width: 92%; } } /* ========================================================================== 6. Tablas y tarjetas del panel — legibles en móvil ========================================================================== */ .ls-panel { padding: 1.5rem; background: var(--ls-surface); border: 1px solid var(--ls-border); border-radius: 0; } .ls-panel-title { margin: 0 0 1.15rem; font-size: 1.15rem; font-weight: 600; color: var(--ls-text); } .main-content .table-responsive { -webkit-overflow-scrolling: touch; } .main-content .table { width: 100%; margin-bottom: 0; } .main-content .table th { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ls-muted); border-bottom: 1px solid var(--ls-border); white-space: nowrap; } .main-content .table td { vertical-align: middle; border-bottom: 1px solid var(--ls-border); } .main-content h1, .main-content h2 { font-size: 1.6rem; font-weight: 600; color: var(--ls-text); } @media (max-width: 575.98px) { .main-content h1, .main-content h2 { font-size: 1.3rem; } .stat-box { padding: 1.15rem; } .text-3xl { font-size: 1.6rem; } } /* ========================================================================== 9. Restos del tema original con color propio ========================================================================== tema.css trae sus verdes y rojos escritos a mano. Sobre el fondo oscuro de la marca ninguno llegaba al mínimo legible (medidos: 2.26 el verde de la renovación, 2.82 el rojo del stock), así que aquí se pasan a la paleta. ========================================================================== */ /* Cintas de disponibilidad. El color dice lo mismo que el texto: verde si lo tienes, ámbar si hay que pedirlo. Con texto Tinta encima, que sobre estos dos tonos da 8.61 y 10.73; en blanco daba 3.42. La cinta diagonal se queda por decisión de Felix (2026-08-07): a su público joven le gusta. El selector lleva `.cinta-izquierda` porque así lo escribe tema.css. */ .cinta-izquierda .cinta-color.EN_STOCK { background: var(--marca-verde); color: var(--marca-tinta); } .cinta-izquierda .cinta-color.A_PEDIDO { background: var(--marca-ambar); color: var(--marca-tinta); } /* Precio de renovación y avisos de stock. */ :root[data-theme="dark"] .text-complementario-1 { color: var(--marca-verde) !important; } :root[data-theme="dark"] .text-danger, :root[data-theme="dark"] .text-complementario-5 { color: var(--marca-rojo) !important; } :root[data-theme="dark"] .text-tema-confirmacion { color: var(--marca-verde) !important; } /* Contador del carrito: círculo pequeño, así que el texto va en Tinta. */ .notification-badge { background: var(--marca-rojo) !important; color: var(--marca-tinta) !important; } /* El pie es oscuro en los dos temas, pero tema.css le pone al título un gris pensado para fondo claro: 1.91 sobre ese fondo, ilegible. */ .footer-main .footer-title, .footer-main .footer-title span { color: var(--marca-humo); } /* Selector de duración de la ficha de producto. El tema le pone un texto casi negro que sobre el fondo Tinta daba 1.03: literalmente no se veía. Se pasa al color de realce, que ya es azul en claro y cian en oscuro. */ .btn.btn-outline-primary { color: var(--ls-primary); border-color: var(--ls-primary); background-color: transparent; } .btn.btn-outline-primary:hover, .btn.btn-outline-primary:focus-visible, .btn.btn-outline-primary.active { background-color: var(--ls-primary-fill); border-color: var(--ls-primary-fill); color: var(--ls-on-primary); } /* Enlaces del tema con azul propio: 3.28 sobre Tinta. */ :root[data-theme="dark"] .text-complementario-16, :root[data-theme="dark"] .text-colorprueba { color: var(--marca-cian) !important; } /* ========================================================================== 10. Logo según el fondo ========================================================================== El kit trae el lockup en dos acabados: uno con la palabra en tinta, para fondos claros, y otro con la palabra en Humo y el play en cian, para fondos oscuros. En Ajustes se guarda el de fondo claro, porque la cabecera de la tienda es blanca; aquí se cambia al otro donde el fondo es oscuro. Se usa `content: url()` porque el lo pinta Blade con la ruta de los ajustes y no se puede tocar su src desde CSS. ========================================================================== */ :root[data-theme="dark"] img[src*="latam-streaming-lockup"] { content: url('/assets/logo/latam-streaming-lockup-claro.svg'); } /* El pie es oscuro en los dos temas. */ .footer-main img[src*="latam-streaming-lockup"] { content: url('/assets/logo/latam-streaming-lockup-claro.svg'); } /* --- Tamaño del logo en la cabecera --------------------------------------- tema.css lo dimensiona con `max-height: 70px` y sin límite de ancho útil (`max-width: 250px`). Con el lockup, que es muy apaisado (3.08:1), eso da 215 px de ancho dentro de una columna de 150 en el móvil: se salía y se metía debajo del buscador. No basta con encogerlo: el manual fija 180 px de ancho como tamaño mínimo del lockup, y por debajo de eso la palabra deja de leerse. Por eso en pantallas estrechas se cambia al icono, que es lo que el kit trae para espacios pequeños (mínimo 48 px). El badge lleva su propio degradado, así que funciona igual sobre la cabecera blanca y sobre la oscura. */ #pagina-publica-g .marca img { max-width: 100%; } @media (max-width: 991.98px) { #pagina-publica-g .marca img { content: url('/assets/logo/latam-streaming-icono.svg'); width: 52px; height: 52px; max-height: 52px; } /* El enlace del logo viene centrado del tema. Con el lockup daba igual porque lo llenaba entero; el icono, más estrecho, quedaba flotando en mitad del hueco y desalineado del botón de menú que tiene encima. */ #pagina-publica-g .marca { text-align: left; } } /* ========================================================================== 11. Ventanas modales en tema oscuro ========================================================================== Bootstrap deja `.modal-content` en blanco fijo. Como el texto de dentro sí pasa a los colores del tema, la ventana de compra salía con el título en Humo sobre blanco (1.08 medido): ilegible. Se pinta la superficie, y con ella las piezas que traen color propio y quedarían fuera de sitio. ========================================================================== */ :root[data-theme="dark"] .modal-content { background-color: var(--ls-surface); border-color: var(--ls-border); } :root[data-theme="dark"] .modal-header, :root[data-theme="dark"] .modal-footer { border-color: var(--ls-border); } /* El pie llevaba un velo negro al 4% que sobre fondo oscuro no separa nada. */ :root[data-theme="dark"] .modal-footer { background-color: rgba(255, 255, 255, .03); } /* La X viene dibujada en negro sobre transparente. */ :root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* El precio lo pinta tema.css con un selector largo que gana al de aquí; sobre la superficie oscura ese casi negro desaparecía. */ :root[data-theme="dark"] .producto-encabezado .producto-encabezado-informacion .ls-compra-precio, :root[data-theme="dark"] .ls-compra-precio { color: var(--ls-text); } /* Botón Cancelar: gris claro con texto negro, que sobre la ventana oscura quedaba como un parche. Se pasa a botón de contorno. */ :root[data-theme="dark"] .modal .btn-secondary, :root[data-theme="dark"] .modal .boton-cancelar { background-color: transparent; border: 1px solid var(--ls-border); color: var(--ls-text); } :root[data-theme="dark"] .modal .btn-secondary:hover, :root[data-theme="dark"] .modal .boton-cancelar:hover { background-color: rgba(255, 255, 255, .06); border-color: var(--ls-primary); color: var(--ls-text); } /* tema.css deja `.text-muted` en #B0BAC3, que sobre blanco da 1.97: el texto secundario de la tienda —fechas de compra, avisos bajo los botones, precios de renovación— era prácticamente invisible. Se pasa al gris de la marca, que da 5.36. En oscuro ya se corrige más arriba. */ body .text-muted, body .muted { color: var(--ls-muted) !important; } /* ========================================================================== 12. Etiquetas de estado y paginación de la tienda ========================================================================== Son clases de Bootstrap que el tema deja en sus propios tonos. Sobre blanco ninguna llegaba al mínimo (medidos: 3.13 el verde «Activo», 2.16 el ámbar «Pendiente», 2.84 las flechas y 1.00 el número de la página activa, que quedaba del mismo color que su fondo). Se aplica la misma regla que en el resto: sobre los tonos vivos el texto va en Tinta; sobre azul y rojo oscurecido, en blanco. ========================================================================== */ body .badge.bg-success { background-color: var(--marca-verde) !important; color: var(--marca-tinta) !important; } body .badge.bg-warning { background-color: var(--marca-ambar) !important; color: var(--marca-tinta) !important; } body .badge.bg-info { background-color: var(--marca-cian) !important; color: var(--marca-tinta) !important; } body .badge.bg-primary { background-color: var(--marca-azul) !important; color: #fff !important; } body .badge.bg-danger { background-color: var(--marca-rojo-texto) !important; color: #fff !important; } body .badge.bg-secondary { background-color: #5A6B8C !important; color: #fff !important; } body .page-link { color: var(--marca-azul-texto); background-color: var(--ls-surface); border-color: var(--ls-border); } /* El fondo lleva !important porque el tema lo declara así: sin eso el número de la página activa quedaba en blanco sobre blanco. */ body .page-item.active .page-link, body .page-item[aria-current="page"] .page-link, body .page-link[aria-current="page"] { background-color: var(--marca-azul) !important; border-color: var(--marca-azul) !important; color: #fff !important; } body .page-item.disabled .page-link { color: var(--ls-muted); background-color: var(--ls-surface); } :root[data-theme="dark"] body .page-link { color: var(--marca-cian); } /* ========================================================================== 13. Aviso de sesión suplantada ========================================================================== Cuando un administrador entra al portal de un cliente para ayudarle, todo lo que haga queda hecho a nombre de esa persona. La barra usa el ámbar de la marca —el color de «atención»— y no se puede cerrar: desaparece sólo al salir del portal. ========================================================================== */ .ls-suplantando { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; padding: .6rem 1rem; background: var(--marca-ambar); color: var(--marca-tinta); font-size: .9rem; font-weight: 600; text-align: center; } .ls-suplantando i { margin-right: .3rem; } .ls-suplantando-salir { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .8rem; border: 0; border-radius: 3px; background: var(--marca-tinta); color: var(--marca-humo); font-size: .82rem; font-weight: 600; cursor: pointer; white-space: nowrap; } .ls-suplantando-salir:hover { background: #12203d; color: #fff; } /* --- Entrada al programa de vendedores (barra superior) ------------------- Mismo aspecto que el resto de la barra; lo único propio es el menú que despliega. En movil se oculta el rotulo largo y queda solo el enlace. */ .ls-vendedor-menu { position: relative; } .ls-vendedor-enlace { cursor: pointer; font-weight: 600; } .ls-vendedor-flecha { font-size: 0.75rem !important; color: inherit !important; transition: transform .15s ease; } .ls-vendedor-menu.is-abierto .ls-vendedor-flecha { transform: rotate(180deg); } .ls-vendedor-opciones { position: absolute; top: 100%; right: 0; z-index: 60; min-width: 12rem; padding: 0.25rem 0; border: 1px solid var(--ls-border); border-radius: 3px; background: #fff; } .ls-vendedor-opciones a { display: block; padding: 0.5rem 0.75rem; color: var(--ls-text); font-size: 0.875rem; text-decoration: none; white-space: nowrap; } .ls-vendedor-opciones a:hover { background: rgba(11, 99, 246, .07); color: var(--ls-primary); text-decoration: none; } :root[data-theme="dark"] .ls-vendedor-opciones { background: var(--marca-grafito); border-color: #1E2A4A; } :root[data-theme="dark"] .ls-vendedor-opciones a { color: var(--marca-humo); } :root[data-theme="dark"] .ls-vendedor-opciones a:hover { background: rgba(34, 211, 238, .1); color: var(--marca-cian); } /* --- Proveedor en la tarjeta del producto --------------------------------- Solo sale en los productos de terceros. Va pequeno y en gris: informa de quien responde, no compite con el nombre del producto. */ /* Vive en la fila de datos de la tarjeta (junto al stock, encima de la renovacion), alineada a la derecha como en la ficha de al lado. Sobre el nombre empujaba el titulo y cada tarjeta arrancaba a una altura distinta. */ .art-proveedor { margin: 0; font-size: 0.75rem; line-height: 1.4; text-align: right; align-self: center; } .art-proveedor-rotulo { color: var(--ls-muted, #5A6B8C); margin-right: 0.25rem; display: block; } .art-proveedor strong { font-weight: 600; } /* --- Ficha del producto ---------------------------------------------------- Filas separadas por una linea de 1px dentro de una sola superficie, no tarjetas sueltas con hueco entre ellas. */ .art-ficha { margin: 0 0 var(--e-5); border-top: var(--linea) solid var(--ls-border); } .art-ficha > div { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); padding: var(--e-3) 0; border-bottom: var(--linea) solid var(--ls-border); } .art-ficha dt { flex: 0 0 10rem; font-weight: var(--p-normal); color: var(--ls-muted, #5A6B8C); font-size: var(--t-3); } .art-ficha dd { flex: 1 1 12rem; margin: 0; font-size: var(--t-3); font-weight: var(--p-medio); } .art-ficha-nota { display: block; font-weight: var(--p-normal); font-size: var(--t-2); color: var(--ls-muted, #5A6B8C); } /* ========================================================================== 99. El apagador del tema base ========================================================================== tema.css es la plantilla original y sigue cargándose debajo de esta hoja: sus sombras, brillos y radios de 30px reaparecen en cada rincón que esta hoja no pisa. En vez de perseguirlos regla a regla — son cientos — se apagan de una vez. El !important está justificado justo aquí: es la última palabra de una capa que existe para tener la última palabra. ========================================================================== */ .pagina-publica, .pagina-publica *, .scrollto, .pagina-publica *::before, .pagina-publica *::after, body > .modal *, /* Los flotantes viven fuera de .pagina-publica y hay que nombrarlos. */ .welcome-message, .welcome-message *, .whatsapp-button, .whatsapp-button *, .notification-badge, .my-modal, .my-modal *, .whatsapp-tooltip { box-shadow: none !important; text-shadow: none !important; } /* Los pesos: nada por encima de 600. La negrita del navegador (b, strong, titulares del tema) baja al peso fuerte de la escala. */ .pagina-publica h1, .pagina-publica h2, .pagina-publica h3, .pagina-publica h4, .pagina-publica h5, .pagina-publica h6, .pagina-publica b, .pagina-publica strong, .pagina-publica .fw-bold, .pagina-publica .font-bold, .welcome-message, .whatsapp-tooltip, .notification-badge, .my-modal-close { font-weight: 600 !important; } /* Los degradados sueltos del tema: planos. */ /* La especificidad del tema (.megamenu .megamenu-nav.alpha > ...) hay que igualarla: una clase suelta pierde aunque lleve !important. */ .megamenu .megamenu-nav.alpha > .megamenu-nav-btn, .megamenu .megamenu-nav.omega > .megamenu-nav-btn, .megamenu-nav-btn { background: var(--ls-surface) !important; background-image: none !important; } .whatsapp-tooltip { background: var(--ls-surface) !important; border: 1px solid var(--ls-border) !important; border-radius: 3px !important; color: var(--ls-text) !important; } /* Radios del tema fuera de la escala. */ .welcome-message { border-radius: 0 !important; } .modal-content { border-radius: 0 !important; } /* --- Franja de la app en el pie ------------------------------------------- Como la de MercadoPago pero con nuestras reglas: fondo de superficie con sus lineas de 1px, sin amarillos ni sombras. Los botones si van en negro: son las insignias de las tiendas y en negro es como se reconocen. */ .ls-app-banda { background: var(--ls-surface); border-top: 1px solid var(--ls-border); border-bottom: 1px solid var(--ls-border); padding: 3rem 1rem; } .ls-app-titulo { font-size: 1.5625rem; font-weight: 600; margin: 0 0 0.5rem; color: var(--ls-text); } .ls-app-texto { color: var(--ls-muted); margin: 0 0 1.5rem; } .ls-app-botones { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; } .ls-app-boton { display: inline-flex; align-items: center; gap: 0.6rem; background: #060B1A; color: #fff; border-radius: 3px; padding: 0.5rem 1rem; text-decoration: none; line-height: 1.15; } .ls-app-boton:hover { color: #fff; background: #1E2A4A; } .ls-app-boton svg { width: 1.6rem; height: 1.6rem; flex: 0 0 auto; } .ls-app-boton span { display: flex; flex-direction: column; text-align: left; font-weight: 600; } .ls-app-boton small { font-size: 0.6875rem; font-weight: 400; opacity: .85; } /* En oscuro el negro se confunde con el fondo: borde para despegarlo. */ :root[data-theme="dark"] .ls-app-boton { border: 1px solid var(--ls-border); } /* --- El pie por columnas --------------------------------------------------- Logo a la izquierda y columnas de enlaces, como la referencia: titulos en gris, enlaces en tinta, y el libro de reclamaciones con su icono porque es el unico que la ley obliga a encontrar. */ .ls-pie { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; padding: 3rem 0; } @media (max-width: 48rem) { .ls-pie { grid-template-columns: 1fr 1fr; } .ls-pie-marca { grid-column: 1 / -1; } } .ls-pie-logo { max-height: 44px; width: auto; } .ls-pie-columna { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; } /* El pie del tema es OSCURO en los dos modos: sus colores van fijos, no con las variables del tema. Con var(--ls-text), en modo claro los enlaces salian en tinta sobre negro: 1.01 de contraste, invisibles. */ .ls-pie-columna h4 { font-size: 0.875rem; font-weight: 600; color: #93A2C4; margin: 0 0 0.25rem; } .ls-pie-columna a { font-size: 0.875rem; color: #EDF2FC; text-decoration: none; } .ls-pie-columna a:hover { color: #fff; text-decoration: underline; } .ls-pie-libro { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid rgba(237, 242, 252, .2); } .ls-pie-libro { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; } .ls-pie-libro-img { width: 84px; height: auto; display: block; border-radius: 3px; } .ls-pie-libro-texto { font-size: 0.8125rem; line-height: 1.45; color: #93A2C4; } .ls-pie-libro-texto u { color: #EDF2FC; } /* La barra inferior: copyright a un lado, redes al otro. */ .ls-pie-abajo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; } .ls-pie-redes { display: flex; gap: 1rem; /* Hueco para el boton flotante de WhatsApp: sin el, la X quedaba debajo del globo verde. */ margin-right: 88px; } .ls-pie-redes a { color: #93A2C4; font-size: 1.05rem; text-decoration: none; } .ls-pie-redes a:hover { color: #EDF2FC; } /* --- Boletin --------------------------------------------------------------- Una franja con dos mitades: el argumento y el formulario. Delimitada por lineas, sin figuras flotando ni fondos de color. */ .ls-boletin { padding: 3rem 0; } .ls-boletin-caja { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; padding: 2rem 0; border-top: 1px solid var(--ls-border); border-bottom: 1px solid var(--ls-border); } @media (max-width: 48rem) { .ls-boletin-caja { grid-template-columns: 1fr; } } .ls-boletin-titulo { font-size: 1.25rem; font-weight: 600; margin: 0 0 0.25rem; color: var(--ls-text); } .ls-boletin-texto { color: var(--ls-muted); margin: 0; } .ls-boletin-forma { display: flex; gap: 0.5rem; } .ls-boletin-forma input { flex: 1 1 auto; padding: 0.55rem 0.75rem; border: 1px solid var(--ls-border); border-radius: 3px; background: var(--ls-field-bg); color: var(--ls-text); } .ls-boletin-forma button { flex: 0 0 auto; padding: 0.55rem 1.1rem; border: 0; border-radius: 3px; background: var(--marca-azul); color: #fff; font-weight: 600; } .ls-boletin-forma button:hover { background: var(--ls-primary-dark, #0B3FA8); } /* --- Credito de LatamSuite ------------------------------------------------- En la barra inferior, entre el copyright y las redes. Discreto: firma, no anuncio. El logo sube un poco de opacidad al pasar, sin saltos. */ .ls-pie-credito { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: #93A2C4; font-size: 0.8125rem; } .ls-pie-credito img { height: 20px; width: auto; display: block; opacity: .85; } .ls-pie-credito:hover { color: #EDF2FC; } .ls-pie-credito:hover img { opacity: 1; } /* Numero de pedido con su boton de copiar al lado, sin partirse de linea. */ .ls-pedido-numero { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }