/* ===================================================================== publico/assets/tema.css --------------------------------------------------------------------- EL SISTEMA DE DISEÑO DE ALMACEN MAKER, EN UN SOLO ARCHIVO. Manual de marca Rev. G. Este archivo es el maestro: publico.css, tienda.css y las hojas que vengan CONSUMEN de acá y no definen colores, fuentes, tiempos ni curvas propias. POR QUÉ ESTÁ SEPARADO --------------------- Hoy el mismo bloque :root está copiado en publico.css y en tienda.css. Dos copias de la misma verdad: el día que cambie un color, una de las dos se queda vieja y nadie se entera hasta que un cliente ve dos azules distintos entre el catálogo y la ficha. Es el mismo patrón que ya conocemos de amcUrlSubida y del escape del apóstrofo: una regla aplicada en casi todos lados, y el que falta compensado con un parche en otro sitio. CÓMO SE CARGA ------------- PRIMERO este archivo, DESPUÉS la hoja de la sección: Y las tres fuentes en el , antes de las dos hojas: Oswald 500,600,700 · Work Sans 400,600 · Caveat 600 MIENTRAS DURE LA MIGRACIÓN -------------------------- Este archivo NO toca ni pinta nada por su cuenta. Solo declara variables y componentes nuevos. Así convive con el publico.css viejo sin pelearse: lo que todavía usa --tinta y --papel sigue funcionando igual hasta que le toque su turno. ===================================================================== */ /* ===================================================================== NIVEL 1 · PRIMITIVAS Hex crudos, sin significado. NUNCA se usan en un componente. Si ves --p- algo dentro de una regla de componente, está mal. ===================================================================== */ :root{ --p-azul-plano:#262B33; --p-azul-800:#2C323C; --p-azul-700:#333A47; --p-blanco-tiza:#EEF1F4; --p-blanco-100:#FFFFFF; --p-blanco-300:#E3E9EF; --p-amarillo:#F5B000; --p-amarillo-alto:#FFC633; --p-ambar-tinta:#8A6100; --p-grafito:#4A5568; --p-linea-plano:#9FB0C2; --p-gris-500:#8A96A8; --p-gris-600:#626D7E; --p-verde-oxido-claro:#7BB37A; --p-verde-oxido-oscuro:#2E6B2C; --p-lacre-claro:#E8836E; --p-lacre-oscuro:#A83A22; --p-helio-claro:#7FB3CC; --p-helio-oscuro:#1F5F7D; /* --- Tipografía: tres familias, tres trabajos. No se cruzan. --- */ --font-display:'Oswald','Arial Narrow',sans-serif; /* títulos, nav, botones */ --font-body:'Work Sans',system-ui,sans-serif; /* todo lo que se lee */ --font-hand:'Caveat',cursive; /* solo cotas y notas */ /* --- Forma. Radio bajo. El único elemento tipo píldora de todo el sistema es el interruptor de tema, más abajo. --- */ --radius-sm:4px; --radius-md:8px; --maxw:1180px; /* --- Espacio: escala de 8. Ningún valor suelto. --- */ --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s6:48px; --s8:64px; --s12:96px; /* --- Movimiento. Es identidad, igual que el amarillo: un sistema que habla de precisión no puede moverse blando. --- */ --dur-press:140ms; /* respuesta al presionar */ --dur-ui:200ms; /* menús, tooltips, foco, subrayados */ --dur-panel:260ms; /* paneles que se desplazan. Techo del sistema. */ --ease-out:cubic-bezier(0.23,1,0.32,1); --ease-in-out:cubic-bezier(0.77,0,0.175,1); /* --- Densidad. La web pública es cómoda; el portal, compacta. --- */ --pad-panel:24px; --row-h:44px; } [data-density="compacta"]{ --pad-panel:16px; --row-h:32px; } /* ===================================================================== NIVEL 2 · SEMÁNTICAS Lo único que un componente tiene derecho a consumir. El valor cambia con el tema; el nombre no cambia nunca. Los temas se llaman por su nombre del manual — vitela y azul — y no light/dark. Cuando la pieza se llama distinto en el código que en la conversación, el sistema se desarma antes que el diseño. ===================================================================== */ html[data-theme="vitela"]{ color-scheme:light; --bg:var(--p-blanco-tiza); --bg-elev:var(--p-blanco-100); --bg-elev-2:var(--p-blanco-300); --ink:var(--p-azul-plano); --ink-dim:var(--p-grafito); --ink-faint:var(--p-gris-600); --line:var(--p-grafito); --accent:var(--p-amarillo); --accent-hover:var(--p-amarillo-alto); --accent-ink:#20242B; --accent-text:var(--p-ambar-tinta); /* ver nota abajo */ --ok:var(--p-verde-oxido-oscuro); --danger:var(--p-lacre-oscuro); --info:var(--p-helio-oscuro); --grid-minor:rgba(74,85,104,0.045); --grid-major:rgba(74,85,104,0.09); --panel-border:rgba(38,43,51,0.12); --shadow:rgba(38,43,51,0.12); } html[data-theme="azul"]{ color-scheme:dark; --bg:var(--p-azul-plano); --bg-elev:var(--p-azul-800); --bg-elev-2:var(--p-azul-700); --ink:var(--p-blanco-tiza); --ink-dim:var(--p-linea-plano); --ink-faint:var(--p-gris-500); --line:var(--p-linea-plano); --accent:var(--p-amarillo); --accent-hover:var(--p-amarillo-alto); --accent-ink:#20242B; --accent-text:var(--p-amarillo); --ok:var(--p-verde-oxido-claro); --danger:var(--p-lacre-claro); --info:var(--p-helio-claro); --grid-minor:rgba(159,176,194,0.035); --grid-major:rgba(159,176,194,0.07); --panel-border:rgba(159,176,194,0.16); --shadow:rgba(0,0,0,0.4); } /* Sin atributo, Vitela. El sistema nace en papel y el papel es claro. Ojo: acá NO hay prefers-color-scheme a propósito. Plano Azul es una elección explícita del visitante, no una consecuencia de cómo tenga configurado el teléfono. */ html:not([data-theme]){ color-scheme:light; --bg:var(--p-blanco-tiza); --bg-elev:var(--p-blanco-100); --bg-elev-2:var(--p-blanco-300); --ink:var(--p-azul-plano); --ink-dim:var(--p-grafito); --ink-faint:var(--p-gris-600); --line:var(--p-grafito); --accent:var(--p-amarillo); --accent-hover:var(--p-amarillo-alto); --accent-ink:#20242B; --accent-text:var(--p-ambar-tinta); --ok:var(--p-verde-oxido-oscuro); --danger:var(--p-lacre-oscuro); --info:var(--p-helio-oscuro); --grid-minor:rgba(74,85,104,0.045); --grid-major:rgba(74,85,104,0.09); --panel-border:rgba(38,43,51,0.12); --shadow:rgba(38,43,51,0.12); } /* EL AMARILLO TIENE DOS FORMAS Y SE CONFUNDEN FÁCIL: --accent relleno. Idéntico en los dos temas y en impreso. --accent-text tinta. Se oscurece a ámbar sobre fondo claro. Sobre blanco tiza, #F5B000 como texto da 1.7:1 — ilegible. Es el error más común al llevar el sistema a fondo claro. */ /* ===================================================================== FONDO: LA CUADRÍCULA Nunca liso. Dos niveles, relación 1:4, siempre bajo el 10%. Se pone en el elemento que la necesita, no en — esa decisión la toma publico.css cuando le toque la migración. ===================================================================== */ .grid-bg{ background-image: repeating-linear-gradient(0deg, var(--grid-major) 0 1px, transparent 1px 96px), repeating-linear-gradient(90deg, var(--grid-major) 0 1px, transparent 1px 96px), repeating-linear-gradient(0deg, var(--grid-minor) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, var(--grid-minor) 0 1px, transparent 1px 24px); } /* Sobre fotografía baja al 6%: por encima compite con la pieza. */ .grid-bg--foto{ opacity:.6; } /* ===================================================================== COMPONENTES DEL SISTEMA El inventario mínimo. Todo lo que se construya se arma con esto o justifica por qué necesita una pieza nueva. ===================================================================== */ /* ---------- Lámina: panel con marcas de registro ---------- La pieza que más viaja: web, flyer, etiqueta, señalética. */ .lamina{ position:relative; background:var(--bg-elev); border:1px solid var(--panel-border); border-radius:var(--radius-md); padding:var(--pad-panel); box-shadow:0 16px 34px -20px var(--shadow); } .lamina::before, .lamina::after{ content:""; position:absolute; width:14px; height:14px; pointer-events:none; } .lamina::before{ top:-1px; left:-1px; border-top:2px solid var(--line); border-left:2px solid var(--line); } .lamina::after { bottom:-1px; right:-1px; border-bottom:2px solid var(--line); border-right:2px solid var(--line); } /* La etiqueta que nombra la lámina, asomando por el borde. */ .lamina-tab{ position:absolute; top:-14px; left:22px; z-index:2; background:var(--accent); color:var(--accent-ink); font-family:var(--font-display); font-weight:600; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; padding:5px 12px; border-radius:2px; transform:rotate(-1.2deg); box-shadow:0 6px 14px -4px var(--shadow); } /* ---------- Eyebrow: la etiqueta sobre un título ---------- */ .eyebrow{ font-family:var(--font-display); font-size:12px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent-text); display:flex; align-items:center; gap:10px; margin-bottom:14px; } .eyebrow::before{ content:""; width:20px; height:2px; background:var(--accent); flex:none; } /* ---------- Cota: acento de precisión junto a un titular ---------- Máximo una por vista. Su fuerza está en la escasez. */ .cota{ font-family:var(--font-hand); font-size:20px; font-weight:600; color:var(--accent-text); display:inline-flex; align-items:center; gap:8px; } /* ---------- Anotación manuscrita ---------- Decoración con temperatura. NUNCA transporta información necesaria: quien no pueda leer una cursiva tiene que poder operar todo igual. */ .anotacion{ font-family:var(--font-hand); font-size:20px; font-weight:600; color:var(--ink-dim); display:inline-block; transform:rotate(-2deg); } .anotacion--der{ transform:rotate(2deg); } /* ---------- Botones ---------- UN solo botón sólido por vista: es la acción principal. Todo lo demás, ghost. */ .btn-sistema{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 20px; /* área táctil de lámina 21 */ font-family:var(--font-display); font-weight:600; font-size:14px; letter-spacing:0.06em; text-transform:uppercase; border-radius:var(--radius-sm); border:1.5px solid transparent; cursor:pointer; transition:transform var(--dur-press) var(--ease-out), background-color var(--dur-ui) ease, border-color var(--dur-ui) ease, color var(--dur-ui) ease; } /* La escala al presionar es lo que hace que la interfaz se sienta atenta. Va en :active, no en hover: es respuesta, no adorno. */ .btn-sistema:active{ transform:scale(0.97); } .btn-solido{ background:var(--accent); color:var(--accent-ink); } .btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); } @media (hover:hover) and (pointer:fine){ .btn-solido:hover{ background:var(--accent-hover); } .btn-ghost:hover{ border-color:var(--ink); } } /* ---------- Chips ---------- El amarillo marca UN elemento por grupo. Marca lo más relevante, no un estado — para eso están los cuatro de abajo. */ .chip{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-body); font-size:12px; font-weight:600; padding:4px 10px; border-radius:var(--radius-sm); border:1px solid var(--panel-border); color:var(--ink-dim); background:var(--bg-elev); } .chip--prioritario{ background:var(--accent); color:var(--accent-ink); border-color:transparent; } .chip--ok{ color:var(--ok); border-color:currentColor; } .chip--error{ color:var(--danger); border-color:currentColor; } .chip--info{ color:var(--info); border-color:currentColor; } /* Regla dura: el color nunca es el único portador del estado. Cada chip lleva su palabra escrita adentro, sin excepción. */ /* ===================================================================== INTERRUPTOR DE TEMA El ÚNICO elemento tipo píldora autorizado en todo el sistema. La forma sola ya lo identifica: por eso no lleva sol ni luna adentro. El marcado lo pinta _cabecera.php (franja 3, extremo derecho) y el panel de menú en móvil. Los dos leen y escriben el mismo data-theme del , así que no pueden desincronizarse. ===================================================================== */ .tema{ position:relative; flex:none; width:64px; height:34px; padding:0; min-width:44px; min-height:34px; border:1.5px solid var(--line); border-radius:999px; background:var(--bg-elev); cursor:pointer; transition:border-color var(--dur-ui) ease, background-color var(--dur-ui) ease; } .tema::after{ content:""; position:absolute; top:50%; left:4px; width:22px; height:22px; margin-top:-11px; border-radius:50%; background:var(--ink); transition:transform var(--dur-press) var(--ease-out); } html[data-theme="azul"] .tema::after{ transform:translateX(28px); } .tema:active{ transform:scale(0.97); } @media (hover:hover) and (pointer:fine){ .tema:hover{ border-color:var(--ink); } } /* El punto es --ink en los dos temas, no --accent. Un mando que está presente en TODAS las vistas y no señala nada se comería el único amarillo permitido por vista, en cada página del sitio. */ /* El cambio de tema NO se anima: la página entera cruzando de color deja media pantalla en un estado y media en otro, y eso se ve peor que el salto. Lo único que se mueve es el punto del mando. */ /* ===================================================================== BASE COMPARTIDA Lo mínimo que no puede vivir en la hoja de una sección. ===================================================================== */ /* DOS ANCHOS, Y LA DIFERENCIA NO ES CAPRICHO. .envoltura 1180px. Contenido que se LEE: portada, catálogo, fichas. El tope del manual es una regla de medida de línea — existe para que un párrafo no pase de 75 caracteres, porque más que eso el ojo pierde el renglón al volver. .envoltura-ancha todo el ancho. Cabecera y pie: son estructura, no lectura. Un menú de categorías y un índice de enlaces no tienen medida de línea que proteger, y apretarlos a 1180 en una pantalla de 2400 deja media pantalla vacía a los dos lados, justo donde hace falta sitio para poner cosas. El padding crece con la pantalla en vez de quedar fijo: a 24px en un monitor grande el logo queda pegado al borde del vidrio. */ .envoltura{ max-width:var(--maxw); margin:0 auto; padding:0 var(--s3); } .envoltura-ancha{ width:100%; max-width:none; margin:0; padding:0 clamp(20px, 2.6vw, 56px); } /* El foco se marca con borde de acento, nunca con sombra difusa. */ :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; } /* Cualquier ancla con id queda por debajo de la cabecera pegajosa. */ [id]{ scroll-margin-top:96px; } /* ===================================================================== MOVIMIENTO REDUCIDO No es movimiento cero: se conservan opacidad y color, que ayudan a entender QUÉ cambió. Se elimina todo desplazamiento y escalado. ===================================================================== */ @media (prefers-reduced-motion: reduce){ .btn-sistema:active, .tema:active{ transform:none; } .tema::after{ transition:background-color var(--dur-press) ease; } html[data-theme="azul"] .tema::after{ transform:translateX(28px); } }