/* Theme Name: Welfare23 Theme URI: https://welfare23.cl Author: FlowCode AI Description: Insumos médicos domiciliarios Welfare23 — tema a medida, WooCommerce. Version: 1.0.0 Requires at least: 6.5 Tested up to: 6.8 Requires PHP: 8.0 Text Domain: welfare23-theme */ /* Reset: box-sizing:border-box global — sin esto, padding se suma por fuera de max-width (bug real encontrado: la franja de "Día del Niño" quedaba más angosta que su fondo). */ *, *::before, *::after{ box-sizing:border-box; } .screen-reader-text{ border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute !important; width:1px; word-wrap:normal !important; } /* Sin scroll horizontal: el drawer del mini-cart de WooCommerce (position:fixed, trasladado fuera de pantalla mientras está cerrado) y el badge del contador pueden sumar unos px al scrollWidth del documento en anchos angostos aunque no se vean; esto lo neutraliza sin ocultar contenido. */ html{ overflow-x:hidden; } body{ overflow-x:hidden; max-width:100vw; } /* Barra superior: solo datos reales (despacho, forma de pago) — nada de promesas que no se pueden cumplir (soporte 24/7, garantías inventadas) ni de "Mi cuenta". */ .w23-topbar{ background:#0A3049; color:#fff; } .w23-topbar__inner{ max-width:1280px; margin:0 auto; padding:0.5rem 1.25rem; display:flex; gap:1.5rem; justify-content:center; flex-wrap:wrap; } .w23-topbar__item{ display:inline-flex; align-items:center; gap:0.4rem; font-size:0.8rem; white-space:nowrap; } .w23-topbar__item svg{ flex-shrink:0; } /* Header / navegación */ .w23-header{ position:sticky; top:0; z-index:50; background:#fff; } .w23-header .wp-block-navigation{ font-size:0.98rem; } /* Logo propio (marca EKG/pulso) vía Site Logo + Site Title de WordPress — custom-logo, no SVG dibujado a mano. .w23-logo-mark es el grupo flex que los mantiene juntos; los bloques nativos traen su propio margen que hay que poner en 0 para que no se vea un salto entre ícono y texto. */ .w23-logo-mark{ display:flex; align-items:center; gap:0.55rem; } .w23-logo-mark .wp-block-site-logo{ margin:0; line-height:0; } .w23-logo-mark .custom-logo{ display:block; flex-shrink:0; width:34px; height:34px; object-fit:contain; } .w23-logo-mark .wp-block-site-title{ margin:0; } .w23-logo-mark .wp-block-site-title a{ text-decoration:none !important; } .w23-logo-mark__text{ font-family:var(--wp--preset--font-family--heading); font-weight:700; font-size:1.15rem; color:#0A3049; } footer .w23-logo-mark .custom-logo{ width:30px; height:30px; } footer .w23-logo-mark__text{ color:#fff; } @media (max-width:480px){ .w23-logo-mark .custom-logo{ width:28px; height:28px; } .w23-logo-mark__text{ font-size:1.02rem; } } /* Mini-carrito: sin cuentas de cliente, es el único control a la derecha */ .w23-header-actions{ align-items:center; } .w23-header-actions .wc-block-mini-cart__button{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0 !important; border-radius:50%; color:#0A3049; background:transparent; border:none; } .w23-header-actions .wc-block-mini-cart__button:hover{ background:#F3FAF9; } .w23-header-actions .wc-block-mini-cart__icon{ width:22px; height:22px; } .w23-header-actions .wc-block-mini-cart__badge{ background:#14B8AD !important; color:#0A3049 !important; } /* Buscador de productos en el header */ .w23-search-form{ position:relative; display:flex; align-items:center; } .w23-search-input{ width:200px; max-width:40vw; height:40px; border:1px solid #DCEAE8; border-radius:999px; padding:0 2.6rem 0 1rem; font-size:0.9rem; color:#0A3049; background:#F3FAF9; transition:width .2s,max-width .2s; } .w23-search-input::placeholder{ color:#4E6270; } .w23-search-input:focus{ outline:2px solid #14B8AD; outline-offset:1px; width:260px; max-width:60vw; } .w23-search-submit{ position:absolute; right:2px; top:2px; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:none; background:transparent; color:#0A3049; cursor:pointer; } .w23-search-submit:hover{ background:#DCEAE8; } @media (max-width:480px){ /* 140px no alcanza para el placeholder "Buscar combos…" (≈114px de texto + 16px de padding izquierdo + 41.6px del botón-lupa a la derecha ≈ 172px necesarios): se leía cortado ("Buscar cor"). La fila de búsqueda va sola (debajo del logo, no comparte espacio con el menú), así que sobra ancho de sitio: 390-470px libres a la derecha del campo en 320/360/390. */ .w23-search-input{ width:min(220px,65vw); max-width:none; } } /* Menú hamburguesa: colapsa entre 980 y 1080px (si no, el header desborda en tablet) */ @media (min-width:600px) and (max-width:1079.98px){ .w23-header .wp-block-navigation__responsive-container-open:not(.always-shown){ display:flex !important; } .w23-header .wp-block-navigation__responsive-container:not(.is-menu-open){ display:none !important; } } /* WhatsApp flotante */ .w23-wa{ position:fixed; right:20px; bottom:20px; width:58px; height:58px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,0.25); z-index:1000; } .w23-wa svg{ width:30px; height:30px; fill:#fff; } .w23-wa:hover{ transform:scale(1.06); } /* Cards de producto (loop clásico WooCommerce) — usado en tienda, home, relacionados y categorías: una sola tarjeta para todo el sitio */ .woocommerce ul.products, ul.products{ display:grid !important; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)) !important; gap:clamp(1rem,2vw,1.75rem) !important; margin:0 !important; padding:0 !important; list-style:none !important; } /* El clearfix ::before/::after de WooCommerce (woocommerce-layout.css) se convierte en un ítem más de la grilla y ocupa la primera celda, corriendo el primer producto a la 2da columna. */ .woocommerce ul.products::before, .woocommerce ul.products::after, ul.products::before, ul.products::after{ content:none !important; display:none !important; } .woocommerce ul.products li.product, ul.products li.product{ float:none !important; width:auto !important; margin:0 !important; clear:none !important; display:flex !important; flex-direction:column; background:#fff; border:1px solid #DCEAE8; border-radius:14px; overflow:hidden; padding:0 !important; list-style:none; transition:box-shadow .2s,transform .2s; } .woocommerce ul.products li.product:hover{ box-shadow:0 12px 28px rgba(16,19,28,0.1); transform:translateY(-3px); } .woocommerce ul.products li.product:focus-within{ outline:2px solid #14B8AD; outline-offset:2px; } .woocommerce ul.products li.product > a:not(.button){ text-decoration:none; color:inherit; display:flex; flex-direction:column; flex:1 0 auto; } .woocommerce ul.products li.product a img{ width:100%; aspect-ratio:1/1; object-fit:contain; display:block; background:#F3FAF9; padding:1rem; box-sizing:border-box; transition:transform .3s; } .woocommerce ul.products li.product:hover img{ transform:scale(1.04); } .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-family:var(--wp--preset--font-family--heading); font-weight:600; font-size:1rem; margin:0.9rem 1rem 0.3rem; color:#0A3049; min-height:2.6em; line-height:1.3; text-wrap:balance; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .woocommerce ul.products li.product .price{ display:block; margin:0 1rem 1rem; font-weight:700; color:#0B3D5C; font-size:1.05rem; } /* Agregar al carrito (grilla): fondo oscurecido a #0B3D5C (igual que el hero) — texto blanco sobre #14B8AD daba 3.37:1 (falla AA en texto chico); sobre #0B3D5C da 4.50:1. */ .woocommerce ul.products li.product .button{ display:block; width:calc(100% - 2rem); margin:auto 1rem 1.1rem; text-align:center; background:#0B3D5C; color:#fff; border-radius:10px; padding:0.7rem 0.6rem; font-weight:600; line-height:1.25; white-space:normal; box-sizing:border-box; font-size:0.88rem; flex-shrink:0; } .woocommerce ul.products li.product .button:hover{ background:#082C43; } .woocommerce ul.products li.product .button:focus-visible{ outline:2px solid #0A3049; outline-offset:2px; } /* Confirmación "Ver carrito" que WooCommerce inyecta tras el agregado AJAX (elemento .added_to_cart.wc-forward, nativo del core) — por defecto sale como texto suelto sin estilo, pegado al borde de la tarjeta; se convierte en una píldora visible para que el click SÍ dé una señal clara junto al botón, sin depender de que el usuario mire el contador del header. */ .woocommerce ul.products li.product a.added_to_cart.wc-forward{ display:flex; align-items:center; justify-content:center; gap:0.35rem; width:calc(100% - 2rem); margin:0.5rem 1rem 1.1rem; padding:0.55rem 0.6rem; background:#E3F7F5; color:#0F8F87; border-radius:10px; font-weight:700; font-size:0.85rem; text-decoration:none; } .woocommerce ul.products li.product a.added_to_cart.wc-forward::before{ content:"✓"; } .woocommerce ul.products li.product a.added_to_cart.wc-forward:hover{ background:#DCEAE8; } .w23-cat-filter{ display:flex; flex-wrap:wrap; gap:0.6rem; margin:0 0 2rem; } .w23-cat-filter__pill{ display:inline-flex; align-items:center; padding:0.55rem 1.1rem; border-radius:999px; border:1px solid #DCEAE8; color:#0A3049; text-decoration:none; font-weight:600; font-size:0.9rem; transition:background .15s,color .15s,border-color .15s; } .w23-cat-filter__pill:hover{ border-color:#0B3D5C; color:#0B3D5C; } .w23-cat-filter__pill.is-active{ background:#14B8AD; border-color:#14B8AD; color:#0A3049; } .woocommerce-ordering{ display:inline-block; margin-bottom:2rem; } .woocommerce-ordering select.orderby{ appearance:none; -webkit-appearance:none; border:1px solid #DCEAE8; border-radius:999px; background:#fff; padding:0.55rem 2.2rem 0.55rem 1.1rem; font-weight:600; font-size:0.9rem; color:#0A3049; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310131C' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0.75rem center; background-size:14px; cursor:pointer; } .woocommerce-ordering select.orderby:hover{ border-color:#14B8AD; } .woocommerce-result-count{ color:#4E6270; font-size:0.92rem; } .woocommerce span.onsale{ position:absolute; margin:0.7rem; background:#0A3049; color:#fff; border-radius:999px; padding:0.25rem 0.7rem; font-size:0.75rem; font-weight:700; z-index:2; } .woocommerce nav.woocommerce-pagination ul{ display:flex; gap:0.4rem; list-style:none; padding:0; justify-content:center; margin:2.5rem 0 0; } .woocommerce nav.woocommerce-pagination ul li{ list-style:none; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span{ display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; border:1px solid #DCEAE8; border-radius:8px; color:#0A3049; text-decoration:none; } .woocommerce nav.woocommerce-pagination ul li span.current{ background:#14B8AD; color:#0A3049; border-color:#14B8AD; } /* Single producto */ .woocommerce div.product .woocommerce-product-gallery img{ border-radius:14px; } .woocommerce div.product p.price, .woocommerce div.product span.price{ color:#0B3D5C; font-size:1.5rem; font-weight:700; } .woocommerce div.product form.cart{ display:flex; align-items:center; flex-wrap:wrap; gap:1rem; margin-bottom:1.5rem; } .woocommerce div.product form.cart .quantity{ margin:0; } .woocommerce div.product form.cart .quantity .qty{ height:48px; box-sizing:border-box; border-radius:10px; } .woocommerce div.product .single_add_to_cart_button, .woocommerce div.product .w23-wa-product-btn{ height:48px; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; border-radius:10px !important; font-weight:700 !important; font-size:0.98rem; padding:0 1.6rem !important; border:none !important; margin:0 !important; line-height:1; white-space:nowrap; } /* Agregar al carrito (ficha): mismo criterio que el botón de grilla — #0B3D5C + texto blanco = 4.50:1. */ .woocommerce div.product .single_add_to_cart_button{ background:#0B3D5C !important; color:#fff; } .woocommerce div.product .single_add_to_cart_button:hover{ background:#082C43 !important; } .woocommerce div.product .w23-wa-product-btn{ background:#0F7A3E; color:#fff; text-decoration:none; gap:0.5rem; } .woocommerce div.product .w23-wa-product-btn:hover{ background:#0B6B36; } /* Info de despacho / pago / garantía debajo del botón de compra */ .w23-product-info{ display:flex; flex-direction:column; gap:1.1rem; padding:1.5rem; margin-bottom:1.5rem; background:#F3FAF9; border-radius:14px; } .w23-product-info__item{ display:flex; gap:0.9rem; align-items:flex-start; } .w23-product-info__icon{ display:inline-flex; flex-shrink:0; } .w23-product-info__icon svg{ width:22px; height:22px; } .w23-product-info__item strong{ display:block; font-size:0.95rem; color:#0A3049; margin-bottom:0.15rem; } .w23-product-info__item span{ display:block; font-size:0.88rem; color:#4E6270; line-height:1.5; } .w23-product-info__item a{ color:#0B3D5C; font-weight:600; } /* Tabs de producto */ .woocommerce div.product .woocommerce-tabs ul.tabs{ border-bottom:1px solid #DCEAE8; padding:0; margin:0 0 1.5rem; display:flex; gap:0.5rem; } .woocommerce div.product .woocommerce-tabs ul.tabs li{ list-style:none; margin:0; } .woocommerce div.product .woocommerce-tabs ul.tabs li a{ display:inline-block; padding:0.8rem 1.2rem; font-weight:600; color:#4E6270; text-decoration:none; border-bottom:2px solid transparent; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a{ color:#0B3D5C; border-bottom-color:#0B3D5C; } .woocommerce div.product .woocommerce-tabs .panel{ color:#333; line-height:1.7; } /* Relacionados: mismo título que el resto del sitio */ .woocommerce div.product .related.products > h2{ font-family:var(--wp--preset--font-family--heading); font-size:1.7rem; margin-bottom:1.5rem; } /* Carrito en bloques (/carrito/ usa wc-block-cart-items, no la tabla clásica de abajo): el nombre del producto salía con el estilo de link por defecto de WooCommerce Blocks (teal, subrayado, 13px) en vez del estilo de link del resto del sitio. */ .wc-block-cart-item__product .wc-block-components-product-name{ color:#0A3049 !important; text-decoration:none !important; font-weight:600 !important; font-size:1rem !important; } .wc-block-cart-item__product .wc-block-components-product-name:hover, .wc-block-cart-item__product .wc-block-components-product-name:focus{ text-decoration:underline; color:#0F8F87; } /* El monto bajo el nombre es el precio UNITARIO y el de la columna derecha es el TOTAL de la fila; con cantidad 1 son iguales y sin cantidad >1 no queda claro cuál es cuál (el reclamo real de la clienta con el "$50.000"). Se rotula el de la izquierda como precio unitario. */ .wc-block-cart-item__prices .wc-block-components-product-price__value::after{ content:" c/u"; font-weight:400; font-size:0.85em; color:#4E6270; } .wc-block-components-quantity-selector__input{ font-size:0.95rem; font-weight:600; } /* /carrito/ usa el template "page-cart" que trae el propio WooCommerce (el tema no define uno propio), con post-content "alignwide" y CERO padding lateral — ni el tema define padding global de raíz (useRootPaddingAwareAlignments). Medido a 390px: la celda de total cierra a 2px del borde. Con overlay scrollbar (Chromium, iOS) no se nota; en un Android con scrollbar que sí reserva ancho, esos 2px desaparecen y se come el último dígito del monto ("$45.000"→"$45.00"). Mismo refuerzo, más chico, en el cajón lateral (18px de por sí, pero con 20+ artículos conviene dejar más aire). Scope a ≤782px: mismo breakpoint que ya usa WooCommerce para el carrito. */ @media (max-width:782px){ .woocommerce-cart .entry-content.wp-block-post-content{ padding-left:1rem; padding-right:1rem; } .wc-block-mini-cart__drawer .wc-block-cart-items{ padding-right:0.5rem; } } /* La causa de fondo del corte (confirmada reproduciendo, no solo midiendo el caso con montos cortos): WooCommerce (mini-cart-contents.css) fija ".is-mobile/.is-small table.wc-block-cart-items .wc-block-cart-items__row{ grid-template-columns:80px 132px }" — foto+producto fijos en 212px, el resto (cantidad + total) queda "auto" sizeado por contenido. Con montos de 5 cifras ($10.000-$20.000) entra justo; en cuanto el total crece (combo más caro, o cantidad alta — reproducido subiendo la cantidad a 12 de un ítem de $20.000 → $240.000) la columna del total crece con su contenido y el grid entero se sale del contenedor sin encogerse: la fila queda más ancha que la tarjeta y el monto se corta en el borde. Pasa en /carrito/ Y en el cajón (misma regla, mismas clases .is-mobile/.is-small). Se angostan las dos columnas fijas de WC para dejarle aire a cantidad+total, que sí se ajustan solos (ya tienen su propio layout flex). */ .is-mobile table.wc-block-cart-items .wc-block-cart-items__row, .is-small table.wc-block-cart-items .wc-block-cart-items__row{ grid-template-columns:64px minmax(0,1fr) !important; column-gap:0.6rem !important; } /* Título del cajón "Tu carrito (artículos: N)": WooCommerce (mini-cart-contents.css) le pone 2em (32px, h2.wc-block-mini-cart__title) — en un cajón de 480px entra en una sola fila, pero bajo ese ancho el cajón se angosta al viewport y cada mitad del título (dos flex-items independientes, "Tu carrito" y "(artículos: N)") envuelve por su cuenta: "Tu" queda arriba de "carrito" y "(artículos:" arriba de "N)", leyéndose como dos columnas en vez de una frase. */ @media (max-width:480px){ /* Especificidad: WooCommerce define "h2.wc-block-mini-cart__title" (elemento+clase); una regla con solo la clase pierde el empate y el 2em de WC gana igual. Hay que igualar el selector exacto. */ h2.wc-block-mini-cart__title{ font-size:1.2rem; line-height:1.35; } } .woocommerce table.shop_table{ border-radius:12px; overflow:hidden; border:1px solid #DCEAE8; border-collapse:separate; width:100%; } .woocommerce table.shop_table th{ background:#F3FAF9; font-weight:700; color:#0A3049; padding:1rem; text-align:left; } .woocommerce table.shop_table td{ padding:1rem; border-top:1px solid #DCEAE8; vertical-align:middle; } .woocommerce table.shop_table td.product-thumbnail img{ border-radius:10px; width:70px; height:70px; object-fit:contain; background:#F3FAF9; } .woocommerce table.shop_table td.product-name a{ font-weight:600; color:#0A3049; text-decoration:none; } .woocommerce table.shop_table .quantity .qty{ height:42px; border-radius:8px; box-sizing:border-box; } .woocommerce a.remove{ color:#0B3D5C !important; border-radius:50% !important; } .woocommerce a.remove:hover{ background:#14B8AD !important; color:#0A3049 !important; } .woocommerce #payment #place_order, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button{ background:#14B8AD; color:#0A3049; border-radius:10px; border:none; padding:0.85rem 1.5rem; font-weight:700; } .woocommerce #payment #place_order:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover{ background:#0F8F87; color:#0A3049; } .woocommerce .cart-collaterals .cart_totals{ background:#F3FAF9; border-radius:14px; padding:1.5rem; } .woocommerce .cart-collaterals .cart_totals h2{ margin-top:0; } .woocommerce .cart-collaterals .cart_totals table{ width:100%; } .woocommerce .cart-collaterals .cart_totals table td, .woocommerce .cart-collaterals .cart_totals table th{ padding:0.7rem 0; border-top:1px solid #DCEAE8; } .woocommerce-message, .woocommerce-info{ border-top-color:#14B8AD !important; background:#EAF9F7; } .woocommerce-message::before, .woocommerce-info::before{ color:#14B8AD !important; } /* Checkout: campos, secciones y pago */ .woocommerce-checkout .woocommerce-billing-fields h3, .woocommerce-checkout #order_review_heading{ font-family:var(--wp--preset--font-family--heading); font-size:1.3rem; } .woocommerce-checkout .form-row label{ font-weight:600; font-size:0.92rem; color:#0A3049; margin-bottom:0.3rem; } .woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row select, .woocommerce-checkout .form-row textarea{ border:1px solid #DCEAE8; border-radius:8px; padding:0.75rem; box-sizing:border-box; width:100%; } /* Select2 (Región) reemplaza el