— pero deja de competir visualmente con lo que la persona viene a ver. */ .pcweb--auth-account .pcweb-pagina__titulo { font-size: .8125rem; letter-spacing: .14em; color: var(--pcweb-texto-3); margin-block-end: var(--pcweb-esp-3); } .pcweb--auth-account .pcweb-seccion--auth { max-width: 64rem; padding-block-start: var(--pcweb-esp-4); } /* -------------------------------------------------------------------------- PROFUNDIDAD. Tres niveles, cero tokens nuevos: nivel 0 fondo de pagina --pcweb-fondo #0a0a0a (L* 2.74) nivel 1 tarjetas --pcweb-superficie #141414 (L* 6.32) nivel 2 superficie interior --pcweb-superficie-3 #1a1a1a (L* 9.26) El apunte del correo baja a --pcweb-superficie-2 (#111111) para leerse como nota y no como una tercera tarjeta. Antes TODO el panel era #141414 —contenedor, tarjetas, estado vacio y consejo, contraste 1.0000 entre capas— y por eso se veia plano. -------------------------------------------------------------------------- */ .pcweb-panel__saludo { display: flex; align-items: center; gap: var(--pcweb-esp-4); margin-block-end: var(--pcweb-esp-5); } /* El disco solo se pinta cuando hay nombre humano (lo decide la plantilla). Ya no es un circulo rosa macizo: superficie de nivel 2 con la inicial en acento, que es un acento pequeño. */ .pcweb-panel__inicial { flex: 0 0 auto; width: 3.25rem; height: 3.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--pcweb-superficie-3); border: 1px solid var(--pcweb-borde); color: var(--pcweb-acento); font-size: 1.375rem; font-weight: 700; line-height: 1; } .pcweb-panel__quien { min-width: 0; } .pcweb-panel__hola { font-size: 1.5rem; line-height: 1.2; font-weight: 700; /* Ya no cuelga del ancho del correo, pero un nombre largo tampoco puede desbordar. */ overflow-wrap: break-word; } /* Afirmacion de intencion, no correccion: hoy el span ya hereda el blanco del cuerpo. Se deja explicito para que el nombre no acabe heredando el acento si alguien vuelve a pintar el saludo, que es justo lo que hacia la regla .pcweb-panel__correo que aqui se retiro. */ .pcweb-panel__nombre { color: var(--pcweb-texto); } /* La caida tipografica: del titular a 24px a un gris pequeño y tranquilo. */ .pcweb-panel__texto { color: var(--pcweb-texto-3); font-size: .875rem; margin-block-start: var(--pcweb-esp-2); } /* El apunte del correo. Informativo, no alarma: sin icono, sin color de estado y sobre una superficie mas baja que las tarjetas. El unico enfasis es «Ojo, sobrino» en blanco. */ .pcweb-consejo { display: block; padding: var(--pcweb-esp-4); margin-block-end: var(--pcweb-esp-5); background: var(--pcweb-superficie-2); border: 1px solid var(--pcweb-borde); border-radius: var(--pcweb-radio); } .pcweb-consejo__texto { color: var(--pcweb-texto-2); font-size: .9375rem; line-height: 1.65; } /* «Contactanos» va dentro de una frase. `.pcweb-enlace` es inline-flex con min-height 44px, y esa caja estiraba la linea que lo contiene abriendo un escalon en mitad del parrafo. Vuelve al flujo del texto: WCAG 2.5.8 exceptua expresamente los enlaces en linea dentro de una frase. */ .pcweb-consejo__texto .pcweb-enlace { display: inline; min-height: 0; } .pcweb-consejo__titulo { color: var(--pcweb-texto); font-weight: 700; } /* Caja atomica: el correo salta entero a la linea siguiente antes de partirse, y solo se parte si ni siquiera cabe el solo. Asi no se deshoja letra a letra en 375px. */ .pcweb-consejo__correo { display: inline-block; max-width: 100%; color: var(--pcweb-texto); font-weight: 600; /* `anywhere` y no `break-word`: solo `anywhere` reduce tambien el ancho min-content, que es lo que impide que la direccion empuje el contenedor. Partir letra a letra ya no ocurre porque la caja tiene ancho de sobra; lo que se corrigio antes fue el ancho, no el modo. */ overflow-wrap: anywhere; } /* El contenedor del panel es SOLO una rejilla. Heredaba fondo, borde, radio, relleno y sombra de .pcweb-panel (seccion 11), que es una tarjeta de otro componente: quedaba una tarjeta conteniendo otras dos del mismo color. Se despinta aqui, con el scope de la ruta, para no tocar esa regla —la usan otras pantallas—. El scope (0,2,0) tambien vence al padding que la consulta de 1024px le pone a .pcweb-panel (0,1,0). */ .pcweb--auth-account .pcweb-panel { display: grid; gap: var(--pcweb-esp-5); background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; } .pcweb--auth-account .pcweb-panel__principal, .pcweb--auth-account .pcweb-panel__lateral { background: var(--pcweb-superficie); border: 1px solid var(--pcweb-borde); border-radius: var(--pcweb-radio); padding: var(--pcweb-esp-5); box-shadow: var(--pcweb-sombra-suave); /* Item de rejilla: sin esto su min-width es «auto» = min-content, y una direccion larga sin espacios ensancha la columna hasta sacar la pagina del viewport. */ min-width: 0; } /* Etiquetas de seccion, no titulares. Mismo lenguaje que el rotulo «MI CUENTA» de la H1 (.pcweb--auth-account .pcweb-pagina__titulo): 13px, 700, versalita y tracking ancho. Deja que el titular del saludo y el del estado vacio manden. */ .pcweb--auth-account .pcweb-panel__titulo { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; /* Un escalon por encima del rotulo «MI CUENTA» de la H1, que resuelve a estos mismos cinco valores en --pcweb-texto-3: con el mismo gris, titulo de pagina y rotulos de seccion quedaban tipograficamente indistinguibles. */ color: var(--pcweb-texto-2); margin-block-end: var(--pcweb-esp-4); } /* El correo es informacion, NO un campo. Con fondo propio y esquinas redondeadas se leia como un input deshabilitado e invitaba a intentar editarlo. Aqui es una etiqueta en versalitas y un valor en blanco, sin caja, sin borde y sin superficie: cero affordance de edicion. Se apila SIEMPRE: la rejilla de dos columnas que .pcweb-datos adopta desde 768px dejaba 224px para la etiqueta y 22px para el valor, y el correo se partia letra a letra en vertical. */ .pcweb-panel__lateral .pcweb-datos { display: flex; flex-direction: column; gap: var(--pcweb-esp-1); margin-block: 0 var(--pcweb-esp-4); /* El @media de 768px le pone `grid-template-columns` y `align-items: baseline`. Lo primero muere al no ser rejilla; lo segundo SI se aplica y en flex-column resuelve como flex-start, dejando dt y dd ajustados al contenido. Se neutraliza para no depender de eso. */ align-items: stretch; } .pcweb-panel__lateral .pcweb-datos__clave { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--pcweb-texto-3); } .pcweb-panel__lateral .pcweb-datos__valor { color: var(--pcweb-texto); /* Quien sostiene de verdad la columna es `overflow-wrap: anywhere` —reduce el ancho min-content— junto al `min-width: 0` del ITEM DE REJILLA, que esta arriba sobre .pcweb-panel__lateral. Este min-width es redundancia defensiva: en un flex de columna el eje principal es el vertical, asi que min-width:auto ya resuelve a 0 y esta linea no cambia nada hoy. Se conserva por si el contenedor deja de ser flex-column. */ min-width: 0; overflow-wrap: anywhere; } /* Estado vacio. Nivel 2 y borde SOLIDO: el punteado sobre gris fuerte lo hacia parecer una zona de arrastre o una caja sin cargar. El grafico es un SVG del propio marcado — no hay asset de marca dentro del plugin y la CSP (img-src 'self' data:) no admitiria uno externo. */ .pcweb--auth-account .pcweb-vacio { display: flex; flex-direction: column; align-items: center; text-align: center; /* Todo el bloque se aprieta un punto. Con 48px de relleno vertical, 12px de separacion y un icono de 56px, la tarjeta de compras medida en el navegador a 1280 daba 386px contra los 281px del panel Cuenta —105px de diferencia— y dejaba un vacio grande a su derecha. Ojo: al quitar la caja del correo y el filete de las acciones, la columna derecha tambien encogio, asi que recortar solo el relleno no cerraba el hueco. El CTA conserva su propio margen para no quedar pegado al texto. */ gap: var(--pcweb-esp-2); padding: var(--pcweb-esp-5) var(--pcweb-esp-4); background: var(--pcweb-superficie-3); border: 1px solid var(--pcweb-borde); border-radius: var(--pcweb-radio); } /* El icono deja de ser rosa: 64px de acento competian con el CTA que tiene tres filas debajo. Baja al gris apagado, y de 64px a 40px en dos pasos (56 primero, 40 al apretar el bloque). */ .pcweb--auth-account .pcweb-vacio__icono { width: 2.5rem; height: 2.5rem; color: var(--pcweb-texto-3); } .pcweb--auth-account .pcweb-vacio__titulo { font-size: 1.125rem; font-weight: 700; } .pcweb--auth-account .pcweb-vacio__texto { color: var(--pcweb-texto-3); font-size: .9375rem; } .pcweb--auth-account .pcweb-vacio .pcweb-boton { margin-block-start: var(--pcweb-esp-3); } /* Navegacion del sitio en la cabecera del panel. */ .pcweb-cabecera__nav { display: flex; flex-wrap: wrap; gap: var(--pcweb-esp-4); } .pcweb-cabecera__enlace { display: inline-flex; align-items: center; min-height: var(--pcweb-toque); text-decoration: none; font-size: .9375rem; font-weight: 600; } /* -------------------------------------------------------------------------- EL ROSA, ACOTADO. Mismo caso que `.pcweb a.pcweb-boton--primario`: la regla generica `.pcweb a` (0,1,1) gana a la clase del componente (0,1,0). Son dos casos DISTINTOS y conviene no confundirlos: la cabecera SI tenia su regla en gris y `.pcweb a` se la pisaba —esto repara un defecto de cascada—; las acciones del lateral eran rosas por diseño, porque `.pcweb-enlace` declara var(--pcweb-enlace), que es el mismo #e91e8c —esto es una decision nueva, no un arreglo—. En ambos casos la forma del selector es la misma. Se reafirma el color con la misma forma de selector. NO se toca `.pcweb a`, ni `.pcweb-enlace`, ni las variables: esas pintan login, registro, recuperacion y reinicio, que estan aprobadas. Queda rosa lo que debe: el fondo del CTA, el hover/foco, la inicial y el «.PRO» de la marca. -------------------------------------------------------------------------- */ .pcweb a.pcweb-cabecera__enlace { color: var(--pcweb-texto-2); } .pcweb a.pcweb-cabecera__enlace:hover, .pcweb a.pcweb-cabecera__enlace:focus-visible { color: var(--pcweb-acento); } /* Acotado por .pcweb-panel__lateral, que solo existe en esta ruta. */ .pcweb .pcweb-panel__lateral .pcweb-enlace { color: var(--pcweb-texto-2); } .pcweb .pcweb-panel__lateral .pcweb-enlace:hover, .pcweb .pcweb-panel__lateral .pcweb-enlace:focus-visible { color: var(--pcweb-acento); } /* EL ARO DEL FOCO. La combinacion `.pcweb-boton:focus-visible { outline: 3px solid }` (L146-150) + `.pcweb-boton--primario:focus-visible { outline-color: #ffffff }` (L1159) dibujaba un aro BLANCO de 3px al llegar por teclado. En reposo no habia nada —lo comprobe en los pixeles de la captura—, pero al enfocarlo pesaba mas que el propio boton. Aqui vuelve al lenguaje de foco del sitio real, que es rosa, y el offset lo separa del relleno para que no se funda con el: el aro cae sobre la superficie oscura, donde el rosa da 4,17:1, por encima del 3:1 exigido. ACOTADO al CTA del panel: la regla blanca de L1159 tambien alimenta los cinco botones de envio de las pantallas aprobadas, y esas no se tocan. */ .pcweb--auth-account .pcweb-vacio .pcweb-boton--primario:focus-visible { /* var(--pcweb-foco) y NO var(--pcweb-acento): hoy los dos valen #e91e8c, pero el foco de toda la hoja se manda desde ese token; cablearlo al acento crearia una divergencia que nadie veria hasta el dia en que se cambiara uno de los dos. 3px, el mismo grosor que el resto de la hoja: el blanco daba ~15:1 y el rosa da 4,17:1, asi que bajar tambien el grosor restaba señal dos veces a quien peor ve. */ outline: 3px solid var(--pcweb-foco); outline-offset: 3px; } /* Cerrar sesion es TERCIARIA, y la jerarquia la llevan el color y el tamaño, NO una linea: el filete que habia aqui partia en dos una lista de dos elementos y pesaba mas que la propia diferencia entre ellos. El aire que queda es el mismo que separa acciones del mismo rango (esp-3): la jerarquia es enteramente cromatica y tipografica, y eso es deliberado. */ .pcweb-acciones--salir { margin-block-start: var(--pcweb-esp-3); } .pcweb .pcweb-panel__lateral .pcweb-acciones--salir .pcweb-enlace { color: var(--pcweb-texto-3); font-size: .875rem; font-weight: 600; } .pcweb .pcweb-panel__lateral .pcweb-acciones--salir .pcweb-enlace:hover, .pcweb .pcweb-panel__lateral .pcweb-acciones--salir .pcweb-enlace:focus-visible { color: var(--pcweb-texto); } @media (min-width: 900px) { /* Dos columnas: las compras mandan, la cuenta acompaña. */ .pcweb--auth-account .pcweb-panel { /* 22rem y no 20: con 20rem el ancho util del bloque de datos quedaba en 248px y un correo de 28 caracteres —el del propio fixture— se partia en dos lineas. */ grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; } .pcweb-panel__saludo { gap: var(--pcweb-esp-5); } .pcweb-panel__inicial { width: 3.5rem; height: 3.5rem; font-size: 1.5rem; } .pcweb-panel__hola { font-size: 1.75rem; } .pcweb--auth-account .pcweb-vacio { padding: var(--pcweb-esp-5) var(--pcweb-esp-6); } } /* 16. Entrada y registro. Presentación acotada; no alcanza reset, recuperación ni panel. Los valores de compra llegan del contexto validado por Commerce. */ .pcweb--entry { --pcweb-tipo: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Arial, sans-serif; min-height: 100dvh; display: flex; flex-direction: column; background: radial-gradient(ellipse at 12% 30%, rgba(179, 41, 113, .055), transparent 55%), #0c0b0c; } .pcweb--entry .pcweb-cabecera { position: relative; flex-wrap: nowrap; justify-content: space-between; gap: 1rem; min-height: 5.5rem; padding: 1rem clamp(1.25rem, 5vw, 4.5rem); background: transparent; border: 0; } .pcweb--entry .pcweb-cabecera > * { width: auto; margin: 0; padding: 0; } .pcweb--entry .pcweb-cabecera__marca { flex: 0 0 auto; font-size: 1.3rem; letter-spacing: .065em; font-weight: 800; } .pcweb--entry .pcaa-volver { display: inline-flex; align-items: center; gap: .625rem; min-height: 2.75rem; color: #bdb8bd; text-decoration: none; font-size: .875rem; font-weight: 500; } .pcweb--entry .pcaa-volver:hover { color: #fff; } .pcweb--entry .pcweb-principal { flex: 1; display: grid; align-items: center; max-width: 74rem; padding: 2.5rem clamp(1.25rem, 5vw, 4rem) 5rem; } .pcaa-acceso { display: grid; width: 100%; max-width: 31.5rem; margin-inline: auto; } .pcweb--entry .pcweb-seccion--auth { width: 100%; max-width: none; padding: clamp(1.5rem, 4vw, 2.75rem); border: 1px solid #302b30; border-radius: 1.375rem; background: #151315; box-shadow: 0 1.5rem 5rem rgba(10, 6, 10, .25); } .pcweb--entry .pcaa-acceso__etiqueta { margin-bottom: .875rem; color: #c6bdc3; font-size: .8125rem; font-weight: 600; letter-spacing: .015em; } .pcweb--entry .pcweb-pagina__titulo { margin-bottom: .75rem; font-size: clamp(1.875rem, 3vw, 2.5rem); line-height: 1.13; font-weight: 700; letter-spacing: -.05em; text-transform: none; text-wrap: balance; } .pcweb--entry .pcaa-acceso__intro { max-width: 32ch; margin-bottom: 2rem; color: #b9b1b8; font-size: .9375rem; line-height: 1.65; text-wrap: pretty; } .pcweb--entry .pcweb-formulario { gap: 1.375rem; } .pcweb--entry .pcweb-campo__etiqueta { margin-bottom: .5rem; color: #e3dfe2; font-size: .875rem; font-weight: 600; } .pcweb--entry .pcweb-formulario .pcweb-campo__control { width: 100%; min-height: 3.5rem; padding: .875rem 1rem; background: #0e0d0e; border: 1px solid #6a6068; border-radius: .625rem; color: #fff; font: inherit; font-size: 1rem; transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; } .pcweb--entry .pcweb-formulario .pcweb-campo__control:hover:not(:disabled) { border-color: #9a8895; } .pcweb--entry .pcweb-formulario .pcweb-campo__control:focus-visible { background: #171116; border-color: #ef83bd; outline: 2px solid #ef83bd; outline-offset: 3px; } .pcweb--entry .pcweb-formulario .pcweb-campo__control[aria-invalid="true"] { border-color: var(--pcweb-error); } .pcweb--entry .pcweb-formulario .pcweb-campo__control:disabled { background: #191719; opacity: .58; cursor: not-allowed; } .pcweb--entry .pcweb-campo__ayuda { color: #b0a7ae; font-size: .8125rem; } .pcweb--entry .pcweb-boton--principal { width: 100%; min-height: 3.5rem; margin-top: .25rem; padding: .875rem 1rem; border-radius: .625rem; background: #bc216f; color: #fff; font-size: 1rem; font-weight: 700; line-height: 1.5; text-transform: none; letter-spacing: -.01em; transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; } .pcweb--entry .pcweb-boton--principal:hover:not(:disabled) { background: #d32780; box-shadow: 0 .5rem 1.5rem rgba(188, 33, 111, .16); transform: translateY(-1px); } .pcweb--entry .pcweb-boton--principal:active:not(:disabled) { transform: translateY(1px); } .pcweb--entry .pcweb-boton--principal:focus-visible { outline: 3px solid #fff; outline-offset: 4px; } .pcweb--entry .pcweb-boton--principal:disabled { opacity: .55; cursor: not-allowed; } .pcweb--entry .pcweb-acciones { margin-top: 1rem; color: #b9b1b8; font-size: .875rem; text-align: center; } .pcweb--entry .pcweb-acciones:first-of-type { padding-top: .5rem; } .pcweb--entry .pcweb-enlace { color: #ee8dc0; font-weight: 600; } .pcweb--entry .pcweb-error, .pcweb--entry .pcweb-aviso { margin-bottom: 1.5rem; font-size: .9375rem; line-height: 1.6; } .pcweb--entry .pcweb-pie { background: transparent; border: 0; padding: 0 1.25rem 1.5rem; text-align: center; } .pcaa-compra { min-width: 0; padding: .5rem 0 2rem; } .pcweb--entry .pcaa-compra__etiqueta { margin-bottom: 1rem; color: #ed8aba; font-size: .8125rem; font-weight: 600; letter-spacing: .03em; } .pcweb--entry .pcaa-compra__titulo { max-width: 15ch; font-size: clamp(2rem, 3.5vw, 3.25rem); line-height: 1.1; font-weight: 600; letter-spacing: -.045em; text-wrap: balance; overflow-wrap: anywhere; } .pcweb--entry .pcaa-compra__modelo { margin-top: .75rem; color: #c8bec5; font-size: 1.125rem; } .pcweb--entry .pcaa-compra__precio { margin-top: 1.75rem; font-size: 1.625rem; font-weight: 600; letter-spacing: -.025em; font-variant-numeric: tabular-nums; } .pcaa-compra__precio span { display: block; margin-top: .25rem; color: #b9afb6; font-size: .8125rem; font-weight: 400; letter-spacing: 0; } .pcweb--entry .pcaa-compra__nota { max-width: 34ch; margin-top: 2rem; color: #d0c7cd; font-size: .9375rem; line-height: 1.7; text-wrap: pretty; } .pcweb--entry .pcaa-compra__paso { max-width: 35ch; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid #352b32; color: #a99fa6; font-size: .8125rem; } @media (min-width: 850px) { .pcaa-acceso--compra { max-width: 65rem; grid-template-columns: minmax(0, 1fr) minmax(25rem, 30rem); gap: clamp(3rem, 6vw, 6.5rem); align-items: center; } .pcaa-compra { padding: 0; } } @media (max-width: 549px) { .pcweb--entry .pcweb-cabecera { min-height: 4.75rem; padding-inline: 1.25rem; } .pcweb--entry .pcweb-cabecera__marca { font-size: 1.0625rem; } .pcweb--entry .pcaa-volver { gap: .375rem; font-size: .75rem; } .pcweb--entry .pcweb-principal { padding: 1rem 1.25rem 3rem; } .pcweb--entry .pcweb-seccion--auth { padding: 1.75rem 1.25rem; border-radius: 1rem; } .pcweb--entry .pcaa-compra__titulo { max-width: 24ch; font-size: 1.875rem; } .pcweb--entry .pcaa-compra__precio { margin-top: 1rem; font-size: 1.375rem; } .pcaa-compra__precio span { display: inline; margin-left: .75rem; } .pcweb--entry .pcaa-compra__nota { margin-top: 1rem; font-size: .875rem; } .pcweb--entry .pcaa-compra__paso { margin-top: 1rem; padding-top: 1rem; } } @media (prefers-reduced-motion: reduce) { .pcweb--entry *, .pcweb--entry *::before, .pcweb--entry *::after { transition: none; scroll-behavior: auto; } } /* ========================================================================== 17. LA CUENTA COMO BIBLIOTECA (portada, compras, colección, visor, reproductor, historial, promoción, menú). Móvil primero: todo lo de abajo es el CSS de 360-430px; los puntos de control solo AMPLIAN. UNA SOLA HOJA. Este fichero es byte a byte el mismo en packsde-auth-account/assets/pcweb.css y packsde-web-account/assets/pcweb.css: /mi-cuenta/ (Auth) y /mi-cuenta/compras|coleccion|historial/ (Web) tienen que parecer la misma aplicación, y eso no se consigue con dos hojas que «se parecen». tests/cuenta-forma.php lo comprueba por hash. ========================================================================== */ /* El esquema de color se declara sobre el envoltorio, NO sobre <html>: esta hoja también se encola en las páginas públicas por el CTA, y fijar color-scheme en el documento entero cambiaría barras y controles de un tema que no es nuestro. */ .pcweb, body.pcweb { color-scheme: var(--pcweb-esquema); } /* Documentos PROPIOS de la cuenta (su <body> lleva `pcweb`): el lienzo y las barras de desplazamiento siguen al tema oscuro. Una página pública del tema no se ve afectada. */ html:has(> body.pcweb) { color-scheme: var(--pcweb-esquema); background: var(--pcweb-fondo); } /* `hidden` manda sobre cualquier display de la hoja: sin esto un <img hidden> con `display:block` de la base seguía pintándose, y el aviso «No se pudo mostrar» —que nace hidden— aparecía ENCIMA de fotos que sí habían cargado. */ .pcweb [hidden] { display: none !important; } /* Anchos de la cuenta: en móvil ocupa todo; en escritorio crece con la rejilla. */ .pcweb--cuenta, .pcweb--auth-account { --pcweb-max: 100%; } /* ---------------------------------------------------------------- cabecera */ .pcweb-cabecera__barra { display: flex; align-items: center; justify-content: space-between; gap: var(--pcweb-esp-3); min-height: var(--pcweb-alto-cabecera); padding-block: 0; } /* La cabecera fija de arriba tiene padding-block; la barra ya trae la altura. */ .pcweb-cabecera--cuenta { padding-block: 0; } /* Menú de usuario: <details>, así abre y cierra sin una línea de JavaScript. */ .pcweb-menu { position: relative; } .pcweb-menu__boton { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: var(--pcweb-toque); height: var(--pcweb-toque); border-radius: 50%; color: var(--pcweb-texto-2); cursor: pointer; -webkit-tap-highlight-color: transparent; } .pcweb-menu__boton::-webkit-details-marker { display: none; } .pcweb-menu__boton:hover, .pcweb-menu[open] .pcweb-menu__boton { color: var(--pcweb-texto); background: var(--pcweb-superficie-3); } .pcweb-menu__boton:focus-visible { outline: 3px solid var(--pcweb-foco); outline-offset: 2px; } .pcweb-menu__icono { width: 1.5rem; height: 1.5rem; display: block; } /* En móvil el panel cae a ancho completo bajo la barra; en escritorio es un desplegable pegado al icono. */ .pcweb-menu__panel { position: absolute; right: 0; top: calc(100% + var(--pcweb-esp-2)); width: min(22rem, calc(100vw - 2 * var(--pcweb-esp-4))); z-index: 40; background: var(--pcweb-superficie); border: 1px solid var(--pcweb-borde-fuerte); border-radius: var(--pcweb-radio); box-shadow: var(--pcweb-sombra); padding: var(--pcweb-esp-3) 0; } .pcweb-menu__quien { padding: var(--pcweb-esp-2) var(--pcweb-esp-4) var(--pcweb-esp-3); border-bottom: 1px solid var(--pcweb-borde); margin-bottom: var(--pcweb-esp-2); } .pcweb-menu__titulo { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pcweb-texto-3); } /* El correo: información, no un campo. Se parte por donde haga falta y nunca desborda. */ .pcweb .pcweb-menu__correo { color: var(--pcweb-texto); font-weight: 600; overflow-wrap: anywhere; margin-top: var(--pcweb-esp-1); } .pcweb-menu__lista { display: flex; flex-direction: column; } .pcweb .pcweb-menu__enlace { display: flex; align-items: center; min-height: var(--pcweb-toque); padding: 0 var(--pcweb-esp-4); color: var(--pcweb-texto); text-decoration: none; font-weight: 500; } .pcweb .pcweb-menu__enlace:hover, .pcweb .pcweb-menu__enlace:focus-visible { background: var(--pcweb-superficie-3); color: var(--pcweb-texto); } .pcweb .pcweb-menu__enlace--salir { color: var(--pcweb-texto-3); } /* ------------------------------------------------------------------ portada */ /* En /mi-cuenta/ (Auth) la columna sigue el ancho de la cuenta, no los 26rem de un formulario de acceso. */ .pcweb--auth-account .pcweb-seccion--auth { max-width: none; padding-block-start: 0; } .pcweb .pcweb-saludo__hola { margin-block: var(--pcweb-esp-2) var(--pcweb-esp-5); font-size: 1.375rem; line-height: 1.2; font-weight: 700; overflow-wrap: anywhere; } .pcweb-saludo__nombre { color: var(--pcweb-texto); } .pcweb-saludo__texto { color: var(--pcweb-texto-3); font-size: .875rem; margin-top: var(--pcweb-esp-1); } /* Cabecera de sección: título a la izquierda, «Ver todas» a la derecha. */ .pcweb-seccion--cuenta { margin-block: 0 var(--pcweb-esp-6); } .pcweb-seccion__cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pcweb-esp-3); margin-bottom: var(--pcweb-esp-3); } .pcweb-seccion__cabecera .pcweb-seccion__titulo { margin-bottom: 0; } .pcweb .pcweb-seccion__mas { flex: none; display: inline-flex; align-items: center; min-height: var(--pcweb-toque); color: var(--pcweb-texto-2); font-size: .875rem; font-weight: 600; text-decoration: none; } .pcweb .pcweb-seccion__mas:hover, .pcweb .pcweb-seccion__mas:focus-visible { color: var(--pcweb-acento); } /* Promoción: tarjeta discreta con el acento en un filete, no un popup. */ .pcweb .pcweb-promo { margin-bottom: var(--pcweb-esp-5); padding: var(--pcweb-esp-4); background: var(--pcweb-superficie); border: 1px solid var(--pcweb-borde); border-inline-start: 3px solid var(--pcweb-acento); border-radius: var(--pcweb-radio); } .pcweb-promo__etiqueta { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pcweb-acento); } .pcweb .pcweb-promo__titulo { font-size: 1.25rem; font-weight: 700; line-height: 1.25; margin-top: var(--pcweb-esp-1); } .pcweb .pcweb-promo__texto { color: var(--pcweb-texto-2); font-size: .9375rem; margin-top: var(--pcweb-esp-1); } .pcweb .pcweb-promo__cupon { display: inline-flex; align-items: center; gap: var(--pcweb-esp-2); margin-top: var(--pcweb-esp-3); color: var(--pcweb-texto-2); font-size: .9375rem; } .pcweb-promo__codigo { font-family: var(--pcweb-mono); font-size: 1rem; font-weight: 700; letter-spacing: .08em; color: var(--pcweb-texto); background: var(--pcweb-superficie-3); border: 1px dashed var(--pcweb-borde-fuerte); border-radius: var(--pcweb-radio-s); padding: var(--pcweb-esp-1) var(--pcweb-esp-3); user-select: all; } .pcweb .pcweb-promo__vence { color: var(--pcweb-texto-3); font-size: .875rem; margin-top: var(--pcweb-esp-2); } .pcweb .pcweb-promo__acciones { display: flex; gap: var(--pcweb-esp-2); margin-top: var(--pcweb-esp-4); } .pcweb-promo__acciones .pcweb-boton { flex: 1 1 0; min-width: 0; padding-inline: var(--pcweb-esp-3); white-space: nowrap; } .pcweb .pcweb-promo__nota { color: var(--pcweb-texto-3); font-size: .8125rem; margin-top: var(--pcweb-esp-3); } /* En /mi-cuenta/ los botones son los de la cuenta, no el CTA en mayúsculas de las pantallas de acceso (`.pcweb-seccion--auth .pcweb-boton--primario`). */ .pcweb--auth-account .pcweb-seccion--auth .pcweb-boton--primario { font-size: 1rem; text-transform: none; letter-spacing: 0; padding-block: var(--pcweb-esp-3); border-radius: var(--pcweb-radio-s); } /* Los avisos de la cuenta apilan sus párrafos (el aviso base es una fila flexible). */ .pcweb--cuenta .pcweb-aviso { flex-direction: column; gap: var(--pcweb-esp-2); } /* Compra pendiente: SOLO existe si hay una. Tira tocable, color de espera. */ .pcweb-pendiente { display: flex; flex-direction: column; gap: var(--pcweb-esp-2); margin-bottom: var(--pcweb-esp-5); } .pcweb .pcweb-pendiente__fila { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--pcweb-esp-3); align-items: start; padding: var(--pcweb-esp-3) var(--pcweb-esp-4); background: var(--pcweb-espera-suave); border: 1px solid var(--pcweb-borde); border-inline-start: 3px solid var(--pcweb-espera); border-radius: var(--pcweb-radio); color: var(--pcweb-texto); text-decoration: none; } .pcweb .pcweb-pendiente__fila:hover { border-color: var(--pcweb-borde-fuerte); border-inline-start-color: var(--pcweb-espera); color: var(--pcweb-texto); } .pcweb-pendiente__icono { font-size: 1.125rem; line-height: 1.5; } .pcweb-pendiente__cuerpo { min-width: 0; } .pcweb-pendiente__titulo { font-weight: 700; overflow-wrap: anywhere; } .pcweb-pendiente__modelo { color: var(--pcweb-texto-2); font-size: .875rem; } .pcweb-pendiente__detalle { display: block; color: var(--pcweb-texto-2); font-size: .875rem; margin-top: var(--pcweb-esp-1); } /* ------------------------------------------------------------- biblioteca */ /* Dos columnas en el móvil, portada 3:4 y solo título + modelo. La tarjeta entera es el enlace: no hay botón que repetir. */ .pcweb-biblioteca { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pcweb-esp-4) var(--pcweb-esp-3); } .pcweb .pcweb-ficha { display: block; min-width: 0; color: var(--pcweb-texto); text-decoration: none; border-radius: var(--pcweb-radio-s); } .pcweb .pcweb-ficha:focus-visible { outline: 3px solid var(--pcweb-foco); outline-offset: 3px; } .pcweb-ficha__portada { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--pcweb-radio-s); background: var(--pcweb-superficie-2); border: 1px solid var(--pcweb-borde); } .pcweb-ficha__img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } /* Respaldo DELIBERADO cuando no hay fotografía: un rótulo pequeño y apagado, nunca el icono roto del navegador ni el título repetido en grande. */ .pcweb-ficha__sinportada { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--pcweb-esp-3); text-align: center; color: var(--pcweb-texto-3); font-size: .75rem; line-height: 1.4; overflow-wrap: anywhere; } .pcweb .pcweb-ficha__titulo { margin-top: var(--pcweb-esp-2); font-size: .9375rem; line-height: 1.3; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .pcweb .pcweb-ficha__modelo { color: var(--pcweb-texto-3); font-size: .8125rem; line-height: 1.3; margin-top: 2px; overflow-wrap: anywhere; } /* Estados sin acceso: la portada baja de presencia y una línea corta lo explica. */ .pcweb-ficha--preparing .pcweb-ficha__img, .pcweb-ficha--unavailable .pcweb-ficha__img, .pcweb-ficha--withdrawn .pcweb-ficha__img, .pcweb-ficha--unknown .pcweb-ficha__img { filter: saturate(.4) brightness(.7); } .pcweb .pcweb-ficha__nota { color: var(--pcweb-espera); font-size: .75rem; margin-top: 2px; } .pcweb-ficha--unavailable .pcweb-ficha__nota { color: var(--pcweb-pausa); } .pcweb-ficha--withdrawn .pcweb-ficha__nota { color: var(--pcweb-retirado); } .pcweb-ficha--destacada .pcweb-ficha__portada { outline: 2px solid var(--pcweb-acento); outline-offset: 2px; } /* -------------------------------------------------------------- carrusel */ /* Recomendaciones: una fila que se desliza. La tercera tarjeta asoma cortada a propósito: es lo que dice «aquí hay más» sin flechas ni puntos. */ .pcweb-carrusel { display: flex; gap: var(--pcweb-esp-3); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--pcweb-esp-4) * -1); padding-inline: var(--pcweb-esp-4); padding-bottom: var(--pcweb-esp-2); scroll-padding-inline: var(--pcweb-esp-4); } .pcweb-carrusel::-webkit-scrollbar { display: none; } .pcweb-carrusel__item { flex: 0 0 42%; scroll-snap-align: start; min-width: 0; } .pcweb .pcweb-carrusel .pcweb-ficha__precio { color: var(--pcweb-texto-2); font-size: .8125rem; margin-top: 2px; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------- colección */ .pcweb .pcweb-coleccion__volver { display: inline-flex; align-items: center; gap: var(--pcweb-esp-1); min-height: var(--pcweb-toque); color: var(--pcweb-texto-2); font-size: .9375rem; font-weight: 600; text-decoration: none; } .pcweb .pcweb-coleccion__volver:hover { color: var(--pcweb-texto); } .pcweb-coleccion__cabecera { margin-block: var(--pcweb-esp-2) var(--pcweb-esp-4); } .pcweb .pcweb-coleccion__cabecera .pcweb-titulo { margin-bottom: 0; font-size: 1.375rem; overflow-wrap: anywhere; } .pcweb .pcweb-coleccion__modelo { color: var(--pcweb-texto-2); font-size: .9375rem; margin-top: var(--pcweb-esp-1); } /* Pestañas FOTOS / VÍDEOS sin JavaScript: radios ocultos y paneles hermanos. Aquí sí tienen sentido —separan dos tipos de contenido del MISMO producto—, no como navegación de la cuenta. */ .pcweb-pestanas__radio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; } .pcweb-pestanas__barra { display: flex; gap: var(--pcweb-esp-2); margin-bottom: var(--pcweb-esp-3); } .pcweb-pestanas__tab { display: inline-flex; align-items: center; gap: var(--pcweb-esp-2); min-height: var(--pcweb-toque); padding: 0 var(--pcweb-esp-4); border-radius: 999px; background: var(--pcweb-superficie-3); color: var(--pcweb-texto-2); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; user-select: none; } .pcweb-pestanas__cuenta { font-weight: 600; letter-spacing: 0; opacity: .8; } .pcweb-pestanas__panel { display: none; } #pcweb-tab-fotos:checked ~ .pcweb-pestanas__panel--fotos, #pcweb-tab-videos:checked ~ .pcweb-pestanas__panel--videos { display: block; } #pcweb-tab-fotos:checked ~ .pcweb-pestanas__barra [for="pcweb-tab-fotos"], #pcweb-tab-videos:checked ~ .pcweb-pestanas__barra [for="pcweb-tab-videos"] { background: var(--pcweb-acento); color: var(--pcweb-acento-texto); } #pcweb-tab-fotos:checked ~ .pcweb-pestanas__barra [for="pcweb-tab-fotos"] .pcweb-pestanas__cuenta, #pcweb-tab-videos:checked ~ .pcweb-pestanas__barra [for="pcweb-tab-videos"] .pcweb-pestanas__cuenta { opacity: 1; } .pcweb-pestanas__radio:focus-visible + .pcweb-pestanas__barra { outline: 0; } .pcweb-pestanas__tab:hover { color: var(--pcweb-texto); } /* Rejilla de fotos: tres columnas, celdas cuadradas, separación mínima. La miniatura recorta (cover) —la foto completa se ve en el visor, sin recorte—. */ .pcweb .pcweb-galeria { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; } .pcweb-galeria__celda { margin: 0; min-width: 0; } .pcweb-galeria__boton { display: block; width: 100%; padding: 0; border: 0; border-radius: 0; background: var(--pcweb-superficie-2); cursor: pointer; position: relative; aspect-ratio: 1; overflow: hidden; } .pcweb-galeria__boton:focus-visible { outline: 3px solid var(--pcweb-foco); outline-offset: -3px; } .pcweb-galeria__img { width: 100%; height: 100%; object-fit: cover; display: block; } .pcweb-galeria__hueco { position: absolute; inset: 0; background: linear-gradient(100deg, var(--pcweb-superficie-2) 30%, var(--pcweb-superficie-3) 50%, var(--pcweb-superficie-2) 70%); background-size: 200% 100%; animation: pcweb-brillo 1.4s linear infinite; } @keyframes pcweb-brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* El aviso de fallo nace `hidden` y SOLO se ve cuando el JS lo destapa tras agotar el reintento. Un 429 lleva su propio texto y un tono distinto. */ .pcweb-galeria__fallo { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--pcweb-esp-2); text-align: center; font-size: .75rem; line-height: 1.3; color: var(--pcweb-texto-3); background: var(--pcweb-superficie-2); } .pcweb-galeria__fallo[data-pcweb-limitado] { color: var(--pcweb-espera); } /* Vídeos: teja 16:9 con póster (portada del pack o primera miniatura) y el play. Sin póster, la teja oscura deliberada. */ .pcweb .pcweb-videos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pcweb-esp-4); } .pcweb-videos__item { min-width: 0; } .pcweb-videos__cartel { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 1px solid var(--pcweb-borde); border-radius: var(--pcweb-radio-s); background: var(--pcweb-superficie-2); color: var(--pcweb-texto); cursor: pointer; overflow: hidden; } .pcweb-videos__cartel:hover { border-color: var(--pcweb-borde-fuerte); } .pcweb-videos__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .pcweb-videos__play, .pcweb-videos__meta { z-index: 1; } .pcweb-videos__cartel:focus-visible { outline: 3px solid var(--pcweb-foco); outline-offset: 2px; } .pcweb-videos__play { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .45); color: #fff; font-size: 1.5rem; line-height: 1; padding-inline-start: .25rem; } .pcweb-videos__meta { position: absolute; right: var(--pcweb-esp-2); bottom: var(--pcweb-esp-2); padding: 2px var(--pcweb-esp-2); border-radius: 4px; background: rgba(0, 0, 0, .72); color: #fff; font-size: .75rem; font-variant-numeric: tabular-nums; } .pcweb-videos__nombre { display: block; margin-top: var(--pcweb-esp-2); font-size: .9375rem; font-weight: 600; } .pcweb .pcweb-videos__acciones { margin-top: var(--pcweb-esp-1); } .pcweb .pcweb-coleccion__acceso { margin-top: var(--pcweb-esp-6); color: var(--pcweb-texto-3); font-size: .8125rem; max-width: 60ch; } /* ------------------------------------------------------ visor y reproductor */ /* Los dos ocupan la pantalla entera: negro, sin radio, con la foto o el vídeo ENTEROS (contain) y una barra de controles pensada para el pulgar. */ .pcweb-visor, .pcweb-reproductor { position: fixed; inset: 0; width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: #000; color: #fff; display: none; flex-direction: column; overflow: hidden; } .pcweb-visor[open], .pcweb-reproductor[open] { display: flex; } .pcweb-visor, .pcweb-reproductor { overscroll-behavior: contain; } .pcweb-visor::backdrop, .pcweb-reproductor::backdrop { background: #000; } /* El visor pinta su propio fondo: al deslizar hacia abajo para cerrar, se apaga con el gesto. */ .pcweb-visor { background: transparent; } .pcweb-visor::backdrop { background: transparent; } .pcweb-visor__fondo { position: absolute; inset: 0; background: #000; z-index: 0; } .pcweb-visor__marco, .pcweb-visor__barra { position: relative; z-index: 1; } .pcweb-visor__marco, .pcweb-reproductor__marco { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: calc(var(--pcweb-toque) + var(--pcweb-esp-3)) var(--pcweb-esp-2) var(--pcweb-esp-2); touch-action: pan-y; } /* Visor: el gesto es suyo (deslizar, pellizcar, doble toque). Tres paneles en una pista; cada panel ocupa el marco entero. */ .pcweb-visor__marco { padding: 0; overflow: hidden; touch-action: none; } .pcweb-visor__pista { position: absolute; inset: 0; will-change: transform; } .pcweb-visor__panel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: calc(var(--pcweb-toque) + var(--pcweb-esp-3)) var(--pcweb-esp-2) var(--pcweb-esp-2); box-sizing: border-box; } /* Nada de recorte: la foto se ve completa y con su orientación. Sin bloqueos de guardar ni de menú: la foto es de quien la compró. */ .pcweb-visor__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; transform-origin: 50% 50%; will-change: transform; user-select: none; } .pcweb-visor__img:not([src]) { visibility: hidden; } .pcweb-visor--zoom .pcweb-visor__marco { cursor: grab; } .pcweb-visor__estado { position: absolute; left: 0; right: 0; bottom: var(--pcweb-esp-3); z-index: 1; margin: 0; text-align: center; font-size: .875rem; color: rgba(255,255,255,.75); pointer-events: none; } .pcweb-visor__cerrar, .pcweb-reproductor__cerrar { position: absolute; top: var(--pcweb-esp-2); right: var(--pcweb-esp-2); z-index: 2; width: var(--pcweb-toque); height: var(--pcweb-toque); border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 1.25rem; cursor: pointer; } .pcweb-visor__cerrar:focus-visible, .pcweb-reproductor__cerrar:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .pcweb-visor__barra, .pcweb-reproductor__barra { flex: none; display: grid; grid-template-columns: var(--pcweb-toque) minmax(0, 1fr) var(--pcweb-toque); align-items: center; gap: var(--pcweb-esp-2); padding: var(--pcweb-esp-2) var(--pcweb-esp-3) max(var(--pcweb-esp-3), env(safe-area-inset-bottom)); background: #000; border-top: 1px solid rgba(255, 255, 255, .12); } .pcweb-visor__nav, .pcweb-reproductor__nav { width: var(--pcweb-toque); height: var(--pcweb-toque); border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; background: transparent; color: #fff; font-size: 1.375rem; line-height: 1; cursor: pointer; } .pcweb-visor__nav[disabled], .pcweb-reproductor__nav[disabled] { opacity: .3; cursor: default; } /* Un solo video: no hay carrusel. El botón conserva su hueco para que el centro siga centrado. */ .pcweb-reproductor__nav--sin-carrusel { visibility: hidden; } /* El escenario del video: vertical para la página, horizontal para el carrusel. */ .pcweb-reproductor__video { will-change: transform; } .pcweb-visor__centro, .pcweb-reproductor__centro { display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 0; text-align: center; } .pcweb-visor__contador, .pcweb-reproductor__titulo { font-variant-numeric: tabular-nums; font-weight: 600; font-size: .9375rem; } .pcweb-reproductor__sub { color: rgba(255, 255, 255, .7); font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .pcweb .pcweb-visor__descargar, .pcweb .pcweb-reproductor__descargar { display: inline-flex; align-items: center; justify-content: center; min-height: var(--pcweb-toque); margin-top: var(--pcweb-esp-1); padding: 0 var(--pcweb-esp-4); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; color: #fff; font: inherit; font-size: .9375rem; font-weight: 600; text-decoration: none; cursor: pointer; } .pcweb .pcweb-visor__descargar:focus-visible, .pcweb .pcweb-reproductor__descargar:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } /* En pantallas táctiles el visor se recorre deslizando: las flechas sobran, pero conservan su hueco para que el contador y el botón sigan centrados. */ @media (hover: none) and (pointer: coarse) { .pcweb-visor__nav { visibility: hidden; } } .pcweb-enlace--discreto { display: inline-flex; align-items: center; min-height: var(--pcweb-toque); background: none; border: 0; color: inherit; text-decoration: underline; cursor: pointer; padding: 0; font: inherit; font-size: .875rem; } /* El vídeo respeta SU proporción: vertical si es vertical, apaisado si es apaisado. Nada de forzar 9:16. */ .pcweb-reproductor__video, .pcweb-videos__video { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: #000; } .pcweb-reproductor__estado { position: absolute; left: 0; right: 0; bottom: var(--pcweb-esp-3); z-index: 1; margin: 0; color: rgba(255,255,255,.75); font-size: .875rem; text-align: center; pointer-events: none; } /* ------------------------------------------------------------- historial */ .pcweb .pcweb-historial { display: flex; flex-direction: column; gap: var(--pcweb-esp-2); } .pcweb-historial__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--pcweb-esp-1) var(--pcweb-esp-4); padding: var(--pcweb-esp-3) var(--pcweb-esp-4); background: var(--pcweb-superficie); border: 1px solid var(--pcweb-borde); border-radius: var(--pcweb-radio); } .pcweb-historial__fecha { grid-column: 1 / -1; grid-row: 1; color: var(--pcweb-texto-3); font-size: .8125rem; font-variant-numeric: tabular-nums; } .pcweb-historial__cuerpo { grid-column: 1; grid-row: 2; min-width: 0; } .pcweb-historial__titulo { font-weight: 700; overflow-wrap: anywhere; } .pcweb-historial__modelo { color: var(--pcweb-texto-2); font-size: .875rem; } /* Movil: fecha, producto, modelo, estado e importe, uno bajo otro. */ .pcweb-historial__estado { grid-column: 1 / -1; grid-row: 3; font-size: .8125rem; font-weight: 600; color: var(--pcweb-texto-2); } .pcweb-historial__importe { grid-column: 1 / -1; grid-row: 4; text-align: start; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .pcweb-historial__estado--paid { color: var(--pcweb-ok); } .pcweb-historial__estado--pending { color: var(--pcweb-espera); } .pcweb-historial__estado--off { color: var(--pcweb-retirado); } .pcweb-historial__unidades { color: var(--pcweb-texto-3); font-weight: 500; } /* Lista de pendientes (página de detalle) reutiliza la tira. */ .pcweb-lista--pendientes .pcweb-pendiente { margin-bottom: 0; } /* El pie sigue la columna centrada (el reset `.pcweb p {margin:0}` le quitaba el auto). */ .pcweb .pcweb-pie > * { margin-inline: auto; } /* Pantallas de Auth y de estado DENTRO de la cuenta (con sesión): misma escala que la cuenta, sin el rótulo en mayúsculas ni el CTA gigante de las pantallas de acceso. */ .pcweb--cuenta .pcweb-pagina__titulo, .pcweb--cuenta .pcweb-titulo { font-size: 1.375rem; line-height: 1.2; text-transform: none; letter-spacing: -.01em; margin-block: var(--pcweb-esp-2) var(--pcweb-esp-4); } .pcweb--cuenta .pcweb-seccion--auth .pcweb-boton--primario { font-size: 1rem; text-transform: none; letter-spacing: 0; padding-block: var(--pcweb-esp-3); } /* Con un visor o el reproductor abiertos el fondo no se desplaza. El script fija además el body en su sitio (Safari de iOS ignora overflow:hidden) y lo devuelve al mismo punto al cerrar. */ html.pcweb-bloqueo, html.pcweb-bloqueo body { overflow: hidden; overscroll-behavior: none; } .pcweb .pcweb-aviso--acceso { margin-top: var(--pcweb-esp-5); } /* ------------------------------------------------------------- utilidades */ .pcweb .pcweb-titulo--cuenta { font-size: 1.375rem; margin-block: var(--pcweb-esp-2) var(--pcweb-esp-4); } .pcweb .pcweb-apunte--pie { margin-top: var(--pcweb-esp-5); max-width: 60ch; } .pcweb-buscador--cuenta { margin-bottom: var(--pcweb-esp-4); } .pcweb-buscador--cuenta .pcweb-campo__etiqueta { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); } .pcweb-buscador--cuenta .pcweb-buscador__campo { flex: 1 1 12rem; } /* El enlace de acción que es un <a> no puede heredar el rosa del enlace genérico. */ .pcweb a.pcweb-boton--secundario, .pcweb a.pcweb-boton--secundario:hover { color: var(--pcweb-texto); } /* ----------------------------------------------------- puntos de control */ @media (min-width: 600px) { .pcweb-biblioteca { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pcweb-esp-4); } .pcweb .pcweb-galeria { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; } .pcweb .pcweb-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pcweb-carrusel__item { flex-basis: 11rem; } } @media (min-width: 768px) { .pcweb--cuenta, .pcweb--auth-account { --pcweb-max: 46rem; } .pcweb-menu__panel { right: 0; width: 20rem; } .pcweb .pcweb-saludo__hola { font-size: 1.625rem; } .pcweb--cuenta .pcweb-pagina__titulo, .pcweb--cuenta .pcweb-titulo { font-size: 1.625rem; } .pcweb .pcweb-promo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--pcweb-esp-4); align-items: center; } .pcweb .pcweb-promo__acciones { margin-top: 0; flex-direction: column; } .pcweb .pcweb-promo__nota { grid-column: 1 / -1; margin-top: 0; } .pcweb-historial__fila { grid-template-columns: 8rem minmax(0, 1fr) auto; align-items: baseline; } .pcweb-historial__fecha { grid-column: 1; grid-row: 1 / span 2; } .pcweb-historial__cuerpo { grid-column: 2; grid-row: 1; } .pcweb-historial__importe { grid-column: 3; grid-row: 1 / span 2; text-align: end; } .pcweb-historial__estado { grid-column: 2; grid-row: 2; } } @media (min-width: 1024px) { .pcweb--cuenta, .pcweb--auth-account { --pcweb-max: 62rem; } .pcweb-biblioteca { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pcweb-esp-5) var(--pcweb-esp-4); } .pcweb .pcweb-galeria { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; } .pcweb .pcweb-videos { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pcweb-carrusel { scrollbar-width: thin; } .pcweb-carrusel__item { flex-basis: 12.5rem; } .pcweb-visor__marco, .pcweb-reproductor__marco { padding: var(--pcweb-esp-4); } } @media (min-width: 1440px) { .pcweb--cuenta, .pcweb--auth-account { --pcweb-max: 74rem; } .pcweb-biblioteca { grid-template-columns: repeat(5, minmax(0, 1fr)); } .pcweb .pcweb-galeria { grid-template-columns: repeat(6, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { .pcweb-galeria__hueco { animation: none; } .pcweb-carrusel { scroll-behavior: auto; } }

/* pcweb.css — hoja ÚNICA de la cuenta de PacksDe: la comparten byte a byte los dos plugins. * Todo lleva prefijo `pcweb-`. Sin @import, sin fuentes ni URLs a terceros. * El envoltorio raiz (normalmente ) lleva la clase `pcweb`; los componentes * sueltos (.pcweb-cta, .pcweb-boton, .pcweb-tarjeta) funcionan tambien fuera de el. * MAPA — armazon: .pcweb-saltar .pcweb-cabecera .pcweb-marca .pcweb-nav__enlace * .pcweb-principal .pcweb-contenedor .pcweb-seccion .pcweb-pie .pcweb-ancla; texto: * .pcweb-titulo .pcweb-texto .pcweb-apunte .pcweb-ref .pcweb-oculto-visual; biblioteca: * .pcweb-rejilla + .pcweb-tarjeta__{portada,img,sinportada,cuerpo,titulo,modelo,ref,estado,detalle,accion} * con --ready/--preparing/--unavailable/--withdrawn (forma + color + TEXTO) y --destacada; * accion: .pcweb-boton--{primario,secundario,fantasma,bloque,inactivo} .pcweb-enlace; * forma: .pcweb-formulario .pcweb-campo__{etiqueta,control,ayuda,error} .pcweb-aviso--{error,exito,info}; * comercio: .pcweb-cta .pcweb-resumen .pcweb-miniatura .pcweb-panel; datos: .pcweb-lista .pcweb-datos * .pcweb-tabla-envoltura .pcweb-vacio .pcweb-paginacion__{enlace,actual,inerte} .pcweb-buscador. * CONTROL: base 390 · 768 · 1024 · 1440; rejilla de biblioteca 1/2/3/4 columnas. * TEMA: juego completo de variables en :root; el bloque oscuro SOLO las redefine. */ /* ========================================================================== 1. Variables. Juego COMPLETO aqui: cualquier tema posterior solo reasigna. ========================================================================== */ :root { --pcweb-tipo: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --pcweb-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --pcweb-esp-1: 4px; --pcweb-esp-2: 8px; --pcweb-esp-3: 12px; --pcweb-esp-4: 16px; --pcweb-esp-5: 24px; --pcweb-esp-6: 32px; --pcweb-esp-7: 48px; /* El radio del sitio: 8px es el del CTA de pack, que es el boton de referencia. */ --pcweb-radio: 12px; --pcweb-radio-s: 8px; --pcweb-toque: 44px; --pcweb-alto-cabecera: 56px; --pcweb-max: 100%; --pcweb-portada-ratio: 2 / 3; /* ---------------------------------------------------------------------- PALETA: MEDIDA del CSS publico, no estimada de una captura. Fuente: assets/css/packsde-render.css del tema hijo hello-elementor-child; copia intacta mas reciente en depro/cierre-ventas-2026-09-02/rejected/ packsde-render.css.orig (2026-09-02), :root L2-L12. El mismo juego aparece byte a byte en las diez copias del tema que hay en el arbol. --bg #0a0a0a --bg2 #111 --card #141414 --border #1e1e1e --pink #e91e8c --pink-dark #c9177a --pink-glow rgba(233,30,140,.12) --white #fff --gray #b0b0b0 --muted #8c8c8c Esta superficie es OSCURA SIEMPRE, como el sitio. No sigue al sistema: un Auth claro dentro de un sitio negro no es una preferencia, es una costura. ---------------------------------------------------------------------- */ --pcweb-esquema: dark; --pcweb-fondo: #0a0a0a; /* --bg */ --pcweb-superficie: #141414; /* --card */ --pcweb-superficie-2: #111111; /* --bg2 */ --pcweb-superficie-3: #1a1a1a; /* derivado: un escalon mas para estados */ --pcweb-borde: #1e1e1e; /* --border: separadores, decorativos */ /* Los bordes de CONTROL no son decorativos: tienen que distinguirse del fondo. #1e1e1e da 1.2:1 sobre la superficie y desaparece. Este gris da 3.3:1, que es el minimo para un componente de interfaz. */ --pcweb-borde-fuerte: #666666; --pcweb-texto: #ffffff; /* --white, 20:1 sobre el fondo */ --pcweb-texto-2: #b0b0b0; /* --gray, 10:1 */ --pcweb-texto-3: #8c8c8c; /* --muted, 6.4:1 */ --pcweb-enlace: #e91e8c; --pcweb-enlace-hover: #f472b6; /* --pink-soft */ --pcweb-acento: #e91e8c; /* --pink */ --pcweb-acento-fuerte: #c9177a; /* --pink-dark, hover del CTA */ --pcweb-acento-texto: #ffffff; --pcweb-acento-suave: rgba(233, 30, 140, .12); /* --pink-glow */ /* El sitio enfoca en rosa (`*:focus-visible { outline: 2px solid var(--pink) }`). Se conserva porque da 4.3:1 sobre el fondo, de sobra para un contorno. La excepcion es el boton primario, que ES rosa: en las pantallas de formulario el foco se pinta en blanco mas abajo, o seria invisible justo donde mas se navega con teclado. El CTA del panel de cliente ya NO usa ese blanco: alli el aro va separado del relleno por el offset, cae sobre la superficie oscura y el rosa se ve. Ver la seccion 15. */ --pcweb-foco: #e91e8c; --pcweb-ok: #7fd2a2; --pcweb-ok-suave: #10201a; --pcweb-espera: #e0b878; --pcweb-espera-suave: #221c12; --pcweb-pausa: #96c2e8; --pcweb-pausa-suave: #121c24; --pcweb-retirado: #8c8c8c; --pcweb-retirado-suave: #161616; /* El error NO usa el rosa de marca: en una superficie donde el rosa significa «accion», teñir de rosa el fallo confunde las dos cosas. Naranja rojizo, 7:1 sobre el fondo, y ademas el aviso lleva simbolo propio. */ --pcweb-error: #ff7a6b; --pcweb-error-suave: #241413; --pcweb-sombra: 0 1px 2px rgba(0, 0, 0, .60), 0 10px 28px rgba(0, 0, 0, .45); --pcweb-sombra-suave: 0 1px 2px rgba(0, 0, 0, .50); } /* ========================================================================== 2. Base. Reglas de elemento acotadas a `.pcweb` para no pisar el tema cuando esta hoja se carga en una pagina publica solo por el CTA. ========================================================================== */ html { -webkit-text-size-adjust: 100%; } /* Páginas públicas: el mismo color-scheme que tenían (sigue al sistema). Los documentos propios de la cuenta lo fijan en oscuro más abajo. */ @media (prefers-color-scheme: dark) { html { color-scheme: dark; } } body.pcweb, .pcweb { margin: 0; background: var(--pcweb-fondo); color: var(--pcweb-texto); font-family: var(--pcweb-tipo); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; } .pcweb *, .pcweb *::before, .pcweb *::after { box-sizing: border-box; } .pcweb img, .pcweb svg { display: block; max-width: 100%; } .pcweb h1, .pcweb h2, .pcweb h3, .pcweb h4, .pcweb p, .pcweb ul, .pcweb ol, .pcweb dl, .pcweb dd, .pcweb figure { margin: 0; } .pcweb ul, .pcweb ol { padding: 0; list-style: none; } .pcweb a { color: var(--pcweb-enlace); text-decoration-thickness: 1px; text-underline-offset: 2px; } .pcweb a:hover { color: var(--pcweb-enlace-hover); } /* Foco: nunca se retira sin sustituto. El offset lo separa del control para que el contorno no se confunda con el borde propio del campo. */ .pcweb :focus-visible, .pcweb-boton:focus-visible, .pcweb-enlace:focus-visible, .pcweb-campo__control:focus-visible { outline: 3px solid var(--pcweb-foco); outline-offset: 2px; } /* Navegadores viejos sin :focus-visible: mejor un foco de mas que ninguno. */ .pcweb :focus { outline-color: var(--pcweb-foco); } .pcweb-oculto-visual { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ========================================================================== 3. Armazon: saltar, cabecera pegajosa, contenedor, secciones, pie. ========================================================================== */ .pcweb-saltar { position: absolute; left: var(--pcweb-esp-2); top: calc(var(--pcweb-esp-2) * -8); z-index: 100; padding: var(--pcweb-esp-3) var(--pcweb-esp-4); min-height: var(--pcweb-toque); display: inline-flex; align-items: center; background: var(--pcweb-superficie); color: var(--pcweb-texto); border: 2px solid var(--pcweb-borde-fuerte); border-radius: var(--pcweb-radio-s); text-decoration: none; } .pcweb-saltar:focus { top: var(--pcweb-esp-2); } .pcweb-cabecera { position: sticky; top: 0; z-index: 30; /* Mismo negro que la pagina: en el sitio la cabecera no es una superficie elevada, es el mismo fondo con una linea debajo. */ background: var(--pcweb-fondo); border-bottom: 1px solid var(--pcweb-borde); } .pcweb-cabecera__barra { display: flex; align-items: center; justify-content: space-between; gap: var(--pcweb-esp-3); min-height: var(--pcweb-alto-cabecera); } .pcweb-marca { font-weight: 700; letter-spacing: .01em; color: var(--pcweb-texto); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--pcweb-toque); padding-inline: var(--pcweb-esp-1); } /* En 390 la navegacion se desliza en horizontal: mas honesto que esconderla tras un menu que exige un toque extra para llegar a Mis compras. */ .pcweb-nav { display: flex; gap: var(--pcweb-esp-1); overflow-x: auto; scrollbar-width: thin; padding-bottom: var(--pcweb-esp-1); border-top: 1px solid var(--pcweb-borde); } .pcweb-nav__enlace { display: inline-flex; align-items: center; justify-content: center; min-height: var(--pcweb-toque); min-width: var(--pcweb-toque); padding: 0 var(--pcweb-esp-3); white-space: nowrap; color: var(--pcweb-texto-2); text-decoration: none; border-bottom: 3px solid transparent; font-weight: 600; } .pcweb-nav__enlace:hover { color: var(--pcweb-texto); } /* La pestana activa no se marca solo con color: cambia el peso y lleva regla inferior, y la plantilla debe poner ademas aria-current="page". */ .pcweb-nav__enlace--activo { color: var(--pcweb-texto); border-bottom-color: var(--pcweb-acento); } .pcweb-contenedor { width: 100%; max-width: var(--pcweb-max); margin-inline: auto; padding-inline: var(--pcweb-esp-4); } .pcweb-principal { display: block; padding-block: var(--pcweb-esp-5) var(--pcweb-esp-7); } .pcweb-seccion { margin-block: 0 var(--pcweb-esp-6); } .pcweb-seccion__titulo { font-size: 1.125rem; line-height: 1.35; font-weight: 700; letter-spacing: .01em; margin-bottom: var(--pcweb-esp-4); } .pcweb-seccion__pie { margin-top: var(--pcweb-esp-4); color: var(--pcweb-texto-3); font-size: .9375rem; } /* La cabecera pegajosa taparia cualquier destino de ancla: se compensa con el alto real de la barra, no con un numero magico. */ .pcweb [id], .pcweb-ancla { scroll-margin-top: calc(var(--pcweb-alto-cabecera) + var(--pcweb-toque) + var(--pcweb-esp-3)); } .pcweb-pie { border-top: 1px solid var(--pcweb-borde); padding-block: var(--pcweb-esp-5); color: var(--pcweb-texto-3); font-size: .875rem; } .pcweb-separador { border: 0; border-top: 1px solid var(--pcweb-borde); margin-block: var(--pcweb-esp-5); } /* ========================================================================== 4. Texto. ========================================================================== */ .pcweb-titulo { font-size: 1.5rem; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; margin-bottom: var(--pcweb-esp-3); } .pcweb-subtitulo { font-size: 1.0625rem; line-height: 1.45; color: var(--pcweb-texto-2); margin-bottom: var(--pcweb-esp-4); } .pcweb-texto { /* 66 caracteres: por encima, el ojo pierde el renglon al volver. */ max-width: 66ch; margin-bottom: var(--pcweb-esp-3); } .pcweb-apunte { color: var(--pcweb-texto-3); font-size: .875rem; line-height: 1.5; } /* La REF es una cadena EXACTA: monoespaciada y seleccionable de una pieza, sin partirla ni recortarla, para que copiarla no la altere. */ .pcweb-ref { font-family: var(--pcweb-mono); font-size: .8125rem; letter-spacing: .04em; color: var(--pcweb-texto-3); word-break: normal; overflow-wrap: anywhere; user-select: all; } /* ========================================================================== 5. Acciones: botones y enlaces de accion. ========================================================================== */ .pcweb-boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--pcweb-esp-2); min-height: var(--pcweb-toque); min-width: var(--pcweb-toque); padding: var(--pcweb-esp-3) var(--pcweb-esp-5); border: 1px solid transparent; border-radius: var(--pcweb-radio-s); font-family: var(--pcweb-tipo); font-size: 1rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .pcweb-boton--primario { background: var(--pcweb-acento); border-color: var(--pcweb-acento); color: var(--pcweb-acento-texto); } .pcweb-boton--primario:hover, .pcweb-boton--primario:focus-visible { background: var(--pcweb-acento-fuerte); border-color: var(--pcweb-acento-fuerte); color: var(--pcweb-acento-texto); } .pcweb-boton--secundario { background: var(--pcweb-superficie); border-color: var(--pcweb-borde-fuerte); color: var(--pcweb-texto); } .pcweb-boton--secundario:hover { background: var(--pcweb-superficie-2); color: var(--pcweb-texto); } .pcweb-boton--secundario:active { background: var(--pcweb-superficie-3); } .pcweb-boton--fantasma { background: transparent; border-color: transparent; color: var(--pcweb-enlace); padding-inline: var(--pcweb-esp-3); } .pcweb-boton--fantasma:hover { background: var(--pcweb-superficie-2); } .pcweb-boton--bloque { width: 100%; } /* Un boton puede ser un , y entonces la regla generica de enlace le gana: `.pcweb a` tiene especificidad (0,1,1) contra (0,1,0) de la variante, asi que le pintaba el texto de var(--pcweb-enlace) —que es EXACTAMENTE el mismo #e91e8c del fondo del boton primario: rosa sobre rosa, etiqueta invisible—. Aqui cada variante reafirma su color con la misma forma de selector para no depender del orden de cascada. */ .pcweb a.pcweb-boton--primario, .pcweb a.pcweb-boton--primario:hover { color: var(--pcweb-acento-texto); } .pcweb a.pcweb-boton--secundario, .pcweb a.pcweb-boton--secundario:hover { color: var(--pcweb-texto); } .pcweb a.pcweb-boton--fantasma { color: var(--pcweb-enlace); } /* Sin accion NO se pinta un enlace muerto: esto es para un o un