/* 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