/* ============================================================== base.css Punto Neto v1.2 Ruta: public/assets/css/base.css Creado: 2026-06-30 Modificado: 2026-07-16 Descripcion: Reset, shell de layout (header/footer/contenedor) y utilidades (botones, iconos, chips) compartidas por TODAS las vistas del storefront. No incluye estilos especificos de una sola pagina (eso vive en su propio archivo, ej. home.css, catalogo.css). v1.2 (2026-07-16) — fix real confirmado en dispositivo movil real (~390px, no en DevTools): el boton "Zona miembros"/dropdown de cuenta en el header se veia apretado contra el carrito, sin espacio para el texto. Se agrega breakpoint que oculta el texto del boton (envuelto en .encabezado-boton-texto por layout.php v1.9) dejando solo el icono — mismo tratamiento que .encabezado-cuenta-nombre (dropdown logueado, header-cuenta.css) ya tenia por separado; se unifica el breakpoint a 600px en ambos para que los dos botones cambien de tamaño juntos, no en momentos distintos del resize. Tambien se reduce el padding horizontal de .boton dentro de .encabezado en ese mismo breakpoint, para que el boton quede compacto y cuadrado en vez de con aire de mas alrededor de un icono solo. Cero cambios a .boton/.boton-fantasma fuera de .encabezado — no afecta otros botones del sitio (ej. "+ Agregar" del catalogo). v1.1 (2026-07-09) — fix de contraste: boton "Zona miembros" del header invisible en tema claro ("negro sobre negro"). Ver comentario junto a .encabezado .boton-fantasma mas abajo para el detalle completo. Este archivo tenia dos versiones sueltas en el proyecto — public/css/base.css (huerfano, de una carpeta anterior sin usar) y esta, la real (cargada por layout.php via /assets/css/). Solo esta se modifica. Depende de: Variables --color-*, --sp-*, --radio-*, --fuente-* generadas por Tema::cssVars() (debe cargarse ANTES de este archivo en el ) Requerido por: src/Views/layout.php (todas las vistas) Breakpoints del sistema (mobile-first, usar como referencia en cada archivo CSS del proyecto): --bp-tablet: 768px --bp-desktop: 1024px ============================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--color-fondo); color: var(--color-texto); font-family: var(--fuente-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button, input { font-family: inherit; } :focus-visible { outline: 2px solid var(--color-primario); outline-offset: 2px; } /* ---------------- Contenedor general ---------------- */ .contenedor { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-4); } /* ---------------- Encabezado (header) ---------------- */ .encabezado { background: var(--color-secundario); padding: var(--sp-3) var(--sp-4); display: flex; align-items: center; gap: var(--sp-4); position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--color-borde); } .encabezado-marca { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; } .encabezado-logo { height: 32px; width: auto; border-radius: var(--radio-sm); } .encabezado-nombre { color: var(--texto-sobre-secundario); font-weight: 700; font-size: 16px; white-space: nowrap; } .encabezado-buscador { display: none; /* aparece en tablet+ */ align-items: center; gap: var(--sp-2); background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio-pill); padding: var(--sp-2) var(--sp-4); flex: 1 1 auto; max-width: 480px; color: var(--color-texto-suave); } .encabezado-buscador input { border: none; background: transparent; outline: none; width: 100%; color: var(--color-texto); font-size: 14px; } .encabezado-acciones { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; } .boton-carrito { position: relative; width: 40px; height: 40px; border-radius: var(--radio-pill); background: var(--color-superficie-alt); border: 1px solid var(--color-borde); display: flex; align-items: center; justify-content: center; color: var(--color-primario); } .insignia-carrito { position: absolute; top: -4px; right: -4px; background: var(--color-primario); color: var(--texto-sobre-primario); font-size: 10px; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--color-secundario); } .insignia-carrito[data-vacio="true"] { display: none; } /* ---------------- Botones genericos ---------------- */ .boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); border-radius: var(--radio-pill); border: none; font-weight: 700; font-size: 14px; cursor: pointer; transition: transform var(--trans-rapida), background var(--trans-rapida); } .boton:active { transform: scale(.97); } .boton-primario { background: var(--color-primario); color: var(--texto-sobre-primario); } .boton-primario:hover { background: var(--color-primario-hover); } .boton-fantasma { background: transparent; border: 1px solid var(--color-borde); color: var(--color-texto); } /* FIX 2026-07-09 (detectado por Cris, tema claro): .boton-fantasma generico usa --color-texto/--color-borde — correcto cuando vive sobre --color-fondo o --color-superficie (que SI cambian con el tema). Pero .encabezado siempre usa --color-secundario como fondo, fijo, sin importar el tema — en modo oscuro por casualidad combinaba (texto claro sobre header oscuro), en modo claro --color-texto paso a ser oscuro tambien = texto invisible sobre el mismo header oscuro ("negro sobre negro"). Se sobreescribe solo dentro de .encabezado, sin tocar el estilo generico que ya funciona bien en otros contenedores (ej. footer). Mismo criterio de color ya usado en .boton-carrito/.insignia-carrito de al lado, que nunca tuvieron este problema por no depender del tema. */ .encabezado .boton-fantasma { border-color: rgba(255,255,255,.25); color: var(--texto-sobre-secundario); } .encabezado .boton-fantasma:hover { background: rgba(255,255,255,.08); } .boton-redondo { width: 30px; height: 30px; padding: 0; border-radius: 50%; } /* ---------------- Chips (categorias, filtros) ---------------- */ .chip { display: inline-flex; align-items: center; gap: 6px; background: var(--color-superficie); border: 1px solid var(--color-borde); padding: var(--sp-2) var(--sp-4); border-radius: var(--radio-pill); font-size: 13px; font-weight: 600; color: var(--color-texto-suave); white-space: nowrap; } .chip.activo { background: var(--color-primario); border-color: var(--color-primario); color: var(--texto-sobre-primario); } .chip.activo .icono { --icono-fill: 1; } /* ---------------- Pie de pagina (footer) ---------------- */ .pie-pagina { background: var(--color-secundario); color: var(--texto-sobre-secundario); padding: var(--sp-8) var(--sp-4); margin-top: var(--sp-10); } .pie-marca { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; margin-bottom: var(--sp-2); } .pie-logo { height: 28px; } .pie-descripcion { color: var(--color-texto-suave); font-size: 13px; max-width: 420px; } /* ---------------- Modo kiosko ---------------- */ /* La base clara/oscura ya la resuelve Tema::cssVars($forzarClaro), aqui solo se ajustan tamaños para uso tactil en pantalla compartida. */ body.modo-kiosko .boton, body.modo-kiosko .chip { font-size: 16px; padding: var(--sp-4) var(--sp-6); } body.modo-kiosko .encabezado { padding: var(--sp-4) var(--sp-6); } /* ---------------- Breakpoints ---------------- */ @media (min-width: 768px) { .encabezado-buscador { display: flex; } } /* v1.2: pantallas angostas — el boton "Zona miembros" (no logueado) y el dropdown de cuenta (logueado, header-cuenta.css) se quedan solo con el icono, sin texto, para no apretarse contra el carrito. Mismo breakpoint (600px) en ambos archivos a proposito, asi cambian de tamaño juntos. */ @media (max-width: 600px) { .encabezado-boton-texto { display: none; } .encabezado .boton { padding: var(--sp-3); gap: 0; } } /* ---------------- Pie de pagina — grid de columnas ---------------- */ .pie-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-8); padding-bottom: var(--sp-8); } .pie-col-titulo { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--sp-3); color: var(--texto-sobre-secundario); } .pie-links { display: flex; flex-direction: column; gap: var(--sp-2); } .pie-links a { font-size: 13px; color: var(--color-texto-suave); } .pie-links a:hover { color: var(--color-primario); } .pie-linea { display: flex; align-items: center; gap: var(--sp-2); font-size: 13px; color: var(--color-texto-suave); margin-bottom: var(--sp-2); } .pie-linea .icono { font-size: 16px; color: var(--color-primario); } .pie-boton-sucursales { margin-top: var(--sp-2); font-size: 12.5px; padding: var(--sp-2) var(--sp-4); } /* ---------------- Pie de pagina — barra inferior ---------------- */ .pie-inferior { border-top: 1px solid var(--color-borde); padding: var(--sp-4); display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); font-size: 11.5px; color: var(--color-texto-suave); text-align: center; } .pie-redes { display: flex; gap: var(--sp-3); } .pie-redes a { width: 32px; height: 32px; border-radius: 50%; background: var(--color-superficie-alt); display: flex; align-items: center; justify-content: center; color: var(--color-texto-suave); } .pie-redes a:hover { background: var(--color-primario); color: var(--texto-sobre-primario); } /* ---------------- Breakpoints ---------------- */ @media (min-width: 768px) { .pie-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .pie-inferior { flex-direction: row; justify-content: space-between; } }