/* ============================================================= EN CORTO — Diseño v3 Capa de estructura y color sobre app.css + app-v2.css Qué resuelve esta capa ------------------------------------------------------------- v2 se ocupó del movimiento, los materiales y la tipografía, y dejó fuera a propósito dos cosas: la ESTRUCTURA (cuánta información lleva cada elemento y en qué orden) y el COLOR (que era fijo, no semántico). De eso va v3. Se carga DESPUÉS de app-v2.css, así que se apoya en sus curvas y sus tiempos en vez de reinventarlos. Las cuatro reglas que mandan ------------------------------------------------------------- 1. Ningún componente escribe un color literal. Pide un token por lo que SIGNIFICA y el tema decide el valor. Es lo que permite que el modo oscuro sean veinte líneas y no una revisión de las 48 pantallas. 2. Todo espacio es múltiplo de 4. Un solo 13px suelto desalinea una columna entera. 3. Nada que se toque mide menos de 44 px, aunque el dibujo sea más pequeño. El área crece con relleno, nunca agrandando el icono. 4. Un elemento de más en la tarjeta es un elemento de menos que se lee. Lo que se quita no se borra: baja a la ficha. ============================================================= */ /* ============================================================= 1 · Espacio, radios y toque ------------------------------------------------------------- La retícula de 4 no es una preferencia estética: es lo que hace que dos pantallas escritas en semanas distintas tengan los mismos márgenes sin ponerse de acuerdo. ============================================================= */ :root { --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e6: 24px; --e8: 32px; --e12: 48px; /* Los radios de app.css se remapean a la escala nueva en vez de añadir otros cuatro: así las decenas de componentes que ya piden --r o --r-lg se corrigen solos. */ --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px; /* El mínimo de Apple, y el de cualquiera que haya visto a alguien fallar tres veces el mismo botón en el camión. */ --toque: 44px; } /* ============================================================= 2 · Color semántico ------------------------------------------------------------- Tres superficies y no dos, porque «fondo» y «tarjeta» no son lo mismo: en claro el fondo se tinta y la tarjeta se queda blanca; en oscuro el fondo es negro puro —el píxel OLED se apaga— y la tarjeta sube un escalón para no desaparecer. --bg el suelo de la página --card tarjetas, barras, paneles --card-2 campos, hojas, lo que flota encima La marca NO cambia de tono: sale del monumento de la Cabeza de Coyote y es la identidad. Lo que cambia es la luminosidad, para que siga siendo legible sobre cada fondo. ============================================================= */ :root { /* Dos correcciones medidas, y las dos son consecuencia del fondo tintado. Sobre blanco pasaban; sobre #F4F1EF no: --muted #857069 4,65:1 sobre blanco → 4,13:1 sobre el fondo --brand #D23814 4,87:1 sobre blanco → 4,33:1 sobre el fondo El umbral de texto normal es 4,5:1. Se corrigen ANTES de encender el fondo nuevo, no después: al revés, el cambio de suelo deja texto ilegible en todas las pantallas a la vez. */ --muted: #7E6960; /* 4,58:1 sobre el fondo · 5,15:1 sobre blanco */ --brand-txt: #C4330F; /* 4,88:1 sobre el fondo · 5,49:1 sobre blanco */ --bg: #F4F1EF; --card: #FFFFFF; --card-2: #FAF6F4; --line: #E7DCD6; --line-2: #F2E8E3; --faint: #8E7A72; } /* --- Oscuro por preferencia del sistema ----------------------- Éste es el estado en el que está casi todo el mundo: quien no ha elegido tema no lleva ningún atributo en la página y sólo se le distingue por prefers-color-scheme. Por eso hacen falta los tres bloques y por eso ningún color puede tener su única definición dentro de un @media. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --brand-txt: #F0603A; --bg: #000000; --card: #131010; --card-2: #1E1917; --line: #2E2422; --line-2: #241C1A; --muted: #A08B83; --faint: #7E6A64; } } :root[data-theme="dark"] { --brand-txt: #F0603A; --bg: #000000; --card: #131010; --card-2: #1E1917; --line: #2E2422; --line-2: #241C1A; --muted: #A08B83; --faint: #7E6A64; } /* Las sombras de app.css empiezan con un anillo de crema que sobre el fondo tintado ya no marca el borde. Se cambia por el color de línea, que es el que separa de verdad. */ :root { --sh-1: 0 0 0 1px var(--line), 0 1px 2px rgba(36,19,16,.05); --sh-2: 0 0 0 1px var(--line), 0 6px 20px rgba(142,42,18,.07); --sh-3: 0 0 0 1px var(--line), 0 12px 34px rgba(142,42,18,.12); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sh-1: 0 0 0 1px var(--line-2), 0 1px 2px rgba(0,0,0,.4); --sh-2: 0 0 0 1px var(--line), 0 6px 20px rgba(0,0,0,.5); --sh-3: 0 0 0 1px var(--line), 0 12px 34px rgba(0,0,0,.6); } } :root[data-theme="dark"] { --sh-1: 0 0 0 1px var(--line-2), 0 1px 2px rgba(0,0,0,.4); --sh-2: 0 0 0 1px var(--line), 0 6px 20px rgba(0,0,0,.5); --sh-3: 0 0 0 1px var(--line), 0 12px 34px rgba(0,0,0,.6); } /* Con el suelo tintado, la tarjeta blanca ya se separa sola: el borde deja de hacer falta y pasa a ser el anillo de la sombra. */ .card, .biz-card { border-color: var(--line); } /* Los enlaces y el texto en color de marca, sobre el suelo tintado, piden el tono corregido. Los botones NO: ahí el rojo es fondo y lleva texto blanco encima, donde #D23814 da 4,87:1. */ a.link, .link, .text-brand, .section-head a, .biz-porque b { color: var(--brand-txt); } /* ============================================================= 3 · Tipografía: jerarquía, no volumen ------------------------------------------------------------- app.css pone los títulos a 800 y los nombres de negocio también. En una cuadrícula de doce tarjetas eso no es jerarquía: son doce gritos. Sólo un elemento por pantalla puede llevar 800. ============================================================= */ h1 { font-weight: 800; } h2 { font-weight: 700; } h3 { font-weight: 700; font-size: 18px; } /* Toda columna de números se alinea por la cifra, no por el borde. */ .stat-grid .v, .adm-tabla td, .pager, .mono, table td.num { font-variant-numeric: tabular-nums; } /* ============================================================= 4 · El mínimo de toque ------------------------------------------------------------- Se agranda el ÁREA, no el dibujo: un icono de 14 px con 15 px de relleno se toca igual de bien que uno de 44 y no desequilibra la fila donde vive. ============================================================= */ .chip .x, .chips .chip .x { position: relative; display: inline-grid; place-items: center; min-width: 22px; min-height: 22px; } .chip .x::after { content: ''; position: absolute; top: 50%; left: 50%; width: var(--toque); height: var(--toque); transform: translate(-50%, -50%); } .nav-movil a, .nav-movil button { min-height: var(--toque); } /* La tarjeta con foto (.bz) vivio aqui hasta que v3 paso a listar en filas. Se quita entera —eran noventa lineas— en vez de dejarla «por si acaso»: codigo muerto es codigo que alguien acaba usando sin saber para que estaba. Si hace falta volver, esta en el historial. La fila esta en la seccion 14. */ /* ============================================================= 6 · El buscador (E-01) ------------------------------------------------------------- Un campo, una lupa y una equis. El boton «Buscar» que habia antes ocupaba un tercio de la barra para hacer lo que ya hace la tecla de intro. ============================================================= */ .busca { display: flex; align-items: center; gap: 9px; min-height: var(--toque); padding: 0 12px 0 14px; border-radius: var(--r); background: var(--card-2); border: 1px solid var(--line); transition: border-color .16s, box-shadow .16s, background-color .16s; } .busca-ico { color: var(--muted); display: flex; flex: none; } .busca input[type="search"] { flex: 1; min-width: 0; border: 0; background: none; outline: 0; /* 16 px y ni uno menos: por debajo, iOS hace zoom al enfocar y deja la pantalla torcida, con el encabezado fuera de cuadro. */ font-size: 16px; color: var(--ink); padding: 11px 0; -webkit-appearance: none; appearance: none; } .busca input::placeholder { color: var(--muted); } /* La equis del navegador se quita: la nuestra tiene area de toque. */ .busca input::-webkit-search-cancel-button { -webkit-appearance: none; } .busca:focus-within { background: var(--card); border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100); } .busca:focus-within .busca-ico { color: var(--brand); } .busca-x { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin-right: -4px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; } .busca-x::after { /* el area de toque, sin agrandar el dibujo */ content: ''; position: absolute; width: var(--toque); height: var(--toque); } .busca-x { position: relative; } @media (hover: hover) and (pointer: fine) { .busca-x:hover { background: var(--line-2); color: var(--ink); } } /* ============================================================= 7 · Los chips de giro (E-02) ------------------------------------------------------------- El carril se desplaza dentro de si mismo. Nunca la pagina: en cuanto el body se mueve de lado, la sensacion es de algo roto. ============================================================= */ .chips-giro { display: flex; gap: var(--e2); margin: var(--e3) 0 var(--e4); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; /* Se sale de los margenes del contenedor y vuelve a meterse con relleno: asi el primer chip empieza alineado con el titulo y el ultimo no queda pegado al borde de la pantalla. */ margin-inline: calc(var(--pad-cont, 20px) * -1); padding-inline: var(--pad-cont, 20px); padding-bottom: 2px; /* Sin esto el carril arranca desplazado 20 px y el primer chip sale cortado. El anclaje se pega al borde del chip, no al del carril, asi que ignora el relleno y lo salta; scroll-padding le dice donde esta el principio de verdad. Se midio: scrollLeft valia 20 nada mas cargar. */ scroll-padding-inline: var(--pad-cont, 20px); } .chips-giro::-webkit-scrollbar { display: none; } .chg { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--r-full); background: var(--card); border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--ink-2); text-decoration: none; white-space: nowrap; transition: transform .14s, background-color .14s, border-color .14s; } /* El area de toque llega a 44 sin que el chip mida 44: se estira por arriba y por abajo con una capa invisible, y la fila sigue midiendo 36. */ .chg::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: var(--toque); transform: translateY(-50%); } .chg { position: relative; } .chg.on { background: var(--brand); border-color: var(--brand); color: #fff; } .chg:active { transform: scale(.96); } @media (hover: hover) and (pointer: fine) { .chg:not(.on):hover { border-color: var(--brand-100); background: var(--brand-050); color: var(--brand-txt); } } /* ============================================================= 8 · La barra inferior (E-04) ------------------------------------------------------------- Translucida y con desenfoque, que es como se sabe que hay contenido debajo y no que la lista se acabo. ============================================================= */ @media (max-width: 900px) { [data-diseno="v3"] .nav-movil { background: color-mix(in srgb, var(--card) 76%, transparent); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); box-shadow: none; } /* Sin desenfoque, el fondo translucido deja leer el texto de debajo a traves de la barra. Ahi vale mas que sea opaca. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { [data-diseno="v3"] .nav-movil { background: var(--card); } } } /* ============================================================= 9 · La cabecera que se encoge (E-05) ------------------------------------------------------------- Al bajar se recoge y deja una barra de 52 px; al subir vuelve. Devuelve una pantalla entera de contenido en un telefono. El disparo es un centinela de 1 px con IntersectionObserver, no un oyente de scroll: un oyente se ejecuta en cada cuadro y es justo lo que hace que una lista larga se sienta pesada. ============================================================= */ @media (max-width: 900px) { [data-diseno="v3"] .site-header { position: sticky; top: 0; z-index: 210; background: color-mix(in srgb, var(--card) 82%, transparent); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); border-bottom: 1px solid transparent; transition: border-color .2s, padding .2s var(--sal, ease); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { [data-diseno="v3"] .site-header { background: var(--card); } } /* La linea de abajo sale solo cuando hay algo que separar. Puesta siempre, en lo alto de la pagina divide dos cosas que ya estaban juntas. */ [data-diseno="v3"] .site-header.encogido { border-bottom-color: var(--line); } [data-diseno="v3"] .site-header.encogido .brand svg { width: 30px; height: 30px; } [data-diseno="v3"] .site-header.encogido .brand-tag { display: none; } [data-diseno="v3"] .site-header .brand svg { transition: width .2s, height .2s; } } /* El buscador viejo del hero: en v3 ya esta arriba, y dos buscadores en la misma pantalla es una pregunta, no una comodidad. */ .searchbar.oculto-v3 { display: none; } /* [hidden] es una declaracion de display:none del navegador, y cualquier display que le pongamos a la clase la gana. La equis se pintaba con el campo vacio por esto: el guion la escondia y la hoja la volvia a ensenar. */ .busca-x[hidden] { display: none !important; } /* ============================================================= 10 · La portada, mas corta ------------------------------------------------------------- Con el buscador arriba, la pastilla de «NUEVO» y el consejo de «busca lo que necesitas» pasan a estorbar: el consejo lo dice ya el propio texto de dentro del campo, y la pastilla es lo que se lee justo antes de lo que se venia a hacer. ============================================================= */ [data-diseno="v3"] .hero-pill, [data-diseno="v3"] .hero .hint { display: none; } [data-diseno="v3"] .hero { padding-top: var(--e4); } [data-diseno="v3"] .hero h1 { font-size: clamp(26px, 6vw, 40px); margin-top: var(--e6); } /* ============================================================= 11 · La lista que se carga sola (E-06, E-07) ============================================================= */ .infinito-centinela { height: 1px; } .infinito-pie { text-align: center; padding: var(--e8) 0 var(--e4); } .infinito-pie p { font-size: 14px; } /* El esqueleto tiene la FORMA de la tarjeta que va a llegar, no una parecida: con otras proporciones la lista da un salto al entrar el contenido de verdad, y ese salto se nota mas que la espera. */ .bz-esq { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); overflow: hidden; } .bz-esq-foto { aspect-ratio: 16 / 9; background: var(--line-2); } .bz-esq-cuerpo { padding: var(--e3) 14px 18px; display: grid; gap: 9px; } .hueso { display: block; height: 12px; border-radius: 6px; background: var(--line-2); position: relative; overflow: hidden; } .hueso.corto { height: 10px; } /* El brillo se mueve con transform, que es lo unico que la tarjeta grafica mueve sola. Animar background-position obliga a repintar en cada cuadro. */ .hueso::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--card) 70%, transparent), transparent); transform: translateX(-100%); animation: hueso-brillo 1.4s infinite; } @keyframes hueso-brillo { to { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { /* Quieto, y solo cambia la opacidad: para quien el movimiento le marea, un brillo que cruza catorce veces por minuto no es un detalle. */ .hueso::after { animation: none; } .bz-esq { opacity: .7; } } /* ============================================================= 12 · El panel (A-01, A-02) ============================================================= */ /* El menu plegable se mudo a `app.css`: existe en los tres disenos, no solo en el tercero. Aqui quedaba invisible para v1 y v2, que pintaban el triangulo por omision del navegador y sin la flecha que gira. */ /* --- Las tablas: densas, que es lo que pide una pantalla grande -------- */ @media (min-width: 1001px) { [data-diseno="v3"] .table { font-size: 13.4px; } [data-diseno="v3"] .table th { padding: 9px 14px; font-size: 11px; } [data-diseno="v3"] .table td { padding: 8px 14px; } /* El encabezado se queda a la vista al bajar. En una tabla de cuarenta filas, saber que columna se esta mirando deja de ser evidente a la fila quince. */ [data-diseno="v3"] .table thead th { position: sticky; top: 0; z-index: 3; background: var(--card-2); box-shadow: inset 0 -1px 0 var(--line); } /* Y el contenedor no puede recortar, o el sticky de dentro deja de pegarse: es el mismo caso que el overflow del documento. */ [data-diseno="v3"] .table-wrap { overflow-x: auto; overflow-y: visible; } } /* Los numeros, alineados por la cifra. Una columna de precios o de vistas con digitos de ancho distinto no se puede comparar de un vistazo. */ [data-diseno="v3"] .table td { font-variant-numeric: tabular-nums; } /* ============================================================= 13 · Lo que se toca, a 44 px ------------------------------------------------------------- Medido con la sonda toque44.js, que mira el area de toque real —incluidas las capas ::after invisibles— y no el dibujo. Estos son los que salian por debajo. ============================================================= */ /* Todo esto va bajo 900 px y no en todas partes: la regla de los 44 px es de dedos. En un escritorio con raton, un boton pequeno se aprieta igual de bien y agrandarlos todos deja el panel con aire de juguete. */ @media (max-width: 900px) { /* Los botones de icono del encabezado: campana, tema, cerrar. Median 38. */ [data-diseno="v3"] .btn-icon { min-width: var(--toque); min-height: var(--toque); } [data-diseno="v3"] .btn { min-height: var(--toque); } /* Las opciones dentro de un panel de filtro. Median 37, y son una lista larga donde fallar significa poner el filtro equivocado. La fila de la rejilla tambien: en un grid, el alto lo manda la fila, y un min-height puesto solo en la opcion la dejaba estirada a los 42,7 px de la fila. Se midio. */ [data-diseno="v3"] .fopts.cols { grid-auto-rows: minmax(var(--toque), auto); } [data-diseno="v3"] .fopts a, [data-diseno="v3"] .fdrop-panel label, [data-diseno="v3"] .col-modos a, [data-diseno="v3"] .fdrop-tabs a { min-height: var(--toque); display: flex; align-items: center; } /* Las fichas de etiqueta de la ficha del negocio: median 40. */ [data-diseno="v3"] .chip { min-height: var(--toque); } /* La excepcion pide un BOTON dentro, no una equis cualquiera. ----------------------------------------------------------------- Hay dos fichas que se parecen y no son lo mismo: · «Tus etiquetas»: la equis es un