/* =========================================================================== MSP NOA · B2B Hoja unica. Todas las pantallas se visten desde aca. POR QUE EL ROJO El rojo es el color de la empresa y en esta pantalla significa UNA sola cosa: accion. Comprar, entrar, cargar, buscar. El peligro --deuda vencida, pedido rechazado-- usa el MISMO rojo pero nunca relleno: solo borde y tinte. Un boton rojo se toca; un cartel de borde rojo se lee. POR QUE NO SE RENOMBRO NINGUNA CLASE Las clases que ya usaban Carrito, Pedidos, Login, Tablero, Articulo y Mi cuenta siguen existiendo con el mismo nombre. Cambio como se ven, no como se llaman: asi ninguna de esas pantallas se rompe al cambiar el diseno. REGLA DE ANCHO Ningun bloque puede empujar la pagina a lo ancho. Lo que no entra --tablas, la barra de navegacion-- se desplaza dentro de su propia caja, nunca arrastrando el cuerpo. Si alguna vez la pagina se corre para el costado en un celular, el culpable es un bloque que se salteo esta regla. =========================================================================== */ :root { --fondo: #F7F7F8; --superficie: #FFFFFF; --superficie-2: #F2F3F5; --texto: #18181B; --texto-2: #3F3F46; --texto-suave: #71717A; --texto-tenue: #A1A1AA; --borde: #E4E4E7; --borde-2: #D4D4D8; /* El rojo de la marca. --acento existe porque asi se llamaba antes y lo usan todas las pantallas viejas; ahora apunta al rojo. */ --rojo: #DC2626; --rojo-h: #B91C1C; --rojo-suave: rgba(220,38,38,.09); --acento: #DC2626; --acento-oscuro:#B91C1C; --peligro: #DC2626; --verde: #059669; --verde-tinte: rgba(5,150,105,.09); --verde-borde: rgba(5,150,105,.26); --ok: #059669; --ambar: #B45309; --ambar-tinte: rgba(180,83,9,.09); --ambar-borde: rgba(180,83,9,.26); --alerta: #B45309; /* Las fotos van SIEMPRE sobre blanco, tambien en modo oscuro. Sobre gris el recorte del producto se ve sucio. */ --foto: #FFFFFF; /* La barra de navegacion es oscura en los dos modos: es lo que le da identidad a la cabecera y no depende del tema del sistema. */ --nav-fondo: #18181B; --nav-borde: #27272A; --nav-texto: #D4D4D8; --tinta: #18181B; --tinta-txt: #FFFFFF; --tit: "Chakra Petch", "Segoe UI", system-ui, sans-serif; --radio: 10px; --r-lg: 14px; --r-xl: 18px; --sombra: 0 1px 2px rgba(15,23,42,.05), 0 4px 12px rgba(15,23,42,.05); --sombra-a: 0 2px 6px rgba(15,23,42,.07), 0 14px 30px rgba(15,23,42,.09); } /* EL TEMA SE PUEDE ELEGIR, Y SON TRES ESTADOS, NO DOS. claro / oscuro / el que use el sistema. El tercero no es relleno: es el que respeta el modo noche del telefono sin que nadie tenga que acordarse de cambiarlo dos veces por dia. Por eso los mismos tokens aparecen en dos bloques. El primero atiende al sistema pero se rinde si el cliente eligio claro a mano; el segundo es la eleccion explicita de oscuro y gana siempre. Sin el segundo, elegir oscuro en una maquina con el sistema en claro no haria absolutamente nada. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fondo: #0F1115; --superficie: #14171D; --superficie-2: #181B22; --texto: #FAFAFA; --texto-2: #D4D4D8; --texto-suave: #A1A1AA; --texto-tenue: #71717A; --borde: #27272A; --borde-2: #3F3F46; --rojo: #EF4444; --rojo-h: #DC2626; --rojo-suave: rgba(239,68,68,.14); --acento: #EF4444; --acento-oscuro:#F87171; --peligro: #F87171; --verde: #34D399; --verde-tinte: rgba(52,211,153,.10); --verde-borde: rgba(52,211,153,.28); --ok: #34D399; --ambar: #FBBF24; --ambar-tinte: rgba(251,191,36,.10); --ambar-borde: rgba(251,191,36,.30); --alerta: #FBBF24; --nav-fondo: #0B0D11; --nav-borde: #1F2126; --tinta: #2A2E37; --tinta-txt: #FAFAFA; --sombra: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3); --sombra-a: 0 2px 6px rgba(0,0,0,.5), 0 16px 36px rgba(0,0,0,.45); } } :root[data-theme="dark"] { --fondo: #0F1115; --superficie: #14171D; --superficie-2: #181B22; --texto: #FAFAFA; --texto-2: #D4D4D8; --texto-suave: #A1A1AA; --texto-tenue: #71717A; --borde: #27272A; --borde-2: #3F3F46; --rojo: #EF4444; --rojo-h: #DC2626; --rojo-suave: rgba(239,68,68,.14); --acento: #EF4444; --acento-oscuro:#F87171; --peligro: #F87171; --verde: #34D399; --verde-tinte: rgba(52,211,153,.10); --verde-borde: rgba(52,211,153,.28); --ok: #34D399; --ambar: #FBBF24; --ambar-tinte: rgba(251,191,36,.10); --ambar-borde: rgba(251,191,36,.30); --alerta: #FBBF24; --nav-fondo: #0B0D11; --nav-borde: #1F2126; --tinta: #2A2E37; --tinta-txt: #FAFAFA; --sombra: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3); --sombra-a: 0 2px 6px rgba(0,0,0,.5), 0 16px 36px rgba(0,0,0,.45); } * { box-sizing: border-box; } /* OJO CON ESTO: ACA ESTUVO ROTA LA CABECERA PEGAJOSA. Habia un "overflow-x: hidden" en html y body como red de seguridad contra el desborde horizontal. El problema es que overflow:hidden convierte al elemento en un contenedor de desplazamiento, y position:sticky se pega respecto de ESE contenedor, no de la ventana. Resultado: la cabecera se iba para arriba al bajar, como si no fuera pegajosa. overflow-x: clip recorta igual pero NO crea contenedor de desplazamiento, asi que sticky vuelve a funcionar. Y de todas formas la red de seguridad sobra: las pruebas en siete anchos dan cero desborde. Queda solo en y solo como clip. */ html { overflow-x: clip; } body { margin: 0; background: var(--fondo); color: var(--texto); font: 15px/1.5 "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { max-width: 100%; } h1, h2, h3, .marca, .valor, .cc-saldo .valor { font-family: var(--tit); } /* =========================================================================== ENCABEZADO Tres pisos, y cada uno tiene un motivo: 1. Horarios y telefono: el mayorista llama, no solo compra. 2. Marca, buscador, saldo y carrito: lo que se usa todo el tiempo. 3. Navegacion oscura: adonde se puede ir. =========================================================================== */ .wrap { max-width: 1400px; margin: 0 auto; padding: 0 20px; } .top { background: var(--superficie-2); border-bottom: 1px solid var(--borde); font-size: 12.5px; color: var(--texto-suave); } .top .wrap { display: flex; align-items: center; gap: 18px; min-height: 34px; flex-wrap: wrap; } .top .der { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; } .top b { color: var(--texto-2); font-weight: 600; } /* La cabecera queda fija arriba con el fondo apenas translucido y desenfocado: al desplazar, lo que pasa por debajo se insinua sin competir con el texto. El color de respaldo es OPACO a proposito. backdrop-filter no existe en todos los navegadores; donde no existe, un fondo semitransparente dejaria ver los articulos pasando por atras del buscador y seria ilegible. Recien cuando el navegador confirma que sabe desenfocar se baja la opacidad. */ /* SOLO EL ENCABEZADO SE PEGA. LA NAVEGACION BAJA CON LA PAGINA. El buscador y el carrito se usan en cualquier momento, asi que quedan siempre a mano. Cambiar de seccion, en cambio, se hace al principio: dejar tambien esa franja fija come cien pixeles de alto en todas las pantallas, y en un celular eso es un tercio de lo que se ve. */ .cabecera { position: sticky; top: 0; z-index: 30; } .barra { background: var(--superficie); border-bottom: 1px solid var(--borde); } /* El vidrio esmerilado va en el contenedor, no en cada franja, para que el catalogo se vea pasar por debajo de las dos. El color de respaldo es OPACO a proposito: donde el navegador no sabe desenfocar, un fondo translucido dejaria ver los articulos corriendo por atras del buscador y seria ilegible. Recien cuando confirma que sabe, se baja la opacidad. */ @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .cabecera { -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); } .cabecera .barra { background: color-mix(in srgb, var(--superficie) 72%, transparent); } } .barra-in { max-width: 1400px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .marca { font-weight: 700; letter-spacing: -.02em; font-size: 20px; line-height: 1; } .marca span { color: var(--rojo); } .marca small { display: block; font-family: "Plus Jakarta Sans", sans-serif; font-size: 9.5px; letter-spacing: .22em; color: var(--texto-tenue); font-weight: 700; margin-top: 2px; } /* El buscador vive en la cabecera y esta en todas las pantallas: es la herramienta principal de un mayorista con el codigo en la mano. */ /* El buscador ya no se estira sin limite. Pegado al saldo, y con medio metro de campo vacio, el cliente no sabe donde termina uno y empieza el otro. Ahora tiene un tope y un margen propio a la derecha. */ .buscador-cab { flex: 1 1 300px; max-width: 620px; display: flex; min-width: 0; margin-right: 8px; } /* El unico desplegable del buscador es "donde buscar". El de rubro se saco: el arbol de categorias ya esta a la izquierda y repetirlo aca duplicaba el control y se comia el ancho del campo de texto. Va pegado al campo de texto, sin curva en el medio, y con la MISMA flecha dibujada que los filtros del catalogo: buscar y filtrar tienen que verse como dos partes de la misma herramienta, no como dos aplicaciones. */ .buscador-cab .sel-cab { flex: 0 1 auto; min-width: 96px; max-width: 176px; } .buscador-cab .sel-cab select { width: 100%; height: auto; min-width: 0; padding: 10px 30px 10px 11px; font: inherit; font-size: 13.5px; font-weight: 600; appearance: none; -webkit-appearance: none; -moz-appearance: none; border: 1px solid var(--borde); border-right: 0; border-radius: var(--radio) 0 0 var(--radio); background: var(--superficie-2); color: var(--texto-2); cursor: pointer; transition: color .15s, background .15s; } .buscador-cab .sel-cab select:hover { color: var(--texto); background: var(--superficie); } .buscador-cab .sel-cab select:focus-visible { outline: none; color: var(--texto); } .buscador-cab .sel-cab .chev { right: 9px; } .buscador-cab input[type=search] { flex: 1; min-width: 0; padding: 10px 14px; font: inherit; font-size: 14px; border: 1px solid var(--borde); border-right: 0; border-left: 0; background: var(--superficie); color: var(--texto); } /* El campo de texto nunca lleva la curva de la izquierda: siempre tiene un desplegable delante --el de "donde buscar", que esta en todas las pantallas-- y la curva la lleva ese. */ .buscador-cab .sel-cab + input[type=search] { border-radius: 0; } .buscador-cab input[type=search]:focus { outline: none; border-color: var(--rojo); } .buscador-cab button { display: flex; align-items: center; gap: 7px; border: 0; cursor: pointer; padding: 0 18px; font: inherit; font-weight: 700; font-size: 14px; background: var(--rojo); color: #fff; border-radius: 0 var(--radio) var(--radio) 0; } .buscador-cab button:hover { background: var(--rojo-h); } /* EL NOMBRE DEL CLIENTE ES UN MENU. Es un
, asi que abre y cierra sin JavaScript. Salir vivia suelto en la barra oscura, que es un lugar raro para algo que se usa una vez por dia: el gesto natural es tocar el nombre propio. */ .barra .quien { position: relative; } .barra .quien > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--radio); color: var(--texto-suave); font-size: 12.5px; line-height: 1.3; text-align: right; } .barra .quien > summary::-webkit-details-marker { display: none; } .barra .quien > summary:hover { background: var(--superficie-2); } .barra .quien .txt strong { display: block; color: var(--texto); font-size: 13.5px; font-weight: 700; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .barra .quien .flecha { flex: none; color: var(--texto-tenue); transition: transform .2s; } .barra .quien[open] > summary .flecha { transform: rotate(180deg); } .barra .quien[open] > summary { background: var(--superficie-2); } /* Cerrado, el panel se saca del calculo con display:none. Los navegadores nuevos le siguen dando caja a lo que hay dentro de un
cerrado, y un panel de 250px anclado a la derecha empujaba la pagina a lo ancho estando invisible. Un desborde que no se ve es peor que uno que se ve. El tope de ancho es para el celular: el panel nunca puede ser mas ancho que la pantalla. */ .barra .quien:not([open]) .panel { display: none; } .barra .quien .panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 250px; max-width: calc(100vw - 28px); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg); box-shadow: var(--sombra-a); padding: 6px; display: flex; flex-direction: column; gap: 1px; } .barra .quien .quien-cab { padding: 9px 11px 11px; border-bottom: 1px solid var(--borde); margin-bottom: 5px; } .barra .quien .quien-cab strong { display: block; font-size: 13.5px; } .barra .quien .quien-cab span { font-size: 12px; color: var(--texto-suave); } .barra .quien .panel a, .barra .quien .panel .salir { display: block; width: 100%; text-align: left; padding: 9px 11px; border-radius: 8px; font: inherit; font-size: 13.5px; color: var(--texto-2); border: 0; background: none; cursor: pointer; } .barra .quien .panel a:hover { background: var(--superficie-2); color: var(--texto); } .barra .quien .panel .salir { color: var(--rojo); font-weight: 700; border-top: 1px solid var(--borde); margin-top: 5px; border-radius: 0 0 8px 8px; } .barra .quien .panel .salir:hover { background: var(--rojo-suave); } /* El carrito con su globo. Es un blanco de toque en celular: 42px de lado. */ .cab-carrito { position: relative; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radio); background: var(--rojo); color: #fff; flex: none; } .cab-carrito:hover { background: var(--rojo-h); } .cab-carrito .globo { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; background: var(--tinta); color: var(--tinta-txt); border: 2px solid var(--superficie); font-size: 10.5px; font-weight: 800; line-height: 15px; text-align: center; font-variant-numeric: tabular-nums; } /* ---- Barra de navegacion oscura ---------------------------------------- */ .menu-b { background: var(--nav-fondo); border-bottom: 1px solid var(--nav-borde); } /* Si los items no entran, se desplazan DENTRO de la barra. La pagina no se mueve. Por eso el overflow va aca y no en el cuerpo. */ .menu-b .wrap { display: flex; align-items: stretch; gap: 2px; min-height: 46px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .menu-b .wrap::-webkit-scrollbar { display: none; } .menu-b a { display: flex; align-items: center; gap: 8px; padding: 0 16px; font-size: 13.5px; font-weight: 600; color: var(--nav-texto); white-space: nowrap; } .menu-b a:hover { background: var(--nav-borde); color: #fff; } .menu-b a.on { background: var(--rojo); color: #fff; } .menu-b .nav-der { margin-left: auto; display: flex; align-items: center; gap: 14px; padding-left: 16px; flex: none; } .menu-b .tel { display: flex; align-items: center; gap: 8px; color: #fff; font-family: var(--tit); font-weight: 700; font-size: 15px; white-space: nowrap; } .menu-b .nav-quien { display: none; color: var(--nav-texto); font-size: 12.5px; white-space: nowrap; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; } .nav-salir { border: 1px solid var(--nav-borde); background: none; cursor: pointer; color: var(--nav-texto); font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 7px; white-space: nowrap; } .nav-salir:hover { border-color: var(--rojo); color: #fff; background: var(--rojo); } /* El saldo acompana al nombre en TODAS las pantallas: si el cliente tiene deuda vencida deberia verlo mientras arma el carrito, no recien cuando entra a mirar su cuenta. */ /* EL SALDO EN LA CABECERA, COMO EN LA MAQUETA. El vencido va en AMBAR aca y en ROJO en Mi cuenta, y la diferencia es a proposito: esta franja se ve en todas las pantallas todo el tiempo, y un numero rojo permanente arriba de la cabeza deja de alarmar a los tres dias. El ambar avisa; el rojo, que aparece cuando el cliente entra a mirar su cuenta, alarma. Si los dos gritaran igual, ninguno se escucharia. La rayita de la derecha lo separa del nombre: son dos datos distintos. */ .saldo-barra { text-align: right; line-height: 1.25; padding: 0 16px 0 4px; border-right: 1px solid var(--borde); flex: none; } .saldo-barra .e { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--texto-tenue); } .saldo-barra .v { font-family: var(--tit); font-size: 16px; font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; } .saldo-barra.debe .v { color: var(--ambar); } .saldo-barra:hover .v { text-decoration: underline; } .contenido { max-width: 1400px; margin: 0 auto; padding: 22px 20px 60px; } /* =========================================================================== BOTONES =========================================================================== */ .boton { background: var(--rojo); color: #fff; border: 0; cursor: pointer; padding: 10px 20px; border-radius: var(--radio); font: inherit; font-weight: 700; } .boton:hover { background: var(--rojo-h); } .boton:disabled { background: var(--superficie-2); color: var(--texto-tenue); cursor: not-allowed; } .boton-suave, .boton-secundario { background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px 18px; font: inherit; font-weight: 600; cursor: pointer; } .boton-suave:hover, .boton-secundario:hover { border-color: var(--rojo); color: var(--rojo); } .boton-chico { padding: 7px 11px; font-size: 13px; border-radius: 7px; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto-suave); cursor: pointer; font-family: inherit; } .boton-chico:hover { color: var(--rojo); border-color: var(--rojo); } .boton-texto { background: none; border: 0; padding: 6px 2px; cursor: pointer; color: var(--texto-suave); font-size: 13px; font-family: inherit; } .boton-texto:hover { color: var(--rojo); text-decoration: underline; } :focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; } /* =========================================================================== BUSCADOR DE LA PAGINA Y BARRA DE RESULTADOS =========================================================================== */ .buscador { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; } .buscador input[type=search], .buscador select { padding: 10px 14px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); color: var(--texto); font: inherit; font-size: 14px; min-width: 0; } .buscador input[type=search] { flex: 1 1 300px; } .buscador label { display: flex; align-items: center; gap: 7px; color: var(--texto-suave); font-size: 13.5px; } /* La casilla que acota la busqueda a la categoria abierta. Va apagada: el cliente busca en todo el catalogo salvo que pida lo contrario. */ .acotar { max-width: 340px; } .acotar strong { color: var(--texto); font-weight: 700; } /* =========================================================================== LA CAJA QUE SE REEMPLAZA AL FILTRAR Ordenar o cambiar de pagina cambia SOLO esto, sin recargar la pantalla. Mientras llega la lista nueva se atenua y deja de aceptar clics: sin esa senal, con la respuesta demorando medio segundo, parece que el filtro no hizo nada y el cliente lo vuelve a tocar. =========================================================================== */ #lista { transition: opacity .14s ease; } #lista.cargando { opacity: .42; pointer-events: none; } .resultados { color: var(--texto-suave); font-size: 13px; margin-bottom: 14px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .resultados .ambito { margin-left: auto; padding-left: 12px; border-left: 1px solid var(--borde); } .resultados .ambito strong { color: var(--texto); font-weight: 700; } .resultados .ambito a { color: var(--rojo); font-weight: 600; } @media (max-width: 760px) { .resultados .ambito { margin-left: 0; padding-left: 0; border-left: 0; } } .miga { color: var(--texto); font-weight: 700; margin-right: 8px; } /* =========================================================================== GRILLA Y TARJETA DE ARTICULO El orden de la tarjeta no es estetico, es de lectura: 1. Estado: si no se puede comprar, no hace falta leer el resto. 2. Codigo: es lo que el cliente tiene anotado en la mano. 3. Descripcion. 4. Precio. 5. Cantidad y cargar. =========================================================================== */ /* 228px es el ancho minimo en el que el precio de lista y el de contado siguen entrando en una linea cada uno sin cortarse. Por debajo de eso la cifra se parte y deja de leerse de un vistazo. */ .grilla { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); } /* --------------------------------------------------------------------------- LA MISMA TARJETA, ACOSTADA No hay una segunda tarjeta para la vista de lista: es la de siempre puesta en dos columnas, foto a la izquierda y todo lo demas apilado a la derecha. Una sola tarjeta significa que un arreglo vale para las dos vistas; dos tarjetas distintas significa arreglar todo dos veces y olvidarse una. El reparto es explicito --cada hijo dice en que columna va-- porque si se deja que la grilla acomode sola, el segundo hijo cae en la columna de la foto y la tarjeta queda dada vuelta. --------------------------------------------------------------------------- */ /* TODO ESTO VA COLGADO DE #lista, Y NO ES PRECAUCION: ES UN ARREGLO. "Ofertas de la semana" tambien usa la clase .grilla --es
-- y esta ANTES en la pagina. Sin este prefijo, elegir "lista" acostaba las ofertas y dejaba el catalogo igual, que es justo al reves de lo que se pedia. Los packs mayoristas usan .packs y nunca estuvieron en juego. */ #lista .grilla.lista { grid-template-columns: 1fr; gap: 0; border: 1px solid var(--borde); border-radius: var(--r-lg); overflow: hidden; background: var(--superficie); box-shadow: var(--sombra); } /* LA FILA. No es una tarjeta mas chica: es un renglon de tabla. Columnas de ancho FIJO --menos la descripcion-- para que el codigo de un renglon quede alineado con el del de arriba. Si cada fila midiera sus columnas por su cuenta, el ojo no podria recorrer una columna en vertical, que es exactamente para lo que sirve una lista. Cinco columnas: codigo | descripcion | stock | precios | cantidad. La de precios va partida por dentro en dos de ancho fijo (lista y contado), asi que tambien quedan alineadas entre filas. Cuatro renglones de grilla: 1fr, descripcion, descripcion adicional, 1fr. Los dos 1fr de los bordes se reparten el alto que sobra, asi que la descripcion (con o sin adicional) queda centrada igual que el codigo y el precio, que ocupan los cuatro. Sin adicional, ese renglon mide cero. Los cortes van por ancho del CATALOGO y no de la pantalla (container query): el menu de la izquierda se pliega abajo de 900px de pantalla, y con el el catalogo se ENSANCHA aunque la pantalla se achique. Medido: a 1024px de pantalla el catalogo tiene 752px, y a 860px tiene 820. */ #lista { container-type: inline-size; container-name: catalogo; } #lista .grilla.lista .ficha, #lista .grilla.lista .l-cab { display: grid; grid-template-columns: 112px minmax(0, 1fr) 92px 274px 188px; column-gap: 14px; padding: 4px 14px; } #lista .grilla.lista .ficha { border: 0; border-bottom: 1px solid var(--borde); border-radius: 0; box-shadow: none; background: none; grid-template-rows: 1fr auto auto 1fr; row-gap: 0; align-items: center; min-height: 40px; animation: none; } #lista .grilla.lista .ficha:last-child { border-bottom: 0; } #lista .grilla.lista .ficha:hover { transform: none; background: var(--superficie-2); } /* LA CABECERA. En tarjetas no existe. */ .grilla .l-cab { display: none; } #lista .grilla.lista .l-cab { align-items: center; min-height: 32px; background: var(--superficie-2); border-bottom: 1px solid var(--borde); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-tenue); } #lista .grilla.lista .l-cab > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #lista .grilla.lista .l-cab .l-cab-der { text-align: center; } #lista .grilla.lista .l-cab .l-cab-precios { display: grid; grid-template-columns: 116px 146px; column-gap: 12px; text-align: right; } /* La etiqueta de contado la escribe el cliente en appsettings y puede ser larga ("Oferta pagando de contado"): en la cabecera va en dos renglones antes que cortarse. */ #lista .grilla.lista .l-cab .l-cab-precios > * { white-space: normal; line-height: 1.2; padding: 3px 0; justify-content: flex-end; } /* display:contents saca al cuerpo del medio sin tocar el HTML: sus hijos pasan a ser celdas de la fila. Es la unica forma de que el codigo, la descripcion y el precio caigan en columnas propias estando anidados. */ #lista .grilla.lista .f-cuerpo { display: contents; } /* EL STOCK, SOLO. El -30% ya no va aca: se muda al lado del precio de contado, que es el numero al que se refiere. Con las dos pastillas juntas la columna no alcanzaba y esa fila se corria respecto de las demas. */ #lista .grilla.lista .f-foto { grid-column: 3; grid-row: 1 / -1; background: none; border: 0; display: flex; justify-content: center; } #lista .grilla.lista .f-foto .marco { display: none; } #lista .grilla.lista .f-foto .chips { position: static; padding: 0; display: flex; gap: 4px; flex-wrap: nowrap; } #lista .grilla.lista .f-foto .et-off { display: none; } #lista .grilla.lista .etiqueta { font-size: 9.5px; padding: 1px 6px; } #lista .grilla.lista .codigo { grid-column: 1; grid-row: 1 / -1; height: auto; font-size: 11px; } #lista .grilla.lista .cod-fabrica { display: none; } #lista .grilla.lista .titulo { grid-column: 2; grid-row: 2; height: auto; -webkit-line-clamp: 1; font-size: 13px; font-weight: 600; line-height: 1.3; } /* LA DESCRIPCION ADICIONAL: debajo de la descripcion, gris, cortada a una linea. Si el articulo no la tiene, el div llega vacio y no ocupa lugar. */ #lista .grilla.lista .detalle-extra { grid-column: 2; grid-row: 3; height: auto; margin: 0; font-size: 11.5px; line-height: 1.35; color: var(--texto-suave); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #lista .grilla.lista .detalle-extra:empty { display: none; } #lista .grilla.lista .marca-txt { display: none; } /* LOS PRECIOS: dos columnas fijas por dentro, lista y contado, alineadas a la derecha. El rotulo no entra en 40px de alto; lo dice la cabecera. */ #lista .grilla.lista .precio { grid-column: 4; grid-row: 1 / -1; min-height: 0; padding: 0; display: grid; grid-template-columns: 116px 146px; column-gap: 12px; align-items: center; justify-items: end; } #lista .grilla.lista .precio .lista-fila { display: block; grid-column: 1; } #lista .grilla.lista .precio .lista-fila .rotulo { display: none; } /* "Consultar precio" (articulo sin precio): ocupa las dos columnas. */ #lista .grilla.lista .precio > .rotulo { grid-column: 1 / -1; } /* Los importes NO se parten en dos renglones. Un "$ 22.677,00" cortado despues del signo hace que la fila mida 54px en vez de 40, y encima se lee peor. Las columnas se dimensionaron para el numero mas largo del catalogo. */ #lista .grilla.lista .precio .valor { font-size: 14px; white-space: nowrap; } #lista .grilla.lista .precio .contado { grid-column: 2; margin: 0; padding: 0; border: 0; background: none; flex-direction: row; align-items: center; gap: 6px; } #lista .grilla.lista .precio .contado .e, #lista .grilla.lista .precio .hueco-contado, #lista .grilla.lista .precio .sugerido { display: none; } #lista .grilla.lista .precio .contado .v { font-size: 14px; white-space: nowrap; } /* El descuento va ANTES del importe y no despues: asi el borde derecho de todos los precios de contado queda en la misma vertical, tengan o no descuento. En la vista de tarjetas no se ve (ahi esta sobre la foto). */ .precio .off-l { display: none; } #lista .grilla.lista .precio .off-l { display: inline-flex; order: -1; } #lista .grilla.lista .f-pie { grid-column: 5; grid-row: 1 / -1; margin: 0; padding: 0; border-top: 0; justify-content: flex-end; } #lista .grilla.lista .qty { transform: scale(.88); transform-origin: right center; } #lista .grilla.lista .cargar { padding: 5px 11px; font-size: 12.5px; } #lista .grilla.lista .cargar svg { display: none; } /* CATALOGO MEDIANO (menos de 940px): se va la columna de stock. No se pierde nada: el boton de la derecha ya dice "Sin stock" o "Consultar" cuando no se puede pedir, y "Disponible" es lo que se da por hecho. Sin esto la descripcion quedaba en 60px y no se leia ninguna. */ @container catalogo (max-width: 939px) { #lista .grilla.lista .ficha, #lista .grilla.lista .l-cab { grid-template-columns: 100px minmax(0, 1fr) 274px 176px; column-gap: 12px; } #lista .grilla.lista .f-foto, #lista .grilla.lista .l-cab .l-cab-der { display: none; } #lista .grilla.lista .precio { grid-column: 3; } #lista .grilla.lista .f-pie { grid-column: 4; } } /* CATALOGO ANGOSTO (menos de 760px): la fila se parte en dos. Arriba el codigo y la descripcion; abajo el stock, los dos precios y el boton. La cabecera se esconde: sin columnas no tiene nada que encabezar, y el verde distingue el contado. */ @container catalogo (max-width: 759px) { #lista .grilla.lista .l-cab { display: none; } #lista .grilla.lista .ficha { grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-rows: auto auto auto; row-gap: 4px; padding: 8px 12px; } #lista .grilla.lista .codigo { grid-column: 1; grid-row: 1; } #lista .grilla.lista .titulo { grid-column: 2 / -1; grid-row: 1; } #lista .grilla.lista .detalle-extra { grid-column: 2 / -1; grid-row: 2; } #lista .grilla.lista .f-foto { display: flex; grid-column: 1; grid-row: 3; justify-content: flex-start; } #lista .grilla.lista .precio { grid-column: 2; grid-row: 3; justify-content: start; } #lista .grilla.lista .f-pie { grid-column: 3; grid-row: 3; } } /* CELULAR (catalogo de menos de 520px): no entran los dos precios al lado del boton. El stock sube al renglon del codigo, y abajo quedan los precios --uno arriba del otro-- a la izquierda y el boton a la derecha. */ @container catalogo (max-width: 519px) { #lista .grilla.lista .ficha { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto auto; } #lista .grilla.lista .codigo { grid-column: 1; grid-row: 1; } #lista .grilla.lista .f-foto { grid-column: 2; grid-row: 1; justify-content: flex-end; } #lista .grilla.lista .titulo { grid-column: 1 / -1; grid-row: 2; } #lista .grilla.lista .detalle-extra { grid-column: 1 / -1; grid-row: 3; } #lista .grilla.lista .precio { grid-column: 1; grid-row: 4; grid-template-columns: auto; justify-items: start; row-gap: 2px; } #lista .grilla.lista .precio .lista-fila, #lista .grilla.lista .precio .contado { grid-column: 1; } /* En el celular el descuento vuelve arriba, al lado de "Disponible", como en la tarjeta: al lado del precio no entra junto al boton y bajarlo a otro renglon agrandaba la fila 20px. */ #lista .grilla.lista .precio .off-l { display: none; } #lista .grilla.lista .f-foto .et-off { display: inline-flex; } #lista .grilla.lista .f-pie { grid-column: 2; grid-row: 4; } } /* LOS TITULOS QUE ORDENAN. Se ven como titulo, no como enlace azul subrayado: en una cabecera de tabla todo el mundo sabe que se toca. Las flechitas grises dicen que se puede; la columna activa se pone en color de texto y con una sola flecha que dice hacia donde esta ordenada. */ #lista .grilla.lista .l-cab a { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; color: inherit; text-decoration: none; cursor: pointer; border-radius: 4px; } #lista .grilla.lista .l-cab a:hover { color: var(--texto); } #lista .grilla.lista .l-cab a:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; } #lista .grilla.lista .l-cab a i { font-style: normal; font-size: 9px; line-height: 1; opacity: .45; flex: none; } #lista .grilla.lista .l-cab a i::before { content: "\2195"; } /* flecha doble */ #lista .grilla.lista .l-cab a.on { color: var(--texto); } #lista .grilla.lista .l-cab a.on i { opacity: 1; color: var(--rojo); font-size: 10px; } #lista .grilla.lista .l-cab a.on.sube i::before { content: "\25B2"; } /* A-Z, menor a mayor */ #lista .grilla.lista .l-cab a.on.baja i::before { content: "\25BC"; } /* Z-A, mayor a menor */ /* "DISPONIBLE" EN LA LISTA: SIN EL FONDO BLANCO. Sobre la foto de la tarjeta la pastilla lleva fondo casi blanco para leerse encima de la imagen. En la lista no hay foto, y ese fondo blanco con borde la hacia saltar como un boton en cada renglon. Aca queda igual que el "7 disponibles" de los packs: verde transparente. Las tarjetas no cambian. */ #lista .grilla.lista .f-foto .etiqueta { backdrop-filter: none; } #lista .grilla.lista .f-foto .et-stock { background: var(--verde-tinte); } #lista .grilla.lista .f-foto .et-sinstock { background: var(--superficie-2); } #lista .grilla.lista .f-foto .et-nopedible { background: var(--ambar-tinte); } /* Los dos botones de vista. El activo se marca con fondo, no con color de texto: a esta escala un icono rojo sobre blanco no se distingue de uno gris de un vistazo. */ .vistas { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--borde); border-radius: 9px; background: var(--superficie); align-self: end; } .v-b { display: flex; align-items: center; justify-content: center; width: 30px; height: 28px; border: 0; border-radius: 7px; cursor: pointer; background: none; color: var(--texto-suave); transition: background .14s, color .14s; } .v-b:hover { color: var(--texto); background: var(--superficie-2); } .v-b.on { background: var(--rojo); color: #fff; } .v-b:focus-visible { outline: 2px solid var(--rojo); outline-offset: 1px; } .ficha { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg); box-shadow: var(--sombra); display: flex; flex-direction: column; overflow: hidden; transition: border-color .16s, box-shadow .16s, transform .16s; } .ficha:hover { border-color: var(--rojo); box-shadow: var(--sombra-a); transform: translateY(-2px); } .f-cab { display: flex; align-items: center; gap: 6px; padding: 12px 14px 0; flex-wrap: wrap; } /* El cuerpo absorbe el espacio sobrante, asi el precio y el pie quedan pegados abajo aunque una descripcion sea de una linea y otra de tres. Se hace con flex:1 aca y no con margin-top:auto en dos bloques distintos, porque dos margenes automaticos se reparten el hueco y abren un agujero. */ .f-cuerpo { padding: 10px 14px 0; display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; } .ficha .codigo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; font-weight: 700; color: var(--rojo); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; /* Alto fijo: la pastilla del codigo de fabrica es unos pixeles mas alta que el texto pelado, y sin esto las tarjetas con codigo de fabrica quedaban mas altas que las que no lo tienen. */ height: 21px; } /* El codigo de fabrica, al lado del interno. Se distingue por el fondo y no por el color: son dos codigos con el mismo peso y el cliente busca tanto por uno como por el otro. */ .cod-fabrica { padding: 1px 6px; border-radius: 5px; background: var(--superficie-2); border: 1px solid var(--borde); font-size: 11px; color: var(--texto-2); } /* TODAS LAS TARJETAS MIDEN LO MISMO. Antes cada una crecia con lo que tenia adentro: la que traia precio de contado quedaba mas alta que la que no, y la de descripcion larga mas alta que la de descripcion corta. En una grilla eso se nota enseguida y da sensacion de desprolijidad. Se arregla en tres puntos, y ninguno esconde informacion: 1. El titulo ocupa SIEMPRE dos renglones. Si sobra, se recorta con puntos suspensivos y el nombre completo queda en el atributo title y en la ficha del articulo. 2. La ruta de categoria ocupa siempre un renglon. 3. El bloque del precio reserva el alto del caso mas grande. Cuando el articulo no tiene precio de contado, el hueco queda vacio en vez de subir todo lo de abajo. */ .ficha .titulo { font-weight: 700; line-height: 1.32; font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 2.64em; } .ficha .titulo:hover { color: var(--rojo); } .ficha .marca-txt { font-size: 11.5px; color: var(--texto-tenue); height: 1.5em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* LA DESCRIPCION ADICIONAL. El alto esta RESERVADO, tenga o no texto: si creciera con el contenido, cada tarjeta mediria distinto y la grilla quedaria desprolija. Es el mismo cuidado que ya se tuvo con el precio de contado. Se corta a dos renglones con puntos suspensivos; el texto completo queda en el title, y entero en la ficha del articulo. */ .ficha .detalle-extra { /* El alto va en pixeles y no en em: 2,8em de 11,5px da 32,2 y el navegador redondea distinto segun lo que tenga al lado, asi que las tarjetas quedaban con un pixel de diferencia entre si. */ margin-top: 3px; height: 32px; overflow: hidden; font-size: 11.5px; line-height: 16px; color: var(--texto-suave); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } /* --- Etiquetas de estado ------------------------------------------------ */ .etiqueta { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; padding: 3px 9px; border-radius: 99px; border: 1px solid transparent; white-space: nowrap; } .etiqueta::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: currentColor; } .et-stock { color: var(--verde); background: var(--verde-tinte); border-color: var(--verde-borde); } .et-sinstock { color: var(--texto-suave); background: var(--superficie-2); border-color: var(--borde); } .et-nopedible { color: var(--ambar); background: var(--ambar-tinte); border-color: var(--ambar-borde); } /* LA BONIFICACION, EN NUMERO Y NO EN LA PALABRA "OFERTA". Un cartel que dice OFERTA no se puede verificar y todo el mundo aprendio a ignorarlo; "-10%" es un dato, sale del precio real de las dos listas y el cliente lo comprueba mirando los dos importes de abajo. Va rellena, no en tinte: es lo unico de la tarjeta que se puede perder si no lo ve, y por eso es la unica etiqueta que grita. */ .et-off { color: #fff; background: var(--rojo); border-color: var(--rojo); font-weight: 800; font-variant-numeric: tabular-nums; } .et-off::before { display: none; } /* --- Precios ------------------------------------------------------------ */ .precio { padding: 12px 14px 0; } .ficha .precio { min-height: 96px; } .precio .rotulo { font-size: 10.5px; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; } .precio .valor { font-size: 21px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; } .precio .lista-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .precio .contado { margin-top: 7px; display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border-radius: 8px; background: var(--verde-tinte); border: 1px solid var(--verde-borde); } /* El rotulo va ARRIBA y el importe abajo, no uno al lado del otro. La etiqueta de la lista de contado la escribe el cliente en appsettings y hoy dice "Oferta pagando de contado": puesta al costado partia el numero en dos renglones justo en la cifra que se tiene que leer de un vistazo. */ .precio .hueco-contado { margin-top: 7px; height: 49px; } .precio .contado .e { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--verde); line-height: 1.3; } .precio .contado .v { font-family: var(--tit); font-size: 18px; font-weight: 700; color: var(--verde); font-variant-numeric: tabular-nums; line-height: 1.15; } /* El precio sugerido de reventa. Se calcula en el navegador sobre el precio real; NO sale de ningun lado del ERP y por eso dice "sugerido" con todas las letras. El margen lo elige el cliente en el panel de la izquierda. */ .sugerido { display: none; margin-top: 8px; padding: 6px 10px; border-radius: 8px; background: var(--superficie-2); border: 1px solid var(--borde); font-size: 11.5px; color: var(--texto-suave); } .sugerido.se-ve { display: block; } .sugerido .l { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .sugerido .l b { color: var(--texto); font-variant-numeric: tabular-nums; font-size: 13px; } .sugerido em { font-style: normal; color: var(--texto-tenue); } .sugerido .g { color: var(--verde); font-weight: 700; } /* --- Cantidad y cargar -------------------------------------------------- */ .f-pie { margin-top: 12px; padding: 11px 14px; border-top: 1px solid var(--borde); display: flex; gap: 8px; align-items: center; } .qty { display: inline-flex; align-items: center; flex: none; border: 1px solid var(--borde); border-radius: 9px; background: var(--superficie); overflow: hidden; } .qty button { width: 32px; height: 36px; border: 0; background: none; cursor: pointer; color: var(--texto-suave); font: inherit; font-size: 17px; line-height: 1; } .qty button:hover:not(:disabled) { background: var(--superficie-2); color: var(--rojo); } .qty button:disabled { color: var(--borde-2); cursor: not-allowed; } .qty input { width: 46px; height: 36px; border: 0; background: none; text-align: center; font: inherit; font-size: 14px; font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; -moz-appearance: textfield; } .qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .qty input:focus { outline: none; } .qty:focus-within { border-color: var(--rojo); } .cargar { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; /* 38px, no 36: es el alto EXTERIOR del selector de cantidad (36 de caja mas su borde de un pixel arriba y abajo). Con 36 el pie de las tarjetas sin stock --que no llevan selector-- quedaba dos pixeles mas bajo. */ height: 38px; padding: 0 12px; border: 0; border-radius: 9px; cursor: pointer; background: var(--rojo); color: #fff; font: inherit; font-weight: 700; font-size: 13.5px; } .cargar:hover { background: var(--rojo-h); } /* El borde va por dentro (box-shadow) y no como border: un borde real suma dos pixeles de alto y dejaba las tarjetas sin stock mas altas que el resto. */ .cargar:disabled { background: var(--superficie-2); color: var(--texto-tenue); cursor: not-allowed; box-shadow: inset 0 0 0 1px var(--borde); } /* =========================================================================== PAGINADO =========================================================================== */ /* Paginado numerado. Se muestran la primera, la ultima, la actual y sus vecinas: con 112 paginas, dibujarlas todas seria una tira inutilizable. */ .paginado { display: flex; gap: 7px; align-items: center; justify-content: center; margin-top: 26px; color: var(--texto-suave); font-size: 14px; flex-wrap: wrap; } .paginado a, .paginado span.p { min-width: 38px; height: 38px; padding: 0 11px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--borde); background: var(--superficie); font-size: 13.5px; font-weight: 700; color: var(--texto-2); font-variant-numeric: tabular-nums; } .paginado a:hover { border-color: var(--rojo); color: var(--rojo); } .paginado span.p.on { background: var(--rojo); border-color: var(--rojo); color: #fff; } .paginado .puntos { border: 0; background: none; min-width: 0; padding: 0 2px; color: var(--texto-tenue); } /* =========================================================================== MENU DE CATEGORIAS En escritorio es una columna fija. En celular se pliega: veinte categorias abiertas empujan los articulos fuera de la pantalla, que es exactamente lo que el cliente vino a ver. =========================================================================== */ .contenido.con-menu { display: grid; grid-template-columns: 242px 1fr; gap: 24px; align-items: start; } /* Sin esto, una columna de grilla NO baja del ancho de su contenido --es el min-width:auto por omision-- y un nombre de categoria largo empujaba la pagina entera a lo ancho en el celular. */ .contenido.con-menu > * { min-width: 0; } /* La columna izquierda entera queda fija al desplazar. Lo pegajoso es la columna, no cada caja: si cada una se pegara por su cuenta, se montarian una encima de la otra al llegar al final de la pagina. */ .lat { position: sticky; top: 82px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - 92px); } .menu { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg); padding: 6px; min-height: 0; box-shadow: var(--sombra); /* LAS DOS BARRAS DE DESPLAZAMIENTO, Y POR QUE APARECIAN LAS DOS. Aca habia un "overflow-y: auto" solo. La barra vertical era a proposito --la lista de categorias no entra en la pantalla-- pero la HORIZONTAL aparecia sola, y no por un error de ancho: cuando un eje se declara desplazable y el otro se deja en "visible", el CSS obliga al segundo a volverse "auto" tambien. O sea que pedir barra vertical regala barra horizontal. Ahora el eje horizontal se recorta explicitamente, y la vertical sigue funcionando pero sin dibujarse: se desplaza con la rueda y con el dedo igual que antes. */ overflow-y: auto; /* Va "hidden" y no "clip": el CSS no deja combinar clip en un eje con auto en el otro, y el navegador lo convierte a hidden igual. Mejor escribir lo que de verdad se aplica. */ overflow-x: hidden; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* Edge viejo */ } .menu::-webkit-scrollbar { width: 0; height: 0; } /* Chrome, Safari */ /* Un rubro largo ya no puede empujar el ancho del panel: se corta con puntos suspensivos. Sin esto, recortar el eje horizontal escondería el final del texto en vez de avisar que hay mas. */ .menu .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .menu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 9px 10px; font-family: var(--tit); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); font-weight: 700; } .menu > summary::-webkit-details-marker { display: none; } .menu > summary .flecha { margin-left: auto; transition: transform .2s; color: var(--texto-tenue); } .menu[open] > summary .flecha { transform: rotate(180deg); } .menu > summary .donde { font-family: "Plus Jakarta Sans", sans-serif; text-transform: none; letter-spacing: 0; color: var(--rojo); font-size: 12.5px; } .menu-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--texto-suave); font-weight: 700; padding: 4px 10px 8px; } /* Las categorias van con la tipografia de titulos. Es un indice, no texto corrido: se recorre con la vista saltando de renglon en renglon, y esta letra --mas angosta y con las mayusculas mas marcadas-- se lee mejor asi. */ .menu a { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 8px; line-height: 1.3; font-family: var(--tit); font-size: 14px; font-weight: 600; letter-spacing: .005em; color: var(--texto-2); } .menu a .nom { flex: 1; min-width: 0; } /* --------------------------------------------------------------------------- EL RENGLON DE UN RUBRO SON DOS CONTROLES, NO UNO La flechita despliega y el nombre filtra. Antes eran el mismo y no habia forma de espiar un rubro sin cambiar de pagina. La flecha va POSICIONADA ENCIMA del renglon, no adentro: un